saltar al contenido
iniciativa · educación STEAM

Kit de Alfabetización Web

El objetivo del Kit de Actividades de Exploración, Construcción y Participación en la Web de Casa Hacker es dar a los participantes una comprensión conceptual básica sobre cómo explorar, construir y participar en la Web.

Registro del proyecto Kit de Alfabetización Web

Registro de acervo. casahacker.org/kit-de-atividades… — Squarespace, 2019. 14 actividades. Currículo de alfabetización web.

Visión general del Kit de Actividades de Exploración, Construcción y Participación en la Web

El objetivo del Kit de Actividades de Exploración, Construcción y Participación en la Web de Casa Hacker es dar a los participantes una comprensión conceptual básica sobre cómo explorar, construir y participar en la Web.

La Alfabetización Web, por ejemplo, ayuda a nuestra comunidad a:

  • Entender cómo funciona internet;

  • Conocer las herramientas y estrategias que pueden usarse para buscar y localizar personas, recursos e información;

  • Fomentar nuevos contenidos en la red para mantenerla viva;

  • Conectar con las comunidades que comparten, crean y mantienen contenido significativo en línea;

  • Evaluar información y detectar la desinformación;

  • Capacitarse a sí mismos y a sus comunidades para participar en línea como ciudadanos, estudiantes, trabajadores y creadores.

Desarrollar, actualizar y mantener este kit de actividades es un esfuerzo de contribuidores y aliados estratégicos de Casa Hacker, además de todo el material base y la experiencia del Mozilla’s Core Web Literacy Curriculum.

Prácticas Abiertas

Trabajar abiertamente es uno de los requisitos fundamentales de este kit de actividades y también de la Base Curricular de Alfabetización Web 2.0. Uno de los primeros pasos para implementar este kit es entender qué significa trabajar abiertamente. Te animamos a aprender a trabajar en abierto estudiando nuestra guía «Prácticas Abiertas» (disponible pronto) para conocer los conceptos básicos de participación, colaboración y compartición en proyectos conducidos por la comunidad.

Difunde, expande y mejora el Kit de Actividades

Este kit está hecho para ser inclusivo, adaptable y abierto: las comunidades pueden usarlo, difundirlo, expandirlo, adaptarlo y mejorarlo.

Así puedes contribuir:

Ganando medallas digitales

Casa Hacker, a través de Badgr, ofrece medallas digitales por las habilidades de alfabetización web, si te interesa ganarlas o que tu comunidad las gane.

Mantenedores

Este kit de actividades es mantenido actualmente por Geraldo Barros (geraldo@casahacker.org).

La Web y tú

Habilidades: Comunicación, Colaboración

En esta actividad de narración fuera de línea, los participantes reflexionan y comparten observaciones, ideas y sentimientos sobre su propio uso de la Web y lo que la Web significa para sus comunidades. ¿Qué aman u odian de la Web? ¿Qué les da curiosidad? ¿Qué tipo de cosas les gustaría hacer en la Web? Los facilitadores usan las percepciones de esta actividad para contextualizar y dar forma al resto de las actividades para el grupo. Esta actividad grupal también debe ayudar a los participantes a conocerse y sentirse conectados.

Objetivos de aprendizaje

  • Describir cómo la comunidad usa la Web e interactúa en ella.

Tiempo necesario

De 45 minutos a 1 hora según el tamaño del grupo.

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la Web.

Materiales

  • Notas adhesivas

  • Lápices, marcadores

  • Temporizador para controlar el tiempo durante la narración

Habilidades de Alfabetización Web

Esta es una actividad introductoria para el desarrollo de habilidades de Alfabetización Web.

Habilidades del siglo XXI

  • Comunicación

  • Colaboración

Introducción

[6-10 min]

  • La persona facilitadora pide a cada participante que se presente y responda una pregunta rompehielos (por ejemplo: cuál es tu comida favorita, tu juego favorito, a qué personaje de dibujos animados te pareces más). La pregunta rompehielos ayuda a que los participantes se conozcan y se sientan más cómodos durante la discusión; puede — pero no necesita — estar relacionada con la alfabetización Web.

💡 ¡Consejo! La persona facilitadora debe hacer una demostración para que los participantes aprendan a compartir y, sobre todo, entiendan cuánto tiempo tienen para su presentación.

  • Establece reglas básicas/acuerdos compartidos. Explica que los participantes aprenderán juntos — compartiendo perspectivas e ideas, trabajando en grupos pequeños o parejas y como un gran grupo. Se anima a cada persona a compartir activamente.

  • La persona facilitadora pregunta: ¿qué podemos hacer para trabajar y aprender mejor juntos? Pide ideas al grupo y haz una lista de comportamientos positivos para el trabajo en grupo.

💡 ¡Consejo! La persona facilitadora puede añadir puntos importantes si el grupo no los menciona. Pueden incluir:

  • Escuchar activamente

  • No interrumpir

  • Ser respetuoso con los demás miembros

  • Estar abierto a perspectivas diferentes de las tuyas

  • Si sueles hablar mucho en grupo, intenta escuchar más

  • Si sueles escuchar, intenta hablar y compartir tus ideas

Presentando la Web

[3-5 min]

  • La persona facilitadora explica que los participantes pensarán y hablarán sobre internet y la World Wide Web — las herramientas y tecnologías que usamos cuando estamos «en línea». Pide al grupo compartir las cosas que hacen «en línea».

💡 ¡Consejo! Para esta ronda, la persona facilitadora puede animar a levantar la mano y esperar el turno, o pedir que compartan de forma espontánea. Elige el estilo que funcione mejor para tu grupo.

💡 ¡Consejo! Si el grupo no aporta muchos ejemplos, o no tiene experiencia previa en la Web, la persona facilitadora puede comentar herramientas y tecnologías que el grupo probablemente use. Ejemplos de actividades en línea pueden incluir:

  • enviar o recibir correo electrónico

  • usar la web para conectar con familiares lejanos

  • usar una aplicación en el smartphone — por ejemplo, la de mapas para orientarte

  • usar sitios de búsqueda de empleo

  • «googlear» o buscar información en la web

  • ver/escuchar series o música en sitios como Netflix o Spotify

  • iniciar sesión en Facebook u otras redes sociales

  • videojuegos

  • compras

La persona facilitadora destaca que hay maneras diferentes de estar en línea, muchas razones por las que la gente usa la Web. El grupo las explorará junto en un ejercicio de narración.

Contando historias: la Web y tú

[20-25 min]

  • En este ejercicio, la persona facilitadora divide al grupo en equipos de 3 a 4 participantes para contar y escuchar historias. Explica que cada participante tendrá de 3 a 4 minutos para contar historias de sus experiencias en la Web.

💡 ¡Consejo! Aquí van algunas pautas para ayudar a empezar las historias. Quien narra debe usar los 3 o 4 minutos completos. Si termina antes, aprovechen el tiempo para conversar, debatir y pensar en la historia. Quienes escuchan deben practicar la escucha activa — concentrarse en quien narra.

  • La persona facilitadora debe seleccionar una de las siguientes preguntas para usar con el grupo. Todas las personas narradoras deben responder la misma pregunta.

  • ¿Cuál es la experiencia más importante/significativa/memorable que has tenido en línea?

  • ¿Cómo cambió la web tu vida?

  • ¿Cómo usas la web? ¿Qué tipo de cosas te gusta hacer en línea?

  • O, para quienes no tienen experiencia previa con la web:

  • ¿Qué tipo de cosas te gustaría hacer en línea?

  • ¿Qué tipo de información esperas encontrar en línea? ¿Qué sería más útil descubrir o aprender?

  • ¿Cómo podría cambiar tu vida estar en contacto con muchas personas diferentes alrededor del mundo?

  • La pregunta seleccionada debe quedar visible en algún lugar de la sala; el grupo recibe uno o dos minutos para pensar su historia antes de empezar.

  • La persona facilitadora debe modelar una historia para marcar el tono y la profundidad. Si cuenta una historia ligera y poco personal, los participantes lo tomarán como referencia. Si va más a fondo, o cuenta una historia más personal, da permiso y espacio para que hagan lo mismo.

💡 ¡Consejo! Debe ser una historia personal, así que, como facilitador, básate en tu propia experiencia al modelarla. Un ejemplo del tipo de historia que se podría modelar sería algo así (con más detalle, para llenar 3 minutos):

Internet cambió mi vida porque pude usarla para conectar con personas que aman la música, una de las cosas más importantes de mi vida. Usé comunidades en línea (foros y listas de correo al principio; páginas de Facebook y redes sociales ahora) para aprender sobre música, profundizando mi aprecio y comprensión de maneras que nunca imaginé. ¡Y también hice muchos amigos por el camino! Esas conexiones me llevaron a viajar: los dos primeros países que visité fuera de Brasil fueron Japón y Alemania, para visitar amigos que hice en la comunidad musical en línea. Por fin pudimos conocernos y asistir juntos a eventos y conciertos en la vida real. Después de 20 años, ¡todavía conservo esas amistades que hice en línea!

  • Entre cada historia, recuerda a los participantes respirar, hacer una pausa y dejar que la historia cale.

  • Entre cada historia, pide reflexionar en silencio:

  • ¿Qué hay de diferente con tu propia historia?

  • ¿Qué es parecido?

  • Recuerda a los participantes agradecer la historia.

Reflexión y repaso

[10-15 min]

  • Ahora que los participantes compartieron sus historias individuales, la persona facilitadora pide al grupo reflexionar sobre lo que escuchó (en su propia historia y en las de otros) y documentar y/o discutir todas las maneras diferentes en que el grupo usa la Web.

💡 ¡Consejo! Si el tiempo es corto, se puede optar por el ejercicio del mapa de palabras o por algunas preguntas de exploración.

Mapa de palabras: con notas adhesivas, los participantes hacen listas de palabras aprendidas en las historias. Una palabra por nota adhesiva.

VERBOS: lo que hacemos o nos gustaría hacer en la web — (ejemplos: conectar, aprender, comprar)

ADJETIVOS: ¿cómo es la experiencia para nosotros y para otros? (ejemplos: emocionante, divertida, abrumadora, confusa)

SUSTANTIVOS: cosas que suceden/se encuentran en línea, o lo que usamos para conectarnos (ejemplos: comunidades, música, teléfono móvil, módem)

  • Los participantes llevan sus notas adhesivas a una pared, agrupadas por tipo de palabra (verbos, adjetivos, sustantivos). La persona facilitadora invita a mirar y reflexionar sobre estas preguntas:

  • ¿Qué te sorprende ver?

  • ¿Qué falta?

  • ¿Qué destaca?

Preguntas de exploración: los participantes consideran algunas preguntas, escribiendo respuestas, ideas y pensamientos en notas adhesivas. La persona facilitadora puede elegir entre las siguientes (o crear las suyas) según el público y lo que surgió en las historias:

  • ¿Qué es misterioso de la web? ¿Qué te da curiosidad de la tecnología web, algo que quieras aprender?

  • ¿De qué maneras la web cambió tus relaciones? ¿Qué es diferente entre interactuar en la web y «en la vida real»?

  • ¿Estás TÚ en la web? ¿Cómo y dónde estás representado en la web?

  • ¿Cómo te expresas en línea? ¿Quiénes son tus distintos públicos? ¿Quién te está mirando u observando? ¿Qué eliges compartir?

  • Vuelvan a poner las notas adhesivas en la pared e inviten a mirar y discutir de nuevo.

💡 ¡Consejo! La persona facilitadora puede usar respuestas, historias y preguntas de exploración para dar forma al resto del programa de talleres y eventos — retomando las preguntas para contextualizar, dar ejemplos y abordar vacíos de conocimiento, o aprovechar experiencia especial — por ejemplo: «tuvimos una pregunta sobre cómo funciona un navegador», así que vamos a explorarlo ahora — o «algunos de ustedes son usuarios activos de YouTube: ¿qué pueden contarnos de la plataforma?»

💡 ¡Consejo! Respeta siempre los puntos de vista, ideas y perspectivas variadas al referirte al contenido compartido por los participantes. Al final del taller, ¡agradece a los participantes su participación, preguntas e historias!

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de la actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Mapear la Web

Habilidades: Colaboración, Comunicación, Resolución de problemas

Descripción

En esta actividad de discusión/mapeo/actuación, los participantes comparten lo que ya saben sobre la Web y colaboran para llenar vacíos y responder preguntas. Trabajan juntos para organizar esa información en un «mapa» visual y espacial que muestra las relaciones entre muchos elementos de la Web, de servidores a sitios, tuits y teléfonos móviles. En una sección final de la actividad, los participantes «ejecutan la red» conectando todos los elementos.

Objetivos de aprendizaje

  • Explicar cómo se relacionan las partes de internet

  • Demostrar cómo viaja la información por la Web usando objetos, bocetos o movimientos físicos

  • Localizar una dirección IP y explicar qué información se transmite

Tiempo necesario

De 45 minutos a 1 hora según el tamaño del grupo

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web.

Materiales

  • Notas adhesivas

  • Lápices, marcadores

  • Carteles prefabricados con las siguientes etiquetas:

  • «Salto 1: router local»

  • «Salto 2: proveedor de servicios de internet»

  • «Salto 3: el servidor»

Habilidades de Alfabetización Web

  • Esta es una actividad introductoria a las habilidades de alfabetización web

Habilidades del siglo XXI

  • Colaboración

  • Comunicación

  • Resolución de problemas

Introducción

[5-10 min]

  • Si los participantes no se conocen, la persona facilitadora pide a cada integrante que se presente y responda una pregunta rompehielos (comida favorita, juego favorito, a qué atracción o personaje de dibujos animados se parece más).

💡 ¡Consejo! La pregunta rompehielos ayuda a que los participantes se conozcan y se sientan más cómodos durante la discusión; puede — pero no necesita — estar relacionada con la alfabetización web.

💡 ¡Consejo! La persona facilitadora debe hacer una breve demostración.

  • La persona facilitadora aborda y conecta brevemente el tema de esta sesión con una gran idea. Explica esto:

  • Internet es probablemente una de las tecnologías más importantes, si no la más importante, de nuestra era.

  • Es la principal manera en que nuestro mundo almacena y comparte todo tipo de información (personal, financiera, médica, científica y mucho más).

  • Por eso es importante entender de manera básica cómo funciona internet.

  • Cuando lo sabemos, podemos tomar mejores decisiones sobre cómo la usamos y qué información compartimos.

  • La persona facilitadora invita a los participantes a discutir cómo «vemos» o entendemos internet. Usa las siguientes preguntas para iniciar la conversación:

  • ¿Cómo es internet? ¿Podemos verla?

  • Si tuvieras que tomarle una foto, ¿cómo se vería?

  • ¿Qué metáforas de internet has oído (por ejemplo: surfear, tubos, telaraña, arañas y rastreadores)?

  • ¿Qué metáforas te funcionan mejor?

  • ¿Puedes proponer nuevas?

Lluvia de ideas: elementos del mapa

[5 min]

  • La persona facilitadora explica que podemos pensar en internet como un sistema, una colección de partes que crean un todo funcional. ¡Los participantes pueden trabajar juntos para crear un mapa de ese sistema!

  • Se reparten notas adhesivas al grupo, o si el grupo es lo bastante pequeño, pueden debatir juntos.

  • Los participantes escriben distintos componentes del sistema, cada uno en una nota adhesiva.

💡 ¡Consejo! Si les cuesta empezar, pueden preguntarse: cuando están «en línea», ¿qué tipo de tecnología usan? ¿Qué forma parte inmediata de su conexión en su entorno? (es decir, su computadora, también llamada cliente, smartphone, módem, router).

  • ¿Cuáles son las otras partes de esa conexión — las que quizá no ven? (Wi-Fi, cables, servidores, torres de telefonía, «la nube»).

  • Cuando están en línea, ¿qué están viendo? ¿Qué están usando? (navegadores, sitios web, sitios específicos, aplicaciones o páginas, imágenes, medios, todo tipo de contenido, correo).

  • ¿Qué otras palabras o términos han oído sobre la Web que no hemos discutido? (paquetes, ancho de banda, https, HTML, URL, JavaScript, etc.).

  • ¿Qué otras cosas pueden estar conectadas a la Web que aún no mencionaron? (piensa en el espacio emergente del IoT: autos autónomos, refrigeradores, pulseras fitness, sistemas de seguridad, semáforos, etc.).

💡 ¡Consejo! La persona facilitadora debe asegurarse de que estén los términos principales: computadora cliente, servidor, sitio web, página web, smartphone, correo, red, etc.

Definición de los términos de la Web

[5 min]

  • Si algunos de los términos que generó el grupo no resultan familiares, tómense un tiempo para definirlos juntos. La persona facilitadora puede consultar el glosario de términos creado por CERT.br.

  • https://cartilha.cert.br/glossario

¡Consejo! La actividad de presentación rápida sobre las Mecánicas de la Web es una gran manera de trabajar algunas de estas definiciones. Enlace original

Armando el mapa

[5 min]

  • Colocando notas adhesivas en una pizarra, el grupo trabaja en conjunto para crear un diagrama de internet. Para ayudarlos, usa los siguientes prompts.

💡 ¡Consejo! También puedes usar materiales 3D táctiles, como papel, cuerda o cartón, para crear un modelo.

  • ¿Cómo se relacionan los distintos elementos? Por ejemplo, muchas computadoras cliente se conectan a un único servidor.

  • ¿Dónde se almacena o guarda la información y cómo se transporta?

💡 ¡Consejo! Si los participantes son muy nuevos en estos conceptos, la persona facilitadora puede armar el mapa explicando cada etapa, las relaciones y cómo la información se mueve por el sistema.

Ejecuta la red

