As part of etmooc we are encouraged to use a variety of Storytelling tools. I’ve spent a fair bit of time over the last couple of days animating gifs but though it was time to step out of my comfort zone.

I decided to choose something from 50+Ways – Tools A to Z @cogdogs wiki of online storytelling tools.

My problem was twofold, I need to decide what tool to use and what story to tell. Time for avoidance tactics, a bit of light coding, to come up with a way to choose a way.

I ended up with Which Way? a simple page that will give you a randomised choice from the 50 Ways list.

Still without a story I decided to use one of the tools to explain what I’ve done, a couple of click gave me VoiceThread. I am not sure if it ois the best tool for this particular job but it is quick and simple to use, a bunch of screen shots and a mic.

ipad coding

A while back I noticed a post on the glow forums (glo login needed) where someone wanted to embed a google calendar on a glow blog. The problem is that the glow install of wordpress does not support iFrames (it does support short codes from youtube and vimeo).
After thinking about his I posted a solution that uses JavaScript, the suffusion theme supports adding a buit of JS to the blog template. this is the result: School Calendar » John Paul Academy

About a week ago I had an enquiry at work from a local school on how to add iFrames to their school blog which was fortunately using the suffusion theme. I revisited the code and made it a little more flexible. It is pretty simple stuff but seems to do the job.

You can add JavaScript to the Custom Footer JavaScript field in the Blog Features– JavaScript to the Custom Footer JavaScript in the Blog Features- Custom Includes section of the suffusion theme settings. section of the suffusion theme settings.


	var iframesArray= document.getElementsByClassName('ifr');
	for (var i=0; i < iframesArray.length; i++) {
	var iframeDetail=iframesArray[i].innerHTML.split(',');
	var newHTML='<iframe src="'+iframeDetail[0]+'" height="'+iframeDetail[1]+'" width="'+iframeDetail[2]+'" seamless="1" frameborder="0"></iframe>';
	iframesArray[i].innerHTML=newHTML;
	};

Once that is added you can add a iFrame to a post or page by adding this sort of text with the html editor:

<div class="ifr">http://johnjohnston.info/flickrSounds/show3.php,400,500</div>

The above will result in an iframe showing the page http://johnjohnston.info/flickrSounds/show3.php with an iFrame height of 400 pixels and a width of 500 the idea is to be able to control the ifRame height and width.

What does the code do

For any other JavaScript neophytes out there this is what happens:

The code runs every time a pages is loaded.

  1. var iframesArray= document.getElementsByClassName('ifr'); this gets an Array of all the divs with a class of ifr.
  2. for (var i=0; i < iframesArray.length; i++) { we then loop through all of the divs with the class.
  3. var iframeDetail=iframesArray[i].innerHTML.split(','); we make a new array splitting up the content of the div, id URL,Height and Width
  4. var newHTML='<iframe src="'+iframeDetail[0]… we make an html fragment for the iframe
  5. iframesArray[i].innerHTML=newHTML; and replace the contents of the div with the iFrame code
  6. }; finally close the loop.

I am not sure how much longer glow blogs are going to be wordpress ones:

Glow Blogs (e-portfolios and school sites) – Stakeholders raised concerns about the plan to migrate away from the current WordPress implementation of Glow Blogs. In response to this, and to increase user choice, we continue to seek clarification on the feasibility of making available a new installation of WordPress that will be available in parallel with SharePoint Online. In the meantime you have my assurance that the data sitting in the current version of WordPress will continue to be available to you while we consider the next steps.

from: Glow Scotland » Glow – December 2012 update from Craig Munro

I really hope that we will not loose the traction gained by training many users, teachers and pupils in the use of wordpress blogs over the last year or so.

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

Last Sunday in the Observer I was reading Why all our kids should be taught how to code and have been following with great interest the boos by Alan O’Donohoe (teknoteacher) Submitted to EDUtalk
I am also interested in the difference between digital literacy/ fluency and coding beautifuly described by Josie Fraser in response to Mr Gove’s surprising enthusiasm for coding SocialTech: Computer Science is not Digital Literacy:

It’s dismaying then, to see in a week where we are seeing a huge move forward in the promotion of technology and a fresh look at how ICT as a subject area is designed and implemented in schools, to see digital literacy being used as an interchangeable term for computer science skills.

