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

1. IE 9 paradesarrolladores WebDiferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm

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

3. Internet Explorer 9

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

5. Diferenciación de Sites

6. ¿Para quéhacemos sites? • Comunicar • Vender • Relacionarnos • …

7. Valor del usuario • DefiniendoIncremental Value per User como: • Compromiso↑(mayor probabilidad de retorno) • Duración↑ (mayor probabilidad de quedarse) • Profundidad↑(mayor número de páginas vistas porsesión) ¿Cómoes la función de valor de los clientes en nuestro site?

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

9. IE9 y Modo Anclado Demo

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

11. Ejemplos de sitiosanclados

12. Ejemplos de sitiosanclados

13. 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 JumpList 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

14. Algunosdatos de la beta 11% más de páginas vistas 40% más de fidelización 49% más de tiempo

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

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

17. Cómo se implementa

18. Primerospasos El modoancladono requierecambios en el sitio Mejoratusitioanclado • Proporcionainformaciónpersonalizada • Agrega el site comoanclado de forma programática • Personalizael icono • Define tareas de la lista de saltos • Añadeelementos a la listapersonalizada • Muestrabotones en miniatura • Indica a los usuariosque se necesitainteracción • Modificalos colores de los botones de navegación

19. Descubre y ofrecemodoanclado Usa JavaScript paradetectar el modoanclado y ofrecerlo 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}

20. Anclatusitioprogramaticamente Usa un poco de códigoparaofrecer el ancladoautomá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() } }

21. Descubrimiento de modo anclado Anclado programático Demo

22. Personalizatusitioanclado Utilizaelementos meta paraindicarinformaciónespecífica <meta name="application-name" content="Pinned Name" /> <meta name="msapplication-tooltip" content="Start Site" /> <meta name="msapplication-starturl" content="http://host/page.htm" /> <meta name="msapplication-window" content="width=1024;height=768" /> <meta name="msapplication-navbutton-color" content="#FF3300" />

23. Personaliza el icono Usa el markup yaexistenteparaindicartuicono de anclado Usa los estádaresyadefinidospara el icono • <link rel="shortcut icon" href="/favicon.ico" /> Mejoresprácticas: • Los archivos de iconodebencontener • Recomendado: 16x16, 32x32, 48x48 • Óptimo: 16x16, 24x24, 32x32, 64x64

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

25. Añadirtareas a la lista de atajos Integración con Windows 7 <meta name="msapplication-task" content="name=New Message; action-uri=http://host/NewMail.htm; icon-uri=http://host/mail.ico"/> <meta name="msapplication-task" content="name=New Appointment; action-uri=http://host2/NewAppt.htm; icon-uri=http://host2/Appt.ico"/>

26. Personalizarlaslistas de atajos Añadircategorias a laslista de atajos window.external.msSiteModeCreateJumplist('Notifications'); window.external. msSiteModeAddJumpListItem( 'Scrum (37 minutes overdue)', 'http://host/reminders.html', 'http://host/images/bell.ico'); window.external. msSiteModeShowJumpList();

27. La lista de atajos dinámica Demo

28. Mostarbotones en la vista en miniatura var but1 = window.external.msSiteModeAddThumbBarButton( 'http://host/speaker.ico', 'Mute'); document.addEventListener( 'msthumbnailclick', handler, false); window.external.msSiteModeShowThumbBar();

29. Actualizar los botones Cambiarlaspropiedades 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);

30. Botones en la vista de miniaturas Demo

31. Añadecapas a los icono Notifica al usuariolasactualizaciones y el progreso de lasoperaciones window.external.msSiteModeSetIconOverlay( 'http://host/star.ico', 'Complete'); window.external.msSiteModeClearIconOverlay();

32. Notificaciones en la barra de tareas Demo

33. Herramientas de desarrollo de IE9

34. Las herramientas de desarrollo de IE 9 Demo

35. 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

36. Prueba Internet Explorer 9 • Descárgalodesde: • http://www.microsoft.com/es-es/internet-explorer/products/ie/home • Prueba el modoanclado • Http://msdn.microsoft.com/es-es/ie

37. Q&A http://www.microsoft.com/ie http://msdn.microsoft.com/es-es/ie http://www.beautyoftheweb.com http://tailspinspyworks.codeplex.com @esmsdn @Iexplorer_es @borisarm

38. Gracias