LinuxParty

Iconos, ventanas, carpetas, barras de tareas y aplicaciones convierten una web convencional en un escritorio interactivo capaz de imitar Windows, Linux o macOS

La mayoría de las páginas web utilizan una estructura bastante reconocible: cabecera, menú de navegación, contenido central, barra lateral y pie de página. Sin embargo, algunos desarrolladores prefieren sustituir este diseño por algo mucho más llamativo: un escritorio completo dentro del navegador.

Estas páginas reciben nombres como web desktop, escritorio web, web OS o sitio con interfaz de sistema operativo. Al entrar en ellas encontramos un fondo de pantalla, iconos, carpetas, una barra de tareas y ventanas que pueden abrirse, cerrarse, moverse y cambiar de tamaño.

El resultado puede parecer un sistema operativo real, aunque normalmente continúa siendo una aplicación construida con HTML, CSS y JavaScript.

Una página web convertida en ordenador

La idea consiste en utilizar elementos conocidos por prácticamente cualquier usuario de ordenador como sistema de navegación.

En lugar de pulsar sobre un menú llamado «Proyectos», el visitante abre una carpeta situada en el escritorio. Para escuchar música ejecuta un reproductor, mientras que los datos de contacto pueden aparecer dentro de un archivo de texto o una terminal.

Una web de este tipo puede incorporar:

• Iconos y carpetas en el escritorio.
• Ventanas móviles y redimensionables.
• Barra de tareas o panel inferior.
• Menú de aplicaciones.
• Explorador de archivos simulado.
• Terminal interactiva.
• Editor de texto.
• Reproductor multimedia.
• Papelera.
• Notificaciones.
• Pantalla de inicio y apagado.
• Fondos y temas intercambiables.

Algunas solamente imitan la apariencia de un escritorio, mientras que otras implementan aplicaciones funcionales, almacenamiento local e incluso emuladores ejecutados dentro del navegador.

WINDOWS 93: un sistema operativo que nunca existió

Uno de los ejemplos más conocidos es WINDOWS 93, una parodia interactiva de los antiguos Windows de los años noventa.

El sitio incluye escritorio, menú de inicio, programas, juegos, sonidos, errores deliberados y numerosas referencias a la cultura de Internet. No pretende ser una herramienta de productividad, sino una experiencia artística y humorística.

Su éxito demuestra que una página web no tiene por qué limitarse a mostrar documentos: también puede convertirse en un entorno explorable.

daedalOS: un escritorio avanzado dentro del navegador

daedalOS es un proyecto mucho más ambicioso. Su desarrollador, Dustin Brett, ha creado un entorno de escritorio que funciona desde el navegador y cuyo código puede consultarse en GitHub.

Está desarrollado principalmente con JavaScript y TypeScript e incorpora explorador de archivos, terminal, reproductores, editores, juegos y diferentes aplicaciones.

También utiliza WebAssembly para ejecutar herramientas que normalmente necesitarían una aplicación nativa. Entre sus componentes aparecen emuladores, utilidades multimedia, intérpretes y aplicaciones capaces de procesar archivos directamente desde la web.

El proyecto se distribuye con licencia MIT y constituye una excelente referencia para estudiar cómo se organiza un escritorio web complejo.

OS.js: una plataforma para construir escritorios web

OS.js no es solamente una demostración visual, sino una plataforma de código abierto para desarrollar escritorios y aplicaciones ejecutadas en el navegador.

Incluye:

• Gestor de ventanas.
• Kit de componentes gráficos.
• API para desarrollar aplicaciones.
• Abstracción de sistemas de archivos.
• Gestión de procesos.
• Notificaciones.
• Temas y personalización.
• Integración con servicios del servidor.

Puede utilizarse para crear paneles empresariales, entornos educativos, escritorios remotos, plataformas internas o aplicaciones que necesiten organizar varias herramientas dentro de una interfaz común.

OS.js demuestra que el concepto no sirve únicamente para hacer páginas nostálgicas: también puede emplearse como base para aplicaciones profesionales.

Cómo se construye una página tipo escritorio

La apariencia inicial puede crearse mediante HTML y CSS. Cada icono representa un acceso y las ventanas se colocan como elementos superpuestos.

JavaScript se encarga de la interacción:

• Abrir y cerrar ventanas.
• Arrastrarlas por la pantalla.
• Cambiar su tamaño.
• Controlar cuál aparece en primer plano.
• Minimizar aplicaciones.
• Actualizar la barra de tareas.
• Guardar el estado del escritorio.
• Procesar el contenido de las aplicaciones.

Para gestionar la superposición se utilizan normalmente la propiedad CSS z-index y un controlador que coloca en primer plano la última ventana seleccionada.

La posición de los iconos, el fondo elegido y las aplicaciones abiertas pueden conservarse con localStorage o IndexedDB. De este modo, al regresar a la página, el usuario encuentra el escritorio como lo dejó.

Los proyectos más avanzados pueden incorporar un servidor para almacenar cuentas, configuraciones y archivos, además de tecnologías como WebSockets para actualizar información en tiempo real.