With the introduction of iPads into the mix as a really powerful tool for curricular ict. I am also intrigued by the tension between this back to programming and the use of ict to support learning. Brief visits to the primary classes piloting 1-2-1 have been exciting and gone a long way to convincing me that this is an important direction for ict in education.
Although I hope the iPads are only for consumption myth has been put to bed I’ve been wondering if there are ways they can support programming in education. It has often been pointed out that the reluctance of Apple to allow apps that produce executable code will hinder their use for coding.
(As a primary teacher this is well out of my depth or experience but fun as a sort of thought experiment.)
Some of the efforts to enthuse pupils and others in coding have started with HTML, CSS and JavaScript. (Hackasaurus and the like links). I though that might be a good place to start.
photoI’ve blogged before about Textastic – Text, Code and Markup Editor with Syntax Highlighting – FTP, SFTP, Dropbox – for iPad, the web page title says most of it.

a challenge of sorts

I though I’d give it a go and create a page or two with some sort of JavaScript stuff. To keep things nice and simple I thought I’d use the Dropbox functionality to publish the pages created to my Dropbox public folder. In a teaching situation this would avoiding FTP uploading.

templates and images

The first nice thing I noticed was that textastic supplies a few basic html templates which gets you off to a nice start. I created a folder in textastic then some files. Next I clicked on the globe to access my Dropbox. You see a listing of a local folder and one in Dropbox it is simple to transfer files back and forth. You can also pull images in from Dropbox to the textastic folder if you want to added images to your web page. This means a trip to the Dropbox app to add photos to that folder from the iPad photos.
I could not find an app on my iPad that would let me resize images where I could see pixels rather than manipulating with my fingers, but I am sure such an app exists.

auto complete

Textastic supports autocomplete in a TextMate like way type a < and say a p it pops a list of possible tags, selecte one and it is completed. The app then put the cursor in a good position, eg between the opening and closing tag of a paragraph to ready to type in the first parameter of a link. With more complex tags it wil select the first edit then tab through the other section indicated by a wee triangle:


update: the first image I uploaded Looked ok on the iPad but was unreadable on my desktop. I’ve replaced it. Image editing for blogging is a bit of a challenge on the iPad, but I am learning.
It was pretty simple to create a HTML page and link it to a CSS file in the same folder in textastic, easy to publish both to Dropbox. Textastic allows you to locally preview and it is easy enough to switch to Safari too.

JavaScript challenge

Since I know little JavaScript this should be a fairy realistic test of the iPad as a tool to learn coding. I decided to try assignment 3 from Mashups: Remixing the Web a course from New York University. The assignment was to create a lolcats memory game. I decided to make one with Flickr images. There are a few good hints in the assignment but I need to do a few things: look up JavaScript references on the web, preview and debug. Reference was easy to do by switching to safari and searching. Textastic supports preview and firebug. I also turned on the safari debug console. Textastic supports auto complete for JavaScript too.
The result is not a polished or complex piece of work, but I’ve stretched myself a wee bit. And managed to stick to the iPad throughout.

update a couple of tweets from @fraserspeirs who will know a lot more about this than me:


– Posted using BlogPress from my iPad

Location:Crow Rd,Glasgow,United Kingdom


One of the things I’ve really been enjoying about DS106 is riffing off the ideas of Alan Levine (CogDogBlog) like many edubloggers I’ve been following and being inspired by his blog for years. 50+ Web 2.0 Ways to Tell a Story is a standard teacher 2.0 text I’ve also, like many, used Feed2JS on several occasions. A while back I even tried to get a piratebox working after reading of the Storybox.

Anyway it is great to watch Alan teach his ds106 sub group and to follow his hyper activity on his blog. The other day, playing with the current #ds106 audio section he blogged: CogDogCodeAcademy: A Random Freesound Generator – CogDogBlog, this struck a cord as I recently posted #edtechcc Assignment 2 The Sight of Sound using the wonderful Freesound site. Revisiting it and looking at Alan’s code I notice that Freesound has an API. This looked interesting. I’ve now managed to create what I hope may be a ds106 Assignment flickrSounds.

flickrSounds

flickrSounds is a simple mashup that searches Freesounsd and flickr for the same word. It then display the sound and picture. You can reload either until you get an image and sound you like. This can be added to a list, and the exercise repeated. Once you have a set of picture/sounds you can grab an embed code to put hem on a blog. A set of pictures/sounds could create a story, illustrate a quote, saying or slogan.

Example

This is for searching for ds106 4 Life. I clicked through a few images and sounds for each word.

ds106

by electrovert
Attribution-NonCommercial License

