[ASP.NET] IE9 + W7: Manual de resumen

Hola, casi que para finalizar el ciclo de post sobre Internet Explorer 9 y su integración con Windows 7, les quiero compartir un pequeño manual de resumen en pdf de aproximadamente 8 páginas donde se listan las características que hemos visto en los post anteriores y se explica como utilizarlas. Si desean recordar lo que hemos visto les dejo el listado:

• Anclando el sitio
• Añadir tareas al JumpList
• Categorías personalizadas
• Iconos de notificación
• Solicitando al usuario
• Botones en Thumbnail

Espero les sea de gran utilidad!

Descarga del manual!

[ASP.NET] IE9 + W7: Botones en Thumbnail

Hola, bueno ya acercándonos al final de la serie de entradas sobre Internet Explorer 9 y Windows 7, en esta ocasión vamos a revisar como podemos agregar botones al thumbnail los cuales le permitirán al usuario interactuar con la aplicación son necesidad de tenerla como ventana activa.

Primero algunos puntos importantes:

• Es posible tener botones diferentes para cada página de nuestro sitio.
• Cada botón está asociado con un evento en la página.
• El número máximo de botones permitidos es de siete (7).

Ahora para definir un botón hacemos uso de la siguiente función JavaScript, se lo debemos asignar a un objeto:

   1:  objeto = msSiteModeAddThumbBarButton(‘icono’,’tooltip’)

Como se observa para cada botón le especificamos el icono y el texto que se verá cuando el mouse este sobre el botón.

Y para mostrar los botones llamamos la siguiente función:

   1:  msSiteModeShowThumbBar();

Para capturar los eventos generados cuando se da click en alguno de  los botones, adicionamos un escuchador de evento a la página y le asociamos una función:

   1:  document.addEventListener('msthumbnailclick',<Nombre_Función>,false);

Después de conocer las funciones correspondientes para añadir y trabajar con los botones en el thumbnail, vamos a pasar a desarrollar un ejemplo:

1. Creamos una función que nos añada tres botones:

   1:  function AñadirBotones() {

   2:      try {

   3:          btnEnviar = window.external.msSiteModeAddThumbBarButton('images/enviar.ico', 'Enviar');

   4:          btnPausar = window.external.msSiteModeAddThumbBarButton('images/pausa.ico', 'Pausar');

   5:          btnIniciar = window.external.msSiteModeAddThumbBarButton('images/play.ico', 'Iniciar');

   6:          window.external.msSiteModeShowThumbBar();

   7:      }

   8:      catch (ex) {

   9:          alert('No es posible añadir los botones.');

  10:      }

  11:  }

2. Creamos el escuchador en la página:

   1:  document.addEventListener('msthumbnailclick',ThumbnailClick,false);

3. Definimos la función ThumbnailClick:

   1:  function ThumbnailClick(btn) {

   2:      if (btn.buttonID == '1')

   3:          alert('Ha dado click en enviar');

   4:      else if (btn.buttonID == '2')

   5:          alert('Ha dado click en pausar');

   6:      else if (btn.buttonID == '3')

   7:          alert('Ha dado click en iniciar');

   8:  }

La función anterior recibe como parámetro el botón al cual se le dio click, y para verificar cual ha sido usamos la propiedad butttonID, por el momento solo vamos a mostrar un alert indicando el botón al cual se le dio click, y ya dependerá de las necesidades específicas la implementación de algo más complejo.

Así que nuestra aplicación se verá así:

Descarga el ejemplo! (el archivo se llama Botones_Thumbnail)

PD: Use la palabra escuchador porque no s eme ocurrió alguna otra (jajaja).

[ASP.NET] IE9 + W7: Solicitando al usuario

Hola, siguiendo con los post sobre como aprovechar las características de Windows 7 en una aplicación web si tenemos Internet Explorer 9, hoy vamos a ver como podemos solicitar la interacción del usuario, es algo bastante simple así que esta entrada será bien corta.

Ahora bien, la funcionalidad de solicitar al usuario no es más que hacer que el icono de nuestra aplicación parpadee de forma intermitente.

Existen tres características a tener en cuenta:

• El icono titila solo si la aplicación no tiene la ventana activa.
• Luego que el usuario interactúa con el sitio el icono deja de titilar.
• El icono titila un máximo de 20 veces.

Pero como hacemos para que esto nos funcione?.. simple, solo necesitamos usar la siguiente función JavaScript:

   1:  msSiteModeActivate();

Ahora a implementar esta función:

