Another quick DS106

Color splash is a technique to emphasize details- you remove all color from a photo, and then restore original color to a single object, e.g. a green apple on a table. Think of the Girl in the red dress from Schindler’s List.

After watching Video Tutorial: Splash the Color : neverthesameriver I had another wee play with photoshop. A little of which is beginning to make sense.

Color Splash

Past ds106 0clock

Ad DS106 get underway I’ve found my Daily Create rate has dropped right off. I was doing ok before the course got underway and then it went a bit pear-shaped. I managed 10 DS106 photos and a few dailycreate sounds. I managed to do the odd full assignment but was quite pleased that I already had a blog. This week I’ve really dropped out of the game. I don’t feel bad about not doing any creates but I feel a bit guilty for not paying much attention to other folks work/play. Only managed one comment his week.

Anyway according to Week 4: Photography and Visual Assignments the next bit is to try and do some Visual Assignments so this is my first the Comic Book Effect.

Method:

  1. iSight Photo at lunchtime in the office.
  2. Added clock and watchstrap in Fireworks, saved as jpg.
  3. Cut trace round in photoshop with magnetic lasso and delete office.
  4. Add background from Mr. Blue Sky – bevevans22’s posterous.
  5. Save jpg to dropbox
  6. on iPad move to photo library via dropbox app
  7. Use Halftone to make halftone effect.

I was hoping something of the rabbit from Alice would come through.

I would like to be make a much better watch, (need a bit of time;-)) and be able to do the halftone in photoshop.

I did manage a couple of photoshop tutorials this week, nice short ones from Matt Gemmell,
Etched effects and Subtle UI texture which I found useful. I found another tip here: Splash The Color from a DS106r.

The assignment was in two parts:

  1. read: “What is Web 2.0?”, Web 2.0 Storytelling and Seven Things You Should Know about Creative Commons
  2. distill a few key points use one of the “50 Web 2.0 Ways to Tell a Digital Story” to distill a few key points from you reading.

I notice that prezi is one of the 50+Ways – Presentation Tools listed on the wiki. As I started thinking about Web 2.0 I got caught up in browsing through my own short history of using ‘this sort of stuff’. Recently impress.js had caught my notice, it is a prezi like tool that uses javascript. It is new and only works in Safari and Chrome at the moment. I think that Firefox 10 should do the trick too.

I am not overly fond of prezi although I’ve seen it used to very good effect, but I though it might be interesting to try out impress. impress in which you create the ‘slides’ by adding attributes to divs in HTML seemed a bit simpler to use than prezi. I found a great post that explains how it works: How To Use Impress.Js | Cube Websites Blog.

So rather than think deeply about Web 2.0 I played with impress. The results are not tasteful but I had a lot of fun.

Web 2triptn

The second assignment for Spring DS106 was to read this: A Personal Cyberinfrastructure and watch this: “No More Digital Facelifts: Thinking the Unthinkable About Open Educational Experiences.” and blog a response.

There is a requirement to read and watch both carefully but as I am taking this course a a college dropin I didn’t feel the need to take much care;-)

This is one of those videos/podcasts/blogposts that fire off lots of thoughts as you watch as it hits a lot of nails right on the head. I’ll only lazily touch on a couple.

The video is worth watching by anyone interested in Web 2.0 so I am imbedding it here:

Sounds Good

First thing I notices was the rhythm and musicality of Gardner Campbell’s voice. I’ve been listen to Tom Wordward’s remix A Bag of Gold « Bionic Teaching and used on Radio Edutalk a few times (that was a great idea). Gardner Campbell is a powerful, humorous speaker.

I guess the audience is familiar with the argument addressed, the tension between LMSs and the open web in US higher education. I an not but it sounds like the same sort of argument we have had in UK education between NLEs and WEB 2.0/google/open technologies, between systems set up for teaching and learning and more open and general software that can be bent to teaching and learning. Gardner Campbell defends the open with great humour and the marvellous bag of gold metaphor.

A Personal Cyberinfrastructure

In part Campbell is suggesting Students control their own domain, decide what sort of social software to install and manage it from themselves. As someone who has been doing this sort of thing for a while (here on this blog, personal wiki and a bunch of other stuff) I cn see where he is coming from and love the enthusiasm. I do wonder if it is for everybody. I am fairly relaxed about backing up, losing stuff and the like. I also host with someone who I know well and who has dug me out of a hole or two in my time.

If a student sets up, say, wordpress on their on domain they need to make sure they keep wordpress and any plugins up to date to avoid any wee hacking problems (FAQ My site was hacked « WordPress Codex) that can happen. You also might have to worry a bit about being fireballed or slashdotted if you ever write something the rest of the world want to read (More likely you will be hacked).

These are risks I am happy to take, given my host and the fact that I like playing with this stuff and don’t mind the time spent. If you value your time it might be preferable to head over to wordpress.com. (NB I am just using WP as an example, this blog is not a wp one, it runs off pivotx).

This leads into the though that there would need to be a fair bit of understanding by teachers and time for development if this was extended back into primary & secondary education. There is a lot of positivity about blogging in schools at the moment, this recent wave crested by Mr. Mitchell at Heathfield CPS Blogs in England (see the Heathfield in the News section) and a ton of blog work by the Glow Scotland team. I hope there is an understanding of the amount of knowledge and skill that goes into a good school blogging site, the time and energy needed to keep it going (a lot of support by Creative Blogs. in Heathfield’s case along with Mr Mitchell’s obvious energy and dedication). The pile of abandoned one, two and three post blogs out there suggests it might not be.

43 Minutes In

There is a question from the audience suggesting that this could be started earlier, this goes right primary school territory

there is an authentic version of any concept that can be taught to any child who can read and write. You pitch it to the appropriate level of development and then you keep coming back to it spiralling upwards and upwards and until that magic handoff moment… 45:46

The last section is really powerful pushing the need for teachers to help pupils make the decisions and on how using these techs in school could flow into higher education.

narrating curating & sharing

What learners should be doing.

Danger Edupunk

I have to be careful or it is down the youtube rabbit hole of edupunk videos, mostly of Gardner Campbell debating with Jin Groom, beware the related video…

Standard YouTube License

Be nice if this was a creative commons video.

If I had a bit more time & skill I’d like to popcorn this it would be a great one to some twitter video mashup, perhaps a hashtag could add the tweets as timed comments…

The daily create from today/yesterday was Create an audio of two sounds not normally heard together. I took two sounds that I had recorded for the UK Sound Map on Audio Boo. The result is:

While I don’t think the result is particularly creative or interesting I though the workflow was worth recording.

  1. Easiest way to download the mp3s from AudioBoo was to switch to the RSS feed in safari and right click the MP3 link and choose save as.
  2. Open One file in audacity.
  3. Import other file with File -> Import ->Audio…
  4. Fade out the first sound, as the second was so quiet in comparison I just left it in place. Deleted the section of the first track after the fade.

Busker to Beach Audacity 440

Bonus Image Merge

As Both AudioBoo, the source of the sounds and SoundCloud, where we were to publish the results, allow you to add a photo I thought it might be interesting to create an image fade to go with the audio.

Here is the recipe I used:

Opacity Gradient

  1. Open first AudioBoo page in Safari, view the larger image.
  2. Drag image onto FireWorks on the dock.
  3. Open second image and drag onto the first image in fireWorks
  4. Drag a rect in fireworks over the second image.
  5. Make it white and give it an opacity gradient.
  6. Select the gradient Layer & the Image below.
  7. Modify Menu->Mask -> Group as Mask
  8. Adjust the opacity of the masked image so that the image below shines through.

Busker to Beach Firworks 440

The whole process was pretty quick which is quite important as I try to keep up with the daily create.

Jim at ted

After I saw Yamily Feud | Ben Harwood – DS106 – Spring 2012 I was thinking of the yams dancing at TED, as I already had Jim dancing I did this. It uses Ben Rimes’ ted template and Andrew Allingham’s ds106 radio poster/design.

I’ve also posted this in the ds106 category here but not the default, hopefully this will get picked up by ds106 but not go into my main feed. This will give folk who read ScotEduBlogs a break as DS106 hots up (If I manage to keep up the current activity rate).

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.

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.

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( /ss+/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.