2011

Caractersticas Internet Explorer 9

Desarrollando con IE9
Este documento contiene un breve resumen de las nuevas caractersticas de Internet Explorer 9 y de cmo es posible aprovechar las caractersticas de Windows 7.

Julio Cesar Avellaneda Sua http://julitogtu.wordpress.com 01/01/2011

MANUAL INTERNET EXPLORER 9

1. Nuevas caractersticas Pgina al abrir nueva pestaa: Muestra los sitios ms visitados en orden descendiente para poder acceder a ellos de manera rpida, se visualiza el nombre e icono del sitio, as como una barra que indica que tanto visita dicho sitio. Nueva barra de notificacin: Para todos los cuadros de dialogo que aparecan antes impidiendo la navegacin por el sitio, se dispone de una barra en la parte inferior que indica la informacin sobre el cuadro de dilogo as como las posibles respuestas. Sitios anclados: Puedes acceder de manera rpida a tus sitios favoritos simplemente anclando el sitio a la barra de tareas de Windows, solo escoge el icono del sitio (pestaa) y arrstrala a la barra de tareas (solo W7). Pestaas debajo de la barra de direcciones: Si tienes varias pginas abiertas, tan solo da clic derecho sobre alguna pestaa y selecciona mostrar pestaas en una lnea separada, las pestaas se ubicaran debajo de la barra de direcciones. Integracin con W7: JumpList, thumbnails, sitios anclados y superposicin de iconos. Asesor de rendimiento: Analiza los complementos integrados con IE9 y muestra el tiempo de carga de cada uno, y podr realizar deshabilitar cada uno de ellos. Vista de compatibilidad: Cuando la vista de compatibilidad esta activa, usted visualiza el sitio como si navegara en IE8 Resaltado de dominios: Coloca en negrilla el dominio del sitio visitado, para poder identificar de una manera ms gil los sitios fraudulentos. Administrador de descargas: Acceso a los archivos descargados y visualizacin de estado de las descargas actuales Exploracin InPrivate: Navega sin dejar rastro alguno, el explorador no recuerda ningn dato como historial de exploracin, archivos temporales, datos de formularios, cookies, nombres de usuario y contraseas. Filtro SmartScreen: Proteccin contra la suplantacin de identidad (phishing), reputacin de la aplicacin, proteccin contra el hardware malicioso (malware). Cuando IE9 detecta un sitio peligroso lo bloquea en su totalidad.

Julio Cesar Avellaneda Sua| http://julitogtu.wordpress.com

2 Aislamiento y recuperacin de pestaas: si un sitio web falla, solo se bloquea la pestaa referente al sitio, no todo el explorador, si una pestaa se cierra de forma inusual IE9 la recuperara. Los mensajes mostrados en la barra de notificaciones exponen de manera clara el mensaje. 2. Aadir sitio a la barra de tareas. Verificar si el sitio ya est anclado: La funcin JavaScript window.external.msIsSiteMode() devuelve true si el sitio ya se encuentra anclado, de lo contrario false. Si al ejecutar la funcin se recibe algn error es porque el explorador no soporta dicha caracterstica. function CheckPinSite(){ try { if (window.external.msIsSiteMode()){ alert('La pagina ya esta anclada'); } else { alert('El sitio no ha sido anclado'); } } catch(ex){ alert('Su explorador no permite anclar el sitio. Por favor cambie a IE9 !'); } } Propiedades para los sitios anclados:
Descripcin Texto a mostrar en el men inicio o en el icono de la barra de tareas msapplication-tooltip Texto mostrado como tooltip de la entrada en el men inicio. msapplication-navbutton-color Color de los botones adelante y atrs del navegador. Ejemplo <meta name="application-name" content="Ejemplos Internet Explorer 9" /> <meta name="msapplication-tooltip" content="Abrir sitio en el explorador" /> <meta name="msapplication-navbutton-color" content="Green"/>

Propiedad application-name

msapplication-task

Permite agregar una tarea al jumplist del sitio.

<meta name="msapplication-task" content="name=Google;action-

Julio Cesar Avellaneda Sua| http://julitogtu.wordpress.com

3
uri=http://google.com.co;icon-uri=images/bomb.ico"/>

3. Aadir tareas al JumpList Solo es posible aadir un mximo de 5 tareas Existen tres propiedades para definir la tarea: a)name: texto a mostrar, b)action-uri: url relacionada a la tarea y c) icon-uri: icono que se muestra junto al nombre de la tarea. Para tener una tarea que lleve al usuario a una pgina del mismo sitio, solos es necesario colocar el nombre de la pgina y la extensin en el action-uri. Ejemplo: action-uri=login.html Para tener una tarea que lleve al usuario a una pgina externa a la estructura del sitio, se debe especificar la direccin completa del sitio, comenzando por http://... en el action-uri. Ejemplo: action-uri=http://microsoft.com <meta name="msapplication-task" content="name=Google;action-uri=http://google.com.co;iconuri=images/go.ico"/> <meta name="msapplication-task" content="name=Microsoft; actionuri=http://microsoft.com;icon-uri=images/go.ico"/>

4. Aadir categoras al JumpList Es posible agregar un tem a una categora desde cualquier pgina del mismo sitio. Los tems de una categora personalizada, pueden ser eliminados por el usuario. Solo es posible tener una categora. Solo es posible aadir un mximo de 20 tems a una lista.

Para crear una categora personalizada y aadir tems a ella se deben realizar los siguientes pasos: Crear la categora: El mtodo msSiteModeCreateJumpList(<nombrecategoria>); crea una categora con un texto, cuando la categora se crea no es visible hasta que se le agrega algn tem. window.external.msSiteModeCreateJumpList(Categoria 1);

Julio Cesar Avellaneda Sua| http://julitogtu.wordpress.com

4 Crear y agregar tems a una categora: Para aadir tems a una categora se dispone del mtodo msSiteModeAddJumpListItem(<nombreitem>,<url>,<iconoitem>); Luego de agregar los tems a la categora, est todava no es visible, as que el siguiente paso ser mostrarla. window.external.msSiteModeAddJumpListItem(Hotmail,http://Hotmail.com,images/mail.ico); window.external.msSiteModeAddJumpListItem(Blog,http://julitogtu.wordpress.com,images/bl og.ico); Mostrar la lista: Solo es necesario llamar el mtodo msSiteModeShowJumpList() y a continuacin ya se podr visualizar la categora. window.external.msSiteModeShowJumplist(); Limpiar la lista: Para limpiar/eliminar todos los tems de la lista basta con llamar el mtodo msSiteModeClearJumplist() window.external.msSiteModeClearJumplist(); Adicional, es posible ejecutar un evento cuando un evento de la lista es eliminado por el usuario, para poder ejecutar una determinada funcin cuando se elimina un tem, se deben realizar tres pasos: Adicionar un evento escucha: document.addEventListener(mssitemodejumplistitemremoved,removed,false); Atachar la funcin al evento: document.attachEvent(onmssitemodejumplistitemremoved,itemremoved); Crear la funcin que se ejecutara: function itemremoved(url){ //cdigo}

5. Iconos sobrepuestos Los iconos sobrepuestos permiten mostrar notificaciones y estados al usuario sin necesidad de tener como pantalla principal la aplicacin. Los iconos sobrepuestos son vistos exclusivamente cuando el sitio se encuentra anclado en la barra de tareas. El mtodo msSiteModeSetIconOverlay(icono,tooltip) adiciona un icono sobrepuesto al icono del sitio anclado en la barra de tareas. Julio Cesar Avellaneda Sua| http://julitogtu.wordpress.com

5 window.external.msSiteModeSetIcon(images/error.ico,Se ha producido un error); Para remover un icono se debe utilizar el mtodo msSiteModeClearIconOverlay. window.external.msSiteModeClearIconOverlay(); 6. Botones en Thumbnail Los botones en los thumbnail, ofrecen un la posibilidad al usuario de interactuar con la aplicacin sin necesidad de tener la misma como ventana activa. Un sitio anclado puede tener botones en los thumbnail para pginas individuales. Cada botn est asociado con un evento en la pgina, el cual es ejecutado con la ventana de la aplicacin minimizada. El nmero mximo de botones permitidos en el thumbnail es de siete. Para definir un botn se hace uso del mtodo msSiteModeAddThumbBarButton(icono,tooltip). El tooltip asociado es un parmetro opcional. La funcin retorna un ID el cual es usado por el sistema cuando el evento click es lanzado. btnSalir = window.external.msSiteModeAddThumbBarButton(images/salir.ico,Cerrar); Para capturar los eventos generados cuando se da click en el botn, se debe adicionar un escuchador de evento a la pgina (documento) y asociarle una funcin. document.addEventListener(msthumbnailclick,ThumbnailClick,false); function ThumbnailClick(btn) { //cdigo //para capturar el ID > btn.buttonID } Para mostrar los botones se debe llamar la funcin msSiteModeShowThumbBar() window.external.msSiteModeShowThumbBar(); Julio Cesar Avellaneda Sua| http://julitogtu.wordpress.com

6 Para establecer la visibilidad y el estado (activo o no) de un botn se dispone de la funcin msSiteModeUpdateThumbBarButton(botn,enable,visible); donde enable y visible pueden tener el valor true o false. window.external.msSiteModeUpdateThumbBarButton(bntSalir, true, true); 7. Indicando que se necesita la interaccin del usuario Cuando se necesita realizar alguna accin la cual requiere la interaccin del usuario para avanzar, iniciar o completar una tarea, es posible hacer titilar o brillar el icono de la aplicacin. El icono titila un mximo de 20 veces. Luego que el usuario interacta con el sitio, la titiles del icono desaparece. Para activar esta funcionalidad se dispone del mtodo msSiteModeActivate() window.external.msSiteModeActivate();

Julio Cesar Avellaneda Sua| http://julitogtu.wordpress.com