1. Creamos un botón para hacer el llamado de la función:

   1:  <button id="btnLlamar">Llamar al usuario</button>

2. Creamos la función que solicita al usuario:

   1:  function LLamarUsuario() {

   2:      try {

   3:          window.external.msSiteModeActivate();

   4:      }

   5:      catch (ex) {

   6:          alert('No es posible llamar al usuario.');

   7:      }

   8:  }

3. Por último utilizando jQuery vamos a capturar el evento click del botón y hacemos el llamado a la función anterior:

   1:  $("#btnLlamar").click(function () {

   2:     setTimeout(LLamarUsuario, 200);

   3:     return false;

   4:  });

Lo único raro de la función anterior es el uso de la función de JavaScript setTimeout, dicha función lo que permite es llamar la función que se le especifique después de un tiempo determinado, ese tiempo esta en milisegundos, por lo cual la función LlamarUsuario no se ejecutará inmediatamente; esto para que cuando se de click en el botón nos de el tiempo para cambiar de ventana y poder visualizar el efecto.

Les dejo el código del ejemplo: Descarga del ejemplo ! (El archivo se llama Llamar_Usuario)

[ASP.NET] IE9 + W7: Iconos de notificación

Hola, siguiendo con este ciclos de post sobre Internet Explorer 9 + Windows 7, vamos a revisar como añadir iconos de notificación en el icono de nuestro sitio en la barra de tareas.

Anteriormente vimos:

• Anclar el sitio
• Añadir tareas al JumpList
• Categorías personalizadas

Los iconos de notificación son una excelente manera de informarle al usuario el resultado o el estado de la aplicación sin necesidad de tener activa la ventana de nuestra aplicación.

Para añadir un icono solo se debe utilizar la función msSiteModeSetIconOverlay(‘url_icono’,’tooltip’) y para remover los iconos solo es necesario llamar la función msSiteModeClearIconOverlay().

Ahora para nuestro ejemplo vamos a tener tres botones, los dos primeros establecerán como icono una carita feliz y una triste, y el tercer botón los eliminara:

   1:  <button id="btnIconoFeliz" value="feliz.icon" style="margin-right:20px;">Icono feliz</button>

   2:  <button id="btnIconoTriste" value="triste.ico" style="margin-right:20px;">Icono triste</button>

   3:  <button id="btnRemoverIconos" style="margin-right:20px;">Remover iconos</button>

Una vez que tenemos los botones definidos, vamos a crear dos funciones, la primera va a recibir el icono a utilizar y el texto del tooltip y lo establecerá y la segunda limpiara todos los iconos sobrepuestos:

   1:  function SetIcono(icono, texto) {

   2:      try {

   3:          window.external.msSiteModeSetIconOverlay('images/' + icono, texto);

   4:      } 

   5:      catch (ex) {

   6:          alert('No es posible establecer el icono.');

   7:      }

   8:  }

   1:  function LimpiarIconos() {

   2:      try {

   3:          window.external.msSiteModeClearIconOverlay();

   4:      }

   5:      catch (ex) {

   6:          alert('No es posible limpiar los iconos.');

   7:      }

   8:  }

y finalmente utilizando jQuery capturamos los eventos click de los botones y llamamos la función correspondiente:

   1:  $("#btnIconoFeliz, #btnIconoTriste").click(function () {

   2:      var icono = $(this).val();

   3:      var texto = $(this).text();

   4:      SetIcono(icono, texto);

   5:  });

   6:   

   7:  $("#btnRemoverIconos").click(function () {

   8:      LimpiarIconos();

   9:  })

Y finalmente una vez nuestra app este en la barra de tareas y establezcamos un determinado icono veremos algo como:

Como siempre les dejo el código con el ejemplo: Descarga el ejemplo !

[ASP.NET] IE9 + W7: Categorías Personalizadas

Hola a todos, en post anteriores vimos como podemos añadir el sitio al menú inicio y como añadir tareas al JumpList, hoy revisaremos como crear una categoría en el JumpList y como podemos añadirle ítems a dicha categoría.

Pero antes de iniciar a crear la categoría y añadir ítems algunas cosillas importantes:

• Se puede añadir una categoría desde cualquier página del mismo sitio.
• Solo es posible añadir una categoría al sitio
• El límite de ítems que se pueden añadir a una categoría es de 20.
• Los ítems de la categoría pueden ser eliminados por el usuario.

Ahora si manos a la obra:

