Este documento habla sobre los widgets, que son pequeñas aplicaciones móviles que ofrecen funciones específicas como información o entretenimiento. Explica qué es un widget, cómo funcionan, dónde se pueden publicar, las tecnologías involucradas y herramientas para crearlos. También menciona algunas compañías que han integrado widgets en sus plataformas móviles.

1. Widgets.
Mini aplicaciones con maxipotencial
Modulo 2. Aplicaciones Web
Por: David Ricardo Cázares Mejía
Movilweb sistemas.
http://movilweb.com.mx
Widgets. Mini aplicaciones con maxipotencial
Taller teórico – práctico en Desarrollo de Aplicaciones Móviles
http://widgets.com.mx
Todos los derechos reservados 2010 Movilweb Sistemas.
Taller teórico – práctico en Desarrollo de Aplicaciones Móviles. México 2010.
Informes: +5255 36.24.40.93 movilweb.mx@gmail.com , info@movilweb.com.mx

2. ¿Que es un Widget?
Mas allá de un nombre curioso...
Un Widget es una mini aplicación móvil que reside o no en la memoria del dispositivo,
tiene una función sumamente específica, principalmente información o entretenimiento y que
además cuenta con las siguientes características:
1.- El usuario no distingue un Widget de una aplicación propia del dispositivo
(almenos no el usuario promedio)
2.- Generalmente son instalados en base al gusto y selección del usuario (fomenta
fidelidad a la marca o concepto de la aplicación, ya que es adoptada por el target
específico al que busca llegar la marca o empresa.
3.- “Pesa poco” y generalmente son descargados de sitios especializados en contenidos
para dispositivos móviles conocidos como AppStores o Marketplaces.
(en menor número son precargadas en el equipo por el fabricante o carrier).
4.- Al ser aplicaciones estandarizadas son relativamente facil de migrar entre plataformas.
http://widgets.com.mx

3. Lo que NO es un Widget
Un mundo de variantes, prepara tus aspirinas
No es un sitio wap propiamente*, es una aplicación empaquetada que se ejecutada o
lanzada desde el menú del dispositivo (el usuario no ingresa al browser, sino al menu de
aplicaciones para hacer click en un icono), y es posible que resida total o parcialmente en
un servidor Web, lo cual no es percibido por el usuario, salvo cuando el teléfono muestra
mensajes para aceptar la conexión a internet y/o alertas de seguridad.
No es una aplicación compleja, por el contrario, un Widget sencillo y amigable es mucho
mas deseable que uno saturado de información, complicado y poco intuitivo.
No es una aplicación que deba requerir de manuales ni capacitación de usuario.
Widget no es una marca comercial, sistema operativo o lenguaje de programación.
(Es la evolución del termino Gadget anteponiendole Wi de wireless)
No es universal (no confundir con estandarizado), cada fabricante de equipos incluye
funcionalidad propia a sus widgets (APIs), por lo que el Widget se adapta a cada plataforma
(esta adaptacion no es automática, la realiza el programador), por lo que pueden existir
multiples versiones del mismo widget, por ejemplo: uno para Nokia, otro para LG,
Samsung, Qualcomm Plaza mobile, Opera, etc.
* Aunque se basan en las mismas tecnologías. http://widgets.com.mx

4. ¿Donde está el negocio?
Ecuación de oro: Usuario = Proveedor de audiencia
Un widget se mide en su valor absoluto (aplicación con costo) o bien por la cantidad de
descargas – accesos (valor relativo), osea:
En impactos, clicks, inicio de sesiones ó número de usuarios si se trata de un widget de
modalidad social, etc, etc.
Es decir que se trata de un “concurso de popularidad” donde el valor de una aplicación
es medido básicamente por sus descargas, accesos, reingresos, permanencia, e indicadores
socioeconómicos del usuario (país, región, grupo étnico, nse, género, edad, etc.).
dicho lo anterior el negocio de desarrollar un widget está en:
1) Venderlo (si el contenido es sumamente especializado o exclusivo).
2) Incluir publicidad (Adversiting).
3) Patrocinio y posicionemiento de marca (Mobile Branding).
4) Combinación de todas o algunas de las anteriores.
Es en este punto donde debe analizarse cuidadosamente el o los medios para dar difusión
al Widget, principalmente la selección de las AppStores
(ver tema relacionado a la publicación de contenido).
http://widgets.com.mx

