Presentación preparada por Adrián Catalán (@ykro) Video disponible en http://youtu.be/iM7b_XPx1_4 Demos en http://dl.dropbox.com/u/8418860/IE9PinnedSitesDEmos.zip

1. IE9: Pinned Sites
Adrián Catalán
adriancatalan@elementalgeeks.com
@ykro

2. Pinned Sites
• ¿qué son?
• Importancia de la integración

5. Name Content
El nombre del acceso directo, si en caso no se especifica, se utiliza el
application-name título de la página.
Texto que se muestra cuando el puntero del mouse está sobre el acceso
msapplication-tooltip directo del pinned site.
URL principal de la aplicación, si en caso no se especifica se toma la URL
msapplication-starturl de la página actual. Existe soporte para protocolos. HTTP, HTTPS y FTP
msapplication-navbutton-
El color de los botones de Back y Forward al navegar dentro del sitio.
color
•El tamaño con el que se muestra al iniciar la ventana del navegador
msapplication-window conteniendo al pinned site.

6. JumpList Tasks

7. <META name="msapplication-
task" content="name=Task
1;action-
uri=http://host/Page1.html;icon
-uri=http://host/icon1.ico"/>

8. Overlay Icons

9. // agregar
window.
external.msSiteModeSetIconOverlay(
'http://host/images/overlay1.ico',
'Overlay 1');
//quitar
window.
external.msSiteModeClearIconOverlay();

10. Thumbnail

11. btn1 =
window.external.msSiteModeAddThumbBarBut
ton(
'http://host/images/button1.ico', 'button 1');
document.addEventListener('msthumbnailclick',
handler1, false);
function handler1 (btn) { alert
("addeventlist:thumbnail btn id" +
btn.buttonID); }

12. window.external.msSiteModeS
howThumbBar();
window.external.msSiteModeU
pdateThumbBarButton(btn1,
false, true);

13. if (window.external.msIsSiteMode) {
/* estamos usando un pinned site */
if (window.external.msIsSiteMode())
{
/* hay soporte del navegador */
} else {
/* navegador no soporta */
}

14. IE9: Pinned Sites
Adrián Catalán
adriancatalan@elementalgeeks.com
@ykro