Manual (Anterior) - HTML 2° de Secundaria
Manual (Anterior) - HTML 2° de Secundaria
Manual (Anterior) - HTML 2° de Secundaria
HTML
Y PROGRAMACIÓN
COMPUTACIONAL
LECCIONES PARA ENSEÑAR
PENSAMIENTO
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?
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
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
CODE.org
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
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:
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.
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.
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
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.
• 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.
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.)
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
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
• 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.
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 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..
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?
5
37
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
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?
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
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.
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.
7
45
¿Qué es emprendimiento?
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
• 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
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:
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
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.
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
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
Objetivo
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.
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.
10
59
Introducción a HTML
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
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
• 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
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.
11
67
Encabezados
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.
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.
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.
Objetivo
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>.
13
75
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
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.
14
79
Huella digital
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.
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”.
15
83
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.
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
16
87
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
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.
Desarrollo
2 Web Lab: estilo de elementos con CSS
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.
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
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:
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