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.

Another positive of being an airhead was that one or two folk noticed my site was down.

tombarrett
tombarrett

@johnjohnston Flickr CC is down
Thu Dec 02 17:26:13 +0000 2010 from TweetDeck captured: Sun, 05 Dec 10 18:14:33 +0000

And when it came back, in particular A flickr CC search toy, tombarrett tweeted it again with the usual effect, including this one:

xlearn
xlearn

@johnjohnston @tombarrett looks good! Have you seen http://bit.ly/hevGEF It’s what we use in FE and HE.
Sat Dec 04 08:35:34 +0000 2010 from Echofon captured: Sun, 05 Dec 10 18:16:31 +0000

Silverlining

I think I had seen Xpert Attribution tool before but it was not at the front of my mind. Looking at it reminded me of the nice way they add attribution by padding the image at the bottom rather than the way I was doing it (stamping over the image). I had tried to work out how to pad an image before but failed. This morning I spent a wee bit of time digging around the PHP: Function Reference and managed to figure out a couple of things, padding the image, and wrapping the text when it is too wide for the image.

Like the rest of A flickr CC search toy the code is surely pretty horrible, but it seems to work.

I also looked over the How do I properly attribute a Creative Commons licensed work? on the FFAQ – CC Wiki again just to make sure I am keeping within the guidelines.

Stamp icons

THe other thing that I’ve changes is to add a 3rd size to the stamped images. I’d avoided the small size as the attribution rarely fitted on the images, now I am padding them they do not present the problem.

Using the stamped image has the advantage of the attribution sticking to the image where ever it goes and as far as online use goes keeping the image under your control an avoilding problems if a user deletes their image when you hot link to flickr.

As always I am interested in any suggested improvements I can make to A flickr CC search toy the idea is still to provide pupils a practical way to use and attribute Creative Commons images from flickr.

I saw a tweet mentioning me and the Flickr Search and Stamp for the iPod touch project on Friday. Clicking the link took me to Searching for CC images – SHea iPod Touch Project a post on Ian Guest’s posterous about:

a year long project between two schools, one in the London area and the other in Yorkshire. Students in two classes will be loaned an iPod Touch, for use both in school and at home.

The post contains a youtube video of how to use the Flickr Search and Stamp on an iPod touch and the blog has a lot of other interesting iPod Touch educational information.

I had mentioned this tool in a blog post and added it to the Interesting Ways to use an iPod Touch in the Classroom collaborative google presentation but have not blogged about it here..

The idea was to get around some copyright issues for children searching for images to create with on an ipod touch. Ideally children would save a photo, figure to the attribution and edit the photo to add this. That can be quite difficult and time consuming on an iPod touch so I though up this workaround. It searches flickr, only returning images that can be used and edited under a cc license, it then will produce an image with the attribution stamped onto it in the same way as my flickr CC search toy.

Flickr cc attribution

It is based on the iPod Touch Poems webapp I knocked together and has quite a few rough edges. I am sure I could improve the performance, interface & a lot more but it seems to work.

Here is Ian’s video, which should give you an idea of how the app works:

I’ve added a link from the page/Web app to the video to act as in app help so many thanks Ian for this. You can also get an idea of it the app work in this Simulator.

I’d appreciate any feedback on using the app, especially in class and ideas for improving it.

 

ipod_Map_comics

As a bit of a google maps enthusiast I love Tom Barrett’s Maths Maps ideas. It looks to me like a nice way to show some ‘real’ application of maths in an engaging way.

I am still supporting/interfering with an ipod touch project (site gone but not forgotten on the Internet archive). This gave me the excuse a few weekends ago to spend some time messing about with the jQTouch — jQuery plugin which simplifies developing webpages for mobile devices. I am experimenting with building some sort of base site/web app for the touch.

One of the nice things about the iPod Touch is that you can add webpages as ‘applications’ to your home screen. Apple provide a way which jQTouch supports of giving a webpage an icon the idea with the site I am working on, the iPod Playground, is that it should provide an easy way to present links etc to the children this avoids typing long urls into the touch, the webpage could be edited

