SEGURIDAD | Artículos | 01 NOV 2011

Curso de programación Web con HTML 5 (IV)

En la práctica
Jaime Peña.
Con lo actualmente expuesto en nuestro curso de HTML 5, proponemos la realización de un pequeño proyecto. Se trata de una aproximación a un blog simple. Para ello emplearemos etiquetas básicas y elementos de CSS 3 y nuestro objetivo será pasar las pruebas de validación del W3C.

Diseño de páginas mediante HTML 5
Se trata de definir el aspecto y determinar los apartados de una página Web. De la misma manera que diseñamos una plantilla para cualquier tipo de documentos, los del tipo HTML deberían atenerse a una preconcebida y no salir de una redacción aleatoria y atropellada. A lo largo del tiempo se han hecho numerosos intentos por mejorar los diseños, y con la propuesta HTML 5 no sólo se ha aprovechado lo mejor de las experiencias sino que también se proporcionan etiquetas bien específicas y claras para aplicar en cada caso.
Hasta el presente disponíamos de la etiqueta <div>, prácticamente en exclusiva, actualmente, con HTML 5 cómo comentábamos, disponemos además de etiquetas específicas para aplicar a las diversas partes y tipos de contenidos de una página, lo que nos da una mayor claridad en el diseño y mantenimiento y evitamos lo que se podría venir a denominar la dividitis del lenguaje HTML, un todo revuelto con aperturas y cierres de una misma etiqueta (tiempo atrás se criticaba, mucho más duramente, el abuso en el uso de tablas para el mismo fin, por la confusión que creaba en el diseño)
Repasando lo visto en los artículos publicados, las etiquetas de diseño de páginas y apartados disponibles actualmente en HTML 5, nos encontramos con:

Etiqueta Descripción HTML 5
div División genérica de un documento. Uso polivalente como contenedor -
section Marca una sección fundamental del documento X
article Marca un área de contenido fundamental dentro de una sección X
header Acota la cabecera del documento o área X
footer Acota el pie de página del documento o área X
nav Acota un área con entradas de navegación (hiperenlaces o menús) X
aside Marca un área de contenido colateral, no fundamental, dentro de una sección X
menu Define y acota una lista o menú de comandos. Por el momento no es soportada por ninguno de los navegadores X

NOTA: La columna HTML 5 indica si la etiqueta es nueva en HTML 5; en cuanto a div, aunque no es nueva es plenamente válida, pero se sugiere su no utilización cuando haya etiquetas más específicas para acotar áreas

A modo de ejemplo simple, podemos partir de la siguiente maqueta para el diseño de nuestras páginas Web:

Listado X.
Maqueta de una página sencilla

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Maqueta de una página</title>
</head>
<body>
<header> </header>
<nav> </nav>
<section> </section>
<footer> </footer>
</body>
</html>

Dentro de la etiqueta <section> … </section>, podríamos situar etiquetas article y aside, para acotar áreas de contenidos relevantes y colaterales, respectivamente, de conformidad con las directivas HTML 5. Apuntamos que podremos tener varias etiquetas section y, por supuesto, utilizar etiquetas div, inespecíficas, para integras otros elementos como barras de separación o más textos que no cumplan con ninguna de las recomendaciones para las restantes etiquetas nuevas de HTML 5.

Posicionamiento y dimensionado de elementos mediante CSS 3
El posicionamiento y el dimensionado de elementos se definen mediante estilos, entre otras con la propiedad position, que puede tener los siguientes valores:

Valor Descripción
static Los elementos se posicionan secuencialmente en el documento. (Valor por defecto)
absolute Los elementos se posicionan con relación absoluta relativa al primero que ha sido posicionado; no cuentan los elementos estáticos.
fixed Los elementos se posicionan con relación a la ventana del navegador.
relative Los elementos se posicionan relativamente a la posición que les correspondería, por ejemplo, si además se especifica "left:25px" se posicionará 25 pixeles a la izquierda de su posición normal. (Véase a continuación)
inherit El modo de posicionamiento se heredará/recuperara del elemento padre en la CSS.

Algunas otras de las propiedades que nos interesan especialmente para el posicionamiento y el dimensionado son:

left: separación del borde izquierdo, medido generalmente el pixeles
top: separación del borde superior, medido generalmente el pixeles
width: ancho del elemento, medido generalmente el pixeles
height: alto del elemento, medido generalmente el pixeles

Con las dos primeras fijamos la posición, con las dos siguientes fijamos su dimensión. Otras posibles unidades de medida son cm, in, mm,… o bien en % o auto (valor por defecto, que posiciona automáticamente, según el flujo del documento). También se admiten valores negativos, que tienen su sentido en algunos valores dados a la propiedad position, por ejemplo, y permiten solapamientos y otros efectos. Finalmente, entre otras propiedades que pueden resultar útiles, se encuentran rigth y bottom, equivalentes a left y top, pero relativas a los bordes derecho e inferior, respectivamente.
Como ejemplo, observa la siguiente porción de código que nos fija la posición absoluta de dos elementos en el documento. El primero de ellos es un área tipo article ajustada a la izquierda a 230 pixeles del borde izquierdo de la ventana y a 150 del borde superior; además hemos determinado sus dimensiones de 315 por 195 pixeles. El segundo es un hr, barra de separación, posicionada en (300, 320) y de dimensiones 315 por 2 pixeles, lo que le dará un aspecto horizontal.

