How to make amazing HTML5 widgets for iBooks Author with no coding knowledge!

The topic of my blog this week will be about a fantastic piece of software called iAd Producer.

Now, firstly, you may want to know what an iAd is! Well, an iAd is a mobile advertising platform that Apple created for its iOS devices so that developers can embed advertisements directly into their apps.
Self explanatory therefore that iAd Producer allows developers to create these iAds!
iAd Producer supports HTML5, CSS3 and JavaScript standards for creating these iAds with a very intuitive user interface so that coding is not mandatory. It provides a single-window interface for viewing and editing layouts and settings with project templates loaded with pre-built structures including banners, splash pages, and menus. There are also simulation tools available for Mac and iOS devices to preview your created iAd.
What I’d like to bring to everyone’s attention in this blog is the recent update to iAd Producer. Version 4.0 brings a super feature to this application which now provides you with the option to create iBooks Author widgets for use with iBooks Author projects. In other words, you can now easily create HTML interactive widgets to use with the multi-touch books that you create in iBooks Author!
For those of you that have used iBooks Author or read a multi-touch iBook on your iPad, you’ll know how great interactive widgets are, however HTML widgets require someone having to create the HTML code. Now that task is performed for you by iAd Producer, all you have to do is provide the content and to quote Apple:
“iAd Producer automatically manages the HTML5, CSS3 and JavaScript behind your iAd to make creating beautiful, motion-rich iAd content as easy as point and click.”
Cool huh?!
So, let’s take a look at how this is done.
Firstly, you’ll need to register as an Apple Developer, which is free. Once registered with an Apple ID you will be able to download the iAd Producer app to your mac.
Once open, you simply select the ‘iBooks Author Widget’ section and choose a template for your HTML widget. I particularly like the ‘Panorama’ widget which can take a collection of photos you have taken and turn them into an interactive 360º image which can be rotated with a swipe gesture on the iPad:

There are a couple of settings to specify how iBooks Author will display this widget:

All you need to do now is add the ‘Assets’ you want to include in your widget, such as images, movies etc which you can drag and drop to the ‘Assets’ pane on the left:

Then select the ‘Objects’ such as buttons, text fields, sliders, Multi-Cell objects or dynamic content which the user will interact with when they are reading the book on their iPad:

You can see from the snapshots above that the iAd Producer interface works like a ‘storyboard’ type flowchart of how the widget will look and contains a rich library of objects you can use in your widget.
One really useful feature is the ability to point your widget to existing web content, (similar idea to the Dashboard Widgets on your mac!) This can massively reduce the size of your book by having media, such as videos, hosted on a website with just HTML widgets linking into that content. You can also, therefore, send information from the iBook to a backend server which can store the information!
Once you have finished creating your widget, simply click the ‘Preview’ button at the bottom of the app to see what your widget will look like in the iBook. For further testing, developers can use the iOS Simulator (part of Xcode), but you can also just plug in an iPad and preview the widget directly on the iPad as iAd Producer contains a built-in app called ‘iBooks Widget Tester’ which it can install on an iPad to then import a preview version of the widget for testing on the iPad directly.
To export the widget ready to add to your iBooks Author project, simply select ‘Export to Disk (Optimised)’ from iAd Producer’s ‘File’ menu and then drag the widget it creates into your iBooks Author project. The exported widget will be created on your hard disk looking like the following image:

Without sounding too geeky, iAd Producer is a truly amazing piece of software which will allow users to really enhance their multi-touch iPad iBooks without having to learn HTML coding!
To fully learn about iBooks Author and iAd Producer, why not attend the Amsys 1-day iBooks Author training course which has plenty of hands on exercises guiding you through all the steps needed to create a fantastic multi-touch interactive iBook. If you’re really lucky, it’ll be me that’s standing at the front of the class ready to teach you!
Disclaimer:
While the author has taken care to provide our readers with accurate information, please use your discretion before acting upon information based on the blog post. Amsys will not compensate you in any way whatsoever if you ever happen to suffer a loss/inconvenience/damage because of/while making use of information in this blog.
The content of this blog was tested using OS X v10.8.3 which was the latest Mac OS release at the time of writing and also using the latest Internal and external Apple keyboards.