El Blog de Francis Urteaga: Navegación estilo Metro: un motor, dos experiencias, sin renunciar a nada

Comparto este post, que fue publicado en el blog oficial de Building Windows 8 el año pasado:
Nos complace mucho la calurosa bienvenida que los desarrolladores nos ofrecieron con ocasión de la presentación de una gran oportunidad que se abre ahora con Windows 8. Con la B8 nuestra atención se desplaza hacia la versión Preliminar de Desarrollo, qué contiene y cómo va evolucionando. Esperamos que aquellos de vosotros que deseen participar en el blog de IE ya estén instalando y utilizando esta versión preliminar. Aunque aún es eso, una preliminar, y dirigida a los desarrolladores, su uso resulta divertido.
Queríamos hablar un poco sobre la navegación estilo Metro y el trabajo que hemos hecho hasta ahora para ofrecer una experiencia de navegación que realmente prescinde de los elementos habituales de la interfaz de usuario del navegador (“chromeless”). Hemos puesto mucho empeño en el soporte para HTML5 y en el soporte de los estándares con el mejor rendimiento y el máximo nivel de fiabilidad como complemento a las bien conocidas y eficaces funciones de seguridad de IE. Seguimos probando y ofreciendo una experiencia de desktop que utiliza las mismas tecnologías HTML5. Así es como ofrecemos una experiencia de navegación sin riesgos con IE10. En este artículo describo cómo es la versión Preliminar 3 de Plataforma IE10 en la Preliminar de Desarrollo de Windows 8. Este artículo lo ha redactado Dean--Steven

Para hacer progresar la experiencia de navegación, pocas cosas hay más eficaces que ponerla en un dispositivo táctil. Para conseguir la mejor navegación en cualquier factor de forma con Windows 8 hemos rediseñado por completo la experiencia del navegador web y la arquitectura subyacente

Nuestra planteamiento con Windows 8 empieza con un excelente motor de navegación HTML5 que es capaz de ofrecer dos experiencias distintas. El motor, en sí mismo, ofrece una compatibilidad fuerte con los estándares web, un rendimiento superior mediante la aceleración por hardware, un elevado nivel de seguridad, privacidad, etc. Después hemos creados dos experiencias a partir de este motor: una nueva experiencia estilo Metro y otra, más tradicional, que es la actual generación de navegador para equipos de escritorio, con pestañas y un “chrome” relativamente escaso.

El resultado es que ahora podemos llevar un solo dispositivo y nos ofrece ambas experiencias sin ningún riesgo ni renuncia, ya sea funcionando como una atractiva tableta o como un portátil flexible. También podemos tener ambas experiencias en un escritorio potente con varios monitores.

Puedes conseguir la mejor experiencia envolvente en sitios Web HTML5 habilitados para interfaz táctil con el navegador estilo Metro en Windows 8. Si prefieres un entorno más tradicional de ventana y controlado mediante pestañas, tienes una versión avanzada de IE en el escritorio. Ambas modalidades funcionan con el mismo motor IE10.

Mientras creábamos una experiencia estilo Metro totalmente nueva, nos ocurrió algo muy curioso: nos dimos cuenta de que al final era una mejor forma de navegar por la Web incluso en un PC de escritorio con pantalla grande, teclado y ratón. Aunque se trata de un navegador orientado en principio a la interacción táctil, funciona muy bien con teclado, ratón o trackpad. Si has tenido ocasión de navegar desde el teléfono con cierta asiduidad, probablemente ya estarás acostumbrado a utilizar una modalidad que prácticamente no tiene “marco” , una gestión de pestañas mucho más visual, una experiencia más envolvente, con menos aspecto de “escritorio” y mucho más manual. Puede ser que te des cuenta que prefieres la experiencia de Internet Explorer 10 en estilo Metro que la de escritorio.

