Ðcorbaxeo

El nuevo estándar, HTML5, nos promete una larga lista de cambios grandes e interesantes, tanto para usuarios como para profesionales del medio. Vamos a ver algunos de especial relevancia.

HTML5 proporciona a los desarrolladores una manera más sencilla de crear aplicaciones Web con más potencia y menos fallos.

Los usuarios verán las aplicaciones Web en tiempo real de forma más suave y con menos errores. Ya que HTML5 promete un camino más fácil para los desarrolladores en la creación de sitios web que se actualizan en tiempo real.

Los desarrolladores deben realizar complejas tareas de codificación que, fácilmente, pueden acabar introduciendo errores y haciendo que las aplicaciones fallen.

Bruce Lawson, que evangeliza sobre los estándares web abiertos de Opera Software, señala que al grupo que trabaja en el HTML5, se le asignó la difícil tarea de hacer que la especificación fuera más tolerante que sus predecesores, para que los sitios web más antiguos o mal codificados funcionaran mejor en navegadores habilitados para ejecutar HTML5. 

• Web Sockets: conexión permanente entre una página y un servidor.
  Una de las mejoras más interesantes que puede ofrecer HTML5 es la característica Web Sockets: proporciona un sitio web con una interfaz de programación de aplicaciones (API) que abre una conexión permanente entre una página y un servidor, para que la información pase entre ellos en tiempo real, (sin tener que hacer una solicitud cada vez que se quiere una actualización). Web Sockets promete una forma fácil de que los desarrolladores creen páginas web que cambien en tiempo real.
• Mayor velocidad y mejor funcionamiento:
  Las páginas se cargan más rápido (sobre todo en dispositivos móviles), y funcionan mejor, gracias a la red de comunicaciones de HTML5 y a un navegador de almacenamiento.
• Web Storage
  HTML5 también puede ayudar a que las aplicaciones web funcionen mejor cuando los dispositivos están desconectados (o intermitentemente) de Internet, como los teléfonos inteligentes. Una característica llamada Web Storage permite a las aplicaciones Web almacenar más datos en el navegador, recuperarlos de forma más inteligente, y controlar cómo los navegadores guardan ciertas partes de páginas para agilizar la carga.

Una fórmula mágica:

• Mejor manejo de formularios, reduciendo el código javascript:
  HTML5 también mejorará el rendimiento de los navegadores con un mejor manejo de los formularios: menos javascript, más velocidad de carga de la página…
• Funciones CSS diseñadas para trabajar con HTML5:
  Además varias características de la nueva versión de CSS, están diseñadas para trabajar con HTML5, haciendo a las páginas Web más sensibles a la entrada del usuario y permitiendo gráficos de alta calidad.
• Muchas web profesionales funcionan como aplicaciones de escritorio (suite de oficina o herramientas de edición de fotografías p.e.). Pero las funciones más sofisticadas dependen de conexiones que los desarrolladores crean entre diferentes tecnologías Web, como HTML, JavaScript y hojas de estilo (CSS). Esto hace a esos sitios más lentos y vulnerables a los agujeros de seguridad.
  Con las nuevas características de HTML5, como Web Sockets, también estos sitios serán más rápidos, potentes y seguros.
• Más interoperabilidad entre navegadores:
  Otra importante mejora es el ‘parser’ del HTML5. Es un analizador del navegador que lee las etiquetas utilizadas para construir una página y busca cómo mostrarlo. Esto hace que los navegadores sean más interoperables en la forma en que manejan el código mal escrito: el analizador especifica cuáles son las respuestas a los errores, en lugar de dejar que cada creador del navegador decida cómo manejar el código imperfecto. Esto ofrece una experiencia de usuario más sólida, sin importar el navegador que se utilice.
• Vídeo en el navegador, sin plugin, gracias a HTML5:
  HTML5 ha atraído la atención por su capacidad de mostrar vídeo dentro de un navegador web, sin necesidad de plug-ins como Flash de Adobe. Aunque esta no es la característica más importante de HTML5, ni mucho menos, está claro que es una gran novedad y alivio para los usuarios y que podremos disfrutar de lo lindo de este nuevo formato para el vídeo.
  
  YouTube acaba de anunciar que cambia el código para embeber vídeos. El nuevo código utilizará un iframe que permitirá ver los vídeos embebidos tanto en Flash como enHTML5, en función de la configuración del navegador del usuario.
  Por defecto se mostrará HTML5, cambiando a Flash siHTML5no está disponible.
  El ejemplo del nuevo código, mucho más corto:
  <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
  </iframe>

