Cómo crear HUDs web en macOS con Automator

¿Tienes sitios que visitas con frecuencia —por ejemplo Twitter, Gmail, Facebook o MakeUseOf— y quisieras abrirlos de forma rápida, separada y sin acumular pestañas? En macOS puedes convertir cualquier web en una mini-ventana tipo HUD (Heads-Up Display) usando Automator y la acción Website Popup. Esta técnica es ligera, no requiere programar y ofrece acceso inmediato desde cualquier aplicación.

¿Qué es un HUD?

HUD significa Heads-Up Display. Es una ventana pequeña e independiente diseñada para mostrar información concreta sin distraer del trabajo principal. En videojuegos se usan para mostrar vida, munición y armas; en macOS lo veremos en paletas flotantes, exposés y algunos controles en pantalla completa.

Definición en una línea: un HUD es una ventana minimalista que muestra contenido específico (una web o widget) sin ocupar toda la pantalla ni interferir con otras tareas.

Importante: los HUDs son ideales para consultas rápidas, notificaciones y mini-aplicaciones web (web apps). No son adecuados para tareas largas o para sitios que requieren muchas pestañas o extensiones.

Antes de empezar: requisitos y descargas

• macOS con Automator instalado (viene por defecto).
• Descargar e instalar la acción Website Popup (requiere permisos de administrador).
• Opcional: permisos para añadir atajos de teclado en Preferencias del Sistema.

Nota: si prefieres no instalar acciones de terceros, consulta la sección de alternativas más abajo.

Paso a paso: crear el flujo de trabajo en Automator

1. Instala Website Popup en tu sistema. Si el instalador pide contraseña de administrador otórgala.

2. Abre Automator y crea un nuevo documento. Elige uno de los siguientes tipos según tu preferencia:

   • “Aplicación” — crea una app independiente que puedes abrir desde el Finder.
   • “Servicio” — permite invocar el HUD desde el menú de Servicios y asignar atajos; lo recomiendo si quieres usar atajos desde cualquier app.

3. En el flujo, configúralo para que no reciba entrada si usas Servicio.

