Diseño de una Página Web para Promoción de un Producto Local. Brinda la oportunidad a los estudiantes de formar equipos y participar de manera colaborativa, donde puedan explorar productos locales y proponer ideas para informar y promocionarlos a través de sitios web diseñados por ellos mismos. En esta experiencia, no solo los estudiante aplican los conocimientos técnicos (HTML, CSS, JavaScript, Framework para Front-End, etc.) propios del desarrollo de páginas o sitios para la web, sino que también se aprovecha para que demuestren la importancia y el respeto a los temas relacionados con la propiedad intelectual. Y es que, los retos de diseño son un medio apropiado para enseñar a los estudiantes sobre la propiedad intelectual en términos de sus propios diseños y cuando buscan ideas en diseños creados por otros. Como sabemos, hacer aportes para la web y en este caso, en el diseño de páginas en la internet, permite que los estudiantes tengan oportunidades para practicar comportamientos positivos, legales y éticos en línea, y demuestren la importancia de respetar la propiedad intelectual y la protección de los derechos de autor a medida que crean sus diseños.

1. Diseñando una experiencia de aprendizaje mediada por TIC
Diseño de una Página Web para Promoción de un Producto Local by Johan Robles Solano is licensed
under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional License.
Estándar ISTE de ciudadanía digital:
Los estudiantes reconocen los derechos, responsabilidades y oportunidades de vivir,
aprender y trabajar en un mundo digital interconectado, y actúan y modelan de manera
segura, legal y ética. Los estudiantes:
1. Cultivan y gestionan su identidad y reputación digital y son conscientes de la
permanencia de sus acciones en el mundo digital.
2. Se involucran en un comportamiento positivo, seguro, legal y ético al usar la
tecnología, incluyendo interacciones sociales en línea o cuando usan dispositivos
conectados en red.
3. Demuestran una comprensión y respeto de los derechos y obligaciones de usar y
compartir la propiedad intelectual.
4. Administran sus datos personales para mantener la privacidad y la seguridad
digitales y son conscientes de la tecnología de recolección de datos utilizada para
rastrear su navegación en línea.
Indicadores seleccionados para la experiencia:
1. Se involucran en un comportamiento positivo, seguro, legal y ético al usar la
tecnología, incluyendo interacciones sociales en línea o cuando usan dispositivos
conectados en red.
2. Demuestran una comprensión y respeto de los derechos y obligaciones de usar y
compartir la propiedad intelectual.
Experiencias de aprendizaje de referencia dónde se promueve la ciudadanía digital:
Referencia 1: Internet: Oportunidades, Limites y la Necesidad del Respeto
Autor(es): Juan Carlos López García
Año: 2002
Medio: Eduteka (Sitio Web)
URL: https://eduteka.icesi.edu.co/articulos/Editorial15
• Será útil considerar algunos de los aspectos que resalta el autor, acerca del “reto
para los educadores, quienes deben formar a sus alumnos para la utilización de
este medio (Internet) en uno de los valores de mayor trascendencia hoy día: El
Respeto. Este último tiene dos aspectos fundamentales: cuando los estudiantes
utilizan los recursos disponibles en Internet deben respetar el Derecho de Autor de
quienes los han publicado y cuando se comunican con otras personas deben
demostrar respeto hacia ellas.” . En esta experiencia se busca que los estudiantes
demuestren una comprensión y respeto de los derechos y obligaciones de usar y
compartir la propiedad intelectual en el ejercicio de diseñar una página web. En
esta edición el autor hace referencia al Respeto, tanto por los derechos de los
autores que publican sus contenidos en Internet como por otras personas con las
que nos comunicamos en el ciberespacio.