[15-20 min]

  • La persona facilitadora debe repasar lo siguiente:

  • Vemos en nuestro mapa que «internet» es un sistema de computadoras en red y la «Web» está en internet.

  • La Web es el sistema interconectado de sitios y páginas, almacenado en varias computadoras alrededor del mundo.

  • Usamos un navegador web, como Firefox, para acceder a páginas en la web.

  • Siempre que le pides a internet hacer algo — escribir una dirección web en un navegador, ver un video en YouTube o revisar el correo en tu smartphone — tu solicitud «salta» por varios dispositivos de red, como routers, conmutadores y servidores, en el camino de tu dispositivo al servidor del sitio.

  • Muestra estos videos introductorios para dar a los participantes un poco más de contexto.

  • ¿Cómo funciona internet? Parte 1: el protocolo IP

  • ¿Cómo funciona internet? Parte 2: Sistemas Autónomos, BGP, IXP.

  • ¿Cómo funciona internet? Parte 3: DNS

  • ¿Cómo funciona internet? Parte 4: gobernanza de internet

  • Después de ver los videos, tómense unos minutos y pide a los participantes comparar y contrastar lo que aprendieron con lo que imaginaron juntos antes. ¿Qué tan cerca estábamos? ¿Qué dejamos fuera? ¿Qué nos sorprendió?

  • La persona facilitadora explica al grupo que, para ayudar a entender ese camino, van a representar una versión humana de la información moviéndose por internet, en una pista de obstáculos.

  • La información viajará de una:

  • computadora local (cliente) a

  • una red de acceso local a

  • internet a

  • el sitio web de su elección

  • Comienza mostrando a los participantes un modelo del sistema. Pide al grupo reunirse junto al cartel «Mi computadora» y pide tres voluntarios. Entrega a los tres voluntarios los carteles rotulados:

  • «Salto 1: router local»

  • «Salto 2: proveedor de servicios de internet»

  • «Salto 3: el servidor»

  • Pide a los voluntarios que se repartan por la sala.

  • Explica que:

  • los carteles representan diferentes «saltos» por los que una solicitud web debe pasar antes de llegar al servidor que aloja el sitio que el usuario busca.

  • El resto de los participantes son paquetes de código con solicitudes web en lenguaje especial de computadora, intentando llegar al servidor al otro extremo de la sala.

  • Elige a uno de esos participantes «paquete» para servir de modelo al resto del grupo antes de que todos empiecen. Plantea este escenario:

  • Estoy en mi computadora y decido ver un video en YouTube. Después de escribir la dirección web, mi computadora convierte «youtube.com.br» en un tipo especial de solicitud codificada (llamada HyperText Transfer Protocol o HTTP) que todas las computadoras pueden leer.

  • Mi computadora divide ese código en varios «paquetes» para enviarlo por la red… nuestro voluntario representa uno de esos paquetes.

  • Pide al voluntario caminar hasta el primer salto y explica:

  • Primero, el paquete pasará por dispositivos de red local, como routers y módems del edificio.

  • Los dispositivos de la red local envían el paquete a internet.

  • Pide al participante avanzar y explica el siguiente salto: cuando un paquete llega al proveedor de servicios de internet (ISP), se envía hasta uno de los routers de YouTube.

  • Pide al participante avanzar y explica el siguiente salto. Cuando el paquete pasa el router de YouTube, se envía a un servidor en la sede de la empresa que transmitirá mi video. Explica:

  • En el servidor, para que el video se reproduzca en mi computadora, la computadora de YouTube también convierte mi video en paquetes, que viajan todo el camino de vuelta a mi computadora por la misma ruta de dispositivos de red que se necesitó para llegar a YouTube.

  • Pide al participante de ejemplo volver caminando hacia ti, asegurándote de pausar en cada salto del camino de vuelta.

  • Ahora aumentemos la complejidad de la red — al fin y al cabo, ¡hay millones y millones de servidores y clientes por ahí, no solo unos pocos! Asignemos 2 o 3 (o más) participantes a actuar como «salto 3» — el servidor. Y sumemos más usuarios haciendo solicitudes desde computadoras cliente y más participantes asignados como paquetes.

  • Asigna a cada servidor una función — por ejemplo, un servidor puede ser BancoDoBrasil.com.br, Americanas.com.br, ingressorapido.com.br o el catálogo en línea de la biblioteca local.

💡 ¡Consejo! Pueden generar esto preguntando a los participantes qué sitios usan y qué tipo de cosas solicitan de esos sitios.

  • Escribe los nombres de los servidores en tarjetas y pide a los «servidores» sostenerlas.

  • Pide a los participantes escribir pedidos, como «lista de juguetes para perros a la venta en Americanas» o «entradas para el show de Anitta en IngressoRapido.com.br» en tarjetas — se las entregarán a los «paquetes».

💡 ¡Consejo! Pregunta a los participantes si quieren poner un identificador en su solicitud para garantizar que vuelva a la computadora correcta.

  • ¡Ahora es momento de que todos prueben la pista de obstáculos! Explica:

  • Los usuarios/computadoras cliente entregan sus pedidos a los «paquetes».

  • Los «paquetes» deben detenerse en cada «salto» antes de pasar al siguiente.

  • Espera, ¡hay una «trampa»! Antes de que los paquetes puedan pasar de un salto a otro, deben mostrar su pedido al «alto», que es una especie de gatekeeper (barrera/portero).

  • En el salto del proveedor de internet, quien actúe de proveedor deberá dirigir los paquetes a los servidores correctos; a la vuelta, deberá dirigir el paquete al cliente correcto.

  • Los servidores tienen poco tiempo para marcar o modificar la tarjeta del paquete con la información solicitada antes de devolverlo al cliente.

  • ¡Pide a los «paquetes» formar una fila india y recorrer la pista de obstáculos lo más rápido que puedan! Alguien puede cronometrar cuánto tarda todo el mundo en cruzar el recorrido y ver quién es más rápido.

💡 ¡Consejo! Para hacer la pista más interesante, puedes poner «espías del gobierno» entre los saltos. Este recurso de la EFF explica cómo terceros pueden interceptar datos entre saltos. Conversa con tus participantes sobre qué datos están protegidos, y qué y cuándo queda vulnerable.

💡 ¡Consejo! Si tu grupo es lo bastante grande, inunda al proveedor de internet con pedidos para un servidor determinado.

💡 ¡Consejo! Durante la actividad, puedes hacer estas preguntas:

¿Qué pasa en cada «salto»? ¿Crees que un paquete real se mueve por internet más rápido que tú?

  • Observación: si no tienes espacio físico para esta actividad, los participantes pueden entender cómo interactúan las partes de la Web usando objetos como cartas, popotes, cuerdas u otros materiales.

Opcional: direcciones IP

[5 min]

  • Pregunta al grupo cuántas computadoras o dispositivos están conectados a internet.

  • ¿Cómo crees que cada computadora se identifica o localiza en la red?

  • Discute la idea de una dirección — ¿qué hace útil a una dirección (como una dirección postal o de correo electrónico)?

  • Explica que es importante que la dirección sea única: indica una casa, un departamento o una persona específica; un mensaje enviado a ese lugar o solo a esa persona.

  • Introduce el concepto de direcciones IP: cada dispositivo o computadora en una red o en línea posee una dirección IP («Internet Protocol», protocolo de internet).

  • Es una manera amigable de describir la dirección de un sitio — ¡a las computadoras les gustan los números!

  • Las direcciones IP tienen 4 conjuntos de números en una cadena.

  • Si la escribimos en un navegador, se resuelve en una dirección web amigable.

¡Consejo! Si hay una computadora disponible, demuestra cómo escribir una dirección IP te lleva a un nombre de dominio amigable para humanos.

Reflexión y repaso

[5 min]

  • Para cerrar, la persona facilitadora puede hacer preguntas de reflexión como:

  • ¿Qué pasa en internet cuando escribes una dirección web y presionas enter?

  • ¿Cuáles son las «partes» de internet?

  • ¿Cómo llegan grandes cantidades de información por partes a la red incluso con poco ancho de banda?

  • ¿Cuál es la diferencia entre internet y la World Wide Web?

  • No olvides agradecer a los participantes su participación, ideas y percepciones.

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Hazte amigo de tu navegador

Habilidades: Navegación, Síntesis, Colaboración, Comunicación

Descripción

Un navegador de internet, también conocido como navegador web o simplemente navegador, es un programa de software que usas para acceder a internet y ver páginas web en tu computadora. Puedes pensar en tu navegador como tu puerta de entrada a internet. Los participantes reflexionarán sobre las herramientas que usan para navegar por un sitio y aprovecharán sus conocimientos previos.

Objetivos de aprendizaje

  • Describir la diferencia entre un navegador web y un motor de búsqueda

  • Localizar las principales herramientas de un navegador web

  • Rotular partes de una página web

  • Navegar por un sitio web

Tiempo necesario

De 30 a 45 minutos según el tamaño del grupo.

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web.

Materiales

  • Notas adhesivas

  • Papel y lápices

  • Portátil con conexión a internet

Habilidades de Alfabetización Web

  • Navegación

  • Síntesis

Habilidades del siglo XXI

  • Colaboración

  • Comunicación

Enter the World Wide Web

Parte I

[10 min]

  • Conecta con el conocimiento previo preguntando a los participantes:

  • ¿Cuál es la diferencia entre un navegador web y un motor de búsqueda?

  • ¿Cómo se llaman los navegadores web más populares?

  • ¿Cuál es el motor de búsqueda más popular?

  • Aclara cualquier confusión

  • Un navegador es un programa de software gratuito que muestra sitios web y permite acceder a varios sitios y páginas en internet. Puedes descargar el navegador que quieras. Cuando compras una computadora, normalmente ya trae un navegador instalado para que puedas conectarte de inmediato. Piensa en el navegador como la puerta de entrada a internet.

  • Un motor de búsqueda, como Google, Yahoo o Bing, también es un programa de software que busca un documento determinado cuando se introducen palabras específicas. Cuando un usuario escribe palabras clave en una caja de búsqueda, el motor usa algoritmos para mostrar resultados que coinciden con esa búsqueda.

  • Busca y explora

  • Pide a los participantes abrir uno de los navegadores de sus computadoras. Será mucho más fácil que todos abran el mismo navegador, porque los nombres y opciones difieren un poco entre navegadores. Esta lección se basa en Firefox.

  • Explica que al abrir un navegador se accede a la página de inicio del navegador, que es una página web. Los usuarios pueden elegir la página de inicio de su navegador.

  • Pide a los participantes pasar el mouse sobre los íconos en la parte superior de la pantalla (la barra de herramientas) y anotar en notas adhesivas las palabras que aparecen. También pueden hacer clic y ver la función. Deberían encontrar:

  • Abrir una nueva pestaña

  • Cerrar pestaña

  • Retroceder una página

  • Avanzar una página

  • Recargar

  • Página de inicio

  • Mostrar historial

  • Abrir menú

  • Buscar o escribir la dirección

  • Búsqueda

  • Barra de desplazamiento

  • Pide a los participantes categorizar las herramientas. ¿Qué herramientas permiten navegar por la página? ¿Cuáles se relacionan con buscar un sitio?

  • Pide abrir y cerrar pestañas nuevas. Explica las razones para mantener varias pestañas abiertas. El objetivo es eliminar la confusión entre cerrar el navegador y cerrar una página web. Quizá quieras retomar este punto cuando los participantes tengan varias páginas abiertas.

  • Los participantes pueden escribir las palabras de sus notas adhesivas y dibujar el ícono junto a cada palabra, o bocetar la página inicial del navegador y completar las herramientas.

Actividad en línea: entra a la World Wide Web

Parte II

[15min]

  • Los participantes practicarán la navegación en un sitio en preparación para la actividad de investigación: Detective en la Web.

  • Pregunta cuándo se usa un motor de búsqueda y cuándo no. (Si sabemos la dirección web exacta, no necesitamos buscar).

  • Elige un sitio relevante para tus participantes y pídeles escribir la URL en la barra de direcciones.

  • Discute las distintas extensiones y explica qué nos dicen sobre el tipo de empresa u organización: .com, .org, .edu, .gov, .net. * También puedes hablar de http, https y www como parte de la URL (Uniform Resource Locator, localizador uniforme de recursos) o dirección web. El sitio normalmente contiene una colección de páginas web.

  • Pide a los participantes nombrar lo que ven en la página web: medios, texto, títulos, herramientas de navegación o enlaces a otras páginas. Explica cómo identificar un enlace a otra página o recurso. Muéstrales la imagen de un cursor con forma de mano.

  • Pregunta si alguna vez estuvieron en una página, hicieron clic en enlaces a otras páginas ¿y no lograron volver adonde querían estar?

  • Pídeles pensar en las herramientas de navegación en la parte superior de la página y discutir cómo usarlas (volver a la última página visitada, avanzar para revertir la acción, recargar para obtener información actualizada y página de inicio).

  • Luego pide usar la barra de desplazamiento horizontal en la parte inferior y la barra lateral para mover la página arriba, abajo, izquierda y derecha. (No todas las páginas tienen barra horizontal).

  • Pide cerrar el navegador. Luego entrega una URL y una lista de «tesoros» para encontrar en ese sitio específico. Algunas ideas:

  • Mira la extensión de la URL. ¿Qué podemos deducir del tipo de organización por esta URL?

  • Identifica los medios de la página de inicio: ¿cuál es el nombre y el contenido?

  • Ve a la página X y lista 3 datos de esa página

  • ¿Qué navegador estás usando?

Reflexión y repaso

[5 min]

  • La persona facilitadora pregunta: ¿cómo cambia lo que aprendiste hoy tu manera de pensar sobre las búsquedas en la web y sus resultados?

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Fiesta de la Búsqueda

Habilidades: Búsqueda, Síntesis, Evaluación, Resolución de problemas, Colaboración, Comunicación

Descripción

En esta discusión/actividad fuera de línea, los participantes consideran la búsqueda en la web y por qué es tan importante y tan desafiante. Aprenden sobre programas de software llamados «rastreadores web» y «motores de búsqueda» que ayudan a encontrar y entregar resultados entre miles de millones de recursos web. Los participantes también reciben una introducción a los algoritmos y practican escribirlos y revisarlos.

Objetivos de aprendizaje

  • Nombrar los programas de software que ayudan a recolectar y clasificar los resultados de búsqueda.

  • Crear un ejemplo de algoritmo que ilustre cómo los algoritmos apoyan las búsquedas en la web.

  • Crear un índice para un algoritmo simple.

Tiempo necesario

De 1 a 1,5 horas según el tamaño del grupo

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web

Materiales

  • Colecciones de 20 a 60 objetos pequeños y variados del mismo tipo — por ejemplo, grupos de botones o cuentas de distintas formas, tamaños, colores, texturas, materiales. Necesitarás una colección por cada grupo de 2 a 4 participantes.

  • Una computadora/proyector configurado, u otra forma de mostrar video en streaming (de YouTube) y conexión a internet.

  • Una pizarra blanca, pizarrón o rotafolio para notas que todo el grupo pueda ver.

  • Notas adhesivas

Habilidades de Alfabetización Web

  • Búsqueda

  • Síntesis

  • Evaluación

Habilidades del siglo XXI

  • Resolución de problemas

  • Colaboración

  • Comunicación

Introducción

[3-5 min]

  • La persona facilitadora pide a cada integrante presentarse y responder una pregunta rompehielos (comida favorita, juego favorito, a qué muppet o personaje de dibujos animados se parece más).

¡Consejo! La pregunta rompehielos ayuda a que los aprendices conozcan al grupo y se sientan más cómodos durante la discusión; puede — pero no necesita — estar relacionada con la Alfabetización Web.

Encuadre: buscando en la Web

[5 min]

  • ¿Qué fue lo último que buscaste en la web? ¿Qué herramientas usas al buscar? Cuando buscas, ¿con qué frecuencia encuentras lo que necesitas? ¿Algunas búsquedas son más fáciles que otras?

  • La persona facilitadora conecta las respuestas con una gran idea.

  • ¡Actualmente la web tiene miles de millones de páginas! Eso es muchísima información y recursos; por eso, encontrar la información correcta en esa enorme colección de páginas interconectadas es el trabajo de un conjunto de programas de software.

  • Algunos de esos programas hacen el trabajo de explorar la web para descubrir qué hay, y crear un índice de la web.

¡Consejo! Si corresponde, puedes preguntar: ¿qué es un índice? ¿Dónde sueles encontrarlo y para qué sirve? (En los libros, un índice es una lista ordenada del contenido que ayuda a encontrar temas específicos en todo el libro).

  • Explica que los participantes experimentarán creando un índice (o listado ordenado) de una colección de objetos, lo que nos ayudará a encontrar elementos específicos en esa colección.

Actividad fuera de línea: ¡sé el rastreador!

[30 min]

  • Busca en una colección.

  • Con el método que prefiera, la persona facilitadora divide a los participantes en grupos de 2 a 4.

  • Cada grupo recibe una colección de 20 a 60 objetos pequeños y variados — por ejemplo, botones, cuentas o piezas de Lego de distintas formas, tamaños, colores, texturas, materiales.

  • La persona facilitadora pide a cada grupo encontrar todos los botones o cuentas azules de la colección. Al terminar, deben levantar la mano. Inicia un temporizador y anota cuándo terminan todos los grupos. Pide a cada grupo informar cuántos botones o cuentas azules encontró.

¡Consejo! Si hay tiempo, prueba otra búsqueda, agregando otro atributo junto al color, como textura o tamaño.

  • Discute la tarea

  • La persona facilitadora dice: acaban de hacer una búsqueda — ¡felicidades, todos son motores de búsqueda! Hablemos de cómo lo hicieron — ¿qué hicieron para encontrar todos los elementos azules? ¿Qué ayudó? ¿Fue fácil o difícil?

¡Consejo! Si al grupo le cuesta reflexionar, pregunta: ¿tuvieron que sacudir o vaciar la colección para ver qué había? ¿Tuvieron que discutir qué cuenta como azul? ¿Las colecciones más grandes son más difíciles de buscar?

  • Documenta el proceso de búsqueda.

  • Pregunta: si escribiéramos una lista de pasos de esta búsqueda simple, ¿cómo se vería? Hagámoslo juntos — ¿qué pasos dieron? ¿Se repitieron pasos?

¡Consejo! El conjunto de pasos puede verse así:

Esparce la colección para poder verla. Decide qué cuenta como «azul» (o mediano, o el término de búsqueda que sea). Selecciona un botón que corresponda a la descripción. Ponlo a un lado. Repite hasta que no queden botones azules. Calcula el total final de botones. Levanta la mano para señalar que terminaste. Informa el número.

  • Una vez documentada la lista, pregunta: ¿alguien más podría hacer esta tarea solo mirando nuestra lista?

  • Explica que esta lista secuencial de tareas se conoce como algoritmo. Cuando los desarrolladores de software escriben código, escriben algoritmos, listas de tareas que las computadoras ejecutan.

  • Pregunta: ¿qué facilitaría esta tarea? ¿Hay algo que podríamos hacer POR ADELANTADO para acelerar?

  • Crea un índice

  • Pide a los participantes encontrar una manera de ordenar los elementos de la colección para acelerar la búsqueda — ¡eso es un índice! Ofrece hojas, bolígrafos y notas adhesivas y deja que resuelvan el sistema.

