HTML5 & CSS3 for the Real World coding error?

I want to have audio and video players on my website that will play in most browser combinations without having to rely on plugins, and HTML5 seemed to be the way to go.

However, the sample website “TheHTML5Herald.com” doesn’t even work. Apparently things are supposed to move and there’s a video? Yes? It’s just a picture on my screen here. The only thing that moves are the top two adverts. There’s also no sound, but maybe there’s not supposed to be.

I’m running Firefox version 3.6.18 and Windows 7. Maybe not the greatest and latest browser, but it’s not like I’m on IE6. If I can’t see how it works here, how can I learn how to use it? Or maybe I shouldn’t! Has HTML5 been dumped?

Or did they purposely put mistakes in the code that I’m supposed to fix as I work my way through the book? I’ll do that, I just want to be sure I’m not wasting any time! Thanks for any help.

HTML5 is still in development, so unfortunately, most browsers don’t recognize it yet, though I think Firefox often does. People have developed temporrary workarounds, but that involves serving up various different video versions to different browsers, which is quite a pain.

Here’s a thread with more info:

If that’s the case, I wish they had been more forthright in the description of this book. I paid a good amount of money for a book teaching me about HTML that doesn’t work on even my fairly-up-to-date browser. It should have been entitled “HTML5 for the Future World” because the Real World is people on IE8, Firefox 3.6, Windows XP and so on.

I feel like I’ve wasted a lot of time studying this book to learn code that won’t work for the vast majority of people, that has to be “polyfilled” to a ridiculous extent, and by the time it IS supported everything this book teaches me will be superseded by the final version.

Does Sitepoint offer a guarantee? I absolutely have loved everything else I’ve bought from them, but this has turned out to be very disappointing.

It’s no secret that HTML5 is prenatal, but it is being widely used ‘in the real world’ with the polyfills, so it’s fair enough to write a book about it, as many others have already done. No one wants to be left behind in all this excitement; but we all have to be aware that we are jumping the gun a bit, and be prepared to adjust to a changing spec and gradual browser support.

But the polyfills don’t work! I mean, The example code from the book doesn’t work on the latest version of Windows on just the past version of Firefox. If the authors of this book can’t get the code to work /with/ polyfills, well, I’m just flumoxed as to how I’m supposed to learn from the book. Do you know if they have posted corrections anywhere? All I’ve found is a couple of corrections to typos in the book, but no corrections to the actual coding on the website.

V.3.6? V.4 has come and gone; v.5 is the present FF. In general, you’ll need the latest versions of each browser for html5/css3.

cheers,

gary

Thanks, Gary. You just made my point. I’m writing a website for use in the Real World. My clients are on Windows XP, running IE7 and 8. I myself am still on Firefox 3.x because I like the deprecated plugins and am waiting for them to catch up. That’s the Real World. Please, where are the polyfills for us? I’ll happily throw in whatever code is needed for the older browsers, but what is it?

My client who is on Linux see nothing at all, another see the same nothing with Google Chrome in both Windows XP and 7 (he has two computers). I’m just saying, if the authors of the book have not found a polyfill that allows these rather common configurations to work then they needed to hold off. I was impressed with the introduction and the discussion about the careful testing of HTML5’s backward compatibility, but when their website written as a supreme example doesn’t work, well, so much for that. (The Herald doesn’t work on my month-old Ipad either: it runs the video but says, “There was an error rendering the video to the canvas…”)

I am hoping someone can share with me the polyfills that will work. At this point, I’m getting no better results than I did with plain old XHTML.

The Sitepoint books are generally so good, are we sure that the authors haven’t issued any errata for the code? I wonder if the code is supposed to be wrong and I’m supposed to learn to fix it by studying the book? All I need is audio, so I’m also a little concerned that the book only really covers video.

Please don’t tell me I need to tell my clients’ customers that they need to upgrade to the latest browser. Imagine their response. If HTML5 can’t do this, I’ll happily take XHTML code that will work (the code I found for flash doesn’t work with Chrome nor on the Ipad). If someone can share that with me I’d sure be grateful (and less upset about the money I put down for this book!) There’s just got to be a way. I mean, YouTube can send a video to everyone with a computer, why can’t we set up a simple sound file that just nearly everyone can see?

