Como hacer un Gadget para el escritorio de Windows 7

Como hacer un Gadget para el escritorio de Windows 7

Método paso por paso para crear tu propio Gadget, códigos necesarios, plantillas y ejemplos prácticos para crear copiando y pegando, sencillas aplicaciones que se pueden utilizar en el escritorio de Windows 7 o Vista y permiten y facilitan la ejecución de diversas tareas. Estructura y funcionamiento. Descargar Gadgets gratis.

Los Gadgets que se utilizan en el escritorio de Windows 7 y Vista, son pequeñas aplicaciones muy prácticas, facilitan la ejecución de numerosas tareas, ya sean en nuestro propio equipo local o relacionadas con la navegación en internet.
Se utilizaban originalmente solo en la barra lateral (Sidebar), pero es posible tenerlos en cualquier lugar del escritorio.
Son ideales para emplearlos en los monitores de pantalla ancha o panorámica.
Hay disponibles en la red cientos de Gadgets para descargar gratis, diseñados para diversos objetivos, pero es posible crear nosotros de forma sencilla nuestros propios Gadgets, personalizados a nuestro gusto, para realizar exactamente las tareas que necesitamos, lo cual es el objetivo de esta página.
gadget

Estructura de los Gadgets

Un Gadget no es más que un sencillo archivo en formato HTML, es decir una página web con un formato reducido, con otros elementos que le aportan la funcionalidad necesaria como: imágenes, scripts, hojas de estilo, etc.
Todos los elementos necesarios para su funcionamiento se encuentran en una carpeta la que se puede encontrar en algunos de los siguientes directorios:

• Los que vienen incluidos en la instalación de Windows los encontrarás en:
C: Program FilesWindows SidebarGadgets
• Los que instales para todos los usuarios se almacenarán en:
C: Program FilesWindows SidebarShared Gadgets
• Los que instales para el uso de un usuario específico se almacenarán en:
%userprofile%AppDataLocalMicrosoftWindows SidebarGadgets

Cada carpeta con los archivos del Gadget tiene un nombre propio seguido de los caracteres: ".gadget" y contiene en su interior:

◊ Tres directorios o carpetas llamadas: css, js e imágenes.
◊ Un archivo nombrado: gadget.xml, que es el manifiesto del Gadget.
◊ Archivo o los archivos HTML necesarios.

(Las carpetas son opcionales para tener organizados los archivos auxiliares, hay Gadgets que nos las incluyen, en ese caso todos los archivos están en la raíz de la carpeta)

Crear un Gadget copiando y pegando el código

A continuación el método paso por paso para crear un sencillo Gadget, en este primer ejemplo se creará una aplicación nombrada "Buscar" que permitirá realizar búsquedas en internet introduciendo los términos en una entrada de texto.

➀- Accede al directorio donde se guardarán los archivos del Gadget, para eso introduce en el comando Ejecutar (Windows+R) la siguiente dirección y oprime la tecla Enter:
Program FilesWindows SidebarShared Gadgets

➁- Crea una nueva carpeta exactamente con el siguiente nombre: Buscar.gadget

➂- Clic derecho en el interior de la carpeta y crea un nuevo documento de texto.

➃- Abre el documento creado, copia y pega lo siguiente:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Buscar</name>
<version>1.0</version>
<author name="Nombre del autor">
<info url="http://www.webdelautor.com" />
</author>
<copyright>&#169; 2011</copyright>
<description>Gadget que permite hacer busquedas en internet</description>
<hosts>
<host name="sidebar">
<base type="HTML" src="index.html" />
<permissions>full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>


➄- Sustituye los datos del autor por los tuyos, los únicos que admiten modificación son:

<name>Buscar</name>
<author name="Nombre del autor">
<info url="http://www.webdelautor.com" />
<copyright>&#169; 2011</copyright>
<description>Gadget que permite hacer busquedas ....</description>

No se pueden emplear caracteres especiales como acentos, en caso que se usen es necesario escaparlos.
Cierra el documento y guarda los cambios, renómbralo a: gadget.xml, este será el manifiesto del Gadget, necesario para registrarlo y que Windows lo reconozca.

➅- Crea otro documento de texto, copia y pega en su interior el siguiente código:

