Multimedia iPad

"Where are all the multimedia e-books?" people have been heard to ask.

Given our recent tests with various CSS properties and iPad, we took it all a step further, adding transitions and transforms to the mix. In the '90s all this stuff used to be called "New Media". At that time we were deeply involved in creating interactive CD-ROM products on all sorts of subjects, so it wasn't hard to get started on the first real NEWnew Media ePub framework.

This is a work in progress. But we started with a basic set of reusable XHTML Content Blocks...

Before you face falls in disappointment at the empty looking screen-shots, this is just the navigation framework and tests to see which of iPads advanced multimedia like functions work. No video or audio yet (crossing the non-standards Rubicon - that comes next!). This ePub validates on ePub Validator 1.0.5. although it will display in a useful manner on virtually nothing except iPad and advanced Safari based readers. For example Safari readers based on Qt are a bit constrained. This is a three page ePub. The screen-shots are the entire work.

Page Background

The background is a <div> set to 540px x 786px, my best guess at the viewable size. It's a one page, one screen thing. Therefore this "book" is not going to fit the two-up screen view (There is an elastic one, but it exhibits slightly strange behaviours at present). All divs and paragraphs were set to border-box so area computations are easier.

Nearly everything in the framework are positioned divs and behaved admirably.

The coloured background was fun, interesting and amazingly easy. It is a single gradient from the top of the viewable area to the bottom. It uses HSL so changing the colour for each page was only a matter of a single value for hue, and a little tweak on the luminance.

The solid header area is part of the gradient. The page title text uses HSLA so it is all white at 60% transparency and the background gradient colour comes through. This was incredibly easy. Normally having three colour schemes is a drama of CSS statements, IDs and selectors. 

Navigation Bar

The four button thing at the top in the title area is euphemistically called The Navigation Bar (or was that optimistically). This is a multimedia type structure to allow users to go back and forth and round and round various sections in a document. It is essentially linear navigation, but the idea is to get to what you are interested in fast.The buttons are more or less a touch size depending on how big your fingers are.

The buttons are made with gradients with six changes. If you like CSS code it looks like this. Basically just luminance values.

background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0.0, hsl(120, 0%, 60%)),
color-stop(0.2, hsl(120, 0%, 95%)),
color-stop(0.5, hsl(120, 0%, 60%)),
color-stop(0.75, hsl(120, 0%, 50%)),
color-stop(0.9, hsl(120, 0%, 70%)),
color-stop(1, hsl(120, 0%, 30%)));

Other than making hot looking gradients, there was a lot of potential here. On the hover event we applied a transform for a subtle size change, and a transition with ease-in and out. It was great in the browser!

Alas iPad ignores these charming interactive touches. We also gave the button a shadow-2-glow change. That works well.  When touched the transform enlarges the buttons slightly and the shadow becomes a large, warm, inviting glow.In iPad you only get the glow.

Toolbar

The interactive toolbar at the bottom is to allow navigation to supporting material, linking to interstitial pages, and other non-linear interactions. This is meant to be interactive multimedia, so we can add all sorts of "discovery" treasures in these areas and have some fun.

The Blue Page

The Blue page was just a little extension test to do something a little more interactive. With Transform and Transition not working, it was a disappointment.

The idea here was touch the icon images and they expand majestically to fill the width of the viewport. Works in the browser, fails in the iPad ePub reader. You can see what could have happened in the development environment images below.

What works?

The presentation eye-candy, transitions and shadows of all sorts are stunning and so easy to work with.

Interactive navigation is not an issue. Pages jump around in any order nice and responsively.

What doesn't work?

The groovy smooth stuff. Transforms and Transitions don't work. It's a real downer. They look fantastic in the browser as can be seen by these two screen-shots from the IGP:FLIP preview pane. The buttons are animated to change size, we had images spinning and moving all over the page (the little gray squares are production annotation icons which cheerfully moved along with their parents). All this with just CSS! But alas, only in the browser. This is so much better than navigating to another page to see the big image.

Other Considerations

To make a good interactive ePub you have to also consider the Spine and NCX. We have a 20 page document in preparation and it only has four entries in the NCX. The main menu and section menus. They are also not displayed from the Spine reading sequence. All of the section sub-pages, interstitial and exploration pages are only accessible from the Nav Bar, on-page interactions or the Tool Bar.

All in all not a total disappointment. It is certainly an environment within which navigation style multimedia can be executed, relatively easily and well. After the initial Content Block designing was done, the pages and various components were simply assembled together using IGP:FLIP which is very powerful at this type of  extensive block and linking work without having to descend into XHTML hell.

I am not providing the ePub at this stage, mainly because the CSS is a bit of a shambles at present and I have to think of our reputation. But really this took only a few hours to bolt together once the components were in place. Hopefully we will have a larger book with the interactive adventures of Infogrid Pacific ready soon.

Comments

[Liz Castro]

Wow, you are doing such cool stuff. Can't wait to see the next installment!

[Mark h]

Great stuff. I was Reading on my iPhone and only the first image was hi enough red to zoom in on. Any chance the other images could be the same? Bit hard to reference examples otherwise. Mark H

[Blaine Cook]

I'd love to try this out with rePublish! Could you post a link to the ePub?

[Lech Rzedzicki]

Just so you know I went all the way to 552px as the width :)
Other than extra space it has an advantage by being divisible by 2 and 3

[Lakshmanan]

ePUB Publisher like it!!!!

[דיאטה]

Attractive section for multimedia iPad using ePUB. Your blog is great for anyone who wants to understand this subject more. It is really great ePUB..