5. ¿Que busca un Widget?
La belleza de las cosas simples...
Un widget busca principalmente:
Ser un vínculo íntimo entre marca – usuario.
El teléfono celular es un objeto personal, por lo tanto el software que contiene también
proyecta la personalidad del usuario (es decir que “vestimos” a nuestro teléfono móvil
a nuestra propia imagen y semejanza).
Crear hábitos en el usuario a partir de la utilidad del contenido.
(mientras más útil y/o divertido es un widget es más usado, y mientras más se usa se
crea una fuerte necesidad de tenerlo, actualizarlo y recomendarlo).
Fomenta un canal de comunicación interactiva entre el usuario y la marca.
Crea un nuevo medio para medir la aceptación de una marca o concepto en base
al número de descargas, accesos, reingresos, hora y lugar de acceso, etc.
Logra que una marca tenga presencia en todo momento y lugar.
(Recordemos que un widget cuenta con audiencia sumamente segmentada).
http://widgets.com.mx

6. ¿Que contiene un Widget?
No puedes dar gusto a todo mundo...
Todos los Widgets móviles para cualquier plataforma pueden mostrar:
1) Texto con formato.
2) Imágenes (jpg, png, etc).
3) Links de descargas (contenido gratuito o premium).
4) Funciones “click to call”, “click to mail”, “click to sms”.
5) Scripts (JavaScript - Ajax) del lado cliente*.
(En modelos touch se maneja el término “tap” en lugar de “click”)
De acuerdo a la marca y modelo pueden o no mostrar:
1) Información de geolocalización.
2) Contenido embebido (por ejemplo. Video de Youtube en reproductor Flash).
3) Administración de contactos.
4) Administración de agenda.
5) Administración de archivos.
6) Transición de pantallas y efectos gráficos.
7) Creación y manejo de datos persistentes.
Existen Frameworks adaptados a cada plataforma
http://widgets.com.mx

7. Navegador vs Plataforma
La guerra por crear contenido...
Dado el enorme crecimiento en el mercado de teléfonos inteligentes que se manifiesta a nivel
global los desarrolladores de sistemas operativos así como las empresas de tecnología integradora,
han abierto sus plataformas para poder facilitar al desarrollador de aplicaciones la creación de
contenido específico para cada dispositivo a fin de dar valor agregado a los equipos, además claro,
de aprovechar la creciente aceptación por la descarga de contenido a través de AppStores, en donde
curiosamente quien hace el trabajo de crear las aplicaciones aveces es quien menos gana en este
nuevo ecosistema tecnológico (y su correspondiente modelo de negocio).
Es por esto que actualmente contamos con contenido WAP adaptado para las capacidades gráficas y
de procesarimento de dispositivos móviles accesible mediante el browser integrado en el sistema
operativo (WRT, Opera, etc) y por aplicaciones Widget que no requieren que el usuario acceda al
navegador ni tenga que ingresar dirección alguna para visualizar el contenido, tal vez para un usuario
experto en tecnología no represente mayor problema ingresar una URL, mas no así para el
usuario promedio.
Aunque en esecia una página WAP y un Widget puedan ser técnicamente iguales, la forma en que el
usuario accede a la información es completamente determinante en el éxito del proyecto.
Y es en este último punto donde los fabricantes han iniciado una guerra para “reclutar” programadores
(Publishers como le llaman algunos) que desarrollen contenido que favorezca a sus correspondientes
marcas.
http://widgets.com.mx

8. Tecnologías
Optimizar ante todo...
(Snippets disponibles en sesión práctica)
Teoricamente los Widgets se basan en estándares bien definidos (http://www.w3.org/TR/widgets/).
Sin embargo durante la práctica vemos que es necesario adaptar el contenido para cada plataforma.
No obstante existen al menos tres estándares técnicos que podemos emplear sin mayores
modificaciones para la creación de un Widget:
XHTML Basic. Aunque es aceptado HTML es recomendable ser estrictos en la sintaxis para
ayudar al navegador a interpretar nuestra aplicación y por consiguiente lograr un mejor rendimiento.
CSS. Hay que estudiar cuidadosamente que características de estilo admite la plataforma de
ejecución de nuestro Widget para evitar código paja que no será aplicado, logrando así un código
más limpio y rápido.
JavaScript. Hay que tener mucho cuidado al implementar código del lado cliente, en primer lugar para
no revasar los límites de funciones y variables admitidos por cada plataforma y en segundo lugar para
logar código mas ligero, es muy recomendable que todas las validaciones de formularios, cálculos y
funciones residan del lado servidor (revisar apartado de PHP Aplicado en Aplicaciones Móviles).
Código ligero (Sin comentarios*, optimizado y validado).
Código útil (Solo funciones y estilos que realmente sean usados).
Código reusable (Rutinas y estilos bien diferenciados para nuevas aplicaciones)
http://widgets.com.mx

9. Tecnologías
Todo mundo habla de Ajax.
(Snippets disponibles en sesión práctica)
Ajax (Asynchronous JavaScript And XML) se define como el conjunto de tecnologías que emplean
la espacificación XMLHttpRequest propia del navegador para proporcionar funcionalidad adicional
en la transferencia de datos entre el cliente y el servidor, particularmente basadas en respuestas
asincrónicas.
Existen numerosos Frameworks basados en esta especificación, sin embargo NO son universalmente
soportados, es así que podemos tener entornos de trabajo soportados a la perfección por iPhone
(iWebKit, iui y jqTouch por mecionar algunos), pero que en otras plataformas muestran numerosos
errores (lo mismo sucede con Guarana para Nokia S60).
Por lo tanto el uso de Frameworks basados en Ajax es recomendable solo cuando nuestra aplicación
será específica para algun dispositivo o familia de dispositivos.
Para lograr funcionalidad asincronica óptima para todos los navegadores que soportan Ajax lo mejor es
escribir nuestras propias funciones básicas y reutilizarlas sin mayor modificación:
El autor de esta ponencia recomienda por lo menos contemplar:
1) Función para cargar/actualizar contenido en DIVs.
2) Función para enviar formularios.
3) Función para leer contenido XML (RSS).
http://widgets.com.mx

