A Yam is Born

A yam is Born 2

There seems to be two main components in ds106, one is a freeflow imagination and a willingness to follow ideas. Assignments seem to spring for the participants this one from Yamboat – Lisa’s ds106 experiment.

Although some of this stuff seems to be very light hearted, I was struct this morning how another one Fantasy TED Talks — MISSION: DS106 was picked up by Scott and is going to be used in his classroom as part of a project for his students.

Anyway I though I should try this yam assignment as I was completely at sea about how to start. I first I search the The Internet Movie Database (IMDb) for movies with am in the title, but found instead A Star Is Born.

Not being sure about copyright of old movie posters U though this would be a good point to start learning photoshop.the other component in ds106 is increasing skills with digital tools.

Photoshop

The early steps were pretty simple, photobooth myself with hands in roughly the right position. cut out hands with the magnetic magic want (this seems like a nice thing). Cut out Yam.

Next I decided to tackle the background, make a gradient, stick on some stars and spotlights, sounded simple enough. So I drew a rect for the background and then sent 15 minutes trying to figure out how to put a gradient on that.

I am afraid at that point I gave up.

Back to Fireworks

Switched to Fireworks 8. It seems to me, and I may be way off here, is one of the big differences between Fireworks 8 and photoshop is that layers in fireworks can have an area, photoshop they seem to cover the whole canvas?

Can’t day I am delighted with the quality of the work above, I quickly realised that getting things looking the way I imagine will take a bit more time & a lot more knowledge. Ended up doing things I could do quickly, masked the yam hands with my photoboothed ones, drew the suit by hand, dropped a few filters on to try and approach the red glow of the original, guessed the font and hit my self imposed time limit.

Next steps, try to get to step 2 in photoshop before switching, maybe read a tutorial.

Visualize That Quote

studying… by fazen
Attribution License

A couple of days ago I was reading Building the No English Words Translation Tool on Alan Levine's space for barking about and playing with technology he described how he was building a tool for ds106 Words With No English Translation with some JavaScript, as I popped on a comment I was reminded of http://iheartquotes.com/api an API for getting quotes. and had a wee play to produce Pics for Quotes (or a better title) a simple webpage that pulls in a random quote and then allows you to click on it to search flickr for the word clicked on. I wondered if this could be a ds106 assignment.

Alan comment back with some suggestions:

“Visualize That Quote”- rather than provide choices to pick from Flickr for each word; maybe random generate one image per word. The activity would be to illustrate/explain the quote in pictures with the least number of pictures required. The user could X out ones they did not need (and they would dissapear) and perhaps allow a click to generate a new random image to replace it. They would then do a screenshot to save their work? Perhaps generate a score where there is advantages to lower numbers of pictures and fewer image replacements?

I did a bit of work and got a basic implimentation of Alan's suggestions going. Alan then blogged about it again with some more suggestions:

  • See if it can skip unnecessary words like “a”, “the”, “of”
  • Be able to return a word if we accidentally click it closed
  • Tweak the css for thr “attribution” link at bottom (sometimes overlaps the license text)
  • Make it so when you hide the titlebars, it also hides the text of the words and the quote, to make it a true guessing game.

I've managed to make most of these changes and have a sort of working page: Visualize That Quote that has become a ds106 Assignment Visualize That Quote — MISSION: DS106

What Visualize That Quote Does

  1. Pulls in a random quote of less than 8 characters from the Quotes API and displays it.
  2. Searchs Flickr for a creative commons images to go with each word and shows one for each word.
  3. Allows you to swap out the images by clicking.
  4. You can reorder remove or hide images.

Here are a few examples I churned out without much though while testing this:

The DS106 Effect

It is great to get the quality of feedback and suggestion from a blogger I've read for years. The whole ds106 network is incredibly supportive even before the course has started. I started riffing off Alan's idea and was pushed and encouraged to improve something that started as a slightly pointless exercise to be come almost useful. This reinforces, for me, the power of blogging and commenting in learning. I've spend a few hours polishing something, learning as I went due to the community effect. I'd already had some of this in ds106 related posts. The current exchange has been particularly powerful becasue it was not just a well done, but a you could do this