<article style=”position: absolute;left: 320px; top: 150px; width: 315px; height: 195px”>
<h3>Cabecera de artículo 1</h3>
<p>Añadir contenido aquí</p>
</article>
<hr style=”position: absolute; left:300px; top: 320px; width: 315px; height: 2px/>

Listado X.
Posicionamiento y dimensionado de un par de elementos mediante CSS

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Maqueta de una página</title>

<style type=”text/css”>
article
{
border:2px solid #ff0000;
background:#eeeecc;
}
</style>

</head>
<body>
<header> </header>
<nav> </nav>
<section>

<article style=”position: absolute;left: 320px; top: 150px; width: 315px; height: 195px”>
<h3>Cabecera de artículo 1</h3>
<p>Añadir contenido aquí</p>
</article>

<hr style=”position: absolute; left:300px; top: 320px; width: 315px; height: 2px/>

</section>
<footer> </footer>
</body>
</html>

Una maqueta funcional
Al comienzo del artículo hablábamos del posicionamiento y el diseño de páginas Web mediante etiquetas HTML 5. En el presente apartado desarrollaremos una maqueta de una página completa, con todos los apartados que podríamos necesitar para un desarrollo sencillo.
Una primera versión la codificaremos exclusivamente con etiquetas div, en otra segunda utilizaremos, donde corresponda, las nuevas etiquetas proporcionadas por HTML 5. Los listados se muestran a continuación y el resultado, igual en ambos casos, se recoge en la figura mostrada al comienzo del artículo, en el apartado Diseño de páginas mediante HTML 5.

Listado X.
Maqueta utilizando exclusivamente etiquetas div

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Maqueta de un blog</title>

<style type=”text/css”>
.borde
{
border:2px solid #ff0000;
background:#cceeee;
}
</style>

</head>
<body>

<div class=”borde”>
<form method=”get” action=”http://www.google.com/search”>
<input type=”text” name=”q” size=”15” maxlength=”255” value=”” placeholder=”Escribir aquí”/>
<input type=”submit” value=”Buscar en IDG”/>
<input type=”hidden” name=”sitesearch” value=”www.idg.es”/>
</form>
<h1 style=”text-align:center;color:#0000ff;”><i>IDG Communications</i></h1>
</div>

<div class=”borde”>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
</div>

<hr>

<div>

<div class=”borde” style=”width: 230px”>
<ul>
<li>.........</li>
<li>.........</li>
<li>.........
<ol>
<li>.........</li>
<li>.........</li>
</ol>
</li>
<li>.........
<ol>
<li>.........</li>
<li>.........
<ul>
<li>.........</li>
<li>.........</li>
</ul>
</li>
<li>.........</li>
<li>.........</li>
</ol>
</li>
<li>.........</li>
</ul>
</div>

<div style=”position:absolute; left: 275px; top: 155px; width: 1px; height:60px”>
<hr style=”height: 60px; width:1px”/>
</div>

<div class=”borde” style=”position: absolute;left: 300px; top: 150px; width: 615px; height: 195px”>

</div>
<hr style=”position: absolute; left:300px; top: 320px; width: 315px; height: 2px”/>

<div style=”position:absolute; left: 275px; top: 355px; width: 1px; height:60px”>
<hr style=”height: 60px; width:1px”/>
</div>

<div class=”borde” style=”position: absolute;left: 300px; top: 350px; width: 615px; height: 195px”>

</div>
<hr style=”position: absolute; left:300px; top: 515px; width: 315px; height: 2px”/>

<div style=”position: absolute; left:940px; top: 150px; width: 1px; height: 500px”>
<hr style=”height: 500px; width: 1px”/>
</div>

<div class=”borde” style=”position: absolute;left: 975px; top: 150px; width: 250px; height: 500px”>

</div>

</div>

<div class=”borde” style=”width: 230px”>

<a href=”http://www.w3.org/html/logo/”>
<img src=”http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png” width=”165” height=”64” alt=”HTML5 Powered with CSS3 / Styling, and Semantics” title=”HTML5 Powered with CSS3 / Styling, and Semantics”>
</a>
<br/>
<a href=”http://jigsaw.w3.org/css-validator/check/referer”>
<img style=”border:0;width:88px;height:31px”
src=”http://jigsaw.w3.org/css-validator/images/vcss-blue”
alt=”¡CSS Válido!” />
</a>

</div>

</body>
</html>

Listado X.
Maqueta utilizando etiquetas nuevas en HTML 5

<!DOCTYPE HTML>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Maqueta de un blog</title>