Naturalmente llevará su tiempo hasta que todo esto esté bien implementado.
Actualmente sólo Chrome, Safari, Firefox y Opera soportan la mayoría de las características de HTML5, (no todas).

Con este enlace podrás comprobar en qué medida tu navegador soporta HTML5. http://www.html5test.com/

Consideraciones personales:

"La base de HTML5 es implacablemente pragmática"

Bueno, sin duda un momento emocionante para los desarrolladores web, pero también los usuarios lo notarán bastante, sobre todo en algunos aspectos.

Y, sin duda, HTML5, también traerá nuevas normas.

Felicitemos al grupo de trabajo HTML5 y a todos los que están detrás de todo esto ya que estas innovaciones encaminadas a mejorar la web, no sólo permiten aumentar la sofisticación en el diseño y la funcionalidad de los sitios web, sino que contribuyen a reforzar la libertad del usuario y a abrir más el horizonte y las mentes…

…Alabados sean…!

Aquí te dejo algunos enlaces a contenidos muy interesantes sobre HTML5 para que vayas haciendo boca y te relajes ante lo que se nos viene con la implementación del nuevo lenguaje de marcas HTML5:

HTML5 gallery

Canvas Vídeo 3D

Chrome Experiments

SlidesHTML5Rocks – magnífica presentación y demo, en uno, (no se ve en IExplorer7).

Guía de HTML5 para desarrolladores web

Hojas de apoyo HTML5 y CSS3

fuente Technology Review

⁓ Código de seguimiento asincrónico de Google Analytics: mejor rendimiento

Google Analytics Asíncrono es una forma mejorada del seguimiento de los visitantes de nuestro sitio web con Google Analytics. A diferencia de la instalación tradicional, el seguimiento asincrónico optimiza la carga del “ga.js” por los navegadores para que el impacto sobre la velocidad de carga y sobre la experiencia de usuario sea mínima. También permite poner el fragmento de Analytics en la parte superior de la página sin que se retrase la carga del contenido.

Aunque el seguimiento asincrónico usa un snippet y una sintaxis diferente para el seguimiento, permite personalizaciones exactamente igual que el código tradicional. De hecho, la sintaxis de seguimiento asincrónica también es más flexible que la tradicional para estos menesteres.

El Snippet Asíncrono ⁓

El código de Google Analytics es una pequeña pieza de código JavaScript que deberemos pegar en nuestras páginas, para activar el seguimiento de Google Analytics, que a su vez proporciona una API para personalizar cómo se hace un seguimiento concreto para cada página.

El siguiente fragmento representa la configuración mínima necesaria para el seguimiento de una página de forma asincrónica:

<script type="text/javascript">// <![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']); (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google
analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// ]]></script>

⁓ Cómo utilizar el código asincrónico:

1. Retira el fragmento de código de seguimiento existente y cualquier personalización que hayas realizado.
2. Inserta el código asincrónico en la parte más inferior del <head>, después del resto de scripts que uses en la página o en la plantilla. En la mayoría de páginas, la ubicación óptima para el código asincrónico es justo antes de </head>.
3. Modifica _setAccount con tu ID de Analytics.
4. Añade las personalizaciones de nuevo en el uso de la sintaxis asincrónica. La Guía de Uso y Ejemplos de migración de páginas ofrecen muchos ejemplos de estas conversiones.

Si necesitas hacer algo más que el seguimiento de la página de base, consulta esta referencia para obtener una lista de los métodos disponibles en la API y para obtener más información sobre el uso de la sintaxis asincrónica.

⁓ Mejoras que implica la gestión de captura asíncrona.

Mayor rapidez ⁓ El problema habitual al cargar ficheros JavaScript es que bloquean el refresco de pantalla hasta que están completamente cargados. Para evitarlo el nuevo “ga.js” de Google Analytics puede ser cargado de forma asíncrona y posteriormente ser procesado en el equipo, además tampoco agrega más contenidos a la página por lo que reduce los tiempos totales de presentación y no nos bloquea las imágenes ni las hojas CSS a procesar.

Mejora el tiempo de subida ⁓ Cuando un script tarda mucho tiempo en ser cargado o falla, puede bloquear la carga de una página. Con el nuevo “ga.js” estos problemas desaparecen de la lista de problemas de un desarrollador web. Ahora la web se carga más rápido y el contenido traslada la información sin bloquear nada.