Once I go back to work, tomorrow, I am not sure how much of ds106 I'll be able to keep up with as even before the spring course there is a fair flood of posts, but I'll give it a fair try.

I'll also be thinking a bit harder about how I comment on pupil blogs, too often it is easy to go for well doen and leave it at that.

How it Works

A mix of jquery, php & jQuery UI.

Part of the ds106 ethic seem to be to explain how something is done so that others can learn from it. My coding will not stand much of a critical eye, I am no programmer, but some folk might find this interesting or even useful.

The Quotes API will send json, but although that worked in desktop test I couldn't get it working on the web due to cross domin problems, I tried setting it to jsonp and that brought it in but I got errors trying to parse it with jQuery. Knowing very little about this stuff I side stepped it by pulling the json in with php so I could get that with jQuery's ajax stuff. Any jQuery/Javascript (and css) is all on the one page and you can have a look if you are interested by viewing the source of Visualize That Quote. It is not a pretty sight, as my method of coding is guess and check and google and guess and check. I have a tendency just to get things going and then push on.

This quote is put on the page, next javascript strips out all of the punctuation using:
str=str.replace( /[^a-zA-Z ]/g, '').replace( /\s\s+/g, ' ' );
Which I got from How can I strip all punctuation from a string in JavaScript using regex? – Stack Overflow. The script then pulls in html to show random flickr image via a php file which uses phpFlickr: randomFlickr you can see the code with some notes. I am recycling this from elsewhere (A flickr CC search toy). One the javascript has the code it puts it on the page.

More javascript swaps out the pictures for others when they are clicked.jQuery makes that pretty simple. jQuery UI handles all the dragging:

$("#flickr").sortable({ 
		handle: '.drag', 
		revert: true 
		    });

Which is pretty simple. I just copied that from the jQuery UI site.

Most of the other things are deal with my toggling their visibility with jQuery again: $('.attribution').toggle(); in this case this hides or shows the attribution for all the pictures, these are in a span with the css class .attribution.

How it could be better

  1. The flickr search could return json rather than html, this would give a better logic to building the set of images. I'd need to learn how to produce json with php and to process this with jQuery.
  2. Most of the work is done with simple functions, these are called from hard coded onclicks, the more common way to do this with jQuery seems to ad these with jQuery when the pages is loaded.
  3. Rather than expect users to take manual screenshots it should be possible to created composite images with the attribution and optionally the text stampled on. I've done a little of this sort of thing before (the stamp function of A flickr CC search toy) but this would streach me and google a bit.
  4. Alternativly an embed code that would embed a wee set of thumbnail pics and link to a full viewing of the creation. In both this and the last case I'd need to figure out what to do if a user reorders the images. In this case I might need a database.

Given the return to work tomorrow, all the fun I'll have on ds106 and Colin Maxwell's Ed Tech Creative Collective I am not sure if I'll get to this any time soon, but I've had a great time with this so far, if you are part of ds106 I hop you finf the assignment useful, I am very open to more ideas and suggestions.

Uitwaaien

My first attempt at a ds106 assignment. I was reading Alan Levine’s post Building the No English Words Translation Tool about a new DS106 assignment Make The Untranslatable Understood the task is:

Use the Random Words with No English Translation tool to generate a word that could be better understood with a photo or image. Find a creative commons image or make your own, and include the word somehow in the image (using a desktop photo editor or web tool like Aviary or PicNIk). Then share it with someone and ask if it makes sense.

I click through a few and then got sidetracked (more about that later).

Today I reloaded the tool and Uitwaaien popped up.

“Literally, this Dutch word means to walk in the wind, but in the more figurative (and commonly used) sense, it means to take a brief break in the countryside to clear one’s head.”

I slightly disremembered this, thinking of head in the clouds which reminded me of the cover of On Having No Head: Zen and the Rediscovery of the Obvious by Douglas Harding. This lead me to this (click for larger versions):

