NorfiPC » Modificar Windows » Como Hacer tu Propio Gadget

Como hacer un Gadget para el escritorio de Windows

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.

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 Files\Windows Sidebar\Gadgets
• Los que instales para todos los usuarios se almacenarán en:
C:\Program Files\Windows Sidebar\Shared Gadgets
• Los que instales para el uso de un usuario específico se almacenarán en:
%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets

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.
Sigue los siguientes pasos:

➀- Accede al directorio donde se guardarán los archivos del Gadget, para eso introduce en la herramienta Ejecutar (Windows + R) la siguiente dirección y presiona la tecla Enter:
\Program Files\Windows Sidebar\Shared 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:130px;width:160px;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:

Buscar en Google

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:

Es posible agregarle aún más opciones al código usado en el pequeño formulario de búsqueda.
Para más información lee la siguiente página de nuestro sitio: Como crear tu propio formulario web para buscar en internet

¿Cómo 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.

¿Cómo modificar y personalizar el estilo 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.

¿Cómo 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.

Crear un Gadget para el uso del correo electrónico

Mis Correos, un Gadget sencillo y elemental, nos servirá para iniciar nuestra aplicación de correo y enviar un nuevo mensaje a nuestros contactos más utilizados.
Para comenzar descarga la plantilla del Gadget y cópiala en una de las siguientes rutas:
1- Si deseas que el Gadget esté disponible para un usuario específico de la PC será en:
\Users\NombredelUsuario\AppData\Local\Microsoft\Windows Sidebar\Gadgets 2- Si deseas que el Gadget esté disponible para todos los usuarios de la PC, entonces será en:
\Program Files\Windows Sidebar\Shared Gadgets
El archivo que es necesario configurar para establecer nuestras preferencias es: main.html, el código del archivo es el siguiente:

<html>
<head>
<title>Mis Correos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<link rel="stylesheet" type="text/css" href="style.css"/>  
<body>
<h1>Mis Correos:</h1>		
<a href="mailto:info@dominio.com">ELENA</a><br/>
<a href="mailto:info@dominio.com">JUANA</a><br/>
<a href="mailto:info@dominio.com">PEPE</a><br/>
<a href="mailto:info@dominio.com">JOAQUIN</a><br/>	
<a href="mailto:info@dominio.com">PEDRO</a><br/>	
<a href="C:\Program Files\Windows Sidebar\Shared Gadgets\MisCorreos.gadget\" ><img  src="arrow.png" width="16" height="16" alt="" /></a>
</body>
</html>

Solo es necesario modificar el Nombre y la dirección electrónica de los contactos, el titulo si deseas otro y la referencia que hace la imagen de la flecha, si la carpeta del Gadget está en otra ruta.
El archivo style.css puedes modificarlo también, si quieres personalizar el aspecto del Gadget a tu gusto, cambiar la apariencia, tamaño, colores o el background.
El código es:

body {height:194px;width:130px;background:url(blue.png);
background-color:#00265B;padding:1px;border:1px solid #555;}
h1 {font-size:18;float: center;color:#ffffff;} 
a:link {font-size:16;color: #FFFF00;text-decoration:none;}
a:visited {font-size:16;color: #00FF00;text-decoration:none;}
a:hover {font-size:16;color: #ff0000;text-decoration:underline;} 
img {float:right;border:0;}

Si quieres aumentar la altura para que tengas espacio para más contactos aumenta el valor height y comenta o borra la línea background: url(blue.png).
Para instalarlo simplemente busca en el Panel de Control la carpeta de Gadgets, selecciona Mis Correos y arrástralo para el escritorio.
Modificando los archivos main.html y style.ccs puedes experimentar y hacer distintos Gadgets con diferentes funciones.

Crear un Gadget con un objeto o archivo Flash

Una de las formas más sencillas de crear un Gadget, es uno que solo muestre y reproduzca una película Flash.
Hablamos de pequeñas animaciones creadas en Flash, como son relojes, candelarios, mapas, o sea animaciones que nos puedan servir de utilidad en nuestro escritorio.
Para hacerlo descarga a tu equipo la siguiente plantilla, es un Gadget completo, pero podrás modificarlo a tu antojo y te servirá como muestra para crear uno completamente a tu gusto y necesidad.

Editar y configurar el Gadget Flash

Descomprime el archivo que descargues, contiene solo tres archivos:

✓ gadget.xml
✓ index.html
✓ reloj.swf

• Edita el archivo "gadget.xml" (con el Bloc de notas, Notepad+ u otro editor) y sustituye mis datos por los tuyos.
• El archivo "reloj.swf" es la película flash que utiliza el Gadget, si vas a utilizar otro, cópialo a este directorio e introduce los datos en el siguiente archivo.
• El archivo "index.html" es el archivo principal o la pequeña página web que se muestra en el escritorio.
Para utilizar otro archivo flash es necesario actualizar su nombre y sus dimensiones en la etiqueta OBJECT y en el estilo CSS.
Es todo.
Por ultimo selecciona los tres archivos y comprímelos en ZIP.
El archivo resultante dale el nombre: "flash.gadget", puede ser cualquier otro nombre, pero que tenga la extensión: .gadget
Si lo hiciste correctamente, el archivo tomará el icono característico de los Gadgets.
Dos clics en el archivo para instalarlo.
Gadget hecho con un reloj flash funcionando en Windows 8

Gadget hecho con un reloj flash funcionando en Windows 8

También puedes descargar el Gadget de muestra Reloj-Flash a tu equipo, completamente funcional en el link más abajo.

Para leer más información de cómo usar los archivos flash en las páginas web, lee la siguiente página de este sitio, en ella podrás descargar varias películas flash, que te servirán para crear Gadgets diferentes. Como insertar objetos y películas flash en las páginas web

Usar e instalar Gadgets en Windows 8

Windows 8 no incluye la Sidebar ni los Gadgets y no es posible instalarlos.
Se debe a que ahora Windows los sustituye por aplicaciones que funcionan tanto en la PC como en dispositivos portables como teléfonos celulares y tabletas.
No obstante no es difícil habilitarlos y usarlos perfectamente.
Solo es necesario copiar de una instalación existente de Windows 7 (puede ser de otro equipo) la carpeta Windows Sidebar y ejecutar un script que hace los ajustes en el Registro y registra las DLL necesarias.
Lee en otra página de nuestro sitio como hacerlo y descarga los archivos. Como habilitar y hacer funcionar los Gadgets en Windows 8

Como instalar gadgets de Windows 7 en Windows 10

En el escritorio de Windows 10 podemos tener los gadgets de Windows 7 de una forma bastante sencilla.
Solo tenemos que descargar gratis DesktopGadgetsInstaller desde http://gadgetsrevived.com/
Después de instalar la aplicación al dar clic derecho en el Escritorio veremos disponible la opción Gadgets, también en el panel de control clásico.

Paginas relacionadas

✓ Modificar aplicaciones EXE y archivos de Windows con Resource Hacker
✓ Extraer imágenes y otros archivos de las librerías DLL en Windows
✓ Como crear accesos directos a herramientas, carpetas y funciones del sistema en Windows
✓ Trucos para Windows 7, configuración, cambios, ajustes y modificaciones
✓ Trucos para Windows 7, opciones poco conocidas, ocultas, interesantes y utiles