Darle protagonismo a nuestras páginas con IE9 y Windows 7

imageimage

Hoy voy a destacar una funcionalidad para los Desarrolladores que trae Internet Explorer 9 que me parece que le da muy buena integración con nuestras WEB, se trata de la posibilidad de anclar cualquier URL a la superbarra de Windows 7. De esta forma, accedemos a nuestro correo electrónico, red social favorita u otras WEBs, con gran rapidez.
Bueno pero vamos a un ejemplo para empezar a darle onda a nuestra WEB.

1. Vamos a crear una WEB o agarremos una que ya tengan creada, mi ejemplo es con una aplicación MVC.

image

2. Traemos un archivo extensión “.ico”, yo he creado un icono y lo he puesto en una carpeta iconos.

image

3. Después abrimos la Page Master y entre el Head agregamos estas líneas que explico a continuación.

<meta name=”msapplication-task” content=”
name=nombre-de-la-tarea;
action-uri=dirección-de-la-página;
icon-uri=dirección-del-ícono”/ >

Tendrás que reemplazar:
Nombre-de-la-tarea: establece la denominación del ítem.
Dirección-de-la-página: indica qué página se abrirá al pulsar sobre el ítem.
Dirección-del-ícono: asigna una imagen al vínculo.

Yo he puesto lo siguiente.

<link rel=”Shortcut Icon” href=”/JumpsList-Mvc/iconos/Icono.ico” />
<meta name=”msapplication-task” content=”name=Principal;action-uri=/JumpsList-Mvc/;icon-uri=/JumpsList-Mvc/iconos/Icono.ico”/>
<meta name=”msapplication-task” content=”name=Iniciar Sesión;action-uri=/JumpsList-Mvc/Account/LogOn;icon-uri=/JumpsList-Mvc/iconos/Icono.ico”/>
<meta name=”msapplication-task” content=”name=Registrarse;action-uri=/JumpsList-Mvc/Account/Register;icon-uri=/JumpsList-Mvc/iconos/Icono.ico”/>
<meta name=”msapplication-task” content=”name=Acerca de..;action-uri=/JumpsList-Mvc/Home/About;icon-uri=/JumpsList-Mvc/iconos/Icono.ico”/>

3. Para ver el ejemplo ejecutamos y agarramos el icono de la barra y lo arrastramos hasta la barra de Windows 7, ahí se posicionara el icono de nuestra WEB y si hacen botón derecho podrán ver que tiene accesos directos a partes de nuestra página de donde hemos definido.

image


image


image

image

Clic aquí para descargar el ejemplo

Es posible personalizar una serie de aspectos globales, que van desde ciertos colores de la interfaz hasta el tamaño de la ventana.
Esto se logra agregando líneas con la siguiente convención:

<meta name="nombre-del-parámetro" content="contenido"/>

application-name

:

 

el nombre del acceso directo. Si lo omites, se mostrará el título del documento que dio origen al atajo.

msapplication-tooltip: el texto que saldrá al pasar el ratón sobre el ícono.

msapplication-starturl: la dirección de la página de inicio. Si no la completas, se abrirá la que usó el usuario para crear el vínculo.

msapplication-navbutton-color: el color de los botones Adelante y Atrás, en formato hexadecimal.

msapplication-window: define el ancho y alto inicial del navegador.

Por ejemplo, esto quedaría así:

<meta name="application-name" content="WEB Personalizada"/>
<meta name="msapplication-tooltip" content="Acceder a webmia.com"/>
<meta name="msapplication-starturl" content="http://www.webmia.com"/>
<meta name="msapplication-navbutton-color" content="#FFC342"/>
<meta name="msapplication-window" content="width=1024;height=768"/>

Y después para que vean un poco más, si tuviéramos videos en nuestra WEB podríamos hasta configurar que se pareciera al reproductor de Windows 7, en Channel 9 se muestra un ejemplo muy practico.

image

También ya existe una extensión para WordPress y los usuarios de WordPress.com cuentan con la nueva funcionalidad habilitada por defecto, que ya he estado probando en mi Blog y que me parece que esta buenísima para muchas más implementaciones más, de seguro como es una beta de IE9 más adelante veremos mas cositas que desarrollaran.

image

Bueno en resumen hay bastantes cosas para hacer, me parece que le dan un toque a nuestras páginas a la hora de resaltarla o de llevarla a un nivel de las demás (Facebook, Twitter, Bing etc.), espero que les guste mi aporte y pido disculpas si hay algo que me olvide o algo así. Un saludo a todos los que lean este POST.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s