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

Ejemplos de sitios anclados

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

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.