Adding HTML widgets and 3D models to your books (Become an expert)

There is more to an iBooks' book than text and images. With iBooks Author, you can add more interactivity to your books by adding HTML widgets and 3D models. Let's look at how iBooks Author helps us implement some of these exciting technologies in our books.

Getting ready

For our Attractions chapter we will add a few 3D models from Google Warehouse—http://sketchup.google.com/3dwarehouse/.

How to do it...

iBooks Author supports importing HTML5 widgets in the form of the .wdgt extension, which is basically a folder containing our HTML5 code, images, and an Info.plist file, which provides the iBooks app with information on how to run the HTML5 widget. We will create a simple Twitter widget that will pull information for the keyword "London" from Twitter.

1. Create a folder and name it twitter-widget-ibooks, and within the folder create an index.html file using your favorite text editor. Using a simple Twitter Mashup from http://www.designchemical.com/blog/index.php/jquery/jquery-tutorial-create-a-jquery-twitter-feed-plugin/, we modify the code to search for the keyword "London".

2. Here is how the HTML page should look now:

   

3. Rename the twitter-widget-ibooks folder to twitter-widget-ibooks.wdgt; the folder icon should now look like a widget icon.

4. Once the widget is ready, open iBooks Author and reload our London CityGuide book. Within the History section of the first chapter, insert an HTML widget using the Widgets button the toolbar, as shown in the following screenshot:

   

5. Drag the HTML widget under the At a Glance section, and keeping the HTML widget selected, under the Interaction tab in Inspector, select the twitter-widget-ibooks.wdgt widget we created before:

   

6. Previewing the book on your iPad shows the following results:

   

7. To see the real-time tweets for London, click the Twitter icon, and you should see an overlay with real-time tweets for London. Clicking on the X icon on the overlay will bring you back to the book's page.

   

8. Similarly, iBooks Author also supports importing 3D models as an interactive content within our books. Download a COLLADA (.dae file) model from http://sketchup.google.com/3dwarehouse/details?mid=e47ab8e194c03e5d5e73daf3c0b064fa.

   

9. Extract the 3D model and import the same within our Attractions chapter, as shown in the following screenshot:

   

10. Preview the book on your iPad to see the 3D model in action!

How it works...

The HTML5 widget is a collection of HTML, JavaScript, images, and an Info.plist file that notifies the iBooks app to render an HTML code.

Apple has added support for 3D objects in a completed book with up to 50,000 moderately-textured polygons for the second-generation iPad and iPads with a Retina display; for the first-gen iPad, this number is 20,000. The format supported right now is COLLADA—an interchangeable file format for 3D applications supported by most companies and 3D modeling software.

There's more...

Apple has put a good overview on how HTML widgets can be compiled, and specifications for the can be found at http://support.apple.com/kb/HT5068.