www.pc-actual.com

PC Actual

Inicio
Consejos
Paso a paso
Gadgets para Vista: Google en tu escritorio

Consejos

Paso a paso

Gadgets para Vista: Google en tu escritorio

20-10-2008 Windows Google

¿Necesitas tener a mano alguna pequeña utilidad que no te ofrece Vista? No te preocupes, en este práctico vamos a aprender a crear nuestro propio gadget para que lo incluyas en la Sidebar

Podríamos definir el término gadget como una pequeña aplicación gráfica incluida en Vista que está ubicada por defecto en la barra lateral (Sidebar) del Escritorio. Inicialmente, Vista incluye algunos programitas, como un reloj analógico, un calendario o una galería de imágenes. Pero, podrás añadir más pulsando sobre un botón con forma de + ubicado en la parte superior de la Sidebar.

Los gadgets se pueden colocar en cualquier parte del Escritorio, simplemente tendremos que arrastrarlos hasta el lugar donde queramos que permanezcan. Sobre el Escritorio, algunos de ellos cambiarán de forma para ampliar su información, por ejemplo, la utilidad que muestra el tiempo se agranda para ofrecer los datos de varios días.

Este práctico está dirigido a usuarios con conocimientos básico-intermedio, aunque aquellos que estén familiarizados con el diseño de páginas web encontrarán en él un excelente punto de partida.

¿Qué es un gadget?

No es otra cosa que una página web en HTML. Toda la funcionalidad del mismo se la da un lenguaje script como JavaScript o VBScript. Aparte, podremos añadir hojas de estilos o cualquier otro elemento usado en la creación de páginas web.

Para comenzar con el desarrollo de nuestro gadget, vamos a enumerar los elementos que lo componen. En primer lugar, una carpeta llamada nombregadget.gadget, en ella guardaremos cada uno de los archivos que componen nuestro trabajo. En segundo lugar, un fichero manifiesto con extensión XML que contiene información general sobre nuestro gadget, como por ejemplo, el nombre del autor, una descripción del mismo, los iconos que lo componen, etc.

En tercer lugar, un archivo principal con extensión HTML en el que definimos tanto la forma como la funcionalidad del gadget. Se podría decir que es éste en sí mismo. Por último, otros archivos con imágenes, hojas de estilos, ficheros JS o cualquier otro elemento para mejorar las características de nuestra miniaplicación.

Un ejemplo práctico

La mejor forma de aprender a construir un gadget es hacerlo con un ejemplo, en este caso, nos hemos propuesto diseñar un buscador web de Google. Vamos a bautizar a nuestro proyecto con el nombre de GooglePCA.

Paso 1

Establece un directorio

Comenzamos nuestro diseño creando una carpeta para contener todos los archivos que componen nuestro gadget. Ésta tendrá la forma nombregadget.gadget, donde nombregadget será el nombre que queramos darle al nuestro. En el ejemplo, hemos creado una carpeta llamada GooglePCA.gadget en el Escritorio. Es muy importante respetar la extensión, aun tratándose de un directorio.

Paso 2

Manifiesto del proyecto

El siguiente paso será definir el archivo manifiesto. Si no estás familiarizado con los ficheros XML, te podemos decir que son archivos de texto que contienen etiquetas y se usan generalmente para guardar datos de configuración. Cada etiqueta es de la forma <nombreetiqueta> contenido </nombreetiqueta>. Cuando un programa lee un archivo XML localiza el nombre de una etiqueta y acto seguido extrae su contenido. En el cuadro Etiquetas, mostramos una lista de las más significativas del archivo manifiesto de un gadget.

Para crear nuestro archivo manifiesto, sólo necesitaremos un editor de texto, por ejemplo, podemos usar el Bloc de notas (Notepad.exe) incluido en Vista. Una vez escrito, guardaremos este archivo con el nombre obligatorio de gadget.xml en la carpeta que habíamos creado previamente.

Código para crear el manifiesto del gadget

<?xml version="1.0" encoding="utf-8" ?>

<name>GooglePCA</name>

<namespace>Espacio de trabajo PCA</namespace>

</author>

<description>Este gadget es un buscador basado en Google</description>

<icons>

</icons>

<hosts>

</host>

</hosts>

</gadget>

Paso 3

El archivo principal html

Es el momento de diseñar el archivo principal HTML. Éste es el paso más importante de nuestro desarrollo, ya que es donde definiremos la funcionalidad de nuestro gadget. De forma similar a un archivo XML, uno HTML también es de texto y contiene etiquetas, algunas de ellas con propiedades. Todo archivo HTML comienza con una etiqueta <html> y termina con una </html>.

En su interior, podemos destacar dos zonas diferenciadas. La primera es conocida como cabecera y comprende todo lo que va desde la etiqueta <head> hasta </head>. En este espacio es donde se definen propiedades generales de nuestra página web y, por tanto, de nuestro gadget. La segunda es conocida como cuerpo y abarca todo lo que va desde la etiqueta <body> hasta </body>.

