Lenguajes de Marcas: octubre 2011

lunes, 31 de octubre de 2011

Un pequeño repaso a XHTML como puente hasta el XML

XHTML

Introducción

En sus inicios, el lenguaje HTML fue ampliamente adoptado por la comunidad, lo que dio lugar a que el HTML empezase a crecer incorporando etiquetas nuevas, pero sin demasiado control. Esto provocó que determinados contenidos sólo fuesen accesibles desde determinados navegadores. Por tanto, esta falta de estandarización dio lugar a que el hTML dejase de ser tan sencillo como era en un principio.

Es en ese momento, cuando XML hace su aparición, y se postula como alternativa al caos generado por el crecimiento de HTML. Sin embargo, XML está orientado al intercambio de información más que a la presentación de la misma. Como solución se propone utilizar una combinación de XML y HTML y de esta forma y de un modo natural surge XHTML (eXtensible Hypertext Markup Language), como dialecto de XML, pero con las características orientadas a presentación de información en HTML

Por tanto, una de las principales diferencias es que HTML proviene de SGML mientras que XHTML proviene de XML, lo que condiciona su sintaxis, entre otras características

Ventajas respecto del HTML

Las principales ventajas del XHTML sobre el HTML son:

· Se pueden incorporar elementos de distintos espacios de nombres XML (como MathML y Scalable Vector Graphics).

· Un navegador no necesita implementar heurísticas para detectar qué quiso poner el autor, por lo que el parser puede ser mucho más sencillo.

· Como es XML se pueden utilizar fácilmente herramientas creadas para procesamiento de documentos XML genéricos (editores, XSLT, etc.).

Sintaxis

Debe existir un único elemento raíz llamado <html>

Se debe incluir una instrucción de procesamiento XML para indicar la versión de XML y la codificación de caracteres usada

<?xml version=”1.0” encoding=”UTF-8”?>

Debe existir una declaración de Doctype para poder validar el documetno frente al DTD correspondiente. Por ejemplo

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” >

Las etiquetas de apertura deberán tener su correspondiente par de cierre teniendo en cuenta los posibles anidamientos de etiquetas.

Como XML diferencia entre mayúsculas y minúsculas las etiquetas válidas en XHTML deberán ir siempre en minúsculas

Los valores de los atributos se escriben siempre entre comillas dobles

Elementos vacíos que en HTML son correctos como <br>, en XHTML deben escribirse como <br/> ocomo <br></br>

Versiones

El lenguaje XHTML surgió a partir de la versión HTML 4.0 alrededor del año 2000 y se denominó XHTML 1.0. A partir de entonces se empezaron a desarrollar algunas nuevas versiones como el XHTML 1.1 (en 2001) Posteriormente, se desarrollaron borradores de nuevas versiones, como la 1.2 o la 2.0 que nunca llegaron a estandarizarse y a usarse ampliamente. En la actualidad, se está trabajando sobre XHTML 5.0

Para la versión 1.0 existen varias versiones dependiendo de lo restrictivo que se quiere que sea el DTD correspondiente. Existen las siguientes versiones:

- Transitional: en este caso se permite el uso de algunos elementos que están en desuso o desaconsejados(del inglés deprecated) como por ejemplo, <center> o <font>

- Strict: este, sin embargo, no permite incluir los elementos marcados por la W3C como deprecated

- Frameset: permite escribir documentos XHTML usando marcos.

Por otro lado, la versión 1.1 surge para dotar a la versión 1.0 de modularidad. De esta forma, se permite el uso de módulos externos combinados con XHTML 1.1. Una segunda edición de la versión 1.1 se publicó por parte del W3C en 2010 para corregir algunas erratas en la especificación original e incluir el uso de XML Schema

Apéndice

El estándar XHTML indica en un apéndice informativo una manera de escribir XHTML de modo tal que los navegadores actuales que sólo entienden HTML, lo procesen como si fuera éste. Para esto se deberá crear un documento con algunas restricciones y consideraciones, y servirlo con el «content-type» text/html, en vez del correcto para XHTML.

