Cómo crear un widget web (HTML, CSS, JavaScript, XML)

Los widgets son mini-aplicaciones autónomas (relojes, contadores, tickers) que se insertan en webs de terceros. Usan tecnologías web estándar: HTML/XHTML, CSS, JavaScript. Si sabes hacer una web, sabes hacer un widget.

Arquitectura básica

Paso 1: Estructura XHTML

Crea archivo .html válido XHTML 1.0+:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Mi Widget</title>
</head>
<body background="fondo.png">
  <h1>Bienvenido a Mi Widget</h1>
</body>
</html>

Paso 2: Canvas 2D (opcional)

Usa <canvas> para gráficos 2D. Atributo composite controla cómo se compone la imagen.

Paso 3: Estilos CSS

Crea widget.css para apariencia uniforme cross-browser. Importa en el HTML:
<link rel="stylesheet" href="widget.css">

Paso 4: Dynamism con JavaScript (objeto widget)

• Preferencias de usuario: widget.setPreferenceForKey(valor, clave) / widget.preferenceForKey(clave).
• Eventos activación/desactivación para ahorrar CPU/red:
  if (window.widget) { widget.onhide = hide; widget.onshow = show; }

Paso 5: Archivo Info.plist

Identifica el widget y sus recursos. Contenido varía según tipo (accesorio, aplicación, información).

Consejo

El dinamismo usa JavaScript: accede a preferencias del sistema, voltea widget para ajustes, abre otras apps, responde a eventos web, ejecuta comandos de shell/línea de comandos.