ie 9 para desarrolladores web diferenciación de sites y developer tools
DESCRIPTION
IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools. Boris Armenta – Developer Evangelist [email protected] @ borisarm. Agenda. Intenet Explorer 9 Diferenciación de Sites Herramientas de Desarrollo de IE 9. Internet Explorer 9. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/html5/thumbnails/3.jpg)
Internet Explorer 9
![Page 4: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/html5/thumbnails/5.jpg)
Diferenciación de Sites
![Page 6: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/html5/thumbnails/9.jpg)
IE9 y Modo Anclado
Demo
![Page 10: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/html5/thumbnails/17.jpg)
Cómo se implementa
![Page 18: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/html5/thumbnails/33.jpg)
Herramientas de desarrollo de IE9
![Page 34: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/html5/thumbnails/38.jpg)
Gracias
![Page 39: IE 9 para desarrolladores Web Diferenciación de Sites y Developer Tools](https://reader036.vdocumento.com/reader036/viewer/2022062500/56815a51550346895dc7846b/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.