Algunas de las reglas propuestas para que XHTML «parezca» HTML son:

· No usar instrucciones de proceso.

· Los elementos vacíos (como <br>) deberán escribirse <br />, es decir en forma abreviada y con un espacio antes de «/».

· No se debe utilizar la forma abreviada para elementos no vacíos que no tengan contenido, es decir: no se debe escribir <p/>.

Para algunos autores, la inclusión de este apéndice en el estándar fue un error y consideran que es un error usar XHTML de esta manera.

Diferencias entre HTML y XHTML

La siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. Muchas de estas diferencias vienen con el cambio de ser una aplicación SGML a ser una aplicación del más estricto XML:

Los elementos vacíos deben cerrarse siempre:

Incorrecto: <br>
Correcto: <br></br> o <br/> o <br />

Nota: Cualquiera de las tres formas es válida en XHTML. Para compatibilidad según el "Apéndice C" debe usarse <br />.

Los elementos no vacíos también deben cerrarse siempre:

Incorrecto: <p>Primer párrafo<p>Segundo párrafo
Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p>

Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre último, debe cerrarse primero).

Incorrecto: <em><strong>Texto</em></strong>
Correcto: <em><strong>Texto</strong></em>

Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles).

Incorrecto: <td rowspan=3>
Correcto: <td rowspan="3">
Correcto: <td rowspan='3'>

Los nombres de elementos y atributos deben ir en minúsculas.

Incorrecto: <A HREF="http://www.domname.com">Domname</A>
Correcto: <a href="http://www.domname.com">Domname</a>

No está permitida la minimización de atributos (se usa el nombre del atributo como valor).

Incorrecto: <textarea readonly>Solo-lectura</textarea>
Correcto: <textarea readonly="readonly">Solo-lectura</textarea>

Los atributos desaprobados en HTML 4.01 no forman parte de XHTML.

Incorrecto: <font color="#0000FF">Blue text</font>
Correcto: <span style="color: #0000FF;">Blue text</span>

Reglas para DTDs estrictos

§ El texto no debe ser insertado directamente en el cuerpo (dentro de la etiqueta body).

· Incorrecto: <body>Texto plano</body>

· Correcto: <body><span>Texto plano</span></body>

§ No se deben insertar elementos de bloque dentro de elementos de línea.

· Incorrecto: <em><h2>Título</h2></em>

· Correcto: <h2><em>Título</em></h2>

Actividades

- Reescriba el documento HTML de la actividad global anterior usando XHTML.

- Compruebe que el documento sea válido usando, por ejemplo, el validador del consorcio W3

Validadores y ejercicios para ir realizando

Hola a todos

Hoy vamos a hablar de los validadores, de cómo nos ayudan a cumplir con los estándares y de cómo conseguir a partir de ellos las pegatinas que nos dicen que seguimos los estándares:

Los códigos que vamos a usar para ello son los siguientes:

HTML Transicional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Prueba</title>

</head>

<body>

<h1> Lenguajes de marcas

Con estilo</h1>

<h2>Por Alfredo de la Presa Cruz</h2>

</body>

</html>

HTML 4.01 Estricto

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Documento sin título</title>

</head>

<body>

<h1>Prueba cib xhtml1.0 de Alfredo de la Presa</h1>

</body>

</html>

Estos dos elementos se pueden validar en http://validator.w3.org/

CSS

La siguiente prueba es con el validador, pero no ya de html, sino de CSS

h1 {

border : 1px solid black;

font-family : Old English Text MT, Arial;

padding : 10px 10px;

margin : 2px 2px;

font-weight : bold;

font-size : 45px;

text-align : center;

color : green;

text-transform : uppercase;

word-spacing : 12px;

}

h2 {

border : 1px solid black;

font-family : PAlatino Linotype, Arial;

padding : 10px 10px;

margin : 2px 2px;

font-weight : bold;

font-size : 24px;

text-align : center;

color : green;

text-transform : uppercase;

word-spacing : 8px;

}

