IE9 RC: Interoperabilidad & Estándares
Previo > Disponible Internet Explorer 9 RC
Independientemente del navegador que el usuario esté utilizando para acceder a un determinado sitio, el equipo de trabajo que desarrolla el sitio tendría que tener una única versión del mismo, una única forma de expresar la disposición, estilo y comportamiento. Ese es el objetivo de los estándares y de la interoperabilidad.
Como todos los profesionales web saben, el próximo hito relacionado con los estándares y la interoperabilidad esta íntimamente relacionado con lo que la comunidad denomina HTML5. En este post vamos a intentar aclarar qué es HTML5 y cual es el compromiso de IE 9 respecto a los estándares
¡¡prioridad absoluta!! :D
HTML5 es más que HTML5
HTML5 se está utilizando como un término paraguas que agrupa diferentes especificaciones relacionadas con la nueva web. Dentro de este paraguas hay dos organismos de estandarización, el W3C y ECMA. Bajo el W3C cuelgan diferentes Working Groups que se encargan de diferentes tecnologías, por ejemplo, el Working Group (WG) de HTML se encarga de la especificación de HTML5, del API de Canvas… El WG de Web Apps se encarga del DOM, de la especificación IndexDB… el WG de CSS se encarga de la especificación de CSS3, etcétera…
| Nota: Para hacernos una idea del esfuerzo tras los WGs, comentar que, por ejemplo, en el WG de HTML hay 40 organizaciones formando parte como miembros, que se traduce en 411 participantes en el grupo, con 280 expertos invitados, 9 listas de correos y aproximadamente 4000 emails en public-html. |
El otro gran organismo, el ECMA, es el encargado de velar por ECMAScript / Javascript
Especificaciones + Tests!!
Es importante destacar que el hecho de que haya una especificación no es suficiente para que todos los navegadores se comporten del mismo modo. Una única especificación puede dar lugar a diferentes interpretaciones y por lo tanto a diferentes implementaciones. Por eso, un mismo markup estándar puede verse de diferentes formas en diferentes navegadores, por las diferencias de interpretación del estándar.
Para evitar estos problemas, junto con la especificación se proponen Tests/pruebas. Así los proveedores pueden verificar que la interpretación del estándar que están implementando se corresponde con lo que se espera inicialmente.
En este aspecto, Microsoft continua con los esfuerzos que se iniciaron con IE8 y además de haber donado más de 14 mil pruebas para CSS 2.1, se siguen donando pruebas para HTML5, SVG, CSS3, Javacscript y otros importantes estándares web. A fecha de hoy se han entregado más de 2800 pruebas… y se siguen entregando nuevas continuamente :)
• Referencias:
Entonces ¿Esta listo HTML5?
No es tan sencillo, no se puede responder con un Si o un No :_) Los diferentes pliegos de lo que llamamos genéricamente HTML5 se encuentran en diferentes estados de madurez
En Internet Explorer 9 se han incluido las partes claves del paraguas HTML5 que están listas para ser incorporadas en los sitios web (SiteReady!) así como los patrones que tienen mejor tendencia de aceptación. Se ha enfocado el esfuerzo en tener el mayor impacto en los desarrolladores, centrándose por ejemplo en CSS en lugar de MathML. O bien centrándose en animaciones CSS y fuentes WOFF en lugar de animaciones SMIL y fuentes SVG, aunque estas últimas se midan en el test Acid3 ( por eso IE9 no hace un score del 100% ).
En relación con las especificaciones que aún no están maduras, desde Microsoft se han ofrecido implementaciones prototipo para que los desarrolladores se puedan ir familiarizando y haciendo pruebas. Obviamente, estas implementaciones están fuera del navegador porque las especificaciones no son maduras y están sujetas al cambio. Se puede experimentar con ellas en la página de laboratorio HTML5 dentro del centro de interoperabilidad de Microsoft.
Nota: Actualmente están disponibles los prototipos de WebSockets e IndexDB
HTML5 en Internet Explorer 9 |
Internet Explorer 8 ya incluía algunas de las funcionalidades de HTML5 recogidas dentro de los primeros borradores de la especificación, fundamentalmente el DOM Storage, la navegación AJAX y la mensajería entre documentos. Internet Explorer 9 construye sobre el soporte a HTML5 que incorpora Internet Explorer 8 y lo amplía con nueva funcionalidad, de hecho IE9 es lider en cumplimiento del estándar HTML5 según los tests del W3C.
Aunque vamos a aprovechar este post para comentar la funcionalidad más esperada por los desarrolladores, pero para quién busque una explicación detallada de las diferentes etiquetas y posibilidades, se puede consultar la guía de IE9 para desarrolladores.
|
Elementos Audio y Video
Audio y Video posiblemente están entre los elementos más conocidos y esperados de HTML5. Ambos están definidos dentro de la sección de Embedded Content de la especificación de HTML5. Básicamente, y como su nombre indica, audio y video permiten incrustar en la página HTML contenido de tipo audio y video sin tener que recurrir a plugins de terceros. Los desarrolladores podrán personalizar la experiencia a través de atributos. Por ejemplo:
| <video width="400" height="300" src="video.mp4" poster="frame.png" autoplay controls loop> This content appears if the video tag or the codec is not supported. </video> |
En Internet Explorer, esto mostrará en un espacio de 400x300 (width y height) el archivo de imagen “frame.png”mientras se carga el contenido de video. El archivo de video “video.mp4” (el atributo src), comenzará a reproducirse automáticamente cuando la página haya cargado (atributo autoplay) y se mostrarán controles para trabajar con el video (atributo controls), cuando el video finalice, se volverá a reproducir (atributo loop). Tanto si la etiqueta como el formato de video no está soportado, se mostrará el texto dentro de la etiqueta (“This content appears…”).
Para ver un ejemplo de la etiqueta video en acción, podemos visitar el sitio de Internet Explorer Test Drive.
El elemento audio se define de forma similar al elemento video, pero sin los atributos height, width ni poster. Para ver un ejemplo del elemento audio en acción, también podemos visitar el sitio de Internet Explorer Test Drive.
Los formatos soportados hasta la RC son
Elemento |
Formato |
Video |
Contenedor MP4, video H.264, todos los perfiles de audio en AAC o MP3 y video WebM, si se tiene instalado el códec VP8 |
Audio |
AAC o MP3 |
Elemento Canvas
Además de Audio y Video, otro elemento de la especificación que causa gran interés es el Canvas, que se usa junto con el API de Canvas para poder dibujar sobre la superficie del elemento. Para dibujar en un canvas, se utilizan “contextos”, como Contexto Canvas 2D, incluido en el pliego del W3C especificación Canvas 2D API. Al igual que todos los gráficos en Internet Explorer 9, el canvas está acelerado por hardware.
El canvas hace posible que pintemos rectángulos, paths, líneas, rellenos, arcos y curvas de Bezier o quadráticas. Para determinar la superficie de pintado, el elemento canvas acepta los atributos Height y Width. Por defecto tendrá el valor negro transparente y los valores de 300 y 150 pixeles respectivamente para Height y Width.
Al igual que con Audio y Video, el elemento Canvas hace posible que la web estándar incluya animaciones y efectos que hasta ahora solo se podían conseguir con plugins.
Se puede utilizar Javascript para animar los dibujos en el Canvas o para construir experiencias interactivas que respondan a la entrada por teclado, clicks de ratón o cualquier evento del navegador.
En este ejemplo del IE Test Drive podemos ver cómo se realiza funciona un pintado básico.
Además también se soporta la interfaz DOM para el canvas, junto APIs del contexto 2D. Se profundizar en el elemento canvas en su página de referencia en MSDN.
Gráficos SVG
El soporte para Scalable Vector Graphics (SVG) se ha convertido en una de las funcionalidades más demandadas para implementar en Internet Explorer, y es una forma muy potente para incluir imágenes fácilmente escalables y de alta resolución a un website sin la necesidad de un pugin o un visor externo.
Con Internet Explorer 9, Microsoft introduce el soporte al conjunto básico de SVG. Se basa en la recomendación a la especificación SVG 1.1. En la página de SVG en MSDN podemos ver en detalle la funcionalidad implementada
IE 9 soporta los siguientes métodos para mostrar etiquetas SVG:
Fragmentos de SVG dentro del HTML, simplemente incluyendo un tag <svg>
SVG como un documento (con extensión .svg)
SVG en XML o XHTML (similar al método de HTML5, pero en archivos XML o XHTML)
SVG como una imagen CSS
SVG utilizando el elemento object
SVG utilizando el img, embed, iframe o frame
Como elementos que trabajan con gráficos, Canvas y SVG se solapan en cierta funcionalidad. Ambos pueden ser una posible solución para determinadas problemáticas. Vamos a ver un par de factores de diferenciación para poder situarlos más adecuadamente:
Cada elemento de SVG se convierte en un elemento del DOM y se puede manipular como tal (eventos…) En canvas no es así porque trabajamos a nivel de pintado de pixeles.
SVG es vectorial y Canvas es bitmap
Canvas no funciona con Javascript deshabilitado.
En líneas generales… SVG se recomienda para interactivos y Canvas para juegos o animaciones donde se trabaje con mayor volumen de elementos.
Elementos semánticos
Un elemento semántico se define como aquel cuyo nombre de etiqueta describe su contenido, pero que no tiene una funcionalidad especial. Los elementos semánticos son especialmente útiles para mejorar la accesibilidad en la web para los usuarios y aplicaciones.
Se reconocen los siguientes elementos semánticos: section, nav, article, aside, hgroup, header, footer, figure, figcaption, mark
Para ampliar información sobre el soporte a estándares de Internet Explorer 9, se puede visitar la Guía para desarrolladores de IE9
Fuentes WOFF
La tipografía es parte importante de un sitio web, es parte fundamental del diseño y de la usabilidad del sitio. La problemática surge cuando la fuente que queremos utilizar no esta presente en el sistema del usuario y necesitamos de un método estándar para incluir fuentes externas en un sitio web.
Web Open Font Format WOFF se propuso en el 2009 como recomendación al W3C de mano de Mozilla, Opera y Microsoft y el W3C lo publicó como Working Draft el 27 de Julio del 2010. Actualmente esta soportado por los principales navegadores.
Por simplificar, WOFF es una forma de empaquetar y comprimir fuentes para que puedan ser incluidas en un sitio web soportada por los principales navegadores
https://blogs.msdn.com/b/ie/archive/2010/04/23/meet-woff-the-standard-web-font-format.aspx
https://readableweb.com/microsoft-woffles-on-svg-web-fonts-in-ie9/
https://en.wikipedia.org/wiki/Web_Open_Font_Format
Geolocalización
Internet Explorer 9 RC incorpora un API de Geolocalización! Permite, bajo el consentimiento del usuario, que el sitio web obtenga la localización geográfica para poder mejorar la experiencia
En este pequeño ejemplo de código vemos que no es nada complicado acceder a la información de localización
function getLocation() {
if (navigator.getlocation != undefined) {
navigator.getlocation.getCurrentPosition(callBack);
}
}
function callBack(position) {
var accuracy = position.coords[accuracy];
var latitude = position.coords[latitude];
var longitude = position.coords[longitude];
}
Esperamos que esta breve aclaración sobre el estado del arte en torno a HTML5 y la introducción al soporte en IE9 os haya resultado interesante.
Saludos,
El equipo de MSDN España ( @esmsdn )