Web Literacy Basics II | 7. Who Am I?

• 1. Preparation

  15 minutes

  Do the activity on your own to become familiar with basic collaborative and open research practices in the work.

  1. Follow this link to the Thimble project for this activity.
  2. Click on the green "Remix" button in the upper right-hand corner of the window to go into the project's code.
  3. Click on the "Tutorial" pane next to the "Preview" pane in the upper right-hand corner of the coding window.
  4. Follow the steps in the tutorial to complete the activity. You may also need to check back here and complete some of the steps in this lesson plan to successfully finish the Thimble project.

  You may also wish to set up accounts on Thimble that you can share with your learners. This will save time later when they are ready to remix today's project.

  Post the URL, or Web address, of today's project somewhere highly visible in your room. You may want to post it as a shortened link using a service like bit.ly.

• 2. Introduction

  5 minutes

  Welcome your learners and explain that today we'll solve an online mystery using reverse image search. Reverse image search uses pictures to find out where those pictures live online. We're going to use reverse image search to find out who is the subject of a mystery picture. Then we'll make our own "Who am I?" challenges for our friends to try solving. To accomplish those tasks, we'll

  1. Use a common image to run a reverse image search and find information about its subject.
  2. Add what we learn to a webpage about that subject on Thimble, Mozilla's online code editor.
  3. Remix that webpage with a new picture to create another "Who am I?" challenge for our friends to solve.

  We'll work mostly in Thimble today and use a tutorial inside the "Who am I?" project to guide us through all the steps. Students can go to the project here.

• 3. Conducting a Reverse Image Search

  15 minutes

  Once students arrive at today's project, they should hit the green "Remix" button in the upper right-hand corner to access its code and tutorial. Students can click on the gray "Tutorial" tab above the preview window on the right side of the screen to find step-by-step instructions for today's activity.

  You may want to walk through those steps on your projected computer and do a think-aloud with the class to help student orient themselves to the Thimble interface and the tutorial. The instructions for the reverse image search say

  1. Click on the gray "Publish" button in the upper right-hand corner of this page. Give the page a short description like, "My Who Am I? project page," and then confirm publication This will give you a link you can click to open the file called index.html in a new browser tab.
  2. Right-click or command-click the picture in the webpage that opens after publication. Choose, "Copy image address," or, "Copy image URL."
  3. Go to an image search engine like Google Images.
  4. Inside the search box, click on the camera icon. This will launch the reverse image search.
  5. Paste the image address, or URL, you copied into the search box and hit return.
  6. Check out your search results. Each one should point you to a possible source of your image. Click through to a few links that seem appropriate and safe for your community, club, or classroom. What do you learn about the image, its subject, and its author?

• 4. Adding Information to a Webpage

  30 minutes

  Next, help students follow these steps from the tutorial to add information about the picture's subject to the "Who am I?" webpage in Thimble. Again, if it seems helpful, run through these steps for the class using your projected computer to model editing the index.html file.

  1. Click on the file called index.html in the left sidebar called "FILES."
  2. Go to line 45 and replace the . . . . with your answer to the question, "Who am I?"
  3. Go to line 47 and replace the . . . . with information about the subject of the image.
  4. Go to line 49 . The a tag here is a link tag. Each a tag takes an href attribute that tells the link the address, or URL, of the webpage it should go to when clicked. Change href="" by copying and pasting the address, or URL, of a webpage you read in between the quotation marks, like so: href="[my webpage address]" . You don't need the brackets, though, just the web address.

• 5. Creating Your Own "Who Am I?" Challenge

  30 minutes

  Once students have published their completed "Who am I?" projects, invite them to create their own remixed challenges for friends using favorite heroes or characters that might not be known to everyone in the room. Model the steps in the tutorial for students who need help creating new pages in Thimble.

  1. Hit publish again to save your completed Who am I? webpage.
  2. Click on the link Thimble gives you to your finished project.
  3. Once you get to your completed project, click on the green "Remix" button in the upper right-hand corner. This will take you back into the code of a brand new version of the page.
  4. Change the name of this project by clicking on its name in the upper left-hand corner of the coding screen. The title is by the little Thimble icon in that corner. Change the name to something like, "My New Who am I? Challenge."
  5. Open an image search engine again.
  6. Find a picture of one of your heroes or favorite characters, but make it a hero or character that other people might not know.
  7. Once you find a picture to use, click through all the thumbnails and get to the picture on its original webpage.
  8. Right-click or command-click the picture and copy irs address or URL.
  9. Go back to index.html.
  10. Go to line 37.
  11. Find the img, or image, tag. This tag takes a src, or source, attribute to tell the page where its images live online. Delete the original image name who-am-i-1.jpg.
  12. Paste in the address of your new image.
  13. Delete your answers from the "Who am I?" box next to the picture.
  14. Publish your project and give it a description.
  15. Share the link you get with a friend who's ready to take on your new Who am I? challenge.

• 6. Reflection

  10 minutes

  After students finish remixing their own challenges, facilitate a reflective discussion about today's work.

  Before you begin, remind students of community norms about kindness and encourage them to talk about their own learning, not about other people.

  Use questions like these or develop your own.

  • What did you learn about search today? When and how can reverse image searches be helpful?
  • Did you stump your friend? What did you enjoy about making your own challenge? What seemed difficult about remixing your own webpage in Thimble?
  • Besides using words and pictures, how else do you wish you could search online?
  • What other parts of webpages like this one do you want to learn how to code next?

  You may ask students to document or record their answers for assessment. Be sure to help each student find a way to share that works for her, as well as for you, so you can gauge her learning about today's topic without a particular tool (like paper/pencil) blocking a student's expression.

  If you or your learners are curious to learn more, check out this Introduction to HTML from the Mozilla Developer Network Learning Area.

  Next --> Fair Use Free-For-All