Manual (Anterior) - HTML 2° de Secundaria

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 52

H SITIOS WEB

HTML
Y PROGRAMACIÓN
COMPUTACIONAL
LECCIONES PARA ENSEÑAR

PENSAMIENTO

LECCIONES PARA ENSEÑAR PENSAMIENTO COMPUTACIONAL Y PROGRAMACIÓN SITIOS WEB-HTML


Bienvenidos a

Cuantrix es un programa de Fundación Televisa que busca generar equidad de


oportunidades a través de las Ciencias de la Computación para que cada año en
México un millón de niñas, niños y jóvenes aprendan a programar.

La programación como herramienta educativa resulta especialmente interesante y


divertida en muchos aspectos, ya que desarrolla diversas habilidades multidiscipli-
narias en los niños y niñas; como aprender a trabajar en equipo, fomentar la persis-
tencia y la creatividad. Aptitudes que los ayudarán a desarrollar su capacidad para
resolver determinados problemas y los fortalecerán en cualquier materia.

La creatividad, la sociabilidad y la comunicación entre los chicos se ve beneficiada


exponencialmente a través de diferentes recursos y herramientas que se utilizarán
para resolver problemas. Y todo esto gracias a la programación.

Acompaña a tus estudiantes en los contenidos Cuantrix y juntos preparemos a los


nuevos creadores tecnológicos, para que puedan pensar y diseñar el mundo del
futuro desde ahora.

Los materiales se han desarrollado en unión con Code.org, organización sin fines
de lucro que tiene como objetivo incentivar a los estudiantes a aprender sobre las
ciencias computacionales por medio de ejercicios de programación, a través de su
sitio web.

Los invitamos a ser parte de este esfuerzo en beneficio de cientos de miles de es-
tudiantes mexicanos, quienes transformarán su pensamiento para convertirse en
creadores de la tecnología que utilizan.
Introducción
¿Qué es el
pensamiento computacional?

La habilidad para tomar decisiones y resolver problemas depende en gran medida


del desarrollo del pensamiento lógico. Si mejoramos esta habilidad nuestra calidad
de vida y de quienes nos rodean pueden beneficiarse significativamente.

El objetivo del pensamiento computacional es desarrollar sistemáticamente las


habilidades del pensamiento crítico y la resolución de problemas con base en los
conceptos de la computación. Y sumar que las personas potencien y aprovechen
el poder que tienen las computadoras en la actualidad.

El pensamiento computacional es un proceso de solución de problemas que inclu-


ye, entre otras, las siguientes características:

• Organizar y analizar datos de forma lógica.


• Representar datos mediante abstracciones, tales como modelos y
simulaciones.
• Automatizar soluciones mediante algoritmos (pasos ordenados para lograrlo).
• Formular problemas para que las computadoras puedan solucionarlos.
• Identificar, analizar y desarrollar posibles soluciones a los problemas.
• Encontrar la combinación de pasos y recursos eficientes y efectivos.
• Entender los procesos para solucionar problemas en el mundo computacional
y convertirlos en soluciones.

Es importante preparar a los estudiantes para convertirse en pensadores compu-


tacionales, es decir, que entiendan la manera en la que las herramientas digitales
que tenemos hoy pueden ayudar a resolver problemas del mañana; para lograrlo,
sabemos que aprender a programar es el primer paso.
¿Por qué aprender a
programar en la escuela?

Más que formar programadores, se trata de que nuestros es- La tradición escolar de enseñanza en las TIC (Tecnología de la
tudiantes, sean capaces de transformar y resolver problemas Información y Comunicación) se ha centrado en el aprendizaje
con más herramientas. de herramientas específicas de software, como Excel, Word, uso
de buscadores, etc., herramientas que fortalecen las destrezas
La programación es una herramienta implementada para que operacionales; sin embargo, es necesario fomentar habilida-
nuestros estudiantes puedan comprender a profundidad el des, conocimientos y actitudes diversas: ser crítico y reflexivo
entorno digital en el que viven y, de este modo, sean capaces con el uso que hacemos de las tecnologías, conscientes de
de contribuir en él con madurez y sentido crítico. sus posibilidades, riesgos, ser capaces de evolucionar y crear
con ellas.
Aprendemos programación para expresarnos en lenguajes
propios de nuestro siglo, a interpretarlos y aplicarlos en sentido Queremos fomentar una programación creativa que conecte
crítico. Hay evidencias de que aprender a programar desde la los intereses y gustos de los estudiantes con proyectos en los
infancia mejora los resultados en exámenes de matemáticas, que puedan ser protagonistas y se expresen en los mismos
refuerza el razonamiento y la resolución de problemas, tiene lenguajes que están acostumbrados a consumir. Por esto, nos
un impacto positivo en la creatividad y en la respuesta emo- apoyamos en diferentes herramientas, con y sin Internet.
cional; así como en el desarrollo de las habilidades cognitivas
y socioemocionales. Pretendemos que, por medio de la programación puedan tra-
bajar la creatividad, la expresión, el trabajo colaborativo y en
Por lo tanto, queremos programar para aprender, para expre- equipo, la comunicación, la modelización y resolución de pro-
sarnos, para comprender mejor los contenidos científicos y blemas. A partir del trabajo metodológico, desarrollando un
tecnológicos, para perder el miedo a crear y compartir y para proyecto a partir de una nueva idea, mediante la experimenta-
que todos tengamos las mismas oportunidades de acceder a ción, perseverancia, manejo de emociones y otras habilidades
una alfabetización propia del siglo XXI. blandas del siglo XXI.
Propósitos Curso
Generales SITIOS WEB-HTML

• Propiciar la reflexión acerca de la utili- • Estimular la confianza de los alumnos


dad de los programas para representar mediante el uso y la ejecución de pro-
ideas y resolver problemas. gramas diseñados por ellos mismos.
• Explorar el funcionamiento de las com- • Promover la reflexión crítica y el trabajo
putadoras que sirven, no sólo para eje- colaborativo a través de la detección y
cutar programas, sino para realizar lo corrección de errores de los programas
que el programa indique. propios y ajenos.
• Fomentar que los estudiantes diseñen • Trabajar con conceptos relacionados
sus propios programas, de manera que con las ciencias de la computación para
no se limiten a ser usuarios de aplica- desarrollar habilidades de pensamiento
ciones realizadas por terceros. computacional.

Contenidos
Escolares
• El proceso de resolución de problema • Propiedad intelectual e imágenes El curso de HTML promueve el reforzamiento y aprendizaje de
• ¿Qué es una computadora? • Estilo de texto con CSS las habilidades CTIM (Ciencias, Tecnología, Ingeniería y Mate-
• Entrada y salida de información • Proyecto - Sitio web máticas). Los estudiantes podrán aprender los conocimientos
• Procesamiento de información • ¿Qué es emprendimiento? teórico-prácticos acerca del uso, alcance y programación de
• Almacenamiento • Características de un emprendedor y páginas web en lenguaje HTML, integrando la tecnología, el pen-
• Explorando sitios web trabajo colaborativo samiento lógico de programación y el desarrollo de proyectos
• Introducción a HTML • Modelo de negocios en su comunidad, como parte integral de la formación acadé-
• Huella digital mica. Propiciando el desarrollo y construcción de páginas web
para la solución de una problemática con impacto social.
Configuración
Técnica
Traducción de sitios

Algunas de las plataformas a utilizar pueden mostrarse de origen en el idioma


inglés, para ajustarla al idioma español, realiza los siguientes pasos:
¡Sin preocupaciones! La mayoría de nosotros nunca ha enseñado informática, este
cuadernillo está diseñado para llevarte de la mano en las lecciones y proyectos que
llevarás a cabo con tus estudiantes. 1 A través de Google Chrome, 2 Identifica la ventana emergente
accede a la plataforma deseada en la parte superior derecha
A continuación, conocerás las plataformas que utilizarás en el
curso primero de primaria.

CODE.org

A lo largo de las lecciones los estudiantes experimentarán sus


aprendizajes resolviendo retos de programación a través de
la plataforma CODE.org, es necesario registrarse como maes-
tro y estudiantes para acceder a las actividades. En cada una
de las lecciones encontrarás el enlace a los ejercicios corres-
pondientes, iniciando sesión y abriéndolos podrán comenzar
a resolverlos. 3 Localiza el icono de traducción 4 Da clic en la opción “español”

Para crear tu cuenta y si es de tu interés conocer más acerca de CODE.org y


sus actividades puedes ingresar a https://code.org/.

5 Estás listo para utilizar la platafor-


ma en español
Sitios Web - HTML 12
Lección

1
13
Introducción a la resolución
de problemas

Traducción de videos

En caso de consultar videos en otro idioma, es posible colocar subtítulos, sigue los Fundamentos de pensamiento computacional y programación
pasos a continuación:
El proceso de resolución de problemas, tiene el objetivo de en-
• YouTube cuenta con un traductor automático que permite añadir subtítulos contrar una solución a una problemática, probarla, reflexionar
los resultados y replantearlos; permitiendo comprender que
una primera solución no siempre es la ideal, pero siempre es
1 Accede al video deseado 2 Da clic en configuración y la posible mejorarla.
opción subtítulos

Descripción de los contenidos de pensamiento computacional y


programación necesarios para el profesor

Para llevar a cabo las actividades con los estudiantes, debes


conocer la importancia del proceso de resolución de proble-
mas y puedes apoyarte del:

• Video de la lección - Telecuantrix.


3 Selecciona traducción automática, 4 Selecciona el idioma español
se desplegará una lista de idiomas
Actividades presenciales que realizará el profesor con su grupo para
la práctica de códigos y símbolos de la herramienta base.

Los estudiantes deberán encontrar soluciones a un divertido


reto de barcos o torres.

Objetivo

5 Estás listo para reproducir el video Introducir a los estudiantes de manera divertida, colaborativa y creativa
en español a la resolución de problemas.
Sitios Web - HTML 14
15

Apertura
Habilidades Contenidos Recursos 1 ¡A presentarnos!

• Creatividad • Resolución de problemas • Guía de actividades - Al iniciar esta lección realiza una actividad para que los estu-
• Toma de decisiones Barcos de aluminio diantes puedan conocerse unos a otros.
• Trabajo colaborativo • Video de la lección -
Telecuantrix La actividad consiste en hacer un círculo con todos los estu-
diantes, de preferencia se les pide ponerse de pie; un estudian-
te se colocará en el centro, dirá su nombre y algo que le guste
o no le guste de la tecnología. Los demás estudiantes dirán si
comparten sus gustos o no. Posteriormente el estudiante del
Vocabulario centro elegirá a algún compañero que se encuentre de pie y
se hará todo el proceso de nuevo.
Resolución de problemas: Es la capacidad para identificar un problema, tomar me-
didas lógicas para encontrar una solución deseada, supervisar y evaluar la imple- A continuación, comparte con los estudiantes lo siguiente:
mentación de tal solución.
“Es posible que tengan muchas preguntas sobre lo que vamos
Proceso de resolución de problemas: Es el procedimiento que permite solucionar a hacer o aprender. Vamos a divertirnos mucho aprendiendo
un problema. cómo podemos usar la informática para ayudarnos a construir
cosas, expresarnos y resolver problemas. Resolver problemas
con o sin computadoras es uno de los enfoques principales de
esta clase”.

Desarrollo
2 Barcos de papel

Para dar inicio con las actividades, forma equipo con los es-
tudiantes, brinda una guía de actividad – barcos de papel y
comparte lo siguiente:

Hoy vamos a construir barcos de papel. Tendrán la oportuni-


dad de construir al menos dos barcos y utilizar su experiencia
con cada uno para mejorar sus diseños. Antes de comenzar,
decidan como equipo qué tipo de diseño les gustaría hacer
con su primer barco. Registren sus ideas y cualquier posible
debilidad de este diseño en su guía de actividades.
Sitios Web - HTML 16
17

Pide a los estudiantes compartan los resultados de su primera


Los barcos de papel son una idea de actividad, con la finalidad ejecución con otros equipos. Pide a los equipos que se con-
de que los estudiantes realicen la prueba/error en sus inten- centren particularmente en la falla eventual de su barco (por
tos; y como equipo lleguen a soluciones para que sus barcos ejemplo, no era lo suficientemente profundo, era inestable, etc.)
no se hundan. En caso de no contar con agua para realizar la y piensen en formas de resolver los problemas.
actividad, esta puede variar de acuerdo a los materiales e in-
fraestructura de la clase, por ejemplo: Tener dos intentos para Ahora que han tenido la oportunidad de aprender de la prime-
construir una torre con materiales determinados (palitos de ra ronda de fabricación de barcos, ejecuten la misma actividad
madera y plastilina), que soporten un libro. Lo importante de nuevamente. Primero, los equipos desarrollarán un nuevo plan
esta actividad es reflexionar acerca de la resolución de pro- y los registrarán en su guía de actividades. Una vez que estén
blemas y el trabajo colaborativo. listos se les entregará una nueva hoja de papel (o en su caso,
otros materiales).
Brinda a los estudiantes un par de minutos para analizar en
equipos el enfoque que tomarán con este primer barco. Una Visita a los equipos y realiza preguntas sobre el enfoque del
vez que los equipos hayan registrado sus ideas y algunas po- equipo en el rediseño. Ejemplo: “¿Qué aspecto de tu barco ne-
sibles debilidades, pueden acudir a ti para obtener su papel y cesitó la mayor mejora?” “¿Qué ideas de otros equipos quisiste
comenzar a construir sus barcos (o en su caso otros materiales incorporar al tuyo?” “¿Sentiste la necesidad de reestructurar
y construir una torre). por completo tu barco o hacer modificaciones menores?”

Una vez que los equipos estén listos, pide que prueben sus bar- Una vez que los equipos hayan preparado sus nuevos planos,
cos dejando caer monedas individuales en el barco. Recuerden proporciona una nueva hoja y pide que construyan una nue-
las reglas, específicamente que no pueden tocar o ajustar los va embarcación. Los equipos pueden probar sus diseños igual
barcos una vez que están en el agua, pide que registren la can- que antes y registrar los resultados en sus guías de actividades.
tidad total de monedas que tienen sus guías de actividades.
Pide a la clase que regrese a sus asientos para reflexionar so-
2 Mejora interactiva bre la actividad.

Para continuar con la actividad, pasarán a la mejora de sus


diseños de barco, comparte con los estudiantes lo siguiente:

Este primer intento de construir nuestros barcos fue para fa-


miliarizarnos con el desafío.

Todos vamos a construir un segundo barco y veremos si po-


demos mejorar la cantidad de monedas que tienen nuestros
barcos. Sin embargo, antes de comenzar, veamos qué pode-
mos aprender de esta versión de prueba.
Sitios Web - HTML 18
Lección

2
19
Explorando la resolución
de problemas

