Sostenibilidad Digital: la tecnología detrás de este sitio

Introducción #

Para cerrar esta asignatura de Sostenibilidad Aplicada, es coherente predicar con el ejemplo: este sitio no es solo un repositorio de contenidos, sino una práctica real de eficiencia digital.

La idea clave: en lo digital, cada byte, cada consulta, cada script y cada render se traducen en consumo de energía (servidores, red y dispositivos). No se trata de “hacerlo perfecto”, sino de diseñar con criterio.

1) Arquitectura JAMstack: servir estático, calcular una vez #

Este sitio sigue una arquitectura JAMstack (JavaScript, APIs, Markup). A diferencia de un CMS clásico que genera páginas en tiempo real (y a menudo depende de base de datos), aquí las páginas se generan en build y se sirven como archivos estáticos.

• Eficiencia: menos trabajo por visita (no hay consultas a DB ni plantillas renderizadas en el servidor por cada usuario).
• Resiliencia: un HTML estático sigue funcionando aunque fallen servicios externos.
• Seguridad: reduce superficie de ataque típica de CMS dinámicos (plugins, paneles de administración, etc.).

2) Hugo: generador estático rápido (y por eso, “barato” en computación) #

Usamos Hugo, un generador estático muy rápido.

• Sostenibilidad: builds rápidos implican menos tiempo de CPU en cada despliegue.
• Rendimiento: entrega HTML “puro”, cacheable y universal.
• Mantenibilidad: el contenido y la estructura quedan versionados como código.

3) Markdown + VS Code: contenido durable, portable y ligero #

Los contenidos están escritos en Markdown (texto plano) desde Visual Studio Code.

• Durabilidad: no dependes de una base de datos ni de un panel propietario.
• Ligereza: el contenido pesa poco y viaja bien por Git.
• Trabajo profesional: el alumnado de 2º de DAW y 2º de SMR se acostumbra a flujos reales: edición, revisión, historial y despliegue.

4) Git y GitHub: control de versiones, trazabilidad y colaboración #

El sitio se mantiene con Git (y repositorio remoto en GitHub).

• Trazabilidad: puedes ver qué cambió, cuándo y por qué.
• Colaboración: facilita contribuciones con PRs y revisión.
• Eficiencia: evita duplicidades y permite iterar sin “copiar-pegar proyectos”.

5) Netlify: despliegue automático y distribución por CDN #

El sitio se despliega en Netlify.

• CDN: los archivos se sirven desde nodos cercanos al usuario, reduciendo latencia.
• Cacheabilidad: HTML/CSS/JS estáticos se cachean muy bien.
• Operación simple: para un centro educativo es ideal: menos infraestructura que administrar.

Nota: la sostenibilidad real depende de muchos factores (ubicación, mix eléctrico, cachés, dispositivo del usuario). Aun así, la estrategia general de página estática + pocos recursos suele ser una buena base.

6) IA aplicada (Copilot + GPT-5.2) como herramienta de productividad #

En la creación y mejora de contenidos y partes del sitio se ha usado IA integrada en el flujo de trabajo.

• Productividad: acelera borradores, estructura, refactor y pequeñas automatizaciones.
• Calidad: ayuda a detectar incoherencias y a mejorar consistencia.

Importante: la IA no sustituye criterio técnico ni rigor. Se usa como apoyo; el resultado se revisa y se adapta al contexto del módulo.

7) Decisiones concretas de “eficiencia digital” que aplicamos aquí #

Algunos ejemplos prácticos (útiles para DAW/SMR):

• Menos render dinámico: preferir HTML generado en build.
• Búsqueda estática: índice JSON + búsqueda en cliente (sin servidor de búsqueda dedicado).
• Paginación eliminada (cuando el volumen es pequeño): menos páginas, menos navegación artificial.
• Accesibilidad: enlace “Saltar al contenido”, foco visible y botón “Subir arriba” que aparece solo cuando hace falta.

¿Por qué esto es sostenibilidad aplicada? #

Porque la digitalización no es gratuita: infraestructura, redes, fabricación de dispositivos y energía. Diseñar bien implica:

1. Cargar más rápido (menos tiempo de CPU/GPU y menos red).
2. Consumir menos datos (mejor en conexiones lentas y dispositivos modestos).
3. Ser más seguro y mantenible, reduciendo “deuda técnica” y rehacer sistemas.

Reto para el alumnado (actividad breve) #

1. Mide el peso de una página (por ejemplo el glosario) y detecta qué recursos pesan más.
2. Pasa la URL por Website Carbon Calculator y anota el resultado.
3. Propón 2 mejoras realistas que no empeoren accesibilidad.

Si detectas algo mejorable (términos que faltan, un componente pesado, o una mejora de accesibilidad), dímelo y lo incorporamos.