Uitwaaien 440

and this:

Uitwaaien Crop 440

Checking images for the cover of On Having No Head it seems that my memory was faulty again, not quite how I remembered it. Not to worry.

One of the resions I am joining in with ds106 is to learn how to photoshop, having a fairly unused copy on my work laptop, but here I went for my comfort zome of fireworks 8 (the last one with a really good edu discount). I mostly use fireworks for cropping and maybe dropping the odd shadow but Feathered selections and transparent gradients in Fireworks 3 go me on the right track

Howto 8

I faded the head a wee bit too much but I know how to do it now. I had 2 photos ofthe same place one with me in it one without (Credit to my daughter Christine). I tool my head area out of the photo without me and cropped it to a wee rect round my head as a layer on the photo of me. I then masked the layer with a graident as per instructuions.

EDUtalk 2011 a strong finish

I though with the previous post I’d finished blogging for the year, but this is too good to keep.

This morning firing off the EDUtalk bot brought in a couple of new podcast episodes one from iPadio and one from AudioBoo.

I is always interesting seeing what comes in to an open invite and the flow of posts on EDUtalk comes and goes, some times a trickle and occasionally a flood, I didn’t expect much over the holiday period.

The two posts today are both interesting and exciting in themselves and as an indication of a couple of recent branches that have developed on EDUtalk.

Hack Rap by Alan O’Donohoe

One Hack Rap by Alan O’Donohoe (teknoteacher) is a rap boo to attract pupils to computing, Alan has a great series of boos about introducing programming to pupils. His mission to TEACH COMPUTING not secretarial skills. Alan is Co-founder of the very exciting Hack To The Future. This hacking theme has been popping up fairly frequently on EDUtalk,for example Talking #Hackasaurus with @iamjessklein at #HiveLondon #MozFest by Doug Belshaw and a lot of Leon Cych‘s edutalk input. Leon has been one of the major EDUtalk contributors and posting a ton of fascinating eduhacking stuff there and on the Learn 4 Life site (where Hacking, mentoring and rapid prototyping as new models for learning is one of my favourites).

MAT4ESL iDeaCast 04 by Scottlo

MAT4ESL iDeaCast 04 by Scottlo this is Scottlo‘s second contribution to EDUtalk. The phlog has bee echoing round my brain all morning lots of exciting ideas for all sort of things. The Scottlo Radio Blog comes from Japan, Scott is a contributor to DS196 and involved in ds106 Radio which of course provided inspiration and instruction for Radio Edutalk. David and I have been JohnPosted on Categories DefaultLeave a comment on EDUtalk 2011 a strong finish

Joining DS106

I’ve been reading Jim Groom’s bavatuesdays for a few years and though it following ds106:

Digital Storytelling (also affectionately known as ds106) is an open, online course that happens at various times throughout the year.

DS106 is pretty off the wall, but I’ve been inspired by it several times:

It has occasionally crossed my mind to join in with the course, but the time involved and the creative focus made me reluctant. However I do feel there is a lot to be learnt and some fun to be had by following the course so I started thinking about it. I popped a question in the comment box on Jim’s blog about using pivotx, this blogs software instead of the more usual wordpress. Jim got back very quickly and set me up with an account on ds106 which makes the decision about joining in over;-)

I am a wee bit nervous about jumping into something that requires visual creativity. While I am happy enough editing images, audio and video I am not good at visual thinking or design (many webpages attest to this) I do hope to have some fun around the edges. I am encouraged by Jim’s do what you like and leave the rest and welcoming attitude. I am looking froward to finding out a bit more about how the wordpress mechanics pull the course together and investigating this openest of online learning opportunities for the perspective of a learner and with an eye on my day job.

I’d be interested in knowing if any other Scottish educators are taking the course, perhaps we could offer a bit of local support to each other.

If you are interested in ds105 and want to know more Jim Groom – Wednesday Morning Keynote on YouTube is a great, if crackly, 40 minute intro (the animated gif above if from this).