Crear Widgets para la web 2.0

CREIX AMB

INTERNET

2

1. Widgets.

1.1. Qué son los Widgets.Esencialmente un widget es un conjunto de documentos HTML/CSS/JavaScript locales. Decimos locales, por que una vez que, por ejemplo, un mobil o un tableta, descarga un widget, el dispositivo debe ser capaz de usarlo localmente, al quedar instalado en él.Creamos un fichero HTML, le añadimos los estilos necesarios en ficheros CSS y la funcionalidad necesaria en ficheros Javascript. Al comprimir estos ficheros en un fichero zip, cambiaremos la extensión a .wgt Los widgets, pues, no son más que sitios web comprimidos.Al crear un widget, de hecho, estarás creando pequeñas piezas de información que se distrsisbuirá 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.

1.2. Categorías de Widgets.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, u 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) En Windows XP o Mac OSX puedes utilizar una plataforma de widgets como, por ejemplo, Yahoo! Widgets o Adobe AIR.

1.3. Arquitectura de un Widget

1.3.1. HTMLHTML 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. 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. 1.3.2. CSS

3

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. 1.3.3. JavaScriptJavaScript es un lenguaje de secuencias de comandos que puedes utilizar para añadir comportamiento dinámico a los gadgets o widgets. 1.3.4. XMLXML no es realmente un lenguaje particular, sino una manera de definir lenguajes para diferentes necesidades. Es lo que llamamos un lenguaje declarativo. XML no es tanto un lenguaje de programación, sino más bien una forma de expresar las abstracciones del lenguaje. Con palabras de Alan Kay: "XML no es un lenguaje, es un material de construcción". Otros lenguajes usan XML para su definición: 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 desarrollo de programas informáticos….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.

1.3.5. 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.Se trata del conjunto de llamadas a ciertas bibliotecas que ofrecen acceso a ciertos servicios desde los procesos. Uno de los principales propósitos de una API consiste en proporcionar un conjunto de funciones de uso general, por ejemplo, dibujar ventanas o iconos en una pantalla.

Partes de un documento XMLUn documento XML está formado por el prólogo y por el cuerpo del documento así como texto de etiquetado que muestra la referencia opcional a la que se refiere el documento, debemos ser formales con la gramática léxica para que se componga de manera uniforme.El Prólogo

4

Aunque no es obligatorio, los documentos XML pueden empezar con unas líneas que describan la versión XML, el tipo de documento y otros datos.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.El CuerpoA 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.ElementosLos elementos XML pueden ser elementos con contenido (más elementos, caracteres o ambos), o bien ser elementos vacíos.AtributosLos elementos pueden tener atributos, que son una manera de incorporar características o propiedades a los elementos de un documento. Estos deben indicarse 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>

5

1.4. El manifiesto: Archivo de ConfiguraciónLlamamos manifiesto de un widget al archivo XML que describe el widget correspondiente en detalle para que nuestro dispositivo ( Android, Windows Mobile, Windows, OSX, ..) pueda‘hacer algo’ con el widget.

2. Widgets vs. Gadgets.2.1.Widgets para plataforma Movil.El diseño de una aplicación para dispositivo móvil requiere invertir recursos adicionales cunado nos encontremos en el estado de planificación inicial.Nuestro diseño deberá, cumplir con los requisitos e hitos de nuestra aplicación, adaptarse a los requerimientos de la plataforma de desarrollo y de nuestro propio modelo industrial.Conceptos como interactividad, accesibilidad,operabilidad… Formarán parte de nuestro léxico detrabajo durante el desarrollo del prototipado de nuestro widget.Como ejemplo, el siguiente gráfico que vamos a analizar:

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.GoogleLos 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.MicrosoftWindows 7 y Windows Vista incorporan 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.

6

Veamos con el siguiente ejercicio los pasos necesarios para lograrlo:

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

Objetivos· 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

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

Desarrollo• Crea la Interfaz Gráfica del GadgetLa 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 DeseadaUtilizando 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.• Prueba, Depura, e instala el Gadget en Windows SidebarSi 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 Windows Sidebar.• Agrega 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.

7

3. Herramientas para crear Widgets.

4.1. Herramientas on-line

Para crear widgets dispones de una serie de herramientas o kits on-llne Existen decenas de estos sitios Utiliza widgets de sitios web fiables. Los Widgets existentes pueden ser muy peligrosos, y por ejemplo, robar datos de tu página web.

8

4.2 Herramientas de desarrollo.

Adobe Dreamweaver Widget ToolAdobe Widget Browser es una aplicación Adobe AIR que permite a los usuarios fácilmente ver y configurar los widgets, y luego generar una página HTML que utiliza el widget. Adobe Widget Browser ayuda a los desarrolladores y diseñadores mediante la simplificación de los tres pasos principales:

• Navegación: Ver detalles y clasificaciones mientras navegas widgets disponibles.

• Configuración: Configuración de JavaScript y CSS propiedades, incluyendo los colores de fondo, duración y cualquier otra configuración expuestos por el desarrollador de widgets. A medida que establecer las propiedades, el widget se actualiza en tiempo real a medida que se ejecuta en el panel de vista previa.

• Implementación: Guarda el código de trabajo actual a un archivo que se puede integrar en sus páginas web.

Opera DragonFlyOpera Dragonfly es un amplio conjunto de herramientas de desarrollo de Opera, diseñado para permitir a los desarrolladores una aplicación ligera-pero-de gran alcance que encaja perfectamente con el flujo de trabajo de desarrollo.

• Incluye: Depurador JavaScript, DOM Inspector, CSS inspector, Consola de errores CSS y JavaScript relacionada con la página, Proxy para permitir la depuración directamente en los dispositivos móviles, Analizador de red, Cookie y visor de almacenamiento local, Selector de color.

Dragonfly está integrado en el navegador de escritorio de Opera.

9

Yahoo KonfabulatorYahoo! Konfabulator Widgets (también llamado "Widget Engine" o "motor") utiliza XML para definir Widgets y los objetos que los componen.

Google SDKGoogle Inc. Te permite utilizar toda una serie de APIs, libreráis y protocolos de transferencia de datos para utilizar y crear tu widget so gadget.

Adobe Flash

También , a modo final, podemos crear nuestros propios widgtes con la herramienta Flash y usando el lenguaje ActionScript y XML.Flash Player, un plugin que se ejecuta en nuestro escritorio, o en nuestro navegador, es la herramienta más elaborada que se ha desarrollado para interpretar y presentar documentos XML.

10

Guia de RecursosRECURSOSNom URL Observacions

Gadgets de Google http://code.google.com/apis/gadgets/

Widgets opera http://widgets.opera.comWikipedia: Alan Kay http://es.wikipedia.org/wiki/Alan_Kay

KOnfabulator http://manual.widgets.yahoo.com/

Opera dragonFly http://help.opera.com/Windows/10.00/es-ES/devtools.html

Widgets con Flash http://www.thetechlabs.com/xml/creating-a-weather-widget-with-xml-and-as3/

Herramientas Google http://code.google.com/webtoolkit/download.html

W3C Widget http://code.google.com/webtoolkit/download.html Especificación oficial

Widgets para laweb 2.0

http://widgets-gadgets.com/?p=280