En esta zona se definen los elementos visibles de la página web, como imágenes, formularios o texto, entre otros, usando etiquetas. Una tercera, opcional, es la comprendida entre <script> y </script> y en ella podremos concretar funciones en lenguaje JavaScript o VBScript para usarlas en nuestra página.

Al igual que en el manifiesto, para crear nuestro archivo principal HTML, sólo necesitaremos un editor de textos como el Bloc de Notas. A la hora de salvar el documento, lo haremos con extensión HTML.

Paso 4

Define el gadget

Pasemos a definir nuestra miniaplicación. En este caso, es un buscador de Google que va a tener un título, una caja de texto y un botón. Cuando escribamos las palabras que queremos buscar en la caja de texto y pulsemos el botón, nos abrirá una ventana de nuestro navegador web con los resultados de la búsqueda. Veamos cómo hacerlo.

El tamaño del gadget se puede definir dentro de la etiqueta <head> como un estilo. Si te fijas en el código HTML que se adjunta a continuación, observarás que, dentro de la etiqueta <style>, aparece la palabra body, y dos líneas más abajo width:130, que significa que el ancho de nuestra aplicación será de 130 píxeles, y height: 120, que indica que el alto será de 120 píxeles.

Es aconsejable que siempre que diseñemos un gadget, le demos un ancho de 130 píxeles para que encaje perfectamente en la Sidebar. Respecto a la altura, podrás escoger el valor que mejor se adapte al tamaño de tu proyecto. Una última línea titulada background-color asignará un color al fondo, en concreto, hemos elegido el valor 336699 en RGB, que corresponde a un tono azulado.

Tras determinar el tamaño, nos ocupamos de los elementos que componen el gadget. Detras de la etiqueta <body>, puedes ver tres líneas. La primera hará que nuestra aplicación muestre la frase Buscar en Google:. La segunda dibujará una caja de texto cuyo nombre será “texto”, estará vacía y tendrá un tamaño de 12 caracteres. Y la tercera nos permitirá dibujar un botón, de nombre “boton”, que mostrará la palabra buscar y que, al pulsarlo, llamará a la función “mostrar();”.

Ahora, sólo queda comentar esta última función, que está definida en la etiqueta <script> y que, a su vez, llama a otra función del sistema de nombre System.Shell.execute, que permite lanzar aplicaciones dentro de Vista y tiene una particularidad: si le pasamos como parámetro la dirección de una página web, se encargará de abrir una ventana de nuestro navegador por defecto con dicha página web.

En nuestro caso, gracias a la sintaxis de búsqueda de Google, hemos pasado la dirección completa de una búsqueda en google.es (“http://www.google.es/se arch?hl=es&q=”) y, usando el símbolo +, hemos añadido texto.value, que equivale a añadir a la dirección las palabras que hayamos escrito en la caja de texto.

Código del archivo principal HTML

function mostrar(){ System.Shell.execute(“http://www.google.es/search?hl=es&q=” + texto.value);

}

</script>

<head>

<title>Buscador GooglePCA</title>

body{

width:130;

height:120;

background-color:336699;

}

</style>

</head>

<body >

Buscar en Google:

</body>

</html>

Paso 5

Hazlo atractivo con imágenes

Una vez terminado el diseño lógico de nuestro gadget, pasamos a realizar el artístico. Hemos creado tres imágenes con la herramienta gratuita The Gimp 2.5.1 (www.gimp.org): logoPCA.PNG, imagen correspondiente al logo del creador del gadget; iconoGooglePCA.PNG, icono con el que se mostrará nuestra miniaplicación en la lista de gadgets disponibles; e imagenpordefecto.PNG, que es la que aparece cuando arrastramos el gadget hasta la Sidebar para cargarlo en memoria.

Paso 6

Carga tu flamante miniaplicación

Una vez creados todos los elementos y guardados en la carpeta correspondiente, es momento de instalar nuestra miniaplicación. La mejor forma de hacerlo es copiando la carpeta que habíamos creado en el Escritorio GooglePCA.gadget en el siguiente directorio C:\Users\%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets. Una vez copiada, tendremos la oportunidad de acceder a nuestro gadget y probarlo a través de la Sidebar.

Como habréis podido comprobar, diseñar un gadget no es tan difícil como parece, unos pocos conocimientos de diseño de páginas web serán suficientes para crear uno personalizado. Si tienes interés en hacerlos más complejos, te animamos a que consultes las siguientes páginas: www.webestilo.com, para aprender HTML y JavaScript; http://msdn.microsoft.com/en-us/library/aa965850(VS.85).aspx, que contienen información oficial de Microsoft sobre los gadgets; y http://vista.gallery.microsoft.com, página oficial con gadgets variados.

Etiquetas

• name: nombre del gadget

• version: versión del gadget

• author: nombre del creador

• info url: página web del creador

• info text: descripción de la página web

• logo src: nombre del archivo de imagen del logotipo

• Copyright: aviso de Copyright o Copyleft

• description: descripción del gadget

• icon src: nombre del archivo de imagen del icono del gadget

• base src: nombre del archivo HTML principal de tu gadget