Manual Internet Explorer 9

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.

2011

Julio Cesar Avellaneda Sua

http://julitogtu.wordpress.com

01/01/2011

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

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.


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 Descripción Ejemplo

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

barra de tareas

<meta name="application-name" content="Ejemplos

Internet Explorer 9" />

msapplication-tooltip Texto mostrado como tooltip de la entrada en el

menú inicio.

<meta name="msapplication-tooltip" content="Abrir sitio en

el explorador" />

msapplication-navbutton-color Color de los botones adelante y atrás del navegador. <meta name="msapplication-navbutton-color"

content="Green"/>

msapplication-task Permite agregar una tarea al jumplist del sitio. <meta name="msapplication-task"

content="name=Google;action-


3

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

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

<meta name="msapplication-task" content="name=Google;action-uri=http://google.com.co;icon-

uri=images/go.ico"/>

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

uri=http://microsoft.com;icon-uri=images/go.ico"/>

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(‘<nombrecategoria>’); 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’);


4

• Crear y agregar ítems a una categoría: Para añadir ítems a una categoría se dispone del método

msSiteModeAddJumpListItem(‘<nombreitem>’,’<url>’,’<iconoitem>’); 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.


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();


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();

Documents

Manual Internet Explorer 9