intro.mp3
4

by California Cthulhu (Will Hart)
Attribution License

4-23-10 20 distort.wav
life

by dingatx
Attribution-NonCommercial License

lookoutbehind.wav

DS106 and Over Branding

Jim Groom Color

I’ve built in a Jim Groom busy widget into the webpage, the default search is dog, my example plays off the ds106 4life meme. Stephen Downes suggested in a comment that ds106 might be being over-branded I love ds106 but I think it’s being over-branded, this didn’t go down too well, but has inspired a lot of interesting stuff:, Martha Burtis’ The Cult of 4LIFE a graphic jokey one and I’m Still Chewing on that Over-Branding of DS106 Comment | mbransons and the comments on that post stand out for me.

It was an interesting idea, as someone just joining in I can see what Stephen Downes means. A lot of the DS106 rhetoric is fairly full on, there is a lot of self reference and pride/ego involved. I also could be put off by not sharing a culture with many of the other participants, being much older, having different frames of reference etc. Looking across the Atlantic it there is a very USA vibe. Lots of other folk with different backgrounds would have different reasons, I can see how DS106 could seem a bit hard to penetrate when looked in on. I thought a wee bit before joining in. but…

There are a couple of things that point the other way, DS106 is incredibly welcoming, the instructors are obviously giving a huge amount of time to the course and still have time to engage with the drive-by participants. They even made an effort to include my rather non standard blog RSS feed in the ds106 site. This seems to me to more than compensate for any exclusivity that ds106 might project.

The over-branding can be seen as glue, very important when you are trying to get participants to work together, and is more over more often than not obviously jokey, mocking the course and the organisers. #jimgroomart (eg: Blue Jump Suit #JimGroomArt #ds106:) is just an example, mock the teacher is one way to strengthen the connection, personalise the course, have fun and in weird way honour the amount of effort Jim makes to comment and make folk feel welcome in DS106.

I am also blown away 1 by the delight ds106 participants take in someone else grabbing what they have created and playing with it. The flickrSounds page is an example of this, without Alan’s positive reaction to my first tests I would not have carried on with this and had so much fun learnig a wee bit more JavaScript.

Code Thoughts

The root of this bit of fun was Alan’s post, in it he compares ds106 style learning with the new badges style learning:

Heck, I would rather do my own code challenges than someone else’s monkey see, monkey do. Thats the rub with this stuff, the motivation changes completely when it is something you need/want, versus someone else’s rote exercise for badges.

I commented to the effect that I found codeyear quite useful. I’ve been trying to keep up with the weekly JavaScript lessons there (just 3 weeks behind at the moment), as an afterthought I noted that Freesound have an API. This got me started on flickrSounds. In a way this proves Alan’s point, I’ve spent much much longer playing with this than I have in several weeks of codeyear. Partly because of the intrinsic interest of the task and partly due to Alan’s encouragement (blog comments and twitter).

But… I have messed about with javascript a few times now, but this is much neater code than usual (still horrible but relatively better). some of the improvements came from my experience of another CogDog/ds106 inspired piece Visualize That Quote but partly due to codeyear, where for the first time I’ve had the beginnings of an understanding of the basics of JavaScript.

There is a way to go with FlickrSounds, I need to add the ability to remove sound/pics from a ‘saved’ set and I need to test in IE, I’ve never manages to write any JavaScript that worked in IE first time.

Spirit of DS106

This has not been a ds106 assignment, I’ve not done any this week. I’ve only done one daily create, but I feel pretty much in the ds106 zone this weekend.

Footnotes:

1.
blown away is the nearest I can get to the DS106 comment style. This is much less reserved that my usual nice;-)

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.

Popcorn Hackasaurus

Yesterday I heard a few intriguing boos from Mozilla Festival by Doug Belshaw and Leon Cychwhich sent me on a day trip round the internet. I discovered:

Hackasaurus makes it easy to mash up and change any web page like magic. You can also create your own webpages to share with your friends, all within your browser. for which there is an educators guide and even a lesson plan.

and:

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla’s Popcorn project.

among a host of other interesting things. Rather than blog about it I used these tools to create somethings:

A spoof 2015 BBC News – X-RAY GoGGLES improves pupils performance in exams

Playing with hackasaurus and popcorn

I think that hackasaurus in particular could be very useful in the classroom. Popcorn gives us a way to make complex media projects in particular HyperVidio and HyperAudio which act in the same way as HyperText. I’d love some feedeback on this stuff, if you think it could work in your classroom?

