IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer

Agenda Intenet Explorer 9 Diferenciación de Sites Herramientas de Desarrollo de IE 9

Internet Explorer 9

Centrado en tus sites Da el protagonismo a tus sites Seguridad y fiabilidad El navegador líder en seguridad Interopera bi -lidad Soporte a estándares modernos con un solo Mark up Rapidez IE9 utiliza la potencia completa de tu PC para que todo funcione más rápido. Internet Explorer 9 permite disfrutar una nueva experiencia web con las mismas ventajas que las aplicaciones del PC

Diferenciación de Sites

¿Para qué hacemos sites? Comunicar Vender Relacionarnos …

Valor del usuario Definiendo Incremental Value per User como: Compromiso(mayor probabilidad de retorno) Duración (mayor probabilidad de quedarse) Profundidad(mayor número de páginas vistas por sesión) ¿Cómo es la función de valor de los clientes en nuestro site?

Qué beneficio aporta IE9 a tu site IE9 incrementa el valor de los clientes porque nos permite enriquecer su experiencia en nuestra web.

IE9 y Modo Anclado Demo

Beneficios del modo anclado Cuando el site está anclado en el escritorio: Queda permanente accesible para el usuario Queda permanente accesible para el usuario El site puede enviar notificaciones de nuevos eventos, invitando al usuario a entrar El site puede enviar notificaciones de nuevos eventos, invitando al usuario a entrar Ofrece un menú con contenidos actualizables desde el site Ofrece un menú con contenidos actualizables desde el site

Ejemplos de sitios anclados

Experiencia Sitios Anclados y sus beneficios Favicon: Tu marca esta destacada El Site aparece como una aplicación para el usuario Los colores de «navegación» aportan a tu site: Frescura Dinamismo Jump List estáticas y dinámicas: Inmediatez para el usuario a la hora de visitar tu site o a una sección concreta, se beneficia de: una mayor rapidez al navegar Accesibilidad directa en «1 clic» Notificaciones: El usuario vuelve a tu site y se mantiene actualizado en «1 clic» ! Miniaturas Interactivas

Algunos datos de la beta 11% más de páginas vistas 40% más de fidelización 49% más de tiempo

Algunos datos de la beta 15% más de páginas vistas 14% más de fidelización 53% más de tiempo

Descubrimiento Opciones : Top Pop-Down: Detecta si el site tiene el anclaje implementado (o no) y manda una notificación Top Pop-Down Toast-Style: Mensaje que aparece en la pantalla. Emplazamiento configurable (pop up o pop under) Toast-Style Banner de Publicidad: Implementación de una imagen. Recomendado para el escenario del drag to PIN Permite detectar si el usuario no ha anclado el site y ofrecerle la posibilidad de hacerlo

Cómo se implementa

Mejora tu sitio anclado Primeros pasos 18 Proporciona información personalizada Agrega el site como anclado de forma programática Personaliza el icono Define tareas de la lista de saltos Añade elementos a la lista personalizada Muestra botones en miniatura Indica a los usuarios que se necesita interacción Modifica los colores de los botones de navegación El modo anclado no requiere cambios en el sitio

Descubre y ofrece modo anclado try{ if (window.external.msIsSiteMode()) { //User is using IE9 and running site in pinned mode } else { //User is running IE9 but does not have the site pinned } } catch(ex) { //User is not running IE9. recommend upgrade } Usa JavaScript para detectar el modo anclado y ofrecerlo

Ancla tu sitio programaticamente Usa un poco de código para ofrecer el anclado automático if (window.external.msIsSiteMode) { if (window.external.msIsSiteMode()) { // we are already in site mode } else { // Show HTML elements that will promote the // addition of a pin site to the Programs menu window.external.msAddSiteMode() }

Descubrimiento de modo anclado Anclado programático Demo

Personaliza tu sitio anclado Utiliza elementos meta para indicar información específica <meta name="msapplication-starturl" content=" /> <meta name="msapplication-window" content="width=1024;height=768" />

Personaliza el icono Usa el markup ya existente para indicar tu icono de anclado Usa los estádares ya definidos para el icono Mejores prácticas: Los archivos de icono deben contener Recomendado: 16x16, 32x32, 48x48 Óptimo: 16x16, 24x24, 32x32, 64x64

Información en el sitio anclado Personalización del icono Demo

Añadir tareas a la lista de atajos Integración con Windows 7 <meta name="msapplication-task" content="name=New Message; action-uri= icon-uri= <meta name="msapplication-task" content="name=New Appointment; action-uri= icon-uri=

Personalizar las listas de atajos Añadircategorias a las lista de atajos window.external.msSiteModeCreateJumplist('Notifications'); window.external. msSiteModeAddJumpListItem( 'Scrum (37 minutes overdue)', ' ' window.external. msSiteModeShowJumpList();

La lista de atajos dinámica Demo

Mostar botones en la vista en miniatura var but1 = window.external.msSiteModeAddThumbBarButton( ' 'Mute'); document.addEventListener( 'msthumbnailclick', handler, false); window.external.msSiteModeShowThumbBar();

Actualizar los botones Cambiar las propiedades del botón window.external.msSiteModeUpdateThumbBarButton( buttonID, Enabled, Visible) Cambiar el estilo del botón var style1 = window.external.msSiteModeAddButtonStyle( buttonID, IconUrl, ToolTip) window.external.msSiteModeShowButtonStyle(buttonID, styleID);

Botones en la vista de miniaturas Demo

Añade capas a los icono Notifica al usuario las actualizaciones y el progreso de las operaciones window.external.msSiteModeSetIconOverlay( ' 'Complete'); window.external.msSiteModeClearIconOverlay();

Notificaciones en la barra de tareas Demo

Herramientas de desarrollo de IE9

Las herramientas de desarrollo de IE 9 Demo

Herramientas de desarrollo Exploración del DOM Depurador de HTML y CSS Depurador de JavaScript Profiling de Script Profiling de Tráfico de red Consola de ejecución

Prueba Internet Explorer 9 Descárgalo desde: Descárgalo desde: explorer/products/ie/home explorer/products/ie/home Prueba el modo anclado Prueba el modo anclado

Q&A

Gracia s

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.