Práctica conjunta Aplicaciones Web y Servicios de Red en 2º SMR

Como ya os comenté por aquí, este curso era la primera vez que impartía en la etapa de Grado Medio, en el ciclo de Sistemas Microinformático y Redes (SMR), concretamente, el módulo de Servicios de Red del segundo curso. En los días previos al comienzo del curso, planificando el curso y la asignatura con mis compañeros de familia profesional de informática en el Colegio Valle del Miro, surgió la idea de colaborar y realizar prácticas conjuntas entre los módulos de Aplicaciones Web (que imparte la supercrack Marina Villarán) y Servicios de Red. En la primera evaluación en su módulo se ve todo lo que es HTML5, CSS3 y JavaScript (nociones muy básicas), y como hablábamos, a veces avanzar en todo ese aspecto de front-end sin que los alumnos vean qué ocurre después o qué hay en el back-end o en el servidor, pues se quedaba un poco cojo. Esto es algo que se ve muy bien cuando se imparten formularios HTML y al dar al botón de enviar… ¿qué es lo que pasa profe? ¿Dónde van los datos? ¿Quién procesa esos datos?… 

Aunque era la primera vez que impartía este módulo, tenía claro que cuando tocara el servidor HTTP (la Unidad 3, tras ver servicio DHCP y servicio DNS), teníamos que contestar y poner en práctica esas preguntas. Temporalmente todo cuadraba, además, justo antes de los exámenes de la primera evaluación, así que nos lanzamos a completar una actividad que fuera la «típica» aplicación web de login y registro. Efectivamente, aquellos que conocéis el ciclo de SMR sabéis que no tiene contenidos de programación ni de base de datos, pero bueno… con mucha ayuda, muchos ejemplos y mucha paciencia, los alumnos podían completar el puzzle adaptándolo a sus gustos.

Durante una semana explicamos qué era el protocolo HTTP, analizamos su funcionamiento, los tipos de mensajes que se envía entre el servidor y el cliente (cuando en un navegador se introduce una URL). Utilizamos XAMPP que previamente habían instalado con Marina. Realizamos capturas con el wireshark, vimos los GET, y también los POST. Vimos el tiempo de carga de páginas web la primera vez, cómo se van enviando primero el HTML y luego otros recursos, la importancia de la caché del navegador, etc. También identificamos cómo sin usar el HTTPS los valores de un formulario viajaban en claro y que cualquiera, con un sniffer podría capturar nuestras contraseñas.

Pero en ese ejemplo, ¿dónde iban esos datos? ¿A google? Pues claro que no. Vimos telegráficamente qué era PHP, cómo se incrustaba el script PHP en un documento HTML y cómo se vinculaban los datos de un formulario con la ejecución de un script en un servidor web. Sé que a muchos que estén leyendo esto no les sorprenderá nada, pero bueno, no es tan fácil de visualizar ni de poner en práctica para gente que no sabe ni va a ver nada de programación y cuando tampoco son contenidos obligatorios de los que se vayan a a examinar. El siguiente paso… ¿Una base de datos? ¿Creamos una tabla? ¿Arrancamos MySQL? Bien, muy fácil… actividad guiada, chicos… sigan paso a paso lo que hace el tipo de la barba que es vuestro profesor… pero paso a paso… una tabla, unas columnas, unos datos…

Y después, las instrucciones PHP para conectar con un servidor de Bases de Datos, explicar las nociones de qué es una query SQL y mostrar ejemplos de una SELECT, un INSERT y un DELETE. Con muchas piezas, los alumnos solo tenían que completarlo para hacer una aplicación web de login y alta y baja. Por supuesto, sin ver sesiones, sin hashear la contraseña, etc, etc.

Aunque algo modesto, e insisto «típico», creo que ha sido una fantástica práctica para consolidar lo aprendido en Aplicaciones Web y conocer todas las partes implicadas en el diálogo web de cliente servidor, conocer algo más sobre lenguajes de programación que podrían ver en el ciclo de grado superior de Desarrollo de Aplicaciones Web (DAW), coordinar materias, motivar más a los alumnos, etc.

Aquí un par de capturas de los alumnos que usando código CSS pro han completado mejor las aplicaciones web, incorporando la baja del usuario, por ejemplo.