body {

background-color : rgb(88.0%, 88.0%, 88.0%);

font-size : 4000%;

font-family : Old English Text MT;

color : black;

font-weight : bold;

text-align : center;

}

Y tiene lugar en la dirección http://jigsaw.w3.org/css-validator/

Los resultados de las validaciones anteriores son las siguientes imágenes

Validación HTML 4.01 Transicional

Validación HTML 4.01 Estricto:

Validacion CSS

Ejercicios propuestos

1- Conseguir que la portada del sitio web se amolde a los parámetros de html 4.01 Estricto y validarla con el servicio de validación de W3C

2- Crear una hoja de estilo que esté validada con el servicio de validación de W3C

3- Dado el siguiente documento HTML base:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.0rg/TR/html4/strict.dtd>

<html>

<head>

<title> Documento HTML Lorem Ipsum</title>

</head>

<body>

<h1> Texto Lorem Ipsum</h1>

<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

</p>

<p>

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.

<a href=http://es.wikipedia.org/wiki/Lorem_ipsum>Texto original</a>

</p>

</body>

</html>

Incorpore una imagen con ancho de 200 píxeles
Cree una nueva cabecera <h1>
Incorpore un nuevo enlace a una página web
Bajo esa cabecera cree dos párrafos
Incorpore una lista ordenada
Cree una hoja de estilos e incorpórela en el documento HTML. Dar los siguientes estilos:

