Hace 3 años que vimos las primeras noticias sobre el borraror de la W3C sobre los Widgets. Y ya entonces vimos que el tema prometía. QuirksBlog nos muestra una introducción sobre como usar estos Widgets.
¿Que es un widget?
Esencialmente un Widget es un conjunto de HTML/CSS/Javascript locales. Decimos locales, por que una vez que, por ejemplo, un movil descarga un widget debe ser capaz de usarlo localmente, al quedar instalado en él.
Aunque actualmente la utilización de widgets es muy límitada, lectores de RSS, relojes,… no hay razones teóricas de que no puedan ser capaces de crear aplicaciones basadas en Javascript realmente complejas, por ejemplo una Hoja de Cálculo.
La belleza de este modelo, es que aunque una aplicación requisiera 200kb de Javascript, más una serie de librerías, el usuario únicamente tendrá que descargarlo una sola vez. Después de la descarga, la aplicación se instala y las próximas veces se ejecutará en local sin necesidad de descargar nada.
En caso de requerir cualquier dato externo al widget, dispone de una interface que nos permite realizar peticiones Ajax y cargar el contenido en el momento que lo necesitamos.
Los W3C Widgets nacen como estandarización a los ya existentes creados para dispositivos como el iPhone, móviles Android, … que usan sistemas propietarios y únicamente adaptables a sus dispositivos. Con W3C Widgets se intenta crear un sistema que permita la interoperatividad de estos widgets en diferentes dispositivos sin necesidad de tener que modificar una sola línea de código del widget. Y todo ello aprovechando las técnicas HTML/CSS/Javascript que los desarrolladores conocemos.
En fin, los W3C Widgets apuntan como el futuro de la web movil. Son fáciles de crear, usan estándares abiertos y se ajustan al mínimo consumo de la red.
Información técnica
Los Widgets no son más que sitios web comprimidos. Creamos un fichero HTML, le añadimos los estilos necesarios en ficheros CSS y la funcionalidad viene dada en ficheros Javascript. Todo ello comprimir en un fichero zip, al que le cambiaremos la extensión a .wgt y listo. ¿Sencillo verdad?
Actualmente la especificación está continua como Working Draft (Borrador) modificado últimamente el día 5 de Febrero de 2009. Aunque el proceso está siendo tan lento como la W3C ya están las bases muy bien definidas.
Creando nuestro primer Widget
Para evitar problemas y facilitar la creación de Widgets (al parecer los ficheros ZIP en OSX no acaban de permitir que los widgets funcionen), Vodafone, junto con Opera, han creado una aplicación llamada Widgets SDK que nos permite trabajar con ellos de una forma rápida y cómoda, solventado estos problemas de compatibilidad.
En la aplicación encontraremos Vodafone Widget Manager que nos pemitirá depurar nuestros Widgets con una conexión bluetooth y Opera Dragonfly.
Fichero config.xml
Un widget necesita un fichero config.xml que indicará el tamaño en pixels, el icono que tendrá nuestro widget, el nombre y definiremos la seguridad de nuestras peticiones Ajax mediante el tag <host />.
<widget id="http://quirksmode.org/widget" dockable="true">
<widgetname>Test widget</widgetname>
<icon>pix/myIcon.gif</icon>
<width>200</width>
<height>200</height>
<security>
<access>
<host>quirksmode.org</host>
</access>
</security>
</widget>Con config.xml definimos las capacidades del widget HTML/CSS/Javascript que hemos creado.
Vayamos al lio
Bueno, yo he usado la versión para Mac de Widgets SDK, que podeis descargar directamente desde aqui (30mb), tambien está disponible la versión Windows aqui.
Una vez descargado y descomprimido, vemos 3 carpetas, Application, Documentation y Tutorial. Dentro de Application encontramos todo lo que necesitamos para crear nuestro primer Widget.
Tenemos Opera 9.64 que nos permitirá probarlo en nuestro ordenador mediante el motor gráfico de Opera. Tambien encontraremos VodafoneAppsManager que se trata de un fichero .sis para instalar en un dispotivo symbian que nos permitirá ejecutar estos Widgets en nuestros móviles symbian. Y por último, WidgetPacker, una aplicación que nos ayudará a crear nuestro Widget.
Una vez instalado Opera o VodafoneAppsManager (el que queramos para probar) instalamos WidgetPacker y comenzamos a desarrollar.
Podemos optar por usar un template sobre el que trabajar, recomendable para las primeras pruebas, o crear uno nuevo. Entre los templates disponibles, tenemos la posibilidad de crear un widget sobre Twitter o sobre Fortune. Nosotros vamos a crear uno desde cero.
Para ello primero definiremos los datos que nos va solicitando la aplicación y que se encargará de generar el fichero config.xml que hemos comentado previamente.
Este será el resultado del fichero XML de nuestro ejemplo:
<widget id="widget2k" dockable="yes">
<widgetname>Mi Primer Widget</widgetname>
<description>Widget de Prueba</description>
<width>320</width>
<height>240</height>
<author>
<name>Andrés Nieto</name>
<organization>aNieto2k</organization>
<link>https://www.anieto2k.com</link>
<email>XXXX@gmail.com</email>
</author>
<security>
<access>
<host>www.anieto2k.com</host>
</access>
</security>
</widget>Una vez generado, veremos una línea nueva en «Projects» en la que veremos nuestro nuevo Widget. Para acceder al código, bastará con hacer click sobre el botón derecho sobre él y seleccionar «Reveal in File Explorer…»:
Al hacer esto nos encontraremos nuestro nuevo Widget, osea el corazón de lo que será nuestro Widget. ¿Muy familiar verdad?
El código
Para editar el código de nuestro Widget usaremos el editor que más rabia nos dé, en mi caso usaré Textmate, ya que su visión de proyectos me encanta.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mi Primer Widget</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/wmpkit.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="https://www.anieto2k.com">aNieto2k</a></h1>
</div>
<div id="content"><!-- CONTENEDOR DE NOTICIAS --></div>
<div id="footer">
<p>
Desarrollado por <a href="https://www.anieto2k.com">aNieto2k</a>
</p>
</div>
</div>
</body>
</html>Definimos una estructura, que podría ser tranquilamente una página HTML normal. En ella nos encontramos la cabezara (#header), el contenido (#content) y el pie de la página (#footer).
CSS
El CSS nos dará un poco de color al widget, para el ejemplo he sido bastante escueto, así que con unas líneas estará listo.
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
background-color: #184574;
}
a {
color:#878826;
}
.post {
background-color: #fff;
margin: .5em;
padding: -5em;
}Javascript
Ahora vamos a rellenar el contenido con Javascript, lanzando una petición hacia aNieto2k para obtener los feeds en formato JSON. Para ello simplemente añadiremos este código en el lugar que el fichero script.js nos indica.
//
// insert init code here...
//
var blogURL = "https://www.anieto2k.com/feed/json/";
var contentContainer = document.getElementById("content");
// Lanzamos la petición
wmpkit.xhrGet(blogURL,handleResponse);
/*
Funcion que se encarga de crear un <div />
que contendrá la información del post.
*/
function createPost(post){
var container = document.createElement("div");
container.setAttribute("class", "post");
var title = document.createElement("a");
title.textContent = post.title;
title.setAttribute("class", "user");
title.setAttribute("href", post.link);
container.appendChild(title);
var content = document.createElement("div");
content.textContent = post.description;
container.appendChild(content);
contentContainer.appendChild(container);
}
/*
Callback que ejecutamos al recibir
la respuesta del servidor
*/
function handleResponse(xhr) {
if(xhr.responseText) {
try {
var posts = JSON.parse(xhr.responseText);
for (var c = 0;c < posts.items.length;c ++) {
createPost(posts.items[c]);
}
} catch (e) {}
}
};Compilación
Por llamarlo de alguna manera, por que realmente se trata de una simple compresión en ZIP y un renombrado de extensión.
Con nuestro proyecto seleccionado pulsaremos sobre el botón «Build» y este nos mostrará una ventana con la información sobre el proceso.
Ahora ya encontramos el fichero .wgt en la carpeta dist/ de la estructura de nuestro Widget. Este fichero será el encargado de instalarse en el dispositivo móvil o en el navegador Opera. Para ello podemos optar por 2 aciones:
- Ejecutarlo en el navegador (Opera 9.64) mediante un simple doble-click en el fichero .wgt.
- O mediante el botón «Deploy» de la aplicación que se encargará de enviarnoslo directamente a nuestro movil mediante Bluetooth (es necesario tenerlo).
Resultado
Como resultado obtenemos u
El resultado es una pequeña aplicación web ejecutada en nuestro movil o navegador (este ejemplo es de Opera 9.64). Podeis descargar el Widget si quereis modificarlo o usarlo. Vosotros mismos 😀
3 comentarios, 0 referencias
+
#