TIPO DE ACTIVIDAD

Crear Widgets para la web 2.0

1. Definición

1.1. Qué son los Widgets.

Esencialmente un widget es un conjunto de HTML/CSS/Javascript locales. Decimos locales, por que una vez que, por ejemplo, un mobil o un tableta, descarga un widget debe ser capaz de usarlo localmente, al quedar instalado en él.

Los Widgets, recordemos, no son más que sitios web comprimidos:

Creamos un fichero HTML, le añadimos los estilos necesarios en ficheros CSS y la funcionalidad viene dada en ficheros Javascript.

Todo ello comprimir en un fichero zip, al que le cambiaremos la extensión a .wgt

Si abrimos un archivo .wgt con un editor de código, como Dreamweaver, veremos esto:

Porque se trata de un archivo comprimido.

Los widgets se dividen en dos categorías principales:

a) Incorporables: Sólo tienes que copiar el código de inserción del widget y pegarlo en el código HTML de tu blog. También puedes agregarlo en tus sitios sociales favoritos como Facebook, Tuenti, y otros.

b) No incorporables: Tienes que ejecutarlo una plataforma en tu equipo. Todas las máquinas más recientes de Windows y Mac ya tienen esta característica incorporada, mientras que los usuarios de Linux pueden instalar y usar, por ejemplo, Screenlets.

c) Bajo Windows XP, así como Mac puedes utilizar una plataforma tercerizada como Yahoo! Widgets.

Al crear un widget, de hecho, estarás creando pequeñas piezas de información que se distrsisbuiraáprácticamente por toda la web para que tu contenido sea más visible, interactivo y útil. Feeds RSS, diapositivas de imágenes, videos, aplicaciones Flash ... los widgets pueden ser utilizados para empaquetar y entregar casi cualquier tipo de información digital.

Veamos algunos ejemplos de cómo puedes aprovechar el poder de los widgets y usarlos en su favor:

* Al crear un widget que muestra una selección de canales sindicados sRSS, puedes desarrollar un nicho objetivo news radar (radar de noticias), que proporciona valiosas informaciones sobre un tema que interesa a tu audiencia.

* Cuando crees un widget para una encuesta, puedes recoger datos e ideas útiles acerca de tu audiencia.

CI-003 v.01 / 1

* Cuando construyas un widget en Flash tienes la posibilidad de crear un mapa de Google para compartir la localización de tu próxima reunión.

* Al crear un widget de chats, podrás realmente crear una "conversación" con tus lectores y clientes.

Para ayudar a identificar una herramienta para crear widgets que realmente puede satisfacer tus necesidades, aquí abajo está un conjunto de tablas comparativas y análisis individual para ayudarte a elegir tsu opción preferida.

Éstos son los criterios específicos de selección utilizados para comparar los diferentes servicios:

* Tipos de widget: La tecnología o lenguaje de codificación utilizado para crear y distribuir widgets.

* Cuadro de plantillas: Plantillas disponibles que puedes usar para dar estilo a tu widget.

* Compartimiento social: Integración para redistribuir el widget a través de sitios o servicios de redes sociales.

* Analiticas: Monitoreo en tiempo real del rendimiento de tu widget (cuántas veces tu widget es compartido, por quién, en qué destinos, etc)

* Inscripción gratuita: egistro no obligatorio para la utilización de la herramienta para la creación de widgets.

* Precio: De la herramienta o servicio de creación para los widgets.

1.2. Qué es una aplicación web híbrida o mash-up.

La arquitectura de los mashups está siempre compuesta de tres partes:

El proveedor de contenidos: fuente de los datos. Los datos están disponibles vía una API y diferentes protocolos web como RSS, REST y Web Service.

El sitio mashup: es la nueva aplicación web que provee un nuevo servicio utilizando diferente información y de la que no es dueña.

El navegador cliente: es la interface de usuario del mashup.

Lo primero que se necesita para hacer un mashup es una o varias fuentes de datos. Cada vez es más común disponer de esos datos en formatos sindicados (RSS, Atom) o incluso mediante APIs que exponen los datos formateados.

1.3. Que es una API.

Una interfaz de programación de aplicaciones o API (del inglés Application Programming Interface) es el conjunto de funciones y procedimientos (o métodos, en la programación orientada a objetos) que ofrece cierta librería de programas para ser utilizado por otro programa.

Una interfaz de programación representa una interfaz de comunicación entre componentes de software. Se trata del conjunto de llamadas a ciertas bibliotecas que ofrecen acceso a ciertos servicios desde los procesos y representa un método para conseguir abstracción en la programación, generalmente (aunque no necesariamente) entre los niveles o capas inferiores y los superiores del software. Uno de los principales propósitos de una API consiste en proporcionar un conjunto de funciones de uso general, por ejemplo, para dibujar ventanas o iconos en la pantalla. De esta forma, los programadores se benefician de las ventajas de la API haciendo uso de su funcionalidad, evitándose el trabajo de programar todo desde el principio. Las APIs asimismo son abstractas: el software que proporciona una cierta API generalmente es llamado la implementación de esa API.