Cambiar el tamaño de la fuente de los párrafos a 9 puntos.
Añadir un borde a la imagen de 5px de color blanco (border: 5px solid #fff ;)
Asignar un “id” a un párrafo y modificar únicamente el estilo de éste cambiando el color de la fuente a rojo (Color:red;)
Crear una clase nueva y asignar dos párrafos a esa clase y cambiar el estilo del mismo modificándolo a negrita (font-weight: bold;)

Valide todos los cambios usando un validador online como el del W3C

Saludos,

Alfredo de la Presa Cruz

miércoles, 26 de octubre de 2011

Segundo ejercicio de CSS

Hola a todos

Aquí hay un enlace a una página web muy sencilla. Intenta emular los estilos que hay en ella.

Saludos,
Alfredo

Ejercicio de clases de css

Hola a todos
Incluyo aquì un ejercicio de clases de css

Crea un índice con las 26 letras del alfabeto
Cada letra tendrá un vínculo que nos llevará a la definición y uso de las etiquetas html que empiecen con esa letra.
Cada una de estas 26 secciones tendrá un formato de párrafo distinto que vendrá dado en una hoja de estilo externa.
El formato de cada clase de párrafo controlará los siguientes elementos:
- Color
- Color de fondo
- Tamaño de letra
- Tipo de letra
- Espacio entre líneas
- Borde Tamaño y color del mismo

Saludos,
Alfredo
Cada letra del índice debe agrandarse cuando se pase el ratón por encima de ella.

Saludos,
Alfredo

domingo, 23 de octubre de 2011

Manual explicando las bases de CSS

Hola a todos
En la siguiente dirección web tenemos el pequeño manual con las bases de css, que vamos a ir siguiendo para empezar:

http://jorgesanchez.net/web/css1.pdf

Saludos,
Alfredo

Otro ejemplo de estilo incrustado en la cabecera del documento. Paso a hoja externa

Hola a todos
Comprobamos, mediante un archivo html, que el siguiente código nos formatea el texto. Intentamos encontrar maneras alternativas de formatear el código.

Por otro lado, una vez comprobado que el código funciona correctamente, crea una hoja css externa con la información de estilo y enlázala con una página web HTML creada por ti para la ocasión, mediante el comando <link href="miestilo.css" rel="stylesheet", type="text/css">

Aclaraciones:

Para establecer que una hoja de estilo es preferida, se deberá utilizar rel con el valor stylesheet y nombrarla mediante el atributo title

Ejemplo:

< link href="miestilo.css" rel="stylesheet" type="text/css">

Para especificar que una hoja de estilos es alternativa, el atributo rel deberá establecerse a alternate stylesheet e identificarla mediante el atributo title

Ejemplo:

Saludos,

Alfredo

Ejemplo de uso de estilos incrustados en la cabecera de HTML y XHTML

Hola a todos,
Comprueba y modifica el código siguiente, de tal forma que al pulsar sobre la inicial de tu nombre, te lleve a la página web personal que más te interese:

Saludos,

Alfredo

Ejemplo de uso del atributo style

Hola a todos
El siguiente ejemplo introduce información de estilo mediante el atributo style. Prueba a ver qué opciones puedes tener modificando los valores del estilo:

Saludos,
Alfredo

Las capas

Hola a todos
Las capas se pueden definir como páginas que se pueden incrustar dentro de otras. Los atributos de una capa (posición, visibilidad, etc), como los de cualquier otro elemento HTML, pueden definirse dentro de una hoja de estilo (que es como comúnmente más se utilizan)
Su contenido, en cambio, siempre deberá ser especificado dentro de la parte principal de la página. Como se puede ver, se está siguiendo la filosofía de separar el contenido y la forma de representarlo.
La única manera común de definir capas para distintos navegadores es mediante hojas de estilo. (De las cuales hablaremos en los siguientes posts)
La definición de una capa sigue la misma estructura que la que se usa para decidir las características de una etiqueta con el atributo id:
<STYLE TYPE="text/css">
#lacapa{postition:absolute;top:80px;left:10px;}
</style>
Esto colocaría la capa que se ha denominado lacapa a 10 píxeles de la izquierda de la página y a 80 píxeles del comienzo de la misma. Pero, ¿dónde se escribirá lo que se desea que contenga la capa? Para ello se utilizará el elemento ID
<div id="lacapa">
<h1>El título de la capa</h1>
<p>Aquí es donde iría el texto
...
</div>
Crea un archivo HTML EjemploCapa con este código y comprueba que funciona correctamente

Otra forma de insertar capas es utilizar el elemento Span en lugar del elemento div, compatible con mayor número de navegadores.
Las capas que se han definido se colocan en una posición determinada de la página. Pero existe otro tipo de capas llamadas flotantes cuya colocación depende, en cambio, de la posición dentro del código fuente de la página donde se las haya colocado. Pueden definirse de la manera siguietne:
<style type="text/css">
#flotante {position: relative; left:20px; top:100px;}
<style>

Saludos,
Alfredo

martes, 18 de octubre de 2011

Ejemplo de página con dos marcos verticales

Hola a todos

<html>
<!DOCTYPE HTML PUBLIC="-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<head><title>Marcos verticales</title>
</head>
<frameset cols="*,*">
<frame name="izquierdo" src="miizquierdo.htm">
<frame name="derecho" src="mderecho.htm">
<noframes>
<body>
<p> Esta página usa marcos, pero su navegador no los admite. </p>
</body>
</noframes>
</frameset>
</html>

Utiliza este código para conseguir una página web que simule dos páginas de un libro

Vamos ahora con un ejemplo en el que se dibujab dos marcos horizontales

<html>
<!DOCTYPE HTML PUBLIC="-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<head><title>Marcos verticales</title>
</head>
<frameset rows="*,*">
<frame name="superior" src="superior.htm">
<frame name="inferior" src="inferior.htm">
<noframes>
<body>
<p> Esta página usa marcos, pero su navegador no los admite. </p>
</body>
</noframes>
</frameset>
</html>

Ejercicio: Realizar el código que permita dividir la pantalla en cuatro frames de igual longitud. Las páginas que carguen, deberán tener el texto descriptivo, por ejemplo, "marco superior izquierdo", "marco superior derecho", "marco inferior izquierdo", "marco inferior derecho"

Ejercicio: Buscar el uso de la etiqueta <BASE> y especificar el atributo con el que se podría cambiar el destino de los hipervínculos

Saludos,
Alfredo