Preparation

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.

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 students 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 students can bookmark websites in their browsers.

Be sure students 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.

Introduction

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 students 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 students 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.

Break Down the Project

Visit today's Thimble project called #allthestickerz. Take students 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 students that there is a tutorial inside the Thimble project that will help us do each step. Also, give students 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 students 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 students 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 students 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 students how the tutorial is broken up into steps and tell them which steps you'll do when. Chunk the project to help students 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 students of community norms about Web content and images in your community. Help students identify safe online habits, as well as good digital citizenship practices, while creating images and annotating webpages. Invite students 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!

Make Pixel Art

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 students 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.

Remix the Thimble Project

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 students 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.

Paste Your Stickers on the Web

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 students' 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.

Reflection

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

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.

• This was a pretty involved project. How do you feel after completing it? How did it compare to other projects we've done?
• 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?
• What seemed easiest in this project?
• What seemed most difficult?
• 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?
• Do you think we can communicate complex ideas through images like the ones we made in this project? Why or why not?
• How did it feel to remix someone else's webpage with your stickers and the goggles?
• How did it feel to comment on other people's webpages using the stickers you made?
• How do you feel about sharing your stickers with others? Would you be happy or upset if someone else uses them? Why?
• What if everything was shared openly on the Web? Would that be the Web you want? Why or why not?
• 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?
• 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?
• What parts of this project would you do again? Which parts would you avoid? Why?
• What did you learn?

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.