Solo por recordar: el navegador estilo Metro en la actual Preliminar de Desarrollo de Windows es para desarrolladores, no para usuarios finales. Es un trabajo orientado a la comunidad de desarrollo, para que pueda disponer ya de la experiencia de consumidor (por ejemplo, actualizando ciertas librerías obsoletas de los sitios Web que no funcionan bien en IE10, o comprobando que los sitios que funcionan sin plug-ins para otros dispositivos también funcionan bien con el navegador estilo Metro).

Un mismo motor, dos experiencias

Dado que es fundamental conseguir un excelente soporte para HTML5 tanto en el IE para desktop como en el IE estilo Metro, hemos adaptado la arquitectura del motor de IE10 para hacerlo operativo con ambas experiencias. Las dos comparten el mismo historial de navegación, la lista de direcciones escritas, las configuraciones y resto de elementos. El motor común ofrece una experiencia consistente, tanto en velocidad como en seguridad y potencia, tanto para los sitios web actuales como para las aplicaciones estilo Metro:

Rendimiento. Internet Explorer estilo Metro tiene el mismo rendimiento, líder del mercado, que el IE para escritorio. Incorpora las mismas características de aceleración por hardware para gráficos, vídeo y audio, JavaScript compilado y nuevas optimizaciones en el motor de restitución y formato para mejorar la respuesta en interacción táctil.
Seguridad. IE estilo Metro comparte las mismas medidas de seguridad, fiabilidad y privacidad que el IE de desktop, las más avanzadas del mercado. Entre otras: SmartScreen, filtro XSS y navegación InPrivate
HTML5. IE estilo Metro se mantiene dentro del mismo modelo avanzado de programación Web basado en HTML5 que la versión de escritorio. En BUILD presentamos nuevo soporte para las funcionalidades CSS Text Shadow, Transiciones y Animaciones y Transformaciones 3D, las APIs de HTML 5 IndexedDB, Web Sockets y File, el Historial HTML5, división de palabras (guiones) y la Cache de Aplicación de HTML5 aparte de otras novedades que ya habían aparecido en las Preliminares de Plataforma de IE10.

Si quieres leer más sobre el IE para escritorio y sobre los detalles técnicos del motor de navegación Trident y el motor de JavaScript Chakra, te recomiendo el Blog de IE.

Rediseño del navegador como aplicación estilo Metro

Cuando decidimos replantearnos el navegador para convertirlo en una aplicación estilo Metro, vimos que estábamos ante un nuevo modelo que podía hacer avanzar la web.

Por ejemplo, el estilo Metro es envolvente. En el caso de una página Web en IE estilo Metro no aparece ningún tipo de elemento visual que distraiga la atención. Podemos utilizar gestos estándar para conseguir la funcionalidad que, de otra forma nos haría perder la atención a lo que aparece en la Web. Podemos buscar y compartir información desde IE estilo Metro utilizando “charms” igual que se hace con otras aplicaciones estilo Metro, Podemos utilizar el charm de Dispositivos, por ejemplo, para reproducir y proyectar vídeos desde las páginas web en dispositivos externos. Podemos acoplar IE lado contra lado con otra aplicación estilo metro. El uso de sitios web junto con aplicaciones estilo Metro es sencillo porque están diseñados para trabajar juntos.

El nuevo estilo Metro es bastante más que un diseño visual. Por ejemplo, nos permite entrar en nuestros sitios web importantes tecleando menos. Verás una lista en pantalla, que puedes manejar con los dedos, de los sitios web de usados frecuentemente y los sitios anclados cuando abres una nueva pestaña o cuando se muestra la barra de direcciones:

El navegador estilo metro muestra una lista visual, manejable con el tacto, de los sitios web de acceso frecuente y anclados.

Al escribir en la barra de direcciones, va filtrando esta lista. Cuando nos movemos por las pestañas abiertas, la barra de direcciones aparece al momento, de modo que podemos ir al sitio web que queramos si no está abierto aún:

Pestañas abiertas y barra de direcciones en el navegador estilo metro

Las funciones de corrector ortográfico y auto-completar también nos evitan tener que escribir mucho a la hora de utilizar direcciones web. Puedes ver que incluso puedes navegar con InPrivate y Protección Anti-tracking.

Para que los sitios web que más te interesan estén más accesibles, puedes anclarlos a la nueva ventana de Inicio de Windows 8, de la misma forma que anclamos las aplicaciones estilo Metro.

Anclado de un sitio web en la ventana Inicio

IE10 ofrece controles (como check box y radio buttons) con más espacio alrededor, para que sea más fácil su uso con los dedos. Los desarrolladores pueden hacer sus páginas web mucho más adaptadas a la interfaz táctil empleando patrones web estándar como CSS para modificar el estilo de los controles. Por ejemplo, aquí vemos un control HTML5 de tipo selector de rango de valores con una imagen personalizada de fondo:

Control HTML5 con imagen de fondo personalizada en IE10 (arriba), en Chrome (abajo a la izquierda),
y en Mozilla Firefox (abajo a la derecha)

El IE estilo Metro soporta las funciones de desplazamiento y zoom con gestos de los dedos. Las páginas se muestran de manera rápida y fluida, igual que el resto del sistema, debido a que el motor de HTML5 aprovecha toda la potencia de la aceleración por hardware. Puedes comprobarlo con el rendimiento de las funciones de desplazamiento (pannning) y scroll de los contenidos.

Aquí tienes una demo que muestra este rendimiento y otras características de la experiencia de navegación:

Descarga este vídeo para reproducirlo en tu reproductor preferido:
MP4 de alta calidad | MP4 de menor calidad

IE estilo metro: pensando en el futuro

Nosotros vemos nuevas oportunidades que pueden hacer evolucionar la web como resultado de esta nueva experiencia de navegación. Existe un trabajo por delante para los desarrolladores de sitios web, que pueden aprovechar las ventajas que se les ofrecen. La interfaz táctil es sumamente importante, también lo es tener una experiencia envolvente. Las oportunidades que se abren ahora son inmensas, visto la enorme cantidad de tiempo que la gente dedica a visitar la web.

La Preliminar de Desarrollo de Windows es para desarrolladores, no para usuarios finales. Por ejemplo, aún queda mucho por hacer para garantizar que todos los sitios web que ahora funcionan sin plug-ins con otros dispositivos, pueden también funcionar igual en IE10. De la misma forma, algunos sitios pueden necesitar poner al día unas librerías obsoletas que no funcionan correctamente con IE10. También es importante que el navegador actual para escritorio ofrezca el mismo nivel de compatibilidad que todo el mundo pide a una nueva versión de Windows.

Los pesimistas pueden criticarnos por tener lo que ellos denominan “dos navegadores”. En realidad solo hay un único motor de navegación que podemos utilizar bajo dos “pieles”. Con el tiempo, la experiencia estilo Metro estará presente en más y más escenarios de navegación del consumidor, aun reconociendo que el navegador para escritorio sigue jugando un papel fundamental en las actividades de muchas personas. Podemos definir nuestro estilo por defecto, pero también cambiar sin problemas de uno a otro o utilizar cualquier otro navegador con Windows 8.

Los pesimistas seguramente tratarán de poner en tela de juicio hasta qué punto son necesarios los distintos aspectos de cada estilo de navegador. Si tienes intención de permanecer inmerso todo el tiempo en el mundo de Metro, puedes hacerlo. Ni siquiera vas a ver el escritorio, y Windows no cargará el código salvo que tú lo arranques de manera expresa. Pero si para ti tiene valor la experiencia de escritorio –por su control más preciso, la potencia del sistema de ventanas y la gestión de archivos, por compatibilidad con ciertos complementos, todas estas capacidades siguen estando a tu disposición de la manera más directa, con solo pulsar un botón. En la arquitectura y el diseño hemos puesto un cuidado especial en ofrecer una experiencia sin compromisos ni renuncias, adaptada a tus necesidades, aunque solo lleves un dispositivo. En definitiva, que puedas navegar con total comodidad.

FUENTE: Dean Hachamovitch - http://blogs.msdn.com/b/b8/archive/2011/09/14/metro-style-web-browsing-one-engine-two-experiences-no-compromises.aspx

Saludos