Web Literacy Kit

Archive record. casahacker.org/kit-de-atividades… — Squarespace, 2019. 14 activities. Web literacy curriculum.

Overview of the Web Exploration, Building and Participation Activity Kit

The goal of Casa Hacker’s Web Exploration, Building and Participation Activity Kit is to give participants a basic conceptual understanding of how to explore, build and participate on the Web.

Web Literacy, for instance, helps our community to:

• Understand how the internet works;

• Know the tools and strategies that can be used to search for and locate people, resources and information;

• Foster new content on the network to keep it alive;

• Connect with the communities that share, create and maintain meaningful content online;

• Evaluate information and detect disinformation;

• Empower themselves and their communities to participate online as citizens, students, workers and creators.

Developing, updating and maintaining this activity kit is the work of Casa Hacker contributors and strategic partners, on top of all the base material and expertise of Mozilla’s Core Web Literacy Curriculum.

Open Practices

Working openly is one of the fundamental requirements of this activity kit and of the Web Literacy Curriculum Framework 2.0. One of the first steps in implementing this kit is understanding what it means to work openly. We encourage you to learn to work in the open by studying our guide “Open Practices” (available soon) to learn the basics of participating, collaborating and sharing in community-driven projects.

Spread, Expand and Improve the Activity Kit

This kit is made to be inclusive, adaptable and open, which means communities are welcome to use it, spread it, expand it, adapt it and improve it.

Here is how you can contribute:

• Tell us how and where you are using this activity kit;

• We would also love to know what you learned and what you would change;

• Translate it into different languages;

• Remix it for different audiences;

• Continuously improve the activities.

Earning Digital Badges

Casa Hacker, through Badgr, offers digital badges for web literacy skills if you are interested in earning them — or in having your community earn them.

Maintainers

This activity kit is currently maintained by Geraldo Barros (geraldo@casahacker.org).

The Web and You

Skills: Communication, Collaboration

In this offline storytelling activity, participants reflect on and share observations, ideas and feelings about their own use of the Web and what the Web means to their communities. What do they love or hate about the Web? What are they curious about? What kinds of things would they like to do on the Web? Facilitators use the insights from this activity to contextualise and shape the remaining activities for the group. This group activity should also help participants get to know each other and feel connected.

Learning Goals

• Describe how the community uses and interacts on the Web.

Time Required

45 minutes to 1 hour depending on group size.

Audience

Can be adapted for audiences aged 13 and up, with varying levels of Web experience.

Materials

• Sticky notes

• Pencils, markers

• A timer to keep time during storytelling

Web Literacy Skills

This is an introductory activity for developing Web Literacy skills.

21st-Century Skills

• Communication

• Collaboration

Introduction

[6-10 min]

• The facilitator asks each participant to introduce themselves and answer an icebreaker question (for example: what’s your favourite food, favourite game, which cartoon character are you most like). The icebreaker helps participants get to know each other and feel more at ease during the discussion; it can — but does not need to — relate to Web literacy.

💡 Tip! The facilitator should give a demonstration so participants learn how to share and, especially, understand how much time they have for their introduction.

• Establish ground rules/shared agreements. Explain that participants will learn together — sharing perspectives and ideas, working in small groups or pairs and as one large group. Everyone is encouraged to share actively.

• The facilitator asks: what can we do to work and learn better together? Ask the group for ideas and make a list of positive behaviours for group work.

💡 Tip! The facilitator can add important points if the group doesn’t come up with them. These may include:

• Listen actively

• Don’t interrupt

• Be respectful of other members

• Be open to perspectives different from your own

• If you usually talk a lot in groups, try listening more

• If you usually listen, try speaking up and sharing your thoughts

Introducing the Web

[3-5 min]

• The facilitator explains that participants will think and talk about the internet and the World Wide Web — the tools and technologies we use when we are “online”. The facilitator asks the group to share the things they do “online”.

💡 Tip! For this sharing round, the facilitator can encourage participants to raise their hands and wait to be called on, or ask participants to share at random. Choose the sharing style that works best for your group.

💡 Tip! If the group doesn’t come up with many examples, or if the group has no prior Web experience, the facilitator can mention tools and technologies the group is likely to use. Examples of online activities may include:

• sending or receiving e-mail

• using the web to connect with distant family members

• using a smartphone app — for example, a maps app to help you get around

• using job-search sites

• “googling” or searching the web for information

• watching/listening to shows or music on sites like Netflix or Spotify

• logging into Facebook or other social networks

• gaming

• shopping

The facilitator points out that there are different ways of being online — many reasons why people use the Web. The group will explore them together in a storytelling exercise.

Storytelling: The Web and You

[20-25 min]

• In this exercise, the facilitator splits learners into groups of 3 to 4 participants to tell and listen to stories. Explain that each participant will have 3 to 4 minutes to tell stories of their experiences on the Web.

💡 Tip! Here are some pointers to give participants on how to start telling their stories. Storytellers should take a full 3 or 4 minutes. If a storyteller finishes before time is up, use the time to talk, debate and think about the story. Listeners should practise active listening — focus on the storyteller.

• The facilitator should pick one of the following questions to use with the group. All storytellers should answer the same question.

• What is the most important/meaningful/memorable experience you have had online?

• How has the web changed your life?

• How do you use the web? What kinds of things do you like to do online?

• OR, for those with no prior web experience:

• What kinds of things would you like to do online?

• What kind of information do you hope to find online? What would be most useful to discover or learn?

• How could being connected to many different people around the world change your life?

• The selected question should be posted somewhere visible in the room; the group gets a minute or two to think about their story before the exercise begins.

• The facilitator should model a story to set the tone and depth. If the facilitator tells a light, less personal story, participants will take that as the cue. If the facilitator goes deeper, or tells a more personal story, they grant participants permission and space to do the same.

💡 Tip! This should be a personal story, so as a facilitator you should draw on your own experience when modelling one. But an example of the kind of story a facilitator could model would go something like this (with more detail, to fill 3 minutes):

The internet changed my life because I could use it to connect with people who love music, which is one of the most important things in my life. I used online communities (message boards and mailing lists at first, Facebook pages and social media platforms now) to learn about music, deepening my appreciation and understanding of it in ways I never imagined. And I made lots of friends along the way! Those connections got me travelling — the first two countries I visited outside Brazil were Japan and Germany, to visit friends I had made in the online music community. We finally got to meet and go to events and shows together in real life. Twenty years on, I still have those friendships I made online!

• Between each story, the facilitator should remind participants to breathe, pause and let the story sink in.

• Between each story, ask learners to reflect quietly:

• What is different from your own story?

• What is similar?

• Remind participants to say thank you for the story.

Reflection and Review

[10-15 min]

• Now that participants have shared their individual stories, the facilitator asks the group to reflect on what they heard (in their own story and in others’) and to document and/or discuss all the different ways the group uses the Web.

💡 Tip! If time is short, the facilitator can choose to do the word-map exercise or ask a few exploration questions.

Word Map: Using sticky notes, participants make lists of words learned from the stories. Learners should write one word per sticky note.

VERBS: what we do or would like to do on the web — (examples might be connect, learn, shop)

ADJECTIVES: what is the experience like for us and for others? (examples: exciting, fun, overwhelming, confusing)

NOUNS: things that happen/are found online, or what we use to connect (examples: communities, music, mobile phone, modem)

• Participants bring their sticky notes and place them on a wall, grouped by word type (verbs, adjectives, nouns). The facilitator invites learners to come take a look and reflect on the following questions:

• What are you surprised to see?

• What is missing?

• What stands out?

Exploration questions: participants consider a few exploration questions, writing answers, ideas and thoughts on sticky notes. The facilitator can choose from the following questions (or make up their own) based on the audience and what emerged from the stories:

• What is mysterious about the web? What are you curious about regarding web technology — something you want to learn?

• What are some of the ways the web has changed your relationships? What is different about interacting on the web versus “in real life”?

• Are YOU on the web? How and where are you represented on the web?

• How do you express yourself online? Who are your different audiences? Who is looking at or watching you? What do you choose to share?

• Put the sticky notes back on the wall and invite learners to look and discuss again.

💡 Tip! The facilitator can use answers, stories and exploration questions to shape the rest of the workshop and event programme — revisiting the questions to contextualise, give examples, address gaps in knowledge and understanding, or draw on special experience — for example: “we had a question about how a browser works”, so let’s explore that now — or “some of you are active YouTube users — what can you tell us about the platform?”

💡 Tip! Always respect varied viewpoints, ideas and perspectives when referring to content shared by participants. At the end of the workshop, thank participants for their participation, questions and stories!

Learning Experience Reflection

[5 min]

• What did you like about the activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Map the Web

Skills: Collaboration, Communication, Problem-solving

Description

In this discussion/mapping/performance activity, participants share what they already know about the Web and collaborate to fill gaps and answer questions. They work together to organise this information into a visual, spatial “map” showing the relationships between many elements of the Web, from servers to websites to tweets and mobile phones. In a final section of the activity, participants “run the network” by connecting all the elements.

Learning Goals

• Explain how the parts of the internet relate to each other

• Demonstrate how information travels across the Web using props, sketches or physical movement

• Locate an IP address and explain what information is transmitted

Time Required

45 minutes to 1 hour depending on group size

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience.

Materials

• Sticky notes

• Pencils, markers

• Pre-made signs with the following labels:

• “Hop 1: local router”

• “Hop 2: internet service provider”

• “Hop 3: the server”

Web Literacy Skills

• This is an introductory activity for web literacy skills

21st-Century Skills

• Collaboration

• Communication

• Problem-solving

Introduction

[5-10 min]

• If participants don’t know each other, the facilitator asks each group member to introduce themselves and answer an icebreaker question (like favourite food, favourite game, which ride or cartoon character they are most like).

💡 Tip! The icebreaker helps participants get to know each other and feel more at ease during the discussion; it can — but does not need to — relate to web literacy.

💡 Tip! The facilitator should give a brief demonstration.

• The facilitator briefly frames and connects this session’s topic to a big idea. Explain that:

• The internet is probably one of the most important technologies, if not the most important, of our era.

• It is the main way our world stores and shares all kinds of information (personal information, financial information, medical information, scientific information and much more).

• That’s why it’s important to have a basic understanding of how the internet works.

• When we know this, we can make better decisions about how we use it and what information we share.

• The facilitator invites participants to discuss how we “see” or understand the internet. Use the following questions to start the conversation:

• What does the internet look like? Can we see it?

• If you had to take a picture of it, what would it look like?

• What are some internet metaphors you’ve heard (i.e. surfing, tubes, spiderweb, spiders and crawlers)?

• Which metaphors work best for you?

• Can you propose new ones?

Brainstorm: Map Elements

[5 min]

• The facilitator explains that participants can think of the internet as a system, a collection of parts that make a working whole. Participants can work together to create a map of that system!

• The facilitator hands out sticky notes to the group, or if the group is small enough, they can brainstorm together.

• Participants write different components of the system, each on its own sticky note.

💡 Tip! If participants struggle to start, they can ask themselves: when they are “online”, what kind of technology do they use? What is immediately part of their connection in their environment? (i.e. their computer, also known as the client, smartphone, modem, router).

• What are the other parts of that connection — the ones they may not see? (i.e. Wi-Fi, cables, servers, mobile towers, “the cloud”).

• When online, what are they looking at? What are they using? (browsers, websites, specific sites, apps or pages, images, media, all kinds of content, e-mail).

• What other words or terms have they heard about the Web that we haven’t discussed? (packets, bandwidth, https, HTML, URL, JavaScript, etc.).

• What other things might be connected to the Web that haven’t been mentioned yet? (think of the emerging IoT space — self-driving cars, fridges, fitness trackers, security systems, traffic lights, etc.).

💡 Tip! The facilitator should make sure the key terms are present: client computer, server, website, web page, smartphone, e-mail, network, etc.

Defining Web Terms

[5 min]

• If some of the terms the group generated are unfamiliar, take some time to define them together. The facilitator can consult the glossary of terms created by CERT.br below.

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

Tip! The Web Mechanics speed-dating icebreaker activity is a great way to work through some of these definitions. Original link

Building the Map

[5 min]

• Placing sticky notes on a board, the group works together to create a diagram of the internet. To help them do this, use the following prompts.

💡 Tip! You can also use tactile 3D materials, like wallpaper, string or cardboard, to build a model.

• How are the different elements related? For example, many client computers connect to a single server.

• Where is information stored or kept, and how is it transported?

💡 Tip! If participants are very new to these concepts, the facilitator can assemble the map themselves, explaining each step, the relationships and how information moves through the system.

Run the Network

[15-20 min]

• The facilitator should review the following:

• We see on our map that the “internet” is a system of networked computers, and the “Web” lives on the internet.

• The Web is the interconnected system of websites and pages, stored on many computers around the world.

• We use a web browser, like Firefox, to access pages on the web.

• Whenever you ask the internet to do something — entering a web address in a browser, watching a YouTube video or checking e-mail on your smartphone — your request “hops” across several network devices, like routers, switches and servers, on the way from your device to the website’s server.

• Show these introductory videos to give participants a bit more context.

• How does the internet work? Part 1: The IP protocol

• How does the internet work? Part 2: Autonomous Systems, BGP, IXPs.

• How does the internet work? Part 3: DNS

• How does the internet work? Part 4: Internet governance

• After watching the videos, take a few minutes and ask participants to compare and contrast what they learned from the video with what they imagined together earlier. How close were we? What did we leave out? What surprised us?

• The facilitator explains to the group that, to help understand this path, they will act out a human version of information moving across the internet, in an obstacle course.

• The information will travel from a:

• local computer (client) to

