Web Literacy Basics II | 5. Pixel Portrait

• 1. Preparation

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

  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 create our own pixel and use it in a webpage. Pixel art is that blocky kind of art we sometimes associate with old video games. Using online tools, we'll

  • Make our own pixel art.
  • Import it into Thimble, Mozilla's online code editor.
  • Insert our art into a webpage we can remix on Thimble.

  We'll use pixel art because it lets us build a picture block-by-block. We can all be successful with it without worrying about making the perfect drawing or painting or something.

• 3. Picking a Tool

  15 minutes

  Use your projected computer to show your students today's "Pixel Portrait" project on Thimble.

  Explain that we'll make our own pixel art to go inside the picture frame currently occupied by space-cat.

  To do so, each of us will use one of these tools:

  • make8bitart.com - This is a bare-bones pixel-art maker that exports handy .png images. Typically, .png images can have transparent backgrounds to match webpages and are otherwise very editable in other programs.
  • piq.codeus.net - this one gives you more options than make8bitart.com, but exports simple bitmap images. Those bitmap (.bmp)images can be difficult to edit later.
  • piskelapp.com - you can save your work here if you login with your Google account, but you can also export versatile .png graphics.

  Give students about 10 minutes to play around and pick the websites they want to use.

  a

• 4. Making Art

  45 minutes

  Once students have each identified a website to use for today's project, set them loose creating their art.

  Invite students who have trouble finding inspiration to search for an image of a favorite game character, musician, or sports star, and to make a blocky portrait of that person.

  If you have students who struggle with picking or using one of the websites, invite them to join you for a quick tutorial or mini-lesson on one of the apps. You can also share a tutorial video like this one:

• 5. Exporting Art

  10 minutes

  After about 45 minutes of drawing time, gather the group's attention to make sure students know how to save their work.

  Saving with make8bitart.com:

  1. Learners should click on "import/save" and then choose "export art to .png".
  2. That command opens a pop-up window with a .png image of the user's artwork.
  3. Anyone using this site should drag that new picture to the desktop to save it.
  4. Students can leave these pictures on their computers' desktops or move them to their picture folders so long as they know where to find the pictures later in the project.

  Saving with piq.codeus.net:

  1. Learners should click on the old-school floppy disk icon at the bottom of the left menu bar.
  2. That command will open a normal dialog box for saving students' work.
  3. Students should save work to their desktop, downloads, or picture folders so they know where to look for their images later in the project.

  Saving with piskelapp.com:

  1. Students can save your work online if they login with Google accounts. However, even without a Google account, they can export handy .png graphics.
  2. Students should click on the icon that looks like an old-school floppy disk in the right sidebar.
  3. Then, they should pick the command, "EXPORT SPRITESHEET.
  4. After that, learners should choose "Download PNG."
  5. That command will download images into the downloads folder on students' computers.
  6. You should invite students to ask for help getting to that folder if they need it.
  7. Students can leave their images in their downloads folders or move them to their picture folders or computers' desktops so long as they know where to look for their images later in the project.

• 6. Importing Art into Thimble

  10 minutes

  The next two steps are described in detail in the tutorial pane of today's "Pixel Portrait" project on Thimble. Invite learners back to that page and ask them to hit the green "Remix" button in the upper right-hand corner of the page.

  This will bring them into the project's code.

  The code editor screen inside Thimble has three main parts:

  • A "FILES" sidebar on th left that holds all of a project's code and assets, like images.
  • A code editing pane in the middle where learners can change the project.
  • A preview and tutorial pane on the right with tabs that let learners switch back-and-forth between a preview of their web project and a tutorial that supports their learning.

  Give students a few minutes to help one another learn how to move back and forth between the parts of the interface and be sure they understand how to move between the preview and tutorial panes on the right.

  To import an image into today's project, all you need to do is drag an image file from the desktop or folder of a computer into the "FILES" sidebar in Thimble. Thimble will upload it automatically after that.

  Encourage students to help one another import their images into Thimble and help those who experience difficulty finding their files or who struggle with the interface.

• 7. Inserting Images into a Webpage

  10 minutes

  The tutorial pane can help learners with this step, as well.

  Students should go to line 26 of the file called index.html in Thimble. They can delete space-cat.png in that line and type in the name of their imported images instead. When they look back at the preview pane of the webpage, students should see their new art on the webpage in place of the old.

  Students should follow the last few steps in the tutorial to rename their images and publish their projects. Have students help one another and be ready to assist students who experience persistent problems with inserting their images or publishing their pages.

• 8. Reflection

  10 minutes

  After students finish the project, facilitate a reflective discussion of today's 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.

  • How did it feel to remix a page instead of starting from scratch?
  • How did it feel to make pixel art instead of beginning with drawing or painting?
  • Do you like sharing your work online? Why or why not?
  • What other kinds of art would you like to try making 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 or this module on embedding media on a webpage from the Mozilla Developer Network Learning Area.

  Next --> #allthestickerz