A couple of weeks ago I went over to Glencairn to give the maps a try out. The task I gave the pupils was presented on one of the ‘pages’ of a jQTouch page. Based on one of Tom’s shape problems, the children visited the Jardin du Luxembourg and collected screenshots of different 2D shapes, these were then built into Comics with Comic Touch. We encouraged the children to work in pairs to collect shapes, one child to keep the instructions open the other to click on the link to the map. Then bump the images from the image gatherer to the one with the instructions on his/her screen. The lesson seemed to go pretty well the children accessing the maps, taking pictures and creating comics with out a problem.

I am hoping to get the children to try a Street View problem soon. The Slides from flickr show some of the screens of the jQTouch webpage and a couple of street view images on the touch.

Creating the Tasks

The jQtouch setup is very easy to work with, everything in a ‘site’ is really one page, jQtouch provides a nice standard interface, navigation and animation for that navigation.

It took me a while to figure out how to link to the maps so that I dropped a pin where I wanted it and that pin would have a name on it using the Name and the location in the query seems to work:
Street View Shapes 1

Weeorgangeguy

You need to have a pin on the map to get street view to work. On the iPod touch or iPhone you click on the Wee Orange Guy to switch to street view. As an aside I think street view on a browser uses flash, obviously not on the iPod but it is a very smooth experience.

Apple provide quite a few nice tricks to help web app development. You can set an icon for your webpage, so that if folk add it to their home screen it looks like a ‘real’ app. You can also set a splash screen image which will show until the page has loaded when opened as a web app. I have a wee problem with the Flickr Lunes site I blogged about recently if I set: to run in full screen users cannot hold on an image to copy it to their photos, pretty much killing the functionality of the app, so I have had to lose the splash screen. I’ve been working on an ipod/phone version of my A flickr CC search toy called Flickr Search and Stamp this just lets you stamp a flickr photo with attribution. Like Flickr Lunes it only find photos you are allowed to alter so should keep you on the right side of the copyright fairy.

Recently I’ve been thinking about ipod touches quite a bit. As well as giving some support to the Glencairn ipod project and being the middle man for a wee Consolarium trial of TapTale which will start soon, I am just back from Oldham and Blackpool CLC’s iPodTouch Conference.

The conference was a great success and there is a lot of interesting chatter on the ning site and on Twitter #ipod2010

Last weekend I started playing with an idea for a wee web app. The idea is to provide an interface for searching flickr and creating images combining flickr photos and text. Using only photos that can be adapted and incorporating attribution.

shark_touch_poem

As a sort of proof of concept I made a web app that makes lunes. A Lune is a fixed-form variant haiku created for the English language. It has three words on the first line, five on the second and three on the third. I’ve used lune writing as a classroom activity on several occasions, they are simple and fun to write. (Lune (poetry) – Wikipedia, the free encyclopedia)

The web app works like this:

Touch Poem Screens

  1. Pupils load the webpage int oSafari on their ipods and type in a search.
  2. The app retrieves and displays a list of creative commons photos that you are allowed to make derivations of.
  3. Pupils select a photo by clicking on it. This opens the photo with a 3 line form over it.
  4. Pupils type in poem and click Go.
  5. The image and text is sent to the server where it is stamped with the text and attribution and sent back to browser.
  6. Pupil presses on image, save dialog opens and image can be saved to photos.

I am using the phpFlickr to search and GD to stamp the photos

I tried the app out with the Glencairn primary six class on tuesday, we then bumped the photos to my phone, transferred them to a mac and added voice in iMovie: Animal Lunes, all in 90 minutes.

I though the app ran fairly smoothly except for quotes which came back escaped with a slash , some text ran off the pictures and the problem with not being able to fix spelling mistakes. I should be able to fix the escapes and hopefully alter the font size to suit the picture width.

Of course the whole thing was put together in an afternoon, the code is rough and the interface rougher. The plan might be to make it a bit more ajaxy and add a few different poem types, proper haiku, kennngs, Cinquains etc. I am wondering if it would be worthwhile developing? Is it too much of a one off to be really useful? I’d love to know what you think?

You can see the webpage in a quick and dirty Lunes Simulator or directly Flickr Lunes.

A while back I made a simple flickr search tool this is not as slick as some of the beautiful search tools out there but it was designed for pupils to use to get images to embed into their blogs and to create the attribution, clicking on a thumbnail gives this:

Flickr Ccstamp

Which has a text box with the html code to embed the image and attribution, you can choose to align left of right and to use small or medium images.