When I saw the title of said book, I wasn’t certain if to laugh at how pathetically stupid it was, or to cry at the number of people who would be led so far down the garden path even the serpent wouldn’t follow.

On the whole HTML5 from a markup standpoint is chock full of so much bloat, idiotic redundancies, and loosening of coding practices that as I’ve said a billion times, it’s setting development back a decade or more – undoing ALL the progress of 4 Strict/XHTML 1.0. It’s chock full of unnecessary extra wrapping elements, nonsensical changes to semantics, and extra tags for little to no legitimate reason. If you look at JUST the HTML part of HTML5, it’s just so much pointless nonsense I fail to see the appeal…

… and as I’ve said a billion times, there are only three groups who seem to find it appealing; those who never embraced semantic markup or separation of presentation from content, marketing types longing for that next misleading buzzword, and those out to sell a new book.

The mere NOTION of saying “real world” on something that’s still in DRAFT (and don’t give me that “part of it” bull) is so idiotic, the engineer in me plotzes every time I hear that malarkey.

Even if it wasn’t in draft, it offers me little to anything I actually want – at least in terms of HTML. Now, the new scripting stuff (like canvas) is great, and CSS3 is fine (what of it is stable enough to use) – but HTML 5 in terms of markup? NOTHING I want or need… and nothing I can see improving users experiences with websites, particularly since it’s just MORE bloat.

THEN you have the nimrods saying just throw javascript at the old browsers – to go with their attitude of “javascript fixes everything”. Is it any wonder we’re seeing perfectly good websites neutered into uselessness with hundreds of K of scripting for NOTHING? Screw that too!

Do yourself a favor, cut your losses, and go back to XHTML 1.0 STRICT or HTML 4.01 STRICT… and forget ALL of that HTML 5 idiocy. It’s a shamefully bad specification we’ve not seen the likes of since HTML 3 – and ANYONE telling you otherwise is probably selling something. Leave HTML 5 where it belongs:

With the nimrods who vomit up HTML 3.2 and for the past decade have slapped a 4 tranny on it, and today just slap the HTML 5 lip-service on it… Still writing their half-assed bloated presentational markup like it’s 1997.

No matter how much shellac you dump on that pile, it’s still a turd. Covering it in bug excrement doesn’t change that.

@WireStrung I haven’t had time to read the book yet, but I’d be surprised if the code didn’t work. All the same, you can go straight to the source and use the Shiv if you want, as many are happily using it right now.

Like I keep telling people HTML5 is NOT fully normative and is only experimental and JavaScript hacks are not the answer.

I myself have reported errata regarding that book over two months ago, which has not yet be resolved.

Yes, SP does offer you a risk-free 30-day money back guarantee.

I myself am still on Firefox 3.x because I like the deprecated plugins and am waiting for them to catch up. That’s the Real World. Please, where are the polyfills for us? I’ll happily throw in whatever code is needed for the older browsers, but what is it?

I too have 3.6x for the same reason. Lots of HTML5 stuff doesn’t work, nor should it: Mozilla didn’t even implement the HTML5 parser until FF4 (as something you had to turn on because it was experimental) and (not sure) default on with FF5.
But the point of HTML5 is supposed to be:
-backwards compatibility (this isn’t everywhere but they tried where they could)
-pave the cowpaths (use what vendors and authors are already doing where applicable)

The point of most of the new stuff is, IF the browser supports it, then great, fancy schmancy new crap. If the browser doesn’t, fine: you get old-fashioned normal websites.

Example, your video element:
You should have done something like Video For Everyone:
<video attributes blah blah…>
<source this one for safari and apple crap>
<source this one for webm>
<source ogg if you want (FF3.5 to FF4… FF4 can do webM)>
NOW HERE, listen:
video can haz stuff inside it, including <object> tags. What did you do to place a video on web pages before fancy video tags? That’s right, you were restricted to Flash and stuff. This is your fallback; there is no way you will make old browsers play videos without Flash, that doesn’t even make sense. New stuff for new browsers, period.
so
<object blah blah data=“your flash film” blah blah>
<param blah blah>
Not everyone has flash, fine…
<p><a href=“download”>Download the video here if your browser cannot play</a></p>
</object>
</video>
You said the Flash stuff didn’t work. Use whatever Flash code has always worked for you (but I would recommend a Satay-style code without the MS attributes since you don’t really need them). And, of course, a download link for the rest of us. I don’t even let Flash run in my browser. So let me copy the file and play in my preferred program.