A while back I posted about a system for Simplifying the glow logon I was developing. Hopefully some folk in North Lanarkshire will be using this next term.

Yesterday I was thinking about another way to improve the glow logon screen again along the lines suggested by Sean Farrell – logging into glow at TeachMeet SLF 2010

This is a very simple way to ‘improve’ the glow logon, works in Safari and Firefox and is ready now. It works by using a JavaScript bookmarklet which can be added to your browsers bookmark bar, clicking it on the glow logon page results in:

  1. The font size of the username & password fields is increased.
  2. If you hover the mouse over the password field it will show you what you have typed into the field.

Here is a wee video showing how to add the bookmarklet to a browser and using it on the logon screen.

If you would like the bookmarklet you can get it from http://glo.li/hecNqX.

Or just drag this link to your bookmarks: Big Log On

It should be easy enough to make this work in Internet explorer too.

At the moment the bookmarklet just loads this simple script.

For historical reasons and to give myself some sort of illusion of control I tend to write blog posts in html. I use TextMate and its blogging bundle which does all sorts of nice things to simplify the process: for example dragging an image onto TextMate’s window, uploads the image to the blog and inserts the html code to put it in the post. What is even nicer is that you can drag images from ImageWell after a quick resize or edit without saving it.

I also use SafariStand which added copy html tag to the contextual menu when right clicking on a link and to Safari’s toolbar:

Copyhtmltag

I also save the TextMate files to my dropbox so that I can edit the posts on different boxes.

On the iPad

I am not hoping for the power of TextMate for editing html but wanted to do some blogging from an iPad. I’ve managed ok using the Notes app, and using dragon dictation to ‘write text’ but hadn’t found a solution to some other features. After a bit of testing I’ve now got a fairly useful toolkit.

Dropbox integration, html editing: Textastic allows you to open and save to dropbox, does syntax highlighting and to easily type various characters that are normally buried in the iOS keyboard.

Textastickeys

Images, there is not a way to upload images to the blog that fits in with html editing, but it is easy to upload images with the flickr app to flickr. Unfortunately neither the Flickr App or the mobile version of Flickr do not provide the html code. however toy can switch to the full site which works fine on the ipad. This can be pasted into Textastic. That makes posting images simple if a little long winded: Screenshot, edit in an app, save to camera roll. Open flickr app and upload, open Safari and grab html code, switch to Texttastic and paste.

Getting links, was the last piece of the jigsaw, as well as grabbing html link tags from Safari Stand or CoLT in FireFox, in TextMate you can select some text and press command-control-shift-L and TextMate will use google to provide a link, not always the right one but very useful. Getting links on the iPad was a bit tedious, switching between Safari and Textastic and typing the code, pasting in the url. I did a bit of a google and came up with nothing. I’ve now come up with a simple, if crude, system. I’ve created a bookmarklet that adds a bit onto the top of a webpage with a text box in it, the textbox contains the html tag to link to the page:

Linkhtml

The bookmarklet link has the following code:

javascript: (function(){document.body.appendChild(document.createElement('script') ).src='http://www.littlefishsw.co.uk/link.js';})();

I added the bookmarklet to Safari on my desktop which syncs with my iPad. The bookmarklet uses this JavaScript File, if you care about JavaScript I would not look at it;-) I just kept changing things till it worked for me. I can now add a link to Textastic by switching to safari, loading the page and clicking the linkHTML link on Safari’s toolbar. The switch back to Textastic and paste. As I mention the code is not exactly slick, I couldn’t get mobile Safari to pre select the link (it works in a desktop browser) which would save a couple of clicks but it does work well enough to use if I want to blog but only have an iPad.

I’ve blogged a bit before about adapting glow to show video and audio. I’ve found another way to do it using the TopUp Javascript library and jQuery

Here is a screencast to show how it works:

This goes in an xml webpart in glow:




Here is what is going on:

Line 1 includes the jQuery Library hosted by google.

We then have a simple script using the library.

Line 3 setting jQuery to noConflict, this means that we use jQuery for our main function name rather than the $ shortcut. I am not sure if I need to do this but it fixed some early experiments.

Line 5, this is where we use jQuery, we use it to add a css class of top_up to any link that links to an m4v file.

Line 9 add the TopUp javascript library from gettopup.com. This is enough to make m4v videos play in a popup window but in the last bit of the script we just ajust some settings.