I really like webinars, especially when they’re free. They’re usually taught by knowledgeable people who can show/give a lot of useful information in a relatively short amount of time. And oftentimes, if you can’t connect to the Internet at the time of the webinar, the host will send you a link where you can watch the recording.
One of the more recent webinars I attended was Digital Book World’s Unlocking The Power of HTML5, CSS, and Javascript, led by Nick Ruffilo, CTO of Aerbook and founder of Zen of Technology. He had a lot of great tips, and some excellent examples, but they make more sense to people already familiar with HTML, CSS, and Javascript. For anyone looking to code their first e-book, I recommend trying out my Udemy course, How to Create Beautiful E-Books.
For more advanced users, check out Ruffilo’s HTML5 example here, or buy access to the code he used in his presentation here.
HTML
HTML stands for hypertext markup language, which is markup language based on XML that allows you to chunk data. For example, you can use a <p> tag to chunk a logical paragraph.
A good HTML tool according to Ruffilo is Firebug, a Firefox extension. It allows you to edit HTML live, which can be both useful and practical.
Ruffilo said that good HTML requires logical semantics (<p> tags, article tags, etc.), no display logic (define strong/bold tags; for example, have a bold heading for all recipe names in a cookbook), and provide context (tell reading systems why a word is bold). Ruffilo also said that in Word, there is the option of saving to HTML, which will look similar to the Word doc in a browser. However, it’s not good HTML.
HTML5
HTML5 has a lot of new tags (not all of them included in the image above), and according to Ruffilo, the big ones are canvas, audio, and video. That’s because they are functional. The audio and video tags standardize what was poorly done in HTML4, and canvas allows for functions, such as drawing, taking snapshots, etc., Ruffilo said.
Other tags are not “functional.” Ruffilo said they do not denote any function, and they name chunks that mean something. So instead of just using a <p> tag to show paragraphs, they can show a section, aside, article, etc. “It’s a better way to chunk content logically,” Ruffilo said. Many browsers support “random tagging” where you can make your own tags, though Ruffilo doesn’t recommend that.
Chunking basically allows you to take information and display it in a way that makes more sense. It makes it easy to move content around just by changing some CSS (that way you can determine the best way to set the content for each device, depending on the screen size).
Changing the layout based on screen size is known as responsive design. To do this, use media queries.
CSS
CSS defines parameters and styles. Use periods in front, to denote a class.
You can have multiple styles and change the way the content looks (and not change the content itself). CSS makes it easier to have complex layouts–though text by itself is fairly easy to work with.
“Where HTML5 and all of this comes into play is when we have books that are no longer simply text,” Ruffilo said.
Ruffilo said there are a few things to keep in mind for good CSS:
- Utilizes Cascades (tag, class, ID, inline) (least amount of redundancy in your code)
- Respectful of device sizes (media queries)
- Controls all display
- Scopes well (make sure you want all links to look the same, using anchor tags)
CSS3
CSS3 introduced pseudo classes. One is positional, (before, after, first-letter, first-line), which can be used for drop caps. There are two states: hover and active. These can be used to animate or make something interactive.
You can do this by adding three sets of styles for one element. For example, you can have images with 40% opacity, and when you hover they “animate” to show 100% opacity. In the active state, you can click on the item and it becomes larger.
Another new CSS3 property is transition, where you can transition/animate for all properties.
One thing to keep in mind for e-books is that there is no concept of hovering for touch devices. Some devices, such as iPad, but not iPhone, can somewhat hover when a finger is barely on the screen, but Ruffilo said not to expect it. However, pretty much all new devices support media queries.
Javascript
Javascript adds interactivity with minimal code. It can be self contained so you do not need to be connected to access it in an e-book.
The only e-reading system that supports Javascript right now is iBooks. A lot of reading systems are in development that will support Javascript, Ruffilo said.
However, Apple does not allow developers to use HTML5 local storage and other storage based elements. They do allow cookies, but that may change. This is because, Ruffilo said, according to Apple’s documentation, they don’t allow for any storage, so the cookies may be an oversight. iBooks also frowns on text rendered images, he said.
Kindle doesn’t support CSS3 animations, but they have support for some CSS3 display tags (drop shadow, etc.), Ruffilo said. Kindle also supports HTML5 tags for chunking, and newer Kindle devices support media queries.
There are also Javascript security concerns. “I believe the reality is it’s something that should be handled and thought of by the actual developers of the reading system,” Ruffilo said.
Lastly, Ruffilo recommended developers use jquery.com or Google to find frameworks to develop Javascript plugins. One handy plugin is Draggable.
