Workshop y Stations
TeachFORGE.ai
Workshop / HTML / CSS / JS
HTML / CSS / JS Station
Crea piezas web en directo en un espacio de autoría multipanel — con etapas build-along, variables paramétricas y exportación HTML independiente cuando necesitas la página fuera de TeachForge.
La IA puede redactar. Tú decides lo que ve la clase.
Qué es HTML / CSS / JS
HTML / CSS / JS es una Station de autoría web multipanel. Escribes marcado, estilos y scripts lado a lado, previsualizas la página en un iframe aislado y — cuando lo necesitas — exportas un archivo HTML independiente que puedes usar fuera de TeachForge.
Importa en la enseñanza porque las habilidades web tienen sentido cuando el alumnado ve el resultado de inmediato. Cambia un estilo, avanza una etapa build-along o demuestra una pequeña página interactiva — en directo, sin desplegar nada.
Por qué los docentes usan HTML / CSS / JS
Demos web en directo
Muestra HTML, CSS y JavaScript comportándose juntos en tiempo real.
Lecciones build-along
Captura etapas y preséntalas paso a paso para que la clase siga la construcción.
Temas paramétricos
Impulsa colores y variables con controles en lugar de buscar a mano cada valor CSS.
Materiales independientes
Exporta un archivo HTML para usarlo fuera de la Station.
En TeachForge, HTML / CSS / JS es una Station del Workshop — pensada para páginas didácticas, no solo para fragmentos de código rápidos.
Dentro de la HTML / CSS / JS Station
Como el resto del Workshop, tienes un ritmo de autoría familiar — con tres paneles en lugar de uno.
- Editores HTML, CSS y JS con cambio rápido de panel
- Actualización Live o Manual en una vista previa iframe aislada
- Etapas build-along — captura, paso y modo Present
- Variables paramétricas para controles reutilizables de tema y valores
- Marcos de vista previa por dispositivo y bibliotecas opcionales como KaTeX
- Exportación HTML independiente, JSON avanzado, compartir, incrustar y enviar al Whiteboard
Cómo los paneles se convierten en página
Parte de una plantilla o edita los tres paneles
Añade etapas y variables paramétricas cuando la lección las necesite.
Ejecuta la vista previa Live o Manual
El iframe aislado muestra la página como la encontraría el alumnado.
Presenta etapas, exporta o envíala en directo
Lleva el resultado a la pizarra, a una pregunta o fuera como HTML independiente.
Una página. Todas sus versiones.
Esta Station admite variables paramétricas y etapas build-along: mantén la estructura de la página, varía el tema y revela la construcción en orden — en lugar de mantener doce archivos HTML ligeramente distintos.
Cámbialo mientras enseñas
Ajusta valores paramétricos o pasa a la siguiente etapa en modo Present.
Mantén la estructura, varía el tema
El mismo paquete de página puede mostrar mañana otro acento, conjunto de datos o dificultad.
Enseña la construcción, no solo el resultado
Las etapas permiten a la clase ver cómo se construye la página.
Mantente cerca de la evaluación
Guarda el paquete JSON portable y reutilízalo en lecciones o labs posteriores.
¿Necesitas un fragmento Run-and-console rápido en su lugar? Code Sandbox es la Station hermana para eso. HTML / CSS / JS es para páginas autoradas con etapas y exportación.
Páginas listas de las que partir
Abre una plantilla y adáptala a tu lección:
| Área | Qué puedes abrir |
|---|---|
| Fundamentos | En blanco; Tarjeta de perfil; Patio Flexbox |
| Build-along | Etapas de botón; Selector de tema de color |
| Interactivo | Animación Canvas; UI de quiz; Tabla de datos |
Ayuda de IA, a tu manera
¿Necesitas un primer borrador? Usa la IA como asistente — luego revisa, edita y aprueba antes de que llegue al alumnado.
Copiar el prompt
Genera un prompt listo y pégalo en la herramienta de chat que ya usas.
Usa tu propia GPU
Conecta un endpoint de modelo local en tus ajustes y genera en hardware que controlas.
Usa tu propia clave API
Añade la clave de tu proveedor en ajustes, elige el modelo y genera con tu propia cuenta.
La IA puede equivocarse. Por eso precisamente un docente permanece en el bucle.
Lleva la página allí donde ocurre la enseñanza
- Whiteboard — ponlo en la pizarra en directo y ajústalo delante de la clase
- Quest Ladder — introdúcelo en preguntas y explicaciones
- Virtual Lab — reutilízalo en trabajo de lab interactivo
- Comunidad — comparte lo que has creado y parte de lo que otros educadores han compartido