Construir Aplicaciones en HTML5: Lo que neces

Por Brandon Satrom

Construir Aplicaciones en HTML5: Lo que necesita saber

HTML5 está aquí, y la Web nunca será la misma.

No cabe duda que ya ha escuchado esto antes, o algo parecido. Supongo que cuando lo hizo, se entusiasmó, se le desorbitaron los ojos o enuncio las palabras "¿por qué?" mientras arqueaba la ceja ligeramente. Tal vez su reacción fue una mezcla de los tres.

No le culpo por cualquiera de estos. HTML5 es emocionante y tiene el potencial de cambiar la Web tal como la conocemos, pero también le atribuyen demasiadas cosas. Lo que es más, su verdadero significado puede ser difícil. Yo he experimentado cada una de esas reacciones en carne propia durante la creación de aplicaciones con HTML5. Es un tema muy amplio, así que si entender HTML5 es difícil, también lo es saber por donde empezar con esta nueva y emocionante serie de tecnologías.

Si usted está emocionado acerca de HTML5, quiero ayudarle a convertir esa excitación en ideas que puede poner en práctica inmediatamente. Si usted es escéptico, quiero ayudarle a entender por qué es importante el HTML5. Y si sólo está confundido sobre el significado de HTML5, no temais esa es nuestra primera parada en esta serie.

¿Qué es HTML5?

Para ahora ya habrá descubierto que HTML5 significa diferentes cosas para diferentes personas. Para algunos, sólo significa nuevas etiquetas como <header>y <footer>y un puñado de nuevos atributos disponibles en el marcado. Para otros, significa todo lo que es nuevo e interesante en la Web, incluidas las tecnologías aplicadas en tan sólo un navegador u otras especificaciones no oficialmente parte de HTML5. El estar seguros de entender el verdadero significado de HTML5 es a menudo la primera barricada que muchos de nosotros enfrentamos.

Y, honestamente, está justificado hasta cierto punto por el número de distintas definiciones. ¡HTML5 es enorme! De acuerdo con la definición formal de un organismo internacional de normalización conocido como World Wide Web Consortium (W3C), HTML5 consta de más de 100 especificaciones que se relacionan con la próxima generación de tecnologías de la Web. Poniendo todas las más de 100 especificaciones del HTML5, se podría argumentar que el W3C simplificó demasiado las cosas. Y si bien es difícil tomar algo tan amplio como HTML5 y definirlo en forma inequívoca, creo que el W3C está tratando de hacer frente a la magnitud de lo que está cambiando en la web introduciendo HTML5 como un concepto unificador de ese cambio.

De hecho, HTML5 es un término genérico para describir un conjunto de especificaciones HTML, CSS y Javascript diseñado para permitir a los programadores crear la próxima generación de aplicaciones y sitios Web. Lo que llama la atención en esa definición son sus tres partes: HTML, CSS y Javascript. Ellos definen cómo utilizan los desarrolladores marcado mejorado con capacidades de estilo más ricas y nuevas APIs de JavaScript para aprovechar al máximo las nuevas características de desarrollo Web. Por decirlo simplemente, HTML5 = HTML + CSS + JavaScript.

Y eso es todo. HTML5 implica cambios en HTML, CSS y Javascript. En lugar de preocuparse por las más de 100 especificaciones, esos tres términos describen la amplitud y el alcance de HTML5. ¿Sigue pensando que es un poco simplista? Probablemente sí, pero como pronto verá, una definición amplia de HTML5 no importa tanto como las tecnologías que elija para dedicarles tiempo y esfuerzo de adopción.

Habiendo dado una definición, pasemos algunos momentos hablando de en dónde encaja Microsoft en el espacio HTML5.

HTML 5 e Internet Explorer

Como mencioné, el conjunto de especificaciones que conforman HTML5 son impulsadas por el W3C. El W3C está formado por funcionarios, organizaciones y particulares que invierten recursos en ayudar a impulsar y definir el futuro de la Web. La WC3 es una organización basada en el consenso y opera habitualmente por formación de comités (llamados grupos de trabajo) para repartir trozos de trabajo sobre especificaciones relacionadas. Las especificaciones pueden ser propuestas por cualquiera de los miembros y todas las especificaciones de la W3C, muchas más especificaciones de las que hay bajo el paraguas de HTML5, se mueven a través de un proceso de cinco etapas desde el primer borrador hasta la recomendación oficial.

Microsoft es miembro del W3C y desempeña un papel muy activo en el proceso de especificación de muchas normas y grupos de trabajo de HTML5. Al igual que todos los proveedores de navegadores principales, Microsoft ha invertido fuertemente en HTML5 y está trabajando con el W3C y otros proveedores para garantizar que los desarrolladores puedan contar con que las tecnologías HTML5 se ejecuten en forma confiable e interoperable en todos los navegadores principales.

