miércoles, 24 de junio de 2009

Creación e instalación de un gadget para Sidebar

 

En la pasada entrada sobre la tecnología SideShow de Microsoft os comentaba el poder que tenían los gadget como elemento de comunicación con el PC, pero lo que no os comenté es que estos gadget además de ser descargables gratuitamente desde la página de Microsoft habilitada al uso, también pueden ser creados por cualquier usuario con unos conocimientos mínimos de programación web, consiguiendo de esta manera romper los límites que pudiese tener esta tecnología.

Cómo podéis imaginar, los gadget de SideShow y de la SideBar, la barra lateral del escritorio de Windows Vista, son muy semejantes, de hecho, hoy vamos a hacer una demo de cómo programar nuestro primer gadget para la SideBar.

Para poder programar un gadget no necesitaremos ser verdaderos expertos en programación web, simplemente nos bastará con saber un poco sobre los siguientes lenguajes y tecnologías:

· HTML

· JavaScript ó VBScript

· CSS

· XML

Por si no os ha quedado claro aún que son los gadget, son una serie de miniaplicaciones que se pueden instalar en la barra lateral del Windows Vista, en el nuevo Windows 7 y en los hardware que soporten la tecnología SideShow, que nos permiten explotar al máximo todas las posibilidades de nuestro Windows y la conectividad a diferentes recursos de internet como por ejemplo uno de los más conocidos, el RSS.

Para mostrar la SideBar, deberéis ir al Menú de inicio > Programas > Accesorios > Windows Sidebar.

image

Demo: creción de gadget para la Sidebar

Lo primero que deberemos hacer para crearnos nuestro propio gadget es ir a la ruta donde están instalados los gadget de la Sidebar, tanto los que vienen instalados por defecto en Windows, como los que hemos ido instalando posteriormente. Por defecto los gadget se encuentran en la ruta: C:\Program Files\Windows Sidebar\Gadgets.

Una vez hayamos ido a la ruta anterior, visualizaremos todos nuestros gadget:

image

Si sois un poco curiosos y miráis el contenido de cada gadget os daréis cuenta de que todos se basan en una estructura común:

Documento XML de manifiesto: En este archivo es donde se definen las propiedades de nuestro gadget: nombre, icono, autor, descripción de la utilidad del gadget, etc.

Documento HTML: En él se programará toda la funcionalidad de la interfaz gráfica de nuestro gadget.

Documento HTML de configuración: En caso de que nuestra aplicación sea muy compleja y tenga varios parámetros configurables, deberemos crear este documento (opcionalmente) para que el usuario pueda interactuar directamente con el gadget.

Imágenes: Necesitaremos tres imágenes diferentes para nuestro gadget cómo mínimo, aunque esta parte es opcional también, una de ellas definirá el icono del menú de la sidebar para agregar nuevos gadget, otra de las imágenes, será la que se mostrará junto con los datos del autor, y la última imagen, definirá el fondo de nuestro gadget, en caso de no poner esta última, el fondo de nuestro gadget adquirirá el color de fondo que indiquemos en el fichero HTML, si queremos que nuestro gadget destaque visualmente, os recomiendo que hagáis un fondo transparente con bordes suaves y redondeados, cómo hemos hecho nosotros con un programa de retoque fotográfico.

JavaScript: El código JavaScript de nuestra aplicación puede ir embebido en el propio HTML, o bien encontrarse en un fichero aparte y ser llamado desde el código HTML. JavaScript junto con HTML serán los encargados de proporcionar al gadget toda su funcionalidad.

Hojas de Estilo CSS: Las Hojas de estilo se utilizan para dar el comportamiento gráfico de la interfaz HTML de nuestra aplicación. Sin ella el gadget se encontraría totalmente descuadrado de la SideBar, y carecería de imagen de fondo.

Una vez explicada la estructura de un gadget vamos a comenzar a programarnos nuestra primera miniaplicación para la Sidebar. Para la demo, hemos decidido hacer un sencillo reloj digital con el logotipo de nuestra empresa.

Lo primero que debéis hacer es crearos en la ruta: C:\Program Files\Windows Sidebar\Gadgets, una carpeta con el nombre: i64clock.gadget, donde i64clock lo deberéis sustituir por el nombre que le queráis dar a vuestro gadget, es muy importante que la carpeta acabe con la extensión .gadget, en caso contrario no será reconocida por la Sidebar.

Una vez creada la carpeta, tenemos que crear dentro los siguientes elementos:

Fichero HTML: con el nombre i64clock.html, de nuevo deberéis sustituir i64clock, por el nombre de vuestro gadget.

Fichero XML: con el nombre gadget.xml, es muy importante que este fichero se llame de esta manera exactamente para ser reconocido por la sidebar, su contenido que comentaremos más tarde, es una estructura común en todos los ficheros del resto de gadget, por lo que no necesitaremos programar directamente en XML, simplemente modificarlo mínimamente.

Imágenes: agregaremos a la carpeta toda las imágenes, en caso de que queramos tener todo más ordenado, podremos crearnos una carpeta interna donde almacenarlas, pero tenemos que tener en cuenta que a la hora de enlazarlas en el fichero XML, ya no estarán en la carpeta Raíz, y por tanto deberemos definirle la ruta de la subcarpeta.

Fichero de estilo CSS: finalmente crearemos el fichero style.css, con el mismo nombre indicado, nosotros hemos decidido alojarlo en una subcarpeta a la que hemos llamado CSS.

Una vez creados todos los ficheros tendréis algo cómo lo siguiente:

image

Ahora procederemos a rellenar los ficheros HTML, XML y CSS.

En primer lugar vamos a definir las características de nuestro gadget desde el fichero XML, para ello deberéis copiar el siguiente código tal cual, y modificar las partes seleccionadas en negrita por vuestros datos y los de vuestro gadget:

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

<gadget>

<name>i64 Clock</name>

<namespace>Namespace.Ejemplo</namespace>

<version>1.0</version>

<author name="jacalles">

<info url="http://www.informatica64.com" />

<logo src="i64.bmp"/>

</author>

<copyright>&#169; 2009</copyright>

<description>El gadget i64clock muestra un reloj digital en la Sidebar</description>

<icons>

<icon height="48" width="48" src="i64.png" />

</icons>

<hosts>

<host name="sidebar">

<base type="HTML" src="i64clock.html" />

<permissions>full</permissions>

<platform minPlatformVersion="1.0" />

<defaultImage src="i64.png" />

</host>

</hosts>

</gadget>

Cómo veis en el fichero, en primer lugar deberemos definir el nombre de nuestro gadget:

<name>i64 Clock</name>

Después agregaremos información del autor: nombre, web y logo.

<author name="jacalles">

<info url="http://www.informatica64.com" />

<logo src="i64.bmp"/>

</author>

Tras ello añadimos la frase que se mostrará en el menú de instalación de los gadget en la que contaremos la utilidad de nuestro gadget y el icono que lo representará:

<description>El gadget i64clock muestra un reloj digital en la Sidebar</description>

<icon height="48" width="48" src="i64.png" />

Finalmente le enlazamos el fichero HTML donde tenemos toda la funcionalidad de nuestro gadget y la imagen que utilizará cómo fondo:

<host name="sidebar">

<base type="HTML" src="i64clock.html" />

<permissions>full</permissions>

<platform minPlatformVersion="1.0" />

<defaultImage src="i64.png" />

</host>

El resultado cuando accedemos al menú de inserción de gadget será el siguiente:

image

Una vez definido el fichero XML, vamos a configurar la hoja de estilo CSS, para ello abrimos el fichero style.css, y añadimos el siguiente código:

Body

{

width:135px;

height:100px;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-image:url('../i64.gif');

}

En este punto definiremos los tamaños, márgenes y fondo principal de nuestro gadget, es muy importante que tengáis en cuenta que el ancho de vuestro gadget debe ser cómo máximo el de la sidebar. Además le hemos dado margen 0 en todos sus lados para aprovechar al máximo el tamaño del gadget.

Finalmente nos queda programar la funcionalidad del gadget en el fichero HTML, y opcionalmente en caso de que queramos sacar las funciones JavaScript fuera del propio fichero HTML, en un fichero JavaScript.

En este punto es muy importante echarle imaginación, ya que las posibilidades de programación de gadgets son infinitas, para el caso de que queráis hacer un reloj digital como nosotros, debéis copiar el siguiente código:

<html>

<head>

<title>i64 clock</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body text="white">

<center>

<br/>

<form name="time">

<input name="time2" style="font-size:29;background:transparent;border:none" size="5" type="text"/>

</form>

<script>

function func_reloj()

{

var d=new Date()

var hours=d.getHours()

var minutes=d.getMinutes()

var seconds=d.getSeconds()

if (hours>=12)

{

if (hours>=13)

hours-=12

}

if (minutes<10)

minutes="0"+minutes

if (seconds<10)

seconds="0"+seconds

var t

if (hours<10)

{

t="0"+hours+":"+minutes+":"+seconds

}

else

{

t=hours+":"+minutes+":"+seconds

}

document.time.time2.value=t

setTimeout("func_reloj()",1000)

}

func_reloj()

</script>

</center>

</body

Es muy importante que añadáis en vuestro fichero HTML la línea siguiente (que hemos destacado en rojo en el código), ya que será la llamada al fichero style.css donde antes le indicamos el tamaño y forma de nuestro gadget:

<link rel="stylesheet" type="text/css" href="css/style.css">

Cómo podéis ver nuestro código HTML se basa en una sencilla función JavaScript automatizada cada segundo, que llama periódicamente a las funciones getMinutes, getHours y getSeconds, para obtener la hora actual, y la muestra por pantalla en un input al que le hemos dado un fondo transparente para que se pueda ver solo la hora sobre el fondo de nuestro gadget. El resultado es el siguiente:

image

Básicamente, esto es todo lo que necesitareis saber para iniciaros en el mundo de la programación de gadget para Windows, si os interesa este mundillo, Microsoft tiene un foro y una página donde cuentan un poco sobre el desarrollo de gadget, y desde la que podréis compartir vuestros propios gadget con el resto de usuarios, la web es la siguiente:

http://gallery.live.com/devcenter.aspx

image

Ahora solo queda animaros, echarle imaginación y comenzar a programaros vuestros propios gadget, espero que os haya gustado el post y os animéis a compartir vuestras aplicaciones para la Sidebar con el resto de usuarios, para dar ejemplo aquí os dejo la captura de un segundo gadget que he programado, y que consta de una calculadora decimal cuya interfaz se complementa con la de nuestro reloj:

Que paséis buenas vacaciones! :)

No hay comentarios: