Gadgets para Windows Vista

Entre las novedades que tiene Windows Vista esta el conocido Sidebar, Windows Sidebar es un tipo de tecnología que hace posible que un desarrollador de páginas Web, cree aplicaciones denominadas “Gadgets”, los Sidebars se presentan como un panel o barra lateral en el escritorio de Windows Vista donde se presentan los gadgets.


Los Gadget son una nueva categoría de mini-aplicaciones pensadas para proporcionar información y datos útiles, o para mejorar una aplicación o un servicio de Windows o de la Web. Los ejemplos de Gadgets pueden ser desde un dispositivo climático que corre en tu escritorio o en tu homepage, un dispositivo RSS que extrae tus feeds favoritos o la extensión de una aplicación de negocios que brinda el estado actual del pulso de tus negocios.
Así, además de ofrecer servicios directos desde la PC misma, los Gadgets tienen la apariencia que uno les designe.


Recientemente tuve la oportunidad de participar en un concurso latinoamericano de desarrollo de gadgets en el que participaron cerca de 4000 desarrolladores y en el cual obtuve la ocatva posicion. Desarrolle un gadget que muestra las colas de caracas mediante las fotografias de las camaras de Movilnet y Movistar. Dicho gadget puede ser descargado de la siguiente direccion. http://gallery.live.com/liveItemDetail.aspx?li=1d86e767-03a2-4e33-8cb0-b8db04639d66


Para aquellos que esten interesados en desarrollar su propio gadget a continuacion un step by step de como hacer un gadget, espero que les ayude:


Paso 1: Crear el directorio contenedor de los archivos de desarrollo del Gadget


Se debe crear un directorio para almacenar los archivos que serán desarrollados para el funcionamiento completo del Gadget.

1. Determinar la disponibilidad del Gadget


a) Si se desea que el Gadget esté disponible para un usuario específico de la PC, debe localizar el directorio donde se creará el Gadget con la siguiente sentencia:


\Users\%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
 


b) Si se desea que el Gadget esté disponible para todos los usuarios de la PC, entonces escriba la siguiente sentencia:



\Program Files\Windows Sidebar\Shared Gadgets


Al ingresar la instrucción antes mencionada dentro del explorador de Windows se abrirá en el directorio que contiene los Gadgets disponibles para el usuario especificado o para todos los usuarios de la PC, respectivamente.


2. Generar un directorio para el Gadget

Se creará un directorio con el formato NombreDeGadget.gadget en la carpeta de Gadgets localizada en el punto 2 (donde NombreDeGadget debe ser reemplazado por el nombre que hayamos asignado a nuestro Gadget, por ejemplo: Noticias.gadget, FotosEnLinea.gadget, etc).



Es importante que el nombre de la carpeta termine con la extensión .gadget para que el aplicativo sea reconocido por Windows Sidebar y se pueda acceder desde allí posteriormente.


Dentro de este directorio y con el objetivo de mantener el orden dentro del desarrollo, se podrán generar 3 nuevos subdirectorios llamados css, js e imágenes, que serán utilizados posteriormente.



 


Paso 2: Crear el archivo XML para el manifiesto del Gadget


En la raíz del directorio creado en el paso 1 con el nombre NombreDeGadget.gadget, genere un nuevo archivo llamado gadget.xml, que servirá como manifiesto del Gadget. El nombre del archivo debe ser obligatoriamente gadget.xml para que cumpla su propósito.

El archivo manifiesto del Gadget almacena las configuraciones que serán utilizadas por el aplicativo. Es un archivo de texto plano con formato XML que se puede modificar fácilmente.







<?xml version=”1.0″ encoding=”utf-8″ ?>
<gadget>
<name>Nombre del Gadget</name>
<namespace>Namespace.Ejemplo</namespace>
<version>1.0</version>
<author name=”Nombre del autor”>
<info url=”http://www.webdelautor.com” />
<logo src=”logo.png” mce_src=”logo.png”/>
</author>
<copyright>© 2007</copyright>
<description>Aquí va la descripción del Gadget</description>
<icons>
<icon height=”48″ width=”48″ src=”iconoDelGadget.png” mce_src=”iconoDelGadget.png” />
</icons>
<hosts>
<host name=”sidebar”>
<base type=”HTML” src=”InterfazVisualDelGadget.html” mce_src=”InterfazVisualDelGadget.html” />
<permissions>full</permissions>
<platform minPlatformVersion=”1.0″ />
<defaultImage src=”drag.png” mce_src=”drag.png” />
</host>
</hosts>
</gadget>


Se destacan los siguientes elementos para configurar correctamente la aplicación




















Elemento Descripción
<name> En este elemento se define el nombre del Gadget
<author> Dentro de este elemento se definen los datos del autor del Gadget. Tiene sub elementos que permiten destacar el sitio web y el logo del autor.
<description> Este elemento permite brindar una descripción sobre la funcionalidad del Gadget
<base> Su atributo Src indica a Windows Sidebar qué archivo HTML contiene la interfaz de usuario del Gadget

Paso 3: Crear la interfaz gráfica del Gadget


El usuario podrá interactuar con el Gadget de dos maneras:

• Utilizando los servicios que brinde el aplicativo desde su pantalla principal.
• Configurando las características y el funcionamiento para permitir una parametrización desde una pantalla dispuesta para tal fin.

Estas interfaces serán soportadas por archivos HTML que pueden contener cualquiera de los elementos comúnmente permitidos por los mismos.

La interfaz gráfica con el usuario puede estar basada en elementos simples del estándar HTML como listas desplegables, casillas de selección simple o múltiple, cajas de texto, etc. o bien puede estar desarrollada con un sofisticado diseño en flash, o una combinación de ambos métodos, por mencionar algunas opciones.

