Elias Tzoc blog!

In early 2012, as I was finishing up with my annual report -and in consultation with my supervisor- I decided to add a “mobile theme for DSpace” to my summer to-do list …  why a mobile interface for DSpace? well, I kind of had three reasons/justifications for this: a) I wanted to learn a bit more of the jQuery Mobile framework; b) we wanted to have a mobile interface for our Scholarly Commons project; and c) there was no mobile theme for DSpace -at least not back then.

The real “adventure” started in late May when I sent a message to the DSpace-tech listserv, the replies confirmed that a JIRA ticket for this topic was created back in September 2011 … I also got some good ideas about the actual implementation of a mobile theme.  The next step included some “basic” planning which included two key activities: a) creating a wireframe for the mobile interface; and b) researching for some mobile “best practices” out there.   For the wireframe design, I tried to stick to some basic rules such as “data entry on mobile devices should be minimized” or “keep it simple and clean” … so because of those rules, I took the liberty to make some decisions/assumptions.  For instance, the DSpace mobile interface will be for regular DSpace users; therefore, it was ok to remove the entire ds-options sidebar, which usually contains all of the “administrative” functions.  For the research activity, it was absolutely useful to spend part of a Friday afternoon watching the Mobile Web Design & Development Fundamentals tutorial by Joe Marini.

In mid July, I had a mobile theme running on a second copy of the XMLUI webapp in a DSpace 1.6 installation -now, I know that this is probably NOT the best way to do this- but back then this was the only way I got it to work and it allowed me to continue to test/tweak some CSS, XML, XSL, and JS files.  One of the most special -but also trouble and confusing- days was when I installed a couple of device emulators.  The Opera Mobile Emulator & the Android SDK were very useful in testing and adjusting the site to small screen sizes (even 320×240); the iOS Simulator worked just fine; but the real headache was with the Windows Phone Emulator because it simply didn’t work … after a good time researching about the “not loading” error, I learned that it was an HTML element without a closing tag

In early August, a colleague and I run some last tests and we believed it was time to share the link with others and start collecting some feedback … at the same time, we wanted to test the new theme on an OhioLINK test machine.  I soon learned that duplicating the XMLUI webapp was neither effective nor sustainable -especially in a shared infrastructure.  This is where two developers at OhioLINK came up with a solution -using a second domain name- that works great and looks robust.

And today, we’re pleased to actually see it up and running on a production machine.  So if you’re curious about it, please visit http://sc.lib.muohio.edu/ and if your device isn’t detected as mobile, try this URL http://mobile.sc.lib.muohio.edu/.  As with anything “new” … there is definitely room for improvement and we’ll welcome comments and feedback

.

Two summer activities are keeping me well entertained … so whether it’s learning and testing out a new trick for the DSpace mobile theme or discovering the excellent transcription work being done for our own Música Colonial digital archive … the last few weeks have been quite interesting

The mobile DSpace theme is already in progress -almost there, the image on the right is an example of a quite complex page now with a clean and fluid look and feel.  The real test is available at our own DSpace test instance.   jQuery Mobile provided a key start for this work and the magic of its ThemeRoller generator is an excellent reason to stick to this option as much as possible.  Anyone who’s done some theme customization in DSpace knows how hard it’s to find and control the appearance of certain elements –e.g. div.pagination or form.ds-interactive-div.  A major challenge I’ve found so far is adding HTML5 attributes to elements that are dynamically generated and that are context sensitive (e.g. collection list or view).  For a couple of days, I thought using the .html() property to modify the HTML on the fly was the perfect fix; however, this type of tweaks in jQM requires a manual page refresh … so apparently a good plan B will be to go back and rely on some old CSS tweaks, so far, popular and key examples include:

display: none; //hide some extra DSpace elements
-moz-border-radius: 5px; //simulate jQM corners
border-radius: 5px;
min-width: 390px; //control width for some sub-header DIVs
max-height: 90px;

… and speaking of jQuery tweaks, last week we found a bug in our code for controlling the display of videos and images in Scholarly Commons, the lines below were part of the magic.  An examples is here.

// if more than 1 video is found, only embed the 1st one,
// except for objects within the "imageviewer-wrapper" DIV
if(v>=2) {
$("object").hide();
$("object:first").show();
$("object", "#imageviewer-wrapper").show();
}
else {
$("object").show();
}

As for the Música Colonial project, in June I “discovered” an entry about this project on the Choral Public Domain Library (CPDL) … and perhaps the most interesting discovery was the 20+ pieces of work already transcribed with PDFs and MIDIs by Jonathan Goodliffe –an excellent and recent example is “A la reina del socorro”; We’ll definitely include links to the corresponding items in our upcoming website for this project.  In the meantime, thanks Jonathan for all the work you’re doing and YES “the online collaboration was at the very heart of the original idea of this project” and with this type of help, someday we may be able to transcribe the entire 800+ items in the collection.

… hasta la próxima!

.