Wireframes, Prototypes & DSpace web customization


wireframe-exampleThose 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.

dspace-logoAs 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’ :-)

.