The tool if far from perfect an needs quite a lot of work but it has proved useful to quite a few folk and I believe used in glow training by LTS. Recently at the suggestion of a fellow ADE I added a more somber style to the rather bright colours I had used (a link at the top right of the page toggles the styles and sets a cookie to remeber your preferences).

At the Scottish Learning festival I was delighted to see Neil Winton‘s pupils using my tool and working with the images. This gave rise to the thought that it might be useful to create images that could be used without the embed code that show attribution. I’ve added a feature, above you can see stamp medium and stamp original links. Clicking on these will produce an image with the attribution stamped on.

Stamped by flickr cc
my crop

So I am wondering would this be useful in your class and two, is this legal (stamping a No Derivs photo? ) and is the wording (Flickr photo by name – license) and I would appreciate your comments on both of these questions.

On Thursday this week I’ll be off to Georgia for a long weekend visit.

Carol Fuller of Sammy McClure, Sr. Middle School is being honored by Woodruff Arts Center in the Woodruff Salutes Georgia Arts in Education Leaders (pdf) scheme for her work with us on the Dream Dragon where her students from Cobb High School wrote a play based on some Sandaig Poems. (among other things).

On Saturday I am going to go to the award ceremony and on the Friday and Monday I am going to visit Sammy McClure, Sr. Middle School. I am hoping to do some collaborative work between my class and the students there. I started a blog, McClure – Sandaig to support this, hopefully it will be an interesting read. We will try to post updates on the pupil activities and I hope to post during the trip so that my class can follow what I am doing. In case of connectivity problems I’ve made a sort of moblog too.

I had quite a lot of fun setting up the blog (and a related one, more of which if it works) and moblog in the early hours of Saturday. The moblog just pulls down photos from flickr, which is the easiest moblog app I’ve found. Of course flickr is blocked in school so the webpage downloads the photos to the Sandaig site if they are not there and shows them from there. I hope to adapt that idea for out forthcoming Dutch trip with primary 7 this May too.

I am also hoping to be able to update the map and use Flashmeeting to have a wee chat with my class at some point during the trip, time difference and holidays allowing. I thought briefly about using seesmic to talk to my class, but am not even sure if we can access it in school and it might open a can of worms. I think there might be a wee podcast too.

Of course this is not so much a plan as a wish list, but I’ll be trying my best to both enjoy meeting Carol for the first time, visiting a school in the USA and getting as much value for my own class as I can.

Aberdour

I am sitting on the train on my way home from Hillside school in Aberdour in Fife. I’ll probably not get this online until tomorrow. I have just spent the day on David Noble’s course on Using the Social Web to develop the Four Capacities.

Aberdour is a pretty looking village and we had a nice autumnal view when we took a minute to look out the window.

David took participants through a gament of Web 2.0 tools explained there use in theory and in practise; participants created an edublogs blog, a mp3 recording (which was uploaded to the blog), took part in a flash meeting, explored flickr, youtube and discussed many other web tools in a packed day.
As in listening to David’s booruch podcast you get the feeling you are in the safe hands of someone who not only has a leading edge grasp of the new technology, but can walk the talk, incorporating the tools in his teaching regularly over an extended period of time. He explained the tools, suggested ways of using them, pointed to good practice and reinforced them with his own practice. I was comforted by his reference to aCfE and the four capacities, it looks like some of our efforts to use the social web will support the aims of aCfE.

I was particularly interested in the use of Flash Meeting. David had organised a meeting with Lisa from England and it was the first time I had seen Flash Meeting used. Flash meeting is a free to education tool supported by the Open University. A browser based video conferencing application, whch includes a shared whiteboard and chat, it reminded me of Marratech which I’ve used in the Glow trials. Flash Meeting seemed to have the edge over Marratech o the video quality and in the fact that it is a flash/browser based application. I hope to be able to use it in school, just need to check to see what protocols it uses and if these are usable on the Glasgow network.

David Whiteboard

I also enjoyed David’s presentation, instead of powerpoint, David used a series of del.icio.us pages for each segment of the day: tagged with “3Nov1” on del.icio.us through to tagged with “3Nov7” on del.icio.us, this method of presentation was obviously very flexible due to a pile of excellent links.

Throughout the day David touch on pupils safety issues in a light way but constantly reminding us of its importance. He is in the unusual position of having services often filtered in Local Authority networks available and has to deal with the risks in a professional manner. This also meant that I could plug my laptop in and be online without any problem.