Cierre
4 ¿Qué aprendimos hoy? Fundamentos de pensamiento computacional y programación

Hasta este momento, los estudiantes ya han puesto en prác- Poner en práctica la resolución de problemas propicia la re-
tica el proceso de resolución de problemas sin conocer sus flexión, crítica y prueba al resolver distintas problemáticas; de-
pasos como tal. Para cerciorarte de ello, lanza las siguientes sarrollando un pensamiento crítico y el trabajo colaborativo al
preguntas para que las contesten alzando la mano: cuestionar y mejorar las ideas de solución.

• ¿Cuál fue tu parte favorita de esta actividad?


• ¿Qué fue más desafiante? Descripción de los contenidos de pensamiento computacional y
• ¿Qué tiene que ver con la Informática esta actividad? programación necesarios para el profesor

Para concluir la clase comparte lo siguiente: Para llevar a cabo las actividades con los estudiantes, debes
conocer la importancia del proceso de resolución de proble-
Todos sus pensamientos sobre estas preguntas fueron gran- mas y puedes apoyarte del:
diosos. Puede que estés acostumbrado a pensar que las cien-
cias de la computación tienen que ver solamente con las com- • Video de la lección - Telecuantrix.
putadoras.

Estoy aquí para decirte que, ante todo, la informática se trata Actividades presenciales que realizará el profesor con su grupo para
de resolver problemas, y eso es lo que estábamos haciendo la práctica de códigos y símbolos de la herramienta base.
hoy. Muchas otras partes de esta actividad, como mejorar di-
seños, trabajar en equipo y construir cosas, también serán una
gran parte de esta clase. Espero que estés emocionado por el Los estudiantes deberán encontrar soluciones a un divertido
curso. reto de barcos o torres.

Objetivo

Proporcionar a los estudiantes la práctica en el proceso de resolución de


problemas en una variedad de contextos.
Sitios Web - HTML 20
21

Habilidades Contenidos Recursos “El proceso de resolución de problemas consta de: la definición,
el preparar, probar y reflexionar, las veces que sean necesarias
• Creatividad • Resolución • Google Maps hasta llegar a una solución. Existen diferentes tipos de proble-
• Toma de decisiones de problemas • Guía de actividades – Usando la mas de la vida real y estos cuatro pasos del proceso de reso-
• Trabajo colaborativo resolución de problemas lución de problemas es clave. Hoy veremos una gran variedad
• Video de la lección - Telecuantrix de problemas, hablaremos sobre lo que los hace diferentes y
reflexionaremos sobre cómo el proceso de resolución de pro-
blemas nos ayuda a resolverlos”.

Vocabulario Desarrollo
Resolución de problemas: Es la capacidad para identificar un problema, tomar me- 2 Resolviendo problemas
didas lógicas para encontrar una solución deseada, supervisar y evaluar la imple-
mentación de tal solución. Para dar inicio con las actividades, forma equipo con los estu-
diantes, brinda una Guía de actividades – Usando la resolución
Proceso de resolución de problemas: Es el procedimiento que permite solucionar un de problemas, pide que no la vean.
problema.
Una vez que las estudiantes están en equipos, pide que volteen
sus guías de actividades y comiencen el primer desafío. Encon-
trarán las 8 palabras en una cuadrícula de letras de 20 por 20.
Apertura
Recorre el salón observando cómo las estudiantes abordan el
1 ¡A presentarnos! problema. Asegúrate de que los equipos no compartan ubi-
caciones de palabras. Aliéntalos a pensar cómo hacer un plan
Para iniciar con esta lección, comparte con los estudiantes lo podría ayudarlos a abordar esta tarea.
siguiente:
Una vez que todos los grupos hayan terminado, reúne la clase
nuevamente. Haz que los estudiantes pasen a la última página
de la guía de actividades donde hay una tabla para registrar
sus experiencias con el problema. Ellos registrarán qué partes
de la solución de este problema se encuentran dentro de cada
paso del proceso de resolución de problemas.

Comenta brevemente con las estudiantes qué partes de la


actividad sintieron que cayeron en cada paso del proceso de
resolución de problemas. Algunos puntos posibles para hacer
después con los estudiantes están a continuación:
Sitios Web - HTML 22
23

• Definir: El problema ya estaba muy bien definido.


• Preparar: Desarrollar un plan con un equipo (como dividir las • Definir: El problema parece ser un problema de asientos indi-
palabras, dividir la cuadrícula en secciones separadas en las viduales. Sin embargo, si lo considera como un problema de
que cada miembro busca, o simplemente ser metódico al asientos de grupos de personas a quienes les gustaría estar
buscar palabras) hace que este problema sea mucho más juntos, hay muchas menos soluciones posibles que conside-
fácil de resolver que la búsqueda aleatoria. rar.
• Prepárate: Pide a los estudiantes que compartan qué tipos de
• Probar: Paciencia y persistencia es importante para ver su estrategias consideraron antes de comenzar a asignar a las
plan a través de diferentes perspectivas. personas a los asientos.

• Reflexión: Si sus primeros planes no funcionan, pueden rea- • Prueba: Como antes, la paciencia y la persistencia son impor-
gruparse y elegir un nuevo plan. tantes para realizar su plan.

2 Invitados de cumpleaños • Reflexionar: Si las estrategias iniciales no funcionan, es posible


que los grupos se hayan reagrupado y hayan intentado un
Introduce a la clase al problema de los invitados de cumplea- enfoque más estructurado.
ños. Los equipos aún pueden trabajar juntos en sus soluciones,
pero no deben compartirlos con otros grupos. 3 Planea un viaje

Como antes, recorre el salón y observa los tipos de estrategias Los estudiantes necesitarán trabajar en línea para este pro-
que usan los equipos. blema, utilizarán Google Maps - Sitio web o alguna otra herra-
mienta que les permita planear un viaje.
Recuerda usar los pasos del proceso de resolución de proble-
mas para ayudarlos si se estancan. Pasa al problema Planificar un viaje junto con la clase. Cada
miembro del equipo desarrollará un plan individual para un
Una vez que los equipos hayan terminado de resolver el proble- viaje que siga los criterios que desarrollarán como equipo. An-
ma, solicita que pasen a la última página de la guía de activi- tes de reunirlos en equipo, deberán demostrar cómo funciona
dades para registrar cómo utilizaron el proceso de resolución la herramienta que están utilizando. Un buen conjunto de pasos
de problemas para resolver este problema. para mostrarlos podría ser:

• Discutir: Discutir brevemente con las estudiantes en qué par- • Encuentra tu escuela en el mapa.
tes de la actividad sintieron que cayeron en cada paso del
proceso de resolución de problemas. Algunos puntos posi- • Busca algo familiar para los estudiantes cercano a la escuela.
bles para hacer después de que los estudiantes comparten
están a continuación. • Genera direcciones desde la escuela a la otra ubicación, eli-
giendo el método de viaje (caminar / autobús / automóvil / etc.)

• Resalta donde la herramienta muestra el tiempo total del viaje.


Sitios Web - HTML 24
25

Brinda tiempo a los estudiantes para que elijan los criterios que Es útil definir una lista de posibles destinos. También puedes op-
usarán para planificar su viaje. Por ejemplo, puede haber cier- tar por señalar que toda esta actividad es un ejemplo de pre-
tos tipos de actividades que les gustaría hacer, lugares que de- paración. No puedes realizar todos los viajes posibles y luego
finitivamente quieren incluir, personas que quieren visitar, etc. elegir el mejor, por lo que debes hacer el tipo de planificación
que están haciendo aquí.
Una vez que los equipos tengan criterios definidos, avanzarán
en la actividad desarrollando un plan para visitar los lugares en Como antes, la paciencia y la persistencia son importantes
un día escolar. Da un límite de tiempo en esta parte del proce- para realizar su plan.
so, por ejemplo, 15 minutos, para asegurarte que se centrarán
en los elementos clave de su plan en lugar de perfeccionarlo. En este problema la reflexión vino principalmente a través de la
Deben registrar información clave sobre su plan en sus guías retroalimentación de los compañeros. Algunos destinos pue-
de actividades. den no ser tan interesantes para otros miembros del grupo.
Algunos viajes son divertidos, pero requieren demasiada con-
Reúne a los equipos y pide que compartan sus planes iniciales. ducción. La retroalimentación es una parte importante del paso
En las guías de actividades, pueden registrar los comentarios de reflexión, especialmente en el trabajo grupal.
que sus compañeros les dan sobre sus planes.

Una vez que los equipos hayan discutido lo que les gusta o no les Cierre
gusta de los planes propuestos por sus compañeros de clase,
pide reexaminarlos y realizar mejoras. ¿Hay otras cosas que les 4 ¿Qué aprendimos hoy?
gustaría hacer?, ¿tienen nuevos criterios? Da algunos minutos
para hacer mejoras en su plan antes de decidirse por una ver- Hasta este momento los estudiantes ya han puesto en práctica
sión final. el proceso de resolución de problemas en diversas situaciones.
Para cerciorarte de ello, lanza las siguientes preguntas para
Reúne a la clase y haz que escriban los diferentes pasos del que las contesten alzando la mano:
proceso de resolución de problemas que utilizaron en sus guías
de actividades. • Para cada paso en el proceso de resolución de problemas,
¿cuál es su propósito?, ¿por qué están incluidos?
Discute brevemente con los estudiantes qué partes de la acti- • ¿Hay algún tipo de problema que el proceso de resolución de
vidad sintieron que cayeron en cada paso del proceso de re- problemas sea particularmente útil para resolver?
solución de problemas. Abajo hay algunos puntos posibles por
hacer después de que las estudiantes compartan. Por último, comparte con la clase:
Este problema no estaba bien definido. Necesitaban decidir por El proceso de resolución de problemas es particularmente útil
sí mismos cómo era un “buen” itinerario, y esta definición podría cuando encontramos problemas poco definidos. Hoy vimos
incluso cambiar a lo largo del proceso. que, sin un problema bien definido, el resto del proceso de re-
solución de problemas es difícil de seguir. ¿Cuáles son algunas
preguntas o estrategias que podemos usar para ayudarnos
a comprender y definir mejor los problemas antes de intentar
resolverlos?
Sitios Web - HTML 26
Lección

3
27

¿Qué es una computadora?

Recursos
Fundamentos de pensamiento computacional y programación Habilidades Contenidos
• Diagrama de una computadora
Las computadoras fueron desarrolladas con la finalidad de • Toma de decisiones • Resolución •¿Qué es una computadora? - Ac-
resolver tareas con rapidez y eficacia para aligerar el trabajo • Pensamiento crítico de problemas tividad CODE.org
humano. Es decir, para atender la resolución de problemas. •¿Qué es una computadora? - Guía
de actividades
•¿Qué hace que una computadora,
Descripción de los contenidos de pensamiento computacional y sea una computadora? - Video
programación necesarios para el profesor • Video de la lección - Telecuantrix

Para llevar a cabo las actividades con los estudiantes, consulta


previamente las actividades y recursos de la lección y apóyate
del: Vocabulario

• Video de la lección - Telecuantrix Computadora: Una máquina que ayuda con ciertos tipos de pensamiento al proce-
sar la información. Y que es capaz de ingresar, emitir, almacenar y procesar infor-
mación.

Actividades presenciales que realizará el profesor con su grupo para


la práctica de códigos y símbolos de la herramienta base.
Apertura
Los estudiantes identificarán las características de una com-
putadora, desde el proceso de información que realizan para la 1 ¿Qué problemas te ayudan a resolver las computadoras?
resolución de problemas (ingresa, emite, almacena y procesa
información). En la actualidad, usamos computadoras casi constantemente
¿qué tipo de problemas te ayudan a resolver las computado-
ras?, ¿cómo te ayudan a hacer esto?
Objetivo
Escucha a los estudiantes y realiza una lluvia de ideas, regis-
Considerar diferentes tipos de computadoras y aprender que ingresan, trando las ideas en el pizarrón.
almacenan, procesan y generan información como parte del proceso de
resolución de problemas.
Reflexiona con los estudiantes lo siguiente: las computadoras son claramente una parte
importante de nuestras vidas y nos ayudan a resolver todo tipo de problemas. Quiero
pensar más sobre los tipos de problemas que las computadoras nos ayudan a resol-
ver, pero primero quiero hacer una pregunta importante; ¿Qué es una computadora?
Sitios Web - HTML 28
29

Desarrollo
2 ¿Computadora o no? Invita a los demás estudiantes a cuestionar respetuosamente
cualquier categorización si no está de acuerdo con las decisio-
Para dar inicio a las actividades coloca a los estudiantes en nes del equipo presentador.
equipos de 3 o 4 y distribuye ¿Qué es una computadora? - Guía
de actividades así como tijeras, marcadores / lápices de colo- Menciona a los estudiantes lo siguiente: como pueden ver, no
res, papel para carteles y pegamento / cinta adhesiva. siempre está claro si algo es una computadora, incluso los ex-
pertos a veces tienen diferentes puntos de vista. Echemos un
Da a los estudiantes las siguientes instrucciones: vistazo a una definición que usaremos a lo largo de este curso.

• Dibujen una línea en el medio de su cartel, etiquete un lado Consulten el video: ¿Qué hace que una computadora, sea una
“Computadora” y el otro “No es una computadora”. computadora? - Video
• Discutan en equipo cuáles de los objetos en su conjunto (de
la guía de actividades) pertenecen a cada categoría. El video presenta una computadora como una máquina que
• Una vez que los equipos estén de acuerdo, peguen sus objetos ayuda con ciertos tipos de pensamiento al procesar la infor-
en el lado apropiado mación. Introduce formalmente un modelo de una computa-
• Generen una lista de características que utilizaron para de- dora como una máquina que ingresa, emite, almacena y pro-
terminar si un objeto es una computadora. cesa información.

Como docente alienta a los grupos a hablar abiertamente so- Permite que los estudiantes que revisen sus carteles usando la
bre sus ideas y explica por qué creen o no que un objeto debe definición que acaban de aprender. Y Pregunta
categorizarse como una computadora. Para los equipos que no
pueden decidir sobre una categorización, pide a los integran- • ¿Algún grupo cambió de opinión sobre si algo era una com-
tes que defiendan sus puntos de vista y que tomen el voto de putadora?, ¿qué hay de la definición que te convenció?
la mayoría. Asegura a los equipos que está bien si una o dos
personas no están de acuerdo.
Cierre
Al final del tiempo, reúne a la clase y pide que coloquen sus
carteles en la parte delantera del salón y presenten sus cate- Hoy tuvimos la oportunidad de ver una definición de compu-
gorizaciones. tadora que se enfoca en cómo la computadora resuelve pro-
blemas. También hemos visto muchos tipos diferentes de com-
Pide a cada equipo que presente brevemente sus carteles, en- putadoras.
focando su discusión en los siguientes puntos: En una hoja, piense en un problema que una computadora pue-
de ayudarlo a resolver.
•¿Qué reglas o definición usaste para categorizar tus objetos?
•¿Qué elemento fue más difícil para categorizar?, ¿cómo final- • ¿Cuál es el problema?
mente tomaste la decisión de dónde ubicarlo? • ¿Qué información se ingresa a la computadora?
• ¿Qué información almacena la computadora?
• ¿Qué información procesa la computadora?
• ¿Qué información saca la computadora?
Sitios Web - HTML 30
Lección

