HTML5

Creación de aplicaciones con HTML5: lo que necesita saber

Brandon Satrom

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

Sin duda ha escuchado eso antes, o algo parecido. Supongo que cuando lo hizo, se entusiasmó, entornó los ojos o musitó “¿por qué?” y frunció un poco el ceño. Quizás su reacción fue una mezcla de todo eso.

No lo culpo. HTML5 es emocionante y sí tiene el potencial de cambiar la Web tal como la conocemos, pero también se va de proporciones. Lo que es más, su verdadero significado puede ser elusivo. He experimentado cada una de esas reacciones yo mismo al crear aplicaciones con HTML5. Es un tema amplio, así que no es fácil entender HTML5, mucho menos saber dónde comenzar con este nuevo y emocionante conjunto de tecnologías.

Este es el primer artículo en una serie para MSDN Magazine y el objetivo es ofrecerle un panorama completo de por qué la primera oración en este artículo es verdadera... e importante. Durante los próximos meses, deseo ayudarlo a comprender qué significa HTML5 para usted, tanto como desarrollador web y como desarrollador que usa herramientas y tecnologías de Microsoft. Espero simplificarle algo de la complejidad en torno de HTML5 y desmitificar gran parte del alboroto. También presentaré algunas características de HTML5 que están disponibles hoy en día, así como algunas tecnologías emocionantes a las que, aunque saldrán un poco más adelante, vale la pena prestarles atención. Por último, le dejaré algunas sugerencias que lo ayudarán a adoptar tecnologías HTML5 ahora, mientras sigue proporcionando grandes experiencias a usuarios con exploradores más antiguos.

Si HTML5 lo entusiasma, deseo ayudarlo a transformar ese entusiasmo en ideas que puede poner en práctica inmediatamente. Si es escéptico, deseo ayudarlo a comprender simplemente por qué HTML5 es importante. Y si solo está confundido acerca de lo que HTML5 incluso significa, no tema: esta es nuestra primera parada en esta serie.

¿Qué es HTML5?

Es posible que ya haya descubierto que HTML5 significa cosas diferentes para diferentes personas. Para algunos, simplemente significa nuevas etiquetas como <header> y <footer> y un puñado de atributos nuevos disponibles para revisión. Para otros, significa todo lo que es nuevo e interesante en la Web, incluidas tecnologías implementadas en solo un explorador único u otras especificaciones que no son oficialmente parte de HTML5. Para asegurarse, comprender el verdadero significado de HTML5 a menudo es el primer obstáculo que muchos de nosotros enfrentan.

Y, honestamente, hay algo de justificación para la cantidad de variadas definiciones. ¡HTML5 es enorme! Definido formalmente por un cuerpo de normas internacionales conocido como World Wide Web Consortium (W3C), HTML5 consta de más de 100 especificaciones que se relacionan con la nueva generación de tecnologías web. Al colocar estas más de 100 especificaciones bajo el nombre de HTML5, podría argumentar que el W3C simplificó las cosas en demasía. Y aunque es difícil tomar algo tan amplio como HTML5 y definirlo de manera inequívoca, creo que el W3C estaba tratando de abordar el alcance de lo que está cambiando en la Web al introducir HTML5 como un concepto unificador para ese cambio.

De hecho, HTML5 es un término aglutinador que describe un conjunto de especificaciones de HTML, CSS y JavaScript diseñado para permitir que los desarrolladores creen la nueva generación de sitios y aplicaciones web. Lo que es notable en esa definición son sus tres partes: HTML, CSS y JavaScript. Definen cómo los desarrolladores usan una revisión mejorada, capacidades de estilo más enriquecidas y nuevas API de JavaScript para aprovechar al máximo las nuevas características de desarrollo web. En términos sencillos, HTML5 = HTML + CSS + JavaScript.

Y eso es todo. HTML5 se trata de los cambios en HTML, CSS y JavaScript. En lugar de preocuparse de esas más de 100 especificaciones, esos tres términos describen la amplitud y el alcance de HTML5. ¿Todavía le parece que es un poco simplista? Puede ser, pero como pronto verá, una definición integral de HTML5 no importa tanto como las tecnologías que elige adoptar como dignas de su tiempo y esfuerzo.

Con una definición en mano, dediquemos unos momentos a hablar acerca de dónde calza Microsoft en el espacio HTML5.

HTML5 e Internet Explorer

Tal como mencioné, el conjunto de especificaciones que componen HTML5 están a cargo del W3C. El W3C consta de personal, organizaciones y personas dedicados a ayudar a impulsar y definir el futuro de la Web. El WC3 es una organización basada en el consenso, que generalmente funciona formando comités (llamados grupos de trabajo) para dividir fragmentos de trabajo sobre especificaciones relacionadas. Las especificaciones las puede proponer cualquier miembro y todas aquellas que son de propiedad del W3C (más especificaciones que aquellas que caen bajo el paraguas de HTML5) pasan por un proceso de cinco etapas desde el primer bosquejo a la recomendación oficial.

