Conozca las ventajas de la integración de Internet Explorer 9 con Windows 7Gonzalo Pérez C.Microsoft MVP ASP.NETwww.chalalo.cl@chalalo
Windows 7 Taskbar Overview
Jump List Category
Jump List Tasks
Sitios Anclados− Objetivos
− Una relación más estrecha entre los usuarios y sus sitios favoritos
− Permitir a los sitios web promocionar su marca fuera del navegador
− La perfecta integración de sitios web en una experiencia de usuario similar al «escritorio»
− Los sitios web pueden interactuar con los usuarios como las aplicaciones de Windows
− Disponible para cualquier sitio web
¿Qué son los Sitios Anclados?
demo
Personalizando Sitios Anclados
− MSSiteMode APIs permite a los desarrolladores tener la capacidad de intregrar sus sitios con la barra de tareas.
− Esta API se divide en dos grupos.− Propiedades de los sitios que son aplicables a cualquier usuario− Información dinámica para un usuario individual
− Animarse a promover los sitios que tengan esta característica.
Promover mi sitio!
Propiedades del sitio que pueden ser aplicables a cualquier usuario− Nombre de la Aplicación− Desktop Tooltips− URL de Inicio− Tamaño de la Ventana del sitio Anclado− Colores del botón de avance y retroceso− Estas funcionalidades pueden ser implementadas
con los sgts metatags
<meta name="application-name" content="Sample Site Mode Application"/> <meta name="msapplication-tooltip" content="Start the page in Site Mode"/> <meta name="msapplication-starturl" content="http://example.com/start.html"/> <meta name="msapplication-window" content="width=800;height=600"/> <meta name="msapplication-navbutton-color" content="red"/>
Jump List Tasks− Estas funcionalidades pueden ser
implementadas con los sgts metatags:
Name msapplication-task
Content name = Name Task
action-uri = URI (absolute or relative) icon-uri = URI (absolute or relative)
<META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/>
<META name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/>
Anclando mi sitioJump List Tags
demo
Información dinámica para un usuario individual
− Categorías Jump List− Overlay Icons− Thumbnail Toolbar Buttons
Categorías Jump List− Puede ser usado para mostrar
− Información de las acciones del usuario − Notificationes− Historial
− Patron de Uso− Crear la Categoría− Crear la lista de Items− Mostrar la Lista− Limpiar la Lista
window.external.msSiteModeCreateJumplist('List1'); window.external.msSiteModeAddJumpListItem('Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico'); window.external.msSiteModeShowJumplist(); window.external.msSiteModeClearJumplist();
Usando Categorías Jump List
JS APIs
demo
Overlay Icons
− Puede usarse para mostrar− Notificaciones− Estados
− Patrón de Uso− Setear Overlay Icon− Esconder Overlay
window.external.msSiteModeSetIconOverlay('http://host/images/overlay1.ico', 'Overlay 1'); window.external.msSiteModeClearIconOverlay();
Overlay Icons
JS APIs
demo
Thumbnail Toolbar Buttons− Pueden utilizarse para interactuar con el sitio sin tener que
restablecer o activar la ventana del navegador− Manejo de la interacción con Script del lado del Cliente
− Patrón de Uso− Agregar el Botón− Setear Event Handler− Mostrar Botón− Modificar Botón− Agregar Estilo al Button Style
btn1 = window.external.msSiteModeAddThumbBarButton('http://host/images/button1.ico', 'button 1'); document.addEventListener('msthumbnailclick', handler1, false); window.external.msSiteModeShowThumbBar(); window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);
Thumbnail Toolbar Buttons
JS APIs
demo
Limitaciones
− Jump List Tasks− Máximo de 5 Tareas
− Jump List Categories− Sólo una categoría− Máximo de 20 Items
− Thumbnail Toolbar Buttons− 7 Botones como máximo
Íconos
− Favicons usados en:− Taskbar button (32x32)− Pinned Site Browser UI (24x24)
− Otros íconos usuarios:− Jump List Task (16x16)− Jump List Category Items (16x16)− Thumbnail preview buttons (16x16)− Overlay icons (16x16)
− El Tamaño de los íconos deben ser− Recomendado: 16x16, 32x32, 48x48− Óptimo: 16x16, 24x24, 32x32, 64x64
Detección de las Características− Hoy en día hay un error en IE9 Beta que no nos deja
usar la característica de detección de patrón para la API MSSiteMode
− LaSolución es:
try { if(window.external.msIsSiteMode()) { } else {} catch(e) { }
if (window.external.msIsSiteMode) { // Check if the website was launched from a pinned site. if (window.external.msIsSiteMode()) { // TRUE } else { // FALSE } }
Recursos
Descarga Internet Explorer 9 Beta− http://labellezadeinternet.com/ o http://ietestdrive.com/
Comenzar a desarrollar sobre Internet Explorer 9− http://msdn.com/ie/
Ejemplos y Documentación de Pinned Site API− http://msdn.microsoft.com/en-us/library/gg131029(VS.
85).aspx
Mantenerse informado sobre últimas noticias de IE9− http://blogs.msdn.com/ie/ − http://
blogs.msdn.com/b/ie/archive/2010/09/17/user-experiences-customizing-pinned-sites.aspx
Microsoft Confidential
20
IE9 Developer Toolbar
Microsoft Confidential
21
Más opciones para desarrolladores− HTML 5− CSS3− Acelerado por HW− Nuevo motor de JS, mucho más rápido− Soporte Canvas− Y mucho más! Visitar:
http://msdn.microsoft.com/es-cl/ie/ff468705.aspx