• a local access network to

• the internet to

• the website of your choice

• Start by walking participants through a model of the system. Ask the group to gather at the “My computer” sign and ask for three volunteers. Hand the three volunteers the signs labelled:

• “Hop 1: local router”

• “Hop 2: internet service provider”

• “Hop 3: the server”

• Ask the volunteers to spread out across the room.

• Explain that:

• the signs represent different “hops” a web request must pass through before reaching the server hosting the website the user is looking for.

• The rest of the participants are code packets containing web requests in special computer language, trying to reach the server at the other end of the room.

• Pick one of these “packet” participants to act as a model for the rest of the group before everyone starts the activity. Give participants the following scenario:

• I’m at my computer and I decide to watch a YouTube video. After I type the web address, my computer converts “youtube.com.br” into a special kind of coded request (called HyperText Transfer Protocol, or HTTP) that all computers can read.

• My computer splits this code into several “packets” to send across the network… our volunteer participant represents one of those packets.

• Ask the volunteer participant to walk to the first hop and explain:

• First, the packet passes through local network devices, like routers and modems in your building.

• The local network devices send the packet to the internet.

• Ask the participant to walk on and explain the next hop: after a packet reaches the internet service provider (ISP), it is sent along to one of YouTube’s routers.

• Ask the participant to walk on and explain the next hop. After the packet passes YouTube’s router, it is sent to a server at the company’s headquarters that will stream my video. Explain:

• At the server, for the video to stream on my computer, YouTube’s computer also converts my video into packets, which travel all the way back to my computer along the same path of network devices needed to reach YouTube.

• Ask the example participant to walk back to you, making sure to pause at each hop on the way back.

• Now, let’s increase the complexity of the network — after all, there are millions upon millions of servers and clients out there, not just a few! Assign 2 or 3 (or more) participants to act as “hop 3” — the server. And add a few more users making requests from client computers, plus more participants assigned as packets.

• Give each server a role — for example, one server can be BancoDoBrasil.com.br or Americanas.com.br or ingressorapido.com.br or the local library’s online catalogue.

💡 Tip! You can brainstorm this by asking participants which sites they use and the kinds of things they request from those sites.

• Write the server names on cards and ask the “servers” to hold them.

• Ask participants to write requests, like “list of dog toys for sale on Americanas” or “tickets to the Anitta show on IngressoRapido.com.br” on cards — they will hand these to the “packets”.

💡 Tip! Ask participants whether they want to add an identifier to their request to make sure it is returned to the right computer.

• Now it’s time for everyone to try the obstacle course! Explain:

• Users/client computers hand their requests to the “packets”.

• The “packets” must stop at each “hop” before moving on to the next.

• Wait, there’s a “catch”! Before packets can move from one hop to the next, they must show their request to the “stop”, which is a kind of gatekeeper.

• At the ISP hop, the participant acting as the internet service provider will need to direct packets to the correct servers; on the way back, they will need to direct the packet to the correct client.

• Servers have a short time to mark or amend the packet’s card with the requested information before sending the packet back to the client.

• Ask the “packets” to form a single-file line and run the obstacle course as fast as they can! You can have someone time how long it takes everyone to get through the course and see who is fastest.

💡 Tip! To make the obstacle course more interesting, you can place “government spies” between the hops. This EFF resource explains how third parties can intercept data between hops. Talk with your participants about which data is protected, and what is vulnerable and when.

💡 Tip! If your group is big enough, flood the ISP with requests for one particular server.

💡 Tip! During the activity, you can ask participants the following questions:

What happens at each “hop”? Do you think a real-life packet moves across the internet faster than you do?

• Note: if you don’t have physical space for this activity, participants can grasp how the parts of the Web interact using objects like playing cards, straws, string or other props.

Optional: IP Addresses

[5 min]

• Ask the group how many computers or devices are connected to the internet.

• How do you think each computer is identified or located on the network?

• Discuss the idea of an address — what makes an address (like a street address or an e-mail address) useful?

• Explain that it matters that the address is unique: it points to one house, one flat or one specific person; a message sent to that place, or that one person.

• Introduce the concept of IP addresses: every device or computer on a network or online has an IP (“Internet Protocol”) address.

• It is a friendly way of describing a website’s address — computers like numbers!

• IP addresses have 4 sets of numbers in a string.

• If we type it into a browser, it resolves to a human-friendly web address.

Tip! If a computer is available, demonstrate how typing an IP address takes you to a human-friendly domain name.

Reflection and Review

[5 min]

• To wrap up, the facilitator can ask reflection questions such as:

• What happens on the internet when you type a web address and press enter?

• What are the “parts” of the internet?

• How do large amounts of information arrive in pieces over the network even on low bandwidth?

• What is the difference between the internet and the World Wide Web?

• Be sure to thank participants for their participation, ideas and insights.

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Make Friends with Your Browser

Skills: Navigation, Synthesising, Collaboration, Communication

Description

An internet browser, also known as a web browser or simply a browser, is a software program you use to access the internet and view web pages on your computer. You can think of your browser as your gateway to the internet. Participants will reflect on the tools they use to navigate a website and build on their existing knowledge.

Learning Goals

• Describe the difference between a web browser and a search engine

• Locate the main tools of a web browser

• Label parts of a web page

• Navigate a website

Time Required

30 to 45 minutes depending on group size.

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience.

Materials

• Sticky notes

• Paper and pencils

• Laptop with an internet connection

Web Literacy Skills

• Navigation

• Synthesising

21st-Century Skills

• Collaboration

• Communication

Enter the World Wide Web

Part I

[10 min]

• Connect to prior knowledge by asking participants:

• What is the difference between a web browser and a search engine?

• What are the names of the most popular web browsers?

• What is the most popular search engine?

• Clear up any misconceptions

• A browser is a free software program that displays websites and lets users access various sites and web pages on the internet. You can download any browser you like. When you buy a computer, it usually comes with a browser already installed so you can get online right away. Think of the web browser as the gateway to the internet.

• A search engine, like Google, Yahoo or Bing, is also a software program that looks for a given document when specific words are entered. When a user types keywords into a search box, the search engine uses algorithms to display results matching that search.

• Search and explore

• Ask participants to open one of the web browsers on their computers. It is much easier if everyone opens the same browser, since names and options differ slightly between browsers. This lesson is based on the Firefox browser.

• Explain that when they open a browser, they land on the browser’s home page, which is a web page. Users can choose their browser’s home page.

• Ask participants to hover over the icons at the top of the screen (the toolbar) and write the words that appear on sticky notes. They can also click and see what each does. They should find:

• Open a new tab

• Close tab

• Go back one page

• Go forward one page

• Reload

• Home page

• Show history

• Open menu

• Search or enter address

• Search

• Scroll bar

• Ask participants to categorise the tools. Which tools let the user navigate the page? Which tools relate to searching for a site?

• Ask participants to open and close new tabs. Explain the reasons for keeping several tabs open. The goal is to clear up the confusion between closing the browser and closing a web page. You may want to revisit this point once participants have several different pages open.

• Participants may want to write the words from their sticky notes and draw the icon next to each word, or sketch the browser home page and fill in the tools.

Online Activity: Enter the World Wide Web

Part II

[15min]

• Participants will practise navigating a website in preparation for the research activity: Web Detective.

• Ask participants when to use a search engine and when not to. (If we know the exact web address, we don’t need to search.)

• Choose a website relevant to your participants and ask them to type the URL into the address bar.

• Discuss the different extensions and explain what they tell us about the type of company or organisation: .com, .org, .edu, .gov, .net. * You can also talk about http, https and www as part of the URL (Uniform Resource Locator) or web address. A website usually contains a collection of web pages.

• Ask participants to name what they see on the web page: i.e. media, text, headings, navigation tools or links to other pages. Explain how to identify a link to another page or resource. Show them a picture of a hand-shaped cursor.

• Ask participants whether they have ever been on a web page, clicked links to other pages, and couldn’t get back to where they wanted to be?

• Ask them to think about the navigation tools at the top of the page and discuss how to use them (back to the last page visited, forward to reverse the action, reload to get updated information, and home page).

• Then ask participants to use the horizontal scroll bar at the bottom of the page and the side scroll bar to move the page up, down, left and right. (Not all web pages have a horizontal scroll bar.)

• Ask participants to close the web browser. Then provide a URL and a list of “treasures” to find on that specific site. Some ideas:

• Look at the URL extension. What can we deduce about the type of organisation from this URL?

• Identify the media on the home page: what is its name and content?

• Go to page X and list 3 pieces of information on that page

• Which browser are you using?

Reflection and Review

[5 min]

• The facilitator asks participants: how does what you learned today change the way you think about web searches and search results?

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Search Party

Skills: Searching, Synthesising, Evaluating, Problem-solving, Collaboration, Communication

Description

In this offline discussion/activity, participants consider web search — why it matters so much and why it is so challenging. They learn about software programs called “web crawlers” and “search engines” that help find and deliver search results across billions upon billions of web resources. Participants also get an introduction to algorithms and practise writing and revising them.

Learning Goals

• Name the software programs that help collect and rank search results.

• Create an example of an algorithm illustrating how algorithms work to support web searches.

• Create an index for a simple algorithm.

Time Required

1 to 1.5 hours depending on group size

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience

Materials

• Collections of 20 to 60 small, varied objects of the same kind — for example, sets of buttons or beads of different shapes, sizes, colours, textures, materials. You will need one collection per group of 2 to 4 participants.

• A computer/projector set up, or some other way to show streaming video (from YouTube), and an internet connection.

• A whiteboard, blackboard or flipchart pad for notes the whole group can see.

• Sticky notes

Web Literacy Skills

• Searching

• Synthesising

• Evaluating

21st-Century Skills

• Problem-solving

• Collaboration

• Communication

Introduction

[3-5 min]

• The facilitator asks each group member to introduce themselves and answer an icebreaker question (like favourite food, favourite game, which muppet or cartoon character they are most like).

Tip! The icebreaker helps learners get to know the others in the group and feel more at ease during the discussion; it can — but does not need to — relate to Web Literacy.

Framing: Searching the Web

[5 min]

• What is the last thing you searched for on the web? Which tools do you use when you search? When you search, how often do you find what you’re looking for? Are some searches easier than others?

• The facilitator connects the discussion answers to a big idea.

• Today the web has billions upon billions of pages! That is a lot of information and resources, so finding the right information you need in that enormous collection of interconnected pages is the job of a collection of software programs.

• Some of these programs do the work of exploring the web to find out what is there, to build an index of the web.

Tip! If appropriate, you can ask participants: what is an index? Where do you usually find an index and what is it for? (In books, an index is an ordered list of contents that helps locate specific topics across a whole book.)

• Explain that participants will experiment with creating an index (or ordered listing) of a collection of objects, which will help us find specific items in that collection.

Offline Activity: Be the Crawler!

[30 min]

• Search a collection.

• Using a preferred method, the facilitator splits participants into groups of 2 to 4.

• Each group of learners gets a collection of 20 to 60 small, varied objects — for example, a set of buttons or beads or Lego pieces of different shapes, sizes, colours, textures, materials.

• The facilitator asks each group to find all the blue buttons or beads in the collection. When they finish, they should raise their hands. Start a timer and note the time when all groups have finished the task. Ask each group to report the number of blue buttons or beads they found.

Tip! If there is time, try another search, adding another attribute alongside a colour specification, such as texture or size.

• Discuss the task

• The facilitator tells participants: you just ran a search — congratulations, you are all search engines! Let’s talk about how you did it — what did you do to find all the blue items? What helped? Was it easy or hard?

Tip! If the group struggles to reflect on the task, ask: did they have to shake or pour out the collection to see what was there? Did they have to discuss what counts as blue? Are bigger collections harder to search?

• Document the search process.

• Ask participants: if we were to write a list of the steps involved in this simple search, what would it look like? Let’s do it together — what steps did you take? Were steps repeated?

Tip! The set of steps might look something like this:

Spread out the collection so you can see it. Decide what counts as “blue” (or medium, or whatever the search term is). Pick a button matching the search description. Set it aside. Repeat until no blue buttons remain. Tally your final button count. Raise your hand to signal you finished the task. Report the number.

• Once the facilitator has documented this list, ask participants — could someone else do this task just by looking at our list?

• Explain that this sequential task list is known as an algorithm. When software developers write computer code, they write algorithms — task lists that computers execute.

• Ask: what could make this task easier? Is there anything we could do IN ADVANCE to speed things up?

• Create an index

• Ask participants to find a way to order the items in the collection to speed up searching — that’s an index! Offer sheets of paper, pens and sticky notes and let participants problem-solve the system.

Tip! If participants seem stuck, offer suggestions — how could the items be grouped? Are there similarities between items? What features might someone search by?

• When participants seem done, give them a second search task, different from the first. Time how long it takes all groups to finish and report. Note the time — it should be faster for all groups, especially those with larger collections.

• Discuss!

• How did participants solve the problem? What approaches did they take? Were the approaches the same or different?

• Point out that the process of exploring the collection and creating this index is exactly what software programs called “web crawlers” or “spiders” do — examining billions of web pages one by one and creating an index to speed up searches.

Tip! If there is time, discuss the idea of metadata — information that helps describe each object in the collection: “blue”, “square”, “bead”, “button”.

• Revise the Algorithm

• Return to the algorithm; how does having the collection indexed change the steps?

Tip! Here you can hold a group discussion about the algorithm and talk about the different additions each group might make to the steps (depending on how they built their index). OR (time permitting) you can ask participants to take the basic algorithm and write a new set of steps that works with their indexed collection. Then groups can walk around the room.

• Be sure to highlight that the new algorithms differ for each group and indexing method. Connect this to the idea that when we use different search engines, we get different results, depending on the algorithm and how sites are indexed.

Reframing

[5-10 min]

• The facilitator explains that, of course, web pages are not buttons/beads. What is different between web pages and buttons/beads? Ask participants to discuss, or you can explain the following points:

• Web pages are far more complex, full of rich information and images.

• They are all interconnected — linked to one another, so one can refer or connect to another — in a way our buttons cannot.

• Also, there are billions of web pages — this happens at an entirely different scale from our little collections here.

• The facilitator explains that the same principles we used in our button exercise apply to search-engine companies like Google and Yahoo, which build indexes and use search algorithms to produce their results.

• Show this short video on how Google Search works https://www.youtube.com/watch?v=BNHR6IQJGZs

• Point out that:

• Not every page is in the index! Only part of the web is available, and the most popular pages are often at the top of your search.

• The algorithm is designed to give the searcher a good result, but not always the best result, and your result can differ from day to day.

• Algorithms are designed by people, at companies like Google, Microsoft, Yahoo, etc., and they are constantly tuned and changed.

• There is something called Search Engine Optimization (SEO) — things web designers, developers and content creators do to get their pages high in search results by taking advantage of how the algorithm works.

Online Activity

[5-10 min]

• Ask participants to share searches or questions they have — for example, how long it takes to walk to São Paulo, what’s in a special sauce, or how much a vet earns per year.

• Brainstorm and list different search engines, i.e. Bing, Yahoo, Google etc.

• Assign each participant or group a question and an engine, and ask them to find at least 3 different sources of information.

• Discuss as a group what participants found in their search.

• Ask participants to search again with the same question but a different search engine, and compare the results with the first search.

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Web Detective

Skills: Evaluating, Searching, Navigation, Problem-solving, Collaboration, Communication

Description

Learn to tell truth from fiction while using the web to investigate the existence of the Kraken — a huge, dangerous, tentacled sea creature — and how to detect misinformation and disinformation. Participants collaborate to create a set of rules to guide them in evaluating web sources to answer a research question, and compare them to other checklists.

Learning Goals

• Search for and evaluate information on the web.

• Create criteria for evaluating information on the web.

• List other resources available for evaluating information on the web.

Time Required

1 to 1.5 hours depending on group size

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience.

Materials

• Sticky notes

• Flipchart, whiteboard or paper

• Pencils, markers

• Laptop with an internet connection

Web Literacy Skills

• Evaluating

• Searching

• Navigation

21st-Century Skills

• Problem-solving

• Collaboration

• Communication

Introduction

[15-20 min]

• Briefly frame and connect this topic to a big idea.

• Ask participants:

• Do you search for information on the web? What was the last thing you looked up?

• How does this resource help/change things for you?

• Connect this discussion to the idea that the web is a rich, complex source of all kinds of information, from many different sources.

• Facilitate a brief discussion among your participants about web sources.

• Is everything you read or watch online true?

• How do you know when information on the internet is trustworthy?

• How can you tell when it isn’t?

Tip! Discuss the history of fake news with participants and ask them for examples of fake news past and present, and why it may seem more prominent today (for instance, fake news is nothing new, but because of social media, fake news can reach more people faster than viral e-mails ever could). Tip! Discuss the difference between misinformation (information that is false) and disinformation (information that is false and deliberately meant to deceive). Point out that we can pay attention to what we notice and feel online and use those responses, plus a set of criteria, to help us be better web detectives. Tip! A remix of this is to talk about advertising strategies, trends, etc. — how media on the web is often designed to provoke specific feelings.

Co-create a Criteria List

[10 min]

• Create criteria to guide you in judging the trustworthiness of information on the web.

• Ask participants to think and write on sticky notes individually and then share with the group.

• The 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 the site, 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.

• Try to reach agreement on each rule. The list needn’t be exhaustive — aim for six or more items.

• If there is controversy, don’t discard the rules; keep them to the side.

• Allow discussion of rules and acknowledge that criteria that work for some may not work for others.

• Document the shared rules on a large sheet of paper, blackboard or flipchart and post it where everyone can see.

• There will be a chance to add to or revise the list after the activity.

Researching and Evaluating Evidence

[20 minutes]

• Split participants into groups of 2 or 3. Explain that each group’s challenge is to examine the following seven sources of evidence that the Kraken, a 100-to-120-foot tentacled sea creature that attacks and sinks ships, is real.

• NOTE: These represent two different sets of stories: 1-4 about a shape found in a Google Earth image and 5-8 about new underwater video footage. The facilitator can limit to 1-4 or 5-8 as needed, or give each group a different set.

• http://www.mirror.co.uk/news/world-news/legendary-120m-kraken-sea-monster-8215560

• http://www.ufosightingsdaily.com/2016/06/60-meter-giant-squid-found-on-google.html

• http://www.orlandosentinel.com/features/gone-viral/os-thats-not-the-kraken-on-google-earth-its-a-rock-20160621-story.html

• http://www.southernfriedscience.com/did-monster-hunters-find-a-120-meter-long-giant-squid-on-google-maps/

• http://www.npr.org/2013/01/13/169274472/the-kraken-is-real-scientist-films-first-footage-of-a-giant-squid

• http://www.foxnews.com/science/2013/01/24/video-kraken-in-natural-habitat-released.html

• https://www.scientificamerican.com/article/live-giant-squid-filmed-in-deep-ocean/

• https://www.greenprophet.com/2013/01/kraken-sea-monster-video/

• https://en.wikipedia.org/wiki/Kraken

• Groups should spend 20 minutes researching together. The facilitator frames this activity:

• Remind participants they have a quite specific question: “Is the Kraken, a 100-to-120-foot tentacled sea creature that attacks and sinks ships, real?”

• Write the question and post it in the room; make sure there are no doubts about it and that it is clear to everyone.

• Suggest that participants use the research question to guide their work.

• Hand out blank scoring sheets to track the evaluation of each site.

• Explain that participants should summarise each site’s content in a few bullet points at the top of the sheet — the basic idea or message.

• Ask participants to list:

• the agreed rules (and any others they wish to use) in column 1

• scores (plus/minus) in column 2

• notes and comments in column 3 — what do you notice? What does the site look like? How does the content make you feel?

Tips! Encourage participants to talk through their thoughts and observations together as they explore and score. Tips! Encourage participants to click through the sites where these stories were posted for more information about the source, the author, the sponsors, etc. Tips! Encourage participants to think about the timeline of the stories — when did they appear? Which are most recent? How are the sources and stories connected?

• Ask participants to reflect on what they noticed/felt while looking at the sites. [10-20 minutes]

• Did anything surprise you?

• Was there any difference between the headline and the main idea?

• What differences did you notice in the story from site to site?

• How did you feel reading or looking at the sites? Were some more fun/exciting than others?

• Which sites seem most trustworthy? Which don’t? Did you validate the sources online?

• Are there new rules you would propose for the list?

• Who owns the site? How can we find out the site’s purpose? When was the page created?

• Review the rule list and discuss as needed.

• Share the results of the research question — what are their answers? How did the rule list help?

• Conclusion: Given these stories, we can say that the Kraken, a 100-to-120-foot tentacled sea creature that attacks and sinks ships, is probably NOT real. In the first story, a rocky island is mistaken for a Kraken. In the second story, the video captured a giant squid, but it is much smaller and shyer than the Kraken we are looking for — though it may have inspired the legends.

Detecting Skills in the Wild

[15-20 min]

• Explain to participants that they tested the list on a curated set of resources — pre-selected news. Now they can test their lists on news and information sources they find “in the wild”.

• Brainstorm with participants, or assign a question that is controversial — from the news or pop culture.

Tip! Make sure participants frame the question clearly, focusing on proving or disproving a specific fact.

• Ask participants to run a web search to find 3 or 4 different sources on that controversy.

• Ask them to use the same process from the previous section to evaluate the claim.

• Bring the group together to share results. Ask participants:

• Were some results different, or was there consensus?

• Which sources were trustworthy? Which sources did you decide were not?

• Is there anything you would add to or change in your list?

Check Your Checklist

[6 min]

• Let’s see how your list above compares to other fact-checking lists and processes.

• Split participants into groups of 3 to 4 and ask them to examine:

• How to Spot Fake News from FactCheck.org

• 7 Steps to Better Fact Checking from Politifact

• How to Fact-Check the Atlantic from the Atlantic

• Ask participants:

• How do these lists compare to your own?

• What did you learn that you didn’t know before?

• What if something is missing from these lists?

• How would you encourage others to practise good research/fact-checking techniques?

Tip! Explain to participants that some of these lists are made for and by journalists, who write and publish news — before the internet, they were the “gatekeepers” of factual information. What does it mean to be a gatekeeper? Are today’s social media users — you, if you use and post on social media — also potential “gatekeepers” of factual information? Tip! If time permits, you might consider adding the following activity, which explores how to fake your own news: https://nucleus-network.github.io/missioninfo/activities/fakenews.html#overview

• Explain to participants that there are several sites dedicated to fact-checking news, plus pop-culture information and urban legends. Politifact.com, FactCheck.org and the Washington Post’s Fact Checker Blog cover the news. Snopes.com covers news as well as pop culture.

• Ask participants:

• Have they ever used sites like these?

• Are they likely to use them?

• How can they evaluate the trustworthiness of these sites?

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Design on the Web

Skills: Design, Searching, Navigation, Communication, Collaboration, Problem-solving

Description

In this online discussion and activity, participants explore and experience how visual design works on the Web and how web designers use their skills to encourage certain behaviours. Participants compare and contrast the visual and interactive elements of different pages and platforms. In pairs, they narrate and document “user journeys” through a website — a process real-life web designers use to test and improve sites.

Learning Goals

• Explain how visual design works on the web

• Identify how web design elements are used to encourage certain behaviour

• Critique and document reactions to a website

Time Required

45 minutes to 1 hour, depending on group size

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience.

Materials

• Sticky notes

• Pencils, markers

• Laptop with an internet connection

Web Literacy Skills

• Design

• Searching

• Navigation

21st-Century Skills

• Communication

• Collaboration

• Problem-solving

Introduction

[10 min]

The facilitator introduces the idea that the web is a designed space. Everything you experience on the web is the result of a human decision and a human intention: * A button or search bar in a particular place * Text at a particular size * Colour choices * Images, text, etc.

• The facilitator asks participants: what does it mean to design something?

• Let’s think about design in the physical world. Take buildings, for example (the facilitator picks two contrasting examples):

• haunted house/government building/nightclub

• vs. cosy country house/nursery/library?

• Have you been in spaces like these? How might these environments look or feel different?

• What different feelings do you want the users of your building to have?

• What different actions do you want the users of your building to take?

• Designers make choices to create an outcome — in action or feeling for the user. All designers have plans and intentions.

• As a user, you respond to the design with feelings and actions (or not).

• The facilitator connects the discussion about physical spaces to the Web: like a physical space, most websites are designed with an intention — there is something the designer wants users to do.

• Discuss with participants, or run a think/pair/share activity on the following questions:

• Which sites do you use most often? Each participant thinks of a site (YouTube, Facebook, Google, Amazon, the library site, etc.)

• What is the site’s goal? What does the site’s creator intend for you to do? (It could be: buy things, see ads, etc.)

• What are you doing there? What do you want to do?

• Is your goal different from what the site designer wants? If so, how?

• Have you ever visited a site intending to do one thing and ended up doing something different? How or why did that happen?

• Have you ever visited a site and been unable to do or find something there?

• The facilitator explains that the better the site’s design, the more likely you are to do what the designer intends.

Visual Design Elements

[5 min]

• For many web users (except users with visual impairments, those using screen readers), websites have a strong visual component. Ask users: what are some elements of visual design?

Tip! Here you can use an example to get learners started, or build a list together first. Some elements might include:

• Colour

• Size

• Shape

• Space

• Position (alignment, proximity)

• Repetition

• Variety

• Harmony

• Look at examples — what is the site’s intention? How is design used?

• For each example: what do you see? What do you see first? Which visual design elements are there? What stands out?

• Two examples to compare and contrast:

• haunted house/government building/nightclub

• vs. cosy country house/nursery/library?

• Let participants look and discuss. Here are some things they or the facilitator might mention:

• In the Google example:

• The focus is the search bar — it’s almost the only thing on the page.

• Google’s colourful logo pops against the white background.

• Lots of white space on the page helps us focus.

• In the Amazon example:

• So many things to see and click —

• Some things are bigger: the Echo Dot ad gets a lot of space, so it’s important.

• The pop-up “LOG IN” button floats above the rest of the design, drawing attention to itself.

• The “Explore” button also stands out visually.

• The search bar is prominent and easy to find — see the yellow magnifying glass.

• The repeated circles give users the feeling they can choose among many product groupings to buy.

• The small product images at the top are playful and fun; they are evenly sized, giving the sense that there are lots of them.

Interactive Design Elements

[5 min]

• Ask users: which elements make a site interactive?

• Examples might include: links, forms, search bars, “like” buttons, “Buy now” buttons, comment boxes, status-update boxes, scrollable item lists, mouse-overs for pop-ups

• Look at a few examples with participants and discuss what they see. Ask participants: how do visual design elements (like size, colour, shape, placement) work with interaction elements?

• Participants may notice that designers use colour, size and placement to draw attention to the buttons they want users to press, or a search bar, etc.

Tip! If browsing online, you can try switching to responsive design mode (Tools > Web Developer > Responsive Design Mode), which lets you see how the site appears on different devices.

Which site elements disappear when screen space is smaller, and which remain? Seeing a site in this mode can help participants understand which aspects of the site the designer considers most important.

User Goals, Site Goals

[5 minutes]

• Let’s consider the goals a site (or the company/organisation it represents) has for interactions on its pages, compared with the user’s goals. Select a real site as an example.

Tip! Pick a few common sites, like Amazon.com, YouTube.com, or any sites frequently used in your audience’s community. You can assign the sites or let participants choose.

• Ask participants:

• What goals might users have related to the site?

• What goals might the site/company/organisation have?

• Try listing three or more potential goals for each. For example:

• YouTube.com may aim to encourage users to watch lots of content. A secondary goal may be for users to see and click ads. A third goal may be to encourage users to comment on videos.

• A YouTube.com user may want to watch just one specific video. Or a user may want to find many videos on a subject. And a user may want to upload their own content to YouTube.

• Are the users’ and the site’s goals in conflict? How?

• What happens when user goals and site goals conflict?

• Explain to participants that by documenting their experience with sites, they can see how the site’s design works to achieve the site’s goals and the users’ goals… or not!

Investigations and Journeys

[15 minutes]

• In this activity, participants pair up and work together to document their own user journeys through a specific site. The goal is to notice how they are interacting with the site’s design. Ideally each pair should have a computer to work on.

• The facilitator splits the group into pairs. The facilitator can select sites for participants to work with, or participants can pick their own.

• Ask participants to go to the site with an intention or goal in mind.

• For example: I’m going to Amazon to search for books about kittens; I’m going to look for an intro-to-HTML class on YouTube.

• One person in the pair is the user navigating the site and thinking aloud/narrating what they are doing, i.e. “I’m going to type ‘kittens’ into the search bar” or “I’m going to scroll down and read these reviews”.

• The other member of the pair listens/documents the user journey. The listener should notice and/or take notes on the user’s experience.

• For example, the listener should document:

• What is the user’s plan or goal for using the site?

• What is the first thing they see on the site? What pops out?

• Where do they click?

• Do they look at/watch/listen to content they weren’t looking for (ads, suggested videos or items, etc.)?

• Why did that happen?

• How does the site feel? Cold, friendly, fancy, sleek, etc.

• What annoyed them? What was fun?

• Did they keep their original goal for the session, or get sidetracked?

• What did they spend the most time doing on the site?

• Each participant should spend 5 to 7 minutes browsing a site as the user and 5 to 7 minutes documenting their partner’s experience as the listener/note-taker.

Tip! An offline version of the activity above: facilitators can print a web page for participants to mark up. You can provide an inner page and the site’s home page (to investigate whether the inner page actually helps the user navigate the rest of the site). As a follow-up, participants can use a blank sheet of paper to prototype a web page that effectively solves any problems they see in the handouts.

Reflection and Review

[5 min]

• The facilitator leads a brief discussion/reflection on user journeys.

• The facilitator explains that user journeys are a tool designers use when testing sites and apps — they can have users try the site and document what they do at each step to help refine the design.

• What did participants discover in the user-journey exercise?

• What did you notice during the activity? What was new, unexpected?

• Did you notice visual design or interaction design elements playing a role in your behaviour?

• Did you notice any tension between the things you wanted to do or get from your site experience and what the site’s design was nudging you to do?

• How does that make you feel?

• Do you think you will notice or do anything differently when browsing in the future?

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Basic Markup

Skills: Communication, Collaboration, Creativity, Coding, Design

Description

In this activity, participants explore how information such as text and images can be presented to be easily readable/understandable, and how that works on the web using HTML tags. This activity explores how browsers work, how web pages are structured, and the relationship between HTML tags and content.

Learning Goals

• Describe how HTML code is used to create web pages.

• Identify common HTML tags.

• Create a text file that can be displayed as a web page using HTML tags

Time Required

45 minutes to 1 hour, depending on group size

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience.

Materials

• Sticky notes

• Pencils, markers

• Laptop with an internet connection

• Print tag cards for TagTag Revolution or make your own on separate pieces of paper; write the following “tags” (don’t forget to include the arrow!):

• Opening tags: “<clap> →” (also sing, stomp, spin, wave).

• Closing tags: “</clap> ←” (also sing, stomp, spin, wave).

Web Literacy Skills

• Coding

• Design

21st-Century Skills

• Communication

• Collaboration

• Creativity

Introduction

[3 min]

• Review the key concepts, frame and connect this topic to a big idea. Explain:

• The internet is a system of interconnected computers, and the world wide web is a system of interconnected pages living on the internet.

• Websites are spaces for accessing, sharing and interacting with multimedia content.

• The people who build the web — web developers and designers — use a computer coding language called HyperText Markup Language, or HTML, to create web pages.

• When you access the web, you are using software called a browser to display pages.

Tip! Ask who knows some examples of web browsers.

• Today we will explore HTML — specifically, how we use HTML to make our content (text, images, etc.) readable by browsers and easy for humans to read and understand.

Content and Tags

(5-7 mins)

• For this activity, you need two visual resources:

• 1. the front page of a newspaper showing images, headlines, bylines, text, paragraphs, columns.
• 2. the front page’s text and images stripped of all formatting, in the same font size, with no paragraphs, columns, etc., printed on a single page. You can do this by accessing a digital copy of a print-edition newspaper, like the New York Times, selecting all the content, copying and pasting it into a text editor and removing all formatting (via the “make plain text” command). You may have to do a bit of extra editing to remove all the formatting. The goal is to show participants a typical article front page alongside the content as one uniform, continuous block of text.

• Show participants both pages; tell them the content is the same on both.

• Discuss together — what is the difference here? What is missing? Which page is more appealing? Which page is more interesting? Which is easier to read? Why?

• Discuss together how elements like headlines, columns, bylines, different font sizes and text blocks help organise content and steer our eyes to what matters on the page.

Tip! Keep a list of the design elements that come up in the discussion — map them to HTML tags later in the lesson.

• Key concept! Explain that this is how web designers use HyperText Markup Language: to add formatting to content on the Web, so the browser can display it in an easy-to-read, interesting way.

• Web designers use HTML “tags” to tell the browser what to do with the content.

• Ask participants: what is a tag? Where do you have tags? What do they do?

Tip! If participants struggle, explain: you have tags on your clothes or luggage, people tag you on social media, you can tag a blog post… A tag is a bit of information you attach to something, to identify it somehow or add special instructions.

• Explain: when web designers write HTML, they take pieces of content and “mark them up” with tags to tell the browser how to show that content. They put one tag at the start of the content (the opening tag) and one at the end (the closing tag), so the browser knows when to start and stop.

Tip! Visuals are really helpful here — write or project an example (as below) where everyone can see it.

• Explain the markup rules:

• When we want to mark up some content, we surround it with a matched pair of words, each word surrounded by a set of angle brackets “< >”.

• Here is an example tag: <title> Tag the World </title>

Tip! Ask participants — in this example, what is the title?

• When tags are used online, the angle brackets alert the browser software that it’s a tag. The word or character inside each bracket gives the browser important information about what is inside it.

• You can see there is something different about the second set of brackets: </title> — the slash means it is a CLOSING tag, telling the browser that the markup is finished.

• We ALWAYS use opening and closing tags to surround content.

• With very few exceptions, tags ALWAYS match the content, just like the markup examples we discussed.

• Tell participants we will now try out the CONCEPT of markup and tagging in offline activities before diving in to see how they work online.

Offline: Tag the World

[10 min]

Tip! If your participants seem comfortable with the concept of opening and closing tags (or you are pressed for time), you can skip this and move to the next section. If they need more time with the concept, run the Tag the World activity.

• Introduction: explain that participants will experiment with making tags and assigning them to real-world things in the room. Hand out sheets of paper, markers and tape. Explain that this is an exercise to show the CONCEPT of markup and opening/closing tags.

• Here in the real world, you have full freedom to invent your own tag names. Later we will see that in coding HTML, we use a restricted set of tag names everyone agrees on. But for now, create whatever tag you like.

Tip! Write the following example in big letters on the board, or make a slide. Take as much time as needed for this content and make sure everyone gets it — it matters!

• Review the markup rules:

• When we want to mark up some content, we surround it with a matched pair of words, each word surrounded by angle brackets “< >”. Here is an example tag:

• <title> Tag the World </title>

• We ALWAYS use opening and closing tags to surround content.

• You can tag anything in the room — make your own tags and close them!

Tip! To help participants start, make an example tag and place it in the room — <chair> </chair>. Encourage people to have fun and be creative!

Offline: Tag Revolution

[10 min]

• Introduction: explain that participants are about to play a fun round of musical chairs to show how HTML tags assign instructions to content.

Tip! This game works best with groups over 10. With a larger group you may want to add extra tags. With a small group, use fewer. Feel free to make your own.

• Steps:

Arrange the players in a circle, making sure there is enough room to walk around the outside of the circle.

Select two players from the group to be the “Programmers”. Hand one of them the first opening tag and the other the matching closing tag. Start with an easy tag like <clap> and </clap>.

Start the music and have the two “Programmers” walk around the outside of the circle while the other players stand still. Make sure the “Programmers” keep a small distance between them. You could have them start walking five steps apart.

When you stop the music, the “Programmers” attach the tags to the circle members closest to them. Remember that the tags must wrap the content.

Everyone standing between the arrows of the opening tag <clap> and the closing tag </clap> now has to start clapping (the people wearing the tags don’t have to). The clapping players should keep clapping for the rest of the game.

Now select two new tags and hand them to the “Programmers” (for example, <sing> and </sing>).

Repeat steps 3 and 4. This time, when the “Programmers” hand out the tags, anyone standing between the <sing> tags has to sing. If any player is between the <clap> tags and the <sing> tags, they have to clap and sing.

Continue these steps with the rest of the tags (and any other tags you want to add to the game) to make a fun, complicated tag dance party! When the “Programmers” hold the final tags, have them join the circle wherever they are when the music stops (instead of handing the tags to people in the circle). Everyone between the tags the “Programmers” hold performs the actions on their tags.

After all tags are in play, you can have tagged players move one at a time to change who is doing what. This helps participants understand how tags apply to content and how they are opened and closed in HTML.

• Here in the real world, you have full freedom to invent your own tag names — later we will see that in the HTML coding language, we use a restricted set of tag names everyone agrees on, ones that make sense for web content. But for now, create whatever tag you like.

Markup in Action

[15 min]

• Introduction: explain that we have seen what tags look like and how they work with content (what’s inside the tags). Now let’s practise using some real tags that are part of the HyperText Markup Language (HTML).

• First, let’s look at a simple HTML document — guess what — from a web designer and developer’s point of view: when they build web pages, what they work on is HTML code in a plain text file.

Tip! Open a simple HTML document in a text editor — NotePad on PC or TextEdit on Mac — and also show it in a browser. Point out the tags in the document and show what they do. Suggested basic tags: h1, h2, h3, p, a, body. You can also show a more complex document (use the browser’s page source) to show that all web pages are text and code interpreted by the computer.

• These tags have agreed meanings, so both web developers and the people who write browser software understand what they mean. The only reason these tags work is because of those agreements — if you try using some of your fun tags from “Tag the World” or “Tag Revolution” on a web page, you’ll see nothing, sadly.

Tip! If participants are confused about which kinds of tags would be relevant in HTML, remind them that HTML stands for “HyperText Markup Language” and that we assign tags to text content. Ask: why would “paragraph” be an HTML tag and not “clap” or “sing”?

• When you use these tags, you are writing HTML! And when the browser sees them, it turns your web page from a boring block of text into something interesting and easy to read.

• Let’s mark up! Have participants add tags to some existing content.

• OFFLINE: for this part you will need some content — maybe a fun news story or someone’s biography, or other interesting content, printed on 11x7 sheets and cut into pieces — paragraphs, headlines, links, etc. You will also need some sticky notes or paper for tags. Write the tags, or let participants create them (from the list only). Split users into small groups and give each group a collection of text and tags.

• ONLINE: for this part you will need a text file with some basic unformatted content, same type as above. First, ask users to save the file as .html. Explain the purpose of the <head> and <title> tags. Then let them type their tags!

Tip! For ONLINE, create a text file with the content and ask users to edit it with the MOST BASIC text editor — Notepad on a PC or TextEdit on a Mac — in plain text mode. The facilitator may need to explain the head and title tags.

• Explain to participants that they first need to wrap all the content in body tags — to tell the browser that all the content here is for display on the web!

• Ask participants to organise the content using the tags. Find the most important headings, split the paragraphs, add small headings and look for items that could be hyperlinks. Walk around the room and help here and there.

• At the end of the exercise, if possible, online and offline participants should see the page loaded in a browser. Online participants can save and open the .html file in a browser. For offline participants, the facilitator should, if possible, show the finished page on a computer and monitor.

• Explain to users that these files are still on their local computers and can only be viewed there. You haven’t yet put them “online” on a server, where other people can find them, so they are not on the web.

Tip! Remind users of the Map the Web activity to help them visualise how the client computer is connected. They can access content on web servers, but other computers on the Web cannot access the clients’ files.

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Building Basic Pages

Skills: Composing, Coding, Design, Revising, Sharing, Communication, Collaboration

Description

In this activity, users create their first web page using a basic text editor and a browser to display the results. They interview each other to gather personal (or fictional) content for an “About” page, organise and write the content, and mark it up using HTML. Users can upload these files to a server (if available) and see their content on the web!

Learning Goals

• Create a simple web page

• Transfer web page online

Time Required

45 minutes to 1 hour depending on group size

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience

Materials

• Laptop with an internet connection

Web Literacy Skills

• Composing

• Coding

• Design

• Revising

• Sharing (if they upload content to the Web)

21st-Century Skills

• Communication

• Collaboration

Introduction

[10 min]

Tip! Remind participants of their experience with tags in the previous lesson (I recommend completing Markup 101 with participants before this activity).

• Explain to participants that any web page you visit is actually an HTML file, which is just a text file — a bunch of words — with HyperText Markup Language added to the content. HTML is the language we use to write tags.

Tip! If needed, give a quick guided tour of the browser: address bar, home buttons, bookmarks and history.

• These files sometimes contain other kinds of code, like JavaScript or PHP, which makes pages — when displayed in the browser — interactive, eye-catching and dynamic, pulling code into the browser.

• HTML files are just text and not very pretty to look at.

• The browser takes them and makes them readable and visually more interesting, diving into the design and pulling in images and videos.

• HTML file + browser, like Firefox = AN AMAZING WEB PAGE FOR YOU (hopefully).

Tip! To show this idea, open a simple, static page and take a look. Explain: let’s see! We can see what a web page looks like behind the scenes, before the browser gets to it, by exploring “view source”.

• Since HTML files are just text, they can be written in a basic text editor and viewed in a browser. If you have a browser and a text editor on your computer — and almost EVERYONE does — you can build a web page!

• Your pages won’t be on the web. For that, you need to take the file you created and upload it to a server so people can reach it via a URL or web address.

Tip! Remind people, perhaps with a diagram, that client computers (web users like you) connect to the internet and access pages that live on servers on the internet. Servers are designed to “serve” pages to users. Web pages are HTML files displayed in a browser, which is why they look great.

• BUT, for now, you can practise building web pages right here on your computer. They won’t be on a server on the internet, but you can still create the files and view them in the browser on your own machine.

Tip! Here you can point to the diagram and show that you are creating a page on a client computer, which is not sharing files like a server!

• To start, we need CONTENT — because the web is all about communicating and sharing information and ideas. Let’s generate some content together!

Content and Storytelling

[20 min]

Tip! The next part is fun and interactive, and great for building a friendly, positive classroom community. But if you are short on time and giving participants the feeling that they can have their own representation on the Web is NOT a priority, you can provide pre-typed content as a .txt file and skip to the next section — “Get Tagging”.

• Write your bio or “About” page. Ask participants to split into pairs and interview each other about their lives. As facilitator, keep track of the time to make sure each participant gets equal time for their story.

• Interview: ask participants to take 5 minutes to tell their story, or, if they don’t want to share personal things, they can invent a fictional character and tell the character’s story. Ask the listener to take notes, or possibly record on a device. Prompt users to talk about what matters most to them (or their fictional character). Offer this list of questions to start:

• What is your name, age, other details?

• Where were you born? Where did you grow up? What was that like?

• What are you doing now? How do you spend your time? What are your favourite things to do, favourite places, food, music, etc.?

• Is there a favourite moment, a proudest moment that stands out?

• What are your plans and dreams for the future?

Tip! The interviewer can ask follow-up questions for more detail or a fuller story. They can ask open questions like “why” about motivations, preferences and future plans to draw out more insight, or ask questions to clarify ideas in the story.

• Review/Edit: ask each participant to take the notes from their story and go over them — consider adding details, think about what was left out.

• Organise and type: ask participants to type their stories in a basic text editor, making sure to use “plain text mode” (not Rich Text mode). While typing, they can think about organising and structuring the story into a beginning, middle and end. Maybe they can think of headings for the sections: “Early Days”, “These Days”, “What’s Next” — or find other ways to organise the content if they talked more about areas of interest — “My favourite songs”, “favourite places”, etc. Creating these sections will help structure the bio for easy reading as a web page.

• Give your story a title! Make up a quick title for your story or content, or pick something basic.

• Create a new folder on your computer and call it “xx-webpage” using your initials.

• Save your story in the folder with the .txt extension. Give it a title with no spaces or punctuation other than dashes or underscores, like “about-zm.txt”. This is the text version of your story, the raw content.

• Also save your story in the folder with .html as the extension instead of .txt — that will be your web version. The .html tells the browser to look for html code in the file. Give it a title with no spaces or punctuation other than dashes or underscores, like “about-zm.html”.

Get Tagging!

[10 mins]

• Explain to users that they will mark up their story — the .html version — with HTML, to make it ready for display in the browser. Explain that coding HTML and thinking/writing content are two different modes of thinking; they should always have content written before marking it up, rather than writing and tagging at the same time.

Tip! A great way to help participants do this, if you have access to an instructor computer and projector, is to do the activity with your own content alongside the participants and project the results so everyone can see what you are doing.

• Start the file with a doctype tag — this is one of the only tags with no content inside and no closing tag — a unique lone tag, reminding the browser once more that we are writing html:

• Add the <html> and </html> tags wrapping the whole page — so everything inside can be marked up with the markup language.

• After that, make a section with a set of tags called <head>``</head> at the top of the page, before all your written content. We’ll put a bit of content here for the browser, but we won’t see it on the main page itself. This is the page title, which:

• sets a title on the browser tab.

• provides a title for the page when it is bookmarked.

• displays a title for the page in search engine results.

• Next, add the tags — they should wrap the entire text of the page.

• Use h1 for your page’s main heading, your story’s on-screen title (different from the title tag)

• Use h2 or h3 tags for section headings

• Use p tags for paragraphs.

• Don’t forget to close your tags!

• For extra credit, add links to other sites (like a page about your hometown, your favourite team, artist or musician, or a favourite recipe). You can also download and add images — just make sure they are in the “xx-webpage” folder.

• Finally, once you’ve added all your tags, save the page!

• Now open your favourite browser and go to File > Open File. Navigate to your folder and click the html file you just created. How does it look? Are you seeing your content formatted for the web? Do you see your title appearing in the tab at the top of the browser bar? If things don’t look right, what might have happened?

Tip! The facilitator can troubleshoot here — common problems are missing tags, especially closing tags, typos in tags, a document not saved as html, image filename issues, etc. The facilitator can walk around checking pages and discuss, or even demonstrate on the projected example what happens when tags are left out (for instance, never closing an h1 tag is a great way to show why closing tags matters).

• Congratulate everyone on the pages they made! They are now web designers! Remind people that the pages are still on their local computers and not on the web! But they are ready to go there.

• Have a brief discussion about uploading to servers, about web hosting — what it means, how it works, what it costs, what hosting companies do.

Get Online!

[15 min]

• If your institution has server space and resources available, show participants how to use a file-transfer app to move their pages to a folder on the server. Talk about UPLOADING vs DOWNLOADING.

• Discuss how the URL is built; ask users to work out their own URLs — domain name, class folder name, personal folder name, page name.

• Once all the pages are on the server, ask users to point their browsers to the URL on the web to see their pages. You’re really on the web! Woo-hoo!

Tip! If there is time, have a brief discussion about web hosting — what it means, how it works, what it costs, what hosting companies do.

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Web Apps and Building with Thimble

Description

In this online activity, participants consider how they would like to represent themselves on the web. They get a crash course in the Thimble web development tool and use what they learned in the two previous activities about HTML and markup to remix a template into their own personal web page. This lesson revisits the concepts of web hosting, domain names and URLs.

Learning Goals

• Explain the difference between different web applications.

• Create a web page using the Thimble web app.

Time Required

45 minutes to 1 hour depending on group size

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience.

Materials

• Laptop with an internet connection and the ability to project onto a screen

Web Literacy Skills

• Coding

• Composing

• Remixing

• Revising

• Design

• Sharing

• Open Practice

21st-Century Skills

• Communication

• Collaboration

• Creativity

Introduction

[5-7 min]

• Frame the activity by explaining that some websites are quite different from others. Some are simple; others are more complex. We can split the sites we use into two big categories:

Tip! It is recommended that users first complete the “Building Basic Pages” activity.

• 1st category: sites where you can access static information.

• These sites may not change much over time.

• As a user, you can’t do much to change the site’s content or how it works for you.

• Many early web pages were like this.

• Ask participants: what are examples of static pages? Think of sites that rarely or never have new content. Or sites with few pages.

Tip! Examples might be a small restaurant’s website, etc. These sites are designed mainly to convey information.

• 2nd category: sites where, as a user, you can do something — create a result or make changes using the page.

• These are sites you use to make something happen.

• You can create or share something, or do something to change the displayed content, or provide information to complete a task.

• Ask participants: what are examples of sites like these? What was the last thing you did on the web?

Tip! Examples might be a public library site where you can search and reserve books and other resources. Or any web e-mail client, like Gmail, Yahoo, Hotmail, or instant messaging services. Shopping sites, web-based games, social media sites, etc. Google Search is a web app, and so is Facebook.

• Sites (or parts of sites) that let users do something on the web are called web applications.

• These web apps are powered by programs (code) that let the client computer (the one you browse with) work with the server (the computer where the site lives) to make something happen.

• Many of the small, simple elements participants have seen before can be considered web apps.

• Web forms that let users submit information, for example their name and e-mail address.

• Search bars that let users get defined results based on a question or term you type into a search bar.

• Ask participants if they have used search bars or web forms — if so, they have used web apps!

• Explain that web apps can also be much more complex. Thimble is a web app for creating web pages. Thimble is a coding tool for writing HTML and other web languages; it also publishes participants’ pages so they are online, on the web.

Tip! If participants have already done the “Building Basic Pages” activity (recommended), you can remind them that they don’t need to be online OR use a web app like Thimble to create web pages. They can use a plain text editor to write HTML and save their pages, and use any browser to view pages. Those pages are offline until uploaded to a web server.

Meet Thimble, Take a Tour

[5-7 min]

• For this section, the facilitator should project their screen so all participants can see the Thimble tour. Ideally, participants follow along on their own computers. Participants may find it helpful to work in pairs.

Tip! It’s best for users to log in/create an account so they can publish pages. However, if users aren’t comfortable creating an account, they can play with creating or editing HTML in the editor and watch the results change in the preview window. They won’t be able to publish pages.

• Go to the Thimble home page and click “Start a project from scratch”. Explain to users that we have now left the Thimble home page and are using Thimble as a web app to do something: create HTML pages. We are doing this in the browser, which is pretty cool!

• Ask participants: what do you see? How is this page different from the Thimble home page? How is the page divided? What is each section or window for? What is the relationship between the sections? Let participants talk and offer answers, but make sure they understand the following:

• At the top left there is an area where you can type and change the file name from “untitled project” to a file name that makes sense for the page you want to create.

• On the left there is a space called FILES, where we see two file names. These are the two files we can work on and edit for this project. Participants can switch between them by clicking the names. If participants create new files, they appear here.

• In the middle there is a space called EDITOR, where we can see the HTML code and edit it too.

• On the right there is a space called “PREVIEW” — as we edit the code, we see how it will display in a browser — and the changes happen as we type!

Tip! This is a fun feature, so give users a few small tasks — for example, change the heading size or edit the word “amazing”.

• Note that changes or additions that don’t follow HTML rules won’t appear in the preview. Participants check for problems in the editor, where the error or “bug” will be highlighted in red in the editor window.

• Also note the address in the browser bar at the top of the screen. If you are not logged in, there should be a black band after the address “https://thimble.mozilla.org/pt-BR/” and then “anonymous” and a slash + string of letters and numbers — that is a placeholder location on Mozilla’s server where your Thimble session is temporarily stored.

• If participants are logged in, the web address will be https://thimble.mozilla.org/pt-BR/ + /username + /some short random set of numbers.

• This is a location (a URL) the web app created to store that participant’s work on the project — it is the project preview.

• Participants can also find their projects by clicking their username at the top right and selecting “My projects”.

• At the top right there is a PUBLISH button. If a participant is logged into Thimble and presses this button, their page is saved on Mozilla’s servers and becomes accessible on the web. Thimble provides a web address different from the Thimble preview one. This publishes your page’s address, LIVE on the Web! Anyone, anywhere on the web, can see your page at this address.

Tip! You may need to clarify that people visiting that address will see only the page itself, NOT the Thimble working view with the editor window and all the options. Test and compare the published address with the Thimble preview address.

Make Your Pages

[15-20 min]

• For this part of the activity, facilitators have several content options for these pages.

• Participants can select an existing project to remix — Common Tags is a great place to start. This is a good option if time to generate new content is short.

Tip! If you decide to work with Common Tags as a remixable project, be sure to point out the TUTORIAL tab, which appears in the preview window. Participants can look there for help completing the activity.

• Learners who have already done the “Building Basic Pages” activity should already have a story about themselves written — they can add to that story and then bring it into Thimble.

Tip! If time is tight, they can skip adding new content and bring in the existing story copy.

• Ask participants to add to their life story — have them brainstorm and write a new section about their hometown, a favourite relative, a positive memory, etc. Facilitator’s choice.

Tip! Make sure they compose in their saved .txt file, not directly in Thimble, and that they don’t tag and compose at the same time! Coding and creating are two different ways of thinking — participants doing both at once can slow their creative flow by adding tags as they write, or get lost in the story and forget the tags.

• Ask participants to copy and paste the raw story content into the Thimble editor (inside the body tags, of course). Then they can practise marking that page up again (and tagging the new parts) to get familiar with tags and writing HTML.

• If participants haven’t done the “Building Basic Pages” activity, they can generate story content as follows: ask participants to split into pairs and interview each other about their lives. As facilitator, keep track of time so each participant gets equal time for their story.

• Interview: ask each to take 5 minutes to tell their story, or, if they don’t want to share personal things, they can invent a fictional character and tell that character’s story. Ask the listener to take notes, or possibly record on a device. Prompt users to talk about what matters most to them (or their fictional character). Offer this list of questions to start:

• Name, age, other details

• Where were you born? Where did you grow up? What was that like?

• What are you doing now? How do you spend your time? What are your favourite things to do, favourite places, foods, music, etc.

• Is there a favourite moment, a proudest moment that stands out?

• Your plans and dreams for the future

Tip! The interviewer can ask follow-up questions for more detail or a fuller story. They can ask open questions about motivations, preferences and future plans to draw out more insight, or ask questions to clarify ideas in the story.

• Review/Edit: ask each participant to take the notes from their story and go over them — consider adding details, think about what was left out.

• Organise and type: ask participants to type their stories in a basic text editor, making sure to use “plain text mode” (not Rich Text mode). While typing, they can think about organising and structuring the story into a beginning, middle and end. Maybe with headings for the sections: “Early Days”, “These Days”, “What’s Next” — or other ways to organise the content if they talked more about areas of interest — “My favourite songs”, “favourite places”, etc. Creating these sections will help structure the bio for easy reading as a web page.

• Give your story a title. Make up a quick title for your story or content. Or go with something basic.

• Create a new folder on your computer and call it “xx-webpage” using your initials. You should save this file in two versions.

• Save your story in the folder with .txt as the extension. Give it a title with no spaces or punctuation other than dashes or underscores, like “about-zm.txt”. This is the text version of your story, the raw content.

• Copy and paste this raw content into the Thimble editor window and start tagging.

• Learners who create their own personal pages in Thimble can return to them and add content, especially for the “Project Playlist” or “All the Stickers” activities in the “Participate” section.

Wrap-up and Discussion

[10 min]

• Pick one of the topics below to close the activity:

Sharing and Remixing Code with Thimble

• If participants worked with their own stories, introduce them to remixable projects and the Tutorial tab, and let them explore and play for 5 or 10 minutes. If they remixed an existing project, hold a discussion about that experience. Ask participants:

• What is it like to see other people’s code? What did you find new, surprising? Do you see things you’d like to try?

• What can you learn by using Thimble to explore and remix projects?

• How would you feel if someone remixed your project?

• Even if a page isn’t on Thimble, in many browsers you can peek at the source code… In Firefox, go to Tools > Web Developer > Page Source to see the code behind any page. If a page is a web app, the code will probably be complex. If it’s a static page, it will be easier to read.

Pros and Cons of Thimble vs Composing Offline

Revisit/explore the difference between composing and publishing with Thimble vs creating pages with a text editor/browser and saving on a personal computer. The facilitator asks participants for the differences. Some may be:

• With Thimble you are on the web immediately! The page is saved on Mozilla’s server. And you can see your changes as you type.

• With a text editor/browser, you are working on your local machine, not on the web. You need to save your file and refresh the browser to see changes.

• With the editor/browser, you need to upload to a server to put your page online where others can reach it.

• You need a web connection to use Thimble.

• You don’t need to be online to build sites with the browser and a basic text editor.

• Thimble is designed for learning code, not for publishing sites long-term.

• There are space limits on how many files you can have in Thimble. And the web address…

• How is your Thimble page’s web address (URL) different from the web address of your favourite blog or site? If you had a business, would it work as a web address?

Tip! Participants should understand that Thimble project addresses are generic; they don’t express your project’s content. They are hard to remember. To get the awesome web address they want for the page, participants would have to buy a domain name (like superpage.com or amazingpage.biz) and pay for web hosting — server space where their pages can be reached online.

• Thimble is really a learning tool — for testing and experimenting with pages.

• The text editor/browser combo is an easy way to start and can take you a long way in creating pages and sites.

• For more complex sites, you can use an app designed specifically to build and host pages quickly — check out the “Website Builders” activity.

The Evolution of the Web

• Explain: in the early days of the web, many pages were static. There was a lot of information sharing, but not much interaction.

• Show an example of the old web using the Internet Archive’s Wayback Machine and search for the Apple site link.

• Compare, for example, apple.com in 1996 with apple.com today (or find your own examples).

• What is the experience like on each site? What are the biggest changes?

• What do you think the web will be like in 20 years? What would you like to be able to do on the web of the future?

Tip! The facilitator can emphasise that “smart” mobile devices didn’t exist about 20 years ago — what we can do on the Web may change, but where and how we do it may change too.

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Website Builders

Skills: Coding, Composing, Design, Communication, Collaboration, Creativity

Description

In this activity, we introduce participants to the systems — called website builders or content management systems — that many people (designers, developers, and non-expert web newcomers) use to create sites with many different pages and frequently updated content, like blogs or shopping sites. Participants do some data collection and use analogue (pen-and-paper) examples to explore how web builders work.

Learning Goals

• Define a website builder/content management system.

• Identify four basic elements of website-building tools.

• Describe how the elements of website builders work to create web pages.

Time Required

45 minutes to 1 hour depending on group size

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience.

Materials

• Paper and pencils

• Print the worksheet with the following information:

• Worksheet 1: Pet Listing

• Pet’s name:

• Location:

• Type (cat, dog, etc.):

• Age:

• Picture:

• Traits:

• Available for adoption (yes/no):

Web Literacy Skills

• Coding

• Composing

• Design

21st-Century Skills

• Communication

• Collaboration

• Creativity

Introduction

[2 min]

• Explain:

• Today we’ll talk about some software tools — called website builders or content management systems — that many people (designers, developers and non-expert web newcomers) use to create sites.

• These tools bring together HTML and CSS (Cascading Style Sheets, used to add visual styles to websites) along with other programming languages to speed up the site-building process.

• But first, let’s do a quick, fun data-collection activity. We’ll use this data to model how web builders work.

Activity: Data Collection

[5 min]

• The facilitator hands out mini worksheets (printed 2 per page/cut to save paper). Ask participants to fill them in. Explain:

• It’s fine to make the information up.

• On the pet worksheet, you can draw a super-simple picture — stick figures are totally accepted!

• The worksheet text is below. The facilitator can remix as needed.

• Collect the worksheets and tell participants we’ll come back to them.

Worksheet 1: Pet Listing Pet’s name: Location: Type (cat, dog, etc.): Age: Picture: Traits: Available for adoption (yes/no):

Discussion: Website Creation

[30 min]

• Explain: we’ve seen how to create a basic web page — we take content and mark it up in HTML. That works great, especially for sites that don’t change much or small sites with only 5 or 6 pages. Ask participants:

• Can you think of some static sites — sites that rarely or never have new content? Or sites with few pages? Examples might be a small restaurant, etc.

• But what if we have information that changes all the time? Or lots and lots of information? What are sites that change a lot?

• Examples might be: weather and news sites, blogs, social media sites like Facebook, Instagram, shopping sites.

• What kinds of sites or pages do we visit most often? What does that say about the internet? (i.e. lots of change, lots of new information).

• Let’s suppose we’re making a site with many pages — a site listing different pets, where people can browse the listings and see whether they want to adopt a pet.

• Ask participants: which pages does our site need? (home page, maybe an about page, and maybe a page about each pet).

• Then let’s work out the steps for our site-creation process, and write the steps — in other words, an algorithm — for it. Say we already have our “home” and “about” pages. And we’ll use the pet data we just collected. What algorithm would we write for this process?

Tip! A sample algorithm for creating pet pages is here:

Open the text editor, save the new document as .HTML Type or paste the first pet page’s content Pet’s name: Location: Picture: Age: Traits: Available for adoption (yes/no): Comment: Mark it up with HTML Add styles for each data type using CSS Save and check it works in the browser Open the text editor, save the new document as .HTML Paste the next pet page’s content Pet’s name: Location: Picture: *Age: Traits: Available for adoption (yes/no): Comment: Mark it up with HTML Add styles using CSS Save and check it works in the browser (Repeat x times)

• Ask participants:

• What does this algorithm look like? What do you notice about it?

• How will you feel about adding all the pets? Possible answers: it’s repetitive, we’re doing the same thing over and over, boring to go through all the pets, this will take forever.

• What could we do to improve this process?

• Explain that this is the challenge for any site — like a blog or a shopping site, a news site — it would take forever to make all those changes and new pages!

• Explain that developers and designers created tools — some of which are free and aimed at beginner users, like you — that help streamline these processes, so nobody has to mark up dozens, hundreds or even thousands of similar pages.

• In a web builder, the computer does the hard part! Whenever we have a repetitive process, it’s a great job for a software program — computers do tasks like this far better than humans, without complaining.

• These web builder tools, in their most basic form, combine four elements. Let’s talk about how they work together.

• Content stored in a database

• HTML templates

• CSS design rules

• Some code languages run to bring it all together quickly (PHP, Python, Ruby, JavaScript).

• A simple user interface for entering content.

• This interface hides the HTML, CSS and any code from the user. Sometimes it’s drag-and-drop, or you type your content and make a few simple selections. But let’s explore how web builders work behind the scenes, after all your stuff goes into the database.

• Let’s see how it’s done, for our favourite site, on paper. First we need our 4 ingredients!

• Content in the database

• We’ll cut up our worksheets, because we’ll want to access the data separately.

• Create an HTML template for the pet page. Let’s leave some blanks where the content will go.

• See the example:

• Create some style rules (different for cats, dogs, lizards).

• Page background colour

• Font size and colour

• Drop some code instructions into the HTML template to tell the computer how to put it all together. We’ll write them where the blue notes are, where we want our data to go. It’s like filling in the blanks — mad-libs style!

• If we were developers working on this site on a computer, we’d write this in a programming language, but here we’ll just write basic instructions, called “pseudo-code”. It’s not the text a real programming language needs, but it expresses the intent of the instructions.

• What are the instructions? Let’s write another algorithm. This can be whatever we want in terms of which content to add, but here’s an example:

• Fetch the desired pet record

• Put the pet’s name or number in the title

• Assign the correct style sheet

• Put the pet’s name in the heading

• Put the image name in the img tag

• Put the traits in the final paragraph

• Write the instructions you suggested on the sticky notes

• Now, be the code!

• Ask a participant to try assembling the page following the sticky-note instructions — that’s what the code does!

• When a client’s browser requests that page for a given pet (say, Pet #2), the server code gathers the information from the database, assigns the right style sheet and sends it to your browser. This makes the page display automatically! So a page for each pet doesn’t exist statically — it is made on demand.

• That is what happens behind the scenes of any of the content management system/web builder platforms, like WordPress, SquareSpace or Wix.

• As a user, you’d be typing content into an interface, selecting a template and pressing a “publish” button. The code on the server side and in the browser does the rest! And now you know how it works!

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Safety First

Description

In this mix of online and offline activities, Safety First part 1 shows the ways our daily online activities can be tracked. Participants first work through a privacy audit, during which they discover the ways their personal activities can be seen by third parties. Participants learn about metadata and what it can reveal about us. Finally, participants develop an awareness of the mechanisms at work tracking our online activities.

In part 2, participants follow recommended steps to protect their online privacy. They learn how to set good passwords, protect their browsers, download privacy-enhancing extensions, practise good Wi-Fi habits and protect their personal data.

Learning Goals

• Identify the privacy choices you make every day.

• Explain how cookies and third parties can track you online.

• Identify three ways to limit online tracking in your browser and create better passwords.

Time Required

1 to 2 hours depending on group size.

Audience

Can be adapted for audiences aged 13 and up, with varying levels of web experience.

Materials

• A computer/projector set up and an internet connection.

• A whiteboard, blackboard or flipchart pad for notes the whole group can see.

• Markers, pens or pencils.

• Worksheets prepared (content below) as needed.

• Sticky notes

Web Literacy Skills

• Protecting

• Searching

• Navigation

• Evaluating

• Open Practice

21st-Century Skills

• Communication

• Problem-solving

Introduction

[10 min]

• Start a discussion with participants about their experiences with online privacy.

Tip! Depending on group size, these questions can be used in small-group discussions or with the whole group.

• When you hear the word “privacy”, what do you think of? How does the concept of privacy apply to your daily life?

• How do the notions of privacy we just discussed work in the context of what we do on the web?

• Does privacy apply equally to your offline life and your time on the web? Why/why not?

• Remind participants that, as with any large-scale problem, we can act through many small steps that add up to a protective effect.

• Ask participants: what are you doing to protect your privacy?

Tip! Be sure to touch on the following topics, as they will appear later in this lesson:

Changing your privacy settings Clearing browsing history Creating strong passwords Enabling two-factor identification Using password managers Practising Wi-Fi hygiene Enabling WPA or WPA2 on our Wi-Fi routers Avoiding public Wi-Fi Protecting personal information Being able to spot phishing schemes Keeping security updates on our devices

Part I: Defining Privacy

[45 min - 1 hour]

Offline activity: data-trails timeline

[20 minutes]

• Share with your participants that in our next activity, we’ll do a quick recap of their day so far.

• Ask participants to think of everything they’ve done from waking up until arriving at this session.

Tip! If this activity happens in the morning, it may work better to ask participants to reflect on the previous day.

• A sample worksheet for this activity:

• My day (so far)

• Use this worksheet to list your activities so far today. For each item, answer the following questions:

• After five minutes of quiet reflection, ask your participants to share a bit of what they did today. Remind your participants that it’s fine to keep personal data private — this worksheet is just for them!

• Ask your participants to look over their worksheets, keeping the following questions in mind:

Tip! If available, hand out a marker or coloured pencil to each of your participants. Ask them to highlight or circle the tasks where technology was used.

• How many of my actions today include technology?

• How many of my actions today required using a website?

• Who might notice how often I use my technology for everyday tasks?

• What could they find out about my online habits?

• What could they find out about where I am in the real world?

Tip! As your participants share their daily web-use stories, discuss the ways these sites are tracking their activities.

From https://www.internetsociety.org/: Websites and online shopping. Retailers and product review sites often leave cookies on your system that can track your movement from site to site, allowing targeted ads that can show you products you recently read about or looked at online. Social media. All the +1s, retweets and Facebook comments (even private ones) leave a record. Make sure you know the default privacy settings for your social media accounts, and keep an eye on them. Sites often introduce new policies and settings that increase the visibility of your data. They may count on you just clicking “OK” to whatever terms they are introducing, without reading them. Mobile phones, tablets or laptops. Some sites keep a list of the different devices you have used to visit them. While this can often be used to help protect your account, it’s important to understand the information collected about your habits.

• Discussion — ask participants:

• Did the number of tasks you relied on technology for surprise you?

• Who do you think might be noticing your online habits?

• What do you think these entities could learn about you?

• Which of this information would you like to protect?

• Tell your participants: the information we leave behind when browsing the web is what we call a “digital footprint” or “digital shadow”. Your digital footprint includes the sites you visit, the e-mails you send and the information you provide to online services.

• Let’s take a look at the kind of information you might leave behind in your digital footprint.

Discussion and Online Activity: What information can be collected?

[10 minutes]

• Share with your participants that, while your digital footprint is unlikely to contain the content of your online activities, your metadata is being left behind and tracked by all kinds of entities.

• Explain that metadata is, simply, data about data. Here’s an example: an image can include metadata describing the image size, colour depth, image resolution, when the image was created and other data. Another example is text files. Without viewing the content, we can see the file size, file type, who the author is and when the document was written.

• Ask your participants: now that we know more about metadata, let’s think about the metadata an e-mail might include. Say you’re sending an e-mail to your friend. Third parties might not be able to see your e-mail’s content. What do you think they can see?

• Senders

• Recipients

• Date and time the e-mail was sent

• Whether or not there were attachments

• Ask participants: what do you think could be learned by collecting and analysing these data points about your communications?

• Who your friends and family are.

• Which of your friends you keep in touch with most.

• How your friends and family are connected together.

• We can see this metadata in action with a tool developed by MIT called Immersion. Let’s look at this demo of Tony Stark’s contacts: https://immersion.media.mit.edu/demo

• Note that we can see who Tony’s “top collaborators” are.

• We can see which individuals received group e-mails together. They form a cluster representing our contact groups.

• We can also use the slider at the bottom of the page to see how our contacts changed over time.

• Ask your participants: what else do you notice about Tony Stark’s profile?

• Feel free to try this at home. MIT provides secure login for most e-mail apps: https://immersion.media.mit.edu/

Online Activity: Using Lightbeam

[15 min]

• Share with your participants that we’re going to look at who might be tracking us online.

• Explain that we’ll use Mozilla’s Lightbeam to see how companies use “cookies” — special files saved by the web browser — to follow you online.

• Give an overview of cookies.

• A cookie is a small piece of data sent from a website and stored on the user’s computer by the user’s browser while the user is browsing.

• They were created to help a site remember information like what’s in your shopping cart, whether a user is logged in or not, and to remember answers users entered into forms.

• There are many types of cookies, which we’ll see in our Privacy Speed Dating activity.

• Make sure you and your participants are using Firefox.

• Demonstrate how to navigate to Firefox extensions, search for Lightbeam and click Add to Firefox. (https://addons.mozilla.org/pt-BR/firefox/addon/lightbeam/)

• Circulate around the room to answer any individual questions about this process.

Tip! If you’re working with a co-facilitator, this is a great way for them to help.

• Explain that participants will need to click the Lightbeam icon next to the navigation bar to see the data.

• Demonstrate Lightbeam for your participants by visiting two or three community-appropriate sites you like in a new tab (for example, americanas.com.br, youtube.com.br, wikipedia.com). Then go back to the Lightbeam tab and show participants how many trackers followed you.

• Share with your participants: as you visit more and more sites, Lightbeam displays other companies and organisations that are following you and tracking your cookies. Sites can follow you across the web by watching your cookies and seeing where you picked them up.

• Ask participants to explore the internet a bit to let Lightbeam collect third-party tracking information.

• Then share with your participants: now you try! Open a new tab next to your Lightbeam tab. Visit four or five community-appropriate sites and return to your Lightbeam tab each time you go to a new page. See how Lightbeam keeps track of how many sites are tracking you.

• Give your participants time to explore.

• Ask participants:

• What did you see in Lightbeam that surprised you about online tracking?

• Did any of the sites you visited use common tracking software?

• Are there important “good” reasons for tracking people online that are worth losing some privacy for?

Offline Activity: Privacy Speed Dating

[20 min]

• Split your participants into groups of 6 or more.

• Give your participants “bios” (see below) of various third-party tracking devices.

Google Analytics tracking: I work for the site owner to see how many people are visiting the site (visits and unique visitors, new and returning) or where they come from. I help a site owner understand a customer’s experience of the site. I am a persistent cookie, usually first-party, set the first time you visit the site, and I stay there as long as the site determines, usually 18 months.

Session management tracking: I am a cookie the site needs to work technically. I’m ready when you visit the site and I disappear when you leave. I am a transient cookie, stored client-side in temporary memory, not on the hard drive. I’m happy to date, but I’m not looking for a long-term relationship and I won’t invade your privacy.

E-commerce tracking: I’m used for shopping-cart management and “quick checkout” options when you buy something on your favourite site. My cookies store ID values that help the site track you as you add different things to your cart. Everything you add to your cart is stored with your ID value, so when you check out, the site knows what’s in your cart. I can be a session cookie that disappears when you leave, or a persistent cookie that keeps your cart items for when you come back later. Without me, online shopping would be far less convenient.

Location tracking: I am the spy in your pocket. I’m in your computers, mobile phones and tablets. Since I go with you everywhere, I can record your location all the time, even when you’re not connected to the internet. I can reveal not only where you live and work, but where you visit. I can make your daily routine and any deviations clear. I can also be used to deduce your relationships with other people.

Third-party tracking: I get stored on your device when you visit a site. You often don’t know I’m there. The site decides how many of my friends are invited. I often have lots of friends. There can be 60 or more of us on one page. But sometimes I’m seen alone, or not seen at all. I like to track your browsing habits and tell others. I guess you could say I’m a bit of a gossip. One of my jobs is working for companies that want to build a profile of who you are: how old you are, where you live, what you read and what interests you. The companies I work for can package and sell this information to: advertisers, other companies or governments. I’m often hidden, but when I work for well-known companies, you might see me as a colourful button.

*Browser fingerprinting: I started in banking to help prevent fraud, but now I work in many fields. My friends tell me things about you, like your IP address, browser history, screen size, time zone, plug-ins and operating system. I gather information that on its own doesn’t seem identifying, but since I put all these things together, I can identify you across the internet and use them as an alternative to cookies. The more uniquely your system is configured, the easier it is for me to identify you. Don’t believe me? Try Panopticlick. The EFF has been measuring me since 2010. *

• Ask your participants to take a little time to read the bio they received. Share that they should adopt the “personality” of the tracker listed on their card. When the activity starts, they’ll have two minutes to meet and get to know others in the room.

• Set a timer for 2-minute intervals. Start the timer and ask everyone to find a partner.

Tip! If there’s an odd number of participants, let them know a group of three at a time is perfectly acceptable.

• Tell your participants they have two minutes to introduce themselves to each other and ask each other any of the small questions below. When the two minutes are up, ask them to find someone else and do the same. Continue until everyone has had the chance to meet each other.

• What do you do?

• What are your friends like?

• How do we connect?

• How old are you?

• Where are you from?

• After ten minutes, call your participants back to the big group.

• Hold a discussion with your participants:

• What surprised you most about these online trackers?

• Having learned about a new type of tracker, can you see who might be benefiting from the information being collected about your browsing habits? Are you worried about the kind of information being shared about you? Why or why not?

• Now that we’ve identified the problems, let’s talk solutions!

Part II: Your Privacy Checklist

[45 min - 1 hour]

Online Activity: Changing Your Privacy Settings

[20 minutes]

• Tell participants: your browser is your gateway to the internet. It’s where your steps to address your personal privacy begin. Let’s take a few steps today to sort out our browser settings.

• Tell participants: by a show of hands, please share which browser you use. We’ll get into groups by the browsers we usually use to see what we can do today to make them safer.

Tip! This list assumes participants can bring their own device. This activity can be remixed for settings where all participants use one common browser.

Google Chrome Mozilla Firefox Microsoft Internet Explorer Apple Safari

• Now let’s get into groups to work on our browser settings.

Tip! Point to the areas of the room where your groups should sit.

• Learn directly from the online resources based on your groups:

• Google Chrome: https://myshadow.org/how-to-increase-your-privacy-on-chrome

• Mozilla Firefox: https://myshadow.org/how-to-increase-your-privacy-on-firefox

• Microsoft Internet Explorer: https://support.microsoft.com/en-us/help/17479/windows-internet-explorer-11-change-security-privacy-settings

• Apple Safari: https://support.apple.com/guide/safari/privacy-preferences-sfri35610/mac

• Give each group the browser Privacy Checklist below. Remind users that, while they may see additional security tips on the web pages they’ve been assigned, they should plan to work through the worksheet only for now, since we’ll go through other steps as a group.

Tip! Review and remix this worksheet, as settings are subject to change.

Tip! Remix this worksheet for settings where everyone uses the same browser, removing the second column and adjusting the tasks to match the browser in question.

• Browser Privacy Checklist

• Use this checklist to guide you through the process of updating the privacy settings in your browser!

• Discussion: After 15 minutes, bring participants together to discuss.

• How did you find the process of adjusting your browser settings?

• Were the instructions you saw online easy to follow?

• Were the settings easy to find in your browser?

Online Activity: Clearing Your Browsing History

[5 minutes]

• Demonstrate how to clear your browsing history in Google Chrome

• history →

• show full history →

• clear browsing data →

• select the beginning of time and check: all the items you want to erase →

• Clear browsing data

Tip! Pick whichever browser you like. Google Chrome was selected for this activity because it is the most commonly used.

Tip! Ask participants to watch your demonstration carefully before trying it themselves.

• Point out that we can tick the box to clear cookies in the course of cleaning our browsers.

• Tell your participants: trackers can read your browsing history. To practise good privacy hygiene, it’s important to clear your browsing history regularly. Try making it a habit to clear your history before leaving every day.

• Share with participants: in Google’s case, even when you’re in incognito mode, your history and cookies won’t be deleted until you close the browser completely.

• Ask participants to give it a try!

Tip! Demonstrate the process a few times while participants are practising.

Online Activity: Browser Extensions

[10 minutes]

• Explain that there is a growing world of browser extensions that fight trackers. Today we’ll explore one of them: Privacy Badger.

• Share that Privacy Badger is only available for Google Chrome and Mozilla Firefox. Ask participants to open one of those two browsers.

• Go to the Privacy Badger web page: https://www.eff.org/privacybadger

• Tell your participants: Privacy Badger is a browser extension that stops advertisers and other third-party trackers from tracking where you are and which pages you view on the web. If an advertiser seems to be tracking you across multiple sites without your permission, Privacy Badger automatically blocks the advertiser from loading any more content in your browser. To the advertiser, it looks as though you suddenly disappeared.

• Show your users how to click the “install button” to install Privacy Badger.

Tip! Make sure your computer doesn’t already have Privacy Badger installed by removing it from Google Chrome before this activity.

• Ask participants to review the Privacy Badger intro slides with you. Go over what the different coloured sliders mean. Browse a few community-appropriate sites to feed Privacy Badger, then check back on which trackers were blocked.

• Demonstrate how the Privacy Badger icon changes colour as it works to block trackers.

• Ask users to add the Privacy Badger extension, browse some pages and experiment on their own!

Offline Activity: Creating Strong Passwords

[15 minutes]

• Share the xkcd comic strip above with your participants. Share that what makes a password easily guessed by machines (and hard for humans to remember!) is picking common words, even if you’re swapping numbers for letters.

• Encourage your participants to try this password generator. Let participants know they can also do this offline, by picking four random common dictionary words and putting them together.

• Discuss what you can do to make sure the words are truly random. For instance, you could try noun, verb, adjective.

Tip! If you have a pair of dice, try Diceware. Its word list includes 8,000 English words, preceded by 5-digit numbers. How it works: roll the pair of dice 5 times and add the matching word to your passphrase. Repeat several times to add more words and make your password stronger.

• Hold a discussion with your participants.

• Which passwords are easiest to remember? Why?

• Which might be easiest to guess? Why?

• What other tips might you have for protecting your online accounts?

• Enabling two-factor identification

• Using password managers

• Making sure to use different passwords for each account.

Tip! There are lots of privacy tips to share. Create a handout with useful resources or tips and tricks. Here are some sources to look at:

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

Hacker Cards

[10 minutes]

• Now let’s put our knowledge to the test!

• Hand out this privacy card game: https://thimbleprojects.org/mozillalearning/308795/

• Tell your participants they may come across a concept we didn’t cover in class. If they find a card they’d like to discuss, ask them to raise their hands.

Tip! If you prefer to save questions for group discussion at the end of this activity, ask your users to write the questions down.

Wrap-up and Reflection

[5 min]

• Ask participants: what did you learn that you didn’t know before? What surprised you?

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

All the Sticky Notes

Description

In this offline/online activity combo, participants explore how some digital images are made of pixels and how those images are structured and displayed. They discuss what else they would like to communicate online and create their own visual communication tool to do so: a piece of pixel art or a web sticker. They create web stickers first in analogue format and recreate them with digital tools. Participants add their stickers to their own websites (if they built sites in the WRITE activities) or try emailing them or posting them on social media.

Learning Objectives

• Define the term ‘pixel’.

• Explain how bitmaps determine screen resolution.

• Create pixel images online and offline.

Time Required

45 minutes to 1 hour depending on group size

Target Audience

Can be adapted for audiences aged 13 and up; with varying levels of web experience

Materials

• Laptop with an internet connection

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

• Whiteboard, flipchart or paper

• Multicoloured sticky notes

• Pencil or pen

• Adhesive tape

Web Literacy Skills

• Design

• Remixing

• Sharing

• Connecting

• Evaluating

21st Century Skills

• Communication

• Collaboration

• Creativity

Introduction

[1 min]

• Explain: we’ll talk about how computers create and store images using lots of little bits of colour and how we use those images to communicate online. And we’ll create some very simple images, in both analogue and digital format.

Pixels

[5-10 min]

• Ask participants: Who has heard the term “pixel” before? What is a pixel? What do you know about them? Tip! You may need to explain the difference between the computing term and Google’s Pixel smartphone product.

• Explain: The term “pixel” comes from the English words Picture Element. It is the smallest possible element, the smallest unit of information in a digital image.

• They appear on the computer screen as white or coloured points of light, or as points that are not lit and appear black.

• Creating images from many tiny elements is not a new idea! Let’s look at and talk about some examples.

• Ask participants: what are the similarities and differences in the following images? What is the smallest element that makes up each image? (you can mention artist George Seurat’s colour blending and layered brushstrokes, Chuck Close uses brushstrokes but within a grid, the Space Invaders video game has no blending or layering, and you can see a strong grid)

Screens, Bitmaps, Resolution

[5-10 min]

• Ask participants: when artists like Chuck Close and George Seurat create an image, what are they working on? What is the surface they work on? (Answers may include: paper, canvas, wood, walls for muralists, etc.)

• Point out that, in the real world, these items always have measurable dimensions — whether tiny, small or as large as the side of a building.

• When we look at digital images: what is the surface? What is the digital equivalent of a canvas or sheet of paper? (Answers: the screens of our computer monitors or phones or laptops or TVs.)

• Point out that, like paper or canvas, screens also have physical dimensions (for example, the height and width of the smartphone or computer screen).

• In addition, screens have digital constraints. Each screen has a maximum number of pixels available to display images. This is called screen resolution. It is expressed in two dimensions, width and height in pixels. Examples:

• 1280 x 800

• 1024 x 640

• Note that there is no fixed official measure for a pixel. It depends on the physical dimensions of the screen and the screen resolution.

• A giant billboard in Times Square may have a pixel size of 12 inches by 12 inches, and your smartwatch will have a microscopic pixel size.

• Explain to participants that when we use computers to create or display an image made from many pixels, the computer uses a grid — a matrix of pixels, called a bitmap, to organise the visual information.

• Each “bit” of information in the image, each pixel, has its own unique location on the grid or “map”.

• This holds for digital photographs as well as digital artworks or images — such as logos or illustrations — created from scratch.

• Here is an example, an image of a hedgehog and a close-up of the pixels that make up the eye:

• Like a display screen, an image also has resolution — the total number of pixels in the whole image.

• We calculate an image’s resolution by multiplying the width and height of the bitmap.

• Ask participants: who has heard the term “low resolution”? Or “high resolution”? What does that mean? (answers: low resolution means an image with fewer pixels, high resolution means an image with more pixels. The more pixels there are in the image, the more information and detail we get.)

Offline: Analogue Pixel Art

[15-20 min]

• Explain to participants that they will create some art using pixels, but in an analogue way. They will create an image they can later turn into digital format for use on the web.

• Briefly discuss visual communication online: are there ways to use images to communicate with other people online? (answers here may include: Facebook’s like button, emojis, avatars, etc.) What are some examples? How and what do these images say? Is there something you want to communicate but no image exists for it yet? What could it be? What kind of communication would you like to see more or less of online?

• Explain the activity constraints: since we don’t have all day, we’ll probably use a smaller bitmap to create a low-resolution image, something without many pixels. Here’s a familiar example:

• To prepare, you can assign different bitmap sizes to different groups or invite groups to pick the size — do they want to work with a 5x5 grid? A 10x10 grid? A 25x25 grid?

Tip! Ask users to consider how many pixels they need to create a legible image. You can also ask them to do a bit of maths — how many pixels will they need for each option?

• Move participants into smaller groups (i.e. 3 or 4).

• Encourage participants, as a group, to think about what they would like to communicate with their image (and, if it’s an option, what grid size they’re working with).

• Encourage “yes” and brainstorming — welcome lots of ideas, don’t be too quick to dismiss.*

• Invite them to plan the idea on a whiteboard, flipchart or scrap paper.

Tip! Grid notebook paper can work well here.

• Ask participants to use adhesive tape to lay out the pixel grid.

• Hand out a big pile of multicoloured sticky notes or multicoloured paper squares cut for each group. If you like, you can offer them the option of cutting them down to smaller pixel sizes.

• Give groups about 10 minutes to build the art from their sticky notes or paper.

• Take photos of each group’s finished product, in case there’s a tabletop catastrophe later.

• Get the whole group’s attention and have everyone view each creation, while the group talks about what they made, what they want to communicate, their process and any other ideas.

• To wrap up, ask participants about the process:

• How did it feel to build art with blocks of colour instead of drawing or painting on a blank page or canvas from scratch?

• What were the challenges?

• Were you surprised by how much you can communicate with pixels?

• How did resolution come into play? How did the colour factor come in?

Online: Digital Pixel Art

[15-20 min]

• Explain to participants that they will use a web-based tool to create their own digital versions of the analogue pixel art they just created. You can use technology to draw and paint, not just use your camera to record.

• Direct them to https://make8bitart.com/

• Optional: discuss the concept of “8-bit”.

• Demonstrate how to use the colour picker, how to draw on the canvas and how to erase the pixels they don’t want.

• Show how selecting the brush size can help them quickly fill larger areas.

• Demonstrate how to save as a png. If participants are new to using computers, be aware they may need step-by-step instructions.

• Optional: explain that the png format allows transparent pixels, which a .jpg, an older format, does not. Transparent pixels are useful for a sticker, since there is no background in the image, making it look as if it was cut out and placed wherever you want, like a real-life sticker (IRL - In Real Life).

• Give users 5 minutes to replicate their analogue stickers — this shouldn’t take long, since the stickers have already been designed!

• Invite them to post the stickers on social media, send them by email or add the stickers to their own websites.

• If there is interest, let users play with the software and create new stickers.

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?

Crowdsourcing on the Web

Skills: Contributing, Sharing, Evaluating, Connecting, Open Practice, Collaboration, Communication, Problem-solving

Description

In this activity, participants will explore how many individuals can work together on the same learning or discovery project, using the web as a collaboration tool. Participants will briefly discuss how the web and other digital tools have increased the amount of information online, as well as potential human resources. They will also explore the notion of crowdsourcing and help with a research study using the Zooniverse citizen-science platform (or another platform — the facilitator’s choice).

Learning Objectives

• Explain the term “crowdsourcing” and how it contributes to online information.

• Collaborate online to contribute information.

Time Required

45 minutes to 1 hour depending on group size

Target Audience

Can be adapted for audiences aged 13 and up; with varying levels of web experience.

Materials

• Laptop with an internet connection.

• A computer/projector set up for demonstration.

• Two sets of perhaps 50 to 60 similar images, each printed on an individual card (you can print a grid of images and cut them up). These can be landscapes, photos of people, photos of animals or insects.

Web Literacy Skills

• Contributing

• Sharing

• Evaluating

• Connecting

• Open Practice

21st Century Skills

• Collaboration

• Communication

• Problem-solving

Introduction

[10 min]

• Ask participants: How are we collecting and storing information in the digital age using the web? How is this different from what was done in the past? For example, ask:

• Who has used a film camera? What is the difference between a film camera and a digital camera? (Digital cameras let you take and store lots of photos, probably far more than you would with a film camera.)

• Other examples might be: emails vs letters, tweets or Facebook posts vs conversations by phone or in person.

• Along with the rapid, expansive growth of the web and computing, we also have new digital tools and systems (like digital cameras and telescopes, like sensors that track the weather) to collect more and more data about our environment, about us.

• Explain that much of this information is added or uploaded to the web — sometimes automatically (web-based email, tweets), sometimes by the author or owner, where it is stored on servers and can be accessed/accessible by anyone with permissions.

• Summarise: far more information is easy to make and capture digitally. We have more networked devices for collecting and creating information, and we can automate the collection and storage of all these digital files.

• Ask participants: what other kinds of resources are on the web, besides information? Have you ever thought of yourself as a networked resource? What can you offer other people on the web?

Tip! If participants are struggling to find what they offer, here are some general ways people can contribute:

Teach something (the instructables site, YouTube tutorials). Help evaluate something; give your opinion, comment or assessment of something (citizen-science projects, broader comments as reviews). Share an idea, experience or insight (blog, community forum for hobbies, medical issues, etc). Create your own new content (YouTube, SoundCloud). Lend your computer’s processing power to help do something when you’re not using it (volunteer distributed computing).

• There is an enormous community of web users, people of different backgrounds and ages, living in different places all over the world, who have skills or insights or time they may be willing to share. There are billions of web users and lots of potential.

• Until the web, there was no easy way to access this collective human resource, to bring people together to share skills or work or learn together.

• Today we’ll look at some ways to collaborate and work with many other people on the web, and to help with the challenges and possibilities of all this digital information. But let’s start with an offline experience to warm up!

Offline: Analogue Crowdsourcing

[15-20 min]

• For this activity, you will need two sets of perhaps 50 to 60 similar images, each printed on an individual card (you can print a grid of images and cut them up). These can be landscapes, photos of people, photos of animals or insects. The images should all be similar, but with some differences. Here is an example:

• Select a volunteer or pair of volunteers to be partners or an individual worker (no more than 2 here). Provide that participant or participants with one set of cards.

• The rest of the participants — these should be the majority of those in your session — are your crowd. Split the second set of images evenly among all these participants — each should receive 3 or 4.

• Ask a question about the set of images — in the ladybird example, ask how many spots there are on each one. Ask the individual workers and the group workers to do the task and compile their data. Give each group a sheet to record the results. Ask participants to set aside any images they cannot interpret.

Tip! The answers may not be straightforward for every image — there may be no spots, they may see some but not all of the spots on a particular insect, or it may not be possible to identify.

• The larger group will probably finish the task first! Whichever group finishes first, ask them to assess the “not possible” pile together — can we make a decision together — this should be a quick review process.

• When one of the groups is done and has assessed all the images, stop the activity for all groups.

• Ask participants:

• What is it like to do this task?

• Why was it faster for one group compared to the others?

• What special skills did they need for this task?

• What were the challenges for each group?

• What insights did the larger group have about the “not possible to identify” photos — did the others see something or know something that the first person who looked at the image did not?

• Explain that the larger group has just carried out a “crowdsourcing” activity — each person did a small task — assessing a bit of data — that contributed to a larger task — understanding our whole photo collection. This project was done faster by the larger group than by the individual or pair.

• There are bigger tasks, especially in scientific research, that can harness the power of online crowdsourcing at scale to assess lots and lots of data, the kind that is collected at large scales, exactly as we discussed at the start of the session.

• Let participants know that, next, they will use the web to see how they can take part in real scientific research online — they will become citizen scientists or researchers, as part of an effort to encourage more people to participate and be part of scientific discovery.

Online: Zooniverse

[25-30 min]

• For this activity, participants will take part in some crowdsourced scientific research using Zooniverse (or another platform, as selected by the facilitator). Depending on time, there are two options here:

• The facilitator selects a project in advance and walks users step by step through how to participate (see the example below) OR

• Users explore the collection of projects on Zooniverse and select one (or more) they find most interesting.

• Note that users do not need to log in to use Zooniverse, though they may do so if they want to create an account.

• Explain that Zooniverse is an online platform where researchers of all kinds can host their data, so participants can help them.

• You don’t need special skills to help, just interest. The kinds of things you can do for each project are different. For example:

• You might look at an image and tag a feature/item or count the number of items present. You might answer questions about the image and assess an image for certain qualities.

• You might be transcribing information from the image in analogue format.

• Note in this section about checking and verifiying– that more than one person screens each image or piece of data.

• Project Demonstration

Tip! The facilitator should do this and, if possible, have their screen projected so all participants can see.

• Go to Zooniverse — https://www.zooniverse.org

• Go to the project page:

• Explain to participants that Zooniverse is a platform hosting lots of research data that participants like you can help classify or assess, contributing to real-world research!

• Select a project from the options on the page and click to be taken to the project page. For example, this is the home page of a project called Elephant Expedition.

• Since all projects are on the Zooniverse platform, the interface is similar for each project.

• There is a pop-up tutorial with several steps. Use the arrow key to explore the steps.

• And there is a space to do the classification work.

• Show participants how you can complete a single assessment task.

• Point out that they can explore the community conversations under “TALK” and learn more about the project under “ABOUT”.

• Do the activity! Give participants 15 to 20 minutes to contribute to one or more projects on Zooniverse.

Reflection and Wrap-up

[5-10 min]

• Ask participants a few questions about their experience and encourage a discussion. Sample questions below:

• What was it like to do this task? What was surprising? What was a challenge?

• Did you have any questions about the task?

• Why do researchers need help like this?

• Why are some tasks better suited to humans? Do you think a computer could do this work?

• How many images/files/videos did your project have?

• How many other people contributed?

• How do you feel about your contribution?

Learning Experience Reflection

[5 min]

• What did you like about this activity?

• If you could teach this activity to a specific audience, what would you change in the process, structure or content to better meet that audience’s needs?