![Page 1: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/1.jpg)
IE 9 para desarrolladores WebDiferenciación de Sites y Developer Tools
Boris Armenta – Developer [email protected]@borisarm
![Page 2: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/2.jpg)
Agenda
Intenet Explorer 9 Diferenciación de Sites Herramientas de Desarrollo de IE 9
![Page 3: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/3.jpg)
Internet Explorer 9
![Page 4: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/4.jpg)
Centrado en tus sites
Da el protagonismo
a tus sites
Seguridad y fiabilidad
El navegador líder en seguridad
Interoperabi
-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
![Page 5: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/5.jpg)
Diferenciación de Sites
![Page 6: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/6.jpg)
¿Para qué hacemos sites?
Comunicar Vender Relacionarnos …
![Page 7: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/7.jpg)
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?
𝑪𝒖𝒔𝒕𝒐𝒎𝒆𝒓𝑽𝒂𝒍𝒖𝒆∫(¿𝑵𝒖𝒎𝒃𝒆𝒓 𝒐𝒇 𝑼𝒔𝒆𝒓𝒔∗ 𝑰𝒏𝒄𝒓𝒆𝒎𝒆𝒏𝒕𝒂𝒍 𝑽𝒂𝒍𝒖𝒆𝒑𝒆𝒓𝑼𝒔𝒆𝒓 )¿
![Page 8: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/8.jpg)
Qué beneficio aporta IE9 a tu site
IE9 incrementa el valor de los clientes porque nos permite enriquecer su
experiencia en nuestra web.
![Page 9: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/9.jpg)
IE9 y Modo Anclado
Demo
![Page 10: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/10.jpg)
Beneficios del modo anclado
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
![Page 13: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/13.jpg)
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
![Page 14: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/14.jpg)
Algunos datos de la beta
11% más de páginas vistas
40% más de fidelización
49% más de tiempo
![Page 15: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/15.jpg)
Algunos datos de la beta
15% más de páginas vistas
14% más de fidelización
53% más de tiempo
![Page 16: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/16.jpg)
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 “drag to PIN”
Permite detectar si el usuario no ha anclado el site y ofrecerle la posibilidad de hacerlo
![Page 17: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/17.jpg)
Cómo se implementa
![Page 18: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/18.jpg)
18
Mejora tu sitio anclado
Primeros pasos
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
![Page 19: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/19.jpg)
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
![Page 20: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/20.jpg)
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() }}
![Page 21: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/21.jpg)
Descubrimiento de modo ancladoAnclado programático
Demo
![Page 22: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/22.jpg)
Personaliza tu sitio anclado
Utiliza elementos meta para indicar información especí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" />
![Page 23: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/23.jpg)
Personaliza el icono
Usa el markup ya existente para indicar tu icono de anclado
Usa los estádares ya definidos para el icono <link rel="shortcut icon" href="/favicon.ico" />
Mejores prácticas: Los archivos de icono deben contener
Recomendado: 16x16, 32x32, 48x48 Óptimo: 16x16, 24x24, 32x32, 64x64
![Page 24: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/24.jpg)
Información en el sitio ancladoPersonalización del icono
Demo
![Page 25: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/25.jpg)
Añadir tareas 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"/>
![Page 26: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/26.jpg)
Personalizar las listas de atajos
Añadircategorias a las lista 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();
![Page 27: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/27.jpg)
La lista de atajos dinámica
Demo
![Page 28: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/28.jpg)
Mostar botones en la vista en miniatura
var but1 = window.external.msSiteModeAddThumbBarButton( 'http://host/speaker.ico', 'Mute');
document.addEventListener( 'msthumbnailclick', handler, false);
window.external.msSiteModeShowThumbBar();
![Page 29: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/29.jpg)
Actualizar los botones
Cambiar las propiedades del botón window.external.msSiteModeUpdateThumbBarButton(
buttonID, Enabled, Visible)
Cambiar el estilo del botónvar style1 = window.external.msSiteModeAddButtonStyle( buttonID, IconUrl, ToolTip)window.external.msSiteModeShowButtonStyle(buttonID, styleID);
![Page 30: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/30.jpg)
Botones en la vista de miniaturas
Demo
![Page 31: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/31.jpg)
Añade capas a los icono
Notifica al usuario las actualizaciones y el progreso de las operaciones
window.external.msSiteModeSetIconOverlay( 'http://host/star.ico', 'Complete');
window.external.msSiteModeClearIconOverlay();
![Page 32: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/32.jpg)
Notificaciones en la barra de tareas
Demo
![Page 33: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/33.jpg)
Herramientas de desarrollo de IE9
![Page 34: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/34.jpg)
Las herramientas de desarrollo de IE 9
Demo
![Page 35: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/35.jpg)
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
![Page 36: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/36.jpg)
Prueba Internet Explorer 9
Descárgalo desde: http://www.microsoft.com/es-es/internet-explorer/
products/ie/home
Prueba el modo anclado Http://msdn.microsoft.com/es-es/ie
![Page 37: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/37.jpg)
http://www.microsoft.com/iehttp://msdn.microsoft.com/es-es/iehttp://www.beautyoftheweb.comhttp://tailspinspyworks.codeplex.com
@esmsdn @Iexplorer_es @borisarm
Q&A
![Page 38: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/38.jpg)
Gracias
![Page 39: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools Boris Armenta – Developer Evangelist borisaf@microsoft.com @borisarm](https://reader036.vdocument.in/reader036/viewer/2022070312/5533fa46550346795e8b49d2/html5/thumbnails/39.jpg)
© 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.