The Nuts and Bolts of Developing Interactive iBooks. Part 1

development_13_3

Tablet devices are now well established and offer a solid alternative to the traditional web browser. All types of companies, and even the government, are targeting this market with  tailored content delivery approaches. Apple’s iBooks is an application that has generated a large amount of interest and continues to grow. Last year, Artemis Consulting worked with a client who was specifically seeking to reach the iPad audience through iBooks. This client is a premier educational content provider and since many classrooms in the United States are making iPads available to their students, they wanted to see if they  could work with Artemis to enhance the student experience.

In the preliminary stages of the project the Artemis team evaluated iBooks Author 2.2, Apple’s application for building iBooks. The standard web content features include a drag and drop interface to add text boxes, tables, images, create styles and custom layouts.  Along with these are widgets which provide additional interactive functionality to an iBook. An example widget is the Gallery for image presentation and the Scrolling Sidebar for text blocks. These built in widgets are very useful but somewhat limited.  Developers often need to move beyond the constraints of built-in functionality in iBooks Author. The higher level of customization is available via the HTML widget.

The HTML widget is a container with the file extension .wdgt. In this container, HTML5 and other web assets can be added. The .wdgt container is then dropped into the HTML  widget on an iBooks Author page. Consider an HTML widget as a self-contained web browser. Standard HTML, HTML5, css3 and JavaScript can be used within these widgets to provide functionality. Externally hosted web-services can also be used, however,  developers should be mindful of the effects on the user experience if the iBook is used while users are offline. For our project, the iBook could not be dependent on being  connected to the internet, so all functionality had to be self-contained.

As a starting point for developing our custom HTML widgets, we used Trevor  Burnham’s iBooks HTML Widget Boilerplate. This template provides the basic structure that is required for implementing a widget, and is a valuable resource for initiating  development. It is available at  iBooks HTML widget template.  

In our next blog post, we will talk about how we went about building the features of the iBook and how we ensured that the iBooks we were building were available on an array of iDevices.