¡Consejo! Si parecen atascados, sugiere: ¿cómo se pueden agrupar los elementos? ¿Hay semejanzas entre ellos? ¿Qué características podría buscar alguien?

  • Cuando parezcan terminados, dales una segunda búsqueda, distinta de la primera. Cronometra cuánto tardan todos los grupos en terminar e informar. Anota el tiempo — debería ser más rápido para todos, especialmente para los grupos con colecciones grandes.

  • ¡Discutan!

  • ¿Cómo resolvieron el problema? ¿Qué enfoques tomaron? ¿Fueron iguales o diferentes?

  • Destaca que el proceso de explorar la colección y crear ese índice es exactamente lo que hacen los programas llamados «web crawlers» o «spiders» — examinando una por una miles de millones de páginas y creando un índice para agilizar las búsquedas.

¡Consejo! Si hay tiempo, discute la idea de metadatos: información que ayuda a describir cada objeto de la colección — «azul», «cuadrado», «cuenta», «botón».

  • Revisa el algoritmo

  • Vuelve al algoritmo: ¿cómo cambian los pasos al tener la colección indexada?

¡Consejo! Aquí puedes tener una discusión grupal sobre el algoritmo y las adiciones que cada grupo haría a los pasos (según cómo crearon su índice). O (si el tiempo alcanza) puedes pedir que tomen el algoritmo básico y escriban un nuevo conjunto de pasos que funcione con su colección indexada. Luego los grupos pueden recorrer la sala.

  • Asegúrate de resaltar que los nuevos algoritmos difieren según el grupo y el método de indexación. Conecta esto con la idea de que, al usar distintos motores de búsqueda, obtenemos resultados diferentes según el algoritmo y cómo se indexan los sitios.

Reformulación

[5-10 min]

  • La persona facilitadora explica que, claro, las páginas web no son botones/cuentas. ¿Qué hay de diferente? Pide discutir, o explica estos puntos:

  • Las páginas web son mucho más complejas y llenas de información e imágenes ricas.

  • Están todas interconectadas — enlazadas entre sí, de modo que una puede referirse o conectarse a otra — de una manera que nuestros botones no pueden.

  • Además, hay miles de millones de páginas — esto ocurre a una escala totalmente distinta de nuestras pequeñas colecciones.

  • Explica que los mismos principios del ejercicio de botones se aplican a las empresas de motores de búsqueda como Google y Yahoo, que crean índices y usan algoritmos para encontrar sus resultados.

  • Muestra este video corto sobre cómo funciona la Búsqueda de Google https://www.youtube.com/watch?v=BNHR6IQJGZs

  • Señala que:

  • ¡No todas las páginas están en el índice! Solo parte de la web está disponible, y las páginas más populares suelen estar al tope de tu búsqueda.

  • El algoritmo está diseñado para dar un buen resultado, pero no siempre el mejor, y tu resultado puede variar de un día a otro.

  • Los algoritmos los diseñan personas, en empresas como Google, Microsoft, Yahoo, etc., y se ajustan y cambian constantemente.

  • Existe algo llamado Search Engine Optimization (SEO): cosas que diseñadores, desarrolladores y creadores de contenido hacen para que sus páginas queden bien arriba en los resultados, aprovechando cómo funciona el algoritmo.

Actividad en línea

[5-10 min]

  • Pide a los participantes compartir búsquedas o preguntas que tengan — por ejemplo, cuánto se tarda caminando a São Paulo, qué lleva una salsa especial o cuánto gana un veterinario al año.

  • Hagan una lluvia de ideas y listen distintos motores de búsqueda: Bing, Yahoo, Google, etc.

  • Asigna a cada participante o grupo una pregunta y un motor, y pide buscar al menos 3 fuentes distintas de información.

  • Discutan en grupo lo que encontraron en su búsqueda.

  • Pide buscar de nuevo con la misma pregunta pero con otro motor, y comparar los resultados con la primera búsqueda.

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Detective Web

Habilidades: Evaluación, Búsqueda, Navegación, Resolución de problemas, Colaboración, Comunicación

Descripción

Aprende a distinguir la verdad de la ficción mientras usas la web para investigar la existencia del Kraken — una enorme y peligrosa criatura marina con tentáculos — y cómo detectar información errónea y desinformación. Los participantes colaborarán para crear un conjunto de reglas que los guíe al evaluar fuentes de la web para resolver una pregunta de investigación, y las compararán con otras listas de verificación.

Objetivos de aprendizaje

  • Buscar y evaluar información en la web.

  • Crear criterios para evaluar información en la web.

  • Listar otros recursos disponibles para evaluar información en la web.

Tiempo necesario

De 1 a 1,5 horas según el tamaño del grupo

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web.

Materiales

  • Notas adhesivas

  • Rotafolio, pizarra blanca o papel

  • Lápices, marcadores

  • Portátil con conexión a internet

Habilidades de Alfabetización Web

  • Evaluación

  • Búsqueda

  • Navegación

Habilidades del siglo XXI

  • Resolución de problemas

  • Colaboración

  • Comunicación

Introducción

[15-20 min]

  • Encuadra brevemente y conecta este tema con una gran idea.

  • Pregunta a los participantes:

  • ¿Buscas información en la web? ¿Qué fue lo último que buscaste?

  • ¿Cómo te ayuda/cambia las cosas este recurso?

  • Conecta esta discusión con la idea de que la web es una fuente rica y compleja de todo tipo de información, de muchas fuentes distintas.

  • Facilita una breve discusión sobre las fuentes de la web.

  • ¿Todo lo que lees o ves en línea es verdad?

  • ¿Cómo sabes cuándo la información en internet es confiable?

  • ¿Cómo puedes darte cuenta cuando no lo es?

¡Consejo! Discute con los participantes la historia de las noticias falsas (fake news) y pídeles ejemplos del pasado y del presente, y por qué puede parecer más prominente hoy (por ejemplo, las noticias falsas no son novedad, pero gracias a las redes sociales pueden llegar a más gente más rápido de lo que lograban los correos virales). ¡Consejo! Discute la diferencia entre información errónea (información falsa) y desinformación (información falsa y deliberadamente destinada a engañar). Señala que podemos prestar atención a lo que percibimos y sentimos en línea y usar esas respuestas, además de un conjunto de criterios, para ser mejores detectives de la web. ¡Consejo! Un remix de esto es hablar de estrategias publicitarias, tendencias, etc. — de cómo los medios en la web suelen estar diseñados para provocar sentimientos específicos.

Co-crea una lista de criterios

[10 min]

  • Crea criterios que te guíen al determinar la confiabilidad de la información en la web.

  • Pide pensar y escribir en notas adhesivas individualmente y luego compartir con el grupo.

  • La persona facilitadora debe dejar que el grupo los genere, pero puede guiar suavemente o completar con algunas sugerencias: fuentes, autores — trayectorias, capacidades, frescura/fecha, familiaridad del sitio/fuente, diseño del sitio, estilo de escritura/ortografía, publicidad, otras historias del sitio, etc.

  • Facilitator should let the group generate these, but can gently guide or fill-in with a few suggestions and prompts, such as: sources, authors– backgrounds, capabilities, freshness/date, familiarity of site/source, design of site, writing style/spelling, advertising, other stories on site, etc.

  • Intenten acordar cada regla. La lista no necesita ser exhaustiva — apunten a seis o más elementos.

  • Si hay controversia, no eliminen las reglas: manténganlas a un lado.

  • Permite la discusión de las reglas y reconoce que los criterios que funcionan para algunos pueden no funcionar para otros.

  • Documenta las reglas compartidas en una hoja grande, pizarrón o rotafolio y ponla donde todos la vean.

  • Habrá oportunidad de agregar o revisar la lista después de la actividad.

Investigando y evaluando evidencias

[20 minutos]

¡Consejos! Anima a los participantes a comentar en voz alta sus ideas y observaciones mientras exploran y puntúan. ¡Consejos! Anima a hacer clic en los sitios donde se publicaron las historias para más información sobre la fuente, el autor, los patrocinadores, etc. ¡Consejos! Anima a pensar en la línea de tiempo de las historias — ¿cuándo aparecieron? ¿Cuáles son más recientes? ¿Cómo se conectan las fuentes e historias?

  • Pide reflexionar sobre lo que notaron/sintieron al mirar los sitios. [10-20 minutos]

  • ¿Algo te sorprendió?

  • ¿Hubo diferencia entre el titular y la idea principal?

  • ¿Qué diferencias notaste en la historia de sitio a sitio?

  • ¿Qué sentiste al leer o mirar los sitios? ¿Algunos fueron más divertidos/emocionantes que otros?

  • ¿Qué sitios parecen más confiables? ¿Cuáles no? ¿Validaste las fuentes en línea?

  • ¿Propones nuevas reglas para la lista?

  • ¿Quién es el dueño del sitio? ¿Cómo descubrir el objetivo del sitio? ¿Cuándo se creó la página?

  • Revisa la lista de reglas y discute según sea necesario.

  • Compartan los resultados de la pregunta de investigación — ¿cuáles son sus respuestas? ¿Cómo ayudó la lista de reglas?

  • Conclusión: Dadas estas historias, podemos decir que el Kraken, una criatura marina con tentáculos de 100 a 120 pies que ataca y hunde barcos, probablemente NO es real. En la primera historia, una isla de rocas se confunde con un Kraken. En la segunda, el video capturó un calamar gigante, pero es mucho más pequeño y tímido que el Kraken que buscamos, aunque puede haber inspirado las leyendas.

Detectando habilidades en la naturaleza

[15-20 min]

  • Explica que probaron la lista con un conjunto seleccionado de recursos — noticias preseleccionadas. Ahora pueden probar sus listas con fuentes de noticias e información que encuentren «en estado salvaje».

  • Hagan una lluvia de ideas, o asigna una cuestión controvertida — de las noticias o de la cultura pop.

¡Consejo! Asegúrate de que formulen la pregunta con claridad, enfocándose en probar o refutar un hecho específico.

  • Pide hacer una búsqueda en la web para encontrar 3 o 4 fuentes distintas sobre esa controversia.

  • Pide usar el mismo proceso de la sección anterior para evaluar la afirmación.

  • Reúne al grupo para compartir resultados. Pregunta:

  • ¿Algunos resultados fueron diferentes o hubo consenso?

  • ¿Qué fuentes eran confiables? ¿Cuáles decidieron que no lo eran?

  • ¿Agregarían o cambiarían algo en su lista?

Verifica tu lista de verificación

[6 min]

¡Consejo! Explica que algunas de estas listas están hechas por y para periodistas, que escriben y publican noticias — antes de internet, eran los «guardianes» (gatekeepers) de la información factual. ¿Qué significa ser un guardián? Los usuarios actuales de redes sociales — tú, si usas y publicas en redes — ¿también son «guardianes» potenciales de información factual? ¡Consejo! Si el tiempo alcanza, considera agregar esta actividad, que explora cómo falsificar tus propias noticias: https://nucleus-network.github.io/missioninfo/activities/fakenews.html#overview

  • Explica que hay varios sitios dedicados a verificar hechos en las noticias, además de información de cultura pop y leyendas urbanas. Politifact.com, FactCheck.org y el Fact Checker Blog del Washington Post cubren las noticias. Snopes.com abarca noticias y cultura pop.

  • Pregunta a los participantes:

  • ¿Ya usaron sitios como estos?

  • ¿Es probable que los usen?

  • ¿Cómo evaluar la confiabilidad de esos sitios?

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Diseño en la Web

Habilidades: Diseño, Búsqueda, Navegación, Comunicación, Colaboración, Resolución de problemas

Descripción

En esta discusión y actividad en línea, los participantes exploran y experimentan cómo funciona el diseño visual en la Web y cómo los diseñadores web usan sus habilidades para estimular determinados comportamientos. Los participantes comparan y contrastan los elementos visuales e interactivos de distintas páginas y plataformas. En parejas, narran y documentan los «viajes del usuario» a través de un sitio — un proceso que los diseñadores web de la vida real usan para probar y mejorar sitios.

Objetivos de aprendizaje

  • Explicar cómo funciona el diseño visual en la web

  • Identificar cómo se usan los elementos de diseño web para incentivar determinado comportamiento

  • Criticar y documentar reacciones a un sitio web

Tiempo necesario

De 45 minutos a 1 hora, según el tamaño del grupo

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web.

Materiales

  • Notas adhesivas

  • Lápices, marcadores

  • Portátil con conexión a internet

Habilidades de Alfabetización Web

  • Diseño

  • Búsqueda

  • Navegación

Habilidades del siglo XXI

  • Comunicación

  • Colaboración

  • Resolución de problemas

Introducción

[10 min]

La persona facilitadora introduce la idea de que la web es un espacio proyectado. Todo lo que experimentas en la web es resultado de una decisión y una intención humanas: * Un botón o barra de búsqueda en un lugar determinado * Texto de cierto tamaño * Elecciones de color * Imágenes, texto, etc.

  • La persona facilitadora pregunta: ¿qué significa diseñar algo?

  • Pensemos en el diseño del mundo físico. Tomemos los edificios, por ejemplo (elige dos ejemplos contrastantes):

  • casa embrujada/edificio de gobierno/discoteca

  • vs. ¿casa de campo acogedora/guardería/biblioteca?

  • ¿Has estado en espacios como estos? ¿Cómo pueden verse o sentirse diferentes?

  • ¿Qué sentimientos distintos quieres que tengan los usuarios de tu edificio?

  • ¿Qué acciones distintas quieres que tomen los usuarios de tu edificio?

  • Los diseñadores toman decisiones para crear un resultado — en acción o sentimiento para el usuario. Todos los diseñadores tienen planes e intenciones.

  • Como usuario, respondes al diseño con sentimientos y acciones (o no).

  • La persona facilitadora conecta la discusión sobre espacios físicos con la Web: como un espacio físico, la mayoría de los sitios está diseñada con una intención — hay algo que el diseñador quiere que los usuarios hagan.

  • Discute o haz una actividad de pensar/pareja/compartir sobre estas preguntas:

  • ¿Qué sitios usas con más frecuencia? Cada participante piensa en un sitio (YouTube, Facebook, Google, Amazon, el sitio de la biblioteca, etc.)

  • ¿Cuál es el objetivo del sitio? ¿Qué pretende su creador que hagas? (Puede ser: comprar cosas, ver anuncios, etc.)

  • ¿Qué haces ahí? ¿Qué quieres hacer?

  • ¿Tu objetivo difiere del que quiere el diseñador del sitio? ¿En qué?

  • ¿Alguna vez visitaste un sitio con la intención de hacer una cosa y terminaste haciendo otra? ¿Cómo o por qué pasó?

  • ¿Alguna vez visitaste un sitio y no pudiste hacer o encontrar algo?

  • La persona facilitadora explica que cuanto mejor es el diseño del sitio, mayor es la probabilidad de que hagas lo que el diseñador pretende.

Elementos de diseño visual

[5 min]

  • Para muchos usuarios de la Web (excepto usuarios con discapacidad visual, que usan lectores de pantalla), los sitios tienen un fuerte componente visual. Pregunta: ¿cuáles son algunos elementos del diseño visual?

¡Consejo! Aquí puedes usar un ejemplo para arrancar, o crear primero una lista juntos. Algunos elementos pueden incluir:

  • Color

  • Tamaño

  • Forma

  • Espacio

  • Posición (alineación, proximidad)

  • Repetición

  • Variedad

  • Armonía

  • Miren ejemplos — ¿cuál es la intención del sitio? ¿Cómo se usa el diseño?

  • Para cada ejemplo: ¿qué ves? ¿Qué ves primero? ¿Qué elementos de diseño visual hay? ¿Qué destaca?

  • Dos ejemplos para comparar y contrastar:

  • casa embrujada/edificio de gobierno/discoteca

  • vs. ¿casa de campo acogedora/guardería/biblioteca?

  • Deja mirar y discutir. Algunas cosas que pueden mencionar:

  • En el ejemplo de Google:

  • El foco es la barra de búsqueda — es casi lo único en la página.

  • El logotipo colorido de Google resalta contra el fondo blanco.

  • Mucho espacio en blanco nos ayuda a enfocarnos.

  • En el ejemplo de Amazon:

  • Tantas cosas para ver y hacer clic —

  • Algunas cosas son más grandes: el anuncio del Echo Dot recibe mucho espacio, así que es importante.

  • El botón emergente «LOG IN» flota sobre el resto del diseño, llamando la atención.

  • El botón «Explore» también resalta visualmente.

  • La barra de búsqueda es prominente y fácil de encontrar — mira la lupa amarilla.

  • Los círculos repetidos dan la sensación de poder elegir entre muchos grupos de productos para comprar.

  • Las pequeñas imágenes de productos arriba son lúdicas y divertidas; tienen tamaño uniforme, dando la sensación de que hay muchas.

Elementos interactivos de diseño

[5 min]

  • Pregunta: ¿qué elementos hacen interactivo a un sitio?

  • Ejemplos: enlaces, formularios, barras de búsqueda, botones de «me gusta», botones «Comprar ahora», cajas de comentarios, cajas de actualización de estado, listas desplazables, mouse-overs para pop-ups

  • Miren algunos ejemplos y discutan qué ven. Pregunta: ¿cómo trabajan los elementos de diseño visual (tamaño, color, forma, posición) con los elementos de interacción?

  • Pueden notar que los diseñadores usan color, tamaño y posición para llamar la atención hacia los botones que quieren que presionen, o la barra de búsqueda, etc.

¡Consejo! Si navegan en línea, pueden probar el modo de diseño responsivo (Herramientas > Desarrollador web > Modo de diseño responsivo), que permite ver cómo aparecerá el sitio en distintos dispositivos.

¿Qué elementos del sitio desaparecen cuando la pantalla es menor y cuáles permanecen? Ver un sitio en ese modo ayuda a entender qué aspectos considera más importantes el diseñador.

Objetivos del usuario, metas del sitio

[5 minutos]

  • Consideremos las metas que un sitio (o la empresa/organización que representa) tiene para las interacciones, comparadas con las metas del usuario. Selecciona un sitio real como ejemplo.

¡Consejo! Elige sitios comunes, como Amazon.com, YouTube.com o los que use la comunidad de tu público. Puedes asignarlos o dejar que los participantes elijan.

  • Pregunta:

  • ¿Qué objetivos pueden tener los usuarios en relación con el sitio?

  • ¿Qué metas puede tener el sitio/empresa/organización?

  • Intenten listar tres o más metas potenciales de cada lado. Por ejemplo:

  • YouTube.com puede querer incentivar a ver mucho contenido. Una meta secundaria puede ser que los usuarios vean y hagan clic en anuncios. Una tercera, incentivar comentarios en los videos.

  • Un usuario de YouTube.com puede querer ver solo un video específico. O encontrar muchos videos sobre un tema. O subir su propio contenido.

  • ¿Los objetivos de usuarios y sitio están en conflicto? ¿Cómo?

  • ¿Qué pasa cuando las metas del usuario y del sitio chocan?

  • Explica que, al documentar su experiencia con los sitios, pueden ver cómo el diseño funciona para lograr las metas del sitio y las del usuario… ¡o no!

Investigaciones y viajes

[15 minutos]

  • En esta actividad, los participantes se emparejan y trabajan juntos para documentar sus propios viajes de usuario en un sitio específico. El objetivo es percibir cómo interactúan con el diseño. Idealmente, cada pareja debe tener una computadora.

  • La persona facilitadora forma las parejas. Puede seleccionar los sitios o dejar que los participantes elijan.

  • Pide ir al sitio con una intención u objetivo en mente.

  • Por ejemplo: voy a Amazon a buscar libros sobre gatitos; voy a buscar una clase de introducción a HTML en YouTube.

  • Una persona de la pareja es el usuario que navega y va contando en voz alta lo que hace: «voy a escribir “gatitos” en la barra de búsqueda» o «voy a bajar y leer estos comentarios».

  • La otra persona escucha/documenta el viaje del usuario. Debe notar y/o tomar notas sobre la experiencia.

  • Por ejemplo, documentar:

  • ¿Cuál es el plan u objetivo del usuario al usar el sitio?

  • ¿Qué es lo primero que ve en el sitio? ¿Qué resalta?

  • ¿Dónde hace clic?

  • ¿Mira/ve/escucha contenido que no buscaba (anuncios, videos o artículos sugeridos, etc.)?

  • ¿Por qué pasó eso?

  • ¿Cómo se siente el sitio? Frío, amigable, elegante, sofisticado, etc.

  • ¿Qué le molestó? ¿Qué fue divertido?

  • ¿Mantuvo su objetivo original o se desvió?

  • ¿En qué gastó más tiempo en el sitio?

  • Cada participante debe pasar de 5 a 7 minutos navegando como usuario y de 5 a 7 minutos documentando la experiencia de su pareja como oyente/anotador.

¡Consejo! Versión fuera de línea: se puede imprimir una página web para que los participantes la marquen. Puedes dar una página interna y la página de inicio del sitio (para investigar si la página interna realmente ayuda a navegar el resto). Como consecuencia, los participantes pueden usar una hoja en blanco para prototipar una página que resuelva los problemas que ven en las impresiones.

Reflexión y repaso

[5 min]

  • La persona facilitadora conduce una breve discusión/reflexión sobre los viajes del usuario.

  • Explica que los viajes del usuario son una herramienta que los diseñadores usan al probar sitios y aplicaciones — piden a usuarios probar el sitio y documentan cada paso para refinar el diseño.

  • ¿Qué descubrieron en el ejercicio del viaje del usuario?

  • ¿Qué notaste durante la actividad? ¿Qué fue nuevo, inesperado?

  • ¿Percibiste que el diseño visual o los elementos de interacción influyen en tu comportamiento?

  • ¿Notaste alguna tensión entre lo que querías hacer u obtener y lo que el diseño del sitio te sugería hacer?

  • ¿Cómo te hace sentir eso?

  • ¿Crees que notarás o harás algo distinto cuando navegues en el futuro?

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Marcado Básico

Habilidades: Comunicación, Colaboración, Creatividad, Código, Diseño

Descripción

En esta actividad, los participantes exploran cómo la información, como texto e imágenes, puede presentarse para ser fácilmente legible/comprensible, y cómo eso funciona en la web usando tags HTML. La actividad explora cómo funcionan los navegadores, cómo se estructuran las páginas web y la relación entre las tags HTML y el contenido.

Objetivos de aprendizaje

  • Describir cómo se usa el código HTML para crear páginas web.

  • Identificar tags HTML comunes.

  • Crear un archivo de texto que pueda mostrarse como página web usando tags HTML

Tiempo necesario

De 45 minutos a 1 hora, según el tamaño del grupo

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web.

Materiales

  • Notas adhesivas

  • Lápices, marcadores

  • Portátil con conexión a internet

  • Imprime tarjetas con tags para la TagTag Revolution o haz las tuyas en trozos de papel; escribe las siguientes «tags» (¡no olvides incluir la flecha!):

  • Tags de apertura: «<aplaudir> →» (también cantar, zapatear, girar, agitar).

  • Tags de cierre: «</aplaudir> ←» (también cantar, zapatear, girar, agitar).

Habilidades de Alfabetización Web

  • Código

  • Diseño

Habilidades del siglo XXI

  • Comunicación

  • Colaboración

  • Creatividad

Introducción

[3 min]

  • Repasa los conceptos clave, encuadra y conecta este tema con una gran idea. Explica:

  • Internet es un sistema de computadoras interconectadas, y la world wide web es un sistema de páginas interconectadas que viven en internet.

  • Los sitios son espacios para acceder, compartir e interactuar con contenido multimedia.

  • Las personas que crean la web — desarrolladores y diseñadores web — usan un lenguaje de codificación llamado HyperText Markup Language, o HTML, para crear páginas web.

  • Cuando accedes a la web, usas un software llamado navegador para mostrar páginas.

¡Consejo! Pregunta quién conoce ejemplos de navegadores web.

  • Hoy exploraremos el HTML — específicamente, cómo usamos HTML para hacer que nuestro contenido (texto, imágenes, etc.) sea legible por los navegadores y fácil de leer y entender para los humanos.

Contenido y tags

(5-7 mins)

  • Para esta actividad necesitas dos recursos visuales:

    1. la primera plana de un periódico mostrando imágenes, titulares, líneas de texto, texto, párrafos, columnas.
    1. el texto y las imágenes de la primera plana despojados de todo formato, en la misma fuente y tamaño, sin párrafos, columnas, etc., impresos en una sola página. Puedes hacerlo accediendo a una copia digital de un periódico de edición impresa, como el New York Times, seleccionando todo el contenido, copiándolo en un editor de texto y quitando todo el formato (con el comando «make plain text»). Quizá tengas que editar un poco más para quitar todo el formato. El objetivo es mostrar una primera plana típica junto al contenido como un bloque de texto uniforme y continuo.
  • Muestra ambas páginas; di que el contenido es el mismo en las dos.

  • Discutan juntos — ¿cuál es la diferencia? ¿Qué falta? ¿Qué página es más atractiva? ¿Cuál es más interesante? ¿Cuál es más fácil de leer? ¿Por qué?

  • Discutan cómo elementos como titulares, columnas, líneas de texto, distintos tamaños de fuente y bloques de texto ayudan a organizar el contenido y dirigen la mirada a lo importante.

¡Consejo! Mantén una lista de los elementos de diseño que surjan — mapéalos a las tags HTML más adelante en la lección.

  • ¡Concepto clave! Explica que así es como los diseñadores web usan el HyperText Markup Language: para agregar formato al contenido en la Web, de modo que el navegador pueda mostrarlo de forma legible e interesante.

  • Los diseñadores web usan «tags» HTML para decirle al navegador qué hacer con el contenido.

  • Pregunta: ¿qué es una tag? ¿Dónde hay tags? ¿Qué hacen?

¡Consejo! Si les cuesta, explica: tienes etiquetas en la ropa o el equipaje, la gente te etiqueta en redes sociales, puedes etiquetar una entrada de blog… Una tag es un pedacito de información que adjuntas a algo, para identificarlo o agregar instrucciones especiales.

  • Explica: cuando los diseñadores web escriben HTML, toman partes del contenido y las «marcan» con tags para decirle al navegador cómo mostrarlo. Ponen una tag al inicio del contenido (la de apertura) y una al final (la de cierre), para que el navegador sepa cuándo empezar y parar.

¡Consejo! Las visualizaciones ayudan mucho aquí — escribe o proyecta un ejemplo (como abajo) donde todos lo vean.

  • Explica que las reglas del marcado son:

  • Cuando queremos marcar contenido, lo rodeamos con un par combinado de palabras, cada una rodeada por corchetes angulares «< >».

  • Mira una tag de ejemplo: <title> Etiqueta el mundo </title>

¡Consejo! Pregunta: en este ejemplo, ¿cuál es el título?

  • Cuando las tags se usan en línea, los corchetes avisan al navegador de que es una tag. La palabra o carácter dentro de cada corchete da al navegador información importante sobre lo que hay dentro.

  • Verás algo distinto en el segundo par de corchetes: </title> — la barra significa que es una tag de CIERRE, que avisa al navegador que el marcado terminó.

  • SIEMPRE usamos tags de apertura y cierre para rodear el contenido.

  • Con poquísimas excepciones, las tags SIEMPRE encajan con el contenido, como en los ejemplos que discutimos.

  • Cuenta que ahora experimentaremos el CONCEPTO de marcado en actividades fuera de línea antes de profundizar y ver cómo funcionan en línea.

Fuera de línea: Etiqueta el Mundo

[10 min]

¡Consejo! Si tus participantes parecen cómodos con el concepto de apertura y cierre de tags (o te falta tiempo), puedes saltar esta y pasar a la siguiente sección. Si necesitan más tiempo, haz la actividad Etiqueta el Mundo.

  • Introducción: explica que experimentarán creando etiquetas y asignándolas a cosas reales de la sala. Reparte hojas, marcadores y cinta adhesiva. Es un ejercicio para mostrar el CONCEPTO de marcado y de apertura/cierre de tags.

  • Aquí en el mundo real tienes total libertad para crear tus propios nombres de tags. Después veremos que en HTML usamos un conjunto restringido de nombres acordados. Pero por ahora, crea la tag que quieras.

¡Consejo! Escribe este ejemplo en letras grandes en la pizarra o proyéctalo. Dedica el tiempo necesario y asegúrate de que todos lo entiendan — ¡es importante!

  • Repasa las reglas del marcado:

  • Cuando queremos marcar contenido, lo rodeamos con un par combinado de palabras entre corchetes angulares «< >». Una tag de ejemplo:

  • <title> Etiqueta el Mundo </title>

  • SIEMPRE usamos tags de apertura y cierre para rodear el contenido.

  • ¡Puedes etiquetar cualquier cosa de la sala — crea tus tags y ciérralas!

¡Consejo! Para ayudar a empezar, crea una tag de ejemplo y ponla en la sala — <silla> </silla>. ¡Anima a divertirse y ser creativos!

Fuera de línea: Revolución de las Etiquetas

[10 min]

  • Introducción: explica que van a jugar una divertida ronda musical para mostrar cómo las tags HTML asignan instrucciones al contenido.

¡Consejo! El juego funciona mejor con grupos de más de 10. Con un grupo mayor, agrega tags extra. Con uno pequeño, usa menos. Siéntete libre de inventar.

  • Pasos:

Organiza a los jugadores en círculo, con espacio suficiente para caminar por fuera del círculo.

Elige a dos jugadores como «Programadores». Entrega a uno la primera tag de apertura y al otro la de cierre correspondiente. Empieza con algo fácil como <aplaudir> y </aplaudir>.

Pon música y haz que los dos «Programadores» caminen por fuera del círculo mientras los demás quedan quietos. Que mantengan poca distancia entre sí — pueden empezar a cinco pasos uno del otro.

Cuando pares la música, los «Programadores» colocan las tags en los miembros del círculo más cercanos. Recuerda que las tags deben envolver el contenido.

Todos los que estén entre las flechas de la tag de apertura <aplaudir> y la de cierre </aplaudir> deben empezar a aplaudir (quienes llevan las tags no). Los que aplauden siguen aplaudiendo el resto del juego.

Elige dos nuevas tags y entrégalas a los «Programadores» (por ejemplo, <cantar> y </cantar>).

Repite los pasos 3 y 4. Esta vez, cualquiera entre las tags <cantar> tendrá que cantar. Si alguien queda entre las tags <aplaudir> y las <cantar>, tendrá que aplaudir y cantar.

Continúa con el resto de las tags (y las que quieras agregar) para armar ¡una divertida y complicada fiesta de baile de tags! Cuando los «Programadores» tengan las últimas tags, pídeles unirse al círculo donde estén cuando pare la música (en vez de entregar las tags). Todos los que queden entre las tags de los «Programadores» ejecutan sus acciones.

Cuando todas las tags estén en juego, puedes hacer que los jugadores con tags se muevan de a uno para cambiar quién hace qué. Esto ayuda a entender cómo se aplican las tags al contenido y cómo se abren y cierran en HTML.

  • Aquí en el mundo real tienes libertad total para crear nombres de tags — después veremos que en el lenguaje HTML usamos un conjunto restringido y acordado, con sentido para el contenido web. Por ahora, crea la que quieras.

Marcado en acción

[15 min]

  • Introducción: ya vimos cómo son las tags y cómo funcionan con el contenido (lo que hay dentro). Ahora practiquemos con algunas tags reales del HyperText Markup Language (HTML).

  • Primero, veamos un documento HTML simple — adivina — desde el punto de vista de un diseñador y desarrollador web: cuando construyen páginas, con lo que trabajan es código HTML en un archivo de texto plano.

¡Consejo! Abre un documento HTML simple en un editor de texto — NotePad en PC o TextEdit en Mac — y muéstralo también en un navegador. Señala las tags y qué hacen. Tags básicas sugeridas: h1, h2, h3, p, a, body. También puedes mostrar un documento más complejo (con el código fuente del navegador) para mostrar que todas las páginas web son texto y código interpretados por la computadora.

  • Estas tags tienen significados acordados, de modo que tanto los desarrolladores web como quienes escriben el software del navegador entienden qué significan. La única razón por la que funcionan es ese acuerdo — si intentas usar tus tags divertidas de «Etiqueta el Mundo» o la «Revolución de las Etiquetas» en una página web, no verás nada, lamentablemente.

¡Consejo! Si hay confusión sobre qué tags serían relevantes en HTML, recuerda que HTML significa «HyperText Markup Language» y que asignamos tags al contenido de texto. Pregunta: ¿por qué «párrafo» sería una tag HTML y no «aplaudir» o «cantar»?

  • Cuando usas estas tags, ¡estás escribiendo HTML! Y cuando el navegador las ve, transforma tu página de un aburrido bloque de texto en algo interesante y fácil de leer.

  • ¡A marcar! Haz que los participantes agreguen tags a contenido existente.

  • FUERA DE LÍNEA: necesitarás contenido — una noticia divertida o una biografía, u otro contenido interesante, impreso en hojas 11x7 y cortado en piezas — párrafos, titulares, enlaces, etc. También notas adhesivas o papel para las tags. Escribe las tags o deja que las creen (solo de la lista). Divide en grupos pequeños y da a cada uno una colección de texto y tags.

  • EN LÍNEA: necesitarás un archivo de texto con contenido básico sin formato, del mismo tipo. Primero, pide guardar el archivo como .html. Explica el propósito de las tags <head> y <title>. ¡Luego que escriban sus tags!

¡Consejo! Para EN LÍNEA, crea un archivo de texto con el contenido y pide editarlo con el editor MÁS BÁSICO — Bloc de notas en PC o TextEdit en Mac — en modo texto plano. Quizá haya que explicar el head y el title.

  • Explica que primero deben rodear todo el contenido con las tags body — ¡para avisar al navegador que todo este contenido es para mostrarse en la web!

  • Pide organizar el contenido usando las tags. Encuentren los encabezados más importantes, dividan los párrafos, agreguen títulos pequeños y busquen elementos que puedan ser hipervínculos. Recorre la sala y ayuda aquí y allá.

  • Al final del ejercicio, si es posible, los participantes en línea y fuera de línea deben ver la página cargada en un navegador. Los de en línea pueden guardar y abrir el archivo .html. Para los de fuera de línea, la persona facilitadora debería, si es posible, mostrar la página terminada en una computadora y monitor.

  • Explica que esos archivos siguen en sus computadoras locales y solo pueden verse ahí. Aún no los pusieron «en línea» en un servidor, donde otras personas puedan encontrarlos, así que no están en la web.

¡Consejo! Recuerda la actividad Mapear la Web para visualizar cómo se conecta la computadora cliente. Pueden acceder al contenido de los servidores web, pero otras computadoras de la Web no pueden acceder a los archivos de los clientes.

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Construyendo páginas básicas

Habilidades: Composición, Código, Diseño, Revisión, Compartición, Comunicación, Colaboración

Descripción

En esta actividad, los usuarios crearán su primera página web usando un editor de texto básico y un navegador para ver los resultados. Se entrevistarán para obtener contenido personal (o ficticio) para una página «Acerca de», organizarán y escribirán el contenido y lo marcarán con HTML. ¡Los usuarios pueden subir estos archivos a un servidor (si hay disponible) y ver su contenido en la web!

Objetivos de aprendizaje

  • Crear una página web simple

  • Transfer web page online

Tiempo necesario

De 45 minutos a 1 hora según el tamaño del grupo

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web

Materiales

  • Portátil con conexión a internet

Habilidades de Alfabetización Web

  • Composición

  • Código

  • Diseño

  • Revisión

  • Compartición (si suben contenido a la Web)

Habilidades del siglo XXI

  • Comunicación

  • Colaboración

Introducción

[10 min]

¡Consejo! Recuerda a los participantes su experiencia con tags de la lección anterior (recomiendo completar el marcado 101 antes de esta actividad).

  • Explica que cualquier página web que visitas es en realidad un archivo HTML, que es solo un archivo de texto — un montón de palabras — con lenguaje de marcado de hipertexto agregado al contenido. HTML es el lenguaje que usamos para escribir tags.

¡Consejo! Si es necesario, da un pequeño recorrido por el navegador: barra de direcciones, botones de inicio, favoritos e historial.

  • Esos archivos a veces contienen otros tipos de código, como javascript o php, que hacen que las páginas — al mostrarse en el navegador — sean interactivas, llamativas y dinámicas.

  • Los archivos HTML son solo texto y no son muy bonitos de ver.

  • El navegador los toma y los vuelve legibles y visualmente más interesantes, sumergiéndose en el diseño y trayendo imágenes y videos.

  • Archivo HTML + navegador, como Firefox = UNA PÁGINA WEB INCREÍBLE PARA TI (espero).

¡Consejo! Para mostrar esta idea, abre una página simple y estática y mírala. Explica: ¡Veamos! Podemos ver cómo es una página web tras bambalinas, antes de que el navegador llegue a ella, explorando el «ver código fuente».

  • Como los archivos HTML son solo texto, pueden escribirse en un editor básico y verse en un navegador. Si tienes un navegador y un editor de texto en tu computadora — y casi TODOS los tienen — ¡puedes construir una página web!

  • Tus páginas no estarán en la web. Para eso, necesitas tomar el archivo que creaste y subirlo a un servidor para que las personas puedan acceder mediante la URL o dirección web.

¡Consejo! Recuerda, quizá con un diagrama, que las computadoras cliente (usuarios como tú) se conectan a internet y acceden a páginas que residen en servidores. Los servidores están diseñados para «servir» páginas a los usuarios. Las páginas web son archivos HTML mostrados en un navegador, por eso se ven geniales.

  • PERO, por ahora, puedes practicar creando páginas aquí mismo, en tu computadora. No estarán en un servidor de internet, pero podrás crear los archivos y verlos en el navegador de tu propia máquina.

¡Consejo! Aquí puedes señalar el diagrama y mostrar que estás creando una página en una computadora cliente, ¡que no comparte archivos como un servidor!

  • Para empezar, necesitamos CONTENIDO — porque la web trata de comunicar y compartir información e ideas. ¡Generemos contenido juntos!

Contenido y narración

[20 min]

¡Consejo! La siguiente parte es divertida e interactiva, y excelente para crear una comunidad de aula amigable y positiva. Pero si tienes poco tiempo y darles la sensación de que pueden tener su propia representación en la Web NO es prioridad, puedes entregar contenido pretipeado como archivo .txt y saltar a la siguiente sección — «A etiquetar».

  • Escribe tu biografía o página «Acerca de». Pide dividirse en parejas y entrevistarse sobre sus vidas. Como facilitador, controla el tiempo para que cada participante tenga tiempo igual para su historia.

  • Entrevista: pide tomar 5 minutos para contar su historia o, si no quieren compartir cosas personales, pueden inventar un personaje ficticio y contar su historia. Quien escucha toma notas o graba en un dispositivo. Pide hablar de lo más importante para ellos (o su personaje). Ofrece estas preguntas para empezar:

  • ¿Cuál es tu nombre, edad, otros detalles?

  • ¿Dónde naciste? ¿Dónde creciste? ¿Cómo fue?

  • ¿Qué haces ahora? ¿Cómo pasas tu tiempo? ¿Cuáles son tus cosas favoritas para hacer, lugares, comida, música, etc.?

  • ¿Hay un momento favorito, de mayor orgullo, que destaque?

  • ¿Cuáles son tus planes y sueños para el futuro?

¡Consejo! Quien entrevista puede hacer preguntas de seguimiento para más detalles o una historia más completa. Puede hacer preguntas abiertas como «por qué» sobre motivaciones, preferencias y planes, o pedir aclaraciones sobre ideas de la historia.

  • Revisión/edición: pide a cada participante revisar las notas de su historia — considerar agregar detalles, pensar qué quedó fuera.

  • Organiza y escribe: pide escribir sus historias en un editor básico, asegurándose de usar el «modo texto plano» (no Rich Text). Al escribir, pueden organizar y estructurar la historia en inicio, medio y fin. Quizá con títulos para las secciones: «Primeros días», «Días actuales», «Lo que viene» — o de otras formas, si hablaron más de áreas de interés — «Mis canciones favoritas», «lugares favoritos», etc. Estas secciones ayudarán a estructurar la biografía para leerla fácil como página web.

  • ¡Ponle título a tu historia! Inventa un título rápido o elige algo básico.

  • Crea una carpeta nueva en tu computadora y llámala «xx-paginaweb» usando tus iniciales.

  • Guarda tu historia en la carpeta con extensión .txt. Dale un nombre sin espacios ni puntuación que no sean guiones o guiones bajos, como «sobre-zm.txt». Esta es la versión de texto, el contenido bruto.

  • Además, guarda tu historia con .html como extensión en vez de .txt — esa será tu versión web. El .html le dice al navegador que busque código html en el archivo. Nombre sin espacios ni puntuación salvo guiones o guiones bajos, como «sobre-zm.html».

Get Tagging!

[10 mins]

  • Explica que van a marcar su historia — la versión .html — con HTML, para dejarla lista para el navegador. Explica que codificar HTML y pensar/escribir contenido son dos maneras distintas de pensar; siempre deben tener el contenido escrito antes de marcarlo, en vez de escribir y marcar a la vez.

¡Consejo! Una gran manera de ayudar, si tienes computadora de instructor y proyector, es hacer la actividad con tu propio contenido junto a los participantes y proyectar los resultados para que todos vean lo que haces.

  • Empieza el archivo con una tag doctype — una de las únicas tags sin contenido dentro y sin cierre — una tag solitaria única, que recuerda al navegador que estamos escribiendo html:

  • Agrega las tags <html> y </html> envolviendo toda la página — para que todo lo de adentro pueda marcarse con el lenguaje de marcado.

  • Después, haz una sección con las tags <head>``</head> al inicio de la página, antes de todo el contenido. Aquí pondremos algo de contenido para el navegador, que no veremos en la propia página. Es el título de la página, que:

  • define un título en la pestaña del navegador.

  • da un título a la página al agregarla a favoritos.

  • muestra un título en los resultados del buscador.

  • Luego agrega las tags — deben rodear todo el texto de la página.

  • Usa h1 para el título principal de tu página, el título de tu historia en pantalla (distinto de la tag title)

  • Usa tags h2 o h3 para títulos de sección

  • Usa tags p para párrafos.

  • ¡No olvides cerrar tus tags!

  • Como crédito extra, agrega enlaces a otros sitios (una página sobre tu ciudad natal, tu equipo favorito, artista o músico, o una receta favorita). También puedes descargar y agregar imágenes; asegúrate de que estén en la carpeta «xx-paginaweb».

  • Por último, cuando agregues todas tus tags, ¡guarda la página!

  • Ahora abre tu navegador favorito y ve a Archivo > abrir archivo. Navega hasta tu carpeta y haz clic en el archivo html que acabas de crear. ¿Cómo se ve? ¿Ves tu contenido formateado para la web? ¿Ves tu título en la pestaña del navegador? Si algo no se ve bien, ¿qué pudo pasar?

¡Consejo! Aquí se pueden resolver problemas — los comunes son tags faltantes, especialmente de cierre, errores de tipeo, documento no guardado como html, problemas con nombres de imágenes, etc. Puedes recorrer la sala revisando páginas y discutir, o demostrar en el ejemplo proyectado qué pasa cuando faltan tags (por ejemplo, no cerrar nunca una tag h1 es una gran forma de mostrar la importancia de cerrarlas).

  • ¡Felicita a todos por sus páginas! ¡Ahora son diseñadores web! Recuerda que las páginas siguen en sus computadoras locales, ¡no en la web! Pero están listas para ir allá.

  • Ten una breve discusión sobre subir a servidores, sobre hosting web: qué significa, cómo funciona, cuánto cuesta, qué hacen las empresas de hosting.

¡Ponte en línea!

[15 min]

  • Si tu institución tiene espacio y recursos de servidor, muestra cómo usar una aplicación de transferencia de archivos para llevar sus páginas a una carpeta del servidor. Habla de SUBIR vs DESCARGAR.

  • Discute cómo se construye la URL; pide descubrir sus propias URL — nombre de dominio, carpeta de la clase, carpeta personal, nombre de la página.

  • Cuando todas las páginas estén en el servidor, pide apuntar los navegadores a la URL para ver sus páginas. ¡Están de verdad en la web! ¡Yuju!

¡Consejo! Si hay tiempo, discute brevemente el hosting web: qué significa, cómo funciona, cuánto cuesta, qué hacen las empresas de hosting.

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Aplicaciones web y construyendo con Thimble

Descripción

En esta actividad en línea, los participantes consideran cómo les gustaría representarse en la web. Reciben un curso intensivo de la herramienta de desarrollo web Thimble y usan lo aprendido en las dos actividades anteriores sobre HTML y marcado para remezclar una plantilla en su propia página personal. La lección retoma los conceptos de hosting, nombres de dominio y URL.

Objetivos de aprendizaje

  • Explicar la diferencia entre distintas aplicaciones web.

  • Crear una página web usando la aplicación web Thimble.

Tiempo necesario

De 45 minutos a 1 hora según el tamaño del grupo

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web.

Materiales

  • Portátil con conexión a internet y capacidad de proyectar en una pantalla

Habilidades de Alfabetización Web

  • Código

  • Composición

  • Remezcla

  • Revisión

  • Diseño

  • Compartición

  • Práctica Abierta

Habilidades del siglo XXI

  • Comunicación

  • Colaboración

  • Creatividad

Introducción

[5-7 min]

  • Encuadra la actividad explicando que algunos sitios son bien distintos de otros. Algunos son simples; otros, más complejos. Podemos dividir los sitios que usamos en dos grandes categorías:

¡Consejo! Se recomienda completar antes la actividad «Construyendo páginas básicas».

  • 1.ª categoría: sitios donde accedes a información estática.

  • Estos sitios pueden no cambiar mucho con el tiempo.

  • Como usuario, no puedes hacer mucho para cambiar el contenido o su funcionamiento.

  • Muchas de las primeras páginas web eran así.

  • Pregunta: ¿qué ejemplos hay de páginas estáticas? Piensa en sitios que rara vez o nunca tienen contenido nuevo. O sitios con pocas páginas.

¡Consejo! Ejemplos: el sitio de un restaurante pequeño, etc. Están diseñados principalmente para transmitir información.

  • 2.ª categoría: sitios donde, como usuario, puedes hacer algo — crear un resultado o cambiar algo usando la página.

  • Son sitios que usas para hacer que algo suceda.

  • Puedes crear o compartir algo, cambiar el contenido mostrado o dar información para completar una tarea.

  • Pregunta: ¿qué ejemplos hay de sitios así? ¿Qué fue lo último que hiciste en la web?

¡Consejo! Ejemplos: el sitio de una biblioteca pública donde buscas y reservas libros. O cualquier correo web, como Gmail, Yahoo, Hotmail, o servicios de mensajería. Sitios de compras, juegos web, redes sociales, etc. La Búsqueda de Google es una aplicación web, igual que Facebook.

  • Los sitios (o partes de sitios) que permiten hacer algo en la web se llaman aplicaciones web.

  • Estas aplicaciones funcionan con programas (código) que permiten que la computadora cliente (la que usas para navegar) trabaje con el servidor (donde reside el sitio) para que algo suceda.

  • Muchos de los elementos pequeños y simples que ya vieron pueden considerarse aplicaciones web.

  • Formularios web que permiten enviar información, por ejemplo nombre y correo.

  • Barras de búsqueda que devuelven resultados según la pregunta o término que escribes.

  • Pregunta si han usado barras de búsqueda o formularios web — si es así, ¡ya usaron aplicaciones web!

  • Explica que las aplicaciones web también pueden ser mucho más complejas. Thimble es una aplicación web para crear páginas web. Es una herramienta de codificación para escribir HTML y otros lenguajes web; también publica las páginas de los participantes para que estén en línea.

¡Consejo! Si ya hicieron «Construyendo páginas básicas» (recomendado), recuérdales que no necesitan estar en línea NI usar una aplicación como Thimble para crear páginas. Pueden usar un editor de texto simple para escribir HTML, guardar sus páginas y verlas en cualquier navegador. Esas páginas están fuera de línea hasta subirse a un servidor.

Conoce Thimble, haz un recorrido

[5-7 min]

  • Para esta sección, proyecta tu pantalla para que todos vean el recorrido por Thimble. Lo ideal es que los participantes sigan en sus computadoras. Puede ser útil trabajar en parejas.

¡Consejo! Es mejor iniciar sesión/crear una cuenta para poder publicar. Si no se sienten cómodos creando una cuenta, pueden jugar creando o editando HTML en el editor y ver cómo cambian los resultados en la vista previa. No podrán publicar.

  • Ve a la página inicial de Thimble y haz clic en «Comienza un proyecto desde cero». Explica que ahora salimos de la página inicial y usamos Thimble como aplicación web para hacer algo: crear páginas HTML. ¡Y lo hacemos en el navegador, que es genial!

  • Pregunta: ¿qué ven? ¿En qué se diferencia de la página inicial? ¿Cómo se divide la página? ¿Para qué sirve cada sección o ventana? ¿Cuál es la relación entre las secciones? Deja que respondan, pero asegúrate de que entiendan:

  • Arriba a la izquierda hay un área donde puedes escribir y cambiar el nombre del archivo de «proyecto sin título» a un nombre con sentido.

  • A la izquierda hay un espacio llamado ARCHIVOS, con dos nombres de archivo. Son los dos archivos del proyecto que podemos editar. Se alterna haciendo clic en los nombres. Los archivos nuevos aparecen aquí.

  • En el medio está el EDITOR, donde vemos el código HTML y podemos editarlo.

  • A la derecha está la «VISTA PREVIA» — al editar el código, vemos cómo se mostrará en un navegador — ¡los cambios ocurren mientras escribimos!

¡Consejo! Es una función divertida: da pequeñas tareas — por ejemplo, cambiar el tamaño del título o editar la palabra «amazing».

  • Nota que los cambios que no siguen las reglas de HTML no aparecen en la vista previa. Los problemas se revisan en el editor, donde el error o «bug» se resalta en rojo.

  • Observa también la dirección en la barra del navegador. Si no iniciaste sesión, habrá una franja después de «https://thimble.mozilla.org/pt-BR/» y luego «anonymous» y una barra + secuencia de letras y números — es un lugar provisional en el servidor de Mozilla donde se guarda temporalmente tu sesión.

  • Con sesión iniciada, la dirección será https://thimble.mozilla.org/pt-BR/ + /usuario + /un conjunto corto y aleatorio de números.

  • Es una ubicación (URL) que la aplicación creó para guardar el trabajo del participante — es la vista previa del proyecto.

  • También pueden encontrar sus proyectos haciendo clic en su nombre de usuario arriba a la derecha y eligiendo «Mis proyectos».

  • Arriba a la derecha hay un botón PUBLICAR. Si un participante con sesión iniciada lo presiona, su página se guarda en los servidores de Mozilla y queda accesible en la web. Thimble da una dirección distinta de la vista previa. ¡Esto publica la dirección de tu página, EN VIVO en la Web! Cualquiera, en cualquier lugar, puede verla en esa dirección.

¡Consejo! Quizá haya que aclarar que quienes visiten esa dirección verán solo la página, NO la vista de trabajo de Thimble con el editor y las opciones. Prueba y compara la dirección publicada con la de vista previa.

Haz tus páginas

[15-20 min]

  • Para esta parte, hay varias opciones de contenido.

  • Pueden elegir un proyecto existente para remezclar — Tags Comunes es genial para empezar. Buena opción si hay poco tiempo para generar contenido nuevo.

¡Consejo! Si trabajas con Tags Comunes como proyecto remezclable, señala la pestaña TUTORIAL, que aparece en la vista previa. Ahí hay ayuda para completar la actividad.

  • Quienes ya hicieron «Construyendo páginas básicas» ya deben tener escrita una historia sobre sí — pueden ampliarla y llevarla a Thimble.

¡Consejo! Si el tiempo aprieta, pueden saltarse el contenido nuevo y traer la copia de la historia existente.

  • Pide ampliar su historia de vida — que hagan una lluvia de ideas y escriban una nueva sección sobre su ciudad natal, un pariente favorito, un recuerdo positivo, etc. A elección de quien facilita.

¡Consejo! ¡Asegúrate de que compongan en su archivo .txt guardado, no directamente en Thimble, y de que no marquen y compongan a la vez! Codificar y crear son dos formas distintas de pensar — hacer ambas a la vez puede frenar el flujo creativo o hacer que se pierdan en la historia y olviden las tags.

  • Pide copiar y pegar el contenido bruto en el editor de Thimble (dentro de las tags body, claro). Luego pueden practicar marcando la página de nuevo (y las partes nuevas) para familiarizarse con las tags y escribir HTML.

  • Si no hicieron «Construyendo páginas básicas», pueden generar el contenido así: en parejas, entrevistarse sobre sus vidas. Controla el tiempo para que cada participante tenga tiempo igual.

  • Entrevista: 5 minutos para contar su historia o, si no quieren compartir cosas personales, inventar un personaje ficticio. Quien escucha toma notas o graba. Que hablen de lo más importante para ellos (o su personaje). Preguntas para empezar:

  • Nombre, edad, otros detalles

  • ¿Dónde naciste? ¿Dónde creciste? ¿Cómo fue?

  • ¿Qué haces ahora? ¿Cómo pasas tu tiempo? ¿Tus cosas favoritas para hacer, lugares, comidas, música, etc.?

  • ¿Hay un momento favorito, de mayor orgullo, que destaque?

  • Tus planes y sueños para el futuro

¡Consejo! Quien entrevista puede hacer preguntas de seguimiento para más detalles o una historia más completa. Preguntas abiertas sobre motivaciones, preferencias, planes futuros, o aclaraciones sobre la historia.

  • Revisar/editar: que cada participante repase las notas de su historia — considerar agregar detalles, pensar qué quedó fuera.

  • Organizar y escribir: escribir las historias en un editor básico, en «modo texto plano» (no Rich Text). Pueden estructurar la historia en inicio, medio y fin. Quizá con títulos: «Primeros días», «Días actuales», «Lo que viene». O de otras formas — «Mis canciones favoritas», «lugares favoritos», etc. Las secciones ayudan a estructurar la biografía para leerse fácil como página web.

  • Dale un título a tu historia. Inventa uno rápido o elige algo básico.

  • Crea una carpeta nueva llamada «xx-paginaweb» con tus iniciales. Debes guardar este archivo en dos versiones.

  • Guarda tu historia con extensión .txt. Nombre sin espacios ni puntuación salvo guiones o guiones bajos, como «sobre-zm.txt». Es la versión de texto, el contenido bruto.

  • Copia y pega este contenido bruto en la ventana del editor de Thimble y comienza a marcar.

  • Quienes crean sus propias páginas personales en Thimble pueden volver a ellas y agregar contenido, especialmente para las actividades «Lista de Reproducción del Proyecto» o «Todos los Adhesivos» de la sección «Participar».

Conclusión y discusión

[10 min]

  • Elige uno de los temas de abajo para cerrar la actividad:

Código de compartición y remezcla con Thimble

  • Si trabajaron con sus propias historias, preséntales los proyectos remezclables y la pestaña Tutorial, y déjalos explorar y jugar 5 o 10 minutos. Si remezclaron un proyecto existente, discutan esa experiencia. Pregunta:

  • ¿Cómo es ver el código de otras personas? ¿Qué te resultó nuevo, sorprendente? ¿Ves cosas que te gustaría probar?

  • ¿Qué puedes aprender usando Thimble para explorar y remezclar proyectos?

  • ¿Cómo te sentirías si alguien remezclara tu proyecto?

  • Aunque una página no esté en Thimble, en muchos navegadores puedes espiar el código fuente… En Firefox, ve a Herramientas > Desarrollador web > Código fuente de la página para ver el código detrás de cualquier página. Si es una aplicación web, el código probablemente será complejo. Si es estática, será más fácil de leer.

Pros y contras de Thimble vs componer fuera de línea

Retoma/explora la diferencia entre componer y publicar con Thimble O crear páginas con editor de texto/navegador y guardar en una computadora personal. Pregunta las diferencias. Algunas pueden ser:

  • ¡Con Thimble estás en la web de inmediato! La página se guarda en el servidor de Mozilla. Y ves tus cambios mientras escribes.

  • Con editor/navegador trabajas en tu máquina local, no en la web. Debes guardar el archivo y recargar el navegador para ver cambios.

  • Con editor/navegador necesitas subir a un servidor para poner tu página en línea.

  • Necesitas conexión para usar Thimble.

  • No necesitas estar en línea para crear sitios con navegador y un editor básico.

  • Thimble está diseñado para aprender código, no para publicar sitios a largo plazo.

  • Hay límites de espacio en Thimble. Y la dirección web…

  • ¿En qué difiere la URL de tu página Thimble de la dirección de tu blog o sitio favorito? Si tuvieras un negocio, ¿funcionaría como dirección web?

¡Consejo! Deben entender que las direcciones de proyectos Thimble son genéricas; no expresan el contenido. Son difíciles de recordar. Para la dirección increíble que quieren, tendrían que comprar un dominio (como superpagina.com o paginaincreible.biz) y pagar hosting — espacio de servidor donde sus páginas queden accesibles.

  • Thimble es realmente una herramienta de aprendizaje — para probar y experimentar.

  • La combinación editor/navegador es una forma fácil de empezar y puede llevarte lejos.

  • Para sitios más complejos, puedes usar una aplicación diseñada para crear y alojar páginas rápido — mira la actividad «Constructores de Sitios».

La evolución de la Web

  • Explica: en los primeros días de la web, muchas páginas eran estáticas. Había mucha compartición de información, pero poca interacción.

  • Muestra un ejemplo de la web antigua con la máquina del tiempo del Internet Archive y busca el enlace del sitio de Apple.

  • Compara, por ejemplo, apple.com de 1996 con apple.com de hoy (o busca tus propios ejemplos).

  • ¿Cómo es la experiencia en cada sitio? ¿Cuáles son los mayores cambios?

  • ¿Cómo crees que será la web en 20 años? ¿Qué te gustaría poder hacer en la web del futuro?

¡Consejo! Puedes destacar que los móviles «inteligentes» no existían hace unos 20 años — lo que podemos hacer en la Web puede cambiar, pero dónde y cómo lo hacemos también.

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

Constructores Web

Habilidades: Código, Composición, Diseño, Comunicación, Colaboración, Creatividad

Descripción

En esta actividad presentamos a los participantes los sistemas — llamados constructores de sitios o sistemas de gestión de contenido — que muchas personas (diseñadores, desarrolladores y novatos de la web) usan para crear sitios con muchas páginas y contenido actualizado con frecuencia, como blogs o tiendas. Los participantes recolectan algunos datos y usan ejemplos analógicos (papel y lápiz) para explorar cómo funcionan los constructores web.

Objetivos de aprendizaje

  • Definir un constructor de sitios/sistema de gestión de contenido.

  • Identificar cuatro elementos básicos de las herramientas de creación de sitios.

  • Describir cómo esos elementos trabajan para crear páginas web.

Tiempo necesario

De 45 minutos a 1 hora según el tamaño del grupo

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web.

Materiales

  • Papel y lápices

  • Imprime la hoja con la siguiente información:

  • Hoja 1: Ficha de mascota

  • Nombre de la mascota:

  • Ubicación:

  • Tipo (gato, perro, etc.):

  • Edad:

  • Imagen:

  • Características:

  • Disponible para adopción (sí/no):

Habilidades de Alfabetización Web

  • Código

  • Composición

  • Diseño

Habilidades del siglo XXI

  • Comunicación

  • Colaboración

  • Creatividad

Introducción

[2 min]

  • Explica:

  • Hoy hablaremos de unas herramientas de software — llamadas constructores de sitios o sistemas de gestión de contenido — que muchas personas usan para crear sitios.

  • Estas herramientas reúnen HTML y CSS (Cascading Style Sheets, hojas de estilo en cascada, usadas para dar estilos visuales a los sitios) junto a otros lenguajes de programación para agilizar la creación de sitios.

  • Pero primero, hagamos una actividad rápida y divertida de recolección de datos. Usaremos esos datos para modelar cómo funcionan los constructores.

Actividad: recolección de datos

[5 min]

  • Reparte mini hojas (impresas 2 por página/cortadas para ahorrar papel). Pide completarlas. Explica:

  • No hay problema en inventar la información.

  • En la ficha de mascota se puede dibujar una imagen súper simple — ¡los muñequitos de palitos son totalmente aceptados!

  • El texto de la hoja está abajo. Se puede remezclar según necesidad.

  • Recoge las hojas y avisa que volveremos a ellas.

Hoja 1: Ficha de mascota Nombre de la mascota: Ubicación: Tipo (gato, perro, etc.): Edad: Imagen: Características: Disponible para adopción (sí/no):

Discussion: Website Creation

[30 min]

  • Explica: vimos cómo crear una página básica — tomamos contenido y lo marcamos en HTML. Eso funciona muy bien, sobre todo para sitios que no cambian mucho o pequeños, de 5 o 6 páginas. Pregunta:

  • ¿Puedes pensar en sitios estáticos: que rara vez o nunca tienen contenido nuevo? ¿O con pocas páginas? Ejemplo: un restaurante pequeño, etc.

  • ¿Y si tenemos información que cambia todo el tiempo? ¿O muchísima información? ¿Qué sitios cambian mucho?

  • Ejemplos: sitios de clima y noticias, blogs, redes sociales como Facebook o Instagram, tiendas.

  • ¿Qué tipo de sitios o páginas visitamos más? ¿Qué dice eso de internet? (mucho cambio, mucha información nueva).

  • Supongamos que hacemos un sitio con muchas páginas — uno que lista mascotas, donde la gente navega y ve si quiere adoptar.

  • Pregunta: ¿qué páginas necesita nuestro sitio? (inicio, quizá una página «acerca de», y quizá una página por mascota).

  • Entonces descubramos los pasos del proceso de creación, y escribamos los pasos — o sea, un algoritmo. Digamos que ya tenemos «inicio» y «acerca de». Y usaremos los datos de mascotas recolectados. ¿Qué algoritmo escribiríamos?

¡Consejo! Un algoritmo de muestra para crear páginas de mascotas:

Abre el editor de texto, guarda el documento nuevo como .HTML Escribe o pega el contenido de la primera mascota Nombre de la mascota: Ubicación: Imagen: Edad: Características: Disponible para adopción (sí/no): Comentario: Marca con HTML Agrega estilos para cada tipo de dato con CSS Guarda y verifica que funcione en el navegador Abre el editor, guarda el documento nuevo como .HTML Pega el contenido de la siguiente mascota Nombre: Ubicación: Imagen: *Edad: Características: Disponible para adopción (sí/no): Comentario: Marca con HTML Agrega estilos con CSS Guarda y verifica en el navegador (Repetir x veces)

  • Pregunta:

  • ¿Cómo se ve este algoritmo? ¿Qué notas?

  • ¿Cómo te sentirías agregando todas las mascotas? Posibles respuestas: es repetitivo, hacemos lo mismo una y otra vez, aburrido, tomará una eternidad.

  • ¿Qué podríamos hacer para mejorar el proceso?

  • Explica que ese es el desafío de cualquier sitio — un blog, una tienda, un sitio de noticias — ¡tomaría una eternidad hacer todos esos cambios y páginas nuevas!

  • Explica que desarrolladores y diseñadores crearon herramientas — algunas gratuitas y pensadas para principiantes, como tú — que agilizan estos procesos, para que nadie tenga que marcar decenas, cientos o miles de páginas parecidas.

  • ¡En un constructor web, la computadora hace la parte difícil! Siempre que hay un proceso repetitivo, es un gran trabajo para un programa — las computadoras hacen estas tareas mucho mejor que los humanos, sin quejarse.

  • Estas herramientas, en su forma más básica, combinan cuatro elementos. Hablemos de cómo trabajan juntos.

  • Contenido almacenado en una base de datos

  • Plantillas HTML

  • Reglas de diseño CSS

  • Algunos lenguajes de código que lo juntan todo rápidamente (PHP, Python, Ruby, JavaScript).

  • Una interfaz simple para introducir contenido.

  • Esta interfaz esconde el HTML, el CSS y el código. A veces es de arrastrar y soltar, o escribes tu contenido y haces selecciones simples. Pero exploremos cómo trabajan los constructores tras bambalinas, después de que todo entra en la base de datos.

  • Veamos cómo se hace, para nuestro sitio favorito, en papel. ¡Primero necesitamos los 4 ingredientes!

  • Contenido en la base de datos

  • Cortaremos nuestras hojas, porque querremos acceder a los datos por separado.

  • Crea una plantilla HTML para la página de la mascota. Dejemos espacios en blanco donde irá el contenido.

  • Mira el ejemplo:

  • Crea algunas reglas de estilo (distintas para gatos, perros, lagartos).

  • Color de fondo de la página

  • Tamaño y color de fuente

  • Suelta algunas instrucciones de código en la plantilla para decirle a la computadora cómo juntar todo. Las escribimos donde están las notas azules, adonde queremos que vayan los datos. ¡Es como completar los espacios vacíos!

  • Si fuéramos desarrolladores, escribiríamos esto en un lenguaje de programación, pero aquí escribiremos instrucciones básicas, llamadas «pseudocódigo». No es el texto que necesita un lenguaje real, pero expresa la intención.

  • ¿Cuáles son las instrucciones? Escribamos otro algoritmo. Puede ser lo que queramos, pero aquí va un ejemplo:

  • Accede al registro deseado de la mascota

  • Pon el nombre o número de la mascota en el título

  • Asigna la hoja de estilos correcta

  • Pon el nombre de la mascota en el encabezado

  • Pon el nombre de la imagen en la tag img

  • Pon las características en el párrafo final

  • Escribe las instrucciones sugeridas en las notas adhesivas

  • Ahora, ¡sé el código!

  • Pide a un participante intentar armar la página siguiendo las instrucciones de las notas — ¡eso es lo que hace el código!

  • Cuando el navegador de un cliente pide esa página para una mascota (por ejemplo, Mascota #2), el código del servidor reúne la información de la base, asigna la hoja de estilos correcta y la envía a tu navegador. ¡Esto hace que la página se muestre automáticamente! O sea, la página de cada mascota no existe de forma estática: se hace bajo demanda.

  • Eso es lo que pasa tras bambalinas en cualquier plataforma de gestión de contenido/constructor web, como WordPress, SquareSpace o Wix.

  • Como usuario, escribirías contenido en una interfaz, elegirías una plantilla y presionarías «publicar». ¡El código del lado del servidor y del navegador hace el resto! ¡Y ahora sabes cómo funciona!

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor a ese público?

La Seguridad Primero

Descripción

En esta mezcla de actividades en línea y fuera de línea, La Seguridad Primero, la parte 1 muestra las maneras en que nuestras actividades diarias en línea pueden rastrearse. Los participantes trabajarán primero en una auditoría de privacidad, durante la cual descubrirán cómo terceros pueden ver sus actividades personales. Aprenderán sobre metadatos y lo que pueden revelar de nosotros. Por último, desarrollarán conciencia de los mecanismos que rastrean nuestras actividades en línea.

En la parte 2, los participantes seguirán los pasos recomendados para proteger la privacidad en línea. Aprenderán a definir buenas contraseñas, proteger sus navegadores, descargar extensiones que aumentan la privacidad, practicar buenos hábitos de Wi-Fi y proteger sus datos personales.

Objetivos de aprendizaje

  • Identificar las decisiones de privacidad que tomas cada día.

  • Explicar cómo las cookies y terceros pueden rastrearte en línea.

  • Identificar tres maneras de limitar el rastreo en tu navegador y crear mejores contraseñas.

Tiempo necesario

De 1 a 2 horas según el tamaño del grupo.

Público objetivo

Puede adaptarse a públicos de 13 años o más, con niveles variados de experiencia en la web.

Materiales

  • Computadora/proyector configurados y conexión a internet.

  • Pizarra blanca, pizarrón o rotafolio para notas visibles a todo el grupo.

  • Marcadores, bolígrafos o lápices.

  • Hojas de trabajo (contenido abajo) según necesidad.

  • Notas adhesivas

Habilidades de Alfabetización Web

  • Proteger

  • Buscar

  • Navegación

  • Evaluar

  • Práctica Abierta

Habilidades del siglo XXI

  • Comunicación

  • Resolución de problemas

Introducción

[10 min]

  • Inicia una discusión sobre sus experiencias con la privacidad en línea.

¡Consejo! Según el tamaño del grupo, estas preguntas sirven para grupos pequeños o para todo el grupo.

  • Cuando escuchas la palabra «privacidad», ¿en qué piensas? ¿Cómo se aplica el concepto a tu día a día?

  • ¿Cómo funcionan esas nociones de privacidad en el contexto de lo que hacemos en la web?

  • ¿La privacidad se aplica igual a tu vida fuera de línea y a tu tiempo en la web? ¿Por qué sí/no?

  • Recuerda que, como en todo problema de gran escala, podemos actuar con muchos pequeños pasos que se acumulan en un efecto protector.

  • Pregunta: ¿qué haces para proteger tu privacidad?

¡Consejo! Asegúrate de tocar estos temas, que aparecerán más adelante:

Cambiar tus configuraciones de privacidad Limpiar el historial de navegación Crear contraseñas fuertes Habilitar la identificación de dos factores Usar gestores de contraseñas Practicar higiene de Wi-Fi Habilitar WPA o WPA2 en los routers Evitar el Wi-Fi público Proteger la información personal Saber identificar esquemas de phishing Mantener las actualizaciones de seguridad en los dispositivos

Parte I: Definiendo la privacidad

[45 min - 1 hora]

Actividad fuera de línea: línea de tiempo de rastros de datos

[20 minutos]

  • Comparte que, en la próxima actividad, haremos una recapitulación rápida de su día hasta ahora.

  • Pide pensar en todo lo que hicieron desde despertar hasta llegar a esta sesión.

¡Consejo! Si la actividad es por la mañana, puede ser mejor reflexionar sobre el día anterior.

  • Una hoja de ejemplo para esta actividad:

  • Mi día (hasta ahora)

  • Usa esta hoja para listar tus actividades de hoy. Para cada elemento, responde:

  • Tras cinco minutos de reflexión silenciosa, pide compartir un poco de lo que hicieron hoy. Recuerda que está bien mantener los datos personales privados — ¡la hoja es solo para ellos!

  • Pide revisar sus hojas con estas preguntas en mente:

¡Consejo! Si es posible, entrega un marcador o lápiz de color a cada participante. Pide destacar o encerrar las tareas donde se usó tecnología.

  • ¿Cuántas de mis acciones de hoy incluyen tecnología?

  • ¿Cuántas exigieron usar un sitio web?

  • ¿Quién puede notar con qué frecuencia uso mi tecnología para tareas cotidianas?

  • ¿Qué podrían descubrir sobre mis hábitos en línea?

  • ¿Qué podrían descubrir sobre dónde estoy en el mundo real?

¡Consejo! Mientras comparten sus historias de uso diario, discute las maneras en que esos sitios rastrean sus actividades.

De https://www.internetsociety.org/: Sitios y compras en línea. Los comercios y sitios de reseñas suelen dejar cookies en tu sistema que pueden rastrear tu movimiento de sitio en sitio, permitiendo anuncios segmentados que muestran productos que viste recientemente. Redes sociales. Todos los +1, retuits y comentarios de Facebook (incluso privados) dejan registro. Verifica las configuraciones de privacidad predeterminadas de tus cuentas y vigílalas. Los sitios suelen presentar nuevas políticas y configuraciones que aumentan la visibilidad de tus datos. Pueden confiar en que hagas clic en «OK» sin leer. Celulares, tabletas o portátiles. Algunos sitios crean una lista de los dispositivos que usaste para visitarlos. Aunque a veces sirve para proteger tu cuenta, es importante entender la información que recolectan sobre tus hábitos.

  • Discusión — pregunta:

  • ¿Te sorprendió el número de tareas en las que dependiste de la tecnología?

  • ¿Quién crees que puede estar observando tus hábitos en línea?

  • ¿Qué crees que esas entidades pueden aprender de ti?

  • ¿Cuál de estas informaciones te gustaría proteger?

  • Informa: la información que dejamos al navegar es lo que llamamos «huella digital» o «sombra digital». Tu huella incluye los sitios visitados, los correos que envías y la información que das a servicios en línea.

  • Veamos qué tipo de información puedes dejar en tu huella digital.

Discusión y actividad en línea: ¿qué información puede recolectarse?

[10 minutos]

  • Comparte que, aunque tu huella digital probablemente no contenga el contenido de tus actividades, tus metadatos quedan atrás y son rastreados por todo tipo de entidades.

  • Explica que los metadatos son, simplemente, datos sobre datos. Ejemplo: una imagen puede incluir metadatos que describen su tamaño, profundidad de color, resolución, cuándo se creó y otros datos. Otro ejemplo: archivos de texto. Sin ver el contenido, podemos ver el tamaño, el tipo, quién es el autor y cuándo se escribió.

  • Pregunta: ahora que sabemos más de metadatos, pensemos en los de un correo. Digamos que envías un correo a tu amigo. Quizá terceros no vean el contenido. ¿Qué crees que sí pueden ver?

  • Remitentes

  • Destinatarios

  • Fecha y hora de envío

  • Si hubo o no adjuntos

  • Pregunta: ¿qué se podría aprender recolectando y analizando esos puntos de datos sobre tus comunicaciones?

  • Quiénes son tus amigos y familiares.

  • Con cuáles amigos mantienes más contacto.

  • Cómo están conectados entre sí tus amigos y familiares.

  • Podemos ver esos metadatos en acción con una herramienta del MIT llamada Immersion. Veamos esta demo de los contactos de Tony Stark: https://immersion.media.mit.edu/demo

  • Nota que podemos ver quiénes son los «principales colaboradores» de Tony.

  • Podemos ver qué individuos recibieron correos grupales juntos. Forman un clúster que representa nuestros grupos de contactos.

  • También podemos usar el control deslizante de abajo para ver cómo cambiaron los contactos con el tiempo.

  • Pregunta: ¿qué más notas del perfil de Tony Stark?

  • Siéntete libre de probarlo en casa. El MIT ofrece inicio de sesión seguro para la mayoría de los correos: https://immersion.media.mit.edu/

Actividad en línea: usando Lightbeam

[15 min]

  • Comparte que vamos a ver quién puede estar rastreándonos en línea.

  • Explica que usaremos Lightbeam de Mozilla para ver cómo las empresas usan las «cookies», archivos especiales guardados por el navegador, para seguirte en línea.

  • Da una visión general de las cookies.

  • Una cookie es un pequeño dato enviado por un sitio y almacenado en la computadora por el navegador mientras el usuario navega.

  • Se crearon para ayudar a un sitio a recordar información como el carrito de compras, si el usuario inició sesión o no, y las respuestas de formularios.

  • Hay muchos tipos de cookies, que veremos en la actividad de Citas Rápidas de Privacidad.

  • Asegúrate de que todos usen Firefox.

  • Demuestra cómo ir a las extensiones de Firefox, buscar Lightbeam y hacer clic en Agregar a Firefox. (https://addons.mozilla.org/pt-BR/firefox/addon/lightbeam/)

  • Circula por la sala para responder dudas individuales.

¡Consejo! Si trabajas con co-facilitador, esta es una gran manera de ayudar.

  • Explica que deben hacer clic en el ícono de Lightbeam junto a la barra de navegación para ver los datos.

  • Demuestra Lightbeam visitando dos o tres sitios apropiados de la comunidad en una pestaña nueva (por ejemplo, americanas.com.br, youtube.com.br, wikipedia.com). Luego vuelve a la pestaña de Lightbeam y muestra cuántos rastreadores te siguieron.

  • Comparte: a medida que visitas más sitios, Lightbeam muestra otras empresas y organizaciones que te siguen y rastrean tus cookies. Los sitios pueden seguirte por la web observando tus cookies y viendo dónde las obtuviste.

  • Pide explorar internet un poco para que Lightbeam recoja información de rastreo de terceros.

  • Luego: ¡ahora inténtalo tú! Abre una pestaña junto a la de Lightbeam. Visita cuatro o cinco sitios apropiados y vuelve a Lightbeam cada vez que vayas a una página nueva. Mira cómo registra cuántos sitios te rastrean.

  • Da tiempo para explorar.

  • Pregunta:

  • ¿Qué viste en Lightbeam que te sorprendió del rastreo en línea?

  • ¿Alguno de los sitios usó software de rastreo común?

  • ¿Hay razones «buenas» e importantes para rastrear personas en línea que valgan cierta pérdida de privacidad?

Offline Activity: Privacy Speed Dating

[20 min]

  • Divide a los participantes en grupos de 6 o más.

  • Entrega «biografías» (abajo) de varios dispositivos de rastreo de terceros.

Rastreo de Google Analytics: Trabajo para el dueño del sitio para ver cuántas personas lo visitan (visitas y visitantes únicos, nuevos y antiguos) o de dónde vienen. Ayudo a entender la experiencia del cliente. Soy una cookie persistente, generalmente de primera parte, que se define la primera vez que visitas el sitio, y me quedo el tiempo que el sitio determine, normalmente 18 meses.

Rastreo de gestión de sesión: Soy una cookie necesaria para que el sitio funcione técnicamente. Estoy lista cuando visitas el sitio y desaparezco cuando sales. Soy una cookie transitoria, almacenada del lado del cliente en memoria temporal y no en el disco. Me gusta salir, pero no busco una relación a largo plazo y no invadiré tu privacidad.

Rastreo de comercio electrónico: Me usan para el carrito de compras y el «checkout rápido» cuando compras en tu sitio favorito. Mis cookies guardan valores de ID que ayudan al sitio a rastrearte mientras agregas cosas al carrito. Todo lo que agregas se guarda con tu ID, para que al pagar el sitio sepa qué hay en tu carrito. Puedo ser una cookie de sesión que desaparece al salir, o persistente, que guarda tus artículos para cuando vuelvas. Sin mí, comprar en línea sería mucho menos conveniente.

Rastreo de ubicación: Soy el espía de tu bolsillo. Estoy en tus computadoras, celulares y tabletas. Como voy contigo siempre, puedo grabar tu ubicación todo el tiempo, incluso sin conexión a internet. Puedo revelar no solo dónde vives y trabajas, sino también dónde visitas. Puedo dejar clara tu rutina diaria y cualquier desvío. También sirvo para deducir tus relaciones con otras personas.

Rastreo de terceros: Quedo almacenado en tu dispositivo cuando visitas un sitio. A menudo no sabes que estoy ahí. El sitio decide cuántos de mis amigos están invitados. Suelo tener muchos. Puede haber 60 o más en una página. Pero a veces estoy solo, o no se me ve. Me gusta rastrear tus hábitos de navegación y contárselo a otros. Podrías decir que soy un poco chismoso. Uno de mis trabajos es para empresas que quieren construir un perfil de quién eres: cuántos años tienes, dónde vives, qué lees y qué te interesa. Las empresas para las que trabajo pueden empaquetar y vender esa información a: anunciantes, otras empresas o gobiernos. Suelo estar escondido, pero cuando trabajo para empresas conocidas, puedes verme como un botón colorido.

*Huella digital del navegador: Empecé en la banca para prevenir fraudes, pero ahora trabajo en muchas áreas. Mis amigos me cuentan cosas de ti, como tu dirección IP, historial, tamaño de pantalla, zona horaria, plugins y sistema operativo. Reúno información que por sí sola no parece identificadora, pero al juntarla puedo identificarte por internet y usarla como alternativa a las cookies. Cuanto más único es tu sistema, más fácil identificarte. ¿No me crees? Prueba Panopticlick. La EFF me mide desde 2010. *

  • Pide leer la biografía recibida. Deben adoptar la «personalidad» del rastreador de su tarjeta. Al empezar, tendrán dos minutos para conocer a otros en la sala.

  • Configura un temporizador de 2 minutos. Inícialo y pide a todos encontrar pareja.

¡Consejo! Si el número es impar, avisa que un grupo de tres es perfectamente aceptable.

  • Tienen dos minutos para presentarse y hacerse cualquiera de las preguntas de abajo. Al terminar, buscar otra persona y repetir. Continúa hasta que todos se conozcan.

  • ¿Qué haces?

  • ¿Cómo son tus amigos?

  • ¿Cómo nos conectamos?

  • ¿Cuántos años tienes?

  • ¿De dónde eres?

  • Tras diez minutos, llama a todos de vuelta al grupo grande.

  • Discute:

  • ¿Qué te sorprendió más de estos rastreadores?

  • Al conocer un nuevo tipo de rastreador, ¿ves quién puede beneficiarse de la información recolectada sobre tus hábitos? ¿Te preocupa el tipo de información que se comparte sobre ti? ¿Por qué sí o no?

  • Ahora que identificamos los problemas, ¡hablemos de soluciones!

Parte II: Tu lista de verificación de privacidad

[45 min - 1 hora]

Actividad en línea: Cambiando tus configuraciones de privacidad

[20 minutos]

  • Di a los participantes: tu navegador es tu puerta de entrada a internet. Es donde comienzan tus pasos para abordar tu privacidad personal. Demos algunos pasos hoy para ordenar las configuraciones de nuestro navegador.

  • Di a los participantes: levantando la mano, compartan qué navegador usan. Nos agruparemos por los navegadores que solemos usar para ver qué podemos hacer hoy para volverlos más seguros.

¡Consejo! Esta lista supone que los participantes pueden traer su propio dispositivo. Esta actividad puede remezclarse para contextos en los que todos los participantes usen un mismo navegador.

Google Chrome Mozilla Firefox Microsoft Internet Explorer Apple Safari

  • Ahora agrupémonos para trabajar en las configuraciones de nuestros navegadores.

¡Consejo! Señala las áreas de la sala donde deben sentarse los grupos.

¡Consejo! Revisa y remezcla esta hoja de ejercicios, pues las configuraciones pueden cambiar.

¡Consejo! Remezcla esta hoja de ejercicios para contextos en los que todos usen el mismo navegador, eliminando la segunda columna y ajustando las tareas al navegador en cuestión.

  • Lista de Verificación de Privacidad del navegador

  • ¡Usa esta lista para guiarte en el proceso de actualizar las configuraciones de privacidad de tu navegador!

  • Discusión: Después de 15 minutos, reúne a los participantes para conversar.

  • ¿Cómo les resultó el proceso de ajustar las configuraciones del navegador?

  • ¿Las instrucciones que vieron en línea fueron fáciles de seguir?

  • ¿Las configuraciones fueron fáciles de encontrar en su navegador?

Actividad en línea: Limpiando tu historial de navegación

[5 minutos]

  • Demuestra cómo limpiar el historial de navegación en Google Chrome

  • historial →

  • mostrar historial completo →

  • borrar datos de navegación →

  • selecciona desde el origen de los tiempos y marca: todos los elementos que quieras borrar →

  • Borrar datos de navegación

¡Consejo! Elige el navegador que prefieras. Google Chrome fue seleccionado para esta actividad por ser el más utilizado.

¡Consejo! Pide a los participantes que observen tu demostración con atención antes de intentarlo por su cuenta.

  • Señala que podemos marcar la casilla para borrar las cookies durante la limpieza de nuestros navegadores.

  • Di a tus participantes: los rastreadores pueden leer tu historial de navegación. Para practicar una buena higiene de privacidad, es importante limpiar el historial de navegación con regularidad. Intenta crear el hábito de limpiar tu historial antes de salir cada día.

  • Comparte con los participantes: en el caso de Google, incluso en modo incógnito, tu historial y tus cookies no se eliminan hasta que cierras el navegador por completo.

  • ¡Pide a los participantes que lo intenten!

¡Consejo! Demuestra el proceso algunas veces mientras los participantes practican.

Actividad en línea: Extensiones del navegador

[10 minutos]

  • Explica que existe un mundo creciente de extensiones de navegador que combaten a los rastreadores. Hoy exploraremos una de ellas: Privacy Badger.

  • Comparte que Privacy Badger solo está disponible para Google Chrome y Mozilla Firefox. Pide a los participantes que abran uno de esos dos navegadores.

  • Ve a la página web de Privacy Badger: https://www.eff.org/privacybadger

  • Di a tus participantes: Privacy Badger es una extensión de navegador que impide que anunciantes y otros rastreadores de terceros rastreen dónde estás y qué páginas ves en la web. Si un anunciante parece estar rastreándote en varios sitios sin tu permiso, Privacy Badger bloquea automáticamente que ese anunciante cargue más contenido en tu navegador. Para el anunciante, es como si hubieras desaparecido de repente.

  • Muestra a tus usuarios cómo hacer clic en el “botón de instalar” para instalar Privacy Badger.

¡Consejo! Asegúrate de que tu computadora no tenga ya Privacy Badger instalado, eliminándolo de Google Chrome antes de esta actividad.

  • Pide a los participantes que revisen contigo las diapositivas de introducción de Privacy Badger. Repasa qué significan los deslizadores de distintos colores. Naveguen por algunos sitios apropiados para la comunidad para alimentar a Privacy Badger y luego revisen qué rastreadores fueron bloqueados.

  • Demuestra cómo el ícono de Privacy Badger cambia de color mientras trabaja bloqueando rastreadores.

  • ¡Pide a los usuarios que agreguen la extensión Privacy Badger, naveguen por algunas páginas y experimenten por su cuenta!

Actividad fuera de línea: Creando contraseñas seguras

[15 minutos]

  • Comparte la tira cómica de xkcd de arriba con tus participantes. Comparte que lo que hace que una contraseña sea fácil de adivinar por las máquinas (¡y difícil de recordar para los humanos!) es elegir palabras comunes, incluso si cambias letras por números.

  • Anima a tus participantes a probar este generador de contraseñas. Hazles saber que también pueden hacerlo sin conexión, eligiendo cuatro palabras comunes del diccionario al azar y juntándolas.

  • Discutan qué pueden hacer para asegurarse de que las palabras sean verdaderamente aleatorias. Por ejemplo, podrían probar sustantivo, verbo, adjetivo.

¡Consejo! Si tienes un par de dados, prueba Diceware. Su lista de palabras incluye 8.000 palabras en inglés, precedidas por números de 5 dígitos. Cómo funciona: lanza el par de dados 5 veces y agrega la palabra correspondiente a tu frase de contraseña. Repite varias veces para agregar más palabras y hacer tu contraseña más fuerte.

  • Sostén una discusión con tus participantes.

  • ¿Qué contraseñas son más fáciles de recordar? ¿Por qué?

  • ¿Cuáles podrían ser más fáciles de adivinar? ¿Por qué?

  • ¿Qué otros consejos tienen para proteger sus cuentas en línea?

  • Habilitar la identificación de dos factores

  • Usar gestores de contraseñas

  • Asegurarse de usar contraseñas diferentes para cada cuenta.

¡Consejo! Hay muchos consejos de privacidad para compartir. Crea un folleto con recursos útiles o trucos y consejos. Aquí hay algunas fuentes para consultar:

Data Privacy Project: https://dataprivacyproject.org/curriculum/ Glassroom: https://theglassroom.org/ Me and My Shadow 8-Day Detox: https://myshadow.org/ Security in a Box: https://tacticaltech.org/projects/security-in-a-box-key-project/ Security Education Companion: https://www.eff.org/deeplinks/2017/11/announcing-security-education-companion Street-Level Surveillance: https://www.eff.org/issues/street-level-surveillance Providence Public Library, Privacy Training Workshop for Library Patrons: https://docs.google.com/presentation/d/1mkGJCHTYKyg2r2yQclRBvp23IfewRHZTMu8j2P0xDdg/edit?usp=sharing Internet Society Your Digital Footprint Matters: https://www.internetsociety.org/tutorials/your-digital-footprint-matters/ Our Data Bodies: https://www.odbproject.org/ Library Freedom Project: https://libraryfreedomproject.org/ San Jose Public Library Virtual Privacy Lab: https://www.sjpl.org/privacy Lebanon Public Library: https://www.leblibrary.com/online-self-defense

Cartas Hacker

[10 minutos]

  • ¡Ahora pongamos a prueba nuestros conocimientos!

  • Reparte este juego de cartas sobre privacidad: https://thimbleprojects.org/mozillalearning/308795/

  • Di a tus participantes que pueden encontrar algún concepto que no cubrimos en clase. Si encuentran una carta que les gustaría discutir, pídeles que levanten la mano.

¡Consejo! Si prefieres guardar las preguntas para una discusión grupal al final de esta actividad, pide a tus usuarios que las anoten.

Cierre y reflexión

[5 min]

  • Pregunta a los participantes: ¿qué aprendieron que no sabían antes? ¿Qué los sorprendió?

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor las necesidades de ese público?

Todas las Notas Adhesivas

Descripción

En esta combinación de actividades fuera de línea/en línea, los participantes exploran cómo algunas imágenes digitales están hechas de píxeles y cómo esas imágenes se estructuran y se muestran. Discuten qué más les gustaría comunicar en línea y crean su propia herramienta de comunicación visual para hacerlo: un arte de imagen en píxeles o un sticker web. Primero crean stickers web en formato analógico y los recrean con herramientas digitales. Los participantes agregan sus stickers a sus propios sitios web (si crearon sitios en las actividades de WRITE) o intentan enviarlos por correo electrónico o publicarlos en las redes sociales.

Objetivos de aprendizaje

  • Definir el término ‘píxel’.

  • Explicar cómo los bitmaps determinan la resolución de la pantalla.

  • Crear imágenes en píxeles en línea y fuera de línea.

Tiempo necesario

45 minutos a 1 hora dependiendo del tamaño del grupo

Público objetivo

Puede adaptarse para públicos de 13 años o más; con niveles variados de experiencia con la web

Materiales

  • Notebook con conexión a internet

  • Print out pictures within this activity or pull up on computer/project setup

  • Pizarra blanca, rotafolio o papel

  • Notas adhesivas multicolores

  • Lápiz o bolígrafo

  • Cinta adhesiva

Habilidades de alfabetización web

  • Diseño

  • Remezcla

  • Compartir

  • Conexión

  • Evaluación

Habilidades del siglo XXI

  • Comunicación

  • Colaboración

  • Creatividad

Introducción

[1 min]

  • Explica: hablaremos sobre cómo las computadoras crean y almacenan imágenes usando muchos pedacitos de color y cómo usamos esas imágenes para comunicarnos en línea. Y crearemos algunas imágenes muy simples, tanto en formato analógico como digital.

Píxeles

[5-10 min]

  • Pregunta a los participantes: ¿Quién ha oído el término “píxel” antes? ¿Qué es un píxel? ¿Qué saben sobre ellos? ¡Consejo! Puede ser necesario explicar la diferencia entre el término de computación y el producto de smartphone Pixel de Google.

  • Explica: El término “píxel” viene de las palabras en inglés Picture Element. Es el elemento más pequeño posible, la unidad mínima de información en una imagen digital.

  • Aparecen en la pantalla de la computadora como puntos de luz blancos o de colores, o como puntos que no están encendidos y se ven negros.

  • ¡Crear imágenes con muchos elementos diminutos no es una idea nueva! Veamos y hablemos sobre algunos ejemplos.

  • Pregunta a los participantes: ¿cuáles son las semejanzas y diferencias en las siguientes imágenes? ¿Cuál es el elemento más pequeño que compone cada imagen? (puedes mencionar la mezcla de colores y las capas de pinceladas del artista George Seurat; Chuck Close usa pinceladas, pero dentro de una cuadrícula; el videojuego Space Invaders no tiene mezcla ni capas, y se puede ver una cuadrícula marcada)

Pantallas, Bitmaps, Resolución

[5-10 min]

  • Pregunta a los participantes: cuando artistas como Chuck Close y George Seurat crean una imagen, ¿sobre qué trabajan? ¿Cuál es la superficie en la que trabajan? (Las respuestas pueden ser: papel, lienzo, madera, paredes para muralistas, etc.)

  • Señala que, en el mundo real, esos elementos siempre tienen dimensiones medibles — ya sean diminutos, pequeños o grandes como el costado de un edificio.

  • Cuando miramos imágenes digitales: ¿cuál es la superficie? ¿Cuál es el equivalente digital de un lienzo u hoja de papel? (Respuestas: las pantallas de nuestros monitores de computadora o teléfonos o notebooks o televisores.)

  • Señala que, como el papel o el lienzo, las pantallas también tienen dimensiones físicas (por ejemplo, la altura y el ancho del smartphone o de la pantalla de la computadora).

  • Además, las pantallas tienen restricciones digitales. Cada pantalla tiene un número máximo de píxeles disponibles para mostrar imágenes. Esto se llama resolución de pantalla. Se expresa en dos dimensiones, ancho y alto en píxeles. Ejemplos:

  • 1280 x 800

  • 1024 x 640

  • Observa que no hay una medida oficial fija para un píxel. Depende de las dimensiones físicas de la pantalla y de la resolución de la pantalla.

  • Una valla publicitaria gigante en Times Square puede tener un tamaño de píxel de 12 pulgadas por 12 pulgadas, y tu smartwatch tendrá un tamaño de píxel microscópico.

  • Explica a los participantes que cuando usamos computadoras para crear o mostrar una imagen hecha de muchos píxeles, la computadora usa una cuadrícula — una matriz de píxeles, llamada bitmap, para organizar la información visual.

  • Cada “bit” de información en la imagen, cada píxel, tiene su propia ubicación única en la cuadrícula o “mapa”.

  • Esto vale para las fotografías digitales, así como para las obras de arte digitales o imágenes — como logotipos o ilustraciones — creadas desde cero.

  • Aquí hay un ejemplo, una imagen de un erizo y un primer plano de los píxeles que componen el ojo:

  • Como una pantalla, una imagen también tiene resolución — el número total de píxeles en la imagen completa.

  • Calculamos la resolución de una imagen multiplicando el ancho y el alto del bitmap.

  • Pregunta a los participantes: ¿quién ha oído el término “baja resolución”? ¿O “alta resolución”? ¿Qué significa? (respuestas: baja resolución significa una imagen con menos píxeles, alta resolución significa una imagen con más píxeles. Cuantos más píxeles haya en la imagen, más información y detalle obtendremos.)

Fuera de línea: Arte Píxel Analógico

[15-20 min]

  • Explica a los participantes que crearán arte usando píxeles, pero de manera analógica. Crearán una imagen que después podrán transformar a formato digital para usar en la web.

  • Discute brevemente la comunicación visual en línea: ¿existen maneras de usar imágenes para comunicarse con otras personas en línea? (las respuestas aquí pueden ser: el botón de me gusta de Facebook, emojis, avatares, etc.) ¿Cuáles son los ejemplos? ¿Cómo y qué dicen esas imágenes? ¿Hay algo que quieras comunicar pero para lo que aún no existe una imagen? ¿Qué podría ser? ¿Qué tipo de comunicación te gustaría ver más o menos en línea?

  • Explica las restricciones de la actividad: como no tenemos todo el día, probablemente usaremos un bitmap más pequeño para crear una imagen de baja resolución, algo sin muchos píxeles. Aquí hay un ejemplo familiar:

  • Para preparar, puedes asignar diferentes tamaños de bitmap a diferentes grupos o invitar a los grupos a seleccionar el tamaño — ¿quieren trabajar con una cuadrícula de 5x5? ¿Una cuadrícula de 10x10? ¿Una cuadrícula de 25x25?

¡Consejo! Pide a los usuarios que consideren cuántos píxeles necesitan para crear una imagen legible. También puedes pedirles que hagan un poco de matemáticas — ¿cuántos píxeles necesitarán para cada opción?

  • Distribuye a los participantes en grupos más pequeños (es decir, 3 o 4).

  • Anima a los participantes, en grupo, a pensar en qué les gustaría comunicar con su imagen (y, si es una opción, con qué tamaño de cuadrícula están trabajando).

  • Fomenta el “sí” y la lluvia de ideas — recibe muchas ideas, no te apresures a descartar.*

  • Invítalos a planificar la idea en una pizarra blanca, rotafolio o papel borrador.

¡Consejo! El papel cuadriculado de cuaderno puede funcionar bien aquí.

  • Pide a los participantes que usen cinta adhesiva para disponer la cuadrícula de píxeles.

  • Distribuye una gran pila de notas adhesivas multicolores o cuadrados de papel multicolor recortados para cada grupo. Si quieres, puedes ofrecerles la opción de reducirlos a tamaños de píxeles más pequeños.

  • Da a los grupos unos 10 minutos para construir el arte a partir de sus notas adhesivas o papel.

  • Toma fotos del producto terminado de cada grupo, por si ocurre una catástrofe en la mesa más tarde.

  • Consigue la atención de todo el grupo y haz que todos vean cada creación, mientras el grupo habla sobre lo que hicieron, lo que quieren comunicar, su proceso y cualquier otra idea.

  • Para finalizar, pregunta a los participantes sobre el proceso:

  • ¿Cómo se sintió construir arte con bloques de color en lugar de dibujar o pintar en una página en blanco o lienzo desde cero?

  • ¿Cuáles fueron los desafíos?

  • ¿Te sorprendió cuánto puedes comunicar con píxeles?

  • ¿Cómo entró en juego la resolución? ¿Cómo entró el factor del color?

En línea: Arte Píxel Digital

[15-20 min]

  • Explica a los participantes que usarán una herramienta basada en la web para crear sus propias versiones digitales del arte de píxeles analógico que acaban de crear. Puedes usar la tecnología para dibujar y pintar, y no solo usar tu cámara para grabar.

  • Dirígelos a https://make8bitart.com/

  • Opcional: discute el concepto de “8 bits”.

  • Demuestra cómo usar el selector de colores, cómo dibujar en el lienzo y cómo borrar los píxeles que no quieren.

  • Muestra cómo la selección del tamaño del pincel puede ayudarles a rellenar rápidamente áreas más grandes.

  • Demuestra cómo guardar como png. Si los participantes son nuevos en el uso de la computadora, ten en cuenta que pueden necesitar instrucciones paso a paso.

  • Opcional: explica que el formato png permite píxeles transparentes, algo que un .jpg, un formato antiguo, no hace. Los píxeles transparentes son útiles para un sticker, pues no hay un fondo en la imagen, pareciendo que fue recortada y colocada donde quieras, como un sticker de la vida real (IRL - In Real Life).

  • Da a los usuarios 5 minutos para replicar sus stickers analógicos — ¡esto no debería tardar mucho, pues los stickers ya fueron diseñados!

  • Invítalos a publicar los stickers en las redes sociales, enviarlos por correo electrónico o agregar los stickers a sus propios sitios web.

  • Si hay interés, permite que los usuarios jueguen con el software y creen nuevos stickers.

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor las necesidades de ese público?

Crowdsourcing en la Web

Habilidades: Contribuir, Compartir, Evaluar, Conectar, Práctica Abierta, Colaboración, Comunicación, Resolución de problemas

Descripción

En esta actividad, los participantes explorarán cómo muchos individuos pueden trabajar juntos en el mismo proyecto de aprendizaje o descubrimiento, usando la web como herramienta de colaboración. Los participantes discutirán brevemente cómo la web y otras herramientas digitales aumentaron la cantidad de información en línea, así como los recursos humanos potenciales. También explorarán la noción de crowdsourcing y ayudarán con un estudio de investigación usando la plataforma Zooniverse de ciencia ciudadana (u otra plataforma — a elección de quien facilita).

Objetivos de aprendizaje

  • Explicar el término “crowdsourcing” y cómo contribuye a la información en línea.

  • Colaborar en línea para contribuir con información.

Tiempo necesario

45 minutos a 1 hora dependiendo del tamaño del grupo

Público objetivo

Puede adaptarse para públicos de 13 años o más; con niveles variados de experiencia con la web.

Materiales

  • Notebook con conexión a internet.

  • Una computadora/proyector configurado para la demostración.

  • Dos conjuntos de unas 50 a 60 imágenes similares, cada una impresa en una tarjeta individual (puedes imprimir una cuadrícula de imágenes y recortarlas). Pueden ser paisajes, fotos de personas, fotos de animales o insectos.

Habilidades de alfabetización web

  • Contribuir

  • Compartir

  • Evaluar

  • Conectar

  • Práctica Abierta

Habilidades del siglo XXI

  • Colaboración

  • Comunicación

  • Resolución de problemas

Introducción

[10 min]

  • Pregunta a los participantes: ¿Cómo estamos recolectando y almacenando información en la era digital usando la web? ¿En qué se diferencia de lo que se hacía en el pasado? Por ejemplo, pregunta:

  • ¿Quién ha usado una cámara de rollo? ¿Cuál es la diferencia entre una cámara de rollo y una cámara digital? (Las cámaras digitales te permiten tomar y almacenar muchas fotos, probablemente muchas más de las que tomarías con una cámara de rollo.)

  • Otros ejemplos pueden ser: correos electrónicos vs cartas, tuits o publicaciones en Facebook vs conversaciones por teléfono o en persona.

  • Junto con el crecimiento rápido y expansivo de la web y la computación, también tenemos nuevas herramientas y sistemas digitales (como cámaras digitales y telescopios, como sensores que rastrean el clima) para recolectar más y más datos sobre nuestro entorno, sobre nosotros.

  • Explica que mucha de esa información se agrega o se sube a la web — a veces automáticamente (correo electrónico basado en la web, tuits), a veces por el autor o propietario, donde se almacena en los servidores y puede ser accedida/accesible por cualquier persona con permisos.

  • Resume: mucha más información es fácil de crear y capturar digitalmente. Tenemos más dispositivos en red para recolectar y crear información, y podemos automatizar la recolección y el almacenamiento de todos esos archivos digitales.

  • Pregunta a los participantes: ¿qué otros tipos de recursos hay en la web, además de información? ¿Alguna vez pensaste en ti como un recurso en red? ¿Qué puedes ofrecer a otras personas en la web?

¡Consejo! Si a los participantes les cuesta encontrar qué ofrecen, aquí hay algunas maneras generales en que las personas pueden contribuir:

Enseña algo (el sitio instructables, tutoriales de YouTube). Ayuda a evaluar algo; da tu opinión, comentario o parecer sobre algo (proyectos de ciencia ciudadana, comentarios más amplios como reseñas). Comparte una idea, experiencia o percepción (blog, foro comunitario de hobbies, temas médicos, etc). Crea tu propio contenido nuevo (YouTube, SoundCloud). Presta el poder de procesamiento de tu computadora para ayudar a hacer algo cuando no la estés usando (computación distribuida voluntaria).

  • Hay una enorme comunidad de usuarios de la web, personas de diferentes orígenes y edades, que viven en lugares distintos de todo el mundo, que tienen habilidades o percepciones o tiempo que pueden estar dispuestas a compartir. Hay miles de millones de usuarios de la web y mucho potencial.

  • Hasta la web, no había una manera fácil de acceder a ese recurso humano colectivo, de reunir personas para compartir habilidades o trabajar o aprender en conjunto.

  • Hoy vamos a analizar algunas maneras de colaborar y trabajar con muchas otras personas en la web y ayudar con los desafíos y posibilidades de toda esa información digital. ¡Pero empecemos con una experiencia fuera de línea para calentar!

Fuera de línea: Crowdsourcing Analógico

[15-20 min]

  • Para esta actividad, necesitarás dos conjuntos de unas 50 a 60 imágenes similares, cada una impresa en una tarjeta individual (puedes imprimir una cuadrícula de imágenes y recortarlas). Pueden ser paisajes, fotos de personas, fotos de animales o insectos. Las imágenes deben ser todas similares, pero con algunas diferencias. Aquí hay un ejemplo:

  • Selecciona un voluntario o una dupla de voluntarios para ser compañeros o trabajador individual (no más de 2 aquí). Proporciona a ese participante o participantes un conjunto de tarjetas.

  • El resto de los participantes — estos deben ser la mayoría de los presentes en tu sesión — son tu multitud. Divide el segundo conjunto de imágenes por igual entre todos esos participantes — cada uno debe recibir 3 o 4.

  • Haz una pregunta sobre el conjunto de imágenes — en el ejemplo de la mariquita, pregunta ¿cuántas manchas hay en cada una? Pide a los trabajadores individuales y a los trabajadores del grupo que hagan la tarea y reúnan sus datos. Da a cada grupo una hoja para registrar los resultados. Pide a los participantes que dejen de lado las imágenes que no puedan interpretar.

¡Consejo! Las respuestas pueden no ser simples para todas las imágenes — puede no haber manchas, pueden ver algunas pero no todas las manchas en un insecto en particular, puede no ser posible identificar.

  • ¡El grupo más grande probablemente terminará la tarea primero! Sea cual sea el grupo que termine primero, pídeles que evalúen juntos la pila de “no es posible” — ¿podemos tomar juntos una decisión? — este debe ser un proceso rápido de revisión.

  • Cuando uno de los grupos haya terminado y evaluado todas las imágenes, detén la actividad para todos los grupos.

  • Pregunta a los participantes:

  • ¿Cómo es hacer esta tarea?

  • ¿Por qué fue más rápido para un grupo respecto a los otros?

  • ¿Qué habilidades especiales necesitaban para esta tarea?

  • ¿Cuáles fueron los desafíos de cada grupo?

  • ¿Qué percepciones tuvo el grupo más grande sobre las fotos de “no es posible identificar” — los demás vieron algo o sabían algo que la primera persona que miró la imagen no sabía?

  • Explica que el grupo más grande acaba de realizar una actividad de “crowdsourcing” — cada uno hizo una pequeña tarea — evaluando un poco de datos — que contribuyó a una tarea mayor — entender toda nuestra colección de fotos. Este proyecto fue hecho más rápido por el grupo más grande que por la persona individual o la dupla.

  • Existen tareas mayores, especialmente en el área de investigación científica, que pueden utilizar el poder del crowdsourcing en línea a gran escala para evaluar muchísimos datos, del tipo que se recolecta a gran escala, exactamente como discutimos al inicio de la sesión.

  • Informa a los participantes que, a continuación, usarán la web para ver cómo pueden participar en investigación científica real en línea — se convertirán en científicos ciudadanos o investigadores, como parte de un esfuerzo por incentivar a más personas a participar y ser parte del descubrimiento científico.

En línea: Zooniverse

[25-30 min]

  • Para esta actividad, los participantes participarán en investigación científica de crowdsourcing usando Zooniverse (u otra plataforma, según lo seleccione quien facilita). Dependiendo del tiempo, hay dos opciones aquí:

  • Quien facilita selecciona un proyecto con antelación y orienta paso a paso a los usuarios en cómo participar (ve el ejemplo abajo) O

  • Los usuarios exploran la colección de proyectos en Zooniverse y seleccionan uno (o más) que les parezca más interesante.

  • Observa que los usuarios no necesitan iniciar sesión para usar Zooniverse, aunque pueden hacerlo si quieren crear una cuenta.

  • Explica que Zooniverse es una plataforma en línea donde investigadores de todo tipo pueden alojar sus datos, para que los participantes puedan ayudarles.

  • No necesitas habilidades especiales para ayudar, solo interés. Los tipos de cosas que puedes hacer para cada proyecto son diferentes. Por ejemplo:

  • Puedes mirar una imagen y marcar un elemento o contar el número de elementos presentes. Puedes responder preguntas sobre la imagen y evaluar una imagen según determinadas cualidades.

  • Puedes estar transcribiendo información de la imagen en formato analógico.

  • Note in this section about checking and verifiying– that more than one person screens each image or piece of data.

  • Demostración del proyecto

¡Consejo! Quien facilita debe hacer esto y, si es posible, proyectar su pantalla para que todos los participantes puedan ver.

  • Accede a Zooniverse — https://www.zooniverse.org

  • Ve a la página del proyecto:

  • Explica a los participantes que Zooniverse es una plataforma que aloja muchos datos de investigación que participantes como tú pueden ayudar a clasificar o evaluar, ¡contribuyendo a la investigación del mundo real!

  • Selecciona un proyecto entre las opciones de la página y haz clic para ir a la página del proyecto. Por ejemplo, esta es la página inicial de un proyecto llamado Expedición Elefante.

  • Como todos los proyectos están en la plataforma Zooniverse, la interfaz es similar para cada proyecto.

  • Existe un tutorial emergente con varios pasos. Usa la tecla de flecha para explorar los pasos.

  • Y hay un espacio para hacer el trabajo de clasificación.

  • Muestra a los participantes cómo puedes completar una única tarea de evaluación.

  • Señala que pueden explorar las conversaciones de la comunidad en “TALK” y aprender más sobre el proyecto en “ABOUT”.

  • ¡Hagan la actividad! Da a los participantes de 15 a 20 minutos para contribuir a uno o más proyectos en Zooniverse.

Reflexión y cierre

[5-10 min]

  • Haz a los participantes algunas preguntas sobre su experiencia e incentiva una discusión. Ejemplos de preguntas abajo:

  • ¿Cómo fue hacer esta tarea? ¿Qué fue sorprendente? ¿Qué fue un desafío?

  • ¿Tuviste alguna duda sobre la tarea?

  • ¿Por qué los investigadores necesitan ayuda como esta?

  • ¿Por qué algunas tareas son más adecuadas para humanos? ¿Crees que una computadora podría hacer este trabajo?

  • ¿Cuántas imágenes/archivos/videos tuvo tu proyecto?

  • ¿Cuántas otras personas contribuyeron?

  • ¿Cómo te sientes sobre tu contribución?

Reflexión de la experiencia de aprendizaje

[5 min]

  • ¿Qué te gustó de esta actividad?

  • Si pudieras enseñar esta actividad a un público específico, ¿qué cambiarías en el proceso, la estructura o el contenido para atender mejor las necesidades de ese público?

// accesibilidad

Los recursos de accesibilidad se ofrecen según solicitud individual. Pide lo que necesites — intérprete de Libras, audiodescripción, accesibilidad física, apoyo individualizado, atención preferencial y otros.

Pídelo con al menos 15 días de anticipación: con ese plazo garantizamos el recurso; con menos, hacemos todo el esfuerzo, pero no podemos garantizarlo.

falae@casahacker.org · Declaración de Accesibilidad

Kit de Alfabetización Web en tu territorio

¿Quieres participar, apoyar o llevar esta iniciativa a tu escuela, colectivo o ciudad? La casa abre la puerta.

falae@casahacker.org

Dona

El enlace abre la página de donación de BTG Pactual, con las formas de pago disponibles.

Donar en reales

Desde fuera de Brasil

Para una transferencia internacional, usa los datos de abajo. Elige la moneda: lo que cambia entre ellas es el banco intermediario.

Los nombres de los campos están en inglés porque así aparecen en el formulario de tu banco.

Vale para las dos monedas

Creditor Agent (BICFI)BPABBRRJ
Creditor AgentBANCO BTG PACTUAL S.A.
Bank addressPraia de Botafogo, 501 — Rio de Janeiro — Brazil
IBAN / OtherBR8130306294000500002143176C1
BeneficiaryASSOCIACAO CASA HACKER
Beneficiary addressRua Doutor Renato Paes de Barros, 618 — Itaim Bibi — São Paulo — SP — 04530000 — Brasil

USD

Intermediary Agent (BICFI)CITIUS33
Intermediary AgentCITI, NEW YORK — US
BTG account with intermediary36317173

EUR

Intermediary Agent (BICFI)CHASDEFX
Intermediary AgentJP MORGAN FRANKFURT — DE
BTG account with intermediary6231431278

Remittance Information es opcional: úsala para identificar el pago, si quieres.

Revisa los datos en la pantalla de tu banco antes de confirmar la transferencia.

ver la página completa →