×

Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

HTML5: Up and Running

samzenpus posted more than 3 years ago | from the read-all-about-it dept.

Programming 31

eldavojohn writes "As you're probably aware, HTML is in a transition period, lost somewhere in the mire between versions 4 and 5. That doesn't stop us from using the latest and greatest, but it does create a requirement for gracefully falling back when a user does not have native support for features like canvas, video, audio, local storage, web workers and geolocation. HTML5: Up and Running is a great resource for someone tasked with bringing HTML4 webpages up to HTML5 standards, but it's mediocre-to-poor in illustrating advanced usage. For example, author Mark Pilgrim invests around thirty pages on video, while putting at most half a page toward web workers. Some of this is not his fault, due to support (or lack thereof), but the book felt skimpy at a couple hundred pages. For me, this book had value if only for the many wrapper scripts and workarounds like Modernizr, complete with code snippets. This book is for the beginner to intermediate developer and also for developers tasked with implementing HTML5 immediately. I received my copy for review from O'Reilly, but you can also find a draft of it under CC-BY-3.0 license. And the sample code is available online, so you can follow along." Read on for the rest of eldavojohn's review.The first chapter gives the impression that Pilgrim wants the reader to feel the pains so many in the HTML working groups have felt over the past two decades. But after all the anecdotes, after all the distribution list forensics, after 'too bad I'm doing it this way,' this chapter could be shortened down to one sage and universal rule for software: those who ship win. If you want to dictate HTML5 behavior and interfaces, sitting around e-mailing doesn't matter when other browsers are shipping code that works.

Chapter two is entirely focused on checking whether or not the user's browser supports any of the many features HTML5 is bringing to web developers' fingertips. An important thing to note throughout the book is that Pilgrim makes sure to keep mobile browsers in mind and a part of the discussion. While useful, this occupies fifteen verbose pages of the already short book.

Chapter three has really good material in it if you're looking to evolve from HTML4 to HTML5 without any of the added functionality (just markup). It makes for cleaner code and introduces all the new tags and their functionality. Here you'll see how navigation has been generalized (much to the joy of disabled/impaired users who rely on screen readers) and how to properly transform and maintain HTML towards to HTML5.

Chapter four does a good job of beginning to cover the canvas element and drawings in HTML5. Drawing shapes, lines, setting text and rendering images multiple times on the canvas are all covered. The chapter presents many examples and ends with a simple implementation of a game of halma. It's inefficient, and he alludes to better ways of rendering game graphics (like redrawing only 'dirty' parts of the screen). But I hope he takes the time to flesh out this chapter, as I've seen impressive things done with canvas already. I really hoped for more out of this chapter, but must concede that it might be better off in a book devoted to game design.

The next chapter exhaustively covers video and audio codecs. From there the book steps the user through how to make their page foolproof so that the video tag gracefully resorts back to Flash (or whatever you want), should it be unable to find a supported video codec. From batch encoding with ffmpeg to Firefogg to using handbrake, the author holds the user's hand and more (even explains MIME types). This chapter is very valuable to anyone who is sitting on some video data that wants anyone to be able to access it and isn't opposed to multiple encodings.

I'd like to mention also that Pilgrim is an entertaining author. As he covers the available codecs, he pokes fun at a few corporations:

MPEG-1 Audio Layer 3 is colloquially known as "MP3." If you haven't heard of MP3s, I don't know what to do with you. Walmart sells portable music players and calls them "MP3 players."Walmart. Anyway ...

And in regards to DRM:

Originally, all AAC files "bought" from the iTunes Store were encrypted with Apple's proprietary DRM scheme, called FairPlay. Selected songs in the iTunes Store are now available as unprotected AAC files, which Apple calls "iTunes Plus" because it sounds so much better than calling everything else "iTunes Minus."

It should be noted that Pilgrim can at times seem a little pro-Google. They are his employer, but I would appreciate it if he was an equal opportunity humorist and didn't pick on just the others.

Chapter six gives a short introduction to the geo-location features and the API provided by HTML5. It explains how to use gears or geo.js to work around IE's lack of support and also explains how to opt out of this sort of service — as it might seem a little too much for some people. I guess this is a feature for advertisers (not like they aren't doing it already, anyway).

Chapter seven briefly covers local storage in HTML5 and the precursors to it (cookies). It's got a few code snippets you can tinker with. There's a great meme embedded in this chapter: 'userData allows web pages to store up to 64 KB of data per domain, in a hierarchical XML-based structure. (Trusted domains, such as intranet sites, can store 10 times that amount. And hey, 640 KB ought to be enough for anybody.)' The chapter covers competing visions and notes that this is a separate effort from the core elements of HTML5. At the end, Pilgrim adds persistence to the halma game from earlier. This is already being abused, by the way.