10. Herramientas
Optimiza costos, usa freeware...
Edición de código fuente
Notepad ++. http://filezilla-project.org/
Cliente FTP
FileZilla. http://filezilla-project.org/
Servidor Web local para pruebas
Apache (XAMPP) http://www.apachefriends.org/es/xampp.html
Emuladores y navegadores
Phonegap Simulator
Opera mobile
Simbian SDK Simulator (Necesario registrarse en Forum Nokia )
Es recomendable hacer pruebas en equipos reales.
Validación de Código
http://validator.w3.org/check?uri=http://tuaplicacion.com
El uso de entornos integrados de desarrollo es elección de dada desarrollador, solo hay que tomar en
Cuenta que:
Muchas veces se agregan comentarios y rutinas sin previa consulta.
Generalmente se basan en “templates” específicos para algún dispositivo.
Un ejemplo de un buen IDE es http://www.aptana.com/ http://widgets.com.mx

11. Appstores
El que no enseña no vende...
Entre los principales AppStores para distribuir Widgets a nivel regional (AL)
OVI (Nokia)
Web: https://publish.ovi.com
Características: Presencia global, respaldo del fabricante de dispositivos móviles #1
Costo: 90 USD / Año
Tipo de contenido: JAR, SIS, SISX, WGZ (Widget para Nokia S60 3aEd o superior).
GetJar
Web: https://developer.getjar.com/publishing/allApps/
Costo: Gratuito
Tipo de contenido: URL*, WGZ (Widget Nokia)
Qualcomm Plaza Mobile (ideas widgets)
Web: http://telcelmx-web.qualcomm.com/
Características: Presencia en América Latina a traves de Telcel y Claro (Ambas de América
Móvil)
Costo: Gratuito
Tipo de contenido: ZIP (La aplicacion web compila el contenido)
* Esta característica es revisada en el capítulo dedicado a GetJar.
http://widgets.com.mx

12. Los gigantes y sus pequeños
Revisión global de compañias que han integrado
Widgets a su oferta tecnológica.
Nokia
Nombre: Widgets
Información: http://www.nokia-latinoamerica.com/soporte/aprende-como/widgets
Qualcomm Plaza Mobile (ideas widgets)
Nombre: Widgets
Información: http://plaza-global.qualcomm.com
Yahoo
Nombre: Yahoo Widgets
Información: http://widgets.yahoo.com/
Opera
Nombre: Opera Widgets
Información: http://widgets.opera.com/
Apple
Nombre: Apple WebApps
Información: http://www.apple.com/webapps/ *
* Aunque no es propiamente un Widget, es el único recurso disponible para que los desarrolladores
de aplicaciones web accedan a esa plataforma sin hacer uso de desarrollo de aplicaciones nativas.
http://widgets.com.mx

13. Los gigantes y sus pequeños
Revisión global de compañias que han integrado
Widgets a su oferta tecnológica (2).
Palm
Nombre: Widgets
Información:
http://developer.palm.com/index.php?option=com_content&view=article&id=1553&Itemid=44
Blackberry
Nombre: Blackberry Widget
Información: http://na.blackberry.com/eng/developers/browserdev/widgetsdk.jsp
Android
Nombre: Android Widgets
Información: http://developer.android.com/guide/practices/ui_guidelines/widget_design.html
LG
Nombre: Widgets
Información: http://developer.lgmobile.com/lge.mdn.tnd.RetrieveTopicWidget.dev?objectType=P
SAMSUNG
Nombre: Widgets
Información: http://innovator.samsungmobile.com/platform.main.do?platformId=12
http://widgets.com.mx