Chalalo Land

Creando un Accelerators para IE8 Paso a Paso

Hola que tal?, por acá de nuevo, esta vez para echar un vistazo sobre los Accelerators para IE8, por mi parte, cuando vi el Vídeo en la blog de Miguel Saez, se me ocurrió que a varios websites que he hecho los puedo potenciar con esta herramienta (soy desarrollador independiente, así que cada plus que pueda dar a las páginas, bienvenido sea, tengo más clientes!!)

Primero por si no te has enterado aún:

Que son los Accelerators

Son las opciones de menú contextual que puede acceder rápidamente a un servicio web desde cualquier página Web. Los usuarios pueden instalar los Accelerators en la Galería de Actividades galería o a través de cualquier sitio Web que las anuncia. Estas actividades hacen que  sea más fácil copiar la información de una página web a otra y, por ejemplo, generar búsquedas específicas.

Las Activities generalmente se abarcan dos posibles escenarios, una vista tipo "preview" al website del Accelerator, y por otro parte, el envío de información (concepto de Accelerator) a una página de, por ejemplo consulta.

Ejemplo de una Activity Relacionada con Microsoft Live Maps (1)

Como funcionan estos Accelerators

Básicamente consisten de un archivo XML el cual describe el comportamiento en términos de homepageUrl, display y la  activity propiamente tal. Si deseas ver una vista detallada de los tag a definir te recomiendo que veas el white paper de Activities en:

http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=566

Ahora bien, menos Copy-Paste y manos la obra.

Vamos a crear un nuevo proyecto web, en el que tendremos la página que tiene el link que carga el XML para instalar la activity en nuestro Browser, también contendrá el XML, la página de Preview y una posible página de consulta.

Te advierto que no soy bueno para el diseño, por lo que si las páginas de preview y data quedan mega ultra hiper fea, me disculpes.

Vista del SE del Ejemplo, pero OJO, NO ES REQUESITO QUE LOS ACCELERATORS ESTEN CONSTRUIDAS CON ASP.NET, DE HECHO EL XML SOLO LLAMA A URLS, POR LO QUE PUEDEN CONSTRUIRSE CON PHP, JSP, ETC.

OpenService Activity Format

En el White Paper verás con detalle como esta conformado este archivo XML, para mi ejemplo utilizaré el archivo Activity.XML (puede llamarse de cualquier forma):

Ahora, a explicar un poco, en el tag homepageURL, tengo la dirección website en el servidor de prueba(por eso el número de puerto) el Tag display, declaro en nombre de mi Accelerator, también definí el icono (más que nada lo tomé "prestado").

Si bien hay Accelerators predeterminadas , puedes utilizar las propias (recuerda ver siempre si tu Accelerator encaja con alguna categoría existente, ya que se pueden organizar de mejor manera si sigues las instrucciones). Definimos el contexto de la Accelerator, para nuestro caso es "selection", que representa el tipo de datos, de donde se capturará el dato, por decirlo de otra forma, las  opciones disponibles son ("selection", "document" y"link") siendo selection el default.

En el tag preview colocamos la dirección de nuestra página de preview (ver foto 1) y en execute, la página de consulta (ac.aspx), fíjate que estoy pasando un parámetro que se llama param y el valor de tipo text proviene de una selección del usuario (por ejemplo, sobre un texto con el mouse).

Página de Preview

Esta página tiene solo diseño, puede ser html si necesidad de programación del lado del servidor, en mi caso e super simple:

Recuerda que las dimensiones son 320px x 240px y setear por CSS los bordes izquierdo y superior a 0px, para que quede bien ajustado.

Página de Consulta

El parámetro a enviar se define en el archivo Activity.XML :

<parameter name="param" value="{selection}" type="text" />

Siempre tendremos  la posibilidad de enviar más parámetros (recuerda definirlos en archivo), también tener el cuidado de que vamos a pasar por URL una variable, con todos los problemas de seguridad que esto conlleva, así que como siempre, validar, limpiar, verificar.

En el evento Page_Load tendremos:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Por favor, recuerda sanitizar las entradas!!           Label1.Text = Request.QueryString("param")
    End Sub

Ya que si vemos la URL al llamar a la búsqueda, nos damos cuenta que se envia por GET. Bueno, si estas con PHP será:

$variable = $_GET["param"];

Con la correspondiente validación de entrada y limpieza de parámetros para evitar el XSS y el SQL Inyection.

La finalidad de esta página es simular una búsqueda, tu sabrás que hacer con tus parámetros de entrada, para este ejemplo, solo se imprime :).

Pagina de Instalación del Accelerator

Esta si que no le puse diseño, de hecho, es tan simple como esto:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <button 
    onclick="window.external.AddService('Activity.xml')">
        Instalar la Actividad</button> 
    </div>
    </form>
</body>
</html>

Lo que genera la espectacular vista de diseño de:

Lo interesante acá es la llamada mediante BLOCKED SCRIPT

onclick="window.external.AddService('Activity.xml')"

Que realiza la invocación para el browser de el manifiesto XML que define a la actividad.Si lo presionamos veremos lo siguiente:

Presionamos Add Provider y elegimos "Make this my Default  provider fos this type of activity" , para este ejemplo, de esta manera tenemos más a "mano" nuestra Accelerator de prueba, y si al menos el XML esta correcto tendremos:

A nuestra página de instalación (Default.aspx) le agregué un texto para poder seleccionar y así utilizar la activity. La siguiente imagen se muestra cuando apretamos boton derecho del mouse  y seleccionamos (sin apretar Click) el ítem del menú contextual Prueba de Activities

 
Aunque no se nota mucho, seleccioné la palabra texto, ahora bien, si pincho sobre el ítem de menú veremos que se abre la ventana de búsqueda con el Label1 seteado  con la selección del usuario, luego, puedes utilizar este parámetro para búsquedas, selecciones, etc.

Desintalar Accelerators.

Para desinstalar las Activities solo debes seleccionar la opción de "Manage
Add-ons" y pinchas en la opción Accelerators y tienes la opción de  removerlos como predeterminados, desactivarlos o finalmente eliminarlos.

Descarga

Descarga aquí los archivos de esta Accelerator de Prueba

Conclusión. 

Esta es una excelente herramienta que podemos utilizar para dar nuevos servicios a nuestros clientes, muy fácil de usar y para no dejar a nadie triste, no depende del lenguaje de programación del servidor, de hecho, ahora estoy haciendo esto para un sitio en php!.

Y por que no mezclar tecnologías, el preview podría estar construido con Silverlight, quedaría espectacular verdad?

Espero que te haya sido de utilidad este post, si es así, escribe un comentario, gracias!.

Saludos,
Gonzalo