Recently I had a chance to take a closer look at relatively new tool for creating interactive iPad tablet reading experiences called iBooks Author. It was released by Apple in January 2012 and is aimed at book authors and publishers to allow for an easy publishing of their books on Apple iBook platform. Application supports its own format
.ibooks as well as
.ePub formats for exporting.
In this tutorial I’m going to walk you through the steps for building fully working HTML5 widget to be used in iBooks Author projects. This sample widget will help eBook authors to easily add social follow option to their digital books so their readers can interact from within the eBook.
Source code for finished widget project is located at the bottom of this tutorial, feel free to download and test it. The final result:
What is HTML5 widget?
HTML5 widgets have
.wdgt type directories as widgets on their OSX operating system and, as we will learn, on some mobile development tools as well. Simply speaking these widgets are just standard directories with additional extensions in their name. Such widget directory must contain certain files in it to work as functioning widget but more about it latter in this tutorial.
Tools for creating HTML5 widgets
.plist files there are no requirements to use specific tool to create or edit them. Any text editor will do as long as it can open and edit these file types. I personally use Coda 2 but I’m sure you have your preferences.
For automated HTML5 widget creation Apple have a tool called Dashcode.
But for purposes of this tutorial we are going to create all files manually as we want to understand how widgets are build.
Lets get going!
There are 3 required files you have to supply in order to create working HTML5 widget. Main HTML file with
.html extension (no naming limitations on this one),
Default.png – the image file which will be displayed to users on the eBook page (this has to be named exactly like this and is case sensitive) and
Info.plist file for storing widget settings – also has to be named exactly that.
For this tutorial I’m going to use example code of HTML5 dropdown menu which is styled with simple CSS styles and has a little bit of jQuery for interactive part. It looks like this:
index.html I have the following markup:
As you can see this is pretty simple example which requires jQuery library and several images to be present. For our purpose I have downloaded the latest version of jQuery library and packed images in to separate
img directory within projects main dir. Now we have to create
Info.plist file which is used for storing settings and has its own XML format. If you are new to Apple developer world I recommend you to Google and read more about this specific XML format as you are going to find it in every development project if its to do with iOS / MacOSX. Its not overall complicated. In the mean time here is the content of my
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>AllowNetworkAccess</key> <true/> <key>CFBundleDevelopmentRegion</key> <string>English</string> <key>CFBundleDisplayName</key> <string>DropMenu</string> <key>CFBundleIdentifier</key> <string>com.popularowl.widget.ibook</string> <key>CFBundleName</key> <string>DropMenu</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleVersion</key> <string>1.0</string> <key>Height</key> <string>400</string> <key>MainHTML</key> <string>index.html</string> <key>Width</key> <string>400</string> </dict> </plist>
Its quite self explanatory as each setting has a name and the corresponding value. In order to create
Default.png image I took a print screen of HTML5 menu example displayed by the web browser. One note here: if you haven’t declared the widget size in your
Info.plist file (we did) the dimensions of
Default.png image will be used as the size for your widget. Make sure you are specifying the right height and width for your project.
Once all files are created we need to add extension
.wdgt to project directory. This is done by simply renaming directory (MacOSX will ask you to confirm and you just say yes).
Whats left now is to open iBooks Author application, start the new eBook project and choose to insert widget from the top menu. Once you get dialog window there will be some pre made widgets as well as HTML option at the bottom of the list. Once selected it will give you a container within iBook where you can drag & drop your newly created widget. You should now see a preview of functioning dropdown menu. Connect your test iPad device, hit preview and welcome to interactive eBooks world.
Source code for sample widget can be found here.
Well done! Great you got it all working !
Thanks Roman and cheers for intro to iBooks Author widgets
Ask two questions
1.html5 widget can be run automatically in the iBook file? Like the “yellow submarine”.
2 in the iBook file playback of HTML5 widget program is full?
How do you stop the html5 widgets from opening up full screen?