Microsoft es miembro del W3C y cumple un rol muy activo en el proceso de especificación para muchas normas y grupos de trabajo de HTML5. Al igual que todos los proveedores de exploradores importantes, Microsoft está fuertemente comprometido con HTML5 y está trabajando con el W3C y otros proveedores para garantizar que los desarrolladores puedan contar con que las tecnologías de HTML5 se implementen de manera confiable de modo interoperable en todos los exploradores de importancia.

En el contexto de Microsoft, el proveedor de explorador, el enfoque tiene cuatro aristas:

1. Entregar el mejor HTML5 listo para sitios a través de Internet Explorer 9.
2. Exponer próximas características a desarrolladores a través de las vistas previas de la plataforma de Internet Explorer.
3. Invertir en interoperabilidad a través de pruebas enviadas al W3C.
4. Generar prototipos de normas inestables a través de los laboratorios de HTML5.

“HTML5 listo para sitios” es el término que Microsoft usa para describir las tecnologías de HTML5 que puede usar hoy, ya que las admiten todos los exploradores de importancia. Tecnologías como las nuevas etiquetas HTML, Canvas, Scalable Vector Graphics, audio y vídeo, ubicación geográfica, almacenamiento web y muchos nuevos módulos CSS3, todos caen en este espacio y se implementan en Internet Explorer 9, así como los otros exploradores convencionales. Pasaremos una buena cantidad de tiempo en esta serie debatiendo estas tecnologías, así como la manera en que puede adoptarlas hoy.

Más allá de lo disponible actualmente, Microsoft está usando vistas previas de plataformas públicas para informar a los desarrolladores de lo que trae la próxima versión del explorador, así como para reunir comentarios. En el caso de Internet Explorer 9, Microsoft lanzó vistas previas de la plataforma cada seis a ocho semanas, anunciando cada vez nuevas mejoras de HTML5, características y mejoras de rendimiento para que los desarrolladores las probaran y evaluaran. Internet Explorer 9 se lanzó en marzo y, a principios de julio, Microsoft ha lanzados dos vistas previas de plataforma para Internet Explorer 10, lo cual señala que Microsoft continúa una cadencia de lanzamiento regular para vistas previas de Internet Explorer. Como desarrollador, deseará aprovechar las vistas previas más recientes para aprender, probar e influir cómo evolucionan los exploradores. Puede descargar la vista previa más reciente de Internet Explorer en IETestDrive.com.

Para garantizar que HTML5 funcione de manera consistente en todos los exploradores, Microsoft ha invertido fuertemente en interoperabilidad, creando y enviando el conjunto único más grande de casos de prueba relacionado con HTML5 al W3C. Por primera vez, este conjunto de casos de prueba lo usará el W3C como la fuente autorizada de la preparación de HTML5 en cada explorador. El resultado final para usted y yo como desarrolladores es que podemos adoptar e implementar las tecnologías de HTML5 una vez y confiar en que funcionarán de manera consistente en todos los exploradores. Para obtener más información sobre el trabajo de Microsoft en torno a la interoperabilidad, vaya a bit.ly/dxB12S.

Aunque algunas tecnologías de HTML5 ya existen en Internet Explorer 9 y se anuncian otras para Internet Explorer 10 a través de las vistas previas de la plataforma de Internet Explorer, algunas especificaciones populares y noticiables necesitan un poco más de trabajo por parte del W3C y los proveedores de exploradores antes de que estén listas para su implementación en nuestras aplicaciones. Un ejemplo de ello es Web Sockets, una emocionante especificación que ayuda a los desarrolladores a abrir canales de comunicación bidireccional con servidores de back-end, lo cual permite un nivel de conectividad en “tiempo real” que anteriormente no estaba disponible en aplicaciones web. Como desarrollador, sin duda puede imaginar los incontables usos para Web Sockets en las aplicaciones que está compilando en este preciso momento. Pero la especificación Web Sockets aún está cambiando a gran ritmo, con aspectos clave todavía en movimiento y siendo analizados dentro de W3C. Dada esa situación, sería difícil proporcionar esta característica de manera consistente y confiable en todos los exploradores hoy en día.

En el caso de especificaciones inestables o en evolución como Web Sockets (que cubriremos en profundidad en un artículo a futuro), Microsoft creó HTML5 Labs, un sitio para que los desarrolladores experimenten con implementaciones en borrador de estas tecnologías. El sitio proporciona prototipos que puede descargar y probar a nivel local, así como demostraciones hospedados para algunas especificaciones. El objetivo es ofrecerle un lugar para probar estas especificaciones por sí mismo y para que entregue comentarios a Microsoft y el W3C sobre estas especificaciones conforme se estabilizan y se aproximan a su implementación en los exploradores. Para obtener más información sobre HTML5 Labs, vaya a html5labs.com.

HTML5 y las herramientas para desarrolladores de Microsoft

Más allá de la relación de Microsoft con el W3C y las tecnologías HTML5 admitidas en el explorador, existe otra dimensión en cuanto al enfoque de Microsoft relativo a HTML5 que es importante para los desarrolladores: su enfoque respecto de las herramientas de 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 Packs para estas dos herramientas proporcionaron un tipo de documento HTML5 para validación, así como IntelliSense para nuevas etiquetas y atributos de HTML5. Si está usando Visual Studio 2010 SP1, puede habilitar el esquema de HTML5 al hacer clic en Tools | Options | Text Editor | HTML | Validation y seleccionar, a continuación, la opción HTML5 en la lista desplegable Target, como se muestra en la Figura 1. También puede configurar HTML5 como el esquema predeterminado de la barra de herramientas de edición de código fuente en cualquier archivo HTML, como se muestra en la Figura 2.

Figura 1 Habilitación del esquema de HTML a través del cuadro de diálogo Opciones

Figura 2 Configuración del esquema de HTML5 en la barra de herramientas de edición de código fuente HTML

Una vez configurado su sistema predeterminado, obtendrá la compatibilidad IntelliSense en Visual Studio para las 28 nuevas etiquetas semánticas en HTML, así como nuevos atributos globales específicos de etiqueta, como se muestra en la Figura 3.

Figura 3 IntelliSense de HTML5 en Visual Studio 2010 SP1

Microsoft actualizó aun más su compatibilidad con HTML5 con su versión de la Actualización de normas web para Microsoft Visual Studio 2010 SP1 en junio de 2011. Esta extensión, que funciona con todas las ediciones de Visual Studio 2010, agrega más IntelliSense de HTML5 y validación para Visual Studio, incluye IntelliSense de JavaScript para nuevas capacidades de explorador como ubicación geográfica y almacenamiento DOM, y proporciona IntelliSense de CSS integral y validación. Ahora puede descargar esta extensión, la cual se actualizará regularmente para proporcionar herramientas mejoradas para el desarrollo de HTML5, desde bit.ly/m7OB13.

En el caso de Expression Web 4 SP1, configurar el esquema HTML5 en Tools | Page Options de página ofrece el mismo IntelliSense, y las herramientas también proporciona IntelliSense de CSS3 para varios módulos de CSS3 en borrador como el radio del borde, la sombra del cuadro, las transformaciones y cosas por el estilo.

Si está usando WebMatrix (consulte web.ms/WebMatrix), es posible que haya notado que todos los documentos nuevos .html, .cshtml o .vbhtml que crea contienen un marcador predeterminado similar al que aparece enFigura 4. Tal como analizaré en el siguiente artículo de esta serie, este es un documento HTML5 básico y válido. Lo más llamativo es que las etiquetas doctype y meta charset se han vuelto más sencillas. Usar este sencillo modo HTML5 de desencadenadores de doctype en todos los exploradores modernos y WebMatrix lo simplifica para usted al proporcionar un documento HTML5 de manera predeterminada.

Figura 4 Documento HTML5 predeterminado en WebMatrix

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body></body>
</html>

Si esas no son suficientes herramientas nuevas de HTML5 para usted (todo desde enero de 2011, a propósito), ASP.NET MVC se puso entretenido con la actualización de herramientas de ASP.NET MVC 3 anunciada en MIX11 en abril. Junto con una cantidad de magníficas características de herramientas, la Actualización de herramientas de ASP.NET MVC 3 proporciona la opción para usar el doctype de HTML para nuevos proyectos y envía Modernizr 1.7 en la carpeta Scripts de aplicaciones nuevas. Modernizr es una biblioteca JavaScript que facilita enormemente el desarrollo de HTML5; lo analizaré en profundidad en un próximo artículo.

Lo principal aquí es que, aun cuando HTML5 está recién emergiendo en nuestros exploradores, la compatibilidad de herramienta oficial se está agregando rápidamente y Microsoft incluso está agregando compatibilidad con las bibliotecas (como Modernizr) de la comunidad. Puede usar HTML5 con algo de ayuda de las herramientas de Microsoft de hoy en día y esperar que la compatibilidad con HTML5 siga creciendo y mejore con el tiempo.

‘Adoptando’ HTML5 en sus aplicaciones

