Tuesday, August 18, 2015

Introducing HTML5 Books

What are the problems of EPUB?

Did you try to add Google Forms to ebooks? Did you try to add embedded widgets from internet to ebooks, e.g. YouTube video, games, Twitter posts, Facebook posts ? None of them is possible because EPUB readers did not support them.

Are you being rejected when you submit book with embedded video to Apple?

Did your book contain a lot of videos and photos to make the book size too large?

Did other people say that they cannot view your books because they did not have iPad or did not install EPUB readers on their devices?

Now, we have a solution: HTML5 book !!!

What is HTML5 book?

HTML5 book is a mini HTML5 app that consists of one master page (index.html), some full screen pages and some resources (e.g. videos, photos, javascript files). It can be viewed using any browsers on any platforms because file format is standard HTML5 format. Therefore, any embed codes should work.

HTML5 book looks like a reader embedded in the browser.
  • When the book is launched using browser, book cover is shown.
  • There is a navigation bar on the top, a previous page button on the left, and a next page button on the right.  When you tap next page button, it will turn to next page, tap previous page button, it will turn to previous page. 
  • When you tap TOC button, it will switch to Table of contents. You can jump to any page from here. 
  • When you tap Resume button, it will switch back to the book.
  • By default, two-pages (left page and right page) are shown each time. When the screen size is not enough, one page is shown instead. When you resize the window or rotate the device, the book will be automatically resized to fit into the window. 
  • Tap any part of the page, navigation bar, previous page button and next page button will be hidden. Tap again, they will be shown again.
  • If you choose to host your book in Google Drive or other web servers, you can just simply share the link to anyone. Your readers can view your book without any installation of EPUB readers.
  • If you choose to generate zip version of HTML5 book, you can just simply send zip file to anyone. Your readers simply unzip the file and then tap master page (index.html) to get started.

How can I generate HTML5 book?

When you are editing HTML5 book, you can now add embed codes and iframe element that are not supported in EPUB.
  • You can copy any embed codes from anywhere, and paste them into your books using HTML elements, e.g. Google Forms, SlideShare, Haiku Deck, etc.
  • There is a new category called "HTML5 Book Widget". You can also add embed codes from that category. 
  • YouTube and Vimeo elements are converted to embed code for HTML5 Book automatically.
After you finish your book,
  • Tap Publish button. There is a new option called "HTML5". Select "HTML5".
  • Tap Generate HTML5 Book button to start generation process.
  • Tap Upload to Google Drive (Hosting) button to upload the book to Google Drive for web hosting.
  • Tap Generate ZIP file button to generate zip version of HTML5 book. You can unzip the file and upload all the extracted files to your favorite web server for hosting or just send zip file to others for offline browsing.

Here are some examples:

Getting Started (Classic Book)

Getting Started (Fixed Layout Book)

No comments:

Post a Comment