(this is basically from Video for Everybody since I saw it before it vanished… site is temporarily gone but should come back at some point)

That’s what you do. No polyfill BS, just drop down to whatever’s needed for older browsers (which, as you say, most users are still on… only nerd and web devs and maybe Opera users are binging on the bleeding edge stuff anyway) using graceful degradation.

All I need is audio, so I’m also a little concerned that the book only really covers video.

Hm, likely because video is like audio but with more junk in it. The rules are the same, you can still degrade to flash in an <object> tag, and pretty much everything else is the same… instead of 2 codecs (video and audio) you just have one. They probably thought they were hitting two birds with one rock or something.

I’m avoiding the stuff that requires Javascript to work in older UAs. That means, no polyfills, no markup IE6-8 can’t understand all on its own. There’s lots of stuff (both HTML5, CSS3, even JS and new DOM stuff) that you can use, today, because it’s purely progressive enhancement (you start with something that works today in existing and older browsers and add nice new stuff for those who can).

If the book shows all these “look it works but only on webkit nightlies and that’s fine because we can load 300k of JS to “fix” everyone else” then it’s a fail, but an understandable one because that’s what you’re hearing all over the web.

And for many web developers, what they build and who they build it for is fine with this. Many web developers only want to build for bleeding-edge, and don’t mind that scripting is necessary to make some (very popular) user agents understand HTML markup. It goes against the Tim Berners-Lee hippy “teh internets is for all regardless of (dis)ability, hardware or software” idealism, yes, but enough web developers (the majority?) don’t subscribe to it in the first place, so a book like this makes them drool.

I suggest you look way deeper into HTML5 (try Mark Pilgrim’s diveintohtml5.org or if you like books, he has a book with the same info but different title at O’Reilly, and yes I can say it is worth it and mostly accurate (only not where it’s outdated), and html5doctor.com for advice), and find out for yourself what you can indeed safely use without a lot of extra BS, and what you’ll have to just realise won’t work in older browsers at all, or will only work with a bunch of scripts. You can totally determine how much you want relying on scripts and how much you don’t, as well: it’s not either a bazillion lines of code or none. You can choose for example to use Modernizr-type scripts who just check if some new property or method exists in the browser, and then decide if you’ll do something with that knowledge or not (it’s usually really simple easy JS, just some if statements usually; don’t need some Modernizr library to do it for you).

At this point, I’m getting no better results than I did with plain old XHTML.

For example, I recently updated some forms I have. I didn’t change the doctypes (the pages are still the old HTML4.01 and XHTML1.0… I haven’t found a browser yet who cares) but added type=“email” and type=“tel” for some form inputs. Old browsers are fine with this (they know these are really just updated type=“text” and they’ll continue to treat them as type=“text”). New browsers know these are different (update your CSS if you’re targeting input[type=text] tho). Mostly, newer mobiles with touch screens can display different, easier-to-use keyboards. Someone with an iWhatever or an Android-something or a crackberry can now more easily fill in a form. This is great, and really doesn’t have a downside. This is what is nice about HTML5: it’s not one thing. It’s a bunch of little things, and you can pick and choose what you want to use so long as you know how stable it is, how supported (or not) it is, and whether it’s actually valuable to your visitors or just bloated hype.

It was on by default in FF4. (Though <video> should work in 3.6 anyway. The new parser doesn’t make any difference there.)

It was on by default in FF4.

Really? When I got 4.0 (not the 4.1 update) on one of the machines at work, I was told I could enable the HTML5 parser by going into about:config and turning it on. I never updated to 4.1 on that machine though.
*edit hm, I have no idea where that recommendation came from, maybe it was that I could turn it off (switch to old parser only) in FF4? Cause I see Boris stating it was on by default since one of the betas…

(Though <video> should work in 3.6 anyway. The new parser doesn’t make any difference there.)

Doesn’t work here, I have no Flash plugin so use Chrome to view videos… even after going to YouTube’s HTML5 page.

*edit: ah prolly cause YT uses webM… would maybe work if they had an ogg.