Bibliotecas para conseguir un aspecto clásico

No es necesario dibujar desde cero todos los botones, bordes y cuadros de diálogo.

98.css es un sistema de diseño que aplica a HTML semántico la apariencia de Windows 98. Proporciona estilos para ventanas, títulos, botones, campos, pestañas y otros controles clásicos.

XP.css ofrece una idea similar inspirada en Windows XP. Solamente proporciona la parte visual y no incorpora JavaScript, por lo que puede utilizarse con código convencional, React, Vue u otros entornos.

Quienes quieran añadir un reproductor musical pueden recurrir a Webamp, una recreación de Winamp 2 ejecutada en el navegador y compatible con sus conocidas máscaras.

Estas herramientas permiten crear una interfaz nostálgica sin tener que reproducir manualmente cada elemento gráfico.

También puede imitar Linux

Una web de escritorio no tiene por qué copiar Windows o macOS. Podemos diseñar una interfaz inspirada en KDE Plasma, GNOME, Xfce o en los escritorios Unix de los años noventa.

Un portfolio para un administrador de sistemas podría utilizar una terminal como navegación principal. Un desarrollador puede presentar sus proyectos como repositorios guardados en carpetas, mientras que una empresa de alojamiento podría mostrar servidores, estadísticas y herramientas dentro de ventanas.

Eso sí, conviene evitar copiar logotipos, iconos o recursos protegidos sin comprobar previamente sus licencias. Inspirarse en la distribución de un escritorio no significa necesariamente poder reutilizar todos sus elementos visuales.

Ventajas de este tipo de páginas

Su principal virtud es la diferenciación. Una web que parece un sistema operativo resulta memorable y permite demostrar conocimientos de diseño, programación e interacción.

Puede ser una buena elección para:

• Portfolios de desarrolladores y diseñadores.
• Páginas de músicos y artistas.
• Videojuegos promocionales.
• Proyectos educativos.
• Exposiciones digitales.
• Demostraciones técnicas.
• Entornos de administración.
• Aplicaciones empresariales con varias herramientas.

El escritorio también permite mantener abiertas varias secciones al mismo tiempo, algo útil cuando la web funciona más como una aplicación que como una colección de artículos.

Sus importantes inconvenientes

El diseño puede resultar espectacular, pero no siempre es la mejor solución.

Una página tipo escritorio obliga al visitante a descubrir cómo funciona. Si el usuario solamente quiere consultar un precio, descargar un documento o enviar un mensaje, abrir ventanas y buscar iconos puede convertirse en un obstáculo.

También plantea problemas en pantallas pequeñas. Una interfaz diseñada para monitor, teclado y ratón debe transformarse cuidadosamente para funcionar mediante controles táctiles.

Otros riesgos habituales son:

• Tiempos de carga elevados.
• Consumo excesivo de memoria.
• Mala adaptación a móviles.
• Navegación confusa.
• Problemas de accesibilidad.
• Dificultades para utilizarla con teclado o lector de pantalla.
• Contenido poco visible para los buscadores.
• Exceso de animaciones y efectos de sonido.
• Ventanas que quedan fuera de la pantalla.

La nostalgia no debe imponerse a la usabilidad.

Accesibilidad y posicionamiento SEO

Aunque el sitio tenga apariencia de escritorio, su contenido debe conservar una estructura HTML comprensible.

Los títulos deben utilizar encabezados reales, las imágenes necesitan texto alternativo y todas las aplicaciones deberían poder manejarse mediante teclado. También hay que controlar correctamente el foco cuando se abre o cierra una ventana.

Cada sección importante debería disponer de una URL propia. Si todo se carga dinámicamente en una única dirección, los buscadores pueden tener dificultades para localizar y clasificar su contenido.

Una buena solución consiste en combinar ambos modelos: ofrecer el escritorio interactivo como experiencia principal, pero mantener rutas convencionales para proyectos, contacto, información y otros contenidos esenciales.

¿Merece la pena crear una?

Depende del objetivo. Para un blog, una tienda convencional o una web corporativa probablemente resulte más práctico utilizar una navegación tradicional.

En cambio, para un portfolio creativo, un grupo musical, una demostración tecnológica o una experiencia promocional, el escritorio puede convertirse en parte del mensaje.

La clave está en que la interfaz no sea solamente decorativa. Las ventanas, iconos y aplicaciones deben ayudar a presentar el contenido y no dificultar su consulta.

Las páginas tipo escritorio ocupan un curioso punto intermedio entre web, aplicación, videojuego y sistema operativo. Bien diseñadas, transforman la visita en una experiencia memorable. Mal planteadas, pueden convertirse en un laberinto de ventanas donde encontrar cualquier información resulta innecesariamente complicado.

Fuentes y proyectos

• Hilo de referencia en Reddit
• Directorio Awesome Web Desktops
• daedalOS en GitHub
• OS.js
• WINDOWS 93
• 98.css
• XP.css
• Webamp