Over the weekend, I finally finished my first serious attempt at an interactive picture ebook. I've been working on it off and on for several years, first as I tried to take photographs that were worthy of being published, and second as I taught myself enough Javascript to create the effects that I thought were necessary to show the photographs and information in a fun and beautiful way.
Here's a short sampling of the book:
You can download a sample, or buy the whole book on the iBookstore. It works great on both iPad 2 and 3, as well as newer iPhones. I haven't tested it in other readers besides iBooks (yet).
I am writing a new miniguide that explains how to create interactive ebooks with Javascript and CSS and will announce that as soon as it's available.
If you would like a review copy, please contact me.
Monday, October 22, 2012
Subscribe to:
Post Comments (Atom)
This is all great Liz, but I have to tell you that I could have done all of this ten years ago using Flash and would have had it done in a couple of hours. HTML-5, CSS-3, and Javascript combined seem like one giant step backwards compared with the power and ease of using Flash. If manufacturers of eReaders would make them Flash compatible it would make creating eBooks with all kinds of interaction along with video and audio unbelievably easy and with pixel level acuracy of every single element on the stage/page. No more worrying about how this eReader or that handles margins and centering etc. either or whether or not they can read CSS-2 or CSS-3 and so on.
ReplyDeleteIf manufacturers of eReaders would make their devices Flash capable, I would be one very in demand Flash developer/eBook creator. But as it stands now, it's you who will get all the work, and boy is it going to be work! :-)
That may be true but since Adobe has stopped development of Flash for mobile platforms it's a moot point isn't it?
DeleteOh, you're absolutely correct. Still, I can't help but lament the fact that much of this new HTML-5, CSS3 etc. was geared specifically toward getting web developers out from under the thumbs of Mircosoft and Adobe has in fact just made things considerably more difficult and time consuming, at least for now. There are already some Flash-like apps coming out that work strictly in HTML-5, CSS-3, and Javascript to help us do things we used to do using Flash or Silverlight, and some of these apps are beginning to export in ePub-3 as well. It's just a matter of time before one of them becomes the "new" Flash that the majority of us will be using. Here's an article mentioning a few of them I have favorited. (I haven't tried any of these yet, and one of them is actually made by Adobe.)
Deletehttp://www.storylime.com/blog/2012/06/07/enhanced-ebook-animation-adobe-edge-tumult-hype-sencha-animator/
The thing is, there's going to be a few YEARS of growing pains with new animation tools based around HTML-5. We could have been developing eBooks with Flash long ago and done the exact same things with none of the hiccups that come from new software.
Frankly, I don't believe audio, video, or interactivity have any place in a book of any kind. That's what interactive DVDs are for, and there's already a huge market for those. yes, clients will ask me to do it anyway, and I will, but I don't have to like it.
I'm a pretty adept accessibility professional, and Flash products still have problems becoming accessible. HTML 5 is the way to go. Congratulations!
DeleteI'm not sure what you mean about "accessible." The Flash player is certainly accessible enough. It's downright ubiquitous. As far as Flash itself goes, you can find used versions all over creation. And the older ones are in some ways much better. Many animators swear that Flash-5 (came out in 2000) was the last good version for cartooning since later versions focussed more on web stuff that just got in their way. Also there are several inexpensive Flash knockoffs like SwishMax that would do most things any eBook author would need.
DeleteCan you tell me anything HTML-5 would alow you to do with eBook authoring that Flash wouldn't? Otherwise, I don't think your saying that HTML-5 is "the way to go" has much merit.
Flash would certainly make working with audio/video easier. HTML-5 doesn't seem to even know what kind of standards, if any, it wants to include with video. There's hardly any video documentation at all. Flash already has a well established video platform that everyone from Hulu to YouTube uses.
Anyway, HTML-5 may well be "the way to go" one day, but right now it looks to me like we're going to have a long wait.
Skimbleshanks - totally agreed.
DeleteAs for accessibility (as in disabled person accessing the content) Flash is not completely accessibile when embedded into a webpage. The biggest issue is with keyboard focus. For someone who cannot use a mouse/trackpad or has other alternative input devices once you "tab" into a Flash player you get stuck in the player. You cannot tab your way back out to continue on to other content outside of the Flash player.
As someone who develops content for publish institutions this problem alone is a showstopper when considering Flash. I don't want to get a call from my admin office with news of a lawsuit. National Federation of the Blind has very recently been very vocal in their views of the current digital textbooks and platforms coming in the higher education world. (CourseLoad in particular)
That said, even with HTML 5, Javascript and CSS you can make inaccessible content so it's not a panacea. However if we play with web standards we have significantly better chances of having content match the capabilities of adaptive technologies.
Hi Liz, in terms of usabilty, you might want to rethink to maps page. As a user, if you click on some text and it is replaced entirely by an image in the same location, you can forget what the information in the text was while you look at the image. Then if you click back to the text, you can't see the image to relate it to the text. This is why many pages with interactive images and text are constructed with one "image spot" and multiple text labels which highlight text and replace the image when clicked. The current image and its related text remain simultaneously visible, which helps users understand the relationship between them.
ReplyDeleteI'm a Liz Castro Fan since she helped me crack the eBook! The Butterfly book is downloading now. I adapted the Gaudi book for some Tibetan images instead. Haven't quite finished that but the new book will be an incentive. Also, with the new screen for the iPhone 5, how will that affect design approaches for eBooks? Thanks!
ReplyDeleteLiz, thanks for sharing your book and some of its features! Very cool. I used iBooks Author to create a book, then applied for an iBookstore account in May or June of this year and never heard back from Apple. What's frustrating is that I could find no Apple support path to find out where one's application is in the process or if it's dead in the water. How long did it take for you to have your account approved? My understanding is that once approved, I have access to some tools that I'm supposed to use (I assume to upload the book) but I never got to that point. Do you have any words of advice? When does one just start over or is there a support path you know of that I just didn't find?
ReplyDeleteThe star of the show for me so far is the vertical video.
ReplyDeleteYes, this was the eye catcher for me as well!
DeleteI think I need to do a blog post on how to export vertical video... it's not straightforward. I'm continually surprised that there aren't better tools (or that I haven't found them yet).
DeleteLiz that would be great. I seem to remember it was in one of your earlier guides as well. Btw I sent a request to review your book and offered in exchange a copy of a storybook app that I think you'll be really excited by - coming out in late November/December. There's no paintboxes or pianos in this book but there is video and one top secret feature that's never been done before. All programmed directly in Objective-C using Xcode and with the work professional artists and animators.
DeleteI'm waiting for your miniguide (interactive ebooks with Javascript and CSS), thax for your books. your books 're very important for me to help my work..
ReplyDeleteCongrats Liz
ReplyDeleteDownloaded the book. Very cool! Obviously you did not build this book using Apple's iBook authoring tool. Did you build this from scratch using html and javascript?
Have you any experience with authoring tools from Inkling Habitat or Origami?
I'd would love to be able to do what you have done as an eBook - but I can't help wondering if video would not have been a better format for the production? I like the 'leaning back' character of video, though I am also aware that it is easier to generate revenue from an eBook than from a video.
ReplyDelete