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