Desarrollo de un gadget para Windows 7 para visualizar un mapa con las visitas a tu blog

Juan Antonio — Wed, 14 Apr 2010 23:30:00 GMT

Buenas a todos, hoy me gustaría explicaros como desarrollar un pequeño y sencillo gadget para Windows 7 que incluirá un mapa de ClustrMaps, que como sabréis es un servicio que nos permite tras registrarnos incorporar un pequeño mapa en nuestro blog, a través de un pequeño código javascript, donde nos pintará en un mapa mundi los lugares desde los que nos visitan.

El desarrollo de gadgets los traté a fondo en el siguiente post hace varios meses por lo que no me extenderé mucho en el tema, pero aún así os recordaré por encima los elementos de los que se compone un gadget.

http://www.windowstecnico.com/archive/2009/04/05/creaci-243-n-de-un-gadget-para-la-sidebar-de-windows.aspx

La estructura de un gadget se basa en:

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. Para nuestro proyecto actual lo omitiremos.
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.
BLOCKED SCRIPT 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.

Los códigos del gadget que hoy hemos desarrollado son los siguientes:

Style.css

Body
{
width:158px;
height:105px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image:url('../rss.gif');
}

Gadget.xml

<gadget>
<name>Mapa de Visitas</name>
<namespace>Namespace.Ejemplo</namespace>
<version>1.0</version>
<author name="jacalles">
<info url="http://elblogdecalles.blogspot.com" />
<logo src="wallpaper.png"/>
</author>
<copyright>2010</copyright>
<description>Gadget que muestra el Mapa de Visitas de elblogdecalles.blogspot.com</description>
<icons>
<icon height="48" width="48" src="wallpaper.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" src="rss.html" />
<permissions>full</permissions>
<platform minPlatformVersion="1.0" />
<defaultImage src="wallpaper.png" />
</host>
</hosts>
</gadget>

Código HTML

<html>

<head>

<title>Mapa</title>

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

<center>

<a href="http://www3.clustrmaps.com/counter/maps.php?url=http://elblogdecalles.blogspot.com" id="clustrMapsLink"><img src="http://www3.clustrmaps.com/counter/index2.php?url=http://elblogdecalles.blogspot.com" style='border:0px;' alt='Locations of visitors to this page' title='Locations of visitors to this page' id='clustrMapsImg' onerror='this.onerror=null; this.src='http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://www2.clustrmaps.com';" /></a>

</center>

</head>

<body>

</body>

</html>

El resultado final lo podéis ver a continuación:

Espero seguiros animando en el desarrollo de gadgets para Windows Vista y 7, son bastante sencillos si se tiene algún conocimiento de programación, y muy polivalentes para tener ciertos elementos de uso cotidiano a mano.

saludos!

Windows Técnico : Gadget, Windows 7

Desarrollo de un gadget para Windows 7 para visualizar un mapa con las visitas a tu blog

Style.css

Gadget.xml

Código HTML