2. Diseñando una experiencia de aprendizaje mediada por TIC
Referencia 2: Minecraft Apply in the Classroom: Classroom Readiness
Por: Minecraft | COURSE•INTERMEDIATE
Año: 2021
Medio: Microsoft | Educator Center (Sitio Web)
URL: https://education.microsoft.com/en-us/course/638ff276/4
• Esta es una guía de un curso dado en idioma inglés, que tomo como referencia. En
este curso se presenta a los participantes el proceso de construcción de una
estructura para usar Minecraft: Education Edition dentro de sus entornos de
aprendizaje con estudiantes de manera interactiva. En la segunda lección del curso,
se encuentra entre los objetivos, que los estudiantes aprendan e implementen,
ciudadanía digital con Minecraft: Education Edition. Y se consideran también los
estándares ISTE-S, por ejemplo, “2b Students engage in positive, safe, legal and
ethical behaviour when using technology, including social interactions online or when
using networked devices”, que coinciden con el mismo seleccionado en la
experiencia propuesta en este documento.
Nombre de la experiencia:
Diseño de una Página Web para Promoción de un Producto Local
Grado:
Superior
Duración:
2 sesiones de 2 horas c/u.
Descripción de la experiencia:
Este proyecto brinda la oportunidad a los estudiantes de formar equipos y participar de
manera colaborativa, donde puedan explorar productos locales y proponer ideas para
informar y promocionarlos a través de sitios web diseñados por ellos mismos.
En esta experiencia, no solo los estudiante aplican los conocimientos técnicos (HTML,
CSS, JavaScript, Framework para Front-End, etc.) propios del desarrollo de páginas o
sitios para la web, sino que también se aprovecha para que demuestren la importancia y
el respeto a los temas relacionados con la propiedad intelectual. Y es que, los retos de
diseño son un medio apropiado para enseñar a los estudiantes sobre la propiedad
intelectual en términos de sus propios diseños y cuando buscan ideas en diseños creados
por otros.
Como sabemos, hacer aportes para la web y en este caso, en el diseño de páginas en la
internet, permite que los estudiantes tengan oportunidades para practicar
comportamientos positivos, legales y éticos en línea, y demuestren la importancia de
respetar la propiedad intelectual y la protección de los derechos de autor a medida que
crean sus diseños.

3. Diseñando una experiencia de aprendizaje mediada por TIC
Objetivos de aprendizaje:
• Diseñar un sitio web informativo y promocional de un producto local
• Demostrar una comprensión y respeto de los derechos y obligaciones de usar y
compartir la propiedad intelectual.
• Mejorar las capacidades para trabajar en equipo (colaborativamente)
• Tener un comportamiento positivo, seguro, legal y ético al usar tecnologías en el
desarrollo para la web.
Actividades de aprendizaje:
Este módulo está diseñado como un plan de lecciones con objetivos de
aprendizaje, resultados de aprendizaje y pasos de acción para que el profesor los
use en el aula con los estudiantes.
Lección 1 : Esta lección tendría una duración de 2 horas
Tema: Introducción DISEÑO DE PAGINAS WEB
En esta primera lección se utilizará la herramienta “miro” para poder interactuar con los
estudiantes en un tablero compartido.
Será importante que previamente el profesor pueda verificar que todos los estudiantes
se les haya asignado una cuenta y que les haya llegado la invitación para poder iniciar
sesión en la plataforma de miro y así ellos ingresen sin problemas al tablero compartido.
Resultado de aprendizaje para los estudiantes con herramienta miro:
• Los estudiantes podrán iniciar sesión en la herramienta miro.
• Los estudiantes podrán identificar y agregar su fotografía en el tablero
• Los estudiantes podrán seguir las instrucciones en el tablero y utilizar el mapa de
lluvia de ideas, para los aportes de la clase.
• Los estudiantes podrán contribuir con los conceptos sobre diseño de página web.
• Los estudiantes podrán formar equipos y unificar ideas con la elección del producto
local para la propuesta inicial.
• Los estudiantes conocerán sobre HTML y CSS.
• Los estudiantes encontrarán recursos para practicar HTML5
El profesor
Inicia con un saludo y bienvenida con la mejor actitud (2 minutos)
Se presentan las indicaciones de la clase con el uso de la plataforma (2 minutos)
Se realiza la activación de los saberes previos a través de una primera actividad (20
Minutos)
Actividad 1: ¿Qué sabemos acerca de la WEB?
20 minutos
El docente previamente tiene elaborado en un tablero compartido un mapa de lluvia de
ideas, en el cual contiene un espacio con la información para que los estudiantes se
identifiquen, colocando su nombre, su correo de contacto y una fotografía. El estudiante

