Como hacer Gadgets para el escritorio de Windows de "0&




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.
Como hacer un Gadget para el escritorio
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:
Crogram FilesWindows SidebarGadgets
• Los que instales para todos los usuarios se almacenarán en:
Crogram 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.

dijo:*****************************************************************************************************************
<?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>


*****************************************************************************************************************[/quote]


➃- 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>

dijo:<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>[/quote]



➆- 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

Escritorio

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:


propio




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>
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.

util


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.

gadget

Gadget

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:
UsersNombredelUsuarioAppDataLocalMicrosoftWindows SidebarGadgets 2- Si deseas que el Gadget esté disponible para todos los usuarios de la PC, entonces será en:
Program FilesWindows SidebarShared 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="Crogram FilesWindows SidebarShared GadgetsMisCorreos.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.



ALGUNOS GADGET UTILES



http://norfipc.com/ftp/gadgets/DigitalWorldClock.zip
http://norfipc.com/ftp/gadgets/NetWorkTraffic.zip
http://norfipc.com/ftp/gadgets/Wireless%20Gadget2.1.gadget.zip
http://norfipc.com/ftp/gadgets/Traductor.zip
http://norfipc.com/ftp/gadgets/Wikipedia.zip
http://norfipc.com/ftp/gadgets/NewMail.zip
http://norfipc.com/ftp/gadgets/GoogleSearch.zip
http://norfipc.com/ftp/gadgets/PasswordGenerator.zip
http://norfipc.com/ftp/gadgets/LinksBar.zip
http://norfipc.com/ftp/gadgets/IPConfig.zip
http://norfipc.com/ftp/gadgets/VolumeGadget.zip


Windows7