We’re very excited by the public launch of the second ereading product based on Ibis Reader technology: Bookstream by Don Johnston Incorporated.

“From all perspectives of our development team (project managers, programmers, testers, etc.) the Threepress team has been fantastic to work with on the Bookstream project. It’s not everyday that a project meets timelines and exceeds all our expectations.”

– Don Johnston Inc.

Don Johnston came to us with their vision of providing highly-accessible etextbooks and reading material to students. A key requirement was that the technology stack had to be both amenable to screen-readers (no Flash) and usable on mobile devices (no Flash!). Our purely web-based reading system was a natural fit.

Transforming the base Ibis Reader product into Bookstream was a highly collaborative process involving multiple development teams and many months. We integrated our reading environment with Don Johnston’s user management system and tools for custom reporting and analytics, and added features to support classroom use. It was great to work with a team so dedicated to accessibility and that is experienced with systems that model the way teachers, administrators, and students actually interact. We’re extremely pleased with the result and happy to welcome Ibis Reader into schools.

For more information on licensing Ibis Reader, see our resources for partners.

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?)

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.

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.

If you use Ibis Reader, you will have seen the “Get Books” link. This allows you to view OPDS catalogs (lists of web-accessible ebooks). The Feedbooks catalogs are pre-installed, and some of you may have set up a Calibre/Dropbox OPDS catalog of your own library.

On a whim, I used the “Add Your Own Catalog” link to add the WebScription Stanza link,
Code:

http://www.webscription.net/stanza.aspx?feed=free

It worked! I can access the Baen Free Library directly from Ibis Reader! In “Get Books” I click “Baen” (or whatever you named the OPDS link), then “Baen Free Library”, then the “Read” button next to the book I want to add to my Ibis Reader library. Yay!

Edited the above URL to go straight to the free books, bypassing the top-level catalog.

The Stanza catalog is an earlier form of OPDS, so some features like cover images won’t work in Ibis or other OPDS readers. If Baen updates their catalog to OPDS 1.0 then those features will be enabled, and we’d definitely consider adding it as a built-in catalog like the Feedbooks ones.

Please share any other OPDS catalogs that you’d like to see added (or at least listed as optional catalogs users can add themselves).

Read the original post.

First up is internationalization. One of the key advantages of an HTML5 webapp versus a native app is that they can be installed in any country on a supported device, even in countries that don’t yet have an Apple App Store. But first the application needs to be localized for the regional language.

Ibis uses the Django application framework and Django comes with native internationalization support. We also used this when internationalizing Bookworm with the help of some great volunteers.

Before translators can get to work, the application needs to be readied: each bit of text in the site needs to be marked for translation. This step can be time-consuming and difficult to test.

Automating translation testing

Ned has posted some code on his own blog that he used to help validate the internationalization process. Some good comments point to more advanced tools that take a similar approach. Recommended reading for anyone doing internationalization work.

The tool fakes a translation by randomly capitalizing all of the letters in the site text. If done properly, you should get a result like this:

The book title Middlemarch and the chapter name look normal; those should not be translated. The remaining words are directions to the user and will need to be in a regional language. If any of the site text, like “Next” or “Previous”, showed up with normal capitalization, we would know that we missed a step.

We won’t be rolling out translated versions to ibisreader.com in the near future, but we will be posting some performance enhancements and feature updates very soon.

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).

In hindsight, this was an update we should have implemented ages ago, as it makes the library so much more attractive and usable. You should see a cover image for each EPUB that uses the “cover” meta tag convention for referencing a specific image in the EPUB as the cover.

We might have been slow to add cover support to other parts of Ibis Reader because it’s always been available when browsing OPDS Catalogs. Today’s second enhancement switches Ibis Reader into looking for the new /image and /image/thumbnail links for covers from version 1.0 of the OPDS Catalog specification. If you’re publishing an OPDS Catalog, please go ahead and switch to the new syntax.