En el contexto de Microsoft como proveedor de navegador, el enfoque tiene cuatro vertientes:

  1. Entregar el mejor sitio listo para HTML5 hoy vía Internet Explorer 9.
  2. Difundir entre los desarrolladores futuras características vía la Plataforma de vistas previas de Internet Explorer .
  3. Invertir en interoperabilidad por medio de pruebas presentadas al W3C.
  4. Hacer prototipos de estándares inestables vía HTML5 labs.
" Site-Ready HTML5" es el término Microsoft utiliza para describir las tecnologías HTML5 que puede utilizar hoy en día porque cuentan con un amplio soporte en todos los grandes exploradores. Las tecnologías como las nuevas etiquetas de HTML, Cancs, Scalable Vector Graphics, audio y video, geolocalización, almacenamiento Web y muchos de los nuevos módulos CSS3 todos se circunscriben en este espacio y se implementan en Internet Explorer 9, así como la mayoría de los demás navegadores. Invertiremos una buena cantidad de tiempo en esta serie hablando de estas tecnologías, así como la forma en que puede adoptarlos hoy.

Más allá de lo que está disponibles en la actualidad, Microsoft utiliza vistas previas de plataforma pública para informar a los desarrolladores de lo que viene en la próxima versión del navegador, así como para recabar información. Para Internet Explorer 9, Microsoft lanzó la Plataforma de Vistas previas cada seis a ocho semanas, cada vez anunciando nuevas mejoras, características y mejoras en el rendimiento de HTML5 para que los desarrolladores las prueben y evalúen. Internet Explorer 9 fue lanzado en marzo y a comienzos de julio, Microsoft ha lanzado dos Plataforma de Vistas previas para Internet Explorer 10, dando visos de que Microsoft está llevando a cabo una liberación regular de vistas previas de Internet Explorer. Como desarrollador, usted querrá tomar ventaja de las últimas vistas previas para aprender, probar e influenciar cómo evolucionan los navegadores. Puede descargar la última plataforma de vista previa de Internet Explorer en IETestDrive.com.

Con el fin de garantizar que HTML5 trabaja sistemáticamente en todos los navegadores, Microsoft ha invertido fuertemente en la interoperabilidad, creando y presentando el mayor conjunto de casos de prueba relacionados con HTML5 al W3C. Por primera vez, este conjunto de casos de prueba serán utilizados por el W3C como la fuente autorizada de "compatibilidad" con HTML5 de cada navegador. El resultado final para nosotros como desarrolladores es que podemos adoptar y aplicar las tecnologías HTML5 y confiar en que funcionarán sistemáticamente en todos los navegadores. Para obtener más información sobre el trabajo en torno a la interoperabilidad de Microsoft, vaya abit.ly/dxB12S.

Si bien algunas tecnologías HTML5 ya existen en Internet Explorer 9 y otras están siendo anunciadas para Internet Explorer 10 a través de la Plataforma de Vistas Previas de Internet Explorer, algunas especificaciones notables y populares aún necesitan un poco más de trabajo por parte del W3C y los proveedores de exploradores antes de que estén listas para implementarse en nuestras aplicaciones. Un ejemplo de ello es Web Sockets, una emocionante especificación que permite a los desarrolladores abrir canales de comunicación bidireccional con servidores de servicios back-end, lo que permite un nivel de conectividad de "tiempo real" que antes no estaba disponible en aplicaciones Web. Como desarrollador, seguramente imaginará incontables usos de Web Sockets en las aplicaciones que están construyendo ahora mismo. Pero la especificación Web Sockets sigue cambiando a un ritmo acelerado, con aspectos clave qué aún se están moviendo y siendo discutidos en el W3C. Dada esta situación, sería difícil proporcionar esta característica en forma consistente y fiable en todos los navegadores actuales.

Para el caso de especificaciones inestables y en evolución como Web Sockets (que vamos a tratar a profundidad en un artículo futuro), Microsoft creó HTML5 Labs, un sitio para que los desarrolladores experimenten con el proyecto de implementación de estas tecnologías. Este sitio proporciona prototipos que puede descargar y probar localmente, así como demostraciones hospedadas de algunas especificaciones. El objetivo es darle un lugar para probar estas especificaciones por usted mismo para que proporcione tanto a Microsoft como al W3C comentarios sobre estas especificaciones conforme se estabilizan y se acercan a su aplicación en los navegadores. Para obtener más información sobre HTML5 Labs, vaya ahtml5labs.com.

HTML5 y Microsoft Developer Tools

Más allá de participación de Microsoft con el W3C y las tecnologías HTML5 admitidas en el navegador, hay otro aspecto del enfoque de Microsoft para el HTML5 que es importante para los desarrolladores: su enfoque de crear herramientas HTML5.

A principios de 2011, Microsoft actualizó dos de sus herramientas de desarrollo con service packs: Visual Studio 2010 y Expression Web 4. Los service pack para ambas herramientas proporcionan un tipo de documento HTML5 para validación, así como IntelliSense para nuevas etiquetas y atributos HTML5. Si está utilizando Visual Studio 2010 SP1, puede activar el esquema HTML5 haciendo clic en Herramientas | Opciones | Editor de texto | HTML | Validación y, a continuación, seleccionar la opción HTML5 en la lista desplegable como se muestra en la Figura1. También puede configurar HTML5 como el esquema predeterminado desde la barra de herramientas de edición de HTML fuente en cualquier archivo HTML, tal como se muestra en la Figura2.


Figura 1Activar el Esquema HTML5 a través del diálogo Opciones


Figura 2Configuración del esquema HTML5 en la Barra de Herramientas de Edición de Código Fuente HTML.

Una vez que su esquema predeterminado está configurado, tendrá compatibilidad con IntelliSense en Visual Studio para las 28 nuevas etiquetas semánticas en HTML, así como los nuevos atributos específicos para etiquetas y globales, como se muestra en la Figura3.


Figura 3IntelliSense HTML5 en Visual Studio 2010 SP1

¿Qué es HTML5?

Microsoft vuelve a actualizar su soporte HTML5 con su versión de Actualización de los Estándares Web de Microsoft Visual Studio 2010 SP1 en junio de 2011. Esta extensión, que funciona en todas las ediciones de Visual Studio 2010, incorpora IntelliSense HTML5 y validación al Visual Studio, incluye IntelliSense de JavaScript para las nuevas funciones del explorador como geolocalización y almacenamiento DOM, además de proporcionar CSS3 IntelliSense y validación integrales. Puede descargar esta extensión, que se actualizará periódicamente para dar más herramientas para desarrollo de HTML5 desde bit.ly/m7OB13.

En el caso de Expression Web 4 SP1, configurar el esquema HTML5 desde Herramientas | Opciones de Página ofrece el mismo IntelliSense y también la herramienta proporciona IntelliSense de CSS3 para varios módulos de CSS3 en proyecto como border-radius, box-shadow, transform y otros parecidos

Si está usando WebMatrix (véase web.ms/WebMatrix ), puede haber notado que todos los nuevos documentos .html, .cshtml o .vbhtml que cree contienen marcado predeterminado similar a lo que aparece en la Figura4. Como discutiré en el próximo artículo de esta serie, se trata de un documento HTML5 básico y válido. En particular, el doctype y las etiquetas meta charset han dejado de ser confusas. Gracias a este sencillo doctype el modo HTML5 se inicia en todos los exploradores modernos y WebMatrix hace que sea más fácil para usted, al proporcionar un documento HTML5 de forma predeterminada.

La Figura 4un documento HTML predeterminado en WebMatrix


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <title></title>

  </head>

  <body></body>

</html>

Por si eso no fuera suficiente habrá nuevas herramientas HTML5 para usted a partir de enero de 2011. ASP.NET MVC se unió a la diversión recientemente con la actualización de herramientas ASP.NET MVC 3 anunciado en el MIX11 en abril. Junto con un gran número de otras nuevas herramientas increíbles,la actualización de ASP.NET MVC 3 Tools proporciona la opción de utilizar el doctype HTML5 para nuevos proyectos y los entrega Modernizr 1.7 en la carpeta de Scripts de nuevas aplicaciones. Modernizr es una biblioteca JavaScript que facilita notablemente el desarrollo HTML5 y que discutiré a detalle en un artículo futuro.

Lo interesante aquí es que, aunque HTML5 está emergiendo en nuestros navegadores, el soporte oficial de herramientas está siendo rápidamente añadido y Microsoft incluso está añadiendo soporte para bibliotecas (como Modernizr) de la comunidad. Puede aproximarse a HTML5 con un poco de ayuda de herramientas de Microsoft hoy en día, sabiendo que el soporte HTML5 seguirá creciendo y mejorando con el tiempo.

"Adopción" de HTML5 en sus aplicaciones

Por ahora, debe darse cuenta de que HTML5 no es una sola entidad que puede adoptar o migrar de un plumazo. Adoptar HTML5, mas que una elección en conjunto, se trata de hacer una evaluación de las tecnologías una a una y determinar cuáles son las tecnologías adecuadas para su aplicación. Para cada tecnología HTML5 que evaluara, evalúe (por lo menos) los siguientes factores al decidir si la tecnología está lista para adopción.

  1. ¿Qué tan extendida está la tecnología en los navegadores principales?
  2. ¿Cómo adoptará esta tecnología y el soporte "polyfill" para navegadores que no soportan una característica específica?
