The result is Caveman, a Python tool to validate HTML5 cache manifests. It scrapes the HTML page you specify, finding resources, then compares them to the cache manifest and reports problems.

Full blog post and complete documentation on Caveman.

If you’re logged in to Ibis Reader from a computer (not the mobile interface), you can now upload one or even many EPUB files at a time just by dragging. Here’s how it looks in Chrome:

This menu will open up on a “drag” event, meaning that you’ve moved some file from your desktop onto the Ibis Reader window.

When you “drop” the file into that space, a progress bar appears showing the upload time:

This uses the HTML5 <progress> element on supported browsers.

When complete, you’ll be taken to your personal library of books and the new book will be at the top.

If there’s an error, you’ll see it on the upload dialog:

Try it with multiple files simultaneously!

Support

This should work in Firefox 5+ and recent versions of Chrome. It doesn’t currently work in Safari 5.x.

For browsers which don’t support drag and drop yet we also improved the normal file upload method (in which you click “Add a Book” to upload by selecting a file from your computer). The “Add a Book” feature now supports multiple file upload, so if you select multiple files from the dialog, it will upload them in succession.

This will work on Safari as well as other browsers which support multi-file upload.

In any scenario, if you upload multiple files and one has an error, the upload process will stop at that file (other files that came before will successfully be added to your library).

Enjoy!

Tech details

Safari 5 currently has a bug that prevents the <progress> element from being nested inside of a block-level element like a <div> (This was a WebKit bug whose fix just hasn’t made it into Safari yet.) In Safari you may not see the progress bar because of this.

I would have preferred to let you drop the files anywhere on the site, rather than just in that big box, but Chrome requires that the drop point for file uploads be inside of a <form>. You’ll see the same paradigm if you use Gmail’s drag and drop support for attachments (did you know you could do that?)

To match the licenses of other content in the presentation, the PDF is available for download under a Creative Commons Non-Commercial ShareAlike.

There are a few videos in the presentation which I’ve pulled out separately:

Using an accessible HTML5-based EPUB with VoiceOver

This demonstrations uses The Restless Universe from The Open University with a screenreader. The publication (somewhere between EPUB 2 and EPUB 3) uses the HTML5 canvas element to present visualizations, and includes alternate versions for the visually-impaired. Though this demo was run on a computer, the EPUB works in iBooks. (Software tools to build these publications available at http://sourceforge.net/projects/bookbind/.)

For each example, I show the visual presentation first, then the alternate screenreader-friendly one.

Creating a screen-readable interactive publication with WAI-ARIA

WAI-ARIA roles and states are used here in this demo (running on Firefox, Windows XP, NVDA screenreader) showing that JavaScript-driven interactive publications can also be accessible.

You’ll be able to hear the screenreader announcing that the word “delighted” has a “submenu”. When I use the keyboard to navigate I can find the link-like region through the auditory landmarks, select it, and then hear the popup read to me. WIthout using the ARIA roles, such JavaScript-driven interactivity would be invisible to the screenreader. See the slides for more details on the ARIA markup used here.

Interactive storytelling for the blind

My presentation included an excerpt from the documentary Get Lamp by Jason Scott; the relevant bit begins here in this presentation at a Google Tech talk.

Note: Many users may still prefer ebook applications that offer a more straightforward interface to VoiceOver than what I’ve described—I’m just happy we have a starting point from which to improve.

[Update: The reading mode has just been updated to have more useful “Next” and “Previous” links, as I describe in Reading, below.]

As a sighted user, I’d love to get feedback on how to make these instructions clearer and how we can improve the accessibility of Ibis Reader.

VoiceOver and iOS

Apple’s VoiceOver screen reader is available on both the Mac and on iOS devices. There’s a good web overview and a much longer Accessibility section in the iPhone User Guide [PDF].

You’ll need to turn on and get used to the VoiceOver gestures before trying the steps below.

Installation

Start the installation process by opening the Mobile Safari browser as usual. Next, visit the URL m.ibisreader.com, where you’ll immediately be prompted to “Increase Database Size?”. Select the “Increase” button (on the right) to give Ibis Reader some space for storing ebooks on your device. Next, you’ll install it.

“Installing” an HTML5 App like Ibis Reader is mostly just getting it onto your Home Screen:

1. Select the “Utilities” (VoiceOver’s name for it) button from the center of the bottom row of buttons. It used to be a plus symbol in previous iOS releases and is now a box with an arrow to the right.
2. Select the second button in the Utilities menu, “Add to Home Screen”. This will give you an “Add to Home” form with an Ibis Reader icon (just like any other App from the App Store) and an editable name (the default is “Ibis Reader”, unsurprisingly).
3. Finally, select the “Add” button from the top right (it’s one left-swipe “before” the editable name, where the focus starts).

You’ve now got an Ibis Reader icon on whatever page of Apps iOS fancifully decides to place it. Discover and open it in the usual way.

When it opens for the very first time ever, Ibis Reader has a brief introduction screen that pops up. You’ll need to follow the “Start Reading” link, which is the third or fourth item on the page. After that you’ll be sent to the “Get Books” section, which I describe below in Finding Books, but I’d actually sign in or register first.

When we first launched Ibis Reader, we were focused on making it as straightforward as possible to get started reading with a minimum of hoops to jump through. That means that we let people browse for new books before logging in and made the login and register screens exactly the same (they’re both tiny, with just an email and password field). However, if you’re just starting with the App, go ahead and follow the “Sign in” link first (it’s the link in the top right corner of the screen or the third item from the top of the screen). Fill out the fields as normal and you’ll be sent to the My Books section (which will be empty).

Basic Interaction

Ibis Reader is, at its heart, a web application. That means that you should be able to use most of the VoiceOver gestures and navigation techniques you’ve learned from browsing the web in Mobile Safari inside the Ibis Reader App. However, there are few parts of the Ibis Reader interface that are based on “touch” events rather than HTML links, so you’ll need to get used to the double-tap+hold gesture (accompanied by a rising series of three tones), which switches you between VoiceOver’s gesture mode and the “native” one. [Update: We’ve improved the UI to make these “touch” events unnecessary for VoiceOver users.]

For much of the App, we have a header bar with three relatively big buttons showing the navigation choices. On an iPhone-sized screen, these take up roughly one third of the screen each, but on an iPad two are huddled together on the left with the third on the right. The navigation choices are:

• My Books, Get Books, or Sign out (or in): this is the Home of the App, where you browse your library, find new titles, and where you go if you select “Home” (surprise!) from another part of the interface
• Close, Read This Book: these are the options when you’re looking for new books
• Home, Book Info, or Settings: this is the Reading Info section of the app, which shows your options while reading a book (this typically won’t be used by VoiceOver users)
• Back (top left corner): this is how you return from the Book Info screen to the book text

If you’ve started reading a book, Ibis Reader will remember where you left off and open right to that page when you start the App the next time. Unfortunately, because VoiceOver users won’t need to “turn” any pages, you’ll start back at the beginning of the section each time. I’m not sure what the best workaround is for this.

Finding Books

In the “Home” section of the App, the second item on the page is “Get Books” (roughly in the middle of the top), where you can browse popular Public Domain and Original content from Feedbooks. If you haven’t used Ibis Reader before, browse or search the titles in “Feedbooks: Popular Public Domain” (the first item on the list on the page) to find something interesting. VoiceOver will read you the title and author of each book. When you’ve found one you want, select the one you want (it’ll probably repeat “[the title], link”. If you have VoiceOver read from the top of the page, it will give you the books details and a description (if present). To download the book and start reading it, select either “Read This Book” link (there’s one before and after the description). After selecting it, be prepared to wait until it has downloaded an loaded (might be a while depending on your connection. VoiceOver should read the first page when it’s ready (maybe “Cover image” or similar). Now on to the description of Reading.

If you’ve already used the (more accessibile) web version of Ibis Reader at ibisreader.com, you’ll have titles in your library in the cloud that you can download to your device by following the “Browse your Online Bookshelf” link (about the fourth element on the page) from the My Books section. Navigating your uploaded books is exactly the same as navigating the Feedbooks content (they’re both delivered as OPDS Catalogs under the hood.)

Reading

The experience of reading works great in Ibis Reader. The normal “Two-finger flick up: Read all from the top of the screen.” gesture works well and will read a whole section of text without having to turn the page (although others looking at your screen may be confused). Unfortunately, switching between sections of the text isn’t as accessible as it could be, as it relies on both a very good TOC from the publisher inside the EPUB itself and some “native” tap gestures. [Update: Switching between sections is easy too: just choose one of the “Next” or “Previous” links from the very top or bottom of a section (these links are only visible to screen readers). Remember: You can use a “four-finger tap at top of screen” to select the first item on the page, like the “Previous” button, or a “four-finger tap at bottom of screen” to select the last item on the page, like the “Next” button. Note: For existing titles, you may have to delete the book from your device and re-download it from the “My Online Bookshelf” link to get these buttons.]

To get out of the Reading mode and back to the My Books section, select the “Home” link between the “Next” and “Previous” buttons.

My Books

This part of the “Home” section lists the books you’ve downloaded to your device for reading. Because Ibis Reader stores everything in the cloud, you don’t need to worry about deleting titles here because we’ll keep a copy at the main website if you ever need to get it back onto your phone or tablet again. Like the Get Books list, these are just a list of the title and author(s) for each book, and selecting one will open it to your last known reading position.

It may now be the case that there has been a policy change to require the presence of in-app purchasing whenever content can potentially be purchased. This potentially affects many applications, but ereading apps would be particularly hurt because of small margins on ebooks and the added complexity of agency pricing.

When I conceived of Ibis Reader, I thought the primary value of an HTML5-based ereader would be cross-platform availability. When the project kicked off in mid-2009, there were no versions of Android that actually supported HTML5; by the time Ibis launched in February 2010, compatible Android 2 devices were in stores. (Android still lags far behind iOS though, and overall we’ve been disappointed by the slow evolution of Android HTML5 support.)

Now it’s clear that HTML5 offers a more substantial benefit than cross-platform compatibility: ownership. Serious businesses take years to evolve; many of the ereading platforms that are threatened by Apple’s move are not even profitable yet. I would be very nervous about building a business with a long runway that could be rolled up at any minute.

That’s why we’ve decided to aggressively pursue licensing Ibis Reader in 2011. Our experience with our initial licensees has been overwhelmingly positive. Each new integration has strengthened the core platform and added valuable features, some of which are only available in the licensed version:

• Full internationalization support
• Secure content encryption
• Performance enhancements and core platform updates

Because we offer source code licenses, the entire platform is completely customizable and entirely within your control. You may hire us to help integrate Ibis with your ebookstore or content distribution system, or take the code internally for your own use.

Our roadmap for the platform in the coming year:

• Rock-solid, app-like performance
• EPUB3 and enhanced ebook support
• Annotations
• Dictionaries
• Strategic social-media integration

For more information or to schedule an appointment to meet with us at Tools of Change February 14-16, please contact us at info@ibisreader.com.

Anyone who’s ever been to a digital publishing conference knows that there is always a bewildering array of products that create and display enhanced content: ebooks that contain video, audio, animation, or other forms of interactivity. Generally each new platform requires an entirely different way of preparing the content and all the multimedia assets. While the production of static ebooks has become relatively standardized (using EPUB2), publishers are still struggling with how to produce more digital-native products without tremendous expense and constant re-tooling.

I’m optimistic that EPUB3 will provide significant headache-reduction in this area. While creating high-quality static, pure-text ebooks still has challenges, things are a lot better today than even a year ago. If we’re to see similar consolidation in the enhanced ebook space in the same timeframe, publishers are going to have to be firm that they will only (or at least primarily) produce standards-based multimedia books.

Slides from DBW

EPUB3 interactivity demo in iBooks

The talk includes a video demo. I had created an EPUB document several months ago for a research project, using Abroad by Thomas Crane as source material (edition from the Internet Archive). I wanted to emulate the accelerometer-driven animation of the Alice for iPad book using only the tools available in EPUB3.

Since the source was a heavily-illustrated children’s book, EPUB’s reflow capability was not really an asset. This quality made the book perfect for use in Apple’s fixed-layout mode. The video below shows the book running in iBooks on an iPad:

Accelerometer

In the first example, I use the accelerometer interface in JavaScript (some sample code), to cause the ship to “sail” back and forth as the user tilts the device.

Animation

In the second example, if the user touches any of the birds on the title page, they fly away. I modified the jQuery Path library to use CSS3 transforms to efficiently animate along a curve. JavaScript performance in iBooks appears to be somewhat worse than Mobile Safari; optimizing using CSS3 rather than DOM position updates is recommended.

Canvas, Processing.js, HTML5 audio

I’m a big fan of the Processing visual programming language. In the last example, the train appears to give off puffs of steam; each time the steam comes out of the train the puffs are in slightly different positions.

I embedded Processing.js code (which is itself then interpreted by JavaScript) and rendered the puffs to a transparent canvas. The puffs appear in a slightly random position, fade out as they reach the top of the page and then spawn anew.

Finally, there’s also an event bound to the invisible canvas: tapping on it will fire an HTML5 audio (a sample of a train).

(At this time we’re not able to share the demo EPUB file itself.)

Improved pagination and position-tracking

We’ve changed the method of moving from page to page and remembering where you left off. Books should load faster, and it should be easier to understand whether you’re moving forward or backward in the page.

Relative book length and reading position in My Books

In your list of books on the device, we now display some hints about the length of the book and how far you’ve read in it:

Also on this screen we tried to make it more clear that your “Online Bookshelf” is a link. Many people were confused by the old layout, which made that link seem more like a title. Clicking on the Online Bookshelf link will take you to the cloud library and allow you to pull down individual books to read on the current device.

Online Bookshelf cover images and metadata

For new books that you add starting with this release, you’ll be able to see cover images in your online bookshelf.

Improved iPad reading screen

We made the margins more generous on the iPad screen and added the page title (in portrait mode).

High-resolution (retina) screen support

We refreshed many of the icons and images to take advantage of the high-resolution screen in the iPhone 4 (and likely iPad 2).

Galaxy Tab support

We made some changes to ensure that Ibis works with the Galaxy Tab, as previously all our tested Android devices were phone-sized. We’ve chosen to give the Tab a phone UI rather than the iPad UI, in part due to screen size but mostly because Android simply does not support the smooth animations and transitions that iOS can.

Known issues

One consequence of the pagination change is that existing positions within a chapter have not been retained, so if you were reading a chapter before this update, you’ll be reset to the start of that chapter. We regret the inconvenience, but it will start position-tracking in the new method right away.

Some versions of Android don’t report their screen size correctly, either at all or after the device has been rotated. We’re going to be working on improving our Android UI in the coming weeks.

Getting the update

As always, just visit your installed Ibis Reader icon (iOS) or go to http://ibisreader.com/ on your mobile device. Due to the way HTML5 works, you may need to refresh more than once to see the update. You should receive a notification that your database was upgraded: close and restart Ibis and you’re ready to go with the new version.

Thanks

We received a lot of help in testing the new release from our friends and colleagues. Your support is always appreciated.

The goal of this post is to simply document the extension and show how to create new works with it. I’m not going to debate whether it’s a good thing for the ecosystem here.

Install Phone Disk

Anyone working extensively with iBooks EPUB development should first grab a copy of the invaluable Phone Disk. This allows Mac and Windows computers to browse most of the iOS device filesystem as a normal drive, including opening and inspecting EPUB books.

Download a fixed-layout EPUB sample from the iBookstore

iBooks samples do not have DRM and so can be opened and read normally. A good bet is to download one of the “Children’s Picture Books”; these tend to be fixed-layout books.

Find the display-options file

The key component of the extension is the addition of the file META-INF/com.apple.ibooks.display-options.xml. This file tells iBooks that the book is the fixed-layout type, and typically looks something like this:

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
    <platform name="*">
        <option name="fixed-layout">true</option>
    </platform>
</display_options>

There are a number of options here which are detailed in the iBookstore Asset Guide (v4.5), including how to define two-page spreads.

The first thing I tried with one of the samples was to validate it with the latest epubcheck 1.1:

Epubcheck Version 1.1
WARNING: /Users/liza/foo.epub: item (iTunesMetadata.plist) exists in the zip file, but is not declared in the OPF file
WARNING: /Users/liza/foo.epub: item (iTunesArtwork) exists in the zip file, but is not declared in the OPF file

These are just warnings; the fixed-layout book is valid. You can try opening them in other EPUB readers, with varying success depending on how wild the book designer got with the fixed-positioning.

Inspect the OPF and NCX

One immediate surprise to iBooks developers is that you’re likely to find an embedded font (now supported in any iBooks EPUB). Otherwise there’s nothing added to the OPF.

The NCX examples I found did not include all of the XHTML pages; I’m not sure whether that’s just a function of the book being a sample.

Structure of a fixed-layout book

In a typical EPUB, each chapter or major division of content is a single XHTML file. In the fixed-layout model, each XHTML file corresponds to a single physical page. So while it’s typical to name most EPUB XHTML files like chapter01.html, chapter02.html, in the fixed-layout book you’re apt to see a layout like:

cover.xhtml	font		package.opf	page001.xhtml	page003.xhtml	toc.ncx
css		images		page000.xhtml	page002.xhtml	page004.xhtml

XHTML content

The one unusual element in the fixed-layout content will be this HTML, which is required:

<meta name="viewport" content="width=1000, height=1000"></meta>

The specific width/height is per-book and based on the desired dimensions of the page. iBooks uses this information to scale the screen size appropriately (more on this later).

Otherwise the XHTML should look relatively normal (other than being very short). In fact the XHTML will be exceptionally readable since these books are by necessity all hand-coded at the moment.

CSS

Here’s where things get interesting:

The body element must be defined with an absolute width/height that matches the viewport above:

body {
	width: 1000px;
	height: 1000px;
}

Images and text will often be absolutely-positioned. z-index and other advanced positioning techniques are also supported. Font sizes are specified in pixels, not ems (users can zoom fixed-layout books, but the text will not reflow). Background colors are useful in this model as the XHTML content is full-bleed and does not usually have the goofy fake book margin.

Since this is all standard CSS 2.1 (or CSS3), these books don’t technically require a specialized reading system; any one based on a modern browser, like the mobile version of Ibis Reader, could potentially consume these books if the reading system could scale the pages appropriately.

Interactivity

It’s been noted that my original JavaScript in EPUB example no longer works in more recent versions of iBooks. This had nothing to do with the JavaScript parts themselves; instead the problem was that Apple began squashing the positioning information needed to align the popups.

In recent work for publishers I’ve found ways to get around those limitations, but they’ve been quite awkward and difficult to author. Would the “freedoms” of positioning in the fixed-layout books allow the original sample to work again?

Yes!

I took my original file and made only three changes:

1. I added the com.apple.ibooks.display-options.xml file just as shown above.
2. I added the viewport directive to the XHTML file and set it (arbitrarily to 600 pixels wide, 800 pixels tall).
3. I modified the CSS body directive to match the viewport.

The result:

Download the example EPUB (Creative Commons Attribution-Noncommercial-Share Alike 3.0)

Obviously the layout could use some work; there’s no longer any default margin added by the ereader, so the text bleeds out. Also my 600×800 dimensions don’t exactly match the iBooks aspect ratio, so there’s more fake book border. But you can see how this could be improved.

Note that the vast majority of EPUB books should not be formatted this way. This isn’t a one-way ticket to CSS Town. If the text on a particular XHTML page overflows the bottom of the single page, it will get cut off. You cannot mix fixed-layout and reflowable pages in the same EPUB file.

We were happy to once again be able to work on this series of web design books. I highly recommend both CSS3 for Web Designers and HTML5 for Web Designers. They’re a great resource for ebook developers who want to get up to speed on some of the tags and styling that will be available in EPUB3.

To sample the content, there’s an excerpt on CSS3 transitions, a mechanism for doing animation in pure CSS.

IBM DeveloperWorks has published Data-driven interactive applications with HTML5 and Ajax, my short tutorial on writing offline-capable webapps for mobile devices. Many of these techniques were used when developing Ibis Reader (though Ibis Reader does not use the jQTouch framework).