Wireframes, Prototypes & DSpace web customization
Friday, November 30th, 2012Those five words were quite popular in my to-do lists in November … first, they make up more than a third of the requirements for a new and exciting job description we’re working on; second, I spent some good time working on a couple of fixes for the DSpace mobile theme; third, I recently added a few jQuery lines to embed videos in DSpace; and finally, this week I sat down with a faculty for 1.5 hours prototyping a new website for one of her projects –in this session, we created three wireframes and today I actually worked on the first one, which obviously required some HTML & CSS editing –and some image tweaks in Photoshop as well. Speaking of prototypes, wireframes, and web customization … two great video tutorials I recently saw in Lynda.com are: Creating an Effective Content Strategy for Your Website, where the author talks about how to think strategically about content in many formats (text, images, videos, animations, and infographics); and Interactive Data Visualization with Processing, where the author presents techniques on how to start communicating ideas and diagramming data in a more interactive way.
As for DSpace tweaks, we continue to add video content to our Scholarly Commons site; the current OhioLINK approach is to upload an mp4 file and a special flash theme streams the content in DSpace, this method works great on computers … however, on devices with no flash support (e.g. iPad) users simply cannot get to see the video. In theory, a possible solution would be to use HTML5 video standards; in fact, I ran a couple of test using http://videojs.com but there seems to be a limitation -at least during my tests- with large videos (30+ minutes), sometimes it’ll take for ever to start playing … and because many of the videos on our site are over 30 minutes, I decided to go back to a video theme I created a year ago. This video theme relies on videos hosted on Vimeo; the trick is to upload a copy of the video in Vimeo and add the vimeo URL in the metadata (e.g. dc.relation.isversionof: http://vimeo.com/17095108) … and with the following jQuery lines, “all” users will get the see/play the video; if the device/browser supports flash, it’ll play the regular mp4; if not, it’ll embed the vimeo file. Examples include the videos in the Open Access Week collection. BTW: the audio in one of the videos was “low/noisy” … so the workaround was: a) export an mp3 file from iMovie; b) use Audacity features (amplify and noise filters) to enhance the audio and export a new mp3 file; c) import the new mp3 in iMovie; and d) create an mp4 file using MPEG Streamclip.
// detect non-flash support if (typeof navigator.plugins['Shockwave Flash'] !== 'undefined') { // if supported, then do nothing // alert('support'); } else { // hide mp4 and embed vimeo file -if exists- // alert('no support'); // check for number of links if (($("div#ds-body div#aspect_artifactbrowser_ItemViewer_div_item-view table.ds-includeSet-table a").length) > 2 ) { $("object").hide(); // select vimeo file URL var htmlStr = $("div#ds-body div#aspect_artifactbrowser_ItemViewer_div_item-view table.ds-includeSet-table a:eq(1)").html(); var htmlStr = htmlStr.replace('http://vimeo.com/', ''); // replace mp4 code with vimeo iframe var htmlStr = $("object:first").replaceWith ("<iframe src='http://player.vimeo.com/video/" + htmlStr + "' width='500' height='375' </iframe>"); } else { // no vimeo file for this record $("object").hide(); } }
As for the VIDEOJS, we’re most likely going to use it for another project where the average run-time is 2-5 minutes … cannot wait to test something with the caption option! Last but not least, two recent news: my article in Spanish on Open Access & Latin America is now officially online; and a late email exchange this afternoon confirmed that DSpace 3.0 has been officially released … I have to say that it’s absolutely great to see the “mobile theme” in this new release … saaaaalu’
.