4
31
Entrada, salida, almacenamiento
y procesamiento

Habilidades Recursos
Fundamentos de pensamiento computacional y programación
• Pensamiento crítico • Entrada y salida - guía de actividades
Comprender como las computadoras ingresan, almacenan, • Trabajo colaborativo • Entrada y salida – CODE
procesan y dan salida a información, nos ayuda a comprender • Tarjetas numéricas
su funcionamiento y cómo dan respuesta a nuestras diferen- • Procesamiento - CODE
tes acciones, por ejemplo, cuando presionamos una tecla de Contenidos • Sorteo de tarjetas - guía de actividades
nuestro teclado y vemos en la pantalla la letra seleccionada. • Almacenamiento y procesamiento - Guía de activi-
• Funcionamiento dades
de una computadora • Video de la lección - Telecuantrix
Descripción de los contenidos de pensamiento computacional y • Video de la lección - Telecuantrix
programación necesarios para el profesor • Video de la lección - Telecuantrix

Para llevar a cabo las actividades con los estudiantes, consulta


previamente las actividades y recursos de la lección y apóyate
del:
Vocabulario
• Video de la lección - Telecuantrix
• Video de la lección - Telecuantrix Dispositivos informáticos: Son herramientas que permiten la comunicación entre el
• Video de la lección - Telecuantrix Hombre y la Maquina, Maquina y Maquina, Maquina Hombre.

Para acceder a las actividades o recursos de CODE.org es ne- Dispositivos de entrada: Un dispositivo o componente que permite darle informa-
cesario ingresar a tu cuenta. ción a la computadora..

Dispositivos de salida: Cualquier componente o dispositivo que arroja información


Actividades presenciales que realizará el profesor con su grupo para de una computadora.
la práctica de códigos y símbolos de la herramienta base.
Procesamiento de información: Es lo que hace una computadora para convertir las
Los estudiantes desarrollarán la comprensión de cómo las entradas en salidas.
computadoras ingresan, almacenan, procesan y dan salida a
información. Almacenamiento de información: La conservación de información empleando una
tecnología específicamente desarrollada para mantener los datos y que se encuen-
tren accesibles siempre que sean necesarios.
Objetivo
Algoritmo: Una secuencia precisa de instrucciones para procesos que pueden ser
Comprenden la forma en que una computadora ingresa y emite ejecutados por una computadora.
información.
Sitios Web - HTML 32
33

Apertura Desarrollo
1 ”Cosas” es información 2 Clasificación de tarjetas

Comparte con los estudiantes lo siguiente: una computadora Coloca a los estudiantes en parejas, reparte a cada pareja
es un dispositivo que “procesa información”. Esa frase todavía aproximadamente 10 cartas. Coloca las cartas en una pila boca
es un poco vaga, así que vamos a ver si podemos aclararlo un abajo entre pares y pide a los estudiantes que no toquen las
poco. ¿Qué tipo de “cosas” usas, miras, creas o editas en una tarjetas hasta que lo indiques.
computadora que crees que podría ser información?
Da a conocer las reglas del desafío:
Buen trabajo, y estoy seguro de que podríamos pensar en más
ejemplos si lo intentáramos. Todos los ejemplos que acaban de • No hablar durante el desafío.
proporcionar son la “información” que usan las computadoras • El objetivo es poner las cartas en línea, boca arriba, en orden
para procesar. numérico.
• Cuando hayas terminado, un miembro del equipo debe decir
Coloca a las estudiantes en equipos pequeños de 2 o 3 y dis- “¡listo!” y se les indicará en cuanto tiempo terminaron.
tribuye “Entrada y salida - Guía de actividades”
Una vez que la clase entienda la actividad, comienza el desafío.
En la parte delantera del salón, coloca un cartel / pizarrón gran- Puedes elegir proyectar un cronómetro si lo deseas para com-
de o proyecta un documento en el que anotarás todas las en- parar. Una vez que los grupos hayan terminado, brinda otra
tradas y salidas que los estudiantes identifiquen en esta activi- oportunidad para mejorar sus tiempos.
dad. Pide a los estudiantes completen la guía de actividades al
enumerar todas las entradas y salidas posibles de los diferentes Pide a los estudiantes que escriban sobre las siguientes indi-
dispositivos. caciones:

Alienta a los estudiantes a que compartan los resultados de su • ¿Cuáles son los datos de entrada, salida y procesamiento en
lluvia de ideas. Mientras los comparten, registra sus respuestas esta actividad?
en el cartel / pizarrón al frente del salón. Menciona que la comu- • ¿De qué manera su enfoque para resolver este problema es
nicación a través de Internet es una forma de entrada y salida. diferente de cómo una computadora tendría que abordarlo?
Otro ejemplo puede ser, si un teléfono inteligente te muestra
dónde te encuentras en un mapa, entonces debe saber de al- Intenta resaltar los siguientes puntos mientras sintetizas los co-
guna manera dónde te encuentras, En otras palabras, debe ha- mentarios de la clase.
ber algún tipo de entrada (un sistema de GPS) que proporcione
esa información. Del mismo modo, si un teléfono sabe cuándo • La entrada es “las cartas sin clasificar”.
te has girado, debe haber algún tipo de dispositivo de entrada • El resultado o salida es el mazo ordenado.
que esté detectando cómo se posiciona un teléfono. • El procesamiento es el proceso de clasificación real que con-
vierte la entrada en la salida.
Sitios Web - HTML 34
35

Cierre
Para reforzar la actividad se recomienda llevar a cabo “Sorteo Haz una lluvia de ideas sobre tres actividades diarias que tu o
de tarjetas - guía de actividades”. Y comparte con los estudian- las personas que conoces hacen con una computadora.
tes lo siguiente:
• ¿Cuál es la entrada utilizada para esa actividad?
Las computadoras nos ayudan a resolver problemas proce- • ¿Cuál es el resultado?
sando entradas para producir productos/salidas. Eso a menudo • ¿Cuáles fueron las entradas, salidas, almacenamiento y pro-
puede significar más trabajo por adelantado para desarro- cesamiento en esta actividad?
llar pasos muy específicos que una computadora podría usar • ¿Por qué necesita almacenar información como parte de
para procesar la información. Puede ser complicado y requiere sus algoritmos en esta actividad?
muchas de nuestras habilidades para resolver problemas. El • ¿Alguna vez usaste una computadora para encontrar el “más
beneficio, sin embargo, es que una vez que se haya resuelto el grande” o el “más pequeño” de algo?
problema una vez, una computadora resolverá ese problema • ¿Cuáles son las entradas y salidas en ese ejemplo?
cada vez que se presente.

3 ¿Qué es almacenamiento?

Pregunta a los estudiantes: ¿Qué cosas puede almacenar una


computadora para poder trabajar?, ¿puedes pensar en algún
ejemplo de algo que almacena una computadora?

Comparte con los estudiantes lo siguiente: Cuando pensamos


en el almacenamiento, a menudo pensamos en los archivos.
Es necesario almacenar música, fotos, documentos, películas
y muchas otras cosas en una computadora para usarlas. Sin
embargo, lo que no siempre nos damos cuenta es la importan-
cia del almacenamiento incluso dentro del procesamiento de
la información. Hoy vamos a explorar algoritmos de nuevo con
un nuevo desafío, esta vez que nos muestra un poco acerca de
cómo piensan los científicos sobre el almacenamiento.

Distribuye Almacenamiento y procesamiento - Guía de acti-


vidades para cada equipo, tarjetas y hojas de papel. Deberán
desarrollar su algoritmo de acuerdo a las reglas y comprobar
su funcionamiento de acuerdo a las indicaciones de la guía.
Sitios Web - HTML 36
Lección

5
37

Explorando sitios Web

Recursos
Fundamentos de pensamiento computacional y programación Habilidades Contenidos
• El propósito de los sitios web - guía
La World Wide Web (www) favorece a la autoexpresión al crear • Pensamiento crítico • Sitios web de actividades
sitios web que brindan un propósito, una razón por la que alguien • Trabajo colaborativo • El propósito de los sitios web -
los creó y otros los usan. CODE
• Video de la lección - Telecuantrix

Descripción de los contenidos de pensamiento computacional y


programación necesarios para el profesor

Para llevar a cabo las actividades con los estudiantes, consulta


previamente las actividades y recursos de la lección y apóyate
del:
Vocabulario
• Video de la lección - Telecuantrix
Sitio web: Una colección de páginas web interconectadas en la World Wide Web.
Para acceder a las actividades o recursos de CODE.org es ne-
cesario ingresar a tu cuenta.

Apertura
Actividades presenciales que realizará el profesor con su grupo para
la práctica de códigos y símbolos de la herramienta base. 1 “El último sitio web que viste”

Los estudiantes desarrollarán la comprensión de cómo los sitios Inicia las actividades preguntando a los estudiantes: ¿Cuál fue
web tienen un propósito tanto para los usuarios como para los el último sitio web que visitaron?, ¿por qué fueron a ese sitio
creadores. web?

Pide a los estudiantes que compartan el último sitio web que


Objetivo visitaron. Asegúrate de que compartan por qué fueron a ese
sitio web y qué información estaban buscando. Además, pue-
Comprender los propósitos para los que un sitio web podría servir, des preguntar si el sitio web les proporcionó la información que
tanto para los usuarios como para los creadores. querían.
Sitios Web - HTML 38
39

2 Sitios web que utilizamos con frecuencia


En caso de no contar con computadoras podrán reflexionar la
Pide a los estudiantes que entre pares elaboren una lista de 5 información como clase.
sitios web, que consideren son “los más visitos”. Estos pueden
incluir sitios web que visitan con frecuencia, pero también de- Los siguientes son los sitios web más visitados. Cada uno inclu-
berán considerar páginas que usan con frecuencia otras per- ye una breve descripción de la función principal del sitio web.
sonas en su vida.
• Google.com - Motor de búsqueda de sitios web, imágenes,
Como clase compartan sus ideas y registren una lista. Pregunta videos y otros medios.
lo siguiente: • Youtube.com - Sitio de video subidos por el usuario con cali-
ficaciones y comentarios.
¿por qué creen que estos sitios web se usan tan comúnmente?, • Facebook.com - Comunidad de medios sociales que permite
¿para qué sirven, o qué problemas resuelven? a los usuarios compartir información con amigos.
• Amazon.com - Sitios de compras en línea para todo tipo de
productos.
• Yahoo.com- un motor de búsqueda, proveedor de correo elec-
Desarrollo trónico y fuente de noticias
• Wikipedia.org - Una enciclopedia gratuita con contenido ge-
3 Encontrando el propósito nerado por los usuarios.

Comparte con los estudiantes: se nos ocurren una gran canti- Utilizando una lista de los diez mejores sitios web, pide a las
dad de razones por las cuales las personas pueden usar algu- parejas que seleccionen tres sitios de su interés y respondan
nos de los sitios web más visitados, pero eso es solo un lado de las siguientes preguntas:
la imagen. Las personas que crean sitios web también tienen
sus propias razones para hacerlo. En la próxima actividad, co- •¿Por qué las personas pueden usar este sitio (¿para qué sirve
menzará a pensar en los propósitos de varios sitios web sirven a los usuarios?)
tanto para el usuario como para el creador. •¿Por qué los creadores pueden haber creado ese sitio (¿para
qué sirve a los creadores?)
A continuación, se agruparán en parejas y se les distribuirá la
“guía de actividad – el propósito de los sitios web”, se dirigirá a Alienta a los estudiantes a ser lo más detallistas cuando hagan
los estudiantes al nivel “Top Websites” en Code Studio. una lluvia de ideas sobre los propósitos de estos sitios y com-
partan sus ideas.
Sitios Web - HTML 40
Lección

6
41

Sitios Web para la expresión

4 Sitios web personales Fundamentos de pensamiento computacional y programación

La segunda página de esta guía de actividades anima a los Es importante ver el desarrollo web como otro medio de autoex-
estudiantes a pasar de pensar en grandes sitios que satisfacen presión junto con el arte visual, la danza, la música, la moda, las
las necesidades de millones de personas a sitios pequeños que redes sociales y muchas otras formas en que los estudiantes
podrían crear y que pueden atender las necesidades de un ya se están expresando.
grupo reducido de usuarios.

Lee la descripción del sitio web personal con la clase: Descripción de los contenidos de pensamiento computacional y
programación necesarios para el profesor
Julia quiere convertirse en una mejor cocinera doméstica, por
lo que comenzó un blog donde puede publicar sobre las rece- Para llevar a cabo las actividades con los estudiantes, consulta
tas que prueba. Cada semana, Julia intenta una nueva receta previamente las actividades y recursos de la lección y apóyate
y agrega una página al blog. A veces las recetas salen muy del:
bien y los lectores de su blog dejan sus alentadores comenta-
rios. Ocasionalmente, sus intentos de recetas no salen tan bien, • Video de la lección - Telecuantrix
pero todavía publica y generalmente recibe algunos consejos
útiles de sus lectores. Después de comenzar a escribir un blog Para acceder a las actividades o recursos de CODE.org es ne-
sobre las comidas que prepara, Julia comenzó a cocinar con cesario ingresar a tu cuenta.
más frecuencia y está probando platos que nunca antes había
probado.
Actividades presenciales que realizará el profesor con su grupo para
Brinda a los estudiantes la oportunidad de hacer preguntas la práctica de códigos y símbolos de la herramienta base.
sobre este ejemplo de sitio.

Asegúrate de que entiendan cómo un sitio pequeño que es Los estudiantes investigan formas de usar sitios web como
principalmente una herramienta para la autoexpresión indivi- medio de expresión personal y desarrollan una lista de temas
dual también puede ser un sitio útil para otras personas. e intereses que desearían incluir en un sitio web personal.

Cierre
Objetivo
En este punto, simplemente hemos arañado la superficie de
los sitios web en realidad, y ni siquiera hemos comenzado a Considerar y analizar qué mensajes se quieren expresar al construir
crear sitios web propios. En su libreta, propongan y anoten tres sitios web.
objetivos para ustedes que podrían estar relacionados con la
mejora de una de nuestras prácticas de clase, aprender cómo
crear un tipo específico de sitio web o crear un sitio que sirva
para ustedes o para otros.
Sitios Web - HTML 42
43

