Crear una tarea de HTML, CSS y JavaScript
Una tarea web son tres archivos en lugar de uno: la página, los estilos y el script. El alumno edita cualquiera de ellos y la vista previa, junto al editor, se actualiza.
Tres paneles y una vista previa
Las pestañas son los archivos. La vista previa es la página tal como está, mostrada en un marco aislado, así que un script con errores rompe la vista previa y nada más.
No hay que arrancar ningún servidor ni guardar ningún archivo en el escritorio. Así te ahorras la primera clase de cualquier unidad sobre la web, que suele consistir en explicar a treinta personas dónde ha ido a parar su archivo.
La página se construye y se ejecuta en el propio navegador del alumno, así que una tarea web no tiene botón «Ejecutar», ni cola, ni tiempo de ejecución que ajustar: la vista previa es la ejecución, y sigue lo que escribes. Un documento HTML completo pegado en el panel de HTML se usa tal cual, con los estilos y el script metidos dentro, en lugar de envolverlo en una segunda página.
Lo que preparas tú y lo que entregan ellos
Tú escribes los tres archivos de partida, y lo que dejes en ellos es con lo que empieza cada alumno: una página sin estilos, una hoja de estilos con un comentario donde va la regla, o los tres vacíos.
A una tarea web no se le puede añadir un cuarto archivo, porque sus tres paneles son lo que la define. Es a propósito: una tarea cuya forma puede cambiar es una tarea sobre la que quien califica tiene que hacer suposiciones.
Hay una variante con TypeScript, Web (TS), con los mismos tres paneles y el script en TypeScript. Se compila en la pestaña mientras escribes, y un error de tipos nunca bloquea la vista previa, porque no hay un «Ejecutar» que lo rechace.
En una lección
Un bloque de código Web o Web (TS) en una lección tiene las mismas tres pestañas y la misma vista previa, así que la clase puede cambiar una página sin salir de la lección. Lo que escribe en el bloque es el punto de partida de cada alumno, y los cambios de cada uno se guardan en su propia copia: la suya nunca se mueve.
Marque «Permitir que los alumnos modifiquen esta página y la vean» en el bloque, opción activada al crear el bloque. Si la deja desactivada, la página se muestra como código para leer, como antes. No hay botón «Ejecutar» ni cuadro de entrada, porque una página no los tiene: la vista previa es su ejecución.
Preguntas frecuentes
- ¿Pueden usar un framework?
- Es HTML, CSS y JavaScript sin más, que es lo que piden los temarios. Hay una variante con TypeScript para una clase más avanzada.
- ¿La vista previa ejecuta su JavaScript?
- Sí, en un marco aislado que no puede leer las cookies ni los datos guardados del sitio, así que un bucle infinito les cuesta la vista previa y nada más.