MicroViews: Mobile Views & Inplace Views
Summary
I realize that it hasn’t been a full week since my last post but I figured I should get back into the habit of posting at the end of each week after my blogging lapse. Also I fancied keeping that old adage of waiting around for one blog post and then two come along at once.
During the latter part of this week I have been finalizing MicroViews on the iPhone and have made a start on the last user visible feature of MicroViews, which I have dubbed Inplace Views. Also in a small case of feature creep I have now added links which support social bookmarking for the linked EPrints.
Mobile Views
The main work done on the iPhone view was to ensure that back functionality was supported. This was achieved by using URL fragments. URL fragments are the part of the url that come after a # symbol. Now when you click on a MicroViews enabled link the URL in the browser will change from http://example.com/article.html to http://example.com/article.html#index=main. This doesn’t force the page to change in the browser but it does make an entry in the browser history. As a result I didn’t have to add a lot of extra JavaScript to support back functionality, instead it is now possible to rely purely on the user pressing the back button as the view behaves as though you are browsing normally though different pages, despite never leaving the original page.
There are 4 separate views on the iPhone version of MicroViews. The first is the abstract view which also contains links for getting to 2 of the other views and a link to the EPrint on the repository. There is a view which lists all of the files attached to the EPrint and another which lists all of the social bookmarking links. Then finally at any point, when viewing the MicroViews page, that you turn the device into a landscape perspective you get the image coverflow generated for the EPrint. The following diagram illustrates the different views;
Also the iPhone view now also supports iPod touches after a few minor changes to the browser detection script.
The next iteration on mobile views will be to bring them to the Android platform. Fortunately this shouldn’t pose too much of a problem as the Android browser is also based on the WebKit rendering engine, which is the same rendering engine as used by Mobile Safari. The only issue which prevents a direct port is the orientation detection. Mobile Safari implements a handler which runs a method when the orientation of the device is changed. On Android the browser is aware of the orientation of the device but not when the orientation changes. Fortunately the jQuery library which I am using for MicroViews implements firing custom events. This means that I can emulate the orientation change detection that is available on Mobile Safari on the Android browser.
Hopefully the only other major work for the Android port will be changing the look and feel of the page to make them seem more like an Android native application.
Inplace Views
Inplace Views were a feature that was suggested at the Developer Hapiness event for the prototype of MicroViews. These are expected to be of real use to lecturers who want to link to EPrint resources on course web pages. They do require a few minor modifications to the web page that is supporting MicroViews but I have aimed to keep these to a minimum.
To produce the following Inplace MicroView;
then I would need to add the following code;
<div class="microviews_inplace">
<a href="http://example.com/123/">Web Conference</a>
</div>
This would work for any number of links inside the div tag. Also the div can be used multiple times around the page. The plan for this view is for it to make full use of the MicroViews data layer so that any client side caching can take place if the same EPrint is referred to in multiple Inplace views and tooltips.
MicroViews: Mobile Views
Summary
It has been a little quieter on the MicroViews front recently as I have been working on other OneShare projects recently such as AllAboutMePrints and a rewrite of the Sneep plugin. But before all of this started I spent some time updating MicroViews for iPhone. I also spent some time refactoring the base of MicroViews separating out a Javascript data layer from the rest of the plugin. It is now the sole responsibility of the data layer to load EPrint data from the linked repositories, and the views are now rendered by individual pieces of code that can be included independently of each other. This also greatly improves the extensibility of the library.
Also I have now made the source for the project available as a Google Code project at http://googlecode.com/microviews. The Google Code project will also be used for bug tracking.
Finally as one extra piece of news from the project, there is now a MicroViews logo which will be used to allow everyone to easily spot where the library is being used. This logo will also be used with any dissemination materials when marketing the project to users.
Mobile Views Refactored
In my previous post talking about the mobile views I was proposing orientation dependent content. I went ahead and implemented this so that when you tilted the phone to the right then the list of attached files would be displayed and if you tilted the phone to the left then a coverflow-esque visualization of the attached file previews would be shown. After some extremely small scale tests it was found that in fact this approach took too much explanation with the help text being included and did not add anything to the user’s experience with MicroViews. As a result I moved the list of attached files to underneath the abstract for the EPrint and now all of the landscape views will show the coverflow visualization.
This is inline with the standard iPhone OS interface when using media player features. When you have the device in the normal (portrait) position you are shown the controls for the media player, then when you twist the device into a landscape position you will see a coverflow visualization of all the albums in the current play list.
Mobile Views Coverflow
Last time I had posted I had not yet implemented the coverflow feature for MobileViews. This has now been done and it currently takes the shape of a slide show which allows you to advance by swiping left and move to the previous image by swiping right. The swipe gesture on the iPhone was enabled by making use of a touch plugin for the jQuery library called jSwipe. Although there are still some issues to resolve with the gestures in this view. The main issue is that the swipe gesture is very hard for the user to complete as the swipe library seems to only register the gesture when it is done within the borders of the displayed image. This may be down to a coding error on my part or a limitation of the library. Needless to say I am working to rectify this issue before to long.
MicroViews Data Layer
Having started to write the mobile views as well as the tooltips logic I realised that I was duplicating large amounts of data handling code, which is used to load abstracts and attached file previews. As a result I set about refactoring the library so that it all comes from one consistent api. This has greatly improved the extensibility of MicroViews as it is now possible to write any possible style of viewing the data but use one consistent means of accessing the appropriate data. More documentation about this will be appearing on the project website.
MicroViews: Statistics Gathering & Mobile Views
Summary
This week I have been working on the statistics gathering element of the system and the mobile views.
Statistics Gathering
It was agreed that some level of usage statistics would be generated from this project. The main reason for doing this is so that we could get feedback on what devices people use to read the reports. Doing it this early is key as it is hoped that the feature can be stable before September and ready to use when we start engaging with ECS in the buildup to the new semester.
The statistics are collected when the user views a page that has been enabled with MicroViews. The data collected includes the following data, what browser and what version of that browser and what platform or operating system they are using. By collecting these statistics I hope that we can start to build up a profile of how the library is being used and what the most common viewing mediums are. This way I will know how to direct future development as the statistics will help to build a picture of the features that are in the most demand.
Mobile Views
This is the normal view of the iPhone of the interface.
This week saw work start on the mobile views of EPrint documents. I chose to start with the version presented to iPhone users first. I thought it would be interesting to implement an interface which displays different content depending on the orientation of the phone. I got this idea from the Engage Interactive blog. When the user first goes to the interface they will see the title, abstract and author data for the EPrint, there will also be a button that takes the user to the EPrint itself on the repository.
Currently the orientation specific content is as follows, if the user has their device upright then they will see the title, abstract and author data. If they then rotate their device to the right they will be see the list of files associated with the EPrint. When they rotate their device to the left then they will see any preview images associated with the EPrint. The current iteration does not display any data when the device is rotated to the left, instead it is currently just showing a place holder. At the moment I am experimenting with creating a cover flow style view for all of the preview images attached to an EPrints. I am hoping to achieve this using CSS Transformations and CSS Animations both of which are supported in recent desktop and iPhone versions of Webkit, the rendering engine behind Safari. Hopefully next week I will be able to report how this experimentation is coming along.
This is the view of the iPhone interface when the device is twisted to the right.
Transferring this functionality cross platform may be an issue as I am currently unsure as to what level of support there is on other platforms and this will require more research.
OneShare stresses and strains
OneShare has really picked up some steam recently. we will shortly be adding Worcester to make the 5th oneshare deployment. this combined with the day to day stresses and strains of the ever evolving requirements of LORO and Humbox and the pressure from above to roll out updates to the language box live site have left this developer struggling to see the keyboard for the pile of administrative work required before any development had been done.
How ever the battle is slowly being won. LORO and Humbox are getting closer and closer to launch which should hopefully leave breathing space for more carefull development of the Worcester repository. I am already stratagising about how we intend to deploy plugins as increased usership reveals more bugs…