4. Añade la acción “Obtener las URL especificadas” y reemplaza la URL de ejemplo por la del sitio que quieras abrir (por ejemplo https://mail.google.com o https://twitter.com).

5. Añade la acción “Website PopUp” (o “Website Popup”) a continuación.

6. Configura las opciones de Website Popup:
   • Tamaño del sitio: “Grande”, “Mediano”, “iPhone”, “iPhone (Horizontal)” o “Personalizado”. Si eliges Personalizado, inserta ancho y alto en píxeles.
   • Agente de usuario: elige si la web debe verse como “Safari” o como “iPhone” (útil para versiones móviles).
   • Posición: “Centrado” o “En el puntero”.
   • Salida: deja la opción por defecto si no notas diferencias.

7. Guarda el flujo con un nombre descriptivo, por ejemplo “HUD — Gmail” o “HUD — Twitter”.

Asignar un atajo de teclado

Para abrir cualquier HUD con rapidez, asigna un atajo global:

1. Abre Preferencias del Sistema > Teclado > Funciones rápidas > Servicios.
2. Busca tu servicio guardado (por ejemplo “HUD — Gmail”) y asigna una combinación de teclas.

A partir de ahora puedes invocar el HUD desde cualquier aplicación con ese atajo.

Ejemplos y resultados

• Si seleccionas Tamaño iPhone + Agente de usuario iPhone obtendrás la versión móvil del sitio en una mini-ventana.

• Si eliges Tamaño Grande + Agente Safari verás la versión completa del sitio en una ventana amplia y centrada.

Puedes replicar este proceso para cualquier sitio: Facebook, Gmail, Twitter u otras web apps.

Alternativas y cuándo elegir cada opción

• Fluid: crea aplicaciones site-specific que aparecen en el Dock y se comportan como apps independientes. Mejor para uso frecuente y persistente.
• Chrome/Edge: usar “Crear acceso directo” o “Crear atajo” para convertir sitios en ventanas tipo app; más simple pero menos personalizable.
• PWA (Progressive Web App): si la web soporta PWA, instálala para obtener integración y notificaciones.

Elige HUDs si quieres accesos rápidos y efímeros desde cualquier app. Elige Fluid/PWA si necesitas integración profunda, notificaciones y sesiones persistentes.

Mini-metodología: cómo decidir configuración por sitio

• Si solo consultas: Tamaño iPhone + Agente iPhone.
• Si gestionas contenido: Tamaño Grande + Agente Safari.
• Si necesitas interacción esporádica: Mediano y Posición En el puntero.
• Si el sitio no se adapta bien: prueba Personalizado con 1024×600 o 1280×720.

SOP rápido para crear un HUD (playbook)

1. Descargar e instalar Website Popup.
2. Abrir Automator y crear Servicio.
3. Añadir “Obtener las URL especificadas” y pegar la URL.
4. Añadir “Website PopUp” y configurar tamaño, agente y posición.
5. Guardar con nombre claro.
6. Asignar atajo en Preferencias del Sistema.
7. Probar y ajustar tamaño o agente según resultado.

Criterios de aceptación: al pulsar el atajo, la ventana se abre en menos de 2 segundos, muestra la web deseada y no bloquea otras apps.

Lista de comprobación por rol

• Usuario general: URL correcta, atajo asignado, prueba rápida.
• Usuario avanzado: probar agente de usuario móvil y escritorio, ajustar personalizado.
• Administrador TI: aprobar instalación de la acción Website Popup y documentar permisos.

Solución de problemas comunes

• La acción no aparece en Automator: reinicia Automator y verifica que la acción se instaló en /Library/Automator o ~/Library/Automator.
• La web se ve rota: cambia el agente de usuario a Safari o activa Personalizado con ancho mayor.
• El atajo no funciona: revisa conflictos con otras funciones rápidas y asegúrate de que el servicio está marcado en Preferencias del Sistema.

Consejo: algunas webs bloquean vistas incrustadas (iFrame/X-Frame-Options). Si la web no carga dentro del HUD, usa Fluid o una PWA como alternativa.

Mapa de decisión rápido

flowchart TD
  A[¿Necesitas acceso rápido y pequeño?] -->|Sí| B[HUD con Website Popup]
  A -->|No| C[Considera Fluid o PWA]
  B --> D{La web carga en HUD?}
  D -->|Sí| E[Usa atajo y optimiza tamaño]
  D -->|No| F[Probar agente o usar Fluid/PWA]
  C --> G[Crear app con Fluid o instalar PWA]
  F --> G

Casos en los que no conviene usar HUDs

• Sitios que requieren múltiples pestañas o extensiones del navegador.
• Aplicaciones web que realizan tareas largas (edición de vídeo, gestión compleja de proyectos).
• Sitios que prohíben ser embebidos por políticas de seguridad.

Buenas prácticas de usabilidad

• Asigna atajos consistentes y evita combinaciones en conflicto.
• Usa nombres claros para cada HUD (HUD — Gmail).
• Mantén los tamaños consistentes entre HUDs similares.

Resumen

Los HUDs creados con Automator y Website Popup ofrecen un método ligero y rápido para acceder a webs frecuentes sin llenar tu navegador de pestañas. Son ideales para consultas rápidas, notificaciones y pequeñas web apps. Si una web no funciona en HUD, prueba cambiar el agente, ajustar el tamaño o usar alternativas como Fluid o PWA.

Notas finales: crea varios HUDs para tareas concretas (correo, mensajería, redes) y asigna atajos fáciles de recordar. Comparte tus combinaciones y sitios preferidos en los comentarios.

Extras: plantillas rápidas para nombres de flujo

• HUD — Correo
• HUD — Mensajes
• HUD — Soporte
• HUD — Dashboard interno

Fin del artículo.