Laboratorio de web móvil: una aplicación web adaptable e instalable para construir en el navegador

Este laboratorio da a cada estudiante un JupyterLab propio y una pequeña aplicación web con la que trabajar: un registro de hábitos con una página, una hoja de estilos, un script, un manifiesto y un service worker. Un segundo enlace, Preview (vista previa), muestra la aplicación tal como está ahora: el estudiante edita un archivo en JupyterLab, lo guarda y recarga la vista previa en su propio navegador, con la ventana estrecha o en la vista de dispositivo del navegador, para ver cómo queda en un móvil.

No es un laboratorio de ataque. Ninguna copia tiene ruta a Internet ni a otro estudiante, así que no se puede descargar nada en ella y nada de lo que hay dentro puede llegar a nadie más.

Qué aprenden los estudiantes

Por qué una página necesita la etiqueta viewport para dibujarse al ancho correcto en un móvil, cómo una hoja de estilos primero móvil añade media queries a 600 y 900 píxeles, y por qué un botón debería medir al menos unos 44 píxeles para pulsarlo con el pulgar. Después, los dos archivos que hacen una aplicación web instalable y utilizable sin conexión: el manifiesto, con un nombre, iconos y colores, y un service worker que guarda una lista de archivos en una caché. También valoran lo que una aplicación web móvil puede y no puede hacer frente a una aplicación nativa. El laboratorio no tiene navegador propio: lo que el navegador hace luego, como ofrecer instalar la aplicación, lo ve el estudiante en el suyo. Encaja con introducciones al desarrollo web y al diseño móvil; comprueba la redacción exacta en la unidad de tu propio organismo, aquí no se cita ninguna.

Ejecútalo en el navegador

El laboratorio arranca un solo servicio, jupyter, que escribe la aplicación, dos iconos, un cuaderno y los scripts cortos en su carpeta de trabajo y lanza un pequeño servidor estático sobre la carpeta app/. Usa unos 80 MB en reposo, dentro de los 512 MB que puede tener un servicio. JupyterLab no pide token, porque la puerta de la plataforma ya sabe quién lo abre. 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 ejecutará 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 móvil: un registro de hábitos adaptable.
  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, JupyterLab y Preview. Pulsa Preview para ver la aplicación en tu navegador y estrecha la ventana. Pulsa JupyterLab y haz doble clic en start.ipynb, o pulsa «Abrir terminal» y escribe docker exec jupyter python3 steps/viewport.py para ver que se encuentra la etiqueta viewport.

Qué pedir a los estudiantes que entreguen

El archivo app/style.css, descargado desde JupyterLab con File, Download, después de llevar los botones pequeños (el botón Add, los botones de filtro y el botón redondo de «hecho») a al menos 44 píxeles, y una o dos frases sobre lo que cambiaron y cómo lo comprobaron en su propio navegador. Ejecutar steps/touch.py antes y después muestra el cambio: empieza con cuatro tamaños por debajo de 44 y una respuesta terminada no tiene ninguno. Nada se corrige automáticamente, y la frase muestra si se ha entendido. Para un trabajo más sólido, pide el background_color que falta en el manifiesto, o el archivo que el service worker lista y que no existe, con una nota sobre por qué fallaría la instalación sin él.

Una lección básica en este laboratorio

Mobile Web Basics es una lección pequeña trabajada en este laboratorio. En ella el estudiante lista la aplicación, pide tres archivos al servidor de vista previa, encuentra la etiqueta viewport, lista las media queries, cuenta los botones por debajo de 44 píxeles, comprueba el manifiesto y comprueba la lista de archivos del service worker.

Las cuentas personales gratuitas la tienen en el módulo Basics, que está en Inicio, y cada centro puede copiarla desde la carpeta Basics de la Biblioteca. Es pequeña a propósito: muestra a un docente qué es una lección trabajada 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 estándar, el 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 aplicación a partir de texto fijo al arrancar, así que cada copia es igual y no se descarga nada. Los límites son honestos: la aplicación es pequeña, en el laboratorio no hay navegador ni móvil, un navegador puede rechazar un service worker en una dirección no segura, no se puede instalar nada desde Internet y no se conserva nada al detener el laboratorio, así que el estudiante 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-mobile-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 cambiar la aplicación.
  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

¿Cómo ven los estudiantes el diseño en el móvil?
El laboratorio no tiene navegador propio. Abren el enlace Preview en su propio navegador y estrechan la ventana, o usan la vista de dispositivo del navegador si la tiene. Eso muestra el diseño. No muestra cómo se siente un pulgar ni cómo se comporta el navegador del móvil, así que un móvil real es mejor si hay uno a mano.
¿Por qué no se instala el service worker en el enlace de vista previa?
Un navegador solo permite un service worker en una dirección segura, y puede que el enlace de vista previa no cuente como tal en todos los navegadores. La aplicación funciona igualmente sin él. La consola del navegador dice si fue rechazado. El script steps/offline.py comprueba la lista de archivos en cualquier caso y muestra el que no existe.
¿Por qué no hay token ni contraseña que escribir?
A las páginas web de un laboratorio solo se llega por la puerta de la plataforma, que ya sabe quién eres y deja pasar solo a ti y al personal que enseña 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.