I’ve made a updates to a couple of simple web pages/apps aimed at pupils and teachers using iOS and images.

Photoblitzer

photoblitzer is a really simple page that just gives a list of ideas for taking photos. I originally made it for a #ds106 project (20 Minute Photo Challenge: ds106 Photoblitz – CogDogBlog) and blogged about it on my 106 blog 106 drop in – Photoblitzin.

Since then I’ve used it as a starting activity on a couple of iPad training courses for staff and it worked well.

Originally I was thinking of this as being used on an iphone or ipod touch, but we have seen a lot of schools buying iPads and running a fair number of training twilights on useing these so I updated the app to look a bit better on an iPad:

Staying the same on an iphone or ipod touch:

The idea of the app is to generate a list of ideas for taking photos from a list of over 106 and let people mark them off as they take them. This seems to get people started in thinking about making interesting photos even in the rather limited places we run training courses in. This leads in turn to more interesting possibilities later when working with application to use the photos, say SonicPics, comic makers, iMovie and the like.

FlickrStampr

After I had played with photoblitzer I though I’d do the same sort of thing for FlickrStampr ( a new slightly catchier name for flickrcctouch). I made this way back when I first looked into using iPod Touches in class and neglected it after that.

The idea behind FlickrStampr is to give pupils an easy way to use creative commons images with the required attribution. The app lets the user search for flickr photos by tag. and provides a set of thumbnails. Clicking on a thumbnail creates (on the server, a copy of the image with a strip at the bottom with a simple attribution text. The means the user can download the image and use it on blog posts or presentations and the attribution is on the image, easier, I hope, for pupils than copying both the image and the attribution and then useing them together.

I started by cleaning up the iPhone interface a wee bit, before it did a fair amount of hiding and showing, now it just shows everything: flickrstamper iphone I messed about with the CSS a little and the page looks a bit different on an iPad screen; FlickrStampr iPad The main problem with the interface as it stands is that if you want to just see a bigger version of the image the image is processed on the server adding the text. This is, I suspect, a little inefficient but it makes for ease of use: you don’t need to preview them click a create button, then download the result. Just press the ‘preview’ and choose save. 

Not exactly responsive

The design improvements falls quite short of what is normarly thought of as responsive. In FlickrStampr the layout just squishes as the screen gets smaller, pushing one secion below the other. I photoblitzer I’ve used a media query in the css for the first time: @media screen and (max-width: 480px) there are a lot of possibilities for improvment. I am slowly learning hopefully more improvements to come.

Icons

I’ve now given both an icon to make it look a bit nicer when added as a bookmark on your homescreen, Ive also use a useful bit of javascript that alerts folk to the fact they can do this:Add to home screen, you can see it in action on some of the screenshots above. iOS web apps are a lot less powerful that native apps, especially ones developed by peole like myself with pretty limited knowledge, but they do offer the possibility of simply addressing niche uses. I hope that some folk will find these things of interest or even useful. I’ve had a ton of fun working/playing with this stuff and am open to suggestions for improvments.

The value of free

As an aside, testing the flickr API, and some recent play with the freesound API reniforce for me the value of sharing under a CC license with the proviSion of a powerful API, there are some amazing people sharing wonderful captures and creations freely, this need to be vslued, used and protected.


A decade ago, metadata was all the rage among the geeks. You could tag, geo-tag, or machine-tag Flickr photos. Flickr is from the old community. That’s why you can still do Creative Commons searches at Flickr. But you can’t on Instagram. They don’t care about metadata. From an end-user point of view, RSS is out of favor. The new companies are not investing in creating metadata to make their work discoverable and shareable.

from: Joho the Blog – [berkman] Anil Dash on “The Web We Lost”

Some great reading this morning starting at How the Web is being body-snatched ~ Stephen’s Web through Doc Searls Weblog – How the Web is being body-snatched to the post with the above quote.

This quote really jumped out at me, I’ve loved the flickr API for a long time and used it for lots of fun. I enjoy Instagram too, for its easy, quick hit, and lightweight community.

I really hope that we are not drifting away from such valuable resources with apis and rss feeds to the easy and locked in.

One of the things that makes the huge gap between sites like flickr and facebook is who has access to data and how they access it. When you share on flickr you are doing something quite different, and potentially much more valuable than sharing on facebook or google+.

I hope that open never gets old.

I’ve not posted much here recently, I have made a few posts over at my DS106 blog including in December:

Mostly playing around with gifs for the ds106 GIFfest which leads to messing about with JavaScript, flickr & freesound.org.

I had a way of generation a list of images and audio found with the same search word. I’ve now improved this to make a image/audio slide show like the one below. The new interface is rough as I’ve just added a button to get an iframe code that produces something like the one below.

Getting all the audio to play has been a bit messy, but it works for me in Safari, FF & Chrome on my mac and FF and IE9 on windows. Probably of little use to most folk as wordpress blogs, for one, usually do not allow iFrames.

Here are a couple more: drip and 404

I am pretty keen on posting photos to the Internet, not because I have great interest (or any skill) in photography but as an alternative, to blogging, way of recording events. I’ve been using flickr since 2004 and am currently enjoying instagram (mine via api) and posterous

Mostly I take photos with my phone (the best camera). Recently I’ve been testing the ways apple gives you to post photos from an iOS device.

Public Photo Stream

I’ve become a fan of photo stream,

When you take photos on an iOS device or import photos from your digital camera to your computer, Photo Stream will automatically upload it so it is available on all your devices.

You can also publish photos to a public photo stream.

Here is a guide to making a public photo stream. Click to see a bigger version:

How to Photo Stream 500

And here is the photo stream:
Ben Challum – Photo Stream. These are simple and quick to create and easy to share.

iPhoto Journals

For these you ned to buy iPhoto. There are a wee bit more complex and interesting as you can include a variety of different elements, including, map, weather, notes and the like.

Journal Elements

Again they are pretty straightforward to create and upload. Here are much the same photos as a journal: Ben Challum.

Here is the gallery, created on an iPad viewed in iPhoto on a iPhone

Journal iPhone

Photo Stream vs Journal

On thing I noticed with photo stream was that you could post a link, before the photos are uploaded. With iPhoto journals you have uploaded the whole journal before you can share the link. You can share a photo stream privately, although I don’t think I would. Both produce online sites with pretty horrible urls (eg: https://www.icloud.com/journal/#2;CAEQARoQpdbIWlofBmKRAh_cPbtctA;09537452-2A80-49C7-A86F-71E8734846CF!).

Photo stream is quicker, with less choice, with a journal you can edit the layout of photos easily (especially easy on an iPad). Journals have more features for telling a story by adding non photographic information. The photo stream seem to be designed to share photos as you go.

Educational Use

I could see the photo stream being used by a class or group to share photos and images with each other as they go allowing them to work on or use images created on classmates devices as they are created. It is simple to add images to a shared photo stream over a period.

Shared Photo Streams don’t count against your iCloud storage, and they work over Wi-Fi and cellular networks.

Apple – iCloud – photo stream. Realistically I doubt there are many cellular devices in our classrooms.

Journals are more suit to creating artefacts, perhaps using photos gather via photo stream. Journals allow the addition of text, editing of layout and look like an interesting way to tell a story, record some learning and share it, a fairly easy way to create a image heavy, attractive mini Web site.

Thus far and no further

Apart from the lengthy and un-rememberable urls the other thing I don’t like is the locked in aspect of the sharing. There is on api or RSS feed that could be used take the images and reposition them, but I suppose that is what flickr is for.

Flickr Export from iPhoto

This is pretty good, it is easy from iPhoto on iOS to send images to flickr, create sets and tagging photos as they go, here are the same pictures on Flickr: Ben Challum – a set on Flickr and flickr makes it easy to repurpose the images:

Although both photo stream and journals provide slideshow views there is no way, as far as I can see, to show these elsewhere.

Finally

I still like to play with putting photos on a map: A Mapped Walk and a have a reasonable workflow that let me put that together in about 20 minutes. I also like messing with panos so here is one from the same walk:
Ben Challum Pano.

Haiku Deck is

the simple new way to create stunning presentations – whether you are pitching an idea, teaching a lesson, telling a story, or igniting a movement, it’s fast, fun and simple for anyone to use.

Says Haiku Deck. It is an iPad application for making presentations. Very simple to use and the defaults look nice.

That took about three minutes to knock up. The main feature, based on three minutes use, seem to be a nice search to find images to match your words. Looks like it searches Flickr and some other sources. It does some sort of cc search. I don’t think it quite respects the license though. This image:

Winner

By David Muir is licensed under a Creative Commons — Attribution-NonCommercial-NoDerivs 2.0 Generic — CC BY-NC-ND 2.0 license. Unfortunately the app does not seem to do the attribution for you.

Haiku deck says:

Where do Haiku Deck images come from?
Haiku Deck finds images from across the Internet that photographers have licensed under the Creative Commons license. Some Creative Commons images carry a “not for commercial use” restriction. If you’re making a Haiku Deck for commercial use, please be sure to turn the “commercial use only” filter.

I am not sure that is in the spirit of the attribution part of the license?

It does however make a very presentable presentation pretty quickly, saving to the web, announcing by twitter and providing an embed code. It also exports to PDF via mail.

The price is right, free with some paid for themes, the app is extremely easy to use and if they added attribution to the images it would be even better.

Update, my bad: I had adjusted the embed code to fit the iframe into my blog the attribution appears on the Haiku Deck website: Radio #EDUtalk – A Haiku Deck from Giant Thinkwell and on the embed if you don’t mess about with the code to resize the iFrame. Apologies to Giant Thinkwell.

So here is the attribution copied from the Radio #EDUtalk – A Haiku Deck from Giant Thinkwell page:

Much to my embarrassment I asked about this on twitter: Twitter / kleneway: @johnjohnston @HaikuDeck you …

Update 2: I’e also noticed a nice feature, republish a slideshow with an extra slide updates the original and the embed.

Blogged with a hand knitted system

Flickr cc Picmonkey

Every so often something nice happens:

Which made me look again at the flickr CC search toy. A while back I posted about Picnik closing and then about PicMonkey which is a picnik replacement. The nice folk at PicMonkey let me know that the picmonky API is the same as the picnic one, so I thought I’d swap them out. As you can see from the screenshot, if the images found in the flickr CC search toy allow editing (ie NoDerivs is not in the License) there is a link to edit the picture in PicMonkey. I’ve changed the way this works so that PicMonkey will load the medium sized photo with the attribution stamped on it, rather than the original flickr image. Before I was expecting pupils to be able to add the attribution themselves if editing the picture.

I’ve also added a checkbox to the search form to only search for pictures you can edit.

The code behind this, php and javascript is a very messy affair. I intend to work thorough the whole thing sometime and make it more efficient etc.

If you have ideas of how this could be more useful to primary aged pupils please let me know.

Last week I was in a class doing another setup a blog/eportfolio session using Glow blogs. The process is a bit long winded due to the way glow blogs are set up. Usually there is little time to do much more than set them up and get the pupils to do a quick test post. I usually just get pupils to use a bit of clipart to show tem how to add an image. O this occasion there was a fair mix of machines and operation systems in the room and not all had clip art. I decided to use A flickr CC search toy to let the pupil download photos with attribution stamped on. This worked fine, but there was a little confusion about naming saved files, the file name suggested is stamp.php.jpg as the images, with attribution, are generated on the fly.

This weekend I had a quick google to see if I could find out how this can be improved. I am now using:

header('Content-Disposition: inline; filename='. $title .'.jpg' );

To give the files a title derived from the flickr image title. I also found I could cause the image to be downloaded by using Content-Disposition: attachment but decided against that at the moment. Now when pupils right click on an image they should see something like this:

Flickrcc File Dialog

Another alternative would be to show the image on a page with instructions on right clicking to get the save dialog. Again I’ve not implemented that either.

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.