4. Diseñando una experiencia de aprendizaje mediada por TIC
deberá seguir las instrucciones y responder las siguientes preguntas para obtener los
conocimientos previos:
Los estudiantes
Responden dentro del tablero compartido las preguntas: (5 minutos)
¿Para usted, qué es Internet?
¿Has utilizado antes HTML?
¿Qué página web le llama la atención?
El profesor
Después de que los estudiantes publican sus respuestas, el profesor permite el espacio
para realizar una charla, dándole la oportunidad a los estudiantes de participar dejando
sus puntos de vistas de acuerdo con las respuestas compartidas e indagar si han tenido
experiencia con el desarrollo de páginas web. (10 minutos)
Luego de tener en cuenta la participación de los estudiantes, se muestra un video
Microaprendizaje: ¿Qué es internet? (4 minutos)
Recurso: https://www.youtube.com/watch?v=-JVdH8ne-2s
Con este video se realiza la introducción del tema Diseño de una Página Web para
Promoción de un Producto Local y se le presentan los objetivos, dejándoselos escrito en
el tablero compartido. (2 minutos)
Se aclara que el diseño se realizará trabajando en equipo (colaborativo), así que se
propone la actividad 2.
Actividad 2: Armemos Equipos
20 minutos
El profesor permitirá que los estudiantes puedan armar equipos. Para ello tendrá en
cuenta el diagnóstico de conocimientos previos y habilidades mencionadas por los
estudiantes en la anterior actividad. Agrupará a los estudiantes según su desempeño
para que los que tengan alguna experiencia puedan ayudar al resto del grupo.
Los estudiantes
Seguirán utilizando la herramienta miro, y encontrarán unos recuadros etiquetados con
los nombres de grupo1, grupo2… grupo n. Se darán cuenta que el profesor previamente
ha asignado algunos estudiantes en algunos grupos. Así que los estudiantes que no
aparecen en los recuadros de grupos, deberán agregar un “sticky note” con su nombre
en el grupo al cual quieren pertenecer. (10 minutos)
Una vez conformado los grupos, proceden a colocarle un nombre. El profesor dará las
indicaciones de los tipos de nombres, que no vayan a ocasionar problemas ni
distracción y que sean muy respetuosos. Que piensen en una marca o identidad dentro
de la Internet. Así que los nombres de equipos sugeridos, sean como nombres de
empresa originales dedicados al diseño de páginas web. (5 minutos)
Cada grupo realizará la presentación de sus integrantes con el nombre del Equipo.

5. Diseñando una experiencia de aprendizaje mediada por TIC
Actividad 3. Lluvia de Ideas
20 minutos
El profesor prepara un espacio dentro del tablero para que cada grupo participe por
medio de un diagrama de lluvia de ideas todas las propuestas que tengan acercar de
productos locales que requiera promocionarlo o darlo a conocer a través de una página
web.
Los estudiantes trabajaran en grupo dentro del tablero compartido en miro,
recononeran su espacio de trabajo con la etiqueta identificado con el nombre de grupo.
Allí colocarán en cada “sticky note” los productos que consideren. Luego presentarán
los productos propuestos a todo el grupo.
Con ayuda de todas las intervenciones realizadas por todos los partipantes y
representates de equipos, colocarán cual de todas las ideas será la selecciona por
grupo.
Compromisos Lección 1:
Realizar un prototipo de la página principal para conocer información sobre el producto
local seleccionado por el equipo.
Para utilizar la estructura de HTML 5 solicitada, se recomienda primero familiarizarse
con los conceptos básicos del Diseño HTML.
Realizar el paso a paso del "Tutorial de HTML5 básico desde cero".
El profesor entregará el enlace del tutorial y permitirá consignar la actividad en el tablero
compartido.
Recurso: https://www.youtube.com/watch?v=tXvAnlPmmKI
Lección 2 : Esta lección tendría una duración de 2 horas.
Tema: CIUDANÍA DIGITAL desde el Diseño de Páginas Web
Objetivos de la Lección
Al final de la lección, los estudiantes podrán:
1. Definir qué tipo de comportamientos componen un ciudadano digital responsable.
a. Respetar los sentimientos y las creaciones de los demás.
b. Respetando los derechos de autor
c. Mantener una huella digital limpia
d. Comunicarse de una manera clara y positiva
2. Demostrar ciudadanía digital responsable al Diseñar Páginas Web.
Tareas del alumno antes de la lección:
Se sugiere que los estudiantes participen en el Diseño de una “Maqueta” o prototipo de
Página Web, en la que utilicen la estructura de HTML 5, solicitada como estudio en la
lección anterior para familiarizarse con los conceptos básicos del Diseño HTML.
Se propone seguir el "Tutorial de HTML5 básico desde cero".
i. Se debe permitir al menos 60 minutos para que los estudiantes progresen en el

6. Diseñando una experiencia de aprendizaje mediada por TIC
tutorial.
iii. Puede encontrar un tutorial del proceso aquí.
Recurso: https://www.youtube.com/watch?v=tXvAnlPmmKI
El profesor
Inicia con un saludo y bienvenida con la mejor actitud. (2 minutos)
Recordar a los estudiantes, aspectos de la práctica del prototipo con la pregunta:
¿Cuáles son los elementos que se utilizan en la Estructura de una Página con HTML5?
(5 minutos)
Les muestra una presentación de la Estructura de un Documento en HTML5
Recurso: https://prezi.com/p/ddtzqqrgmknh/?present=1
Actividad 4. Presentación de Maqueta o Prototipo con HTML5
(20 minutos)
Solicita a cada grupo que presenten sus prototipos.
El profesor realiza la retroalimentación general, resaltando los aspectos importantes
aplicados en la “Maqueta” y cuáles podrían mejorar en la estructura.
Los estudiantes deben colocar el prototipo en un repositorio Git Hub, y compartirlo con
todos los integrantes del equipo.
Entrega el video tutorial para Git y Github Desde Cero
Recurso: https://www.youtube.com/watch?v=HiXLkL42tMU
Compromisos:
Entregar el enlace para acceder al repositorio Git Hub, para el código del prototipo del
diseño página web del producto local.
Actividad 5. Ciudadano Digital Responsable
(10 minutos)
El profesor coloca la siguiente pregunta:
¿Qué hace a un ciudadano digital responsable? (2 minutos)
Para ello utiliza herramienta de Mentimeter
Recurso: https://www.menti.com/1vjq2xgjxe
Los estudiantes podrán acceder al enlace dado por el profesor, dejando tres palabras
claves que consideren puedan dar respuesta a la pregunta. (5 minutos)
El profesor retoma las respuestas colocados por los estudiantes y le muestra a todos los
participantes la Nube de Palabras generada por la herramienta Mentimeter. Y solicita
que se den una definición de acuerdo a la nube generada.
El profesor presenta el siguiente video:
Para responder ¿Qué significa ser un ciudadano digital?