<html>
<head>
<title>Buscador</title>
<style type="text/css" media="screen">
body {height:130;width:160;padding:1px;border:4px solid #ddd;background-color:#3e6ce0;}
h1 {font-size:14px;color:white;}
</style>
</head>
<body>
<h1>Buscar en Google</h1>
<form method="get" action="http://www.google.com/search">
<input type="text" size=13 name="q" value="" />
<input type="submit" style=font-size:14px;margin-top:2px; name="" value="Buscar" />
<input type="reset" style=font-size:14px;margin-top:2px; value="Reset" />
</form>
</body>
</html>

➆- Cierra el documento y guarda los cambios, renómbralo a: index.html, esta será la página principal del Gadget, permitirá crear la interface elemental necesaria para hacer una búsqueda en internet utilizando a Google.

El Gadget creado con el código anterior lucirá de la siguiente manera:
Windows

Puedes emplear en el archivo index.html un código un poco más complejo, que en este caso permitirá diferentes opciones de búsquedas, ya sea en Google, Imágenes de Google, Mapas de Google, Wikipedia y Bing. El código es el siguiente:

<html>
<head>
<title>Buscador</title>
<style type="text/css" media="screen">
body {height:110;width:164;padding:2px;border:3px solid #ddd;background-color:#3e6ce0;}
h1 {font-size:14px;color:white;}
</style>
</head>
<body>
<div class="buscador" >
<form name="formulario" action="" onsubmit="return buscar();">
<select name="sengines" style=font-size:14px; >
<option value="http://www.google.com/search?q=" selected="selected" > Google</option>
<option value="http://images.google.com/images?q=" > Google Imagenes</option>
<option value="http://www.bing.com/search?q=" > Bing</option>
<option value="http://maps.google.com/maps?q=" > Google Maps</option>
<option value="http://es.wikipedia.org/w/wiki.phtml?search=" >Wikipedia</option>
</select>
<input type="text" size=14 name="searchterms" value="" />
<input type="submit" style=font-size:14px;margin-top:2px; name="SearchSubmit" value="Buscar" />
<input type="reset" style=font-size:14px;margin-top:2px; value="Reset" />
</form></div>
<script type="text/javascript">
function buscar() {var sf=document.formulario;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;}
</script>
</body>
</html>

El Gadget creado ahora lucirá de otra manera:
gratis

Como instalar el Gadget creado.

Ya la carpeta creada tiene todos los elementos necesarios para funcionar, para instalar el Gadget solo abre la aplicación Gadgets, para eso da un clic derecho en el escritorio y escógela en el menú o accede al Panel de control y selecciona Gadgets de escritorio.
Para encontrar el Gadget creado con más facilidad, en el menú de la esquina superior derecha selecciona: Gadgets recientemente instalados.
Arrastra el Gadget al escritorio y ya estará funcional.

Como modificar y personalizar el aspecto del Gadget.

El aspecto del Gadget creado es fácil de modificar, para eso solo es necesario cambiar los parámetros en el estilo del archivo index.html. Cambia los siguientes valores:

height: El alto del Gadget
width: El ancho, (las medidas son en pixeles)
background-color: Color de fondo. Puedes usar valores hexadecimales o el nombre en inglés del color, por ejemplo algunos son: red, blue, navy, green, olive, yellow, lime, magenta, purple, cyan, brown, black, gray, teal y white.

En este ejemplo no se incluye ninguna imagen para que no haya necesidad de descargar archivos para crearlo, pero puedes incluirlas, lo que hará que luzca con un aspecto más estético.
En ese caso es necesario crear otro manifiesto en el que se hará referencia a las imágenes utilizadas, para eso emplea la siguiente plantilla:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Buscar</name>
<namespace>Namespace.Ejemplo</namespace>
<version>1.0</version>
<author name="Nombre del autor">
<info url="http://www.webdelautor.com" />
<logo src="logo.png"/>
</author>
<copyright>&#169; 2011</copyright>
<description>Gadget que permite hacer busquedas en internet utilizando a Google</description>
<icons>
<icon height="48" width="48" src="icono.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" src="index.html" />
<permissions>full</permissions>
<platform minPlatformVersion="1.0" />
<defaultImage src="logo.png" />
</host>
</hosts>
</gadget>

En la plantilla se hace referencia a: logo.png es el logotipo que identifica al Gadget, icono.png es el icono que se muestra en la pantalla de la herramienta Gadgets, si no se emplea ninguno, se mostrará el icono predeterminado del sistema.

Como distribuir el Gadget creado para instalar en otros equipos.

El Gadget creado si deseas publicarlo o distribuirlo, ya sea para instalarlo en otro equipo o enviárselo a tus amigos es necesario comprimirlo.
Comprímelo, pero que sea en el formato ZIP, puede ser con el creador de carpetas comprimidas de Windows, Winzip, 7z o cualquier otro software, pero que quede con la extensión .ZIP, a continuación elimina la extensión de forma que el nombre del Gadget quede con el siguiente formato: Nombre.gadget.
Ahora verás que el archivo adopta el icono característico y al dar solo dos clics en él se instalará en el sistema donde se ejecute.
hazlo

Gracias espero y te sean de utilidad.

Como hacer un Gadget para el escritorio de Windows 7