Analizando una web. Parte I

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 principal
• Listado de articulos de Technology For Solutions
• 2 bloques de listado de banners
• Un bloque de las últimas entradas en el blog
• Un 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 FAQ
• Menú 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 RSS
• Enlaces 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.

Para que nos sirve HTML5!!

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.

Character Encoding en HTML

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.

54% de los videos en Internet están basados en HTML5.

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.

Adobe Edge vs Sencha Animator

Desde hace tiempo se sabe que Adobe iba a entrar en la guerra de HTML5, sobre todo desde que no consiguo que su aplicación flash player entrara en los productos de Apple. Esta negativa de Apple hizo que Adobe cambiara su forma de actuar, en lugar de seguir con la batalla entre Flash y HTML5, ha entrado de lleno en la guerra por el mercado de HTML5. Para ello pretende competir con su nuevo producto: Adobe Edge. Este producto todavía no es descargable, pero por lo poco que podemos saber la principal característica es su gran parecido con Adobe Flash. Es una incognita todavía la calidad del producto que se puede generar con esta aplicación, y hasta que no tengamos en nuestras manos no lo sabremos.
En la batalla de la generación de animaciones con HTML5 existe también otro producto llamado Sencha Animator el cual nos permite generar animaciones basadas en HTML5 y CSS3. A diferencia de Adobe Edge, este producto ya lo tenemos disponibles para ser descargado.
La ventaja de Sencha Animator es clara, será mejor o peor, pero ya podemos empezar a usarla. Efectivamente, CSS3 y HTML5 todavía no está tan extendido en los navegadores web, pero es cuestion de poco tiempo el tener un soporte casi total de ambos estándares y para entonces debemos estar preparados y disponer de nuestra animaciones de nueva generación.
Se abre un nuevo horizonte y debemos intentar de no quedarnos atrás.

Internet Explorer 9 el rey de HTML5

Curiosa la noticia que he leido en la que se comenta que en un informe oficial de la W3C en el que se han estudiado algunas de las principales características de HTML 5 en los distintos navegadores en desarrollo.
El ranking que se ofrece en esta noticia es: 

1. Internet Explorer 9 Platform Preview 6
2. Google Chrome 7.0.517.41 beta
3. Firefox 4 Beta 6
4. Opera 10.60
5. Safari 5.0.7533.16

 Ufff, sinceramente, nunca pensé que esto pudiera ocurrir, viendo la historia a la que nos tiene acustumbrado Microsoft en el mundo de los navegadores, pensar que IE9 superara al resto era realmente imposible.
La verdad que esto es una gran noticia, que Microsoft se tome en serio HTML5 puede hacer que este nuevo estandar sea una realidad mas pronto que tarde, de lo que nosotros, los desarrolladores web nos podremos aprovechar.
Realmente sería todavía mejor noticia si forzara a todos los usuarios con IE6 a actualizarse, eso ya sería lo mejor que podría escuchar, pero me parece a mi que esto es bastante más complicado., por lo tanto, vamos a conformarnos con el soporte que Microsoft está ofreciendo y veremos como se comporta el mercado con el próximo lanzamiento de esta versión.

¿Qué es pronto para HTML5?

Recientemente lei una noticia en la que se comentaba que un miembro de la W3C decia que es pronto para empezar a usar HTML5 para desarrollos "reales" de páginas web.

Esta persona justifica este comentario por la falta de compatibilidad entre los distintos navegadores, y sobre todo en los más antiguos.

Pues para nada estoy de acuerdo con esta corriente, y voy a intentar justificar mi posición:

1. En mis primeros post comenté algunas de las formas para hacer compatible HTML5 con los navegadores antiguos que no implementan las nuevas características. Por lo tanto, tan solo hay que ser ordenados, saber utilizar las alternativas que hoy por hoy disponemos para que las funcionalidades que usemos tengan un equivalente que funcione en todos los navagadores. De hecho esto no es nuevo, cuando trabajamos con javascript siempre debemos intentar ofrecer alternativas para aquellos usuarios que no dispongan de javascript. Por lo tanto, donde está el problema??? la verdad que no lo veo por ningún lado. Un ejemplo claro es la reproducción de videos, siempre podemos usar el nuevo tag de video para la reproducción, si el navegador no tiene compatibilidad con el tag video, reproducimos el video tal cual se hacía hasta ahora, con un objeto flash y ya no tendremos problemas de incompatibilidad.
2. En el peor de los casos, encontramos una funcionalidad que no se ve en un navegador en concreto y no hay alternativa, pues en este caso una solución muy válida es poner un mensajito de: "actualice su navegador para poder ver esta página". ¿Qué malo hay en esta solución? Yo no lo veo, por ejemplo, hay software que se pierde la compatibilidad cuando actualizamos nuestro Sistemas Operativos, y simplemente nos vemos forzados a actualizarnos. Si no recuerdo mal, youtube desde hace tiempo ya pone este tipo de mensajes cuando lo abrimos con ie6.
3. El apoyo cada día es mayor, grandes compañias, google, yahoo, facebook, etc ... apoyan este nuevo estandar, y lo apoyan ahora mismo, por lo tanto, no creo que HTML5 sea el futuro, sino ya es presente, por lo que pensar que tenemos que esperar de 2 a 3 años para empezar a usarlo en proyectos reales me parece un gran error.

Es más, yo creo que este es el mejor momento para quitarnos una de las grandes lacras del desarrollo web, los navegadores antiguos, y en especial Internet Explorer 6. Quizás hayamos encontrado la excusa perfecta!!

En resumen, no tengais miedo en comenzar a usar HTML5, ir por delante nunca fue un problema, al revés, siempre es beneficioso, si somos capaces de tomar ventaja tendremos mucho camino recorrido.