En este post voy a intentar analizar una web construida en 3 columnas que existe actualmente y está programada en HTML4 y como se haría pensando en el nuevo estándar.El ejemplo que vamos a tomar como base es la web de una comunidad de la cual soy administrador: www.opencmshispano.com. Para empezar con el análisis vamos a tomar como base la portada de la web.A continuación podéis ver como es actualmente:Lo primero que debemos pensar es buscar los distintos bloques a nivel semántico definidos por HTML5 en la web, para ello en la siguiente imagen he señalado los bloques de distintos colores . En rojo tenéis la cabecera y el pie, en naranja los bloques de navegación "nav" y en verde las distintas secciones "section".Como podéis ver, en esta pantalla principal del portal tenemos numerosas secciones, digamos que serían como las secciones principal del portal. Cada una de ellas tiene un significado y todas ellas podrían tener un título de encabezado. En ningún caso ninguna de ellas se encuentran relacionadas. Las secciones detectadas son:Listado de noticias principalListado de articulos de Technology For Solutions2 bloques de listado de bannersUn bloque de las últimas entradas en el blogUn bloque de enlaces de interés relacionados con la comunidad.Igualmente podemos ver como hemos detectados 4 bloques de navegación:Menú principal situado en la columna de la izquierda.Menú de acceso rápido a las herramientas adicionales a la web como son el foro, el blog y las FAQMenú de navegación a otras secciones de la web basadas en iconos, como son el link a la home, al mapa web, al formulario de contacto y las RSSEnlaces en el pie a los textos legales que suelen acompañar a todas las web con las normas de uso y la política de privacidad.Por último, los dos bloques quizás más claros de todos, la cabecera y el pie, comunes en todas las páginas y donde introduciremos información relevante del portal como el nombre de la comundiad, la publicidad principal del portal o los agradecimientos situados en el pie.Hasta el momento hemos comentado la división "semántica" del portal, pero evidentemente existe otro tipo de división, la visual. Como vemos la web está estructurada en 3 columnas, para ellos, y salvo que se me escape, tenemos que seguir usando los divs para la creación de este tipo de bloques visuales. Para ello tendremos un div general que englobará a toda la zona del centro, y un div por cada columna. Si fuera necesario añadir más div por temas de maquetación no tendremos problemas ya que este elemento lo podemos seguir usando como hasta ahora. Por lo tanto la división visual de la web sería:Bueno hasta aquí hemos visto como se organiza de forma esquematizada una web siguiendo el nuevo estandar HTML5, para próximos post analizaremos con detalle cada uno de los sectores detectados y las páginas interiores como el detalle de una noticia, o el listado de artículos y tutoriales.Espero vuestros comentarios al respecto, si creéis que mi interpretación y separación no es del todo correcta podemos comentarla para que entre todos lleguemos a sacar unas conclusiones definitivas.

Que de tiempo sin escribir ...Bueno, espero recuperar la dinámica de actualizar este blog, es una iniciativa que la verdad que me gustaría mantener.Hoy quería escribir sobre una pregunta que se me ha ocurrido, y es: ¿Para que nos sirve HTML5?Supongo que cualquiera que haya visto algo del nuevo estándar de HTML podrá darme algunas respuestas. Sinceramente cuando empecé a leer información la ilusión era tremenda, parecía que HTML5 iba a dar un vuelco al concepto de web que tenemos hoy día. Conforme seguí avanzando me di cuenta que, efectivamente HTML5 era un gran cambio, pero quizás no era el cambio definitivo (quizás el que necesitábamos realmente).Aun así, y tras recuperar un poco del bajón sufrido, creo que HTML5 va a traer multitud de cosas buenas, y la principal de todas es la desaparición paulatina de los navegadores antiguos, principalmente de IE6. Nada más que por eso se merece un aplauso y un seguimiento incondicional.Pero nos va a ofrecer mucho más, la caída del flash, el fin de los div (para organizar la estructura de nuestras páginas), el fin de las cookies como las conocemos, más posibilidades multimedia, más semántica a nuestros contenidos, ....Poco a poco iré comentando aquellos elementos que me vayan llamando la atención, principalmente los nuevos elementos creados y los que han pasado a mejor vida.

La codificación en la web ha sido uno de los grandes problemas que todo programador web se habrá encontrado en algún punto de su carrera. Sobre todo cuando los contenidos de la web son gestionados por gestores de contenido la codificación todavía es más complicada, dependerá de la codificación con la que se guarda la información, y con la que se muestra posteriormente.En HTML existe 2 caminos de definir el encoding del documento:Configuración en la cabecera HTTP: Content-Type: text/html; charset="utf-8". Esta configuración se realiza a nivel del servidor, el principal problema de esta opción es que no todo el mundo tiene libertad para manipular esta configuración, imaginaros por ejemplo los blogs como el mío que está instalado en los servidores de blogger (google) donde no tenemos esta posibilidad.Configuración con metatags: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">. Esta configuración va directamente en el document HTML de la página, el cual ya si es gestionado por nosotros mismos y tenemos la opción de modificar.Ambos caminos dan el mismo resultado y la finalidad es la misma, pero es muy importante usar uno u otro sistema, pero nunca dejar sin definir el character encoding de nuestros documentos html ya que sino puede traer bastantes problemas de seguridad.Una buena práctica es definir por defecto un encoding en las cabecera HTTP, es decir, una codificación estándar en nuestros servidores web y en los casos que sea necesaria redefinirla usando el metatags. Siempre va a prevalecer el metatags por encima de la cabecera HTTP.HTML5 no ha cambiado nada respecto a la configuración del encoding, y todo lo comentado hasta ahora es válido para la nueva versión del estándar. Lo único que se ha modificado ha sido la forma de especificarlo con el metatags, donde se ha comprimido y simplificada la linea, de forma que ahora tan solo debemos poner:<meta charset="utf-8" />Para otro día comentaré otros problemas derivado del encoding más orientado a la gestión de los contenidos y la forma de presentar la información.

Esta soprendente estadística publicada por MEFEEDIA nos dice que el 54% de los videos disponibles en internet actualmente son videos HTML5. Esta cantidad es el doble de hace 5 meses, lo que nos hace ver la gran explosión que el nuevo estandar en lo que a video se refiere está teniendo.El gran motivo de esta explosión es la irrupción de la banda ancha en los móviles. Flash, el gran triunfador hasta el momento en lo que a video se refiere tenía un gran problema, la reproducción de videos en los pequeños dispositivos móviles. En este punto HTML5 entra con gran fuerza, la mayoría de los navegadores para móviles empiezan a dar soporte a esta nueva característica del estandar. Esto hace que se produzca esta gran explosión de videos HTML5 en internet en los últimos meses.La solución más extendida actualmente es la de ofrecer las dos alternativas, videos HTML5 para aquellos navegadores que lo soportan, y el antiguo formato de video FLASH para los navegadores que todavía no implementan esta característica.Sin lugar a duda este número hace que cada vez tenga más claro que HTML5 no es algo a tener en cuenta en el futuro, si no que es nuestro PRESENTE.