<style type=”text/css”>
header,nav,article,footer,aside
{
border:2px solid #ff0000;
background:#eeeecc;
}
</style>

</head>
<body>

<header>
<form method=”get” action=”http://www.google.com/search”>
<input type=”text” name=”q” size=”15” maxlength=”255” value=”” placeholder=”Escribir aquí”/>
<input type=”submit” value=”Buscar en IDG”/>
<input type=”hidden” name=”sitesearch” value=”www.idg.es”/>
</form>
<h1 style=”text-align:center;color:#0000ff;”><i>IDG Communications</i></h1>
</header>

<nav>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
<a> </a>
</nav>

<hr>

<section>

<article style=”width: 230px”>
<ul>
<li>.........</li>
<li>.........</li>
<li>.........
<ol>
<li>.........</li>
<li>.........</li>
</ol>
</li>
<li>.........
<ol>
<li>.........</li>
<li>.........
<ul>
<li>.........</li>
<li>.........</li>
</ul>
</li>
<li>.........</li>
<li>.........</li>
</ol>
</li>
<li>.........</li>
</ul>
</article>

<div style=”position:absolute; left: 275px; top: 155px; width: 1px; height:60px”>
<hr style=”height: 60px; width:1px”/>
</div>

<article style=”position: absolute;left: 300px; top: 150px; width: 615px; height: 195px”>

</article>
<hr style=”position: absolute; left:300px; top: 320px; width: 315px; height: 2px”/>

<div style=”position:absolute; left: 275px; top: 355px; width: 1px; height:60px”>
<hr style=”height: 60px; width:1px”/>
</div>

<article style=”position: absolute;left: 300px; top: 350px; width: 615px; height: 195px”>

</article>
<hr style=”position: absolute; left:300px; top: 515px; width: 315px; height: 2px”/>

<div style=”position: absolute; left:940px; top: 150px; width: 1px; height: 500px”>
<hr style=”height: 500px; width: 1px”/>
</div>

<aside style=”position: absolute;left: 975px; top: 150px; width: 250px; height: 500px”>

</aside>

</section>

<footer style=”width: 230px”>

<a href=”http://www.w3.org/html/logo/”>
<img src=”http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png” width=”165” height=”64” alt=”HTML5 Powered with CSS3 / Styling, and Semantics” title=”HTML5 Powered with CSS3 / Styling, and Semantics”>
</a>
<br/>
<a href=”http://jigsaw.w3.org/css-validator/check/referer”>
<img style=”border:0;width:88px;height:31px”
src=”http://jigsaw.w3.org/css-validator/images/vcss-blue”
alt=”¡CSS Válido!” />
</a>
</footer>

</body>
</html>

Validación de documentos
HTML 5 y CSS
Todo documento HTML debería validarse para tener la garantía de que cumple con los estándares del W3C. El lugar oficial de validación debemos considerarlo el Markup Validation Service del W3C (World Wide Web Consortium), cuya dirección Web es http://validator.w3.org y que se muestra en la figura adjunta.

En él nos encontraremos con tres opciones de validación:
Validar el contenido de una dirección URL
Validar un archivo HTML que subiremos desde, por ejemplo, nuestro ordenador
Validar porciones de código directamente

También es posible llevar a cabo la validación desde una página Web ya cargada en algunos navegadores. Aquí encontramos diferencias importantes:
- Opera nos proporciona la opción más sencilla y directa. Basta pulsar con el botón derecho del ratón sobre la página abierta en él y seleccionar la opción Validar.
- Microsoft Internet Explorer es menos directo, pero tiene las opciones de Herramientas de programación más potentes, desde las que podremos acceder también a la validación de los documentos abiertos en él.
- Tanto Google Chrome como Mozilla Firefox no disponen de accesos directos para la validación de documentos, por lo que hemos de acudir a la página del W3C manualmente.
- http://validator.w3.org/. es la fuente oficial del W3C (Markup Validation Service), permite validar documentos alojados en nuestro ordenador o cargados en nuestro navegador
- http://jigsaw.w3.org/css-validator/. es el validado oficial del W3C para CSS 2.1, no existe aun un foro de validado oficial para CSS 3
- Adobe Browserlab (https://browserlab.adobe.com), permite ver cómo se comportan los diferentes navegadores

Listado X.
Código para insertar la imagen oficial de
documento validado CSS genérico y para HTML 5 y CSS 3
<p>
<a href=”http://www.w3.org/html/logo/”>
<img src=”http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png” width=”165” height=”64” alt=”HTML5 Powered with CSS3 / Styling, and Semantics” title=”HTML5 Powered with CSS3 / Styling, and Semantics”>
</a>
<br/>
<a href=”http://jigsaw.w3.org/css-validator/check/referer”>
<img style=”border:0;width:88px;height:31px”
src=”http://jigsaw.w3.org/css-validator/images/vcss-blue”
alt=”¡CSS Válido!” />
</a>
</p>

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información