Intermediate Web Literacy II | Storytelling with Color

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Use sticky notes to label different pieces of colored paper with the emotions each color evokes for them.
  2. Learn how to mix colors online using the hex value and rgb methods.
  3. Each mix and document 5 colors that they love.
  4. Remix this Thimble project that uses a button to change the background color of a page so it includes their favotire colors.
  5. Share their remixes with partners who can click the button, find a color, and then type a story inspired by that color.
  6. Share their stories with partners.
  7. Reflect on their learning.

  ---

  You should...

  Work through today's activity to get a feel for how each of its parts - the HTML, CSS, and JavaScript - looks and for how those parts work together. Review this lesson plan, as well, to make sure you're comfortable facilitating it.

  Be sure to read through the lesson so you can familairize yourself with different kinds of HTML color codes, including rgb values and hexcodes.

  You don't need to be an expert on web colors to teach this lesson. Just be able to explain that developers use codes to create very specific mixes of red, green, and blue values to define each color online.

  Be sure to test your technology and Internet connectivity.

  Create a class account or several accounts for learners to use on Thimble, Mozilla's online code editor, and post the URL, or a shortened link, for today's project somewhere highly visible in the learning space.

  Gather construction paper in several different colors and enough sticky notes for each learner to use 5 or 6 in today's lesson. Post the different colored pieces of construction paper around the room and space them out with somewhat equal distances between them.

• 2. Annotating a Gallery Walk

  15 minutes

  Welcome your learners and explain that today we'll explore the connections between color, emotion, and storytelling. To begin, we're going to think about what different colors mean to us using an activity called a gallery walk. Here's how it goes:

  1. Give each learner a number of sticky notes equal to the number of different colored pieces of construction paper posted around the room.
  2. Ask learners to walk around the room and to stop by each piece of construction paper as they do so.
  3. Explain that at each piece of construction paper, each learner should write down all the emotions or feelings they connect with that color on a sticky note. Then each learner should post their sticky note on that piece of paper before going on to the next one.
  4. Give learners 5-10 minutes to make their way around the room.
  5. After everone has had a chance to post a sticky note on each piece of paper, take another 3-5 minutes for learners to walk around the gallery once more to read their classmates' notes.
  6. Finally, bring the group back together for a discussion of what learners learned.
  
  

  After the gallery walk ends, facilitate a brief, reflective discussion of what learners shared and discovered using questiins like these:

  • What kinds of emotions seemed especially connected to each color? Why do you think that's so?
  • Would anyone like to explain why they connected a certain color with a certain emotion?
  • How do you think people use color online and in real life to impact people's moods?
  • Do you think the connections between colors and emotions are things we learn from our society or things that are instinctual? Can anyone tell us about a connection between a color and an emotion or idea from another culture that is not the same as in our culture?

  Once several learners have had the chance to share their thinking with the group, ask learners to take their seats at their computers and to load the pen, or code example, for today's work in their browsers.

• 3. Mixing Colors on the Web

  10 minutes

  As learner play around with the pen, explain to them that you can mix nearly any color you want online. This gives you access to all kinds of emotions and feelings in the webpages you design and build.

  When picking and using colors, it's important to note that webpages use several different ways to name and use those colors. For example, let's say you want all of your paragraph text to be red.

  • You can use websafe color names like these. All broswers understand websafe color names and display them the same way. If you use a websafe color name, your HTML code might look like this: <p style="color:red;">red</p>. On a CSS stylesheet, the same display instructions would look like this instead: p { color: red; }.
  • You can also use hexcodes to define a color online. Hexcodes are six-character codes (preceded by a number sign) that use values from 0-9 and a-f, with 0 being the darkest value and f being the brightest. In a hexcode, the first two characters make up the red value, the middle two characters make up the green value, and the last pair of characters make up the blue value. You make different colors by adjusting the values in each pair, so something like #0336ac looks like this. If ever both characters in each pair, are the same, like in #224466, you can collapse a hexcode into three characters like so: #246. Here's an HTML example for our red paragraph: <p style="color:#ff0000;">red</p>. In CSS, it would look like this: p { color: #ff0000; } or p { color: #f00; }
  • Another way to mix colors online is to use rgb values - with rgb standing for "red green blue." There are 256 steps that each color can take in an rgb value. The first step is actually 0 and the last step is 255. These steps correspond to the levels of electrical current you can pass through a physical component like a low-voltage light emitting diode (LED) to create colors with light in the physical world. Using rgb values, 0 is the darkest step, and 255 is the brightest. When you use an rgb value for color, it looks like this: rgb(0, 0, 0). In HTML, our red paragraph would look like this: <p style="color:rgb(255, 0, 0);">red</p>. The CSS version of the same would look this way: p { color: rgb(255, 0, 0); }

  Bring learners attention back to this color-slider "pen," or code example, from Mark Lee. You can change the rgb value for each color and get the equivalent hexcode for that color at the same time to see how the two ways of naming a color relate to one another. The background of the pen will change to reflect the color you mix, as well.

  
  See the Pen rgb color sliders by Mark Lee (@leemark) on CodePen.

  Ask learners to create five colors they really love and to type or write them down for later use. There are also a lot of helpful color-pickers online, like this one from W3 schools, that you can share with your learners.

  After everyone has had a chance to mix and pick several colors, ask learners to load today's project in their browsers.

• 4. Storytelling with Color

  15 minutes

  First, invite learners to click the button on today's project to see how it changes the background color.

  Then ask learners to click the button one more time. Ask them to come up with a story inspired by the color that appears and to type that story in the editable box in the middle of the screen. learners can delete the original text inside the box.

  After that, let learners share their stories with their immediate neighbors.

  Once everyone has shared, ask learners to hit the "Remix" button in the upper right-hand corner of today's activity page. This will take them into Thimble, Mozilla's online code editor.

  Inside Thimble, learners can see the code for the webpage itself (index.html), as well as the CSS stylesheet (style.css) and JavaScript code (script.js) for the page. Those files are accessible in the left-hand FILES sidebar and can be edited in the central column of the page. A preview of what the webpage will look like when published is over on the right.

  At this point, ask learners to log-in to Thimble using their accounts or a class account you provide.

  Notice that the preview pane also has a "Tutorial" tab above it. Click on this tab to show learners the tutorial and then work through it with the group, inviting learners who feel comfortable doing so to work ahead.

  This tutorial will take learners through replacing the color values used on the page with the color values they mixed easrlier using our slider in step three, Mixing Colors on the Web.

  Syntax and punctuation will be especially important today, so help learners place their semi-colons and quotation marks when they have trouble.

  Once you and your learners have gone through the tutorial, ask them to hit "Publish" in the upper-right hand corner of the screen. This will give them a URL they can use to visit their own versions of this page and they can share the URL with friends and family, as well.

  Give learners a few minutes to visit each other's computers, to click through one another's color choices, and to type in a brief congratulatory message or color-inspired story without deleting others' previous messages.

  Finally, ask learners to gather again for a debrief on the lesson.

• 5. Reflection and Assessment

  5 minutes

  At the end of the lesson, use questions like these (or make your own!) to facilitate a brief, reflective discussion of the day's work.

  • Can you explain, in your own words, some of the ways to mix color online?
  • How did our JavaScript, stylesheet, and webpage work together today?
  • How do color and storytelling connect?
  • What does our work tell us about creativity and coding?
  • How should you think of color when you're building webpages?
  • How would this lesson have been different if you had to write it from scratch instead of remixing it?
  • What seemed easiest about today's work? Most difficult? Why?
  • How would you improve this lesson or project?

  You can record learners' responses for the purpose of assessment, as well, but be sure to do so in a way that doesn't disadvantage those who struggle with composing in any particular medium. For example, be ready to record spoken answers, as well as to read typed or written responses.

  Next activity→Creating a Storytelling Resource