Azure y Windows Phone 7 en la Tenerife Lan Party - Innova 2k10

Alberto Diaz Martin — Thu, 08 Jul 2010 11:31:29 GMT

La semana del 20 al 25 de Julio se celebra en Tenerife la quinta versión de la Lan Party.

TLP+innova (TLP+i) representa el lado profesional de TenerifeLanParty surgiendo como una consecuencia natural del desarrollo del evento a través de sus cuatro anteriores ediciones.

TLP+i apuesta por un modelo de formación, comunicación e intercambio de información como objetivo. Con este fin, la organización elabora un catálogo de cursos, talleres, mesas redondas y conferencias que contribuyan a la formación tanto de cualquier profesional del sector tecnológico como de aquellos que deseen iniciarse en él, produciendo en ambos la sensación de haber obtenido un grato rendimiento de su visita a TLP.

Y allí estaremos, el amigo José Fortes y un servidor, hablando de Cloud Computing con Microsoft Windows Azure y de desarrollo con Windows Phone 7. Estamos preparando una charlas y hands-on lab para que los asistentes puedan probar y ver, in situ, estas nuevas tecnologías.

Esperamos verlos a todos por allí…

Widgets en Windows Mobile

Alberto Diaz Martin — Sun, 07 Mar 2010 14:19:00 GMT

En Windows Mobile 6.5 se pueden desarrollar aplicaciones basadas en el estándar W3C Widgets. Esto nos permite empaquetar aplicaciones HTML y JavaScript y que se ejecuten en nuestros dispositivos móviles.

Utilizando HTML y CSS proporcionamos la interfaz de usuario, y el código lo escribiremos en JavaScript. Los Widgets se instalan localmente en el dispositivo móvil y se ejecutan de forma local, pero pueden utilizar datos de la nube.

La pregunta es, ¿Por qué desarrollar un widget para un dispositivo móvil que obtiene datos de la nube, si sería los mismo, incluso más rápido, desarrollar una aplicación web a la que acceda el dispositivo cuando necesite estos datos?

Los widgets nos permiten ahorrar tráfico en el dispositivo. Cuando un dispositivo móvil accede a una aplicación web se tiene que descargar el html, las css, las imágenes, los archivos javascript, y, además de todo esto, obtener la información que le solicitamos. Si analizamos la arquitectura de un widget, este está pensado para que nuestro dispositivo se centre en obtener los datos y no en obtener la capa de presentación del mismo. Esto quiere decir, nuestros widgets consumen menos tráfico de red que las aplicaciones web, y esta es una característica de diseño clave para nuestros dispositivos móviles que están basado en las redes que nos cobran por la cantidad y la velocidad de descarga de paquetes. Si a todo esto le sumamos que existe un widget API que nos proporciona objetos JavaScript que nos permite integrar nuestras aplicaciones con el dispositivo (funciones de localización, estado del dispositivo, acceso a menús, etc.), encontramos dos grandes ventajas para desarrollar widgets y no aplicaciones web.

Contenido del Paquete

Un widget es un fichero Zip con el contenido de nuestra aplicación web. Páginas HTML, código JavaScript, hojas de estilos CSS, imágenes, etc.

Dentro de este zip, debemos de incluir un fichero config.xml, que es el Manifest del widget. Todos los elementos del config son opcionales, pero es recomendable incluirlos para conocer la información clave de nuestro widget.

<?xml version="1.0" encoding="utf-8" ?>

<widget xmlns="http://www.w3.org/ns/widgets"

        version="1.0"

        id="http://someSite.com/MyUniqueWidgetID">

  <name>My first widget</name>

  <content src="widget.htm" type="text/html" />

  <access network="true" />

  <icon src="icon.png"/>

  <icon src="icon.ico"/>

  <description>

    This is my first widget,

    it won't make a lot of money on the

    marketplace but at least is cute!

  </description>

  <author href="http://www.myweb.com"

          email="widget@myweb.com">Authos Name</author>

  <license>

    Example license

  </license>

</widget>

Los elemento del config son:

Version. Número de versión del widget, para poder realizar las actualizaciones utilizando el widget id.
Id. Este elemento es el que va a identificar a nuestro widget en el dispositivo. Tiene que ser una URI, pero no tiene que ser valida o accesible.
Name, Description, Author, License. Estos campos describen la información del widget basada en nombre, descripción de la funcionalidad, autor del mismo, licencia.
Content. Este elemento especifica que fichero se va a cargar cuando el widget se inicie.
Icon. Nos permite especificar el icono que va a mostrar nuesto widget en el menú de nuestro dispositivo móvil.
Access Network. Nos sirve para especificar si nuestro widget tendrá permisos para acceder a los recursos de la red.

Por su puesto, toda esta información es accesible para nuestra aplicación utilizando el widget API.

Programando el Paquete

Vamos a desarrollar un widget que, utilizando jQuery y el API de Twitter, nos muestre los mensajes de un usuario.

Esta es nuestra estructura, ahora explicaremos que es lo que tenemos en ella.

config.xml

Definimos nuestro fichero Manifest de la siguiente forma:

<?xml version="1.0" encoding="utf-8" ?> 

<widget version="1.0" 

        xmlns="http://www.w3.org/ns/widgets" 

        id="http://adiaz.ms/Twitter"> 

  <name>Twitter Search</name> 

  <content src="inicio.html" type="text/html" /> 

  <access network="true" /> 

  <icon src="img/icon.png"/> 

  <description>Este widget realiza consultas de las publicaciones de un usuario de Twitter.</description> 

</widget>

Incluimos los siguiente ficheros: jquery.min.js y jquery.twitter.js. Estos dos ficheros JavaScript nos permiten realizar consultas al API de Twitter y mostrar los mensajes de un usuario.

Una vez que tenemos todos estos, incluyendo hojas de estilos y alguna que otra imagen, escribimos la página html que va a contener la funcionalidad de obtener los mensajes de un usuario de Twitter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>Search on Twitter</title>

        <link rel="stylesheet" href="css/jquery.twitter.css" type="text/css" media="all" />

        <script type="text/javascript" src="js/widget.js"></script>   1:  

        <script type="text/javascript" src="js/jquery.min.js">

</script>

        <script type="text/javascript" src="js/jquery.twitter.js">

</script>

        <script type="text/javascript" src="js/twitter.js">

</script>

        <script type="text/javascript">applyCssByDPI();
</script>

    </head>

  

    <body onload="SetupPage()">

        <form id="search_form" action="BLOCKED SCRIPTSearchTwitter();" >

            <div id="content">

                <div class="sw_b1 sw_qbox" id="search_box">

                    <table width="100%"><tr>

                        <td id="search_box_cell">

                            <input class="sw_qbox" id="q" name="q" title="Search for..." type="text" value="" maxlength="48" />

                        </td>

                        <td align="right">

                            <input class="sw_qbtn" id="go" name="go" tabindex="0" title="Search" type="button" onclick="BLOCKED SCRIPTSearchTwitter();"/>

                        </td>

                    </tr></table>

                    <input name="a" id="a" type="hidden" value="results" />

                    <input name="mid" id="mid" type="hidden" value="1017" />

                </div>

                <div id="twitter"></div>

            </div>

        </form>

    </body>

</html>

En esta página se hace uso del API de widgets para dos funciones básicas, una para seleccionar el CSS en función del tamaño del dispositivo y otra para configurar el menú de nuestro widget para que nos salga el menú Buscar en las opciones del mismo.

Selección del CSS

function applyCssByDPI() {

    if (WidgetAPI.getDeviceDPI() == WidgetAPI.WIDGET_DEVICE_HIGH_DPI)

        document.write('<link rel="stylesheet" type="text/css" href="css/twitter192.css" />');

    else {

        document.write('<link rel="stylesheet" type="text/css" href="css/twitter.css" />')

    }

}

Creación del Menú

function SetupPage() {

    setLeftSoftKey(SEARCH_MENU_ITEM_ID);

}

  

var SEARCH_MENU_ITEM_ID = 1005;

    

function menuHandler(a) {

    switch (a) {

        case SEARCH_MENU_ITEM_ID:

            document.getElementById("search_form").submit()

    }

}

  

function setLeftSoftKey(d, c) {

    var a = null;

    if (c)

        a = c;

    else

        a = menuHandler;

    var b = null;

    switch (d) {

        case SEARCH_MENU_ITEM_ID:

            b = WidgetAPI.createMenuItem(SEARCH_MENU_ITEM_ID, "Buscar", a);

            break;

    }

    if (b)

        WidgetAPI.setLeftSoftKey(b)

}

Y con todo esto nos queda empaquetar en un Zip nuestros ficheros, cambiarle la extensión por .widget, copiarlo a nuestro dispositivo móvil, instalarlo y ejecutarlo para ver que es capaz de obtener los mensajes de un usuario de Twitter, utilizando Ajax.

Podemos ver los widgets instalados en la carpeta Dispositivo Móvil/Archivos de Programa/Widgets/User/ID (este Id es el que el dispositivo móvil le pone cuando se instala).

En la MSDN hay un muy buen artículo explicando en detalle como Desarrollar Widgets para Windows Mobile 6.5.

A ver si consigo otros móviles (Android, BlackBerry, etc) y escribo un artículo con los cambios que tendríamos que realizar para conseguir la multiplataforma de nuestro widgets.

Os dejo en enlace al widget de ejemplo que he utilizado en el artículo.

Saludos a todos…

Alberto Diaz : Windows Mobile

Azure y Windows Phone 7 en la Tenerife Lan Party - Innova 2k10

Widgets en Windows Mobile

Contenido del Paquete

Programando el Paquete