Hasta ahora, debe darse cuenta de que HTML5 no es una entidad única que pueda adoptar o a la que pueda migrar en un solo paso. Adoptar HTML5, más que una opción a gran escala, se trata de hacer una evaluación tecnología por tecnología y determinar cuáles son las adecuadas para su aplicación. Por cada tecnología de HTML5 que evalúe, mire (al menos) los siguientes factores al decidir si la tecnología está lista para adoptarse:

1. ¿Qué tan ampliamente implementada en todos los exploradores está la tecnología?
2. ¿Cómo adoptaría esta tecnología y compatibilidad “polyfill” para exploradores incompatibles con una característica determinada?

El primer factor es el más importante y cuando se combina con una comprensión de los exploradores usados comúnmente por quienes visitan su sitio, debería obtener una visión clara de cuál subconjunto de las más de 100 especificaciones vale la pena evaluar un poco más. Ese subconjunto debe constar de un conjunto de especificaciones estables que puede adoptar fácilmente hoy para sus usuarios.

Sin embargo, incluso con ese conjunto estable de tecnologías de HTML5, no debe pasar por alto a sus usuarios que no se han cambiado a un explorador más nuevo. Si está fuertemente involucrado en el desarrollo día a día para su sitio, sin duda tiene alguna vaga idea de los porcentajes de usuarios que visitan su sitio con un explorador determinado. Para la mayoría de nosotros, sería fácil mirar el porcentaje de usuarios que visitan con un explorador más antiguo y llegar a la conclusión de que adoptar cualquier tecnología HTML5 los afectaría negativamente. Afortunadamente, podemos usar el “polyfill” para ahorrarnos la espera hasta una fecha difusa en el futuro para adoptar HTML5.

Paul Irish (desarrollador en los proyectos de jQuery y Modernizr) define un polyfill como “… correcciones de compatibilidad (shim) que imitan una futura API, lo cual proporciona funcionalidad de reserva para exploradores más antiguos”. Un polyfill es como masilla para sus sitios web; es una manera de determinar si una determinada característica de HTML5 está disponible para el usuario que actualmente explora su sitio y para proporcionar ya sea correcciones de compatibilidad (shim) que “rellenan” esa compatibilidad o un curso de grácil degradación que permite que su sitio siga funcionando por completo.

La biblioteca más popular asociada con el uso de polyfill es Modernizr, la biblioteca de JavaScript library que mencioné anteriormente. Modernizr proporciona algunos polyfills básicos para marcado semántico, detección de características para tecnologías de HTML5 y compatibilidad para CSS condicional basado en características admitidas. Como se ha indicado, Modernizr será el tema de un próximo artículo; también aparecerá de manera prominente (junto con muchas otras bibliotecas de polyfill) a lo largo de esta serie. Para obtener más información, descargue Modernizr en modernizr.com. 

Cuando se trata de elegir qué tecnologías adoptar, su lista final puede ser una combinación de especificaciones ampliamente compatibles y otras especificaciones para las cuales tendrá que usar compatibilidad de polyfill para ciertos exploradores. Solo usted sabrá la composición exacta de esa lista basada en sus necesidades y contexto actuales.

En los próximos meses, analizaré varias especificaciones notables, desde Ubicación geográfica y Formularios y Canvas a Trabajadores web, Web Sockets e IndexedDB. Algunas de ellas se admiten ampliamente y están “listas para el sitio” y algunas, como Web Sockets, son demasiado innovadoras para pasarlas por alto, independientemente de dónde estén hoy. Con cada especificación, analizaré la compatibilidad actual y sabida a futuro, algunos aspectos básicos acerca de cómo puede implementar las características de especificación en sus sitios, y cómo aplicar compatibilidad de polyfill para exploradores incompatibles con una determinada característica.

Si desea saber más sobre HTML5 hoy, le sugiero que tome un par de libros sobre el tema. En particular, recomiendo “Introducing HTML5” (New Riders, 2010) de Bruce Lawson y Remy Sharp y “HTML5 Up and Running” (O’Reilly Media, 2010) de Mark Pilgrim. Además, asegúrese de visitar W3C.org para obtener información actualizada sobre todas las especificaciones, así como BeautyoftheWeb.com y IETestDrive.com para descargar Internet Explorer 9 y las Vista previa de la plataforma Internet Explorer 10, respectivamente, y obtener más información acerca de las excelentes experiencias de HTML5 que Microsoft está entregando a través del explorador.

Por encima de todo lo demás, comience a adoptar HTML5 hoy. La Web nunca más será la misma, realmente, y usted puede ser parte del catalizador al crear las nuevas y grandiosas aplicaciones web con HTML5.

Brandon Satrom es un evangelista desarrollador de Microsoft radicado en las afueras de Austin. Tiene un blog en UserInexperience.com y lo puede seguir en Twitter en Twitter.com/BrandonSatrom.

Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: Jon Box, Damian Edwards y Clark Sell