Hillside School is a residential school for boys aged 11-16 with social, emotional and behavioural difficulties David’s experience made a clear link in my mind between pupil motivation and the four capacities. David’s work shows that Social media will help us both motivate pupils and to help them move towards becoming successful learners, confident individuals, responsible citizens and effective contributors.


ImageWell
Originally uploaded by troutcolor

I just noticed and downloaded a mnew version of ImageWell which looks like giving Skitch a run for its money.
ImageWell is free with paid extras, I’ve only tried the free version, you could use it for quick editing and upload of photos (dotmac, flickr, webdav, ftp, sftp ImageShack and smugmug supported) but it is the annotation tools that look really good to me.
Text, bubbles and shapes can all be added and all support colour and drop shadows. skitch has drop shadow text but ImageWell can drop shadows on the bubbles and lines, Skitch’s arrows look good but Imagewell’s are bezier curves.
I could also paste another image onto the first one (the imagewell image on my imagewell pic).
The ImageWell Xtras cost $14.95 and adds batch processing and upload and a pile of extra shapes.

The questions are at the end feel free to skip down there if you know anything about gps.

I spent quite a while over a year ago messing with the google maps api. eventually I made an interface for creating maps, uploading photos and placing them on the map. This gave me a lot of fun, but I found it too time consuming for children to use.
The earlier this year Google My Maps came out which was a lot neater than my effort, and I’ve used it a few times, mostly pasting in the links flickr provides to add photos.

Cort-ma-Law from Lecket hill This week I stared another one with a few photos from a walk.
I was a bit frustrated about placing the photos on the map as I found it hard to figure out where place where in the rather featureless Campsies.

Flickr map Sorry

I switched to using flickr own maps but found them it a bit slow (that might be my aging mac).
I found it even more difficult to get the photos placed with any accuracy on flickr maps, although the interface for adding and looking at the photos is very slick, especially when you grab a bunch of pictures and throw them on a single spot.
Perhaps I just do not go far enough so need to much detail on a map to make my walk look like a walk rather than a spot.

All this made me think about my previous experiments, especially as there was an article in macuser about using the flickr and google maps apis combined. I had just finished using phpflickr to make a community gallery so though this might be quite quick.

Unfortunately the macuser article relies on a flickr api flickr.photos.geo.getLocation which depends on you having placed the photo on the flickr map (I was beginning to go round in circles).

Then I remembered Adam Burt‘s Applescript for getting geo tags from Google Earth ready for pasting into flickr. Adam does amazing things with blogs, google Earth/maps and geoblogging.
The appleScript copies to the clipboard geo tags of the location showing on google earth at that time.
It is much easier to figure out where you are on google earth, it has a smoother gui than google maps and a better resolution (of where I was at least). so I geotagged a bunch of photos, grabbed a new google maps API key and got busy.

Flickr googlemap mashup

Of course at that time I didn’t know about flickr.photos.geo.getLocation depending on flickr maps.And I didn’t know a tag geo:lon=-4.704382114809 would be returned from the API as machine_tags=”geo:lon=4704382114809 geo:lat=56258859999999″ ie without the minus sign or point so I spent a fair bit of time staring at a blank map, as the google maps API didn’t understand what I was sending to it. Anyway to cut a very long afternoon short, I delved deeper than I had been before into the data returned from flickr.photos.getInfo and finally clunked together a couple of files, the first uses phpflickr to grab the info from flickr and store it in a file, the second pulls that info using the google maps api and create a map.
I did try pulling the information and creating the map all at once, but that took too long. The data from flickr obviously does not need to be updated very often so that job was hived off, speeding up the maps creation. The unfinished product is here: John’s Flickr Map Mashup.

This is just scratching the surface of what could be done, it would be better maybe to create different maps for different days or for particular tags. if all of my tagged photos go on the same map it might eventually be too crowded and need some pagination.

Help wanted: I’d like to know a bit more about geo tagging and perhaps GPS:

  1. Would it be possible to get data from a GPS device and add it to the EXIF data of a photo before uploading it?
  2. Does Flickr undersatand embeded gps data?
  3. Is there a cheap enough GPS device that would work with a mac?

I am thinking of a work flow that includes the tagging of photos before uploading, maybe in iphoto with AppleScript or a SuperCard project, I think I’ve done some EXIF data extracting so imagine that adding can’t be that much harder.

Any ideas that do not involve a lot of expense gratefully received.