Por ejemplo, podemos escribir "Hola Mundo" sobre la pantalla en diferentes niveles de abstracción:

1- Haciendo todo el trabajo desde el principio:

Traza, sobre papel milimetrado, la forma de las letras (y espacio) "H,o, l, a,M,u, n, d, o".

Crea una matriz de cuadrados negros y blancos que se asemeje a la sucesión de letras.

Mediante instrucciones en ensamblador, escribe la información de la matriz en la memoria intermedia ("buffer") de pantalla.

Mediante la instrucción adecuada, haz que la tarjeta gráfica realice el volcado de esa información sobre la pantalla.

2- Por medio de un sistema operativo para hacer parte del trabajo:

CI-003 v.01 / 2

Carga una fuente tipográfica proporcionada por el sistema operativo.

Haz que el sistema operativo borre la pantalla.

Haz que el sistema operativo dibuje el texto "Hola Mundo" usando la fuente cargada.

3- Usando una aplicación (que a su vez usa el sistema operativo) para realizar la mayor parte del trabajo:

Escribe un documento HTML con las palabras "Hola Mundo" para que un navegador Web como Google Chrome, Mozilla, Firefox, Opera o Internet Explorer pueda representarlo en el monitor.

2. Usar y crear Widgets para la Web 2.0

2.1. Uso de Widgets en dispositivos móviles.

Vodafone Widget Manager

El Vodafone Widget Manager, sólo funciona en teléfonos Symbian S60 (Nokia, básicamente),

Ha sido creada por Vodafone para la gestión de widgets. Contiene un sistema para su instalación, así como un completo motor de tiempo de ejecución de Opera Mobile que se utiliza para interpretar la realidad, el código HTML, CSS y JavaScript.

Opera es un navegador muy bueno, por lo que puedes estar bastante seguro de que los widgets funcionan bastante bien mientras haya uso adecuado de HTML, CSS y JavaScript.

Opera / Widget T-Mobile Manager

Opera acaba de anunciar ahora que se ha construido un sistema similar para T-Mobile.

Es un gestor de widgets parece contener un dispositivo de API. Un dispositivo de la API es una interfaz de JavaScript significaba para acceder a la funcionalidad del teléfono, tales como la cámara, el calendario, la lista de contactos, y así sucesivamente.

La API Opera / T-Mobile dispositivo es de propiedad (y posiblemente restringido a Windows Mobile).

Nokia Web Runtime Widgets

Estos también son HTML / CSS / JavaScript widgets, a pesar de que se ejecute en S60 WebKit y necesitan un archivo XML Info.plist en lugar de un archivo config.xml. El esquema se basa en Apple Dashboard Widgets.

2.2. Uso de Widgets de Escritorio.

Los widgets de escritorio son llamados gadgets en las API de Google y Windows. Los gadgets son pequeños programas “gráficos” de un mayor tamaño de un ícono normal que muestran información o realizan una tarea específica.

Los gadgets de Google son mini-aplicaciones interactivas como, por ejemplo, juegos, herramientas de búsqueda o reproductores multimedia. Google Desktop dispone de una gran variedad de gadgets que puedes añadir al escritorio de tu equipo o a la barra lateral.

Windows 7, al igual que Windows Vista, incopora gadgets en su sistema operativo.

Crear un Gadget es tan simple como crear una página Web y añadirle funcionalidad con algún lenguaje de Scripting. A continuación se explican los pasos necesarios para lograrlo, que serán complementados con un ejemplo práctico que podrá servirle de referencia para empezar a crear sus propios Gadgets.

· Diseño Widget o ‘gadget’ para escritorio Windows7.

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

· Determinar la disponibilidad del Gadget

· Con la tecla Windows + R, abra la ventana “Run” y ejecute la siguiente sentencia de acuerdo a la visibilidad que desea que tenga el aplicativo.

· Crear el archivo XML para el manifiesto del Gadget

CI-003 v.01 / 3

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

· Crea la Interfaz Gráfica del Gadget

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.

· Programa la Funcionalidad Deseada

Utilizando JavaScript, VB Script o las propiedades del DOM que aprendimos en el modulo de “Introduccion a HTML 5” podremos aplicar eventos y acciones a nuestro Gadget.

· Probar, Depurar, e intalar el Gadget en Windows Sidebar

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

Abrir Windows Sidebar.

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

Agregar el Gadget a Windows Sidebar.

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

· Hacer doble Clic en el Gadget.

· Hacer Clic derecho en el Gadget y seleccionar Añadir.

· Arrastrar el Gadget hasta la misma barra lateral

