1 / 39

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

IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools. Boris Armenta – Developer Evangelist borisaf@microsoft.com @ borisarm. Agenda. Intenet Explorer 9 Diferenciación de Sites Herramientas de Desarrollo de IE 9. Internet Explorer 9.

lamar
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related