Desarrollo
Habilidades Contenidos Recursos Pide a los estudiantes que abran su libreta u opcionalmente
distribuye “Sitio web personal - Guía de actividades”
• Pensamiento crítico • Sitios web • Sitios web personales - Guía de
• Trabajo colaborativo actividades Resuelvan y compartan ideas con otros compañeros, una
• Creatividad • Sitios web personales - ejemplos cosa importante a considerar no es solo lo que quieren decir,
CODE sino cómo quieren decirlo. Acaban de crear una lista de ideas
• Video de la lección - Telecuantrix que quizás quieran compartir en tus sitios web personales.

Echemos un vistazo a algunos sitios web personales que otros


estudiantes han creado y piense no solo sobre el contenido
que están compartiendo, sino sobre cómo están presentando
Vocabulario ese mensaje.

Contenido del sitio web: Texto sin formato, imágenes y otros elementos incluidos en Ingresen a Sitios web personales - ejemplos CODE y pide que
una página web. examinen los sitios web en parejas. Utilice estos sitios web
como inspiración.

Boceto del sitio web:


Apertura Brinda a los estudiantes un poco de tiempo para dibujar una
página desde su sitio web. Recuerda a los estudiantes que de-
1 Exprésate berían pensar en distintas formas de compartir el contenido
de estos sitios.
Pregunta a los estudiantes: ¿De qué manera se expresan us-
tedes o sus amigos? Piensen en diferentes formas de comuni-
cación, actividades o espacios que consideren una forma de Cierre
autoexpresión.
Brinda a los estudiantes la oportunidad de compartir sus bo-
Los estudiantes deben intercambiar ideas de forma indepen- cetos de sitios web con un compañero.
diente, luego compartir con un compañero y finalmente com-
partir con la clase en general.

Menciona a los estudiantes lo siguiente:


Compartimos nuestros pensamientos, sentimientos e ideas de
diferentes maneras. Algunas personas pueden expresar sus
pensamientos en línea, otros pueden hacerlo por la forma en
que se visten o por hacer una canción o hacer un dibujo. La
autoexpresión es una parte muy importante de nuestras vidas,
y como veremos, hacer sitios web es otra manera en que po-
demos expresar nuestras ideas, intereses y sentimientos.
Sitios Web - HTML 44
Lección

7
45

¿Qué es emprendimiento?

Habilidades Contenidos Recursos


Fundamentos de pensamiento computacional y programación
• Resolución de • Emprendimiento • Tarjetas para armar un empren-
Muchas soluciones innovadoras surgen de la reflexión de pro- problemas dedor
blemáticas sociales. El emprendimiento puede llegar a com- • Trabajo colaborativo • Infografías digitales
binar ideas de negocio + tecnología, teniendo como resultado • Creatividad • Video de la lección - Telecuantrix
“emprendimiento tecnológico”, es decir, soluciones que se apo-
yan de la tecnología.

Descripción de los contenidos de pensamiento computacional y


programación necesarios para el profesor Vocabulario

Para llevar a cabo las actividades con los estudiantes, consulta Emprendimiento: Llevar adelante una obra o un negocio.
previamente las actividades y recursos de la lección y apóyate
del: Brainstorming: Técnica de grupo para generar ideas originales en un ambiente crea-
tivo.
• Video de la lección - Telecuantrix

Actividades presenciales que realizará el profesor con su grupo para Apertura


la práctica de códigos y símbolos de la herramienta base.
1 Lluvia de ideas sobre emprendimiento
Los estudiantes proponen utilizar la tecnología para abordar
problemáticas de su entorno. Para dar inicio al curso genera una lluvia de ideas, coloca la
pregunta “¿Qué es emprendimiento tecnológico?” en el piza-
rrón y pide a cada estudiante aportar una idea sobre que se
Objetivo imagina qué es, todas las ideas son válidas. Podrán escribir las
ideas en el pizarrón o utilizar post-it finalizando con una idea
Conocer e identificar las oportunidades del emprendimiento en el general.
sector tecnológico.
A continuación, muestra los siguientes videos a los estudiantes
que los ayudarán a comprender la idea de emprender.

• Project Loon
Se compone de una red de globos que viaja sobre el límite
con el espacio exterior. Está pensado para extender la conec-
tividad a Internet a las personas que habitan áreas rurales y
remotas en todo el mundo.
Sitios Web - HTML 46
47

• Hyperloop Reflexiona con los estudiantes lo siguiente: lel emprendimiento tecnológico como bien
Un proyecto propuesto por la empresa de transporte aeroes- hemos mencionado se basa en la aplicación, uso o creación de una tecnología, para
pacial SpaceX, se trata de la implementación de transporte la resolución de una necesidad o problema.
de pasajeros y mercancías en tubos al vacío a alta velocidad.
• Apple Pay -NFC
Es un sistema de pagos vía NFC para hacer compras y pa-
gar rápidamente, directamente desde tu celular, es decir, el Desarrollo
celular es utilizado como el medio para las transacciones sin
efectivo, en sustitución de la cartera. Con el avance de la tecnología, sus diversos usos y aplica-
• Medicina - Exoesqueletos ciones las necesidades y habilidades en el mundo laboral
Dispositivos médicos conectados a los smartphones, los cua- también han aumentado. Se han creado nuevos usos de la
les miden los signos vitales, la actividad y el estilo de vida, tecnología y han surgido nuevos trabajos como:
impresión 3D de órganos (bioimpresión), prótesis, exoesque-
letos, etc. • Community Manager: se encarga de gestionar redes socia-
• Internet de las Cosas (IOT) les (como facebook, Youtube, twitter, etc.) de una empresa
Aplicado a hogares inteligentes, cada vez suma más equipos desde el enfoque publicitario, servicio al cliente, resolución
conectados a Internet, y entre sí mismos. Desde neveras co- de problemas, etc.
nectadas que avisan cuando se acaba la leche, bombillas, • Creadores de contenido digital, videos, etc.
candados inteligentes y asistentes virtuales. • Ingenieros biomédicos
• Realidad virtual (VR) • Desarrolladores de software
Aplicada en estudios neurológicos para detección de tras- • Analistas de sistemas computacionales
tornos. • Especialistas en la nube (datos)
• Blockchain
Permite realizar transacciones de bienes y servicios, y regis- Por ello es importante el acercamiento de los niños, niñas y
tros de todo tipo para documentar y registrar prácticamente jóvenes al buen uso de la tecnología.
cualquier cosa. Un ejemplo es bitcoin, la criptomoneda que a
día de hoy es usada por millones de personas para efectuar A continuación, cuenta a los estudiantes acerca de algunos
pagos. emprendedores, que han utilizado y transformado el uso de
la tecnología. Como apoyo se cuenta con las infografías di-
Y pregunta: ¿qué entendieron?, ¿qué les sorprendió?, ¿les gus- gitales para mostrar y explicar.
taría emprender?
Reflexiona con los estudiantes lo siguiente: el emprendimiento • Alma Stephanie & Susana Tapia de NASA
tecnológico como bien hemos mencionado se basa en la apli- • Amy Villaseñor de Qualcomm
cación, uso o creación de una tecnología, para la resolución de • Beatriz Méndez Gandica de Microsoft
una necesidad o problema.
Sitios Web - HTML 48
Lección

8
49

Modelo de negocios

2 Actividad lúdica para armar un emprendedor Fundamentos de pensamiento computacional y programación

Ahora que los estudiantes conocen sobre emprendedores Un modelo de negocio es una herramienta que te permite defi-
realizarán una actividad para reforzar los conocimientos. nir el ADN de una empresa, ayudándole a saber quién es, cómo
lo hace, a qué costo, con qué medios y qué fuentes de ingresos
Se formarán equipos los cuales recortarán y mezclarán las tendrá.
Tarjetas para armar un emprendedor, que contienen: carac-
terísticas físicas, habilidades y aportaciones. Permite tener claridad en que ofrecer al mercado, cómo ha-
cerlo, a quién venderlo, cómo venderlo y de qué forma generar
Los equipos deberán escoger las piezas que consideran más ingresos.
interesantes y ensamblarlas, al finalizar cada equipo tendrá
completo a su emprendedor y explicará a los demás el perfil
y características de su emprendedor. Descripción de los contenidos de pensamiento computacional y
programación necesarios para el profesor
Es importante que los equipos se sientan identificados con su
emprendedor. Estos podrán quedarse pegados en el aula para Para llevar a cabo las actividades con los estudiantes, consulta
que todos puedan identificarlos y recordar las características previamente las actividades y recursos de la lección y apóyate
que definieron como equipo. del:

• Video de la lección - Telecuantrix

Cierre
Actividades presenciales que realizará el profesor con su grupo para
Reflexiona con los estudiantes el aprendizaje en clase y los co- la práctica de códigos y símbolos de la herramienta base.
nocimientos nuevos adquiridos, reforzando y recordando que
los conocimientos e inventos tecnológicos pueden convertirse
en una brillante idea innovadora. Los estudiantes conocerán que es un modelo de negocios y sus
etapas, de manera grupal y divertida crearán un modelo de
negocios durante la sesión, que los ayudará a tener una idea
completa y clara.

Objetivo

Conocer las etapas de un modelo de negocios, pensar en su propia


idea, crear un modelo de negocio conforme aprenden.
Sitios Web - HTML 50
51

Apertura
Habilidades Contenidos Recursos 1 Lluvia de ideas sobre emprendimiento

• Trabajo colaborativo • Modelo de • Lienzo de modelo de negocios Explica a los estudiantes qué es un modelo de negocios y ex-
• Creatividad negocios • Video de la lección - Telecuantrix plica sus 7 pasos.

1. Describe el problema: el primer paso es definir la necesidad


que se quiere resolver con una idea de negocio. Mediante
las necesidades se crean formas de satisfacerlas y así sur-
gen oportunidades de negocios, productos o servicios. Al
Vocabulario conocer el problema se podrá descubrir qué productos o
servicios son los más adecuados para satisfacer al cliente.
Canvas: Se trata de una herramienta utilizada para diseñar modelos de negocio, es
decir, crear la lógica de una empresa que abarque clientes, oferta, infraestructuras 2. Explica tu idea de negocios: Una vez que identificadas las
y viabilidad económica. soluciones se puede desarrollar un producto o servicio
que resuelva un problema, a partir de la solución surgirá
Problema o necesidad: Una sensación de carencia que requiere ser satisfecha. la idea de negocio. Es muy importante definir de manera
clara, sencilla y en una frase que hace especial a la idea de
Producto: Estos los puedes almacenar, tocar o ver. Por ejemplo: sillas, computadora, negocio y cómo se va a satisfacer a los clientes. La idea de
galletas. negocios puede ser un producto o servicio. Para que la idea
de negocio sea efectiva debe: cubrir una necesidad, que
Servicio: Los servicios no se pueden ver, tocar o almacenar. Son actividades que res- sea viable, que sea atractiva y que sea comercializable.
ponden a las necesidades del cliente.
3. Describe a tus clientes: Entre mejor se conozca a los clien-
Segmento de mercado: Detectar y clasificar a las personas, y/o organizaciones de tes mejor se podrá dar un servicio o producto que se ajuste
distintos grupos con características similares (edad, género, nivel de ingresos, tipos a lo que quieren o necesitan, se debe entender por qué
de población, etc.). compraran el servicio o producto que se les ofrece, cómo
se les puede vender y las estrategias para mantener su
Clientes potenciales: Todos aquellos consumidores que por sus características socia- fidelidad. Se puede tener varios tipos de clientes, por ello
les, económicas o demográficas son posibles compradores de un producto o servicio. es importante realizar segmentación de mercado, es decir,
clasificarlos.
Publicidad: Es una forma de comunicación que tiene por objetivo incrementar el
consumo de un producto o servicio, insertar una nueva marca, mejorar la imagen de 4. Explica tu propuesta de valor: Es lo que te hace diferente a
una marca o re posicionarla en la mente de un consumidor. Se lleva a cabo a través la competencia, lo que te da ventaja hacia los demás, aquí
de campañas publicitarias que se difunden por medios de comunicación. es donde se debe explicar los beneficios del negocio ¿qué
haces mejor?, la manera en que cubres las necesidades y
Distribución de producto: Es el conducto por el cual se llevarán los productos o ser- cómo se rebasan las expectativas de tus clientes. Por me-
vicios al cliente, es necesario elegirlas de manera eficiente y económica. dio de la propuesta de valor se explica a los clientes por que
deben comprarte a ti y no a otros, se identifica un rasgo
diferenciador que cubre una necesidad antes no identifica-
Sitios Web - HTML 52
53

da, por ejemplo: precio competitivo, innovación, garantías • Cuota por uso: Un pago cada vez que se utiliza el servi-
después de las ventas, rapidez del servicio. El aspecto en el cio, una vez o periódicamente. (por ejemplo, servicios de
que se destaca es la propuesta de valor y debe poder ser agua, luz, etc.).
resumida en una frase que sea: clara y fácil de entender, • Venta de espacios publicitarios: Vender espacios publici-
que comunique que obtendrá el cliente, y explique qué te tarios (revista o blog).
diferencia de la competencia. • Intercambio: intercambiar un producto o servicio por otro.

5. Define tu publicidad y distribución: Para comunicarse efec- 7. Describe tu plan de crecimiento: Para poder crecer es ne-
tivamente con los clientes es necesario que te conozcan y cesario tener un camino hacia el éxito, definiendo las acti-
para ello se requiere publicidad. Para elegir cómo hacerlo vidades que te impulsarán a crecer e incrementar ingresos.
es necesario entender a los clientes. Una vía de publicidad
son las redes sociales, para ello se debe entender cuáles Algunos ejemplos son: Generar alianzas, crear un sitio web, APP
son consumidos o visitados por los clientes. Es importante para teléfonos inteligentes, estrategia publicitaria en redes, de-
crear una estrategia publicitaria, definir los medios donde finir los lugares para expandirse, lanzar un blog, estrategia de
tendrás presencia y crear un mensaje e imagen. Cuanto el recomendaciones, descuentos y promociones.
cliente está interesado en adquirir tu marca se requiere un
plan de distribución, identificar cómo distribuir el producto
y cómo lograr introducirse al medio.
Desarrollo
6. ¿Cómo generas ingresos?: Para que la idea de negocios
exista por mucho tiempo y seas capaz de ofrecer el pro- Visualicen los siguientes videos para complementar el cono-
ducto o servicio, es necesario generar ingresos. Es necesa- cimiento.
rio establecer un precio que permita generar ganancias,
para ello hay que estar conscientes de los costos que se • Describe el problema POSiBLE
tienen (vivienda, pago de luz, Internet), para tener claridad • Explica tu idea de negocio POSiBLE
en cuánto costaría y si el precio es viable. Es importante • Describe a tus clientes POSiBLE
identificar cuántas unidades se tendrían que vender para • Propuesta de valor POSiBLE
cubrir los costos y recibir ingresos. Algunas opciones para • Define tu publicidad y distribución POSiBLE
generar ingresos son las siguientes: • Cómo generas ingresos POSiBLE
• Describe tú plan de crecimiento POSiBLE
• Venta o renta: ofrecer el producto y se obtiene dinero por
ello.
• Membresía o suscripción: el cliente paga una vez por mes
(ejemplo: un gimnasio).
• Licencias: un pago que se hace para tener el derecho de
utilizar un servicio (por ejemplo, uso de software).
Sitios Web - HTML 54
Lección

