Laboratorio de web en el navegador: HTML, CSS y JavaScript con vista previa en directo

Este laboratorio da a cada alumno una página web pequeña propia, un menú del día, hecha de tres archivos: index.html para lo que hay en ella, style.css para cómo se ve y app.js para lo que hace. Edita los archivos en el editor de archivos de JupyterLab y ve la página en un segundo enlace, Preview, servido desde la misma carpeta. Unos scripts cortos de Python leen los archivos e imprimen lo que contienen, así que el alumno puede comprobar una página además de escribirla.

No es un laboratorio de ataque, y no tiene Node ni ningún framework: una página son archivos sencillos y el navegador es el único entorno de ejecución. Cada copia no tiene ninguna salida a internet ni a ningún otro alumno, así que no se puede descargar nada en ella y nada de lo que hay dentro puede llegar a nadie más.

Lo que aprenden los alumnos

Qué hacen HTML, CSS y JavaScript. HTML es la estructura: los elementos, el esquema de títulos y los enlaces. CSS es el estilo: selectores y declaraciones, el modelo de caja de contenido, relleno, borde y margen, y la cascada que decide qué regla gana cuando dos llegan a un mismo elemento. JavaScript es el comportamiento: eventos como un clic o escribir, y funciones que cambian el DOM, aquí para filtrar una lista y cambiar a un tema oscuro sin ninguna biblioteca. Después, cómo comprobar una página: contar sus etiquetas, leer su esquema, encontrar enlaces que no llevan a ninguna parte y pedir la página al servidor como lo hace un navegador. Sirve para introducciones al desarrollo web y al front-end; consulta la unidad de tu propio organismo certificador para la redacción exacta, aquí no se cita ninguna.

Ejecútalo en tu navegador

El laboratorio inicia un solo servicio, jupyter, que escribe la página, un cuaderno inicial y los scripts cortos en su carpeta de trabajo, y arranca un servidor de archivos sencillo sobre la carpeta site. Desde la página del laboratorio se abren dos enlaces: JupyterLab, el banco de trabajo, y Preview, la propia página. JupyterLab no pide token, porque la puerta de la plataforma ya sabe quién lo abre. Preview muestra los archivos guardados: tras editar un archivo, el alumno lo guarda y recarga Preview. El terminal junto al laboratorio no tiene Python propio, así que llega al del laboratorio con docker exec jupyter, seguido de la orden que se ejecuta dentro.

  1. Abre la página Contenedor. Abre «Crear» en la barra y elige «Ejecutar un contenedor». Cualquiera puede abrir la página, y el laboratorio de Git y el de SQL se inician sin cuenta. Todos los demás laboratorios necesitan una cuenta gratuita: crea una, inicia sesión y pulsa «Iniciar».
  2. Busca el laboratorio. La tarjeta «Laboratorios de ejemplo» lista todos los ejemplos. Busca Web en el navegador: HTML, CSS y JavaScript.
  3. Pulsa «Iniciar». «Iniciar» lo ejecuta tal cual, con una sola pulsación. «Editar el archivo primero» abre el archivo compose para que lo cambies antes de iniciarlo.
  4. Ábrelo. En la página del laboratorio, la barra del laboratorio tiene dos enlaces. Pulsa JupyterLab, abre la carpeta site y haz doble clic en index.html; después pulsa Preview para ver la página. A continuación pulsa «Abrir terminal» y escribe docker exec jupyter python3 steps/tags.py para contar las etiquetas de la página.

Qué pedir a los alumnos que entreguen

Su propia versión de la página: los tres archivos de la carpeta site, descargados desde JupyterLab con File, Download. Después una o dos frases, con sus propias palabras, sobre un cambio que hicieron y lo que logró, por ejemplo un plato nuevo, otra gama de colores o un botón que hace otra cosa. Nada se califica automáticamente: la frase muestra si se entendió. Para un trabajo más sólido, pide que ejecuten steps/links.py y steps/outline.py sobre su página y digan qué muestra cada uno, o que añadan una regla y expliquen cuál gana y por qué.

