PUNTPIXEL heeft in samenwerking met nai010 publishers en Medamo een digitale versie van de Stedelijk Museum Highlights Catalogus ontwikkeld in de vorm van een mobiele applicatie. Met deze applicatie wordt de bezoeker de mogelijkheid geboden om persoonlijke hoogtepunten uit de collectie van het Stedelijk te selecteren, voorafgaand aan, tijdens of na een bezoek aan het museum. Vervolgens kan met deze app een digitale catalogus worden samengesteld: MyHighlights.

Inhoud gekoppeld aan de geselecteerde hoogtepunten kan met de app vervolgens worden gebundeld tot een persoonlijke EPUB-catalogus. Deze EPUB wordt gegenereerd met de My Highlights applicatie en kan vervolgens worden gedownload en offline worden bekeken. In plaats van het creëren van een ebook versie van de reeds bestaande catalogus, heeft deze deelgroep zich gericht op het ontwikkelen van een digitaal distributieplatform, ontsloten via een (mobiele web-) applicatie. PUNTPIXEL heeft tijdens presentaties in november 2013, mei 2014 en november 2014 de algemene werking van de applicatie toegelicht. In een toekomstige versie kan verder worden gewerkt aan de mogelijkheid tot het verder personaliseren van de EPUB alsmede naar de opties voor het implementeren van een betaalmogelijkheid, gekoppeld aan de verschillende modules binnen de applicatie. De applicatie is zo ontwikkeld dat geïnteresseerden in de toekomst met een eigen variant van de app hun eigen collectie hoogtepunten kunnen ontsluiten, tijdens de presentatie zal Medamo dit traject nader toelichten.

nai010 publishers, Medama and PUNTPIXEL have developed a digital version of the Stedelijk Museum Highlights Catalogue. Instead of creating an ebook version of the existing catalogue, the group has opted to develop a digital distribution platform accessed via a mobile (web)application. The application allows users to find, filter, search, preview and collect highlights from the Stedelijk Museum collection in preparation for their visit to the museum. Related content (essays, interviews, images, etc.) for the selected highlights may be chosen and are subsequently bundled as a personalised EPUB-catalogue, available for generation within the My Highlights application. The generated publication may then be downloaded and viewed (offline) on any device capable of rendering EPUBs. PUNTPIXEL will demonstrate the application during the presentation. Extra features are planned for future versions, such as further EPUB personalisation options and the implementation of payment gateways in order to charge a small fee for premium content related to the highlights. The application has been developed in order to allow other interested parties to develop their own version of the application to be used to publish other collections, during the presentation Medamo will explain the possibilities of such a scenario.

Website Digital Publishing Toolkit
nai010 Publishers
Stedelijk Museum Amsterdam

Initiële schetsen voor de gebruikersinterface van de mobiele Highlights-applicatie voor het Stedelijk.

Initiële schetsen voor de gebruikersinterface van de mobiele Highlights-applicatie voor het Stedelijk.

Building My Highlights
This is a short overview of the process of building a proof-of-concept application. Requirements shifted during the development of the project which, combined with a lot of uncertainty regarding the datasources to be used, partly explains the technical exploratory process and the way the final proof-of-concept was developed.

My Highlights was conceived as a mobile application allowing the user to easily browse and filter a large collection of objects from Highlights catalogue of the Stedelijk Museum. After the user selects optional additional material (essay, interview, images, etc.) one is able to generate an EPUB based on the selection, available for offline use – for example on a smartphone while visiting the museum itself.

Apart from the technical development of the Highlights application, we also designed the structure of the application and provided the basis of the user interface in collaboration with Medamo. The application is split into different sections, apart from the overview of a collection, the application contains search, filters, guides and a section showing a personal selection of content from the Highlights catalogue. All of the sections are reached by selecting a series of four buttons contained in a tabbar on the bottom of the screen. A common usage scenario involves working from left to right in the tabbar, by first browsing the entirety of the collection (the leftmost button), searching and filtering the content (second and third button) and reviewing the selected choices in the last section (available by selecting the button on the far right). A basic interface design was developed based on the aforementioned scenario and further developed and designed by Medamo.

