Web Literacy Basics II | #allthestickerz

• 1. Preparation

  1. Create their own emoji stickers using websites for making online art.
  2. Save their stickers.
  3. Upload their stickers to this Thimble project for remix.
  4. Use the Web X-Ray Goggles to add their stickers to other webpages.
  5. Reflect on their learning.

  ---

  You should...

  Do the activity on your own to become familiar with making Web-native pixel art, dragging images into the Thimble interface, and using the Web X-Ray Goggles.

  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 can also try this module on embedding media in a webpage from the Mozilla Developer Network Learning Area.

  This is complex and multi-part project that you may want to split up over several classes, sessions, workshops, or events. Please do work through the activity and chunk it appropriately for your community.

  You should also feel free to adapt bits and pieces of this project to teach learners how to make Web-native pixel art, for example, without using all of the project.

  You can also reimagine this project as a lo-fi or no-fi activity about community participation by having learners create mock-up, paper prototype websites, as well as the stickers they might use to comment on those sites.

  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.

  Make sure learners can bookmark websites in their browsers.

  Be sure learners can save the art they make somewhere on their devices.

  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

  25 minutes

  Welcome your learners and explain that today we'll begin a project to make our own Web stickers that we can paste on our favorite websites using Mozilla's Thimble and Web X-Ray Goggle tools.

  Explain that a web sticker, similar to emojis or emoticons, is a small image file that captures an emotion, serves as a reaction, or is used as a metaphorical symbol.

  Next, explain that we'll begin with a hands-on activity to explore the idea of pixel art. Ask learners if anyone knows what a pixel is or what 8-bit art looks like. Facilitate conversation to help the group come to a common understanding of pixels as building blocks of light that our devices and screens use to display images.

  Next, explain that we're going to practice making pixel art with Post-Its or chopped up squares of construction paper. To do so,

  1. Get learners into groups of 3 or 4.
  2. Pass out a big pile of multi-colored Post-Its or chopped up squares of multicolored construction paper to each group.
  3. Invite group members to brainstorm a piece of "pixel" art they could create using the Post-Its or paper. Give them about 3-5 minutes to agree on an idea.
  4. Give groups about 10 minutes to build their art from their Post-Its or paper.
  5. Take pictures of each group's finished product in case there's a table-bumping catastrophe later in class.
  6. Gather the whole group's attention again after that.
  7. Ask learners to very carefully take a gallery walk around the room to see one another's art. Offer 3-5 minutes for the walk.

  After the gallery walk, facilitate a very brief reflective discussion, asking learners how it felt to build art with blocks of color instead of having to draw or paint on a blank page or canvas from scratch. Try to help learners develop the idea that we can all be successful building stickers with pixel art today and that our work online won't be very different or much more difficult than playing with paper as we just did.

• 3. Breaking Down the Project

  10 minutes

  Visit today's Thimble project called #allthestickerz. Take learners through the page on your projected computer. Explain that our goal is to make Web art stickers that we can share with others and use to mark-up, decorate, and comment on other Web pages using a remix tool called the Web X-Ray Goggles. There are three big parts to this project that we'll tackle together in order.

  1. First, we'll make our sticker images using tools on the Web.
  2. Second, we'll remix this Thimble page to show our own stickers.
  3. Third, we'll use the Web X-Ray Goggles to put our stickers on other webpages.

  Tell learners that there is a tutorial inside the Thimble project that will help us do each step. Also, give learners an idea of how you will split up and pace the project so that they don't feel overwhelmed by all the steps at once. Be ready to help learners who experience processing, reading, and writing difficulties to complete the project with your help, additional scaffolding, and/or peer support. It's fine to have learners work in pairs on this project so long as they and you share expectations about both partners' inclusion and participation.

  Hit the green "Remix" button on the Thimble project. This will take you and your learners into the code of the page. Talk through the structure of the Thimble interface.

  • The files we'll use in the project, eventually including our own stickers, live in the left sidebar called "FILES."
  • We can edit the code and change the webpage in the middle window.
  • We can see a preview of the webpage, as well as the tutorial for the activity, in the window to the right.

  Answer any questions about the interface that come up.

  Click on the "Tutorial" tab in the upper right-hand part of the screen. Show learners how the tutorial is broken up into steps and tell them which steps you'll do when. Chunk the project to help learners see that there are specific beginning and ending points built in, such as "Make pixel art," "Put our art into the Thimble project," and "Put our stickers on other webpages."

  This is also a good time to remind learners of community norms about Web content and images in your community. Help learners identify safe online habits, as well as good digital citizenship practices, while creating images and annotating webpages. Invite learners to create awesome work that doesn't unjustly make others uncomfortable in your shared learning space.

  Once you feel like learners have a solid understanding of how the project will be paced so as not to overwhelm them, go on to make your art!

• 4. Making Pixel Art

  45 minutes

  Steps 1-4 of the tutorial take learners through making a sticker, resizing it, and exporting it for use later in the project.

  Think-aloud through the steps using whichever art-making tool you suggest for your community. Demonstrate how to make, re-size, and export a simple sticker. Assure learners that you, peers, and the tutorial can help them accomplish those steps, as well.

  Answer any questions about making the stickers and then set learners loose to create at least 2 stickers each. Budget enough time for resizing and exporting. Also, help learners make sure that they know where their files will be saved on their devices or, say, jump drives.

  If those files can stay on those machines until the next class, session, workshop, or event, consider pausing here and resuming next class or session.

• 5. Remixing the Thimble Project

  30 minutes

  Steps 5-8 of the tutorial help learners get their images into the Thimble project. Those steps also teach learners how to publish their remixed Thimble projects and get the URLs, or Web addresses, of their stickers for us later on with the Web X-Ray Goggles.

  Demo the process of importing your stickers, publishing your Thimble make, and finding your stickers URLs for your learners. Answer any questions they have about the process, and then give them the balance of available time to get their own stickers into their own, published remixes.

  Once learners have published their remixed projects, you may want to pause again and take on the last part of the project during your next time together as a group.

• 6. Pasting Stickers on the Web

  30 minutes

  Steps 9 and 10 of the tutorial help learners remix other webpages using their stickers. They will need to grab their stickers' URLs, or Web addresses, from their published Thimble projects. You and the tutorial can both remind them of that before you begin.

  Guide your community through installing the Web X-Ray Goggles in learners' browsers.

  Then walk learners through the process of using the goggles to remix a webpage and add your stickers to it.

  When you demo those steps, be sure also to publish your Web X-Ray Goggles remixes so you can get their URLs. You will need those URLs for Step 10 when you update your Thimble project to share the pages that have your stickers.

  Answer any questions that come up and then give learners the rest of the available time to remix favorite webpages with their stickers and to update the links on the bottom of their Thimble projects.

• 7. Reflection and Assessment

  30 minutes

  Once learners have had the chance to update their Thimble projects with their Web X-Ray Goggles remixes, facilitate a reflective discussion of learners' experiences on the Web.

  Before you begin, remind learners 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.

  1. This was a pretty involved project. How do you feel after completing it? How did it compare to other projects we've done?
  2. How did it feel to begin with pixel art instead of having to draw or paint from scratch? How did pixel art support your work? How did pixel art limit your work?
  3. What seemed easiest in this project?
  4. What seemed most difficult?
  5. Why do we like using stickers, emojis, emoticons, and other symbols like kawaii faces to communicate on the Web? What do they do for us that words don't?
  6. Do you think we can communicate complex ideas through images like the ones we made in this project? Why or why not?
  7. How did it feel to remix someone else's webpage with your stickers and the goggles?
  8. How did it feel to comment on other people's webpages using the stickers you made?
  9. How do you feel about sharing your stickers with others? Would you be happy or upset if someone else uses them? Why?
  10. What if everything was shared openly on the Web? Would that be the Web you want? Why or why not?
  11. What if you couldn't make anything or use anything someone else made on the Web? Would that be the Web you want? Why or why not?
  12. What do you think is a good balance between openness or remix and private property in a community like ours or in a community like the Web?
  13. What parts of this project would you do again? Which parts would you avoid? Why?
  14. What did you learn?

  You may ask learners to document or record their answers for assessment. Be sure to help each learner 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 learner's expression.

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

  Next activity→Who Am I?
  
  
  

• 8. Optional: Badging

  By creating pixel art stickers, publish them for others, and use them to annotate and remix online content you will learn how to code, compose, contribute, connect, design, evaluate, use open practice, remix, share, and synthesize.

  Steps to complete this task:

  1. Go to this Thimble project and click the "Remix" button. This will open Thimble, a tool that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. You will see web stickers we have created to get you started.
  2. Click on “Tutorial”.
  3. Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
  4. Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."

  Evidence:

  Share a link to your new web stickers and where you have used them on the web or upload a screenshot of your creation.

  21st Century Skills:

  If you successfully complete the above, you will practice the following skills:

  • Collaboration
  • Communication
  • Creativity
  • Problem solving

  The skills that you have learned through this activity can be recognized and validated by earning credentials or badges.

  Through a partnership with the Open Badges Academy (OBA), you can earn over 15 Web Literacy and 21st Century Skills credentials or badges. Once you earn them, you can share the credentials/badges via your social media or resume or use them to connect with others.

  If you are interested in applying for badges, visit the OBA and/or reach out to Matt Rogers or DigitalMe to schedule a demonstration.