Una lección básica sobre este laboratorio

Front-End Web Basics es una lección pequeña que se practica en este laboratorio. En ella el alumno lista los tres archivos de la página, cuenta sus etiquetas y lee su esquema, cuenta las reglas y declaraciones de la hoja de estilo, encuentra las funciones y los eventos del script y comprueba los enlaces y la respuesta del servidor de Preview. Es pequeña a propósito: muestra a un docente qué es una lección practicada en un laboratorio, y el laboratorio hace el resto. Cópiala en un módulo tuyo para cambiarla.

El código en GitHub

El archivo compose no tiene Dockerfile: ejecuta una sola imagen pública, scipy-notebook de los Jupyter Docker Stacks, fijada a una etiqueta con fecha, con su propia cuenta sin privilegios y 512 MB de memoria. La imagen tiene licencia BSD-3-Clause y no la distribuimos nosotros. El archivo escribe la página y los scripts a partir de un texto fijo al iniciarse, así que todas las copias son iguales y no se descarga nada. Los límites son honestos: la página es pequeña, no hay Node, ni framework, ni forma de traer una biblioteca de internet, así que el alumno trabaja en HTML, CSS y JavaScript sencillos, que es justo de lo que trata la lección. No se conserva nada cuando el laboratorio se detiene: el alumno descarga antes sus archivos.

Ponerlo como trabajo

Indica en la tarea qué hay que entregar.

  1. Crea el laboratorio. En tu módulo añade una tarea y elige la tarjeta «Laboratorio de contenedores», y después «En un repositorio de GitHub». Indica https://github.com/mitsurutech/lab-frontend-web con la rama main. El archivo compose es el predeterminado, compose.yaml. Haz un fork del repositorio antes si quieres modificarlo, por ejemplo para empezar con otra página.
  2. Publica y pruébalo. «Publicar» fija el commit que te mostraron, así que un cambio posterior en el repositorio no altera un laboratorio que ya has asignado. Inicia primero tu propia copia.
  3. Asígnalo. Asígnalo como cualquier tarea, con una fecha de entrega si quieres, e indica en la tarea qué hacer y qué entregar.
  4. Califica lo entregado. Abre la copia de un alumno y el trabajo que ha entregado, califícalo y devuélvelo con un motivo si necesita más.

Prueba este laboratorio, y lo que cuesta

Con una cuenta personal gratuita puedes seguir las lecciones básicas de este laboratorio, con crédito gratuito suficiente cada mes para seguir la mayoría de las lecciones y sin tarjeta. Para una clase, un centro tiene gratis sus primeros 365 días, hasta 50 alumnos, y después paga por alumno y año, con todos los laboratorios incluidos y el profesorado gratis.

Preguntas frecuentes

¿Por qué hay dos enlaces?
JupyterLab, el primero, es donde el alumno edita los archivos y usa el terminal. Preview, el segundo, es la propia página, servida desde la carpeta site, tal como la vería un visitante. Tener la página en su propia pestaña evita que quede envuelta en un editor.
Cambié un archivo y Preview no cambió. ¿Por qué?
Preview muestra los archivos guardados. Guarda el archivo en el editor y luego recarga Preview. Si sigue igual, prueba una recarga forzada, porque el navegador puede conservar una copia antigua de un archivo.
¿Pueden los alumnos usar Node, React o un paquete de internet?
No. Una copia no puede llegar a internet y la imagen no tiene Node, así que no hay nada que instalar. El laboratorio enseña los tres lenguajes sencillos sobre los que se construye todo framework. Para otras páginas de partida, haz un fork del repositorio, cambia los archivos que escribe el archivo compose y usa el fork como laboratorio.
¿Por qué no hay que escribir token ni contraseña?
A la página web de un laboratorio solo se llega por la puerta de la plataforma, que ya sabe quién eres y solo deja pasar a ti y al profesorado de tu módulo. Por eso JupyterLab se inicia sin token. No lo ejecutes así en una máquina a la que pueda llegar otra persona.