I’ve had a long term interest in digital ‘fridge’ poetry, making my first efforts with Flash around 15 years ago. A year or so ago I was excited by Fridge Poetry – Google Sheets as Database by Tom Woodward. There were a couple of goodies in that post, getting the word list from a google sheet and a nifty way to allow folk to easily make their own. I made a sheet and a poem and slotted the idea away.
I’ve revisited Tom’s post (and others) a few times, gathering tools 1 and wondering.
On the holiday weekend, given poor weather and a head cold, I revisited the idea and made my own Fridge.
This riffs & extends the idea a wee bit:
You can add a background image to the poem, either from a built in flickr search or a local one.
There is a standard common word list and a topical one from the google sheet.
The words in the lists can be used more than once.
I used JavaScript as opposed to php (except for proxying images to allow you to export).
You can export the poem as an image.
I’ve edited Tom’s template a little, the new one:
Automatically generated a link to use. Tom got you to copy paste in the sheets own url and parsed that.
Adds a field for the image search.
Make a List this link should get you to create a copy of the list spreadsheet. You can edit the words (on the 2nd worksheet) and change the image search, more info: Fridge Poetry.
Learning
I’ve gained a wee bit more JavaScript and jQuery. The idea of using Google sheets to populate a webpage or to display info from a sheet in a template is interesting. html2canvas is another tool that has interesting potential for storytelling on the web.
Using /copy at the end of a google sheet to allow anyone to make a copy is useful too.
Finally the ability of google sheets to get the id of the current sheet is really handy in simplifying the creation of links. This relies on a very simple script:
function getSheetID() {
var r = SpreadsheetApp.getActiveSpreadsheet().getId();
return r;
}
you can then get the id by typing =getSheetID() in a cell.
Next
There is more help on how to make and use a wordlist here: Fridge Poetry.
Hopefully someone will find this fun of useful, if you do and create new wordlists please let me know.
I’ve been following the work of Dave Winer for a while now. His pioneering work with RSS, blogging and podcasting is central to my use of the web. I’ve even dipped my toes into and blogged about Fargo his outliner tool a few times, I tried myword.io a couple too.
The product I am most interested in was the Rivers project. This is a take on RSS readers, where you view collections of RSS in a stream, rather than a folder structure.
In the past I set up River3 and River4. These products really need a server that goes a bit further than web hosting. I had some working locally but this was not ideal. The instructions for using the previous version of River tended to involve Amazon Web Services and a server elsewhere.
River5
River5 changes all of this, it is designed to keep everything in the same place, one server. The only difficulty is that it requires a server running node.
This is pretty simple to set up locally on a mac. You need to use the terminal. You install node. Then you follow the instructions on the River5 github page and you are away.
What is very nice indeed is that you can add feeds you want to read in several different formats opml (handy for export from other RSS readers), json and plain text. There is a set of example feeds provided that will let you see everything is working.
I wanted to be able to have the rivers running all the time and be accessible from other computers. For that I need a server that I could install and run node on. Turns out I have one, john’s pi server. That sits on my window sill mostly taking pictures of the sky. It was running a twitter bot but that is broken at the moment.
Setting up River5 on a Raspberry Pi
I do most things on my pi via the terminal on a mac or iPad, suing ssh to logon.
I had installed node on the pi a while back.
Download the latest: wget http://node-arm.herokuapp.com/node_latest_armhf.deb
then install:
sudo dpkg -i node_latest_armhf.deb
I seem to have done that a while back when I was failing to get something else up and running.
All I need to do to get River5 installed was to download the files from github and upload them to the pi with scp.
I then unzipped them went into the folder and ran these two commands:
npm install
node river5.js
This set everything up, a plie of stuff streams by in the terminal and all looked ok. (I had problems the first time I tried but an update came out immediately that fixed things for Linux servers. I got a very quick response on the River5 Forum).
My Pi already has a sub domain so I visited http://pi.johnj.info:1337 and could see the rivers flowing with Dave’s Feeds.
I’ve now removed the original ones and replace them with lists of feeds of my own.
Rivers Forever
After that I went to bed, next morning I tried the link and it was down. The problem is I need to keep the application up and running even when I am not logged onto the server. I recalled reading on Dave’s blog about Forever. As usual google found the instructions to install and use: Keep a node.js server up with Forever.
This is pretty simple you install Forever with:
sudo npm install forever
npm is a package manager for JavaScript so it installs stuff.
After it is installed we can start up the river5 with: forever start river5.js and it keeps going.
Mine has been running for a few days now on the pi without any problems.I’ve been enjoying an alternative view of some of my RSS feeds. My next steps are probably to move things around a bit so that I don’t relay on the built in node server, and can pull the river json over to here.
I am pretty amazed by the ease of doing this. The software has been made to be very easy to install and the Raspberry Pi turns out to be a very capable wee box.
It is National Poetry Day. When I was in class I always wanted to do something for this, but only occasionally remembered. Although I don’t have a way with words I like working with poetry in the class. I also occasionally like twitter haiku and the like.
The really interesting thing 2about this is that Tom has set it up so that it is easy to make another fridge with different sets of words. He even has a link on his post to create a copy of the google spreadsheet to make your own copy (you need a google account, a low entry bar). The sheet itself has the instructions.
If you open a link to the new MS 365 bit of glow you are taken, if not already logged on, to the general sharepoint logon page. There you need to fill in your 365 user name, which is your glow email. When leaving the username field you are then taken to the normal glow logon page when you enter your username (not you email) and password.
This is not a problem if you are already logged into glow when you click the link. It is a problem if you click in a link in your email, don’t use glow for email and may not even know what your glow email is.
I though it might be an idea to try and make a one click solution to the workaround above. It seems to work: Simplify Glow Sharepoint links.
That page gives a field to paste in a url, it converts this to the encode url and finally shortens this using the tinyurl.com service. The example above is turned into http://tinyurl.com/om8hohs. This takes you first to the glow logon and then to the correct page.
Warning: I am not a programmer, my knowledge of JavaScript comes form google, there is a php element in the mix too, it does seem to work and after sharing it at the Glow Key Contact meeting Malcolm Wilson added it to the Falkirk glow home page.
Improvements
Apart from someone who knows what they are doing editing the script, I though one way to make it more useful would be to make a bookmarklet. This lead to a fair bit of lost time as I could not get it to work due to glow using https and my files sitting on a non secure server (here).
A wee change of tack gave me this: GlowShortLink. Drag that to your bookmarks bar. Then when you are on a page which you want to link to. click the link. It will pop open a new window with a short link.
I’ve only tested this on a mac, using Safari, Firefox and Chrome. It seem to work fine. I’ll try it out on Windows and IE next week.
These are some technical notes on some of the changes I’ve made to the standard WordPress site for EDUtalk, I am not sure if they are of much interest to anyone but myself, but writing them up here will, 1. get them clear in my mind, and 2. provide a reference.
The site is running on WordPress 3.5.1. I made a child theme as I wanted to edit some of files and mostly be upgrade proof.
If you have no interest in this you might be interested in the main facts of the move: EDUtalk Has Moved, or just head over to EDUtalk and listen to some great audio.
Plugins
Akismet, spam protection, pretty much a no brainer.
FeedWordPress, this is very much at the heart of the new site, this plugin allows you to syndicate content from other sites, in our case audioboo boos tagged edutalk and iPadio phlogs with the same tag. Posts form these sites with the tag are added to EDUtalk. The plugin also allows us to make the titles link to the original site rather than our own post page, I believe this is a better way to do things for the authors who submit content by tagging.
MediaElement.js – HTML5 Audio and Video, I installed this initially but it is now turned off. Instead I have used this JavaScript myself. As I understand it the plugin will provide html5 and fallback players for audio inserted with a short code player. As a lot of our content comes via FeedWordPress it would not work there unless we manually edited posts.
The Safe Redirect Manager plugin redirects links from the old site to the new one, for example, /pages/radio-edutalk to /listen.
Child Theme Files
It seems that the way you best edit a WordPress theme is through Child Themes, this avoids problems when upgrading.
I started by copying the content.php file from the theme to the child theme folder. Here I edited the php to add an html 5 audio player to the top of a post, if the post had an enclosure. I used:$enclosureData = get_post_meta($post->ID, 'enclosure' ); to find out if there was an enclosure. I had a bit of hassle as Audioboo encloses images as well as mp3s, but looped through the enclosures and used the first audio one I found.
I had to edit the main theme function.php file to comment out a bit of code that removed enclosures if they were not linked in the post. This proved a problem when doing some manual edits of the imports. I got information on how to do this from this post: How to stop WordPress 2.8 – 3.5 from deleting enclosures | Kevin J Edwards. The main tool used in building edutalk.cc was google. In this case I edited the theme’s own function.php file, rather than the child themes, as the child theme’s function.php is added to, rather than replacing the parent theme. If there is a better way to do this, I’d like to know.
I did create a child theme function.php and added functions to include the jQuery and MediaElement.js. I then copied the footer.php to the child theme and added a script to added a flash player to the audio tags for browsers that do not play mp3s natively.
Originally I added a bit more jQuery to hide the audioboo and ipadio players and maps in the post. They were not making the posts look very nice, and I found it difficult to style them. Later on, as I found that the pages were loading very slowly, I went back into the content.php file and added some code to only show the post content, if it was in the Radio Edutalk category. Even with only 6 posts per page this made a huge difference in speeding up the page loading (twice as fast). I changed:
5 being the category for Radio Edutalk, I’ll be adding another category for mailed in audio if needed. Thinking about it it would be best to change to not in the audioboo and ipadio categories.
Altogether it was not very hard to figure this out with the help of google. WordPress is extremely well documented. The code is also easy to edit, without having to understand the whole thing. There are probably a lot of better ways to do this, and I’d be delighted to find out.
I’d also be interested in any other ways to improve the site, speed it up or add useful features.
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.
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:
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.
var iframesArray= document.getElementsByClassName('ifr'); this gets an Array of all the divs with a class of ifr.
for (var i=0; i < iframesArray.length; i++) { we then loop through all of the divs with the class.
var iframeDetail=iframesArray[i].innerHTML.split(','); we make a new array splitting up the content of the div, id URL,Height and Width
var newHTML='<iframe src="'+iframeDetail[0]… we make an html fragment for the iframe
iframesArray[i].innerHTML=newHTML; and replace the contents of the div with the iFrame code
}; 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.
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.
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.
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. I’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:
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
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 ↩
