Si trabajas en desarrollo web, es posible que hayas intentado enseñar cómo hacer una página web a algún conocido, o puede que incluso te hayas planteado impartir una asignatura de manera más formal. Yo llevo unos años dando clase en cursos presenciales y online, y me gustaría compartir algunas cosas que he aprendido en este tiempo.
Me subo al estrado, ajusto las luces y enchufo el ordenador al proyector con un conector VGA. Maldigo los nervios del primer día y el calor y la humedad de Barcelona. Miro a los 32 asistentes y les digo «bienvenidos a la primera clase de Introducción al diseño web». Es jueves, 12 de septiembre, y acaba de empezar mi asignatura en el tercer curso de un grado en marketing. De aquí a navidades les explicaré cómo funcionan, cómo se construyen y cómo se publican los sitios web. Y aunque tienen una actitud positiva, no siempre tienen un interés activo –les parece más una obligación para pasar de curso que algo realmente importante en su futuro–. Yo haré lo posible para que entiendan mejor cómo funciona la industria y que así puedan contratar profesionales, planificar campañas e incluso publicar sus propias páginas.
Empecé a trabajar en diseño web a mediados de 2005. Por aquellas fechas nuestros problemas en el desarrollo frontend –entonces lo llamábamos maquetación– se reducían a Internet Explorer 6: no teníamos border-radius, el canal alfa de los PNG no funcionaba bien… retos que superábamos con hacks y scripts. Nuestros layouts tenían anchuras fijas –intentando que las páginas web se vieran bien en unos 960 píxeles de ancho– y ya habíamos dejado de usar tablas para nuestras estructuras de columnas; ahora usábamos floats, que combinábamos con un truco de CSS llamado clearfix para contenerlos. Todo este conocimiento está obsoleto y no hace falta transmitirlo a las nuevas generaciones. Pero… ¿qué les enseñamos?
Presentando la asignatura
Esta asignatura tiene varios nombres; a veces es parte de unos estudios de diseño gráfico, de marketing, o incluso de un máster. A veces es sencillamente un curso online en vídeo. Pero siempre tiene como objetivo común aprender a crear páginas web.
Como no es más que una asignatura dentro de un programa de estudios, no hablamos de formar desarrolladores frontend completos, sino de crear una base sobre la que el alumnado podría continuarse formando, con otros cursos o mediante autoaprendizaje. A veces, algunas alumnas y alumnos pueden acabar en esta industria —más probable cuando la asignatura es parte de unos estudios de diseño gráfico—, pero otras veces, sencillamente les dará cierta autonomía y capacidades en puestos de trabajo no directamente relacionados con la web.
El problema principal a la hora de explicar la web actual es la cantidad y complejidad de herramientas que empleamos hoy en día para publicar. Lenguajes deliberadamente simples como HTML y CSS, que se pueden enseñar como parte de una alfabetización tecnológica de la misma forma que se enseñan Word o Excel, quedan oscurecidos por preprocesadores, sistemas de automatización de tareas y frameworks de publicación basados en JavaScript. Y por mucho que me encantaría empezar explicando frameworks como React o Vue, en el mejor de los casos solo tendré 60 horas, repartidas a lo largo de un curso, en sesiones de 2 horas a la semana. Así que empezaré por el principio.
Los contenidos
Para poder explicar bien la web hay que hablar un poco de su historia, cómo se creó, y cómo ha ido evolucionando: un lenguaje de marcado basado en texto plano para vincular documentos electrónicos entre sí, al que se le incorpora un lenguaje de programación —JavaScript— para extender sus capacidades interactivas, y al que posteriormente se le incorpora un lenguaje de presentación —CSS— para facilitar la abstracción y reutilización de estilos. Y después explicaré cómo un navegador accede a una página web: las IP, los dominios, el hosting, el renderizado, y un archivo de texto que se descarga inicialmente y, a partir del cual, se va componiendo todo.
Superada la introducción, empezaremos a escribir HTML; primero con un editor online —Codepen o JSBin— para tener resultados en la misma pantalla y simplificar la escritura; y después con un editor instalable —VS Code— y una estructura web predefinida —un index.html con su CSS vinculada—, para reducir errores con las etiquetas de documento —los habrá igualmente—. La sintaxis del HTML es muy simple; y solo trabajaremos un pequeño conjunto de etiquetas de bloque y de línea, las justas para permitirnos llegar a crear una página web. En algún momento del curso, más avanzado, hablaré de las etiquetas de vídeo, audio y los iframes.
Las hojas de estilo ocupan la mayor parte del curso, ya que cada vez tienen más propiedades —cuando se hayan repuesto del susto del diseño responsive y las alineaciones con flexbox, les empezaré a explicar CSS grid—. Por algunas propiedades, aunque me dé pena, conviene pasar rápidamente: explicar los degradados básicos, dar enlaces para profundizar más, y siguiente propiedad. Es una carrera contra el calendario para conseguir enseñar más en el menor tiempo posible. Y aunque Sass y otros preprocesadores de CSS son herramientas muy apreciadas en el frontend, en este caso son una capa de complejidad adicional. Para incorporar esta mentalidad de desarrollo moderno/componentizado usaremos las variables de CSS —es decir, las custom properties— y los @import nativos. Emplear frameworks CSS como Bootstrap puede ser interesante a nivel de dar mayor autonomía personal, pero no conviene introducirlos muy al principio, sin una buena base, o crearemos una dependencia excesiva; y además —en el momento en el que escribo este post— entran en conflicto con enseñar herramientas que cambian mucho el paradigma del layout, como CSS grid.
Para cuando lleguemos a JavaScript, el curso estará bastante avanzado y no habrá tiempo suficiente para crear una base sólida de programación: el funcionamiento de un script, las variables, condicionales, loops… Por lo que haré una introducción, explicando los elementos fundamentales, y les facilitaré un conjunto de funciones prefabricadas en las que solo tendrán que cambiar unas pocas líneas para crear una navegación desplegable, una cabecera sincronizada con el scroll o unas pestañas. Y aunque no profundicemos, hablaré brevemente de jQuery, que no es la mejor herramienta para aprender JS, pero sí que da mucha autonomía a la hora de incorporar, por ejemplo, un plugin de galería.
Los sistemas de templating mediante generadores de HTML estático son muy tentadores de utilizar –Hugo, 11ty, Middleman…–, pero incorporan más capas de complejidad y un mínimo uso de la terminal, por lo que solo los veremos si el ritmo de la clase es bueno. La publicación, por otro lado, resulta bastante sencilla con una cuenta de GitHub y servicios como Netlify; y la explicación del funcionamiento de Git se puede abreviar bastante gracias a interfaces gráficas como GitHub Desktop.
Descubriendo al alumnado
La mayoría de mis alumnas y alumnos está entorno a los 19-20 años, es decir, generación Z. El hecho de que sean nativos digitales no implica que tengan un conocimiento profundo del funcionamiento de la tecnología, sencillamente que los aparatos táctiles que se conectan a internet han estado ahí toda la vida. La mente hiperconectada implica menor atención continuada y necesidad de estimulación más frecuente, por lo que exige un cambio en los formatos de enseñanza —vídeos, gráficos y otros elementos interactivos de soporte— y explicaciones orientadas a resultados rápidos; se recibe mejor el plantear un problema –cómo resolver una cuestión concreta de diseño– y luego estudiar las propiedades CSS necesarias para resolverlo, que explicar la teoría y después las posibles aplicaciones. Pero esta no es una mente exclusivamente generacional —yo como millenial también la sufro—; esta mente de atención reducida y lectura no lineal es la que nos ha dejado el uso continuado de internet, como explica Nicholas Carr en su fantástico libro The Shallows. Nos puede parecer mejor o peor, pero lo importante aquí es adaptarse a estas nuevas circunstancias.
En todas mis clases, los y las estudiantes sacan fotografías del código, y en ocasiones, incluso graban vídeos mientras hago alguna explicación. Y poco a poco, mis apuntes han ido evolucionando hacia presentaciones interactivas con bastante texto y codepens incrustados que pueden revisar una y otra vez a su ritmo. Estoy considerando grabar vídeos en un futuro, ya que durante la clase, repetir explicaciones una y otra vez tiene menos valor que la asistencia personalizada. Al principio les cuesta mucho encontrar los pequeños errores de sintaxis —etiquetas mal cerradas, una letra de más en una propiedad—; el código es el peor enemigo de la dislexia. En general, hay que estar preparado para explicar las cosas poco a poco, revisar uno por uno y hacer sesiones de repaso frecuentes. El objetivo fundamental es conseguir que pierdan el miedo al código y que no se bloqueen ante el editor. Y a esto se llega dedicando mucho tiempo a cada uno, repitiendo las cosas las veces que hagan falta y sabiendo dónde recortar tu temario para que todos lleguen a unos mínimos conocimientos aceptables.
Más allá de la asignatura
Cuando enseñas una asignatura así, en unos estudios que no son directamente sobre el desarrollo frontend, deseas secretamente que alguno de tus alumnos se dedique finalmente a la web. Y la mayoría de ellos desean secretamente que la asignatura se acabe rápido y que no haya más asignaturas «de programación» el curso que viene. Pero, a veces, sí que hay personas a las que les interesa de verdad: durante los dos últimos años he estado mentorizando a algunos ex-alumnos míos, resolviendo dudas y enseñándoles materia que va mucho más allá de lo que vimos en su día; y poco a poco se van incorporando como profesionales en la industria de la web.
Espero que este post te haya animado a enseñar a hacer páginas web, o si ya lo haces, te haya aportado alguna idea. Y si tienes tus propias lecciones aprendidas, me encantaría seguir la conversación por twitter. Mientras tanto, voy a revisarme la clase de la semana que viene…