Páginas web educativas

01

Antes de elegir herramienta

Una web educativa no mejora porque tenga más páginas o más efectos. Primero intento decidir quién la va a usar, para qué, qué información necesita encontrar y qué acción debe poder realizar. La herramienta viene después.

1 · Propósito

¿Para qué existe?

Portfolio, proyecto, repositorio de recursos, diario de aprendizaje, web de asignatura o producto final.

2 · Audiencia

¿Quién entra?

Alumnado, familias, compañeros, tribunal, comunidad educativa o público abierto.

3 · Arquitectura

¿Cómo se encuentra?

Pocas categorías claras, navegación coherente, títulos descriptivos y una portada que explique qué ofrece la web.

4 · Revisión

¿Es usable y accesible?

Móvil, teclado, contraste, textos alternativos, enlaces comprensibles, privacidad y permisos de publicación.

02

Cuatro rutas para crear una web

La opción con la que suelo empezar

Google Sites

Es la herramienta que más suelo recomendar cuando necesito una web sencilla, colaborativa y fácil de mantener sin programar.

Permite crear y organizar páginas, texto, imágenes y bloques de contenido.
Integra Documentos, Presentaciones, Hojas de cálculo, Formularios, gráficos, YouTube, calendarios y mapas.
Puede insertar contenido web y también bloques de HTML/CSS/JavaScript.
Admite colaboración entre editores y control del acceso al borrador o al sitio publicado.
Puede conectarse a un dominio personalizado; en cuentas de centro o trabajo puede intervenir el administrador.

Google Sites ↗Ayuda oficial ↗

Diseño y servicios integrados

Wix

Lo veo como un paso más cuando quiero mayor libertad visual o un sitio con más posibilidades integradas que Google Sites.

Editor visual y creación asistida por IA.
Alojamiento integrado.
Herramientas de negocio, SEO y analítica según producto y plan.
Dominio personalizado y determinadas funciones dependen del plan contratado.
Incluye un Accessibility Wizard para detectar y guiar correcciones, aunque Wix advierte que la herramienta no garantiza por sí sola el cumplimiento normativo.

Wix ↗Wix con IA ↗

Publicación periódica

Blogger

Blogger sigue teniendo sentido cuando el producto es realmente un blog: entradas cronológicas, noticias, diario de proyecto o reflexión continuada.

Permite crear entradas y páginas estáticas.
Puede añadir autores, administradores y lectores, con límites documentados por Google.
El blog puede ser público, privado para autores o restringido a lectores personalizados.
Admite dominio personalizado.
Es menos adecuado que Sites o Wix cuando se necesita una arquitectura visual compleja o una web muy libre.

Blogger ↗Ayuda oficial ↗

Ruta técnica · máximo control

IA + HTML + GitHub + Cloudflare Pages

Este es el camino que estoy utilizando para EDU/LAB. La IA me ayuda a generar y revisar HTML, CSS y JavaScript; después versiono el código en GitHub y lo publico con Cloudflare Pages.

ChatGPT puede generar, editar y previsualizar páginas HTML compatibles.
Claude Artifacts admite sitios HTML de una sola página y componentes interactivos.
Gemini Canvas puede crear y editar apps y código.
GitHub conserva versiones e historial.
Cloudflare Pages puede desplegar HTML estático y, con integración Git, volver a publicar automáticamente al hacer cambios.

Cloudflare Pages ↗GitHub Pages ↗

03

Comparación rápida

Necesidad	Opción	Ventaja principal	Limitación o cautela
Web de aula, proyecto o portfolio sin programar	Google Sites	Rapidez, colaboración e integración con Google Workspace.	Menos control visual y técnico que una web propia.
Diseño más personalizado y servicios integrados	Wix	Editor visual, IA y ecosistema amplio.	Funciones, dominio y capacidades avanzadas pueden depender del plan.
Diario, noticias o publicación cronológica	Blogger	Modelo de blog simple con autores, lectores y páginas.	No está pensado como constructor visual libre de sitios complejos.
Control total del código y aprendizaje técnico	IA + HTML/CSS/JS	Personalización, programación y posibilidad de crear interacciones propias.	Exige revisar código, accesibilidad, seguridad, mantenimiento y despliegue.
Publicar un sitio estático desde un repositorio	Cloudflare Pages / GitHub Pages	Despliegue web desde código versionado.	No sustituyen un backend dinámico cuando la aplicación necesita servidor, base de datos o autenticación propia.

04

Google Sites en el aula

Google Sites me funciona especialmente bien cuando la web es un contenedor de aprendizaje más que un proyecto de programación. Reduce la carga técnica y deja más espacio para trabajar estructura, contenido, comunicación y evidencias.

Portfolio

Una web por alumno o equipo

Presentación, proyectos, evidencias, reflexiones y productos finales organizados por secciones. En cuentas institucionales conviene revisar antes permisos de publicación y visibilidad.

Proyecto

Web de investigación o reto

Puede actuar como producto final de un proyecto: problema, proceso, datos, prototipo, conclusiones, bibliografía y recursos multimedia.

Asignatura

Hub de recursos

Una portada clara con unidades, materiales, formularios, documentos, vídeos y enlaces puede reducir dispersión si la arquitectura se mantiene simple.

Colaboración

Edición compartida

Google documenta edición colaborativa y diferentes controles de acceso. En entornos educativos administrados, el centro puede limitar quién edita o publica.

Integración

Contenido de Google y web

Sites puede insertar archivos de Workspace, YouTube, calendarios, mapas, páginas externas y bloques de código incrustado.

Dominio

URL propia

Los sitios publicados pueden conectarse a dominios personalizados. En cuentas de centro o empresa la configuración puede depender del administrador.

Algo que sí evaluaría. Si el alumnado tiene que demostrar competencia digital, no me quedaría en “que la web quede bonita”. Miraría arquitectura de información, selección de contenidos, autoría, accesibilidad, calidad de las fuentes, propiedad intelectual y capacidad para mantener el sitio.

05

Crear una web con IA generativa

La IA reduce la barrera inicial de programación, pero no elimina la necesidad de entender qué se está publicando. Para mí, una parte interesante del aprendizaje está precisamente en especificar, probar, depurar y mantener un producto web.

1

Especificación

Objetivo, audiencia, páginas, navegación, contenido, estilo y funciones.

2

Prototipo IA

Para una web mantenible, prefiero una estructura sencilla con `index.html`, `styles.css` y `script.js` cuando existe interacción. Reservo el HTML autocontenido para recursos portables concretos.

3

Revisión

Comprueba textos, enlaces, móvil, teclado, contraste, imágenes, errores y dependencias.

4

GitHub

Guarda el proyecto y registra los cambios mediante commits.

5

Despliegue

Publica con Cloudflare Pages o GitHub Pages y vuelve a comprobar la versión pública.

PROMPT BASE PARA UNA WEB EDUCATIVA Crea una web educativa responsive en HTML, CSS y JavaScript. Objetivo: [qué debe conseguir la web] Audiencia: [alumnado, familias, docentes...] Estructura: [inicio + secciones] Contenido: utiliza únicamente la información y fuentes que te proporciono; marca cualquier dato que requiera verificación. Diseño: claro, sobrio y coherente; evita efectos que no tengan función. Accesibilidad: navegación con teclado, foco visible, contraste suficiente, jerarquía semántica, texto alternativo cuando corresponda y no depender solo del color. Privacidad: no incluyas datos personales reales ni servicios externos innecesarios. Técnica: separa estructura, presentación y comportamiento en `index.html`, `styles.css` y `script.js` cuando haya JavaScript. Usa un único HTML autocontenido solo cuando el objetivo sea distribuir un recurso portable y esté justificado. Entrega: explica la estructura de archivos y cómo probarla antes de publicarla.

Cómo lo estoy haciendo en este portfolio. En EDU/LAB separo HTML, CSS y JavaScript para facilitar mantenimiento y reutilización. Los juegos o recursos autónomos pueden mantenerse autocontenidos cuando la facilidad de descarga y uso directo sea una ventaja didáctica.

Cloudflare Pages no es “un servidor” que administres como un VPS. Es una plataforma de despliegue y alojamiento para sitios web, especialmente adecuada para contenido estático. Puede publicar mediante integración con GitHub/GitLab o mediante Direct Upload. Cloudflare documenta que un proyecto creado con un método no puede convertirse después al otro; para cambiar de modelo hay que crear otro proyecto.

06

IA que puede ayudar a programar

Código + vista previa

ChatGPT

Los bloques de código compatibles permiten editar código y previsualizar páginas HTML dentro de ChatGPT. La disponibilidad exacta de acciones puede variar según plan, dispositivo, configuración y despliegue.

Documentación oficial ↗

Artifacts

Claude

Anthropic documenta Artifacts para fragmentos de código, sitios web HTML de una sola página y componentes React interactivos, entre otros contenidos reutilizables.

Documentación oficial ↗

Canvas

Gemini

Gemini Canvas permite colaborar para crear o editar documentos, apps, diapositivas y código. Puede utilizarse para desarrollar y revisar prototipos web.

Documentación oficial ↗

07

Publicar: Cloudflare Pages y alternativas

El flujo que uso aquí

GitHub + Cloudflare Pages

Cloudflare Pages puede conectar un repositorio de GitHub o GitLab y desplegar automáticamente cada cambio de la rama. También genera despliegues de vista previa para otras ramas y pull requests.

Git integration ↗

Sin Git

Direct Upload

Cloudflare permite subir directamente los archivos preconstruidos mediante Wrangler o arrastrar y soltar. Es una ruta más sencilla, pero separada del modelo de integración Git.

Direct Upload ↗

Alternativa GitHub

GitHub Pages

GitHub Pages permite alojar un sitio directamente desde un repositorio y admite dominios personalizados. Es otra opción útil para proyectos estáticos y portfolios técnicos.

GitHub Pages ↗

08