Descripción una Unidad del Curso y Matriz TIM con una mirada de posibilidades pedagógicas, didácticas & tecnológicas.

1. Diseño de experiencias de aprendizaje
mediadas con las TIC II
2022-II
Estudiante: Johan Alberto Robles Solano
Descripción de la Unidad 1 - Curso Programación para Web
NOMBRE DEL CURSO PROGRAMACIÓN PARA WEB
UNIDAD 1 Introducción a la Web (HTML y CSS)
Contexto pedagógico
El curso de PROGRAMACIÓN PARA WEB, hace parte del 7º semestre del plan de estudio del programa de
pregrado de Ingeniería de Sistemas en la Universidad del Magdalena, que incluye varias actividades
prácticas de programación en el mundo de la web, basadas en fortalecer el perfil profesional y laboral
como desarrollador de productos relacionados con el análisis, diseño e implementación de software.
Actualmente oriento este curso a un grupo de 27 estudiantes, la mayoría de ellos son de la ciudad de
Santa Marta y otros de municipios aledaños como Ciénaga, Zona bananera y Fundación. Se trabaja bajo la
modalidad blearning, en el que se combina el e-learning (encuentros remotos tanto sincrónicos y
asincrónicos) con encuentros presenciales (sincrónicos) tomando las ventajas de ambos tipos de
aprendizajes. Se mantiene una programación de actividades con encuentros de clases de 4 horas
semanales, de las cuales 2 horas son presenciales y 2 horas de virtuales, en las que se utiliza la plataforma
de Microsoft Teams y el Tablero miro.
La unidad seleccionada corresponde a la primera del contenido de aprendizaje del curso, en la que se
realiza la introducción a la web, tratando la compresión de los lenguajes básicos para la creación de página
web y la conformación de equipos para la gestión de un proyecto que iniciaran como “Diseño de una
Página Web para la Promoción de un Producto Local” utilizando la estrategia de aprendizaje basado en
proyecto. En la unidad 1 se abordará la temática de Introducción al HTML y CSS para una duración de 5
semanas.
Saberes (conocer, hacer, ser)
Saber conocer Saber hacer Saber ser
§ Comprender la estructura semántica del
lenguaje de marcado de hipertexto
(HTML5) para creación de páginas web.
§ Comprender la sintaxis y la aplicabilidad
de las hojas de estilo en cascada (CSS3)
para desarrollo de páginas web.
§ Conocer principios de usabilidad para
creación de interfaces intuitivas en
entornos web.
§ Diseñar páginas web con la
estructura semántica y hojas de
estilos, aplicando los principios de
usabilidad y herramientas TIC para
creación y edición.
§ Aplicar metodología para el trabajo
colaborativo y gestión de proyecto
mediadas por las TIC.
§ Tener un comportamiento positivo, seguro,
legal y ético al usar tecnologías en el
desarrollo para la web.
§ Ser capaz de tomar decisiones responsables en
la participación del trabajo en colaborativo.
Interacciones (actividades)
• Act. 1. Presentación e identificación estudiantes (Registrar nombre, foto en tablero miro): Actividad
inicial con acceso al tablero de miro, donde hacen un reconocimiento para la utilización de este recurso
y de los compañeros de grupo. Allí colocan su nombre y fotografía dentro del recurso disponible en el

