Post on 18-Apr-2015
IE 9 para desarrolladores WebDiferenciación de Sites y Developer Tools
Boris Armenta – Developer Evangelistborisaf@microsoft.com@borisarm
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
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
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
• El site puede enviar notificaciones de nuevos eventos, invitando al usuario a entrar
• Ofrece un menú con contenidos actualizables desde el site
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
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
Cómo se implementa
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
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 ancladoAnclado programático
Demo
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" />
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
Información en el sitio ancladoPersonalizació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=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"/>
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();
La lista de atajos dinámica
Demo
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();
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);
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( 'http://host/star.ico', '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: http://www.microsoft.com/es-es/internet-explorer/
products/ie/home
Prueba el modo anclado Http://msdn.microsoft.com/es-es/ie
http://www.microsoft.com/iehttp://msdn.microsoft.com/es-es/iehttp://www.beautyoftheweb.comhttp://tailspinspyworks.codeplex.com
@esmsdn @Iexplorer_es @borisarm
Q&A
Gracias
© 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.