1. Crear la categoría: Para crear la categoría hacemos uso del método msSiteModeCreateJumpList(‘nombre_categoría’), este método como se puede observar recibe como parámetro un string, el cual será el nombre que se va a mostrar en el JumpList; sin embargo la categoría no será visible hasta que tenga al menos 1 ítem añadido. Para limpiar los datos de la categoría utilizamos el método window.external.msSiteModeClearJumplist();. Entonces para nuestro ejemplo definimos la siguiente función que recibe como parámetro el nombre que le queremos asignar a la categoría y finalmente esta es creada:

   1:  function CrearCategoria(nombre) {

   2:      try {

   3:         window.external.msSiteModeClearJumplist();

   4:         window.external.msSiteModeCreateJumpList(nombre);

   5:         alert('Categoría creada, ahora eliga los items que desea tener en la categoria.');

   6:      }

   7:      catch (ex) {

   8:         alert('No es posible crear la categoría.');

   9:      }

  10:   }

Ahora vamos a tener una caja de texto y un botón que se encargará de llamar al función anterior, utilizando jQuery añadimos un manejador al evento click del botón, así que vamos a tener algo como:

   1:   $("#btnCrearCategoria").click(function () {

   2:      var nombre = $("#txtCategoria").val();

   3:      CrearCategoria(nombre);

   4:   });

2. Crear y mostrar ítems a una categoría: Para añadir algún ítem a una categoría personalizada se deben realizar dos pasos, el primero que es añadir el ítem y segundo que muestre los ítems. Entonces para crear un ítem disponemos del método msSiteModeAddJumpListItem(‘<nombreitem>’,’<url>’,’<iconoitem>’); el cuál recibe tres parámetros que son el nombre del ítem, la url a la cuál será redirigido el usuario una vez seleccione un ítem y el tercer ítem la url del icono asociada al ítem. Entonces creamos tres botones para ir añadiendo ítems a la categoría creada:

   1:  <button id="btnBlog" value="http://julitogtu.wordpress.com">Blog</button>

   2:  <button id="btnFacebook" value="http://www.facebook.com/julitogtu">Facebook</button>

   3:  <button id="btnTwitter" value="http://twitter.com/julitogtu">Twitter</button>

La idea es que al dar click en cada botón nos añada un ítem que tengan links a la dirección de mi blog, mi Facebook y mi Twitter

Ahora creamos una función que será la encargada de agregar los ítems, dicha función va a recibir el nombre del link y la url:

   1:  function CrearItem(nombre, url) {

   2:      try {

   3:          window.external.msSiteModeAddJumpListItem(nombre, url, 'images/TaskRed.ico');

   4:      } 

   5:      catch (ex) {

   6:          alert('No es posible agregar el item ala categoria.');

   7:      }

   8:  }

Y finalmente mediante jQuery capturamos el click de cada botón y hacemos el llamado de la función:

   1:  $("#btnBlog, #btnFacebook, #btnTwitter").click(function () {

   2:      var nombre = $(this).text();

   3:      var url = $(this).val();

   4:      CrearItem(nombre, url);

   5:      return false;

   6:  })

Entonces una vez anclemos el sitio, creemos una categoría y añadamos los ítems se verá algo como:

Les dejo el código del ejemplo: Descarga del ejemplo !

[ASP.NET] IE 9 + W7: Añadiendo tareas al JumpList

En el post pasado (míralo acá) se hizo una introducción a las características que podemos aprovechar al tener Internet Explorer 9 y Windows 7, y se reviso como añadir el sitio al menú inicio y anclar el sitio a la barra de tareas.

En este post, vamos a ver como podemos añadir tareas al JumpList, pero primero algunas cosillas para tener en cuenta:

• Se pueden añadir máximo 5 tareas en el JumpList
• Cuando se define una tarea se deben configurar tres propiedades:
  • name: Texto de la tarea
  • action-uri: Url relacionada a la tarea
  • icon-uri: icono que se mostrará al lado del nombre de la tarea
