Internet Explorer 9 Carine Dumontier – Product Manager

Agenda  Presentación de IE9  Que beneficios aporta IE9 a tu website  Let’s built it 2

Presentación de IE9

Centrado en tus sites Da el protagonismo a tus sites Seguridad y fiabilidad El navegador líder en seguridad Interoperab i -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

Que beneficios aporta IE9 a tu website

IE9 incrementa la fidelidad de los usuarios del site porque les permite anclar en el escritorio sus páginas favoritas 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 % incremento de fidelidad del usuario

Experiencia «Pinned site» 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  Personalidad  Diversión  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»  Información actualizada al momento  Notificaciones: El usuario vuelve a tu site y se mantiene actualizado en «1 clic» !  Thumbnail Interactivos 7

IE9 acerca los usuarios de tu site e incrementa el engagement con tus contenidos. Propuesta de valor PAGE 8 Incrementa el engagement de los usuarios con tu site de 50% Coste casi nulo: Solo 1 o 2 días de desarrollo Reach elevado : 15% cuota de mercado antes del verano

Pruebas PAGE 9 Huffington Post 1 mes, discoverability promocionando el PIN PVs – Usuarios de IE9 + 11% mas PVs en el site Engagement – Usuarios de IE9 se quedan + 14% en el site Duración – Usuarios de IE9 con el “PINNED” site pasan 49% mas tiempo en el site. hi5 < 1 mes No promoción o discoverability. PVs –Usuarios de IE9 + 15% mas PVs en el site Engagement – Usuarios de IE9 con el «pinned» site responden 3 veces mas a solicitudes sociales (amigos, invitaciones a juegos, mensajes)

Resources 10 Internet Explorer Developer Center on MSDN Windows User Experience Interaction Guidelines Channel 9 Taskbar related videos Icon Guidelines

Let’s Build It!

Behind The Scenes: Pinned Sites Creates an isolated instance of Internet Explorer Generates an AppID for a specific URL BHOs and other toolbars are not enabled Share the same real estate as Windows applications 12

Enhance your Pinned Site Getting Started Provide custom information Add the site as a Pinned Site programmatically Customize the icon Define Jump List tasks Add additional Jump List items in a custom list Show thumbbar buttons Notify users that interaction is needed Modify the navigation button colors Pinned Site mode requires no changes to your site 13

Customize Your Pinned Site 14 Use meta elements to provide specific information <meta name="msapplication-starturl" content=" /> <meta name="msapplication-window" content="width=1024;height=768" />

Discover and offer Site Pinning 15 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 }

Programmatically Pinning Your Site 16 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() }

Customizing The Icon 17 Uses existing, same markup to specify the icon to use Uses the existing, standards based site favicon  Best Practice:  Icon file should contain  Recommended: 16x16, 32x32, 48x48  Optimal: 16x16, 24x24, 32x32, 64x64

Adding Icon Overlays 18 Provide users with notifications or progress updates window.external.msSiteModeSetIconOverlay( ' 'Complete'); window.external.msSiteModeClearIconOverlay();

Adding Jump List Tasks 19 Windows 7 integration <meta name="msapplication-task" content="name=New Message; action-uri= icon-uri= <meta name="msapplication-task" content="name=New Appointment; action-uri= icon-uri=

Customizing Jump Lists 20 Adding a custom Jump List category window.external.msSiteModeCreateJumplist('Notifications'); window.external. msSiteModeAddJumpListItem( 'Scrum (37 minutes overdue)', ' ' window.external. msSiteModeShowJumpList();

Displaying Thumbnail Toolbar Buttons 21 var but1 = window.external.msSiteModeAddThumbBarButton( ' 'Mute'); document.addEventListener( 'msthumbnailclick', handler, false); window.external.msSiteModeShowThumbBar();

Updating Thumbnail Toolbar Buttons 22 Changing the Button Properties  window.external.msSiteModeUpdateThumbBarButton( buttonID, Enabled, Visible) Changing the Button Style var style1 = window.external.msSiteModeAddButtonStyle( buttonID, IconUrl, ToolTip) window.external.msSiteModeShowButtonStyle(buttonID, styleID);

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