2.3. Tecnología o lenguaje de codificación utilizado para crear y distribuir Widgets Web.

2.3.1. HTML

HTML es el lenguaje de marcas utilizadas para estructurar y publicar páginas en la Web. El contenido estático de un gadget está generalmente escrito en HTML.

HTML es similar a XML, pero se utiliza para documentos en formato en vez de describir datos estructurados.

Con el tipo de contenido html, todo el código reside, por lo general, en la especificación del gadget, incluido el código XML y todas las etiquetas HTML y JavaScript.

En casi todos los ejemplos que aparecen en esta guía se utiliza el tipo de contenido html.

2.3.2. CSS

CI-003 v.01 / 4

Podrás “embeber”, es decir incluir tus hojas de estilo en la arquitectura y diseño de tus gadgets o widgets, igual que podrás hacerlo con archivos externos de javascript.

2.3.3. JavaScriptJavaScript es un lenguaje de secuencias de comandos que puede utilizar para añadir comportamiento dinámico a los gadgets o widgets.

2.3.4. XML

XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades. Algunos de estos lenguajes que usan XML para su definición son XHTML, SVG, ...

XML no ha nacido sólo para su aplicación en Internet, sino que se propone como un estándar para el intercambio de información estructurada entre diferentes plataformas. Se puede usar en bases de datos, editores de texto, hojas de cálculo y casi cualquier cosa imaginable.

La tecnología XML busca dar solución al problema de expresar información estructurada de la manera más abstracta y reutilizable posible. Que la información sea estructurada quiere decir que se compone de partes bien definidas, y que esas partes se componen a su vez de otras partes. Entonces se tiene un árbol de trozos de información. Estas partes se llaman elementos, y se las señala mediante etiquetas.

Una etiqueta consiste en una marca hecha en el documento, que señala una porción de éste como un elemento. Un pedazo de información con un sentido claro y definido. Las etiquetas tienen la forma <curso>, donde curso es el nombre del elemento que se está señalando.

Básicamente en el archivo config.xml de un widget encontrarás las siguientes etiquetas:

<name> En este elemento se define el nombre del Widget o gadget

<author> Dentro de este elemento se definen los datos del autor del Widget. 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 Widget

<base> Su atributo Src indica a qué archivo HTML enlazamos

Partes de un documento XML

Un documento XML está formado por el prólogo y por el cuerpo del documento así como texto de etiquetas que contiene una gran variedad de efectos positivos o negativos en la referencia opcional a la que se refiere el documento, hay que tener mucho cuidado de esa parte de la gramática léxica para que se componga de manera uniforme.

Prólogo

Aunque no es obligatorio, los documentos XML pueden empezar con unas líneas que describen la versión XML, el tipo de documento y otras cosas.

El prólogo de un documento XML contiene:

• Una declaración XML. Es la sentencia que declara al documento como un documento XML.

• Una declaración de tipo de documento. Enlaza el documento con su DTD (definición de tipo de documento), o el DTD puede estar incluido en la propia declaración o ambas cosas al mismo tiempo.

• Uno o más comentarios e instrucciones de procesamiento.

CI-003 v.01 / 5

Cuerpo

A diferencia del prólogo, el cuerpo no es opcional en un documento XML, el cuerpo debe contener un y solo un elemento raíz, característica indispensable también para que el documento esté bien formado. Sin embargo es necesaria la adquisición de datos para su buen funcionamiento.

Elementos

Los elementos XML pueden tener contenido (más elementos, caracteres o ambos), o bien ser elementos vacíos.

Atributos

Los elementos pueden tener atributos, que son una manera de incorporar características o propiedades a los elementos de un documento. Deben ir entre comillas.

Ejemplo:

Un elemento "aprendiz" puede tener un atributo "LLuïsa" y un atributo "lugar", con valores "estudia XML" y "Cibernarium" respectivamente.

<aprendiz LLuïsa="estudia XML" lugar="Cibernarium">Estamos comprobando que funciona...…</aprendiz>

2.4. Plantillas o librerías disponibles que puedes usar para dar estilo a tu Widget Web.

Como estamos hablando de lenguaje estándares, disponemos de muchas librerías y programas que pueden realizar “automáticamente” el proceso de diseños y creación de un widget. Ejemplos:

Adobe Dreamweaver Widget Extension

En Adobe Exchange encontramos buena parte de estos recursos, aunque CS5 Adobe ha apostado por una mayor integración de los servicios en línea con las aplicaciones de escritorio.

Konfabulator

CI-003 v.01 / 6

Opera

CI-003 v.01 / 7

Diseño Widget “Hola Mundo” genérico para dispositivos móviles y táctiles.

2.5. Distribución social: Redistribuir un Widget a través de sitios web o social media

