Tag: javascript

Posted on
by

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.

Posted on
by

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?

Posted on
by

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.

Posted on
by

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.

Posted on
by

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.

Posted on
by

Mp3s_in_glow

A while ago I blogged about adding some functionality to glow: Glow Kludges, in a fairly crude way. This technique for embedding players for audio and video content into glow semi- automatically has proved useful to several teachers and classes and in a few groups I’ve created.

I’ve managed to refine some of this a bit recently for both audio (mp3) files and some video formats, this is one of the improved techniques.

Again the idea is to replace a link to an mp3 files in a glow document library with an embedded Flash player. This avoids users having different behaviours when clicking on a link to an mp3 depending on their operating system, browser and settings

We use 2 JavaScript libraries jQuery and the jQuery SWFObject Plugin and a small fragment of code, links to the libraries (jQuery is hosted by google and can be loaded from there, I’ve uploaded jQuery SWFObject to some glow webhosting space) and the Dewplayer Flash mp3 player.

The links to the libraries and code are put in a glow xml webpart:

//first link to the 2 libraries
<script type = "text/javascript"src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" > </script>
<script type = "text/javascript"src = "http://publicwebsites1.glowscotland.org.uk/jjjs/jquery.swfobject.min.js" > </script>
 <span style="color:#0080FF">// now replace links to mp3s with flash player</span>
<script type = "text/javascript "charset = "utf - 8 " >
$(document).ready(
function() {
// href$=.mp3 is the selector finds all links to mp3 files
    $('a[href$=.mp3]').each(function() {
        audio_file = $(this).attr('href');
        $(this).flash(
        {
// dewplayer.swf is the flash document hosted in a glow webhosting site
            swf: 'http://publicwebsites1.glowscotland.org.uk/jjjs/dewplayer.swf',
// these arguments will be passed into the flash document
            flashvars: {
                mp3: audio_file,
            },
            height: 20,
            width: 200,
        }
        );
//we need to stop the link to the file working
        this.onclick = function() {
            return false;
        };
    }
    );
});
</script>

Basically with the above snippet of code in an xml webpart any links to mp3 files on a page will be converted into a flash player. The xml webpart can be hidden by setting its titlebar to none. When pupils upload mp3 files into a document library on a page the flash players will be embedded.

jQuery is an extremely powerful javascript library that is easy to use by folk like me with very limited JavaScript knowledge and very useful for adding functionality to glow.

By the By anyone interested in altering glows appearance should check out the Consolarium group, Charlie Love has sorted out how to apply a custom theme to the pages there and posted an explanation and resources on his blog.

Posted on
by

A short while ago I wrote about using JavaScript in glow: Glow Kludges and noted that Fraser Davidson had briefly showed me his use of XSL in glow. I had hoped to catch up with Fraser to find out more about this, but have not managed to yet. He had mentioned that it should be possible to combine Javascript with the pages produced from xml (say a rss feed) and styled with XSL.

This weekend I was looking at this again, due to the horrible weather, and started googling XSL, while I’ve not got a real(any) understand of XSL I have managed to do my usual copy, paste & mangle and got some interesting results. I was able to take various rss feeds, format them with XSL and then insert media players with JavaScript. I don’t really know enough to understand this, but have made a wee screencast to some of the things I’ve been playing with.

One tip I do have for editing xml and xsl in glow is not to use the glow interface, just set links to your XML (and optionally XSL) in the XML webpart. These file then can be edited and updated without going into the glow ‘modify shared page stuff’ trying to edit the xml or xsl in Safari or firefox in a tiny text box is a pain.

I’d be interested in working with other glow folk to see where this could go, I wonder if a national group could be set up for discussion and testing.

It does make me wonder why these potentially powerful techniques have not been explained or documented by LTS or RM they would have answered many of the folk who were disappointed by lack of RSS support in glow.

The screencast is pretty rough, more of a thinking aloud one while looking at the screen than a planned out video, but I’d be keen to know what you think about this.

Original video replaced by vimeo copy (11.07.2011)

Posted on
by

This was going to be my TeachMeet talk at the Scottish Learning festival this year, if my name had been pulled out of the virtual fruit machine.

kludge: (a badly assembled collection of parts hastily assembled to serve some particular purpose (often used to refer to computing systems or software that has been badly put together)) wordnetweb.princeton.edu/perl/webwn

The kludge refers in this case to my, fairly clunky, attempts to change some things about glow’s interface.

I’ve had a love/hate relationship with glow since I first saw it; I love the concept (What is Glow?) and hate some of the GUI and user experience. Since watching and being a little involved in glow training I hate some of the difficulties folk have doing simple things but I love seeing the inspiring work teachers and pupils have done in very a short space of time. (I saw great presentations from Marjory Murphy and Geraldine Shearer, both from North Lanarkshire, in the glowing lounge .)

Last week I was working with a primary 6 class using GarageBand to create some simple music, the idea was then to upload the pupil files to a glow group into a document library and discuss the music in a discussion forum below.

The group is a local Authority one, and the hope is that eventually pupils may comment and assess work from other classrooms and schools.

Glowdocs

Unfortunately when the children started trying to listen to each others music, the files downloaded and opened in itunes, rather that just played in the browser. This lead to a little confusion and made it hard to move from listening, back to the browser and into a discussion.

I had been using an xml webpart at the top of the page, to make the glow page a little prettier:

Garagebandglowtop

So I started copying the links to the mp3 files and using dewplayer to provide a flash player. It quickly became apparent that this was going to make the page very big and the players would be separated from the discussion by the document library. It would create a lot of work for me and would not be easily for most teachers to duplicate. I really wanted to automate the process and I’ve found one way to do that.

I’ve seen and used the Anarchy Media Player on many blogs. This is a JavaScript solution for turning links to media into media players:

Anarchy Media Player 2.5 for WordPress, WordPressMu and Standalone Javascript will play any simple href link to mp3, flv, Quicktime mov, mp4, m4v, m4a, m4b, 3gp as well as Windows wmv, avi and asf files, in the appropriate player on your web page.

I though I might give it a try. I need to upload a folder full of various files to a website outside glow, as I could not get Glow to accept a JavaScript file in a document library. Once I’d done that I needed to do some simple configuration and then added this fragment to the xml webpart:

The automagically turned the document library above into this:

Glowdocswithplayer

Each link to an mp3 file is changed into a flash player which plays that file.

Brief testing seems to show that this will work for .mov .flv video files too. There seems to be some browsers issues which I am testing. I’ve also tried a few experiments with the shadowbox-js media viewer and the jQuery JavaScript Library with some success, again a lot of browser testing to do. My Javascript knowledge is minimal to say the least but I had a couple of brief conversations in the glowing lounge at the Scottish Learning festival this week and was introduced to Fraser Davidson who works for RM supporting glow. He showed me some lovely stuff he has been doing with XSL to embed and beautify various feeds into glow. He also told me, if I picked it up correctly, that we could export and make available an xml webpart that already has the Javascript links and code to produce the sort of transformation of a document library I’ve been playing with. That would mean that folk would just need to add a webpart to their page to get the same sort of effect, no coding needed. I am hoping to get together with Fraser to find out more and swap ideas.

Later today I hope to attend the Glow Development Needs You! event at LTS and find out more about some alterations and enhancements of glow. It looks like there may be quiet a lot to look forward to in glow soon.