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:
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.
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>
<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>
Samsung Galaxy S 4, con reconocimiento ocular y cámara dual Samsung presentó en Nueva York su nuevo buque insignia: el Galaxy S4, un smartphone Android con cámara de 13 megapíxeles, pantalla de 5 pulgadas Full HD Super AMOLED, y capacidades como el reconocimiento ocular y gestual. [15/03/2013 ] - 69 votos
El papel de Intel en el mundo tablet Intel ha mostrado su amplia variedad de chips y plataformas que tiene en el mercado de los tablet. Intel destacan la necesidad de apostar por equipos seguros tanto en el mercado de consumo como en el profesional. Además, deben mantener la esencia de la conectividad y compatibilidad entre dispositivos y plataformas, para lo que el sistema operativo Windows 8 es una de las mejores apuestas. [27/02/2013 ] - 64 votos
MWC13: Qualcomm apuesta por la interconectividad de los dispositivos móviles Qualcomm ha acudido a su cita con el Mobile World Congress con una amplia oferta tecnológica, en la que destaca la recientemente presentada generación de procesadores SnapDragon 800, los avances en su ecosistema AllJoyn y en el Internet en todas las cosas, así como nuevas capacidades de conectividad para dispositivos móviles. [04/03/2013 ] - 57 votos
Versión impresora 
Votar este artículo (0 votos)