In our day to day practice we mostly develop websites and site-specific web-applications for use in exhibitions. Building native applications for smartphones and tablets on multiple platforms (iOS, Android) is a whole field entirely. There is the learning curve to consider for each SDK, not to mention the difference in programming language (Objective-C for iOS, Java for Android, etc.) and the breadth of devices to support. Building an application using the Android SDK doesn’t guarantee it will work on any given Android device and the same holds true to a lesser extent when using iOS (though the device range is smaller). For developers who work predominantly with web technologies this isn’t the most straightforward method available, so at first we examined two possible solutions; PhoneGap and Sencha Touch.

The promise of HTML5 web applications packaged as native apps is an intriguing one, as it seemingly allows a web developer to ignore most of the problems related to development using native SDKs. This is the promise of PhoneGap, which gives a developer the tools to package an HTML5 application and even – with some extra work – use some of the native features of the targeted device (i.e. camera, compass, etc.) The foundation of PhoneGap is Apache Cordova and it allows developers to package HTML, JavaScript and CSS as native application binaries. In theory one would create one application in HTML and use PhoneGap to generate all the required application binaries based on that HTML master for the platforms one wants to support. Apache Cordova also gives access to device specific functions (camera, compass, accelerometer, etc.) normally only available to applications built using the official SDKs. Using PhoneGap a HTML application may interface with these services through Apache Cordova in a unified way. As an example, the procedure for accessing photo’s in the HTML context via Apache Cordova is theoretically the same, whether the generated application binaries are intended for distribution on an iPhone, Android or Windows phone or even a Blackberry. Over the years, one of the major complaints of packaging HTML applications as native binaries has been the sluggishness of HTML rendering, especially on iOS. Mid 2012 Facebook switched from an HTML5 scenario allowing them to rapidly deploy changes on multiple platforms, in order to address the complaints about the lackluster speed (long loading times, general interface unresponsiveness) of its iOS offering.1 PhoneGap in itself only offers the tools to create the binaries, the actual application can be build using any client-side application frameworks.

Sencha Touch
Sencha offers a suite of tools, from a UI framework for building mobile interfaces (Sencha Touch) to a JavaScript framework (Ext JS) and an application (Sencha Cmd) which handles the packaging of the code into native binaries. Due to the tight integration of the individual components and the promise of speed rivaling that of native applications Sencha appeared to be a viable solution at first sight. As Sencha Touch is heavily integrated with Ext JS the learning curve is quite high when unfamiliar with both frameworks. Sencha might have been a viable option when developing a fully-fledged mobile application to be deployed commercially, although many other competing options – like Ionic – exist in that regard.

jQuery Mobile
As the learning curve of Sencha proved to be a little too steep, we turned to another HTML5 framework: jQuery Mobile. As the name suggests the framework is build on jQuery and therefore closely tied to the concepts used in that particular library. jQuery Mobile mainly focuses on a consistent UI experience on any platform (smartphone, tablet or desktop) and is less (or not at all) concerned about speed or integration. Frameworks like Sencha and Ionic try to mimic the native UI widgets (lists, buttons, etc.) of each platform as close as possible, while jQuery Mobile uses one style of widgets and aims at rendering them as consistently as possible across multiple platforms. Building a simple application using the stock widgets present in jQuery Mobile is fairly easy and the integration with jQuery certainly helps. However, for the My Highlights application a custom design was created which didn’t really mesh with the default widgets of the framework. Manipulating and overriding large portions the framework’s CSS in order to support the design of the My Highlights application, combined with the framework’s many quirks, conventions and spotty documentation, made us abandon the framework after building a portion of the application. jQuery Mobile offers a lot of options which we didn’t necessarily need and the way some of the features have been implemented were more of a hassle to support than actually speeding up development.

No specific framework
Ultimately we considered a more barebones scenario using only jQuery, a library to handle URL routing (Flatiron Director) and a way to store client-side data (jStorage). The application communicates with an external WordPress installation, in lieu of a datasource like Adlib, in order to receive collection data (via the newfangled WordPress JSON REST API) and generate an EPUB based on the selections made in the My Highlights application. This barebones setup, using only relatively small, individual JavaScript libraries, allowed us to quickly develop a proof-of-concept application which may be packaged as a PhoneGap binary or used as a web application.

The code of the application and two WordPress plugins is available on GitHub.

1) Jonathan Dann, “Under the hood: Rebuilding Facebook for iOS”, August 23 2012, https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/10151036091753920 ↩


Meer weten over dit project?

Neem contact op met Marc de Bruijn