El año 2015, fue para mi un gran año de enseñanza y aprendizaje. Desde el mes de Marzo, tuve la oportunidad de dictar el curso de Diseño y Programación de Páginas Web, como parte de la rama de Educación para el Trabajo (También conocido como "Formación Laboral") en el Colegio América del Callao.
Recordando a grandes maestros como Daniel Pacheco, Jose Holguín y Mark Falcón, entre otros, decidí dar mi mejor esfuerzo por copiar sus técnicas pedagógicas y mejorarlas.
El reto:
Modificar la curricula de años anteriores. Adaptarla a los requerimientos actuales orientando mis indicadores a los siguientes temas:
-
Primer Bimestre - Conceptos Básicos para la creación de Páginas Web
-
Segundo Bimestre - Código HTML5
-
Tercer Bimestre - Código CSS3
-
Cuarto Bimestre - Proyecto Web
Primer Bimestre - Conceptos básicos para la creación de Páginas Web
Probablemente el bimestre con más contenido teórico para mis alumnos. Muchos de ellos, al inicio ya me reclamaban para programar de una vez, sin embargo opté por distribuir las sesiones del bimestre para definir claramente los conceptos a tener en cuenta para construir una excelente página web.
Asimismo decidí reforzar sus conocimientos, analizando y profundizando el trabajo colaborativo en línea utilizando Google Drive. Elaboré un libro de clase virtual, y un documento por alumno, en donde cada uno debía llenar semanalmente sus avances.
Igualmente les enseñé como buscar información específica en el Buscador de Google, utilizando el sistema Booleano.
Segundo Bimestre - Código HTML5 (Contenido)
Respondiendo a la creciente solicitud de mis alumnos, durante el segundo bimestre, los introduje en el mundo de la programación de páginas web, utilizando HTML5.
Sesión tras sesión fuimos aprendiendo las diversas etiquetas básicas y avanzadas, utilizando un editor de texto: el Bloc de notas.
Debo confesar que al inicio les costó a mis alumnos adaptarse a la dinámica de prueba y error durante la programación, sin embargo gracias a su perseverancia, la gran mayoría pudo, no sólo conocer las etiquetas sino también entender en que momento debían utilizarlas. El conocimiento de este lenguaje era pre-requisito de lo que vendría más adelante, el código CSS.
También, en este bimestre, decidí aplicar varias técnicas de Ludificación, como los puntos, tablas de clasificación y desafíos, lo que contribuyó al rápido desarrollo de las sesiones, (descubrí también que todos mis alumnos, sin excepción, son extremadamente competitivos).
Tercer Bimestre - Código CSS3 (Apariencia)
Para mis alumnos, este bimestre significó un respiro, depués de conocer las múltiples etiquetas del lenguaje HTML5.
Particularmente encontré que aquellos que tenian habilidades en el Diseño, les agradó aprender las Hojas de Estilo en Cascada (CSS3). Así como el concepto del Modelo de Caja en CSS.
Los trabajos del bimestre consistían en modificar la apariencia (color, tipografía, distribución), de las páginas web, creadas en el segundo bimestre.
Como innovación, decidí incorporar la metodología del Aula Invertida (Flipped Classroom), creando videos para que mis alumnos desde sus casas puedan ir avanzando las sesiones, permitiéndome concentrarme en aquellos alumnos que demoraban o tenían dificultad.
Inesperadamente, también me sirvió para que los alumnos que faltaban a clases por motivos de salud o porque se encontraban fuera del país, puedan seguir la programación de sesiones establecida.
Cuarto Bimestre - Proyecto Web
Este bimestre, fue particularmente exigente, debido al recorte de sesiones que planteó el Ministerio de Educación a causa del Fenómeno del niño 2015, es por ello que cambié la mecánica de trabajo.
Para ello utilicé técnicas del "Aprendizaje basado en Proyectos", el cual creo firmemente que si funciona y que es el camino que todo docente debe seguir.
En el ánimo de que la mayor cantidad de mis estudiantes lograra una nota aprobatoria, decidí crear grupos de no más de cinco integrantes, en un ratio de 4:1 , osea (4 alumnos con buena nota, 1 alumno con baja nota). Adicionalmente, establecí los roles de trabajo DISEÑADORES quienes supervisan los Colores, Logos, Diseños, Tipografía e Imágenes, y DESARROLLADORES quienes supervisan la Estructura, Contenido, Navegación, enlaces, utilizando Código HTML5 y CSS.
La experiencia fue interesante puesto que ellos distribuyeron las responsabilidades en base a las fortalezas de cada integrante.
En un segundo momento, a través de un sorteo designé las diversas empresas a las cuales ellos desarrollarían una "Página web principal" y una página "Acerca de".
EMPRESAS A DESARROLLAR WEB
- Restaurante especializado en comida (criolla, mexicana, italiana, etc.)
- Empresa minera especializada en la extracción de (oro ó plata.)
- Fabricante exportador de ropa de (verano ó invierno), para (niños, jóvenes ó adultos)
- Artista o grupo musical (Genero a elegir)
- Canal de televisión peruano orientado a la producción de material propio (Programa Noticieros, Novelas, Magazines, Entrevistas, Ranking musical, etc.)
- Desarrollador de Videojuegos multiconsola.
- Instituto especializado en la enseñanza online de herramientas de Producción multimedia. (Adobe, 3d Studio, AutoCad, Maya, etc)
A continuación, en los documentos en línea que yo previamente habia creado, cada grupo debía crear y completar la siguiente información:
Luego de que el material creado contara con mi aprobación, mis estudiantes debían distribuir el contenido en un bosquejo impreso de 2 diseños que seleccioné.
Sólo con el documento en línea y el bosquejo impreso completo, es que podían iniciar la modificación de la plantilla que les presenté, es en esta parte del proceso, en donde ellos debían aplicar lo aprendido en bimestres anteriores.
Desde mi perspectiva, el curso de Educación para el trabajo, no sólo debe brindarle las herramientas técnicas para el desarrollo de productos, sino tambien debe desarrollar las competencias de promocionar y vender lo creado, es por ello que dediqué 1 sesión exclusivamente para tratar este tema:
LOS 13 ERRORES QUE LOS DISEÑADORES COMENTEN AL PRESENTAR SU PRODUCTO A UN CLIENTE.
Y la presentación que utilicé: (Créditos Mike Monteiro, Mule Design, Adobe MAX 2015)
La nota final del curso, la determinaba, en base a una exposición en la que cada grupo debía presentar y convencer al Gerente de la Empresa (YO), a pagar el 50% restante del monto pactado. (En este caso, la nota del curso).
A continuación les animo a visitar y compartir, las páginas modificadas por ellos mismos:
3ºA
Grupo Alpha - Kontrol TV - Página Principal - Página Acerca de
Grupo Bravo - Drawing Graphics - Página Principal - Página Acerca de
Grupo Charlie - Bohème - Página Principal - Página Acerca de
Grupo Delta - Weak Signal Games - Página Principal - Página Acerca de
Grupo Echo - Reggdope - Página Principal - Página Acerca de
Grupo Foxtrot - Silver Surface - Página Principal - Página Acerca de
Grupo Golf - Novvah - Página Principal - Página Acerca de
3ºB
Grupo Alpha - Media Learn Online - Página Principal - Página Acerca de
Grupo Bravo - Kappa - Página Principal - Página Acerca de
Grupo Charlie - Teve+ - Página Principal - Página Acerca de
Grupo Delta - Game U World - Página Principal - Página Acerca de
Grupo Echo - La Criolla - Página Principal - Página Acerca de
Grupo Foxtrot -Com. Min. de Yanaoca- Página Principal - Página Acerca de
Grupo Golf - FIM - Página Principal - Página Acerca de
3ºC
Grupo Alpha - Hot Chicken Nuggets - Página Principal - Página Acerca de
Grupo Bravo - Over Game - Página Principal - Página Acerca de
Grupo Charlie - Nazca - Página Principal - Página Acerca de
Grupo Delta - Toronto Export - Página Principal - Página Acerca de
Grupo Echo - The Silver Pickaxe - Página Principal - Página Acerca de
Grupo Foxtrot - Tradizione e Sapore - Página Principal - Página Acerca de
Grupo Golf - Learnapp - Página Principal - Página Acerca de
4ºA
Grupo Alpha - Exod-ius - Página Principal - Página Acerca de
Grupo Bravo - Muzikë Records - Página Principal - Página Acerca de
Grupo Charlie - La vie de la mode - Página Principal - Página Acerca de
Grupo Delta - JAMV - Página Principal - Página Acerca de
Grupo Echo - Glossarium International - Página Principal - Página Acerca de
Grupo Foxtrot - Callao Mining Corp. - Página Principal - Página Acerca de
Grupo Golf - Dejavú - Página Principal - Página Acerca de
4ºB
Grupo Alpha - Qumbia - Página Principal - Página Acerca de
Grupo Bravo - Pixels&Media - Página Principal - Página Acerca de
Grupo Charlie - Express News - Página Principal - Página Acerca de
Grupo Delta - Galilea's Cofeccions - Página Principal - Página Acerca de
Grupo Echo - Blanc Bleu Lumière - Página Principal - Página Acerca de
Grupo Foxtrot - Gold Ford - Página Principal - Página Acerca de
Grupo Golf - The Club - Página Principal - Página Acerca de
4ºC
Grupo Alpha - Area 51 - Página Principal - Página Acerca de
Grupo Bravo - TeleBeta - Página Principal - Página Acerca de
Grupo Charlie - Goman - Página Principal - Página Acerca de
Grupo Delta - Icam - Página Principal - Página Acerca de
Grupo Echo - Maroon 5 - Página Principal - Página Acerca de
Grupo Foxtrot - La Gran Sazón - Página Principal - Página Acerca de
Grupo Golf - Minería Tumi - Página Principal - Página Acerca de