Chapter eight shows how to markup your pages so that they operate offline. You include resources in the cache manifest file to let the browser know what to cache for offline usage (and more importantly, what not to cache). Again, at the end of this chapter, we take the halma game offline.

Chapter nine is one of the better chapters, as it extensively covers the various new types of form inputs we have in HTML5. Gone are the days of importing calendar scripts to create a date popup widget (although we already know how to check whether that's required). Search inputs, different kinds of integer selectors and color pickers are all covered in this chapter. While you might have experienced this in many other UI technologies, we're finally receiving native support in the browser!

The final chapter is relatively lengthy and very informative. It explains microdata and how to make HTML5 extensible so you can define your own markup (while keeping it normal so that older browsers don't plotz). It's like advanced metadata. You might wonder: Why would you do this? Well, the chapter continually shows how Google search results interpret this data ... but we aren't informed of any competitors using it or any plans of them using it. Pilgrim informs us that we should put this around our data and let others decide what to do with it (they might surprise you). So while the work is pretty extensive, you won't immediately see the fruits of your labors (unless everyone else is already doing it).

HTML5 has a long way to go. I hope this book is a living document, and I imagine the final O'Reilly book on HTML5 will be several times the length of Up and Running, but until those who ship their code cement it (after reading this book, my money's on Google), we'll have to wait. In the meantime, Pilgrim has some great resources on his site and done a decent job with this book.

You can purchase HTML5: Up and Running from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

cancel ×
This is a preview of your comment

No Comment Title Entered

Anonymous Coward 1 minute ago

No Comment Entered

31 comments

Not anymore (0)

Anonymous Coward | more than 3 years ago | (#33690508)

"I received my copy for review from O'Reilly..."

They won't send you more free copies now.

Re:Not anymore (2, Insightful)

migla (1099771) | more than 3 years ago | (#33690786)

>They won't send you more free copies now.

Unless maybe if they think they have a genuinely good book and believe that this reviewer has a reputation of having integrity.

Re:Not anymore (1)

i.r.id10t (595143) | more than 3 years ago | (#33690876)

Or if you work as an instructor (even an adjunct) :)

Of course, my local library system (aclib.us) just got a "site wide" Safari subscription, so I can get it online free.

Re:Not anymore (0)

Anonymous Coward | more than 3 years ago | (#33691322)

holy shit, that's my library too!

Re:Not anymore (1)

ebuck (585470) | more than 3 years ago | (#33691054)

How many copies of the same book do you need to read?

Reminds me of the scene in "My Blue Heaven". "(The other copies) are just in case I want to read the book multiple times!"

@pilgrim (0, Informative)

Anonymous Coward | more than 3 years ago | (#33690778)

all #itunes songs are #drm-free

Graceful fall backs (5, Funny)

NotBorg (829820) | more than 3 years ago | (#33690922)

but it does create a requirement for gracefully falling back

You mean something like this [yayeveryday.com]?

One question: why? (-1, Offtopic)

Anonymous Coward | more than 3 years ago | (#33690978)

WTF is this mess?

Real mature (3, Informative)

Anonymous Coward | more than 3 years ago | (#33691110)

I'd like to mention also that Pilgrim is an entertaining author. As he covers the available codecs, he pokes fun at a few corporations:

MPEG-1 Audio Layer 3 is colloquially known as "MP3." If you haven't heard of MP3s, I don't know what to do with you. Walmart sells portable music players and calls them "MP3 players."Walmart. Anyway ...

Yay, this helps me to feel so superior to the stupid slobs who shop at Walmart.

Originally, all AAC files "bought" from the iTunes Store were encrypted with Apple's proprietary DRM scheme, called FairPlay. Selected songs in the iTunes Store are now available as unprotected AAC files, which Apple calls "iTunes Plus" because it sounds so much better than calling everything else "iTunes Minus."

It's "plus" because they doubled the bitrate at the same time. Oh, and it's not "selected songs," it's the entire catalog.

But if we trolled the poor ignorant rednecks that shop at Walmart, we've gotta troll the Apple elitists, too, right?

Re:Real mature (1, Insightful)

Anonymous Coward | more than 3 years ago | (#33691812)

"iTunes Plus" started on "selected songs" before it rolled out to all songs. Given how long books can take to write, sometimes, it's possible he wrote it during that period and never updated it.

Re:Real mature (0)

Anonymous Coward | more than 3 years ago | (#33693512)

"iTunes Plus" started on "selected songs" before it rolled out to all songs.

The rollout finished on April 7, 2009, according to Wikipedia. But what bugs me isn't about some detail about iTunes, or Apple.

Given how long books can take to write, sometimes, it's possible he wrote it during that period and never updated it.

How out of date is the rest of the book? Why write a book, that takes over a year to finish, about an evolving, and incomplete, internet standard in the first place?

HTML3 (2, Insightful)

BitZtream (692029) | more than 3 years ago | (#33691206)

Funny, I thought we were still in the HTML4/Transitional phase from HTML3 ... yes, I know thats not the case, but it seems to me that the sites I prefer as far as their usability and aesthetics aren't really using anything new.

Confusing in spots (2, Interesting)

lee1 (219161) | more than 3 years ago | (#33691208)

I appreciate the review, but I could not figure out the intended meaning of several of your sentences.

It explains how to use gears or geo.js to work around IE's lack of support and also explains how to opt out of this sort of service

Who is opting out? The user? Out of what, providing geolocation information?

I guess this is a feature for advertisers (not like they aren't doing it already, anyway).

What feature? Geolocation? What are they doing already, anyway? Why is geolocation for advertisers? It seems pretty useful on my iPhone with no advertising involved.

until those who ship their code cement it (after reading this book, my money's on Google), we'll have to wait.

What code? Are you talking about new versions of browsers? What does "cement it" mean here? Most of HTML5 is already supported in any decent browser. Your money's on Google to do what?

Re:Confusing in spots (0)

Anonymous Coward | more than 3 years ago | (#33691774)

whoa whoa whoa. calm down. remember, this is ./, where grammar doesn't matter.

Re:Confusing in spots (0)

Anonymous Coward | more than 3 years ago | (#33695058)

When asking questions in way you are, it's best not to answer your own questions, in the form of another question, as it makes you look like troll. If you think I'm being ambiguous with "asking questions in the way you are", I mean you're asking them like a little shit... Just so you don't have to ask anymore questions.
 
The only valid questions you raise are for the last sentence, my interpretation would be that he means that HTML5 is a moving target. Meaning that it will be the browser makers who will cement the standard, and since Google makes Chrome, they(Google) will have a big influence on the final direction of the standard before it reaches completion. Although I very well could be misunderstanding the author, that was my interpretation.

Looks like HTML3 all over again (0)

Anonymous Coward | more than 3 years ago | (#33691886)

Hooray, after 10 years of increasingly getting people to separate content and presentation and be inclusive of those who don't or can't use graphical browsers, now we gots us a new HTML that's designed for drawim' pitchers on the skreen and that's the only aspect of it that seems to interest anyone! Derp derp derp I got purty pitchers on duh skreen, hee-yup! Thanks for all the purty pitchers, HTML5 creators!

Adobe and HTML5 (3, Interesting)

mark72005 (1233572) | more than 3 years ago | (#33692376)

We all know about the debate between Apple and the rest of the world about Flash and HTML5.

What is adobe's plan to live in a world after HTML5 takes over? What will happen to Flash?

Re:Adobe and HTML5 (2, Informative)

Anonymous Coward | more than 3 years ago | (#33692568)

they recently released an HTML 5 pack for illustrator [adobe.com]. A little birdy has told me the next version of flash will export vector flash animations to html5 canvas+javascript code. They'll also export movies as a native html5 video that degrades (lol) to flash. I've also heard that you'll be able to use flash as an IDE for designing pages (drag and drop buttons, pictures, etc) and export it as html5 (with a shitload of crappy javascript, actionscript converted to javascript, etc) or adobe air. I'm a little more skeptical of that one, but it could be done. But if they pull it off right... wow! Hypercard for the web, sort of.

Re:Adobe and HTML5 (-1)

Anonymous Coward | more than 3 years ago | (#33693118)

HTML5 is a PR stunt, it's more marketing than IT. no one's interested anymore.

Re:Adobe and HTML5 (2, Insightful)

smash (1351) | more than 3 years ago | (#33694072)

They will do as they always have, and make money out of content creation tools. For HTML5, instead of flash.

Re:Adobe and HTML5 (1)

M. Baranczak (726671) | more than 3 years ago | (#33697468)

What is adobe's plan to live in a world after HTML5 takes over?

Adobe doesn't make money from people running Flash applets. They make money from selling content-creation software. They'll adapt just fine.

What will happen to Flash?

Good question. My guess is that it'll lose market share, but won't disappear completely. There's a lot of inertia behind it, and it can do things that can't be done with HTML/JS (yet).

quick question (-1)

Anonymous Coward | more than 3 years ago | (#33692942)

What is the point of html5 now that Flash can be cross compiled to run on ios devices? Doesn't that make 20 out of 20 of hardware makers that support Flash content?

Re:quick question (0)

Anonymous Coward | more than 3 years ago | (#33693548)

Great, let's give up the future of the web to a closed standard, maintained mainly for the financial benefit of one company who can't seem to develop a decent cross-platform implementation of that standard despite being the only ones with the source code.

Re:quick question (1, Interesting)

Anonymous Coward | more than 3 years ago | (#33694190)

Well if you think that you can dictate to people that they should go back to the days of "this website is best viewed with [xxxxx] browser" then you will find that most people, businesses and organizations aren't up for it. Especially since you can't come up with anything apart from some ideological objections. Talk about lost cause dude.

Truth is that Flash is very open in a number of respects and cross platform implementations are great - Flash on Android is superb, and as you probably know, is faster on mobile devices than html5 in several important respects including animation.

I know quite a few html5 proponents that have become disenchanted because of the squabbling etc and decided not to waste their time with it anymore - they've realized its hype and moved on.

It's a shame that java couldn't provide the kind of write once play anywhere power that Flash is beginning to offer, but that is history.

You can also... (2, Interesting)

sootman (158191) | more than 3 years ago | (#33693898)

... read a similar book he's working on here. [diveintohtml5.org]

Re:You can also... (3, Informative)

Djatha (848102) | more than 3 years ago | (#33695568)

That is the same book ....

He developed his book out on the open; the book in progress is on that site. Now it is finished it is printed.

NFL Jerseys (0)

Anonymous Coward | more than 3 years ago | (#33694438)

I still thought that your write-up quite helpful. It's usually hard to make a complicated NFL Jerseys [nflclothingstore.com] matter seem very easy. I enjoy your weblog and will sign up to your feed so I will not miss anything. Fantastic content

Mark Pilgrim speaks from programming knowledge (4, Insightful)

WebManWalking (1225366) | more than 3 years ago | (#33694886)

Mark Pilgrim's telling us what he's figured out. He knows why you updated a page, but your appCache didn't get updated. He's dealt with the problem and explains that you have to get the web server not to send response headers that'll cause the browser not to even attempt to do an If-Modified-Since on the cache manifest. He knows that you have to register an event handler for "error" or else you'll never know why you didn't get to the "updateready" event. And he knows that even if you do get to the "updateready" event handler, if you don't call applicationCache.swapCache() there, your cache won't actually be updated!! And all of that's just in chapter 8.

While everybody else is regaling us with how to use article, hgroup and section, gee thanks, don't strain yourself, Mark's telling us how to use excanvas.js and conditional comments to get MSIE to use VML to simulate canvas. HTML5: Up and Running isn't for blog writers, it's for developers.

There's so much to cover, you need multiple books. Bruce Lawson and Remy Sharp's book Introducing HTML5 tells us how to do drag-and-drop and WAI-ARIA landmark roles, which Mark doesn't do, even though he also wrote Dive Into Accessibility. And the Peter Lubbers, et al., book Pro HTML5 Programming give us 31 pages about how to do WebSockets and 48 pages about how to do Web Workers. It's the parable of the blind men feeling up the elephant and giving different descriptions. And yet not one of them shows even a single line of Inline SVG code or a practical use for custom data-* attributes, which can be really, really useful. So there's room for even more HTML5 books!!

I guess what I'm saying is, please don't knock this book just because it's not everything you ever wanted to know about HTML5. None of them are. Just buy the books by those who specialize in what you want to know. I admire how Mark lays out really practical knowledge, even if you don't.

Re:Mark Pilgrim speaks from programming knowledge (0)

Anonymous Coward | more than 3 years ago | (#33698774)

Mark Pilgrim and the Seven evil browsers. That is all.

Check for New Comments
Slashdot Account

Need an Account?

Forgot your password?

Don't worry, we never post anything without your permission.

Submission Text Formatting Tips

We support a small subset of HTML, namely these tags:

  • b
  • i
  • p
  • br
  • a
  • ol
  • ul
  • li
  • dl
  • dt
  • dd
  • em
  • strong
  • tt
  • blockquote
  • div
  • quote
  • ecode

"ecode" can be used for code snippets, for example:

<ecode>    while(1) { do_something(); } </ecode>
Sign up for Slashdot Newsletters
Create a Slashdot Account

Loading...