En cualquier caso, estas páginas harán uso de las funciones Javascript necesarias para interactuar con el modelo de objetos Gadget (del que se hablará más adelante) para brindar los servicios deseados al usuario.




Siguiendo con los pasos necesarios para hacer funcionar un Gadget realizaremos las siguientes acciones:



1) Crear la pantalla del Gadget
En la raíz del directorio NombreDeGadget.gadget generado en el paso 1, donde ya existe el archivo gadget.xml, genere el archivo HTML de interfaz gráfica que brindará los servicios al usuario y será accedido desde Windows Sidebar como un Gadget.

2) Crear la pantalla de Configuración del Gadget
En la misma ubicación, puede generar el archivo un archivo HTML para que el usuario realice las configuraciones funcionales necesarias que usted, como desarrollador, desee exponer.

3) Mantener el orden entre sus archivos
Es una buena práctica centralizar las configuraciones visuales de los archivos HTML que se exponen al usuario en uno o varios archivos de hoja de estilo en cascada (con extensión .css). En ese caso se pueden almacenar en el directorio css que hemos generado en el primer paso para tal fin.

De la misma manera, las imágenes que sean utilizadas por las pantallas HTML que se hayan creado, pueden ser almacenadas dentro del directorio imágenes, también creado durante el primer paso.




Paso 4: Programar la funcionalidad deseada


Una vez que se ha definido la interfaz gráfica, podrá hacer uso de su talento como programador Javascript o VBScript para dar vida a sus Gadgets.

Además de tener la posibilidad de programar el comportamiento de los elementos dispuestos en las páginas HTML del Gadget, podrá hacer uso del modelo de objetos extendido que provee Windows Vista para lograr grandes funcionalidades.


1) Generar funciones de Scripting


Deberá desarrollar toda la funcionalidad que se desee para interactuar con la interfaz HTML creada. Se podrá codificar en VBScript o Javascript para acceder al modelo de objetos expuesto por DHTML y brindar al usuario los servicios definidos para el Gadget.


2) Interactuar con un modelo de objetos poderoso y extendido


El modelo de objetos DHTML se ve extendido en Windows Vista para interactuar con los objetos y eventos de Windows Sidebar e interactuar con el sistema operativo, accediendo, entre otras, a las funcionalidades de:

• System.Display
• System.Environment
• System.Globalization
• System.Machine
• System.Net.NetworkInformation
• System.Shell


Paso 5: Probar, Depurar e Instalar el Gadget en Windows Sidebar


Como todo desarrollo pequeño o grande, debemos probar la consistencia y funcionalidad de nuestro Gadget antes de distribuirlo.

Si queremos instalar el Gadget en una PC podemos seguir los siguientes pasos:


1) Abrir Windows Sidebar


• Hacer Clic en el signo “+” ubicado en la parte superior de la Windows Sidebar

2) Agregar el Gadget a Windows Sidebar

En la Galería de Gadgets se podrá visualizar el Gadget creado. Para agregarlo, existen tres posibilidades:

• Hacer doble Clic en el Gadget
• Hacer Clic derecho en el Gadget y seleccionar Add
• Arrastrar el Gadget hasta la misma Sidebar.


La Galería de Gadgets reconoce todos los Gadgets que están ubicados en las siguientes direcciones:

• \Users\%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets (gadgets propios de cada usuario)
• \Program Files\Windows Sidebar\Shared Gadgets (gadgets que a los que pueden acceder todos los usuarios de la computadora)
• \Program Files\Windows Sidebar\Gadgets (gadgets que ya vienen instalados con Windows Vista)


Tips


• Es recomendable especificar siempre tanto el ancho como el largo del Gadget, para que no se vea deforme en la Windows Sidebar.
• Se puede crear un paquete de instalación de nuestro Gadget para que, sólo con un doble clic, se instale y se agregue en la Sidebar. Para ello, seleccionamos y comprimimos todos los archivos y carpetas que forman nuestro Gadget. Dado que el ZIP quedará con el formato NombreDeGadget.gadget.zip, le quitamos la extensión zip. Con solo darle doble clic al archivo comprimido se instalará nuestro Gadget. De esta maneroa


De esta manera podran hacer sus propios Gadgets, animense


Saludos

WPF Blend y VS

Este fin de semana estuve revisando los ejemplos que vienen en el SDK de Windows Vista de la seccion de WPF y se me ocurrio hacer un ejemplo simple con Blend para probar la versatilidad de ese Editor de XAML. Aun cuando me percate que un proyecto standard (.EXE), se pueden agregar paginas y formularios windows, al momento de ejecutar la aplicacion es un ejecutable (.EXE) el resultado, de alli me surgio la duda acerca de como hacer correr ese XAML en una pagina WEB, Investigue y consegui dos maneras, una de ellas es mediante la implementacion de un XBAP (XAML Browser Application) y la segunda es instalando el SDK de SilverLight, con la implementacion de un HTML que use los archivos javascript (Silverlight.js  y CreateSilverlight.js)


Dentro de Visual Studio Orcas ya viene nativo un control host para ejecutar XAML y una integracion desde mi punto de vista mejorada entre BLEND y VS.


Para mayor informacion sobre estos temas les recomiendo.


http://silverlight.net/GetStarted


http://msdn2.microsoft.com/en-us/silverlight/bb187401.aspx


y para aquellos que les interesa Blend, unos videos tutoriales sencillos pero muy buenos (para principiantes)


http://www.programar.net/directory/?fid=24 


Saludos


EOF.