2. Diseño de experiencias de aprendizaje
mediadas con las TIC II
2022-II
Estudiante: Johan Alberto Robles Solano
tablero.
• Act. 2. Exploración de conocimientos previos en HTML, CSS y Gestion de Proyectos (Cuestionario
Kahoot)
En esta actividad responden un cuestionarios para identificar saberes previos en HTML, CSS y
experiencias en proyectos con estos lenguajes.
• Act. 3. Lectura en Libro y Tutorial HTML y CSS (Libro Uniwebsidad, Tutorial W3cschool).
Realizan un recorrido por algunos temas del tutorial HTML y CSS. Realizan talleres propuesto del
tutorial.
• Act. 4 Taller de HTML (Creación de un formatos dado en html)
Se les pide diseñar en HTML un formato de Lista de Asistencia como página web.
• Act. 5. Taller de CSS (Creación de un formatos mejorados con html+css)
Se les pide diseñar en HTML+CSS un formato de Lista de Asistencia como página web versión
mejora y visualmente más intuitiva.
• Act. 6. Quiz de Conocimientos HTML y CSS
Realizan un examen para valorar los conceptos aplicados con HTML y CSS
• Act. 7. Lluvia de ideas (Formato de punto de vista)
Actividad para aportar ideas para proyecto de Diseño de Pagina Web para promocionar y servicio
local.
• Act. 8. Socialización de Ideas y selección de proyecto (Comparten en miro)
Socialización de las ideas propuestas en el Formato de Puntos de Vistas.
• Act. 9. Avances Tablero Gestión de Proyectos (Tablero en Trello o parecida tablero kanban )
Presentación de informe de acuerdo a planeación según lo registrado en tablero con método
Kanban para gestión del proyecto.
• Act. 10. Desarrollo de Prototipo (Presentación del Sitio – frontend)
Publicación y Socialización del prototipo con el diseño del frontend del sitio web propuesto.
Espacio/tiempo
Unidad 1: 5 Semanas, con encuentros a nivel presencial y virtual.
Tiempo: 4 horas / semana ( 2 horas presenciales y 2 horas virtuales).
Los encuentros presenciales son dados en una sala de computo dentro del Laboratorio de Tecnología de la
Información del programa de ingeniería de sistemas de la Universidad del Magdalena, una sala que cuenta,
con el equipo docente, videobeams, 30 computadores para estudiantes, con los recursos de software
necesarios para las actividades y acceso a Internet.
Y los encuentros virtuales, se llevan a cabo en el LMS (sistema de gestión de aprendizaje) con la
herramienta Microsoft Teams, con programaciones de sesiones agendadas para reuniones con
videollamadas y con materiales con acceso asincrónico, que incluye los materiales de las clases,
grabaciones y asignación de tareas.
Recursos
• Computadores con Acceso a Internet

3. Diseño de experiencias de aprendizaje
mediadas con las TIC II
2022-II
Estudiante: Johan Alberto Robles Solano
• Navegadores (Chrome, Firefox, Edge)
• Editores para codigo (HTML, CSS y JS) Visual Studio Code.
• Videobeams
• Microsoft Teams
• Tablero Miro (http://miro.com)
• Cuestionario Kahoot
• Tutoriales HTML y CSS (https://www.w3schools.com/html/default.asp)
• Libros HTML y CSS (https://uniwebsidad.com)
• Lecturas, Talleres y Rúbricas (Materiales de la clase desde Teams)
• Tablero Trello
Evaluación
Se evalua de manera continua e integral, en cada momento y situación,
considerando una evaluación inicial para detectar los conocimientos previos de los estudiantes, sus intereses y
motivaciones respecto a la asignatura en general y respecto a los temas de la unidad;
También una evaluación formativa, a lo largo del proceso de aprendizaje, de manera grupal e individual, atendiendo las
necesidades que en dado caso pueda realizar ajustes en la programación con respectos al grupo completo o con respecto
a los alumnos individualmente; además de propiciar la autoevaluación formativa integrada en el proceso de aprendizaje;
Finalmente, recopilar qué puntos han conseguido de las intenciones educativas a traves del diseño de un prototipo del
sitio web que se habían propuesto y valorar los resultados del aprendizaje, que se propicie la reflexión de los resultados
alcanzados y aspectos por mejorar, que implique al alumno el proceso de autoevaluación, que le pueda ayudar a dar una
orientación académica y profesional, en la medida de lo posible.
Evaluación Diagnóstica
Mecanismo
Objetivo del Mecanismo
Cuestionario
Preguntas exploratorias para ser compartidas sus experiencias
sobre los temas a tratar.
Tiene como objetivo explorar y analizar los conocimientos
con que vienen los estudiantes con los temas a tratar
(protocolos de Internet, diseño de páginas web, lenguajes
del lado del frontend: HTML, CSS y JS, gestión de
proyectos). Además de explorar cuáles han sido sus
experiencias con el diseño de páginas web con alguno de
estos lenguajes.
Evaluación Formativa
Mecanismo Objetivo del Mecanismo
Portafolio de actividades
Colección de actividades y sus rúbricas estarán publicadas en el
LMS de Teams .
Teniendo en cuenta la intención de la evaluación
formativa, el objetivo de este mecanismo es reflejar la
historia de los esfuerzos de los estudiantes, el reporte
de sus procesos y sus avances. Observando como una

4. Diseño de experiencias de aprendizaje
mediadas con las TIC II
2022-II
Estudiante: Johan Alberto Robles Solano
bitácora sus productos, sus diseños y el resultado de sus
tareas. Tanto el estudiante, como yo podemos observar
esa evolución, convirtiéndose en una herramienta
esencial para el aprendizaje, favoreciendo la autonomía,
la autenticidad y la responsabilidad.
Evaluación Formativa/Sumativa
Mecanismo
Objetivo del Mecanismo
Prototipo (Aplicación teoria/práctica)
Prototipo web que condensa los conocimientos y experiencias
adquiridas a lo largo de la unidad.
El objetivo de este mecanismo es demostrar que el
estudiante adquirió las habilidades y su transferencia a
solución de problemas haciendo uso del diseño y
programación para web, a través de creación de
prototipo.
De igual manera, por medio socialización del prototipo
se podrá evidenciar que el estudiante adquirió los
conocimiento desarrollando soluciones informáticas en
ambiente web.

5. Diseño de experiencias de aprendizaje
mediadas con las TIC II
2022-II
Estudiante: Johan Alberto Robles Solano
Matriz de Integración de Tecnología
Tabla resumen de descriptores
La Matriz de Integración de Tecnología (TIM, por su sigla en inglés) proporciona un marco de trabajo para
describir y enfocarse en el uso de la tecnología para mejorar aprendizajes. La Matriz incorpora cinco
características interdependientes de los ambientes de aprendizaje significativos: activos, colaborativos,
constructivos, auténticos y dirigidos a metas. Estas características están asociadas con cinco niveles de
integración de tecnología: entrada, adopción, adaptación, infusión y transformación. Juntas, las cinco
características de los entornos de aprendizaje significativos y los cinco niveles de integración tecnológica
crean una matriz de 25 celdas, como se ilustra a continuación.
ENTRADA ADOPCIÓN ADAPTACIÓN INFUSIÓN TRANSFORMACIÓN
El maestro
comienza a usar
tecnologías para
presentar
contenidos a los
estudiantes
El maestro dirige a
los alumnos en el
uso convencional
y de procedimiento
de las
herramientas
El maestro facilita a
los alumnos la
exploración y uso
independiente de las
herramientas
El maestro provee el
contexto de
aprendizaje y los
estudiantes escogen
las herramientas para
lograr el resultado
El maestro alienta el uso
innovador de las
herramientas, que se
usan para facilitar
actividades de
aprendizaje de alto nivel
que no serían posibles
sin la tecnología
ACTIVO
Los estudiantes se
involucran activamente en el
uso de la tecnología en vez
de sólo recibir información
pasivamente de ella
Act. 3. Lectura
en Libro
Digitales y
Tutoriales
Online.
Con
posibilidades de
puedan
compartir sus
reflexiones y
otros tutoriales
utilizados. con
Herramientas
Colaborativas
como Foros y
Tableros.
Act. 1.
Presentación e
identificación de
estudiantes
utilizando la
herramienta de
Miro
Act. 2.
Exploración de
conocimientos
previos.
Utilizando la
herramienta
Kahoot como
juego interactivo
de preguntas.
Act. 6. Quiz de
Conocimientos
HTML y CSS
Online.
Con las
posibilidades de
integrar la
herramienta Tomi
Digital con
recursos que se
pueden compartir
con otros
docentes e icluir
actividades de
repaso.

6. Diseño de experiencias de aprendizaje
mediadas con las TIC II
2022-II
Estudiante: Johan Alberto Robles Solano
COLABORATIVO
Los estudiantes usan las
herramientas para colaborar
con otros y no sólo trabajar
individualmente
Act. 4 Taller de
HTML
Act. 5 Taller de CSS
Con la posibilidad
de compartir el uso
de herramientas y
y código fuente en
repositorios en
recursos como
Github. Inlcuir
Bitacora de Trabajo
de Campo
compartido con
docente.
Act. 10. Desarrollo de
Prototipo.
Posibilidades de una
total flexibilidad en
una amplia gama de
herramientas
tecnológicas
(editores, recursos
multimedia,
validadores, plantillas,
framework, etc) para
desarrollo de
prototipos frontend
web buscando que se
favorezcan los
aprendizajes en
HTML y CSS.
CONSTRUCTIVO
Los estudiantes usan la
tecnología para conectar
nueva información con
conocimientos previos y no
sólo recibirlos pasivamente
Act. 7. Lluvia de
ideas.
Publicadas en
tablero miro.
Posibilidades con
Integración de
herramientas de
comunicación de
trabajo en equipo
(Slack, Asana,
Trello, Jira,
Whatsapp, Drive,
Teams, etc.) de la
elección del grupo.
AUTÉNTICO
Los estudiantes usan la
tecnología para ligar
actividades educativas al
mundo exterior y no sólo en
tareas des-contextualizadas
Act. 8. Socialización
de Ideas y selección
de proyecto.
Publicadas en
Tablero compartido.
Con posibilidades
de Integración de
herramientas la
creación y
publicación de
recurso de videos
creativos para el
lanzamiento
proyecto.

7. Diseño de experiencias de aprendizaje
mediadas con las TIC II
2022-II
Estudiante: Johan Alberto Robles Solano
DIRIGIDO A METAS
Los estudiantes usan la
tecnología para fijar metas,
planear actividades, medir
su progreso y evaluar
resultados y no sólo para
completar actividades sin
reflexión
Act. 9. Avances
Tablero Gestión de
Proyectos.
Posibilidades con
Integración de
herramientas de
comunicación de
trabajo en equipo
(Slack, Asana,
Trello, Jira,
Whatsapp, Drive,
Teams, etc.) de la
elección del grupo.
“The Technology Integration Matrix” fue desarrollada por el Centro de Tecnología Educativa de Florida en la Facultad de Educación de la Universidad de South Florida. Para obtener más información, videos de ejemplos y recursos de desarrollo
profesional relacionados, visite http://mytechmatrix.org. Esta página puede ser reproducida por las escuelas y los distritos para el desarrollo profesional y la instrucción previa al servicio. Todo otro uso requiere permiso por escrito del FCIT. ©
2005-2017 University of South Florida.
Traducción al español (no oficial): http://www.eduteka.org/articulos/tim
Actividades
• Act. 1. Presentación e identificación de estudiantes (Registrar nombre, foto en tablero miro): Actividad
inicial con acceso al tablero de miro, donde hacen un reconocimiento para la utilización de este recurso
y de los compañeros de grupo. Allí colocan su nombre y fotografía dentro del recurso disponible en el
tablero.
• Act. 2. Exploración de conocimientos previos en HTML, CSS y Gestion de Proyectos (Cuestionario
Kahoot)
En esta actividad responden un cuestionarios para identificar saberes previos en HTML, CSS y
experiencias en proyectos con estos lenguajes.
• Act. 3. Lectura en Libro y Tutorial HTML y CSS (Libro Uniwebsidad, Tutorial W3cschool).
Realizan un recorrido por algunos temas del tutorial HTML y CSS. Realizan talleres propuesto del
tutorial.
• Act. 4 Taller de HTML (Creación de un formatos dado en html)
Se les pide diseñar en HTML un formato de Lista de Asistencia como página web.
• Act. 5. Taller de CSS (Creación de un formatos mejorados con html+css)
Se les pide diseñar en HTML+CSS un formato de Lista de Asistencia como página web versión
mejora y visualmente más intuitiva.
• Act. 6. Quiz de Conocimientos HTML y CSS
Realizan un examen para valorar los conceptos aplicados con HTML y CSS
• Act. 7. Lluvia de ideas (Formato de punto de vista, deciden herramienta de comunicación)
Actividad para aportar ideas para proyecto de Diseño de Pagina Web para promocionar y servicio
local.
• Act. 8. Socialización de Ideas y selección de proyecto (Comparten en miro)
Socialización de las ideas propuestas en el Formato de Puntos de Vistas.
• Act. 9. Avances Tablero Gestión de Proyectos (Tablero Trello o parecido)
Presentación de informe de acuerdo a planeación según lo registrado en tablero con método
Kanban para gestión del proyecto.
• Act. 10. Desarrollo de Prototipo (Presentación del Sitio – frontend)
Publicación y Socialización del prototipo con el diseño del frontend del sitio web propuesto.