The ImageSeek Mozilla Webmaker Teaching Kit

There is no shortage of online tutorials and guides on how to search for images on the web. To overly generalize, this boils down to “here is a list of sites, go there and type your keywords in a box”, with the added bits about how stealing is bad and a few links or videos from Creative Commons. You might get some power tips about using advanced search features.

To me this is not teaching how to search (as a strategy) but how to use search sites (as a skill). More than semantic word play, this is the difference between knowing how to hit something with a chisel and how to sculpt art with a chisel.

More than that, it’s easy to find images when you need specific subjects- like an image of a computer keyboard, a rhinoceros, a train engine, a knitting needle, a sunflower. Search engines are good at literal searches. You can easily find hundreds, thousands of images, and often the suitable ones right off the first screen of results.

But in writing online, blogging, presenting, media editing, web making, I often find = a need for images that communicate ideas, concepts, ones that communicate via metaphor, not literal depiction. What keywords might produce images that suggest a representation of concepts such as bravery, honesty, struggling to learn, complexity, aggression, trust? If you use these as literal keywords, you might get lucky, but the results are much more diverse. Or not relevant.

This is the idea behind ImageSeeking for Fantastic Visual Metaphors, a Teaching Kit I developed for Mozilla Webmaker. It should appear soon under the Search section of the Web Literacy Map.

Unlike most blog posts, this one is taking several sessions to compose, and it keeps getting longer! For those not wanting a bunch of background and technical warbling:

• ImageSeeking for Fantastic Visual Metaphors is a remixable “lesson plan” aimed at helping participants learn the art of searching for images. It includes:
  • How Do You Currently Search For Images? a separate Webmaker Activity for starting a session with having people show/share how they search now. It uses a Thimble itself remixed from one made (A Question From Zoltar) to generate a prompt with random generated varieties, and a hint that slowly materializes as an image.
  • A place to discuss Creative Commons, attribution, etc. This is left open to be remixed, since there are plenty of resources to point to – a few are in the kit. In looking at resources is how most of them focus on a message of “STEALING IS BAD!” rather than what I prefer- giving attribution is just the right thing to do, an act of paying it forward.
  • The ImageSeek “Tool” itself To me this is perhaps more like an interactive web worksheet, without the smell of ditto ink. It guides the process, but also acts as a way (if remixed) to save one’s work and demonstrate more than coming out with a single image at the end, but documenting the process.

One reason I am excited about the Mozilla Webmaker approach is that the lesson plans, the activities, the makes are not an end to a means, like a magic thing you just pull off the web and distribute (like worksheets). Via an architecture and philosophy they are the start, the remix button is an invitation to modify, customize, and share.

Yikes, even my summary is long. I need a tl;dr for my tl;dr

What is ImageSeeking?

It’s a made up word.

The very image I used on the teaching kit is itself an example of what I am trying to explain. I did not find it by using keywords such as “seek” or “search”, but by the kinds of things that you use when engaged in seeking. In fact I searched for “binoculars”, maybe even “child binoculars”. I used compfight, my go to tool for locating creative commons licensed images from flickr, and found this perfect image:

creative commons licensed ( BY-NC ) flickr photo shared by bionicteaching

The photo in this case is not literally the subject, but something that suggests the subject. When you see the image, it should convey the act of searching.

And for larger irony, among all the results of the search, this photo is one created by my friend and colleague Tom Woodward (and that is his son, now a photographer too, whom I recently went on a photo walk with in Virginia).

The Back Story

The road to making ImageSeek all started with a tweet

Hey @cogdog, @proctor, @clintlalonde, @sleslie! Bat signal for OERs – got any? https://t.co/YSdiJLMp2z

— Brett Gaylor (he/him) (@remixmanifesto) March 12, 2014

Mozilla was ramping up their collection of Teaching Kits, and what Brett and colleagues were looking for in “Got Curriculum That Teaches Web Literacy?” was tutorials, activities that they could repurpose into the format published on Webmaker.

The Teaching Kits (full lesson plans) and Activities (smaller bite sized things to do) are all created/published/shared in the web editor Thimble which means technically and philosophically are all designed for remix, so anyone can modify / customize to their needs.

I cannot remember the three thing I submitted, but one was from a workshop I first did in March 2012 while visiting the Yokohama International School. The materials are on a Wikispaces site

The idea for this session came from Kim Cofino but was prompted by other colleagues who asked how I find images I use in my blog posts. This has become almost the required part of my blogging- opening (and closing) with a visual metaphor for the post, or just a fun way to draw people in. I usually cannot write the post until I have that first image. The image is not essential to the writing (like a schematic diagram), it sets a tone or hopefully generates some interest via the visual senses to read the text that follows.

I also go about ImageSeeking when I create my presentations, where I keep shifting to fewer words and more full screen images. The title screen in my recent storytelling talks plays with the metaphor of telling stories, which we often associate with campfires

creative commons licensed ( BY ) flickr photo shared by pasukaru76

I love talking about this images in a context of talking about how digital storytelling can add a different dimension to the tradition (stories around a campfire) with a twist (these are Lego Storm Troopers around a votive candle).

At this point I cannot remember the search term, it may have been “Campfire” because that is the kind of activity people do when they are storytelling. It was one of many times I noticed that you get fun images if you include “lego” in your search because there are almost a trillion photos people have shared with lego figures doing everything.

The core of the Image Quotient workshop is built out in the new teaching kit are the prompt questions that help you formulate search keywords in a less direct fashion.

For example, you want an image that represents excitement; using that as a keyword you find a few pictures of excited kids, but also daredevils, and a lot of expecting parents (many pregnant bellies).

But if you think of an action that suggests excitement (and knowing something of the kids of photos people tag in flickr), if you search on leap you find a ton of interesting action shots. It’s popular to take mid air jumping shots… like

creative commons licensed ( BY-NC-ND ) flickr photo shared by sunface13

“Leap” might not seem like the first choice to represent “Excitement” but I think it works.

Or let’s say you want a photo to represent how boring this blog post is. A search on the keyword “boring” does get a few people who look bored, but you also get beetles (who bore into the ground), and drilling equipment.

But what is the action people are doing when bored? They yawn! Using yawn a keyword, you find many cats, dogs, even a cheetah yawning, but also cute babies:

creative commons licensed ( BY-NC-SA ) flickr photo shared by DanielJames

Merrily I Thimble Along

Everything in the ImageSeek Teaching Kit is built in Mozilla’s Thimble tool. It’s tempting to consider this as a web page editor, but the things I assembled for this I think almost make it like a dynamic web app.

The beauty of Thimble is that it can help you understand how the elements of HTML, CSS, and Javascript make things work in a browser; you get side by side views of the code and the web page. Ingredients of Me was one I made in September. Anyone can remix the thimble, By editing content in specific parts of the code, you change the content of what appears on the can:

And once you see how editing stuff between the tags works, you might start experimenting what happens if you change or modify the tags. Many of the Thimble Makes revolve around changing the content, maybe the imagery to do things like Make Memes, Personalize a Book Cover, or even Design Your Own Planet.

Since Thimble supports JavaScript, this opens the doors to do things like leverage a maps library or as I did before, use existing jQuery to make a photo exploration tool.

But there’s more- when you are editing Thimble, any included jQuery scripting will be generated each time you make an edit, so you can have interactive components on the right side that change as you edit, say the value of a Javascript variable.

Huh?

If you remix the ImageSeek, you are first directed to lone 269 where you can enter the topic you are seeking inside the div tags:

This is what shows up in the green shaded box at the top

If I change the text on line 269 to:

re>

, it not only changes the green shaded box, but all of the orange shaded ones in the prompt questions AND the search box that pops up when you click a keyword.

This is because the content of those lower headings are not hardcoded in the HTML, but are generated dynamically when the page loads using the value of whatever is in the code on line 269.

This means that the right side is not just a visual preview, it is a functioning prototype.

That is pretty amazing to me.

creative commons licensed ( BY-NC-ND ) flickr photo shared by strangejourney

Okay, About That Teaching Kit…

But yikes, I am getting ahead of myself. I wrote about the ImageSeek tool when I mostly finished it last month. I could have built a WebMaker Activity around it, but I felt that there was more to add, enough to build out as a teaching kit.

The idea (as I saw it) of the Teaching Kits is not to give just a complete lesson that someone can just pull off of the shelf and plugin to their class, workshop, community meeting, etc. They are built in Thimble too, so any Teaching Kit can (and is encouraged) to be remixed so people can tailor them to their needs/interests.

Zoltar For Prompts, the Opening Activity

The first section I made using a WebMaker Activity Template– it is called How Do You Currently Search For Images?. Part of this is just to find out the baseline search skills of the group. You ask your participants how they might search for an image of a shark or the planet Saturn.

I wrote it in a form that gives flexibility how it is done- from as simple as a group discussion, to using yet another Thimble I devised called How do you Find Images of Things. This has 5 different search subjects, all which should be easy to find– when the page loads it picks one of the five at random, and slowly (30 seconds) a background image slowly fades in as an example.

I really did this to see if I could figure it out, it’s actually a derivative of a more general one I build called A Question From Zoltar. This allows you to create any kind of prompt question with a number of variations, and you can create an answer or hint that slowly fades in.

Under the hood, you edit a series of JavaScript arrays to include the prompt word. in my case it is search for ________ where the blank is “a balloon” or “a shark” or “the planet Saturn”, a matching array to hold URLs for the images, and a third array with an attribution string.

When the page loads, it generates a random number between 0 and the number of items in the arrays, and dynamically populates headings, the credits, and the CSS for the background image. The fun trick is using a jQuery command (one line!) to slowly fade in the background. The value of fade_rate is something you can edit for the number of seconds it takes to fade in, it being a div with an id of stage.

For this activity, the goal is for people to be aware of the way they do searches, but also to reinforce an understanding that you are never really searching image data, but the information that is contextual to an image on the web (e.g. text on the web page where it is embedded, the and tags, categories if it is one a photosharing site).

It is also a place to discuss why these kind of searches are easy to do; because they are literal things.

Creative Commons and Attribution is More than Avoiding “Getting in Trouble”

As mentioned above, the middle part of the Activity Kit agenda is a place for a conversation about media re-use, creative commons, and why giving attribution is a Good Thing to Do.

I embedded this video How to Attribute Images, it’s short, sweet, and has a story element

https://www.youtube.com/watch?v=5b9UX_fTrrI

But in reviewing this and other resources, especially ones aimed at kids, I was overwhelmed by how many are laden with language of fear, of avoiding breaking the law, of how “stealing images is bad”.

It’s not far off the message from the MPAA

So the reason to give attribution is to not get into trouble. I do not find this compelling or encouraging. Why do we not also talk about how it’s a respectful thing to acknowledge the use of someone else’s media? of how it is a way to thank the person who created it?

I find the way people feel about “just downloading images found on Google” changes when you ask them how they feel when someone uses their photos. It’s more than “I don’t want someone making money off of my stuff” (this is such a ridiculous fallacy; it’s really really REALLY hard to make a even a pittance off your images)– does not feel good to get credit? to find out someone valued your image enough to put it in their web site, powerpoint, video?

Hence in the teaching kit

However, it is better worth talking about as a respectful thing to do for someone that has shared their photos online. Wouldn’t you prefer to get credit for your own images if someone else used them on a web site? Wouldn’t you like to know that this has happened? When you share your own photos and also give attribution credit to others, amazing stories can happen.

Voilá! The ImageSeek Thingamabob

I’d written previously on the insides and outsides of the ImageSeek Tool, that post has more detail, but here is a recap.

This is the real meat of the action. On its own, it does nothing. Everything happens when you click the Remix button.

What I really like as a new feature in Thimble this year, is the ability to embed a tutorial (left side)

This is slick. Until now, following the logic of a Thimble code meant reading it linearly and working through the comments. Attaching a tutorial enables more scaffolding and explanation – is it self another Thimble that you connect to yours via a tag (see the documentation).

You break down the instructions into a series of steps the viewer can step through with the blue buttons. And if you click a link that reads line 256, the Thimble code scrolls down to line 256!

What makes my (monstrous) creation different is that the work you do with the ImageSeek is while editing it. You first edit a div to insert your topic, and those changes propagate through the document (thanks jQuery).

Then for each prompt, say I am looking for something to represent “life”, the first prompt asks “I looked for these kinds of actions that demonstrate life in action.”, so I start editing the tags for the keywords with some guesses, like “birth”, “feeding” (maybe momma birds feeding baby birds?)

As I edit the code, the buttons on the right change. And they are functional- click “birth” and you get a dynamically generated search tool, rigged with URLs to search for the words in four different sites of content licensed for re-use (the search patterns lifted from Creative Commons search)

The idea is to work through the prompts to generate possible keywords, run searches, and most importanty, keep track (in a text file, on paper?) of the search results. There is lower part of the document where the ImageSeeker can embed the four best images:

as well as include the information that would be needed to include image attribution:

And once you save an Image Seek remix, you have a document that shows not just that you can find one image by plunking a keyword in the search engine, but that you have tried several searches, and show your process.

I have a completed example for a search to represent the idea of broken web links.

An interesting second tier activity might be to have participants switch their ImageSeeks, remix, and see if they come up with different results for the same search topic.

Would You Like Fries With That Image Seek?

On the right side, are a fee related reference links

Again, I could have spent a gob of time trying to find the Supreme List of Resources, but (ahem call em lazy), the idea here is for YOU, the person that remixes this Teaching Kit, to customize it with the links you find relevant.

Thanks for all the Fish

Now what? Well this is something I have been tinkering with for a while, and maybe I’m too close to the trees. I wondered all along, am I making something to complex? Will people get lost in the long Image Seek tool? Does it do enough to compel people to go through a process, when just chucking keywords into Google is So Easy?

That’s what I’d like to know. Feedback is good, even the critical ones. Especially the critical ones.

Heck a bunch of folks went with it before I was done.

But now it’s time to push this ship out on the seas, and see where it goes.

creative commons licensed ( BY-NC-SA ) flickr photo shared by theirhistory