The Nuts and Bolts of Developing Interactive iBooks. Part 2

development_13_4

In our last blog post on developing iBooks, we introduced iBooks Author and the .widgt container. After building the framework, Artemis Consulting built features and tested the iBook for usability on different iOS devices.

Developers that use the .wdgt container are able to move beyond the constraints of built-in functionality in iBooks Author. Included in the .widgt container are all of the assets that are required for that particular item. The CSS, JavaScript, jQuery code, and images must all be added in order to be available to main.html. main.html is the default HTML page of the widget. The bulk of the iBook referenced here was made of pages each with an identical HTML widget, but with different images or media content. Since the .wdgt was enclosed, we were unable to link to centrally located CSS, JavaScript or other common library content such as jQuery. This meant duplication of code across each widget instance. This duplication is far from ideal development practice. The plus side was the overhead in terms of file size for duplicated content is low.

A request for image manipulation capabilities in the iBook, which is not core functionality of iBooks Author, led the Artemis team to develop features by integrating Open Source JavaScript libraries into our html widget. Our client wanted users to be able to Pinch and Zoom images. The zoom is not reset once touch is removed. The ability to draw on images was also requested.  

Another feature that was required in the iBook was the ability to create and save notes. iBooks core functionality has a Note feature where text can be selected and a note attached to it. We needed similar functionality that would be available from within an HTML widget. The reason for this is code from within the HTML widget cannot launch or call the iBooks Note app. We also needed to make the functionality work offline and this needed to be achieved without a call to any external services for writing data.

Working within these constraints, the Artemis team’s solution was to use a standard HTML form, which uses JavaScript local storage to save to the browser. This persists the data as required, and enables users to create notes that are unique within each HTML widget. There are some cautions with using local storage, including the data is not backed up and may be deleted by the OS during low memory scenarios.

While the primary device that we were developing for was the iPad, we still needed to accommodate a range of Apple products. The iPad Retina, iPad Mini and also the desktop version of iBooks (included with OS X Mavericks, and downloadable for earlier OS versions) all required the same functionality as the standard iPad version that we were creating. For iPad Retina, we had to create images that would benefit from the extra resolution available. The iPad Mini requirements required ensuring that the usability remained within the smaller screen dimension. The MacOS desktop version meant ensuring that all of the touch events that are associated with the iPad had to be available via the mouse or equivalent keyboard controls. This requirement was met with JavaScript to write fall backs for when touch events were not available.

Navigating the iBook via links on images was another feature requested by the client not contained in core functionality. Using a text box with transparent text overlaying an image provided a suitable work-around. In iBooks Author 3, linking images is now available, however, the client device must have iOS 8 and above installed for this feature to work.

Working with iBooks was a great opportunity to develop for a new content experience. iBooks Author proved to be a powerful and simple to use IDE offering a range of features. iBooks Author 3 expanded ‘out-of-the-box’ functionality available. In Artemis Consulting’s experience, clients will continue to have requirements that are not core functionality supported through iBooks Author. Developers enjoy meeting these challenges and the HTML widget provides a method whereby additional custom features can be efficiently introduced. Our team is looking forward to the evolution of iBooks Author, the continued growth of the iBook, and using this delivery platform for content delivery in meeting clients’ requirements.