Mozilla Webmaker Part 2: Web Tools

Mozilla, the software community that produces free Web browser Firefox has a pretty cool new(ish) website, Mozilla Webmaker. In the last post in this series on Mozilla Webmaker, I went over some reasons why you might want to use Webmaker for a class assignment. In this post, I’ll cover a few of the nifty Mozilla tools available. Next week, in the final post in this series, I’ll talk about some of the project assignments available and how to go about making your own.

Mozilla is a community dedicated to helping improve Web literacy. To this end, they have been developing tools to help you understand and build websites. Since Mozilla is pro open-Web, these tools are geared around being able to re-mix content that you find on the web, through viewing your code and site at the same time as you write it, editing online videos, and seeing and changing the code of any website and saving and/or sharing a copy.



Here’s an example of Thimble open in my browser (Chrome). You can see the html code on the left, and on the right, the webpage that the code produces.

Thimble is a webpage-building tool that shows you your code and the “live” page you’re building at the same time via a split screen. You can either start from scratch, or you can remix existing projects. Having a live version of the website you are building is a great help to learning how to code, because it helps you figure out how what you’ve written code-wise translates into as the page itself.

A tool like this is really useful for any webpage-building project you might assign, as it removes the step of having to switch back and forth between, say, the text file you’re writing your code in, and the browser you’re viewing your code in. Many of the projects available in Mozilla Webmaker involve using Thimble to build a webpage.

The W&M homepage looks a little odd without it's image -- I used X-Ray Goggles to remove it, and the reddish highlighted part of the window is where my cursor is, showing the kind of element that portion of the webpage is.

The W&M homepage looks a little odd without its main image — I used X-Ray Goggles to remove it, and the reddish highlighted part of the window is where my cursor is. You can see in the lower right of the image the black rectangle explaining that portion of the webpage.

X-Ray Goggles

X-Ray Goggles let you examine the source code of websites.  This means that when you activate it (by clicking a button), when you hover your cursor over an element of a webpage, X-Ray Goggles tells you what kind of element it is, and the html code. This tool also lets you remix elements of a webpage, for example, replacing one image with another. Note that you don’t actually change the image on the actual webpage that other people see (you don’t have access to their servers, and, well, that would not be a nice thing to do anyway), but you can save your own copy of your edited version.

X-Ray Goggles are nice for people learning html and CSS because it lets you examine websites and see how they “work.” If you saw something formatted in a way that you didn’t understand, you could turn on your goggles and see what code makes it tick.

Here's an example of Popcorn's editing window.  I added the thought bubble to this YouTube video. It took me all of two minutes to figure out how to do this.

Here’s an example of PopcornMaker’s editing window. I added the thought bubble to this YouTube video. It took me all of two minutes to figure out how to do this

Mozilla PopcornMaker

Mozilla Popcorn is a “storytelling tool” that lets you interact with online videos through annotating them and other kinds of editing. This is the tool that I personally am most excited about. Here is what the website says:

Popcorn lets users link social media, news feeds, data visualizations and other content directly to moving images. The result is a new form of multimedia storytelling that lives and breathes more like the web itself: interactive, social, and unique each time.

You can add text, links, maps, speech bubbles, and other things, all layered on the video.  You can also edit video, including cutting and looping frames. It is very cool, and worth checking out.

I can imagine using this tool for all kinds of different media-based assignments for a class.  Specifically, I think that I would use it to have students do shot-by-shot scene analyses for a film course, or have them critique an advertisement in a women’s studies course. I think that as long as you used clips in a course, you could think of something easy for students to do that could help them unpack what goes into making/editing a video or film both through analyzing a clip and through editing the clip themselves.

About Kim Mann

Kim Mann is the editor and a writer for the Academic Technology Blog. She earned her BA in English from the University of Minnesota in 2003 and her MA in American Studies from William & Mary in 2009, and her PhD in American Studies at the College in 2014. Her research is on technology, the interface, and the body in mid-twentieth century science fiction.