Puedes distribuir tus widgets bajo licencia Creative Commons, o a traves d eplataformas de pago, rentabilizando de esta manera la inversión de tiempo y recursos que hayas podido dedicar.Como ejemplos de plataformas de distribución: Widgets.Yahoo.com, Adobe.com/Extensions, Widgets.Opera.com,….2.6. Estadísticas: Monitoreo en tiempo real del rendimiento de tu Widget Web.

Puedes incluir Google Analytics u otra plataforma de monitoreo para saber a tsiempo real, quiénes y cuando utilizan tu widget en la webs.

2.7. Como registrarte en servicios privados para la utilizar herramientas de creación de Widgets.

Simplemente rellenas los formularios y creas una cuenta como desarrolladora.

2.8. Valor económico del servicio Widgets que has creado.

El valor económico d eun widget lo estableces al iniciar tu proyecto y estará determinado por diversos factoares variables y unos costos fijos de tiempo y recursos empleados. Que estrategia utilizas para rentabilizar esta inversión forma parte de tu decisión empresarial como desarrolladora.

Puedes distribuir tu aplicación:

Plataforma abierta o WWW : Mediante licencia Creative Commons.

Plataformas de distribución privada: como las mencionadas en el apartado 2.5. de este temario.

3. Herramientas de creación de Widget

Dispones de un conjunto de herramientas en red para crear tus widgets; o también de sherraminetas propietarias de empresas de ssoftware. Las principales son:

Editor de código, Adobe Dreamweaver:

Para Dreamweaver tenemos una aplicación basada lógicamente en Adobe AIR que nos facilita la búsqueda e importación de Widgets.

Veámoslo con un ejemplo:

Instalamos Adobe Dreamweaver Widget Browser desde Adobe Labs.

CI-003 v.01 / 8

Al abrir la aplicación desde Dreamweaver, podemos navegar y buscar widgets para Adobe Exchange.

Seleccionamos por ejemplo CSS-Only-Menu y se nos abre la vista Detalles con la información de ese widget.

Si hacemos click en ‘Preview’ podemos ver una’Live View’ del elemento y el código que lo genera.

Si nos gusta lo añadimos desde el botón “Add to My Widgets”.

De esta forma ya lo tendremos activo en Dreamweaver desde el menú Insertar > Widgets.

Por último podemos configurar distintas opciones de cada widget, distintos presets, en este caso distintos menús CSS creando así una librería de recursos bastante útil.

3.1. Yahoo! Widget Engine: Konfabulator.

Una de las principales referencias dentro de los 'widgets' se vincula con la palabra Konfabulator. Con ese nombre se identificaba una aplicación de pago que ofrecía al internauta la posibilidad de descargarse los 'widgets' que desarrollaba tanto para Windows como para Mac OS X.

El buscador Yahoo! adquirió el servicio y no sólo decidió ofrecerlo de forma gratuita, sino que además dejó parte del código de Konfabulator abierto para que los usuarios pudieran acceder a él y desarrollar nuevos widgets.

·

· Diseña un Widget “Hola Mundo” utilizando Yahoo y Konfabulator.

3.2. Google Desktop SDK.

Podemos utilizar las librerias de Google y su APi paar crear gadgets de escritorio, o widgets para plataformas como Android.

Encuentras toda la información que te resumimos en este seminario, en el siguiente enlace:

http://code.google.com/apis/gadgets/

Cómo empezar?

Como observarás, no resulta muy distinto del trabajo a realizar en diseño web; debes conocer XML; y saber que librerías y métodos vas a necesitar para tu proyecto o aplicación.

CI-003 v.01 / 9

1. Abrimos Dreamweaver, en modo de vista de edición, e incluye el siguiente código:

2. Visualiza el resultado en tu navegador utlizando el Google Gadgets Editor.

3.4. Opera Widgets SDK.

El navegador Opera incluye algunas herramientas que ayudan a los diseñadores del Web,

especialmente Opera Dragonfly, una herramienta de desarrollo que permite el análisis y

depuración remotas de páginas Web y la creación de widgets para plataforma de dispositivos

móviles.

La consola del diseñador es una herramienta para analizar y/o modificar interactivamente una

página Web durante su diseño o prueba de fallos, mientras que el visor de código fuente es una

herramienta más simple para examinar el código subyacente de la página y nos permite hacer

cambios rápidos en la misma.

Nota: para usar Opera Dragonfly, se debe activar JavaScript. una aplicación JavaScript, es una

herramienta que permite el análisis y depuración remotas de páginas Web. Para abrirla, se elije el

elemento de menú Herramientas > Avanzado > Herramientas de desarrollo. La interfície de

usuario tiene tres pestañas:

• Archivo de ordenes (script), permite depurar JavaScript,

• DOM, permite depuración de HTML y CSS,

• Consola, permite visualizar errores.

CI-003 v.01 / 10