jueves, 15 de abril de 2010

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

Buenas a todos, como ya os conté en algún post anterior estaba desarrollando el entorno de simulación y protección te ataques para la asignatura de ASS del máster. En esta asignatura la verdad que se dan temas muy interesantes sobre arquitecturas de servicios y se me ha ocurrido como buen freak, presentar en ella algún juguete mas para acompañar el proyecto anterior.

Para el proyectillo que hoy os presento he desarrollado un 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 ya lo traté en los dos post que os dejo a continuación, aún así os copio todos los códigos a continuación.

http://elblogdecalles.blogspot.com/2009/06/creacion-e-instalacion-de-un-gadget.html

http://elblogdecalles.blogspot.com/2009/06/creacion-de-un-gadget-para-la-sidebar.html

La estructura de un gadget como ya conté se basa en:

  1. 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.
  2. Documento HTML: En él se programará toda la funcionalidad de la interfaz gráfica de nuestro gadget.
  3. 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.
  4. 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.
  5. 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.
  6. 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 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=&#39;http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg&#39;; document.getElementById(&#39;clustrMapsLink&#39;).href=&#39;http://www2.clustrmaps.com&#39;;" /></a>

</center>

</head>

<body>

</body>

</html>

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

image

image

image

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!

No hay comentarios: