Manual Internet Explorer 9

2011

Características Internet Explorer 9 Desarrollando con IE9 Este documento contiene un breve resumen de las nuevas características de Internet Explorer 9 y de cómo es posible aprovechar las características de Windows 7.

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

1

MANUAL INTERNET EXPLORER 9 1. Nuevas características •

Página al abrir nueva pestaña: Muestra los sitios más visitados en orden descendiente para poder acceder a ellos de manera rápida, se visualiza el nombre e icono del sitio, así como una barra que indica que tanto visita dicho sitio.

•

Nueva barra de notificación: Para todos los cuadros de dialogo que aparecían antes impidiendo la navegación por el sitio, se dispone de una barra en la parte inferior que indica la información sobre el cuadro de diálogo así como las posibles respuestas.

•

Sitios anclados: Puedes acceder de manera rápida a tus sitios favoritos simplemente anclando el sitio a la barra de tareas de Windows, solo escoge el icono del sitio (pestaña) y arrástrala a la barra de tareas (solo W7).

•

Pestañas debajo de la barra de direcciones: Si tienes varias páginas abiertas, tan solo da clic derecho sobre alguna pestaña y selecciona mostrar pestañas en una línea separada, las pestañas se ubicaran debajo de la barra de direcciones.

•

Integración con W7: JumpList, thumbnails, sitios anclados y superposición 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 más ágil los sitios fraudulentos.

•

Administrador de descargas: Acceso a los archivos descargados y visualización de estado de las descargas actuales

•

Exploración InPrivate: Navega sin dejar rastro alguno, el explorador no recuerda ningún dato como historial de exploración, archivos temporales, datos de formularios, cookies, nombres de usuario y contraseñas.

•

Filtro SmartScreen: Protección contra la suplantación de identidad (phishing), reputación de la aplicación, protección 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 recuperación de pestañas: si un sitio web falla, solo se bloquea la pestaña referente al sitio, no todo el explorador, si una pestaña se cierra de forma inusual IE9 la recuperara. Los mensajes mostrados en la barra de notificaciones exponen de manera clara el mensaje.

2. Añadir sitio a la barra de tareas. •

Verificar si el sitio ya está anclado: La función JavaScript window.external.msIsSiteMode() devuelve true si el sitio ya se encuentra anclado, de lo contrario false. Si al ejecutar la función se recibe algún error es porque el explorador no soporta dicha característica. 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:

Propiedad application-name

msapplication-tooltip

msapplication-navbutton-color

Descripción

Ejemplo

Texto a mostrar en el menú inicio o en el icono de la



Texto mostrado como tooltip de la entrada en el



Color de los botones adelante y atrás del navegador.



msapplication-task

Permite agregar una tarea al jumplist del sitio.



3. Añadir tareas al JumpList •

Solo es posible añadir un máximo 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 página del mismo sitio, solos es necesario colocar el nombre de la página y la extensión en el action-uri. Ejemplo: action-uri=login.html

•

Para tener una tarea que lleve al usuario a una página externa a la estructura del sitio, se debe especificar la dirección completa del sitio, comenzando por http://... en el action-uri. Ejemplo: action-uri=http://microsoft.com

4. Añadir categorías al JumpList •

Es posible agregar un ítem a una categoría desde cualquier página del mismo sitio.

•

Los ítems de una categoría personalizada, pueden ser eliminados por el usuario.

•

Solo es posible tener una categoría.

•

Solo es posible añadir un máximo de 20 ítems a una lista.

Para crear una categoría personalizada y añadir ítems a ella se deben realizar los siguientes pasos: •

Crear la categoría: El método msSiteModeCreateJumpList(‘’); crea una categoría con un texto, cuando la categoría se crea no es visible hasta que se le agrega algún ítem. window.external.msSiteModeCreateJumpList(‘Categoria 1’);

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

4 •

Crear y agregar ítems a una categoría: Para añadir ítems a una categoría se dispone del método msSiteModeAddJumpListItem(‘’,’’,’’); Luego de agregar los ítems a la categoría, está todavía 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 método msSiteModeShowJumpList() y a continuación ya se podrá visualizar la categoría. window.external.msSiteModeShowJumplist();

•

Limpiar la lista: Para limpiar/eliminar todos los ítems de la lista basta con llamar el método 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 función cuando se elimina un ítem, se deben realizar tres pasos: •

Adicionar un evento escucha: document.addEventListener(‘mssitemodejumplistitemremoved’,removed,false);

•

Atachar la función al evento: document.attachEvent(‘onmssitemodejumplistitemremoved’,itemremoved);

•

Crear la función que se ejecutara: function itemremoved(url){ //código}

5. Iconos sobrepuestos Los iconos sobrepuestos permiten mostrar notificaciones y estados al usuario sin necesidad de tener como pantalla principal la aplicación. •

Los iconos sobrepuestos son vistos exclusivamente cuando el sitio se encuentra anclado en la barra de tareas.

•

El método 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 método msSiteModeClearIconOverlay. window.external.msSiteModeClearIconOverlay();

6. Botones en Thumbnail Los botones en los thumbnail, ofrecen un la posibilidad al usuario de interactuar con la aplicación sin necesidad de tener la misma como ventana activa. •

Un sitio anclado puede tener botones en los thumbnail para páginas individuales.

•

Cada botón está asociado con un evento en la página, el cual es ejecutado con la ventana de la aplicación minimizada.

•

El número máximo de botones permitidos en el thumbnail es de siete.

•

Para definir un botón se hace uso del método msSiteModeAddThumbBarButton(‘icono’,’tooltip’). El tooltip asociado es un parámetro opcional. La función 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 botón, se debe adicionar un escuchador de evento a la página (documento) y asociarle una función. document.addEventListener(‘msthumbnailclick’,ThumbnailClick,false); function ThumbnailClick(btn) { //código //para capturar el ID > btn.buttonID }

•

Para mostrar los botones se debe llamar la función 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 botón se dispone de la función msSiteModeUpdateThumbBarButton(botón,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 interacción del usuario Cuando se necesita realizar alguna acción la cual requiere la interacción del usuario para avanzar, iniciar o completar una tarea, es posible hacer titilar o brillar el icono de la aplicación. •

El icono titila un máximo de 20 veces.

•

Luego que el usuario interactúa con el sitio, la titiles del icono desaparece.

•

Para activar esta funcionalidad se dispone del método msSiteModeActivate() window.external.msSiteModeActivate();

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