9
55
Desarrollo del modelo
de negocios

2 Describe el problema Fundamentos de pensamiento computacional y programación

Ahora que los estudiantes tienen claridad en cómo realizar un Unificar conocimientos acerca de emprendimiento y páginas
modelo de negocio, elegirán un problema de su comunidad, web, presenta la oportunidad del desarrollo de una idea inno-
el cual puedan resolver a través de una solución innovadora vadora tecnológica.
tecnológica por equipos, en el que les interese emprender la
cual deberá estar enfocada en el desarrollo de un sitio web.
Cuando el equipo decida el problema que querrán tratar, co- Descripción de los contenidos de pensamiento computacional y
menzarán a llenar su lienzo de modelo de negocios. programación necesarios para el profesor

Para llevar a cabo las actividades con los estudiantes, consulta


Cierre previamente las actividades y recursos de la lección y apóyate
del:
Pide a los estudiantes guardar su lienzo de modelo de nego-
cios, ya que en la siguiente sesión lo seguirán construyendo y • Video de la lección - Telecuantrix
podrán traer nuevas ideas que aportar a la idea.

Actividades presenciales que realizará el profesor con su grupo para


la práctica de códigos y símbolos de la herramienta base.

Los estudiantes desarrollarán su modelo de negocios basado


en una página web que brinde una solución a una problemá-
tica de su entorno.

Objetivo

Crear un modelo de negocios de una idea innovadora que brinde una


solución-tecnológica a una problemática de su comunidad a través
de una página web
Sitios Web - HTML 56
57

Desarrollo
Habilidades Contenidos Recursos 1 Crea tu proyecto

• Resolución de • Modelo de • Lienzo de modelo de negocios Los equipos se reunirán y realizarán su plan de ideación y ac-
problemas negocios • Video de la lección - Telecuantrix ción, es decir, en conjunto definirán el problema a atacar, la
• Trabajo colaborativo solución innovadora tecnológica a través de un sitio web, su
• Creatividad potencial y a quién va dirigido. Además, definirán cómo se in-
tegrará el modelo de negocios.

Por equipos se repartirá una hoja del lienzo de modelo de ne-


gocio, y cada equipo trabajará en su idea que deberá tener
Vocabulario integrada como base la creación de un sitio web.

Emprendimiento: Llevar adelante una obra o un negocio. El desarrollo del sitio web a lo largo del curso podrá ser la solu-
ción a la problemática o podrá ser un apoyo para explicar su
Brainstorming: Técnica de grupo para generar ideas originales en un ambiente crea- idea innovadora.
tivo.

Cierre
Apertura Recuerda a los estudiantes que este plan les será de guía e
inicio para la creación de su proyecto final.
Para dar inicio a las actividades se pedirá a los estudiantes reu-
nirse en equipos. Ahora, será momento de asignar roles dentro
de los equipos de acuerdo a las habilidades de los estudiantes,
identificando con que actividad se sienten cómodos y dónde
su aportación tendrá mayor impacto, explorando y potencian-
do sus habilidades.

Se recomiendan equipos de 6 participantes, que trabajen el


Modelo de negocios. Para lograr un proyecto completo y con-
gruente entre todo el equipo deberán tener una buena comu-
nicación al momento de definir la idea completa y atacar su
tarea.
Sitios Web - HTML 58
Lección

10
59

Introducción a HTML

Habilidades Contenidos Recursos


Fundamentos de pensamiento computacional y programación
• Pensamiento crítico • HTML • Introducción HTML - CODE
El lenguaje HTML permite a un programador comunicar la forma • Pensamiento lógico • Video de la lección - Telecuantrix
en que el contenido debe estructurarse en una página web y • Creatividad
así poder visualizarla.

Descripción de los contenidos de pensamiento computacional y


programación necesarios para el profesor

Para llevar a cabo las actividades con los estudiantes, consulta Vocabulario
previamente las actividades y recursos de la lección y apóyate
del: HTML: Lenguaje de marcado de hipertexto, un lenguaje utilizado para crear páginas
web.
• Video de la lección - Telecuantrix
Elemento HTML: Parte de un sitio web, marcado con una etiqueta de apertura y, a
Para ingresar a los ejercicios en CODE.org es necesario ingre- menudo, cerrado con una etiqueta de cierre.
sar a tu cuenta.
Etiqueta HTML: El conjunto especial de caracteres que indica el inicio y el final de un
elemento HTML y el tipo de ese elemento.
Actividades presenciales que realizará el profesor con su grupo para
la práctica de códigos y símbolos de la herramienta base. Contenido del sitio web: Texto sin formato, imágenes y otros elementos incluidos en
una página web.
Los estudiantes aprenderán el uso del lenguaje de programa-
ción HTML para la creación de sitios web básicos. En caso de Estructura del sitio web: El propósito de diferentes piezas de contenido en una pá-
no contar con computadoras se recomienda realizar las acti- gina web, utilizadas para ayudar a la computadora a determinar cómo debe mos-
vidades a través de la proyección. trarse ese contenido.

Objetivo

Conocer e identificar las etiquetas básicas del lenguaje de programa-


ción HTML para la creación de sitios web.
Sitios Web - HTML 60
61

Apertura
1 La necesidad de HTML Una vez que hayas terminado de dibujar el sitio, crea rápida-
mente una lista de todos los diferentes tipos de información
Muestra una página web como ejemplo y menciona a los es- que necesitan contar en sus instrucciones. Por ejemplo, ubica-
tudiantes lo siguiente: ción, tamaño, fuente, etc.

Imaginen que quieren explicar a una persona por teléfono cómo Menciona a los estudiantes:
dibujar esta página web. Escriban instrucciones claras, para que
lo que dibujen coincida perfectamente con esta imagen. Pide Hay mucha información que necesitamos comunicarnos si
a los estudiantes que escriban y compartan las instrucciones queremos crear páginas web. No es suficiente saber qué con-
que usarían. tenido desean colocar en su página, como las palabras o imá-
genes reales. Necesitas saber dónde deberían estar las cosas
Ejecuta una demostración rápida usando las instrucciones a y cómo deberían verse. Hoy vamos a empezar a aprender los
continuación: idiomas que se usan en la web para representar esta informa-
ción adicional.
• Elige una estudiante para compartir verbalmente una de sus
instrucciones.
• Como profesor actúa como la persona que está hablando Desarrollo
por teléfono tratando de dibujar la página web.
• “Dibuja” públicamente el sitio web exactamente como lo in- 2 Explorando HTML
dican las instrucciones de los estudiantes. Por ejemplo, si te
dicen “Escribir más grande”, escriba la palabra “más grande” Vamos a comenzar a trabajar con muchos recursos, a medida
en la página. Si no indican dónde va el texto, coloca el texto que descubramos cada tipo de recurso, lo agregaremos a una
en ubicaciones aleatorias. lista en el pizarrón y al final de la lección repasaremos cómo se
• A medida que el estudiante brinde instrucciones, pide que te usa cada uno.
digan si lo dibujaste correctamente. Si no lo dibujaste correc-
tamente, pide que hagan sus indicaciones más específicas En la parte delantera del salón, escribe el título “Recursos” en el
hasta que puedas dibujarlo correctamente. pizarrón o en papel blanco, dejando espacio para enumerar
• Cambia a los estudiantes después de un par de instruccio- los diversos recursos tal como aparecen en la lección.
nes para involucrar a más estudiantes.
• Mantén un registro de las instrucciones que los estudiantes Nuevas etiquetas
dan y las mejoras que hacen a las instrucciones en algún • HTML -<html></html>
lugar visible también. • Doctype -<!DOCTYPE>
• Repite este proceso hasta que haya recreado la mayor parte • párrafo -<p></p>
de la página web. • Cuerpo -<body></body>
• Cabeza -<head></head>
Sitios Web - HTML 62
63

Pide a los estudiantes ingresar al ejercicio en CODE.org Intro- 3 ¿Qué es HTML?


ducción HTML - CODE y comunica lo siguiente:
Para mostrar una página web, una computadora necesita sa-
La plataforma en la que te encuentras se llama Web Lab. Hay ber mucho más que las palabras o imágenes que deberían
tres partes principales de la pantalla en Web Lab “Archivos”, aparecer en la pantalla. Necesita saber dónde colocar el con-
“Espacio de trabajo / Código” y “Vista previa”. tenido, qué tamaño debe tener, qué fuentes y colores usar, y
mucha otra información que convierte el texto y las imágenes
• Prueba a escribir algo en el área de código normales en una página web completa.

• Presiona para verlo en el área de vista Para resolver este problema, los científicos informáticos han
previa! creado idiomas que comunican esta información adicional.
HTML, abreviatura de Hypertext Markup Language, es un len-
guaje que ayuda a resolver este problema. El uso de un siste-
ma de etiquetas HTML permite que un programador indique
el propósito de diferentes partes de una página web. Esto le
permite a la computadora saber cómo debe mostrar estos di-
ferentes elementos.

4 HTML etiquetas

HTML indica el propósito de diferentes partes de una página


Pregunta a los estudiantes: web rodeándolas con pares de etiquetas de apertura y cierre,
como en el ejemplo a continuación.
• ¿Qué texto está apareciendo tanto en el código como en la
página web? Al iniciar cualquier proyecto Web Lab se añadirá automática-
•¿Cómo comunica este idioma información adicional sobre la mente <!DOCTYPE>, <html>, <head>, y <body> etiquetas para su
forma de representar el texto? proyecto. Cuando agregas contenido al proyecto, deberás ha-
cerlo entre las etiquetas <body> y, </body> ya que debe formar
El objetivo es observar las características de HTML que los es- parte del cuerpo de tu página web.
tudiantes están notando. Las dos conclusiones principales son
que HTML utiliza un sistema de etiquetas para rodear el conte-
nido e indicar qué es y cómo debe mostrarse.
Sitios Web - HTML 64
65

Cierre
Pide a los estudiantes resolver los siguientes retos: En sus propias palabras, ¿cómo ayuda HTML a resolver el pro-
blema de decirle a una computadora cómo es una página web,
• Escribe tres oraciones separadas sobre cualquier tema que no solo qué contenido contiene?
te guste dentro de las etiquetas del cuerpo de tu página web
• Pulsa “Actualizar y Guardar” si no ve los cambios en el área Por último, comenta con los estudiantes lo siguiente:
de Vista previa
• Compara tu trabajo con un compañero. Asegúrate de colo- HTML usa etiquetas para ayudar a la computadora a saber cuá-
car el código en el mismo lugar. les son las diferentes partes del contenido en la página web. En
este momento, solo hemos aprendido a decirle a la computa-
Comenta con los estudiantes ¿qué es un elemento de párra- dora que un texto es un párrafo, o que parte de su sitio web es
fo?, ¿cómo imaginan que pueden crear múltiples párrafos? el cuerpo. Ya hemos visto cómo eso afecta la forma en que se
ven y se estructuran nuestras páginas web.
A continuación, aprenderán acerca de las etiquetas de párrafo: A medida que avancemos vamos a aprender más etiquetas y
ver más ejemplos de cómo este lenguaje nos ayuda a agregar
La <p> etiqueta o la etiqueta “párrafo” se coloca alrededor del estructura a nuestras páginas web.
texto para indicar que es parte de un párrafo. Colocar el texto
en una etiqueta de párrafo le permite a la computadora saber
que debe mostrarse de manera diferente.

Para ponerlo en práctica realicen lo siguiente:

• Coloca el texto que acabas de escribir dentro de al menos


dos párrafos

Con esto habrán logrado: escribir su código dentro del cuerpo


de la página web, usar correctamente las <p> </p> etiquetas de
apertura y cierre, implementar más de un párrafo.
Sitios Web - HTML 66
Lección

11
67

Encabezados

Habilidades Contenidos Recursos


Fundamentos de pensamiento computacional y programación
• Pensamiento lógico • HTML • Encabezados – CODE.org
Para la organización visual de una página es necesaria la inte- • Toma de decisiones •Encabezados • Video de la lección - Telecuantrix
gración de diversos elementos, por ejemplo, encabezados que
permitan enmarcar títulos y secciones de una página.

Descripción de los contenidos de pensamiento computacional y


programación necesarios para el profesor

Para llevar a cabo las actividades con los estudiantes, consulta Vocabulario
previamente las actividades y recursos de la lección y apóyate
del: Encabezado: Un título o resumen de un documento o sección de un documento.

• Video de la lección - Telecuantrix

Para ingresar a los ejercicios en CODE.org es necesario ingresar Apertura


a tu cuenta.
Pide a los estudiantes agruparse en tres a cuatro estudiantes.
Actividades presenciales que realizará el profesor con su grupo para Y realicen una tabla dónde enlisten las “etiquetas HTML” más
la práctica de códigos y símbolos de la herramienta base. importantes.

Los estudiantes organizarán la información de su página web Hasta este punto han aprendido que el lenguaje HTML usa
añadiendo títulos que les permitan distinguir secciones de su etiquetas para estructurar contenido en páginas web. En sus
página. En caso de no contar con computadoras, se recomien- grupos, piensen en tantas etiquetas como recuerden y en su
da realizar las actividades como clase a través de la proyección. función.

Los grupos deben discutir entre ellos y registrar sus ideas en


sus libretas (o prepararse alternativamente para compartir en
Objetivo el cartel / pizarrón de la clase compartida). Luego, comparte
rápidamente en todo el salón para asegurarte de que todos
Conocer y manejar las etiquetas de encabezado para la implementa- los grupos hayan enumerado todas las etiquetas.
ción en las páginas web.
Sitios Web - HTML 68
69

