iBooks and an HTML Experiment
With all of the hoopla last week about the innovative features in the new iBooks 2 I thought it would be instructive to see what could be done with pure HTML 5. I put together a little demo which adapts to screen sizes and has simple interactive content. Here's what it looks like:
View the live demo here. I highly suggest you load it up on an iPad as well. Try rotating the screen (or make the browser window narrow if you are on a desktop.) Keep in mind this is just a prototype. It's not skinned or made to look pretty at all.
You can spin the little sphere tree by dragging with your mouse. If you view this on a tablet it will respond to touch events as well. You can click on the photo to see a large fullscreen version. The footer will stay fixed to the bottom. The inline photo and canvas will resize and move to the left edge if you switch to portrait mode.
I think the prototype turned out pretty well. It would be easy scale up to a full book with one page per chapter. Table of contents, index, and glossary would have to be written by hand unless we have some automated tool to do it, though I think such tools already exist.
So far I haven't found much that the new iBooks 2 format does that couldn't be done with plain HTML. They did add nice columns and shaped floats, but that is part of the CSS 3 specs and could be implemented in the renderer quite easily. (And shaped floats have been hacked into CSS2 for over a decade!)
While I would love to see a beautiful visual editor like iBooks Author that formats content for all possible bookstores I don't really expect Apple to build it for me. Such a solution will have to come from a third party. Fortunately third parties now know that Apple won't compete with them to build such a tool, so I expect we'll see something like it soon.
Anyway, back to my HTML 5 prototype. Anything else you'd like to see it do?
Please send feedback and comments to my twitter account @joshmarinacci instead of on the blog. Thanks!
Mon Jan 23 2012
My final draft is done: Building Mobile Applications with Java
The book is done!
I am happy to announce that I have finished writing my new book for O'Reilly on GWT and PhoneGap. Well, not completely finished; my final draft is submitted but O'Reilly's talented team still has to work their technical magic to get it prepped for sale.
Oh yeah, and I got a cool animal as well!
The book covers everything you need to get started with GWT and PhoneGap, including how to use the native SDKs for iOS, webOS, and Android. Then we dive into customizing the interface for mobile devices and using open source libraries to access device features. I also cover app UI design and optimization. Finally the book ends with a video game project where we use HTML Canvas to build a tilting physics game with a cartoon blob hero.
I am quite proud of the book though I often find the process of long form writing painful. The first 90% is super fun but the second 90% seems to take forever! I hope you enjoy the results. The book will soon be available for order on O'Reillys website and wherever ebooks are sold.
Fri Feb 17 2012
Over the past few weeks I've done more experiments and improvements to my ebook prototype. I'm still not sure what I'm going to do with it once I'm all done, but it's been an educational exercise nonetheless. Here's what I've done so far:
I've reorganized the code and put it into a github repo. Everything I'm going to show you is available to use and fork from right here. Click on any screenshot below to see a live example.
If we are going to call this stuff books then we need good typography. Fortunately 2011 saw the widespread adoption of web fonts. We can now use any custom font we want in any webpage, which includes the iPad with the release of iOS 5. To that end I tried searching for some custom fonts that add a bit a flavor while still remaining readable. After this font test I mocked up a full page with better typography for reading. This included bigger font size contrast, looser line height, a narrower column, auto-captializing the subheading at the top, and some inline images. Overall I'm happy with what can be done in pure CSS after just a few minutes work.
When we talk about typography we also have to consider how the reader should view long form text. The world seems roughly split between scrolling and swiping between pages. I honestly hate page swiping unless the content really needs to be paginated (like a children's book). I did try some pagination experiments using CSS multi-columns but I'm not happy with the results. Perhaps with some more work they would be usable.
Instead I've worked on scrolling. Scrolling feels very natural on a touch screen device, but you still need some static navigation to know where you are, switch pages, and view the table of contents. Fortunately CSS fixed positioning is pretty well supported these days, with IFRAMES as a useful backup, so it wasn't too hard.
I cooked up a simple bubble chart using Amino and some real data from the World Data Bank. You can use the slider to move time from 1960 to the present and see how the data changes. I think this type of interactive visualization will be very useful in ebooks.
Another problem with code snippets is that they often are too long to fit on a single line. I could configure a PRE tag to wrap the long lines, but whitespace is usually significant in code. I don't want to create a situation where the reader thinks something is two lines when it is really one, such as a command line example they are trying to type in. Still, we need a way to view long lines. I played with various scrolling techniques but ultimately found they added more problems than they solved. Instead I found this great technique by [name] to creatively wrap lines. A wrapped line is shown indented with an arrow symbol to indicate it is wrapped from the previous line. This removes any ambiguity.
The canonical example of what a digital book can do that a paper book can't is spinning an object around in 3D. I don't know how useful this will be in practice, but I wanted to prove it was possible. Using the amazing Three.js library I embedded a simple block that you can rotate using mouse drags or touch events. Three.js is really designed to use with WebGL, which isn't supported yet on most mobile platforms, but it can also render with plain canvas. It's not as fast, of course, but for simple flat shaded models it works well enough.
Putting it all together
To really show off what this can do I put together a book demo using some real content from my HTML Canvas Deep Dive presentation last summer. It has a title page, table of contents (generated with a simple nodejs script), and two full chapters with code snippets, examples, and photo slideshows. I think the results speak for themselves.
I don't really know what the next steps are. I'm going to finish up the canvas book (probably eight chapters by the time I'm done) and use PhoneGap to put it in the iPad, webOS, and Android app stores. After I've proven it's possible I'm not sure what to do next. I did this as an experiment to research the state of the art. I think what I've put together could become a great set of tools for building interactive ebooks since the markup you actually have to write is rather minimal. Let me know if you have a use for this code if I fully developed it.
Wed Feb 22 2012
IFRAME, you are dead to me
I know IFRAME, I know. We've had a good run. You've tried hard and back in the day you were somethin' special. The way you could bring in content from any domain was nothing short of amazing, and you certainly took out the trash when you bumped off FRAMESET. But that was then and this is now. A lot has changed in the past few years. CSS and AJAX are really hitting their stride and you just can't hack it. I'm willing to overlook a few margin bugs, but this?! Well this is simply the last straw.
We took a big chance on you. It's time to step up to the mobile platform and you blew it. We're making ebooks with fantastic interactive content. Tons of pages of web content that need to be pulled into a beautiful navigation frame. When people think of embedding a page they think of you: the mutha'effin' IFRAME! The 'I' used to stand for 'Internal', but now it just stands for 'Idiot'. You just blew it.
First you blew it on iOS with that whole two fingered scrolling thing. Seriously? Two fingers? WTF were you thinking?! Then on webOS you rendered perfectly thanks to an embedded web view back end. Sounds great except you forgot one tiny detail: you don't support any @#$! touch events. Your parent window can handle them just fine but you think you are too good for them. You can dance and sing but no one can touch you. You know what the TouchPad is? It's a touch device. Touch is even in the damn name. What the hell were you thinking? And don't even get me started on Android.
And finally, iOS 5. Your one last chance. Stylable with CSS. Proper event bubbling so that single touches work. Should be great. Your swan song. But no! You always expand to fit the content. Always. 100% of the time. Useless After all we've been through together. After all the good times and bad, this is how you repay me?!
IFRAME. You are dead to me.
(ps, just to show you we are serious, we've already built a beautiful prototype with Enyo 2.0, Ajax, and some clever CSS. Half the work for twice the power. Good riddance to you.)
Wed Mar 07 2012
HTML Canvas : an Interactive Travelogue
As you know, I've been doing a lot of ebook prototyping lately. Ever since the iBooks 2 announcement I've had this idea stuck in my head that we can make rich interactive ebooks using nothing but web technology. That lead to the toolkit I've been working on, now open sourced on github. As the first thing written with that toolkit I'm proud to announce my first interactive book: HTML Canvas, a Travelogue.
The book is an interactive guide to learning Canvas. It is not a comprehensive reference guide since there are plenty of those. It gives you an overview of the technology with deep dives into a few parts to let you explore what the technology can do. It does this through some hands on tutorial chapters where you build charts and a simple video game. It also has interactive code snippets that let you tweak variables to see how they react in real time. The entire book is written in HTML with the ebook toolkit. For the chapter navigation I used the new Enyo 2.0 beta with the Onyx theme. Animation is done with Amino, and for app packaging I've used PhoneGap.
Canvas is a technology that is still in flux, so I think an app based book is a perfect way of learning it. As the technology improves and changes I can continue to update the book with new examples and reference material. I like to call this concept an everbook. When you buy such a book you aren't just buying the static text itself. You are buying all future editions of that book, and can give feedback to the author to help shape the material. If the reader wants a deeper explanation of a particular topic or finds a bug in an example, then he can simply email the author with the request. The book is updated for free and everyone wins.
I will be releasing it for all of the tablet platforms over time, starting with webOS first and the iPad next. The retail price will be 4.99$, but as a thank you to the webOS community I am releasing it for a permanent price of 99 cents. And as of right now it is live in the TouchPad App Catalog and available for purchase. I love you guys and this is the best way I can think of giving back: developing tools and apps to keep webOS great. Please check it out and give me feedback. All bugs will get top priority.
Mon Mar 12 2012
HTML Canvas book for iPad is out!
I'm very happy to announce that my interactive book, HTML Canvas: A Travelogue, is now available for the iPad. It includes the same great content as the webOS version: a complete introduction to HTML Canvas with interactive examples, for just $4.99. Several bugs have been fixed in this build, which are coming soon to webOS as well.
The app isn't retina tuned yet (since I don't have an iPad 3 yet) but since I'm using web technologies for everything it should look pretty good. Only a few of the screenshots will likely need updating.
If you find any bugs or would me to add more content, please let me know. Updates for all platforms will always be free.
Buy for Apple iPad
Buy for webOS TouchPad
Fri Mar 23 2012
Canvas Deep Dive Source is Released
I mentioned a few days ago that I updated my Canvas Deep Dive ebook and dropped the price to free. But wait, there's more! I've also completely open sourced the book. My goal with Deep Dive was always to disseminate information as widely as possible. There is no better way to do that than giving it to the world.
The source to the book is now on GitHub here.
I've created a separate repo for the example code here.
The compiled web version of the book is here.
There are several reasons I think Canvas Deep Dive is different than the other canvas resources out there. First, it is comprehensive. Starting from chapter one the reader learns what canvas is, how it works, and the basic functions for drawing shapes. From there it moves on through charts, animation, pixel manipulation, WebGL with ThreeJS, WebAudio and finally a quick introduction to the experimental webcam API. Along the way the reader is walked through hands on exercises that ensure they understand the concepts.
Second: the book is interactive. Any text in a gray box has a glossary definition. The first chapter shows off interactive code snippets. Any number in red text can be dragged to change the value and the graphics are redrawn so the reader will directly see how this code changes the output. The hands on labs have inline demos so you can compare your code with the expected result.
Now that the source to the book is out there I need your help to make it better. Any contributions are welcome, from correcting spelling mistakes to writing new chapters. When the changes are committed the entire book will be rebuilt by my Hudson server here. Periodically I will be uploading new versions of the book as app to the iPad and TouchPad app stores. I'd also like help supporting Android tablets (I'm not much of an Android developer, I'm afraid). All pull requests are welcome.
Together we can make this the best way to learn HTML Canvas.
Tue Jul 24 2012