Ppt workshop ie9

1,385 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,385
On SlideShare
0
From Embeds
0
Number of Embeds
258
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ppt workshop ie9

  1. 1. Conozca las ventajas de la integración de Internet Explorer 9 con Windows 7<br />Gonzalo Pérez C.<br />Microsoft MVP ASP.NET<br />www.chalalo.cl<br />@chalalo<br />
  2. 2. Windows 7 Taskbar Overview<br />Jump List Category<br />Jump List Tasks<br />
  3. 3. SitiosAnclados<br />Objetivos<br />Una relación más estrecha entre los usuarios y sus sitios favoritos<br />Permitir a los sitios web promocionar su marca fuera del navegador<br />La perfecta integración de sitios web en una experiencia de usuario similar al «escritorio»<br />Los sitios web pueden interactuar con los usuarios como las aplicaciones de Windows<br />Disponible para cualquier sitio web<br />
  4. 4. ¿Qué son los SitiosAnclados?<br />demo <br />
  5. 5. PersonalizandoSitiosAnclados<br />MSSiteMode APIs permite a los desarrolladorestener la capacidad de intregrarsussitios con la barra de tareas.<br />Esta API se divide en dos grupos.<br />Propiedades de los sitiosque son aplicables a cualquierusuario<br />Informacióndinámicapara un usuario individual<br />Animarse a promover los sitiosquetenganestacaracterística.<br />Promover mi sitio!<br />
  6. 6. Propiedades del sitioquepuedenseraplicables a cualquierusuario<br />Nombre de la Aplicación<br />Desktop Tooltips<br />URL de Inicio<br />Tamaño de la Ventana del sitioAnclado<br />Colores del botón de avance y retroceso<br />Estasfuncionalidadespuedenserimplementadas con los sgtsmetatags<br /><meta name="application-name" content="Sample Site Mode Application"/> <br /><meta name="msapplication-tooltip" content="Start the page in Site Mode"/> <br /><meta name="msapplication-starturl" content="http://example.com/start.html"/> <br /><meta name="msapplication-window" content="width=800;height=600"/> <br /><meta name="msapplication-navbutton-color" content="red"/> <br />
  7. 7. Jump List Tasks<br />Estasfuncionalidadespuedenserimplementadas con los sgtsmetatags:<br />Name <br />msapplication-task<br /> Content<br /> name = Name Task<br /> action-uri = URI (absolute or relative)<br /> icon-uri = URI (absolute or relative)<br /><META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/><br /><META name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/><br />
  8. 8. Anclando mi sitioJump List Tags<br />demo <br />
  9. 9. Información dinámica para un usuario individual<br />Categorías Jump List<br />Overlay Icons<br />Thumbnail Toolbar Buttons<br />
  10. 10. Categorías Jump List<br />Puedeserusadoparamostrar<br />Información de lasacciones del usuario<br />Notificationes<br />Historial<br />Patron de Uso<br />Crear la Categoría<br />Crear la lista de Items<br />Mostrar la Lista<br />Limpiar la Lista<br />window.external.msSiteModeCreateJumplist('List1');<br />window.external.msSiteModeAddJumpListItem('Item 1', 'http://host/Item1.html',<br /> 'http://host/images/item1.ico');<br />window.external.msSiteModeShowJumplist();<br />window.external.msSiteModeClearJumplist();<br />
  11. 11. UsandoCategorías Jump List<br />JS APIs<br />demo <br />
  12. 12. Overlay Icons<br />Puedeusarseparamostrar<br />Notificaciones<br />Estados<br />Patrón de Uso<br />Setear Overlay Icon<br />Esconder Overlay<br />window.external.msSiteModeSetIconOverlay('http://host/images/overlay1.ico', 'Overlay 1');<br />window.external.msSiteModeClearIconOverlay();<br />
  13. 13. Overlay Icons<br />JS APIs<br />demo <br />
  14. 14. Thumbnail Toolbar Buttons<br />Puedenutilizarseparainteractuar con el sitio sin tenerquerestablecer o activar la ventana del navegador<br />Manejo de la interacción con Script del lado del Cliente<br />Patrón de Uso<br />Agregar el Botón<br />Setear Event Handler<br />MostrarBotón<br />ModificarBotón<br />AgregarEstilo al Button Style<br /> btn1 = window.external.msSiteModeAddThumbBarButton('http://host/images/button1.ico',<br /> 'button 1');<br />document.addEventListener('msthumbnailclick', handler1, false);<br />window.external.msSiteModeShowThumbBar();<br />window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);<br />
  15. 15. Thumbnail Toolbar Buttons<br />JS APIs<br />demo <br />
  16. 16. Limitaciones<br />Jump List Tasks<br />Máximo de 5 Tareas<br />Jump List Categories<br />Sólounacategoría<br />Máximo de 20 Items<br />Thumbnail Toolbar Buttons<br />7 Botonescomomáximo<br />
  17. 17. Íconos<br />Favicons usados en:<br />Taskbar button (32x32)<br />Pinned Site Browser UI (24x24)<br />Otrosíconosusuarios:<br />Jump List Task (16x16)<br />Jump List Category Items (16x16)<br />Thumbnail preview buttons (16x16)<br />Overlay icons (16x16)<br />El Tamaño de los íconos deben ser<br />Recomendado: 16x16, 32x32, 48x48<br />Óptimo: 16x16, 24x24, 32x32, 64x64<br />
  18. 18. Detección de lasCaracterísticas<br />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<br />LaSoluciónes:<br /> if (window.external.msIsSiteMode) {<br /> // Check if the website was launched from a pinned site.<br /> if (window.external.msIsSiteMode())<br /> {<br />// TRUE<br /> }<br /> else<br /> {<br /> // FALSE<br /> }<br /> }<br /> try {<br /> if(window.external.msIsSiteMode()) { }<br /> else {}<br /> catch(e) { }<br />
  19. 19. Recursos<br />Descarga Internet Explorer 9 Beta<br />http://labellezadeinternet.com/ o http://ietestdrive.com/<br />Comenzar a desarrollarsobreInternet Explorer 9<br />http://msdn.com/ie/<br />Ejemplos y Documentación de Pinned Site API<br />http://msdn.microsoft.com/en-us/library/gg131029(VS.85).aspx<br />Mantenerseinformadosobreúltimasnoticiasde IE9<br />http://blogs.msdn.com/ie/<br />http://blogs.msdn.com/b/ie/archive/2010/09/17/user-experiences-customizing-pinned-sites.aspx<br />
  20. 20. IE9 DeveloperToolbar<br />Microsoft Confidential<br />20<br />
  21. 21. Más opciones para desarrolladores<br />HTML 5<br />CSS3<br />Acelerado por HW<br />Nuevo motor de JS, mucho más rápido<br />Soporte Canvas<br />Y mucho más! Visitar:<br />http://msdn.microsoft.com/es-cl/ie/ff468705.aspx<br />Microsoft Confidential<br />21<br />

×