Desarrollo
Pide a los estudiantes ingresar a Encabezados – CODE.org, re- 2 Encabezados y párrafos
cordando que deberán iniciar sesión.
El autor de esta página agregó mucho contenido, pero no pen-
Hasta ahora, han organizado el contenido de una página en só en la estructura. Todo el texto se muestra mezclado.
párrafos. Otra forma en que HTML les permite organizar código Revisen el contenido y decidan cuál creen que debería ser la
es mediante el uso de encabezados. Un encabezado es una mejor estructura. Usen las etiquetas de encabezado y párrafo
breve pieza de texto que se encuentra en la parte superior de para codificar la estructura en la página.
una sección de contenido, como un título.
Hasta este punto se recomienda recapitular las etiquetas apren-
Encuentren los títulos en la página web que se visualiza en didas hasta este punto.
CODE.org y usen la herramienta Inspector para ver el código
que permite estructurarlos. ¡Es hora de crear una página web personal! Tendrán que elegir
el contenido que compartirás con el mundo. Su tarea es hacer
1 Tamaños de encabezado una página web usando el HTML que han aprendido. La página
web debe tener al menos dos encabezados de diferentes ta-
¿Cuáles son los títulos?, ¿cómo hago títulos de diferentes tama- maños y también debe usar párrafos.
ños?, ¿qué es HTML?, ¿qué es un elemento HTML?, ¿qué es una
etiqueta HTML? Antes de comenzar a codificar tu página web, debes tener un
plan. Usa las ideas del problema a resolver y tu modelo de ne-
Los títulos pueden venir en diferentes tamaños. En esta página, gocios que escribiste hace algunas lecciones y decide de qué
hay seis encabezados de diferentes tamaños, pero todos están se tratará esta página.
mezclados. ¿Pueden descubrir cómo ordenarlos?
Dibujen un boceto de tu página web, incluidos los encabeza-
Usen la herramienta de inspector para descubrir qué hace que dos y párrafos que incluye. Muestren su boceto a la clase y ex-
los encabezados tengan diferentes tamaños. Asegúrense de pliquen qué etiquetas usarán para las diferentes partes de la
estar de acuerdo con lo que hacen las diferentes etiquetas de página.
encabezado. Cambien las etiquetas para que los títulos estén
en orden de mayor a menor. Ahora que tienen un plan para su sitio web personal, pueden
comenzar a codificarlo. No se preocupen si no puede hacer
todo lo que quieren hoy. Tendrán muchas oportunidades de
mejorar su trabajo a medida que aprenden más sobre el de-
sarrollo de sitios web.
Sitios Web - HTML 70
Lección

12
71
Desarrollo del modelo
de negocios

Cierre
Para cerrar la lección reflexionen lo siguiente como clase: Fundamentos de pensamiento computacional y programación

• Mencionen cinco aprendizajes que adquirieron a lo largo Dentro de las páginas web, dependiendo de la información que
de lección. se requiera presentar, es posible implementar listas de dos ti-
•¿Qué te gustaría mejorar? pos enumeradas (ordenadas) y por puntos (desordenadas),
•¿Qué aprendizaje consideras muy importante? estás listas permiten estructurar pasos, recetas, etc.

Descripción de los contenidos de pensamiento computacional y


programación necesarios para el profesor

Para llevar a cabo las actividades con los estudiantes, consulta


previamente las actividades y recursos de la lección y apóyate
del:

• Video de la lección - Telecuantrix

Para realizar las actividades en CODE.org es necesario ingresar


a su cuenta.

Actividades presenciales que realizará el profesor con su grupo para


la práctica de códigos y símbolos de la herramienta base.

Los estudiantes incorporarán a sus páginas web el uso de lis-


tas. En caso de no contar con computadoras se recomienda
realizar las actividades a través de la proyección como clase.

Objetivo

Conocer, identificar y utilizar las etiquetas de listas para sitios web.


Sitios Web - HTML 72
73

Habilidades Contenidos Recursos Otro de los ejercicios muestra una lista ordenada, pero le fal-
tan las etiquetas de la lista.
• Pensamiento lógico • HTML • Listas CODE.org
• Listas • Video de la lección - Telecuantrix • Usen las etiquetas <ol>y <li> para estructurar el contenido en
una lista ordenada que se parece a la siguiente.
• Programar es divertido
Apertura • Las ciencias de la computación crean otras habilidades
• Quiero aprender
Hoy utilizarán una nueva estructura para sus páginas: listas.
Tómense unos minutos para intercambiar ideas sobre el con- Usen las etiquetas <ul>y <li>para estructurar el contenido en una
tenido que tendrá su página web y cómo lo estructurarán, to- lista desordenada, como la imagen siguiente.
mando en cuenta el uso de listas.
Algunas veces usamos números para ordenar listas ¿Qué tipo • Programar es divertido
de estas listas crees que deben estar numerada, y cuáles no • Las ciencias de la computación crean otras habilidades
deben estar numeradas? para que puedan usar esta estruc- • Quiero aprender
tura en su proyecto.
Estos ejercicios brindan la oportunidad de revisar ambos tipos
de listas y cómo algunos errores comunes pueden afectar la
Desarrollo forma en que se muestra la lista. Las estudiantes también pue-
den utilizar este tiempo para actualizar sus listas de etiquetas
1 Web Lab: listas HTML con <ul>, <ol> y <li>.

En equipos o pares comenzarán a realizar los ejercicios en CODE.


org en HTML para crear diferentes tipos de listas en su página Cierre
web.
Dentro de los ejercicios se muestra una receta que incluye dos Para cerrar la lección reflexionen lo siguiente como clase:
tipos diferentes de listas, una ordenada (con números) y otra
desordenada (con viñetas). • Mencionen cinco aprendizajes que adquirieron a lo largo
de lección.
• Usen la herramienta de inspector para ver el código que hace • ¿Qué te gustaría mejorar?
los dos tipos diferentes de listas. • ¿Qué aprendizaje consideras muy importante?
• Reparen el código para que el segundo elemento de cada
lista se muestre correctamente
Sitios Web - HTML 74
Lección

13
75

Propiedad intelectual e imágenes

Habilidades Contenidos Recursos


Fundamentos de pensamiento computacional y programación
• Trabajo colaborativo • Derechos de • Licencias - CODE
Actualmente el acceso a la información y el uso de recursos, • Creatividad autor • Licenciando su trabajo - guía de
como imágenes, es fácil y constante, sin embargo, es muy im- • Imágenes actividades
portante conocer los derechos de autor y licencias con las que • Video de la lección - Telecuantrix
cuentan estos recursos para poder utilizarlos, por ejemplo, para
añadir imágenes de otras personas a nuestros sitios web.

Descripción de los contenidos de pensamiento computacional y


programación necesarios para el profesor Vocabulario

Para llevar a cabo las actividades con los estudiantes, consulta Citación: Una cita de un libro, papel o autor, o referencia a este, especialmente en
previamente las actividades y recursos de la lección y apóyate un trabajo académico.
del:
Derechos de autor: El derecho legal exclusivo de imprimir, publicar, interpretar, filmar
• Video de la lección - Telecuantrix o grabar material literario, artístico o musical, y autorizar a otros a hacer lo mismo.

Para ingresar a los ejercicios en CODE.org es necesario ingresar Creative Commons: Una colección de licencias públicas de derechos de autor que
a tu cuenta. permiten la distribución gratuita de una obra protegida por derechos de autor, uti-
lizada cuando un autor desea otorgar a las personas el derecho de compartir, usar
Actividades presenciales que realizará el profesor con su grupo para y construir sobre una obra que han creado.
la práctica de códigos y símbolos de la herramienta base.
Propiedad Intelectual: Una obra o invención que es el resultado de la creatividad,
Los estudiantes aprender acerca del uso de recursos, como como una escritura o un diseño, a la que uno tiene derechos y para la cual se puede
imágenes y sus derechos de autor para ser utilizados. solicitar una patente, derecho de autor, marca registrada, etc.

Objetivo

Comprender el uso de los derechos de autor e integrar imágenes a sus


sitios web.
Sitios Web - HTML 76
77

Apertura
Todos ustedes han estado trabajando arduamente para crear A veces, sin embargo, queremos que las personas compartan
un nuevo sitio web que van a publicar al mundo. Sin embargo, nuestro trabajo para que más personas puedan verlo. La licen-
cuando publicas algo, puede ser difícil controlar lo que otras cia de Creative Commons (CC) se desarrolló para ayudar a
personas hacen con él. Algunas veces las personas usan nues- los creadores de contenido a tener un control más específico
tro trabajo de maneras que no nos parecen justas. Voy a des- sobre cómo otras personas pueden usar su trabajo.
cribir algunas situaciones para ti. Si crees que lo que sucedió
fue justo, ponte de pie. Si crees que fue injusto, siéntate. Entrega a cada alumna una copia de la Licenciando su trabajo
- Guía de actividades
• Tus tomas una fotografía impresionante y alguien la pone en
su cuenta de redes sociales y con su nombre al lado. La primera página de esta actividad cubre los componentes
• Tu escribes una historia y alguien más la pública y dice que de una licencia de Creative Commons y les pide a las estu-
la escribió. diantes que piensen en las razones por las cuales un creador
• Escribes una canción y alguien se la canta a sus amigos. de contenido podría querer incluir cada componente en su
• Escribes una canción y alguien la canta en un concierto y licencia. Impulsa a las estudiantes a pensar críticamente so-
gana mucho dinero. bre el valor que cada componente le agrega al creador, pero
• Tus tomas una foto y alguien más la arregla en Photoshop y también sobre las formas en que podría limitar el intercambio
pone la nueva versión en su sitio web. cultural de ideas.

Está bien si no todos están de acuerdo en cómo quieren que 2 Elegir la licencia correcta
se use su trabajo. La ley de derechos de autor dice que quien
crea un contenido nuevo, como una imagen, una historia o una La segunda página de esta actividad proporciona a las estu-
canción, decide cómo se les permite a otras personas usarlo. diantes seis licencias de CC y tres escenarios de creación de
contenido. Para cada escenario, pide a las estudiantes que
¿Qué reglas harías para las personas que desean usar tu tra- evalúen cuál de las seis licencias proporcionadas es la menos
bajo creativo? restrictiva, pero que aún aborde las inquietudes y necesidades
del creador del contenido.

Desarrollo Pide a distintos estudiantes que compartan sus respuestas a


los escenarios para elegir la licencia correcta. Alienta la discu-
1 La solución de Creative Commons sión y debate si los estudiantes identificaron diferentes licen-
cias para los mismos escenarios.
Los derechos de autor se otorgan en el momento en que se
crea algo, así que a menos que explícitamente se indique lo
contrario, debemos suponer que cualquier imagen, vídeo u otro
medio que encontremos en línea está completamente cubier-
to por la ley de derechos de autor, lo que significa que nadie
más puede hacer copias o publicarlo en línea sin permiso.
Sitios Web - HTML 78
Lección

14
79

Huella digital

Fundamentos de pensamiento computacional y programación


2 Actividad
Debemos ser conscientes de la información que compartimos
Envía a los estudiantes al contenido de la lección propiedad digitalmente, ya que al quedar publica en Internet, de alguna
intelectual e imágenes, donde aprenderán sobre la etiqueta manera, perdemos el control de ella. Además de resaltar que
<img> y tendrán la oportunidad de agregar imágenes a las pá- esta se queda viviendo en la red. Es importante identificar y
ginas que ya han creado. decidir de manera consiente y responsable qué información
personal compartimos digitalmente y con quién.
Pueden cargar imágenes que hayan encontrado en otro lugar
utilizando el botón Agregar imagen. Busca una imagen de un
tipo diferente de mascota que te guste y descárgala a tu com- Descripción de los contenidos de pensamiento computacional y
putadora (haciendo clic derecho en “Guardar como”). programación necesarios para el profesor

Una vez que tengas tus imágenes, haz clic en Para llevar a cabo las actividades con los estudiantes, consulta
y carga la imagen de tu computadora en tu proyecto, podrás previamente las actividades y recursos de la lección y apóyate
usarla en tu página. del:

• Carguen al menos una imagen en esta página web • Video de la lección - Telecuantrix
• Usen la <img>etiqueta para mostrar la (s) imagen (es) en su
sitio web. Para realizar las actividades en CODE.org es necesario ingresar
• Asegúrense de agregar un alt atributo. a su cuenta.

Cierre Actividades presenciales que realizará el profesor con su grupo para


la práctica de códigos y símbolos de la herramienta base.
Pide a los estudiantes que actualicen su lista de “Etiquetas HTML”
con las etiquetas que aprendieron en esta lección. Los estudiantes identificarán cómo se construye su huella digi-
Piensen en todos los elementos creados personalmente que tal y cómo manejar su información personal en la red. En caso
han puesto en tu sitio web hasta el momento, y los que puedes de no contar con computadoras se recomienda realizar las
agregar en el futuro. ¿Qué licencia de Creative Commons pre- actividades conectadas a través de la proyección como clase.
ferirías usar (si corresponde) y por qué?

Si hay tiempo, regresen a su sitio y agreguen la licencia de Crea- Objetivo


tive Commons que les gustaría que tenga su sitio web.
Conocer e identificar el buen uso de la información personal en la red.
Sitios Web - HTML 80
81

Habilidades Contenidos Recursos Pregunta a la clase qué tipo de información creen que pueden
tener estos sitios web sobre ellos. Puedes enmarcarlo desde
• Pensamiento crítico • Huella digital • ¿Cuánto importa tu privacidad? diferentes ángulos:
• Información - CODE
en la red • Ejemplos de perfiles – CODE • ¿Qué información saben que han dado a un sitio web (por
•¿Cuánto importa tu privacidad? - ejemplo, su dirección de correo electrónico)?
guía de actividades • ¿Qué información podrían haber dado sin saberlo a un sitio
• Perfiles - guía de actividades web (por ejemplo, una imagen con su domicilio)?
• Video de la lección - Telecuantrix • ¿Qué información podrían haber compartido otras personas
sobre ustedes sin su conocimiento o permiso (por ejemplo,
etiquetándolos en Facebook)?

Vocabulario Desarrollo
Huella digital: La información recopilada sobre un individuo en varios sitios web en 2 ¿Cuánto te importa la privacidad?
Internet.
Distribuye a los estudiantes “¿Cuándo importa su privacidad?
- Guía de actividades”.

Apertura Individualmente, pide que completen la tabla de la guía y alién-


talos a pensar críticamente sobre las consecuencias de que
1 Tu huella digital cada audiencia tenga acceso a cada pieza de información
personal. Lo que podría parecer una información inocua podría
Pide a los estudiantes que reflexionen a qué sitios web han dado tener consecuencias de largo alcance dependiendo de quién
información personal. En grupos pequeños, solicita que creen tenga acceso a ella.
una lista de sitios web con los que tengan cuentas (incluso si
utilizan el inicio de sesión con Facebook, Google o similares). Una vez que los estudiantes hayan completado la tabla de pri-
vacidad, pide que se junten en parejas o en grupos pequeños.
Realicen una lluvia de ideas, compartan sus ideas como clase
y creen una lista completa de todos los sitios web que pueden Deben buscar celdas en cada tabla donde otro compañero
tener su información personal. marcó una respuesta diferente a la que tenían y discutir sus
opciones. Alientos a debatir respetuosamente cuando no estén
de acuerdo en un tema.

Si bien no hay respuestas correctas o incorrectas aquí, es útil


para las estudiantes escuchar cómo otros pueden haber con-
siderado las consecuencias (tanto positivas como negativas)
en las que no pensaron.
Sitios Web - HTML 82
Lección