El primer factor es el más importante y cuando se combina con un entendimiento de los navegadores más usados por los visitantes de su sitio, deberían darle una idea clara de que subconjunto de las más de100 especificaciones vale la pena evaluar a fondo. Este subconjunto debería consistir de un conjunto de especificaciones estable que pueda adoptar hoy para sus usuarios en forma confiable.
Sin embargo, incluso con ese conjunto estable de tecnologías HTML5, no debe ignorar a los usuarios que no han actualizado a un nuevo explorador. Si usted está involucrado en el desarrollo cotidiano de su sitio web, tiene sin duda una idea aproximada de los porcentajes de usuarios que visitan su sitio con cierto navegador. Para la mayoría de nosotros, sería fácil notar el porcentaje de usuarios que visitan con un navegador más antiguo y llegar a la conclusión de que la adopción de tecnologías HTML5 afectarían negativamente los usuarios. Afortunadamente existe "polyfilling" para salvarnos de esperar hasta una fecha indeterminada en el futuro para adoptar HTML5.

Paul Irlandesa (un desarrollador de los proyectos jQuery y Modernizr) define un polyfill como "… una corrección que imita una futura API, proporcionando funcionalidad anterior para navegadores antiguos." Un polyfill es como yeso para sus sitios Web;, es una manera de determinar si una cierta característica HTML5 está disponible para el usuario que se encuentra navegando por su sitio y proporcionar una corrección que "llena" ese soporte o una forma de degradar con gracia que le permite a su sitio seguir funcionando del todo.

La biblioteca más popular asociada con polyfilling es Modernizr, la biblioteca JavaScript que mencioné anteriormente. Modernizr ofrece algunos polyfills básicas para marcado semántico, detección de características para las tecnologías HTML5 de mayor importancia y soporte condicional de CSS basado en características compatibles. Como se ha señalado, Modernizr será objeto de un próximo artículo, de hecho ocupará un lugar prominente (junto con muchos otras bibliotecas polyfilling) lo largo de esta serie. Para obtener más información, descargue Modernizr en modernizr.com.

A la hora de elegir qué tecnologías adoptar, la lista final puede ser una combinación de especificaciones con soporte amplio y otras especificaciones para las que tendrá que usar polyfill para soporte para ciertos navegadores. Sólo usted conocerá la composición exacta de la lista en función de sus necesidades actuales y el contexto.

En los próximos meses, comentaré sobre varias especificaciones importantes, desde geolocalización y formularios y lienzo, hasta Web Workers, Web Sockets e IndexedDB. Algunos de estos ya tienen un soporte amplio y están "listas para el sitio", mientras que otros, como Web Sockets, son demasiado innovadores para ignorarlos, independientemente de dónde se encuentran hoy en día. Con cada especificación, discutiré el soporte actual y futuro conocido, algunos conceptos básicos acerca de cómo implementar las características de la especificación en sus sitios y cómo soportar con polyfill los navegadores que no soportan una característica dada.

Si desea saber más sobre HTML5 hoy, le sugiero que lea un par de libros sobre el tema. En particular, recomiendo "Introducción a HTML5" (New Riders, 2010) por Bruce lawson y Remy Sharp y "Funcionamiento de HTML5" (O'Reilly Media, 2010) de Mark Pilgrim. También, asegúrese de visitar W3C.org en relación con la información actualizada sobre todas las especificaciones, así comoBeautyoftheWeb.com y IETestDrive.com para descargar Internet la Plataforma de Vista Previa de Explorer 9 e Internet Explorer 10, respectivamente y aprender más acerca de las grandes experiencias HTML5 que Microsoft está entregando a través del navegador.

Por encima de todo, empiece a adoptar HTML5 hoy. La Web nunca será la misma, de verdad, y usted puede ser parte del catalizador con el fin de construir las siguientes grandes aplicaciones Web utilizando HTML5.


Brandon Satrom trabaja como desarrollador evangelista de Microsoft fuera de Austin, Texas, EE.UU. El escribe en el blog UserInexperience.com y puede seguirlo a través de Twitter en Twitter.com/BrandonSatrom.
Gracias a los siguientes expertos técnicos por revisar el presente artículo: Jon Box, Damian Edwards y Clark Sell

Deje un comentario...


Videos presentados

Otros recursos

Recursos HTML5 recientes

Temas de HTML5 en Slashdot

Webcasts presentados