7. Diseñando una experiencia de aprendizaje mediada por TIC
Recurso: https://www.youtube.com/watch?v=dC9L3bRN5c0
De acuerdo a ese video, el profesor pide a los estudiantes que realicen la siguente
actividad para ver si comprendieron lo presentado.
Actividad 6. Ejemplos Ciudadano Digital Responsable en Desarrollo de páginas web
(10 minutos)
El profesor solicita a los estudiantes que coloquen ejemplos de cómo se podría aplicar
los indicadores (a) y (b) en el desarrollo de páginas web
Indicadores:
a Respetar los sentimientos y las creaciones de los demás.
b. Respetar los derechos de autor
Para ello utilizaran el muro compartido realizado en la herramienta Padlet
Recurso: https://padlet.com/johanrobles/vn4da90llfx8t0ur
Los estudiantes ingresarán al enlace compartido por el profesor y de manera individual
comenzarán a compartir sus ejemplos en tiempo real. (10 minutos)
El profesor les permitirá a los estudiantes participantes, hacer una reflexión sobre
¿cuáles serías los comportamientos que componen un ciudadano digital responsable?
¿Y cómo aplicarían estos comportamientos en el desarrollo del proyecto de Diseño de
la Página Web para productos locales?
Compromisos Lección 2:
Entregar Diseño de Prototipo Página Principal cuyo contenido incluya información,
imágenes, videos y demás recursos que Respeten los Derechos de Autor
Subir los archivos utilizados en el repositorio de Git Hub. Enviar el enlace al profesor.
Estrategias de evaluación:
Los estudiantes son organizados en equipos de trabajo, en un ambiente participativo,
donde se promueve el respeto, el trabajo en equipo y el trabajo colaborativo. Las
presentaciones de videos y actividades interactivas hacen que los estudiantes partipen
en conversatorios, permitiendole ser el protagonista de las clases. El Diseño de Páginas
Web con el trabajo en equipo, involucra aspecto de investigación y desarrollo, los cual
genera ciertos compromisos para mejorar el comportamiento que deben tener como
ciudadanos digitales, de tal manera que demuestren el respeto por los derechos de autor.
Los estudiantes registran sus participaciones en tableros compartidos con herramientas
interactivas, sus avances del proyecto en repositorios especiales para código. A los
estudiantes se le entrega una rúbrica con los criterios para la autoevaluación del
desempeño llevado en el proyecto de Diseño de Paginas Web.

8. Diseñando una experiencia de aprendizaje mediada por TIC
Recursos:
Herramientas:
https://miro.com/
https://www.mentimeter.com/
https://prezi.com/
https://padlet.com/
https://www.youtube.com/

9. Diseñando una experiencia de aprendizaje mediada por TIC
Videos
Nombre: Microaprendizaje: ¿Qué es internet?
URL: https://www.youtube.com/watch?v=-JVdH8ne-2s
Nombre: Introducción a HTML5 básico desde Cero
URL: https://www.youtube.com/watch?v=tXvAnlPmmKI
Nombre: Introducción a CSS3 básico desde Cero
URL: https://www.youtube.com/watch?v=DHLGYuR9N8o
Nombre: Git y Github desde Cero
Recurso: https://www.youtube.com/watch?v=HiXLkL42tMU
Nombre:¿Qué significa ser un ciudadano digital?
URL: https://www.youtube.com/watch?v=dC9L3bRN5c0
Presentación
Nombre: Estructura de Un Documento en HTML5
https://prezi.com/p/ddtzqqrgmknh/?present=1
Actividad 5
Recurso: https://www.menti.com/1vjq2xgjxe
Actvidad 6
https://padlet.com/johanrobles/vn4da90llfx8t0ur