15
83

Estilo de texto con CSS

Después de la discusión en grupos pequeños, deben completar Fundamentos de pensamiento computacional y programación
las preguntas de reflexión en la siguiente página de la guía de
actividades. Agregar nuestro propio estilo a una página web programada
en HTML es posible gracias a CSS, un lenguaje utilizado para
Pregunta lo siguiente, ¿hubo algún lugar en la cuadrícula don- describir cómo se deben diseñar los elementos HTML. Por ejem-
de el intercambio de opinión con otro compañero cambió su plo, hacer que las letras sean de otro color o cambiar la tipo-
perspectiva? Como clase, compartan lugares donde cambia- grafía, hasta añadir un fondo a nuestras páginas.
ron de opinión.

3 Investigar los perfiles sociales Descripción de los contenidos de pensamiento computacional y


programación necesarios para el profesor
Como clase exploren cómo los pequeños fragmentos de infor-
mación personal distribuidos en varios sitios en Internet pue- Para llevar a cabo las actividades con los estudiantes, consulta
den producir una imagen bastante detallada de una persona, previamente las actividades y recursos de la lección y apóyate
conocida como, huella digital. del:

Distribuye a los estudiantes “Perfiles-guía de actividades”, tam- • Video de la lección - Telecuantrix


bién podrán ingresar a Sleuth Social – CODE para visualizar
ejemplos para resolver la actividad. Para realizar las actividades en CODE.org es necesario ingresar
a su cuenta.

Cierre
Actividades presenciales que realizará el profesor con su grupo para
Desarrollar una comprensión común de cómo nuestras elec- la práctica de códigos y símbolos de la herramienta base.
ciones para publicar información en línea contribuyen a una
huella digital. Los estudiantes practicarán como configurar a través de CSS
un estilo a su página web. En caso de no contar con compu-
Las actividades de se centraron en cómo los sitios web de me- tadoras se recomienda realizar las actividades conectadas a
dios sociales contribuyen a una huella digital. A medida que través de la proyección como clase.
nos preparamos para publicar nuestras primeras páginas web,
deberá pensar cómo contribuyen a su huella digital.
Objetivo
Para dar cierre a la lección, como clase elaboren una lista de
verificación que puedan usar para determinar qué debe y no Usar los selectores de CSS para dar estilo a los elementos de texto HTML.
debe publicarse en línea.
Sitios Web - HTML 84
85

Habilidades Contenidos Recursos Hasta ahora solo hemos creado páginas web donde contro-
lamos el contenido y la estructura, por ejemplo, qué partes de
• Trabajo colaborativo • CSS • Estilos de texto - CODE las páginas son encabezados, listas o párrafos. Hemos usando
• Creatividad • Video de la lección - Telecuantrix HTML como el idioma para especificar el contenido y la estruc-
tura de las páginas. Mientras que HTML nos permite cierto con-
trol sobre cómo se ve la página, pero no les da a los desarrolla-
dores mucho control sobre la apariencia y el estilo específicos
de cada elemento. Para hacer eso, necesitamos un lenguaje
para expresar el estilo. Los desarrolladores web usan CSS para
Vocabulario especificar el estilo de una página. Utilizamos diferentes idio-
mas para la estructura y el estilo porque hace que sea más fácil
CSS: Hojas de estilo en cascada; un lenguaje utilizado para describir cómo se deben diferenciar entre el código de estilo y el código de estructura.
diseñar los elementos HTML.

SELECTOR CSS: La parte de un conjunto de reglas CSS que define a qué elementos Desarrollo
HTML se debe aplicar el estilo.
2 Web Lab: Introducción a CSS

Ingresaremos a Estilos de texto - CODE y explorarán la activi-


Apertura dad. La primera sección de este nivel, presenta el paradigma
de contenido, estructura- estilo que utilizarán para ayudar a
1 Libreta: Apariencia HTML comprender las diferencias entre HTML y CSS. Si bien anterior-
mente utilizaron etiquetas HTML para etiquetar y categorizar su
Hasta ahora hemos usado HTML para escribir nuestras páginas contenido, ahora están aprendiendo cómo controlar el estilo
web. HTML nos permite usar etiquetas para definir la estructura de los diferentes elementos en sus páginas mediante CSS.
de una página. Como clase, recuerden las etiquetas HTML dife-
rentes que puedan recordar. Los estudiantes pueden tener algunos conceptos erróneos en
este punto, ya que su navegador ha utilizado estilos predeter-
Muestra a la clase una de las etiquetas que describe el texto en minados para sus diferentes tipos de contenido (por ejemplo,
la pantalla ( <p>, <li>, <h1>, etc.) y los estudiantes describirán cómo las <h1>etiquetas de forma predeterminada hacen que el texto
aparecerían los contenidos de esa etiqueta en una página web. sea más grande). A medida que avanzan en los ejercicios, de-
Pregunta si siempre querrían que esos elementos aparezcan ben darse cuenta de que el contenido de etiquetado realmente
de esa manera exacta. Por ejemplo, <p>siempre significa que solo permite que los estilos predeterminados del navegador, o
el contenido es un párrafo, pero ¿los párrafos siempre deben los estilos que definen mediante CSS, se apliquen a las piezas
tener el mismo aspecto en cada página y en cada sitio? correctas de contenido en sus páginas web.
Sitios Web - HTML 86
Lección

16
87

Estilo de elementos con CSS

3 Diferencias en navegadores y sistemas operativos Fundamentos de pensamiento computacional y programación

Como se menciona, pueden encontrar que las diferentes com- CSS permite integrar el estilo de una página web más allá del
binaciones de computadoras y navegadores representan las texto, sino impactar totalmente el aspecto de un sitio. Para ello
fuentes de manera diferente. Si bien hay una especificación es importante conocer y practicar las distintas propiedades de
común de cómo HTML y CSS deben leerse y mostrarse en la CSS para aplicar más estilo a sus sitios web personales.
pantalla, cada navegador lo hace de una manera ligeramente
diferente, lo que puede llevar a que la misma página se vea
diferente en diferentes computadoras. Si los estudiantes se en- Descripción de los contenidos de pensamiento computacional y
cuentran con esto, puede asegurar que es un desafío común programación necesarios para el profesor
al que se enfrentan los desarrolladores web.
Para llevar a cabo las actividades con los estudiantes, consulta
Por ejemplo, en el caso de font-family: fantasy, pueden especi- previamente las actividades y recursos de la lección y apóyate
ficar una lista de fuentes, de mayor a menor. De esta forma, si del:
la computadora de un usuario tiene la fuente exacta que espe-
cificaron, eso es lo que verá, pero si no, el navegador probará • Video de la lección - Telecuantrix
la siguiente fuente en su lista. Para tratar de garantizar que los
usuarios vean la fuente en la imagen de ejemplo, pueden es- Para realizar las actividades en CODE.org es necesario ingresar
cribir el CSS como font-family: Papyrus, fantasy. De esta forma, a su cuenta.
incluso si el navegador de un usuario tiene una fuente prede-
terminada diferente para “fantasía”, primero intentará cargar
la fuente específica “Papyrus”. Actividades presenciales que realizará el profesor con su grupo para
la práctica de códigos y símbolos de la herramienta base.

Cierre Los estudiantes añadirán nuevas propiedades CSS a su página


web. En caso de no contar con computadoras se recomienda
4 Grabación de propiedades de CSS realizar las actividades conectadas a través de la proyección
como clase.
Como clase intenten distinguir entre cómo HTML indica la es-
tructura de un documento y CSS ahora permite a los estudian-
tes establecer los estilos. Creen una nueva tabla llamada Pro- Objetivo
piedades CSS donde puedan acceder fácilmente.
Usar las propiedades de CSS para cambiar el tamaño, la posición y los
bordes de los elementos.
Sitios Web - HTML 88
89

Cierre
Habilidades Contenidos Recursos Agreguen las nuevas propiedades que aprendieron a su propia
página y como clase reflexionen los funcionamientos y alcan-
• Toma de desiciones • Propiedades CSS • Estilo de elementos CSS - CODE ce que podrán tener. Propiedades de CSS en su libreta o en el
• Creatividad • Video de la lección - Telecuantrix cartel / pizarrón de la clase.

Por último, pide a los estudiantes lo siguiente:


Apertura
• Elige una práctica en la que crees que demostraste creci-
1 ¿Qué estilos quieres? miento en esta lección. Escribe algo que hiciste que ejempli-
fica esta práctica.
En ejercicios anteriores diseñamos elementos de texto. ¿De qué
otra manera les gustaría dar estilo a su página? • Elige una práctica en la que pienses que puedes seguir cre-
ciendo. ¿Qué te gustaría mejorar?
Compartan estilos que les gustaría poder agregar su página. A
continuación, aprenderemos más propiedades que podemos • Elige una práctica que pensaste que era especialmente im-
usar para diseñar nuestras páginas web. Es de esperar que al- portante para la actividad que completamos hoy. ¿Qué lo
gunas de ellas le permitan agregar algunos de los estilos que hizo tan importante?
enumeramos en esta discusión.
práctica.

Desarrollo
2 Web Lab: estilo de elementos con CSS

Ingresaremos a Estilo de elementos CSS - CODE, explorarán y


resolverán la actividad. Compartan que estilos les gustaría po-
der agregar su página.

A través de los ejercicios aprenderemos más propiedades que


podemos usar para diseñar nuestras páginas web.
Sitios Web - HTML 90
Lección
91
17/20 Proyecto Integrador

Apertura
Fundamentos 1 Planteamiento de situación

Para realizar el cierre del curso, los estudiantes generan un pro- Para dar inicio a las actividades deberás leer la siguiente situa-
yecto final, su propia página web basada en HTML que resuelva ción a tus estudiantes:
una problemática, ya sea de la comunidad donde habitan o de
su escuela. En ella podrán utilizar todos los elementos HMTL y Eres un joven interesado por el bienestar de tu comunidad. Un
CSS que han conocido y su funcionamiento a lo largo del curso. día caminando por los alrededores de la misma reconoces una
problemática que afecta a una gran parte de las personas que
Se recomienda realizar la actividad de proyecto integrador en la conforman y decides poner manos a la obra y encontrar una
3 – 4 sesiones aproximadamente. solución aplicando lo aprendido en tu curso.

2 Pregunta detonadora
Se recomienda realizar la actividad de proyecto integrador en 3 – 4 sesiones aproxi-
madamente.
Realiza la siguiente pregunta a tus estudiantes y escucha sus
respuestas. Recuerda que todas las respuestas son válidas.

¿Qué problemática identificas?, ¿qué aprendizajes puedes apli-


Objetivo car para solucionarla?, ¿qué pasaría si tu no la solucionas?

Los estudiantes diseñarán su propio prototipo que resuelva una proble-


mática en específico, poniendo en práctica los conocimientos adquiri- Desarrollo
dos en HTML durante las lecciones anteriores.
3 Sesión de equipos e ideación

Para comenzar con su proyecto lo primero que se debe hacer


es la creación de los equipos, procura que los equipos estén
Recursos conformados por 5 personas, o si no divide la cantidad de es-
tudiantes que tienes, para que los miembros en cada uno sean
• Simulador HTML – CODE.org (recuerda iniciar sesión en CODE. equitativos.
org para acceder).
Sitios Web - HTML 92
93

Proponemos la siguiente dinámica para la creación de los gru- • Abre el siguiente recurso en tu computadora y proyéctalo en
pos: tu salón (ya sea modalidad virtual o presencial) Despierta tu
creatividad
Pequeñas embarcaciones: • Encontrarás un objeto diferente en cada diapositiva
Consiste en crear grupos aleatorios (ya sea de manera pre- • Comenta a los estudiantes que tendrán 30 segundos por
sencial o virtual) La primera parte de la actividad, comentarás imagen para imaginar qué cosas se pueden hacer con ese
que están en un barco en alta mar y necesitan crear pequeñas objeto (podrán anotarlas o solo pensarlas). Pero no las con-
embarcaciones para cumplir misiones. Puedes apoyarte de la vencionales para los que está diseñado, sino funciones alter-
herramienta de Zoom para crear salas aleatorias. O también nativas. Por ejemplo, si es un zapato, se puede convertir en un
puedes apoyarte de papelitos con los nombres de tus alumnos vaso para beber un líquido, o puede ser un estuche.
y seleccionarlos al azar para armar embarcaciones, esos serán • Elige a un estudiante para que mencione las funciones en
los equipos que se conformarán para la actividad posterior. voz alta de un objeto y sus compañeros puedan adivinar de
qué objeto se trata en realidad.
Definición de problemática y propuesta de solución: • Si nadie lo adivina haz que un estudiante diferente pueda
ver el objeto y siga dando pistas.
Una vez que ya se encuentra conformado el equipo los estu- • Al final, alguien adivinará de qué se trata. Aunque sea solo
diantes deberán juntarse para definir la problemática sobre la por suerte.
cual se van a enfocar, para ello deben:
• Comenta con tus estudiantes las opciones que podría ofrecer
1. Cada estudiante deberá tener dos papelitos de su cuaderno. HTML, para el desarrollo de un prototipo que brinde una solución
2. En uno de ellos escribirá una problemática que identifiquen a la problemática.
preguntando o investigando sobre su comunidad y en otro pa- • Explica a los estudiantes las características con las que debe
pelito escribir una problemática que ellos identifican. cumplir su propuesta de solución:
3. Mostrar los papelitos para que todos puedan leerlos. • Debe ser una página que utilice al menos 4 elementos de
4. Una vez que los hayan leído entre todos podrán decidir qué los aprendidos en el curso (párrafos, etiquetas, listas e imá-
problemática desean abordar. genes).
• Debe estar enfocada en usar una página web en HTML que
Posteriormente para poder encontrar una propuesta de solu- brinde solución a la problemática sobre la que se trabaja o
ción a la problemática, tendrán que realizar lo siguiente: que plasme la solución.
• Los estudiantes deberán entregar una propuesta de solu-
• Realizar una dinámica grupal de creatividad para poder abrir ción a la problemática que cumpla con las características
su mente y pensar desde diferentes ángulos una solución. El para que durante la próxima sesión puedan comenzar a tra-
juego no tiene más objetivo que forzar la creatividad y usar la bajar en la programación de su página web.
imaginación. No hay ganadores ni perdedores y cualquier uso
del objeto en sí, puede ser válido.
Sitios Web - HTML 94
95

Nota: Los estudiantes pueden realizar investigación de mercado, e investigar algunas


soluciones que se han planteado para dicho problema, así como analizar diferentes
aplicaciones para encontrar funciones que les pueden ser útiles.
5 ¡Manos al prototipo!

