comparte el articulo 

Diseñar un blog con HTML5 – Parte 1

Actualizado el 03/12/2013 < > 0 Comentarios

Resumen: Iniciamos un pequeño instructivo para diseñar la estructura de un blog desde cero, utilizando los nuevos elementos que nos ofrece HTML5

A pesar de que cada vez son más las formas que existen para comunicarnos a través del Internet y las opciones para manejar contenido van en constante crecimiento, el blog sigue ocupando uno de los lugares predilectos en las preferencias de los usuarios de la red mundial. Debido a esta popularidad, es importante tratar de incorporar las nuevas herramientas y estándares que han surgido en el mundo del desarrollo web, a la creación y elaboración del diseño de blogs.

Es común, que gran parte del diseño de tu blog sea totalmente dependiente del tipo de servicio, herramienta de blogging o sistema de gestión de contenidos que hayas escogido, por lo que puede ser difícil planear a detalle el manejo de elementos HTML5 dentro de este código. Sin embargo, existen algunos componentes del diseño que sí puedes modificar y es ahí donde puedes empezar a implementar lo que has aprendido sobre este tema.

En la actualidad ya existen muchas plantillas disponibles para descarga, que cuentan con una estructura elaborada en su totalidad con etiquetas HTML5, si es necesario, puedes descargar alguna de estas y ver la manera exacta en que éstas plantillas aplican los nuevos elementos y crean la compatibilidad para que el código se despliegue de manera adecuada al utilizarlo con tu proveedor de servicios de blog. Sin embargo si tu administrador es flexible, no habrá necesidad de esto.

Implementación de HTML5

Muchas de las nuevas características incorporadas por HTML5 implican el uso de APIs de JavaScript para facilitar el desarrollo de páginas web interactivas. Sin embargo, hay una serie de nuevos elementos que permiten enriquecer en gran medida la semántica de tus páginas web convencionales, haciendo que el contenido mostrado en tu blog tome distintos niveles de relevancia dependientes del elemento utilizado para mostrarlo.

Lo primero que debemos considerar al implementar HTML5 en nuestra página, es el uso de los elementos header, footer y nav para definir la estructura general de ésta. Estos elementos nos permitirán reemplazar la gran cantidad de etiquetas div que se utilizan anteriormente, añadiendo a su vez un valor semántico específico para cada parte de la estructura.

También los formularios que utilizamos dentro de nuestro blog para que los usuarios puedan realizar comentarios, se pueden optimizar en gran medida gracias al uso de HTML5. Un formulario se puede volver mucho más inteligente gracias el uso de los nuevos data types y las funciones de validación disponibles en esta nueva versión de HTML.

De igual manera, HTML5 nos permitirá tener un mejor manejo del contenido mostrado en las entrañas de la página. Gracias al uso del elemento article, podremos definir un mejor marcado para los posts y comentarios que se muestran. Además, podemos hacer uso de los elementos section para mejorar la estructuración de los encabezados jerárquicos, y del elemento time para definir las fechas y horas que mostramos en los posts.

Establecer el DOCTYPE

Lo primero que debemos hacer al iniciar a codificar la estructura de una página, es establecer la declaración de tipo de documento, comúnmente conocido como DOCTYPE. El DOCTYPE es una instrucción que asocia una página web con una definición de tipo de documento (DTD), como por ejemplo, la definición formal de una determinada versión de HTML.

Cuando HTML5 es utilizado como HTML sin formato, no necesita de un DOCTYPE, caso contrario a XHTML que siempre necesitaba de uno. Sin embargo, actualmente todos los navegadores necesitan que esta declaración este presente en el código, ya que en caso de no encontrarla toman de forma automática el modo de compatibilidad Quirksmode, lo que puede causar grandes conflictos con el manejo de HTML5.

Es por esta razón que HTML5 hace uso de una declaración DOCTYPE muy corta y fácil de recordar. Todo lo que contiene es el nombre de la etiqueta del elemento raíz del documento, HTML. En otras palabras, la declaración necesaria es simplemente la siguiente línea “DOCTYPE html”.

Algunos sitios presumen utilizar HTML 5, cuando en realidad lo único que han hecho es tomar el código ya existente y cambiarle el DOCTYPE. Esto no está del todo mal, siempre y cuando se haya utilizado código semánticamente válido para HTML5, es decir no utilizar etiquetas de HTML4 en desuso o hacer arreglos que van en contra del estándar.

Publicado el 04/11/2013, última actualización 03/12/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras