Image Seek: A Mozilla Thimble Make

creative commons licensed ( BY-NC-ND ) flickr photo shared by maury.mccown

While many people do seem to know of the Mozilla Foundation’s efforts to Teach the Web, at the same time, many don’t. Besides a great set of tools (Thimble, Popcorn Maker, X-Ray Googles) they are building out a raft of resources, teaching kits and more.

In ds106 we have used for several years X-Ray Goggles, the web-based tool that allows you to remake/remix any public web page; part of the unit we do of telling stories within the web.

Last August I was invited to be a “Fellow” and asked to create a few demonstration makes, one which seems to get remixed often is The Ingredients of Me a Thimble project where you go inside the code to edit the content on a label of a can of beans (yes!) that is supposed to be a metaphor of the ingredients that make up you as a person.

The beauty of Thimble is you get a web editor on the left and a full preview on the right, so you can see immediately what happens when you change a CSS value or alter the content of the tag.

(click to see larger image)

The idea was to include a lot of comments in the code, so someone who chooses to remix can play, make, break, change the page, and ideally, learn how web pages work by tinkering.

I’ve done a few more, one that demonstrates a CSS technique for coloring parts of an image by creating a palette of colors to that give Cory Doctorow’s image a “mood color” and another one to explore the then new features for Javascript to create a tool that allows one to make small “snapshots” of a larger image.

Much of what you find among the Makes are the kind that lets a remixer change the content of a given Thimble, change images, design characteristics -e.g. create a Keep Calm poster or to create a custom book cover (that one spooked me, I thought it dynamically grabbed my name, just a coincidence).

What I found in my newest monstrosity creation is that Thimble can also be itself almost a web app, more than just an editor, but something you change and interact with at the same time.

Okay, long preamable… in March I got another invite to create something a bit more, they are wanting to have a collection of not just cool Makes but ones wrapped inside remixable teaching kits. (disclaimer of sorts- if I finish this project I will likely get paid some kibbles and bits for doing it)

The idea I suggested was from a workshop I did last year while visiting the Yokohama International School, called Upping Your Image Quotient

Here is/was the premise- there are plenty of places and tools to find images on the web, especially ones that let you find ones licensed for re-use. If you are looking for a photo of a specific thing, say, an elephant, it’s not hard to search because generally the file names and or the pages that contain them will most likely include the word “elephant”. But you are never searching the image (except for searches that match colors like the amazing Multicolor search).

But you may get ambiguity. If you are searching for “bat” do you get the mammal or the baseball device? And what if you are searching for something more abstract or complex; how to do find an image for “honesty” or “delight”? As keywords, you do not typically get what you seek.

Knowing something of the way images are stored and playing with a bit of inference, my methods for finding images (once you get past the listicles of the TOP 50 WEB TOOLS FOR FINDING IMAGES) end up often more art and oblique methods; a strategy that means searching again for metaphors or the kinds of actions/places where images show the idea.

So what I made aims to be a places in Thimble, to try out the methods listed in that original workshop. Image Seek turns Thimble into more or less, an interactive worksheet, to experiment with the finding and record your results.

This is a remix I did with my original effort, to find an image to represent the result of breaking links on the web

The first prompt asks for action words: “I looked for these kinds of actions that demonstrate broken links in action.” where the ones I tried were “clipping” “snapped” repair, and “frayed”. The last one has been highlighed in Thimble (changing the class name on the button) after my search to indicate it was a keyword that produced better results)

These are all functional buttons, it displays a dialog box with pre-written searches in flickr creative commons, google search images licensed for re-use, fotopedia, and Wikimedia Commons

This will run the web searches (in a new window) for the given keyword. The search strings were all modeled after the way they are constructed on the creative commons search.

The idea is then to try the search, and as you sift through the results, you (the user of the Image Seek) is keeping track of the sources and saving the files.

The other search prompts work the same. Sometimes you find the right image by seeking the entities that you think will display or be characterized by the word “These are kinds of objects, people, animals that have broken links as an attribute or are associated with it.”

Other times, you can find that “right” image by searching on the types of places you would expect to find or see it “These are places, locations where broken links occurs.” (sometimes the grammar works out wrong, sue me).

And then it sometimes works to try adding another descriptor — “Adding a combination keyword to the ones above helped narrow the search for broken links (e.g. introducing a character, animal)”

The idea is to find four potential images that would work for whatever project you might need the image. There is code in the thimble editor to insert them into the final gallery:

And then there is table at the bottom which can/should be used to keep a search record, e.g. the keyword used, the site searched, a URL for the image, a URL for the page that contains it, and some notes

So if someone goes through this process as say an assignment, instead of just ending up with an image at the end, the Image Seek provides a record of the process; the keywords used, a collection of 4 potential images, and all the information in the notes needed to create a proper attribution.

And in interesting variation because there is a green remix button on any Make, is that you could remix my Image Seek, and come up with likely a different set of images.

That’s a lot there. I thought it was getting too complicated as I built it, but it really parallels my own methods for finding images.

What happens when you get inside Thimble? Well they have added a nifty feature, where you can create a guided tutorial, which walks you through the document (which is pretty long). It walks you through everything.

(click image to see larger version)

When you click “line 269”, Thimble scrolls down to that line, so you can see you enter your search quest by typing the word in between tags, replacing “something” witht he word you want to us

This not only updates the text immediately in the green box on the right, but also every where else the word appears in the gold colored boxes (thanks, jQuery, thanks!).

So what you are doing is editing the Image Seek (actually your copy of it), the search buttons work, and so you can be editing them with the words you want to search with.

(click image to see larger version)

So once you change the text for “keyword1” in the Thimble editor, it changes the display on the right pane, but the button is also active, so you can run a search.

There are other places where you are guided how to enter the URL for one of your “final” images, so it appears in the gallery (took some CSS fiddling to get it to scale and clip).

This does have a fair bit of jQuery to make things work, such as the jQuery-UI Dialog widget, that makes the popup dialog box work. That was fun to figure out. You do not need to know how that works, but if yo want to play with the code that makes the box work (maybe you want a different search engine, or fewer?)… you can do that.

But this is taking (I think) Thimble beyond a web editor and something to experiment with code tinkering.

I’d love some feedback on this. Too much? Lost? Give it a whirl- go to the Image Seek and click Remix. I also am looking for resources and related tutorials I can use when building this out as a Teaching Kit.

Heck it looks like people are already off and running with it. I can see that some people removed a few of the prompts. That is fine.

And that is pretty darned exciting.

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

I found that image not by searching on “exciting”, but of all things “leap” – since a leap in the air produces images that suggest excitement (or often joy).

You don’t find that by literal keyword searches.

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon