Crea Tu Propio Gadget

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:

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

Buscar

© 2011
Gadget que permite hacer busquedas ....

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:

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

¿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:

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:

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:

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.

sábado, 6 de septiembre de 2014