• Si desea tener una tarea que lleve al usuario a una página del mismo dominio se debe colocar el nombre de la página más su extensión. (ej: acercade.html)
• Para tener una tarea que lleve al usuario a una página por fuera del dominio se debe escribir la url completa (ej: http://microsoft.com)

Así que finalmente para añadir unas tarea al JumpList en el head debemos colocar:

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

Bueno, ahora lo vamos implementar en un ejemplo, la idea es tener tres tareas las cuales llevarán al usuario a mi blog, mi Facebook y mi Twitter

   1:  <meta name="msapplication-task" content="name=Blog;action-uri=http://julitogtu.wordpress.com; icon-uri=images/TaskRed.ico"/> 

   2:  <meta name="msapplication-task" content="name=Facebook;action-uri=http://www.facebook.com/home.php#!/julitogtu; icon-uri=images/TaskRed.ico"/> 

   3:  <meta name="msapplication-task" content="name=Twitter;action-uri=http://twitter.com/#!/julitogtu; icon-uri=images/TaskRed.ico"/> 

Y entonces una vez anclemos el sitio lo que vamos a tener a dar click derecho sobre el icono de nuestro sitio es:

Como se puede ver en la imagen, en la sección de tareas se visualizan las tres opciones que hemos añadido.

En el próximo post vamos a revisar otra característica sobre Internet Explorer 9 !

Descarga de ejemplo !

[ASP.NET] IE 9 + W7: Anclando el sitio

Hola a todos, desde hace tiempo he querido hacer algunos post sobre las nuevas características de Internet Explorer 9 y su forma de integración con Windows 7, así que este será el primer post que estaré haciendo, de al menos un grupo de 4 que estaré publicando.

Y las características que tenemos disponibles son:

• Añadir sitio al menú inicio
• Añadir sitio a la barra de tareas
• Añadir tareas al JumpList
• Añadir categorías al JumpList
• Añadir ítems a una categoría del JumpList
• Iconos de notificación
• Botones en Thumbnail
• Solicitar interacción del usuario

La integración de Internet Explorer 9 con Windows 7 no es exclusiva de aplicaciones realizadas con ASP.NET, podemos aprovechar todo este set de funcionalidades con aplicaciones realizadas en PHP o solo HTML.

En esta primera entrega vamos a revisar como podemos acondicionar nuestro sitio para poder ser añadido a menú inicio y posteriormente anclarlo en la barra de tareas.

Antes de comenzar a echar código, debemos conocer la información meta que debe tener nuestro sitio:

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-uri=http://google.com.co;icon-uri=images/bomb.ico”/>

Entonces el head de nuestro sitio se verá algo así:

   1:  <meta name="application-name" content="Ejemplos Internet Explorer 9" />

   2:  <meta name="msapplication-tooltip" content="Abrir sitio en el explorador" />

   3:  <meta name="msapplication-navbutton-color" content="Green" />

   4:  <meta name="msapplication-window" content="width=800; height=600" />

   5:  <link rel="icon" type="image/ico" href="images/Bomb.ico"/>

   6:  <link rel="shortcut icon" type="image/x-icon" href="images/Bomb.ico"/>

Luego lo que debemos hacer es verificar si el sitio ya se encuentra anclado y si el browser que usamos es compatible o no, esto lo logramos mediante JavaScript utilizando window.external.mslsSiteMode(), así que vamos a crear una función para realizar esta tarea:

   1:  function CheckFeatures(){

   2:      try {

   3:          if (window.external.msIsSiteMode()){

   4:              return false;

   5:          }

   6:          else {

   7:              return true;

   8:          }

   9:      }

  10:      catch(ex){

  11:          return false;

  12:      }

  13:  }

Ahora vamos a crear una función que nos añada el sitio al menú inicio:

   1:  function AddMenuInicio() {

   2:      try {

   3:          window.external.msAddSiteMode();

   4:      }

   5:      catch(ex) {

   6:          alert('No es posible añadir el sitio al menú inicio.');

   7:      } 

   8:  }

Listo ya tenemos las dos funciones definidas, ahora vamos a crear un botón que tendrá dos funciones, 1 verificar si es posible añadir el sitio y 2 anclar el sitio, para manejar el evento click vamos a hacer uso de jQuery para no tener que hacer uso de JavaScript inline, entonces tendríamos:

   1:  $(function() {

   2:     $("#btnAnclar").click(function() {

   3:          if (!CheckFeatures())

   4:              alert('El sitio no puede ser anclado.');}    

   5:          else

   6:              AddMenuInicio();

   7:      });

   8:  });

 

Entonces una vez demos click en Anclar sitio vamos una ventana como esta:

Dicha ventana nos esta informando el nombre del sitio, de donde proviene y finalmente que se añadirá en el menú inicio, una vez aceptemos inmediatamente se abrirá el sitio ya anclado y lucirá algo así:

Y en el menú inicio:

Listo y finalmente para anclar el sitio a la barra de tareas lo que debemos hacer es sobre la entrada den el menú inicio darle click derecho y decirle anclar a la barra de tareas.

Ha sido un poco largo el post, pero como ven es bastante sencillo, en el próximo post vamos a ver como podemos añadir tareas al JumpList.

Como siempre les dejo el código con el ejemplo:

Descarga del ejemplo !