Este ejercicio enfatiza una parte clave del proceso de resolu- Para este momento todos los equipos deberán realizar la cons-
ción de problemas: la empatía. Tendrán la oportunidad de dise- trucción de su página web, es importante que todos los estu-
ñar un prototipo que pueda abordar un problema en su comu- diantes participen en el diseño, construcción y programación.
nidad. Esto requiere tomar un problema que ven en el mundo Los estudiantes siempre deberán verificar que su proyecto
y encontrar una forma en que la tecnología pueda ayudar a ofrezca una solución real y concreta a la problemática.
resolverlo.
¿Cómo se puede utilizar la robótica para abordar un problema Deberás apoyar a los equipos a cumplir los objetivos, así como
en su comunidad? orientarlos y aterrizarlos en sus ideas, recuérdales que durante
el proceso de diseño y programación pueden cambiar y siem-
4 Desarrollo de solución pre pueden existir mejoras. No hay ideas malas solo deben di-
reccionarse adecuadamente.
Ahora es momento de que los estudiantes desarrollen la pro-
puesta de solución a la problemática que identificaron y de la Recuerda llevar el control del tiempo y mencionarles cuánto
cual anteriormente, han investigado. tiempo les queda, ya que deberán tener organizada la idea
para plasmarla.
Los equipos desarrollarán la solución tecnológica para su pro-
blemática elegida, guía a los equipos para definir una idea via-
Nota: Menciona a tus estudiantes que es importante en este proceso ir realizando
ble, que además no afecte a otro sector de la comunidad. An- pruebas, de tal forma que tengan oportunidad de ir verificando cómo va quedando y
tes de iniciar con el desarrollo pregunta a los equipos si tienen puedan identificar si les hace falta algo en el proceso.
definido cómo realizarán su proyecto, puedes guiarlos con las
siguientes preguntas:

• Problemática Pide a los estudiantes que inicien sesión en CODE.org y al Si-


• Propuesta de solución mulador HTML – CODE.org para iniciar con la construcción de
•¿En qué consiste la solución? su página web.
•¿Cómo funcionará?
•¿Quiénes son los beneficiados?
•¿Quién lo usará?
•¿Por qué mi idea es única y especial?
•¿Cómo involucra el uso de HTML?
•¿Cómo harías para que mi proyecto llegue a las personas?
Sitios Web - HTML 96
97

Cierre
5 ¡Preparemos nuestra presentación! 6 Presentación de proyectos

Comenta con los estudiantes que también será necesario pre- Llegó el momento de que todos los equipos compartan con
parar la presentación que tendrán al finalizar la construcción su comunidad, sus logros y aprendizajes adquiridos durante el
de su proyecto. curso, presentando su proyecto donde abordan una solución
innovadora tecnológica con impacto social.
Recomienda a los estudiantes que asignen una o dos perso-
nas que realizarán la exposición, mientras que los demás inte- Todos los equipos presentarán su proyecto con impacto social.
grantes se harán cargo de la demostración y responderán las Se recomienda realizar la dinámica de la siguiente manera:
preguntas de la audiencia.
• Dar a los equipos 10 minutos previos para practicar su pitch.
Este momento es clave para la asignación de sus roles y que • Escuchar las ideas de todos los equipos. Es importante fomen-
todos lleguen a un mismo acuerdo. tar y resaltar el diseño y la programación, de tal manera que
se brinde retroalimentación objetiva que aporte al desarrollo
Siguientes pasos: y habilidades de los estudiantes.
Ensayar y pensar en las preguntas que les puede realizar la • Se recomienda invitar a personas de la comunidad (padres
audiencia. de familia, maestros, compañeras, etc.) que puedan apor-
tar a la retroalimentación de los proyectos, así como festejar
junto con los estudiantes los aprendizajes adquiridos durante
el curso.
• Tú serás el guía y moderador de ceremonia que indicará los
tiempos para cada uno de los equipos, así como controlar el
flujo de preguntas y retroalimentación de los otros equipos
o asistentes.
Sitios Web - HTML 98
99
Glosario
HTML
Producto: Estos los puedes almacenar, tocar o ver. Por ejemplo:
Resolución de problemas: La capacidad para identificar un sillas, computadora, galletas.
problema, tomar medidas lógicas para encontrar una solu- Servicio: Los servicios no se pueden ver, tocar o almacenar. Son
ción deseada, y supervisar y evaluar la implementación de tal actividades que responden a las necesidades del cliente.
solución. Segmentación de mercado: Detectar y clasificar a las perso-
Proceso de resolución de problemas: Se compone de pasos nas, y/o organizaciones de distintos grupos con características
que culminará con la evaluación de resultados una vez se ha- similares (edad, género, nivel de ingresos, tipos de población,
yan implementado dichos cambios. etc.).
Computadora: Una máquina que ayuda con ciertos tipos de Clientes potenciales: Todos aquellos consumidores que por
pensamiento al procesar la información. Y que es capaz de in- sus características sociales, económicas o demográficas son
gresar, emitir, almacenar y procesar información. posibles compradores de un producto o servicio.
Dispositivos informáticos: Son herramientas que permiten la Publicidad: Es una forma de comunicación que tiene por obje-
comunicación entre el Hombre y la Maquina, Maquina y Ma- tivo incrementar el consumo de un producto o servicio, inser-
quina, Maquina Hombre. tar una nueva marca, mejorar la imagen de una marca o re
Dispositivos de entrada: Un dispositivo o componente que per- posicionarla en la mente de un consumidor. Se lleva a cabo a
mite darle información a la computadora. través de campañas publicitarias que se difunden por medios
Dispositivos de salida: Cualquier componente o dispositivo que de comunicación.
arroja información de una computadora. Distribución de producto: Es el conducto por el cual se llevarán
Procesamiento de información: Es lo que hace una computa- los productos o servicios al cliente, es necesario elegirlas de
dora para convertir las entradas en salidas. manera eficiente y económica.
Almacenamiento de información: La conservación de infor- HTML: Lenguaje de marcado de hipertexto, un lenguaje utiliza-
mación empleando una tecnología específicamente desarro- do para crear páginas web.
llada para mantener los datos y qué se encuentren accesibles Elemento HTML: Parte de un sitio web, marcado con una eti-
siempre que sean necesarios. queta de apertura y, a menudo, cerrado con una etiqueta de
Algoritmo: Una secuencia precisa de instrucciones para pro- cierre.
cesos que pueden ser ejecutados por una computadora. Etiqueta HTML: El conjunto especial de caracteres que indica el
Sitio web: una colección de páginas web interconectadas en inicio y el final de un elemento HTML y el tipo de ese elemento.
la World Wide Web . Contenido del sitio web: Texto sin formato, imágenes y otros
Contenido del sitio web: Texto sin formato, imágenes y otros elementos incluidos en una página web.
elementos incluidos en una página web. Estructura del sitio web: El propósito de diferentes piezas de
Emprendimiento: Llevar adelante una obra o un negocio. contenido en una página web, utilizadas para ayudar a la com-
Brainstorming: técnica de grupo para generar ideas originales putadora a determinar cómo debe mostrarse ese contenido.
en un ambiente creativo. Encabezado: Un título o resumen de un documento o sección
Canvas: Se trata de una herramienta utilizada para diseñar de un documento.
modelos de negocio, es decir, crear la lógica de una empresa Citación: Una cita de un libro, papel o autor, o referencia a este,
que abarque clientes, oferta, infraestructuras y viabilidad eco- especialmente en un trabajo académico.
nómica. Derechos de autor: El derecho legal exclusivo de imprimir, pu-
Problema o necesidad: Una sensación de carencia que requie- blicar, interpretar, filmar o grabar material literario, artístico o
re ser satisfecha. musical, y autorizar a otros a hacer lo mismo.
Creative Commons: Una colección de licencias públicas de
Sitios Web - HTML 100

Tabla de 101

Links
derechos de autor que permiten la distribución gratuita de una
obra protegida por derechos de autor, utilizada cuando un au- Lección Recurso Enlace corto
tor desea otorgar a las personas el derecho de compartir, usar 1 Guía de actividades - Barcos de aluminio https://bit.ly/3P4jSyu
y construir sobre una obra que han creado.
1 Video de la lección - Telecuantrix https://bit.ly/3Sqq86E
Propiedad Intelectual: Una obra o invención que es el resultado
de la creatividad, como una escritura o un diseño, a la que uno 2 Google Maps https://bit.ly/3da72Sh
tiene derechos y para la cual se puede solicitar una patente, Guía de actividades – Usando la resolución
derecho de autor, marca registrada, etc. 2 https://bit.ly/3oT5zSC
de problemas
Huella digital: La información recopilada sobre un individuo en 2 Video de la lección - Telecuantrix https://bit.ly/3zpGKCQ
varios sitios web en Internet.
CSS: Hojas de estilo en cascada; un lenguaje utilizado para des- 3 Diagrama de una computadora https://bit.ly/3zwLyXc
cribir cómo se deben diseñar los elementos HTML. ¿Qué es una computadora? - Actividad
3 https://bit.ly/3BHvtAK
Selector CSS: La parte de un conjunto de reglas CSS que define CODE.org
a qué elementos HTML se debe aplicar el estilo. ¿Qué es una computadora? - Guía de acti-
3 https://bit.ly/3oUrhpr
vidades
¿Qué hace que una computadora, sea una
3 https://youtu.be/mCq8-xTH7jA
computadora? - Video
3 Video de la lección - Telecuantrix https://bit.ly/3btaC9o
4 Video de la lección - Telecuantrix https://bit.ly/3OUJJZz

4 Video de la lección - Telecuantrix https://bit.ly/3QlMVyM


4 Video de la lección - Telecuantrix https://bit.ly/3Q20uTZ
4 Entrada y salida - guía de actividades https://bit.ly/3zx6Aoy
4 Entrada y salida – CODE https://bit.ly/3d9mygQ
4 Tarjetas numéricas https://bit.ly/2NN3dVE
4 Procesamiento - CODE https://bit.ly/3vFIK8N
4 Sorteo de tarjetas - guía de actividades https://bit.ly/3BBxbU6
Almacenamiento y procesamiento - Guía de
4 https://bit.ly/3QlNcSk
actividades
El propósito de los sitios web - guía de acti-
5 https://bit.ly/3OU0Mv3
vidades
5 El propósito de los sitios web - CODE https://bit.ly/3zBl4n8
5 Video de la lección - Telecuantrix https://bit.ly/3JtaOlI
6 Sitios web personales - Guía de actividades https://bit.ly/3Q28ZyC
6 Sitios web personales - ejemplos CODE https://bit.ly/3Q1yDU8
6 Video de la lección - Telecuantrix https://bit.ly/3bBPttD
Sitios Web - HTML 102
103

Lección Recurso Enlace corto Lección Recurso Enlace corto


7 Tarjetas para armar un emprendedor https://bit.ly/3PYKFNW 13 Licencias - CODE https://bit.ly/3vHguTj
7 Infografías digitales https://bit.ly/3SroJN5 13 Licenciando su trabajo - guía de actividades https://bit.ly/3Sv5FxI
7 Video de la lección - Telecuantrix https://bit.ly/3btm5FU 13 Video de la lección - Telecuantrix https://bit.ly/3Stw52w
7 Project Loon https://youtu.be/c43iMuZR0_E 14 ¿Cuánto importa tu privacidad? - CODE https://bit.ly/3d98nZv
7 Hyperloop https://youtu.be/bx9vKKqCBbE 14 Ejemplos de perfiles – CODE https://bit.ly/3zXAROP
7 NFC https://youtu.be/NJ0OcR9FmHQ ¿Cuánto importa tu privacidad? - guía de
14 https://bit.ly/3JyC7v2
actividades
7 Exoesqueletos https://youtu.be/oEHjk_6QtuY
14 Perfiles - guía de actividades https://bit.ly/3Qhypb8
7 Internet de las Cosas (IOT) https://youtu.be/ZHQMSRiPoxU
14 Video de la lección - Telecuantrix https://bit.ly/3oUlBvJ
7 Realidad virtual (VR) https://youtu.be/IzAuGa7YKeU
15 Estilos de texto - CODE https://bit.ly/3OZWFgI
7 Alma Stephanie & Susana Tapia de NASA https://youtu.be/xsbShKOxgiA
15 Video de la lección - Telecuantrix https://bit.ly/3P06yer
7 Amy Villaseñor de Qualcomm https://youtu.be/ZWcawxzzfnE
16 Estilo de elementos CSS - CODE https://bit.ly/3OTHrKk
7 Beatriz Méndez Gandica de Microsoft https://youtu.be/SgYwhSwpoQE
16 Video de la lección - Telecuantrix https://bit.ly/3QaN73I
8 Lienzo de modelo de negocios   https://bit.ly/3OXusqT
17-20 Simulador HTML – CODE.org https://bit.ly/3QeD0L2
8 Video de la lección - Telecuantrix https://bit.ly/3P0qQET
14 ¿Cuánto importa tu privacidad? - CODE https://bit.ly/3d98nZv
8 Describe el problema POSiBLE https://youtu.be/ynkE-mP4pgc
14 Ejemplos de perfiles – CODE https://bit.ly/3zXAROP
8 Explica tu idea de negocio POSiBLE https://youtu.be/5sPpOTFEmOI
¿Cuánto importa tu privacidad? - guía de
8 Describe a tus clientes POSiBLE https://youtu.be/yPJDxeRzeS4 14 https://bit.ly/3JyC7v2
actividades
8 Propuesta de valor POSiBLE https://youtu.be/T9tpHvzdhVc
14 Perfiles - guía de actividades https://bit.ly/3Qhypb8
8 • Define tu publicidad y distribución POSiBLE https://youtu.be/y7f1wjtUHis
14 Video de la lección - Telecuantrix https://bit.ly/3oUlBvJ
8 Cómo generas ingresos POSiBLE https://youtu.be/PmM0g-ndh-A
15 Estilos de texto - CODE https://bit.ly/3OZWFgI
8 Describe tú plan de crecimiento POSiBLE https://youtu.be/RM5854TTDOs
15 Video de la lección - Telecuantrix https://bit.ly/3P06yer
9 Lienzo de modelo de negocios https://bit.ly/3OXusqT
16 Estilo de elementos CSS - CODE https://bit.ly/3OTHrKk
9 Video de la lección - Telecuantrix https://bit.ly/3JwVtAz
16 Video de la lección - Telecuantrix https://bit.ly/3QaN73I
10 Introducción HTML - CODE https://bit.ly/3JKoCIN
17-20 Simulador HTML – CODE.org https://bit.ly/3QeD0L2
10 Video de la lección - Telecuantrix https://bit.ly/3zzcrcN
11 Encabezados – CODE.org https://bit.ly/3Pejn5f
11 Video de la lección - Telecuantrix https://bit.ly/3BL7C2T
12 Listas CODE.org https://bit.ly/3StbsUo
12 Video de la lección - Telecuantrix https://bit.ly/3d2anCG

También podría gustarte