Proporciona más datos ⁓ La recomendación que se daba antes para mejorar la experiencia de usuario es colocar el script de Google al final de la página, así vemos la página completa y queda un “cargando” en el navegador. Pero esto significa que si no termina de procesarse el “ga.js” y el usuario es rápido en clickar otro link no se contabiliza la visita y esto falsea las estadísticas del sitio. Con el nuevo proceso asíncrono, mantendremos el script en la parte inferior, pero el nuevo sistema traslada simplemente un indicativo para que sea procesado posteriormente por Google sin afectar a la navegación, con ello además puede incrementar la información a recopilar.

⁓ Consideraciones:

El anterior ga.js se mantiene, no es imprescindible el cambio. No obstante si queremos mejorar el rendimiento de nuestra web debemos realizarlo.
-Importante: Si deseamos utilizar el snippet asincrónico, debemos eliminar primero el código de seguimiento antiguo . No usar ambos fragmentos en la misma página.
-No hay pérdida ni interrupción en la recogida de datos.
-Es muy versátil y personalizable. Si queremos se puede modificar con jquery según nos cuenta Iñaki Huerta.
-Aunque Google recomienda colocar el tracking en la cabecera <head> hay algunos que después de hacer los test pertinentes piensan que sigue siendo mejor colocarlo al final justo antes de </body>, así siempre será lo último que se ejecute en la página, prefieren que primero se cargue adsense que analytics. Pa gustos los colores.

⁓ Conclusiones:

El cambio del código de seguimiento significará una mejora de un 10% de media en el tiempo de carga para la mayor parte de las páginas web que incorporan el script de Google Analytics, es decir, casi todas.

La implementación en páginas estáticas sigue los mismos protocolos (cuenta de Google Analytics y sigue la ruta: Analytics Settings > Profile Settings>Tracking Code y allí encontrarás un anuncio del nuevo código asincrónico), es igual que siempre.

Google ha dejado de dar soporte a IE6 en Google Docs y Google Sites.

Los desarrolladores web están de enhorabuena. Por fin hay indicios de jubilación del odiado IE 6. El navegador de Microsoft empieza a caer, después de 8 años y medio de amarguras para codificar.

En agosto, Google ya dijo que frenaría el apoyo a IE 6 en su red social, Orkut. Y Digg dijo que abandonaría el apoyo pronto.

IE 6, es muy impopular entre los desarrolladores web y muchas compañías de tecnología, que se quejan de la baja seguridad, (que se lo digan a Google en china), falta de características y rendimiento lento para programas web basados en JavaScript.
Estas desventajas se unen a la utilización generalizada del sistema operativo Windows XP que incluye, (cosas de Microsoft).

En diciembre se produjeron los ataques cibernéticos a las cuentas de Gmail en China, al dejar google de censurar los resultados de búsqueda. Cuando se supo que una vulnerabilidad en IE 6, pudo provocar los ataques, Microsoft dijo que los usuarios debían actualizar a IE 8.

La semana pasada, Google anunció la interrupción de soporte para IE 6 en Google Docs, las aplicaciones Web que utilizan ampliamente JavaScript.

El gobierno inglés y francés apoyan a Google, y están animando a los usuarios a dejar de usar el navegador IE 6 por su vulnerabilidad:
El lunes, un desarrollador Web lanzó una petición instando al gobierno británico que deje de usar el IE 6 en la administración pública, -el primer ministro del Reino Unido tiene una página web oficial: number10.org.uk, donde se reciben peticiones-. Dicha petición iba firmada por más de 2.000 ciudadanos.

En respuesta, Microsoft ha dicho que no puede dejar de apoyar a IE 6 mientras se mantenga el apoyo a Windows XP, ya que el navegador viene con el sistema operativo.

Primeros indicios de la caída de IE 6:

En las estadísticas de uso de navegadores, Firefox y Chrome de Google, continúan por delante de Safari de Apple, pero el cambio más notable en el porcentaje de uso de navegador en enero, es que el tan vilipendaiado Internet Explorer 6 ya no es el más común.
Según las cifras de Net Applications sobre la cuota de consumo mensual de los navegadores, IE Firefox cayó un poco en comparación con diciembre – IE pasa desde 62.7 hasta 62.2 por ciento, y Firefox de 24.6 a 24.4 por ciento. Chrome aumentó 4,6 a 5,2 por ciento, y Safari permaneció al mismo nivel en un 4,5 por ciento.

IE 8 ya sobrepasa a IE 6 en el uso .
(Net Applications)

Al profundizar en las estadísticas por la versión, sin embargo, se observa que el IE 6 y IE 8 han cambiado de lugar. IE 6 se adelantó en diciembre, pero en enero, el IE 8 ha mantenido un sólido liderazgo en el 22,3 por ciento frente a un 20,1 para el IE 6. Firefox 3.5, está en 17,1 por ciento.