Recently in html5 Category

» If you review the Intro to PHP at w3schools, you'll find Javascript listed as one of the items there under the heading » What You Should Already Know. That's interesting .. cuz you dont need to know Javascript in order to learn PHP.

I know .. cuz I've been learning PHP, and I dont know JavaScript. (Rather, I know about JavaScript .. specifically its dot.syntax - from general.to.specific)

[ Note the converse is not true. PHP is not listed as a prerequisite for learning JavaScript. (Only item listed is HTML. Heck, not even CSS.) ]

PHP code is executed on the web server. JavaScript, on the other hand, is executed on your local machine (.. in your browser). Two totally different environments.

Most web people, I'd imagine, learn Javascript (browser scripting) before they learn PHP (server-side scripting).

This seems to be the natural progression of things. In other words » first HTML (page structure & conent) » then CSS (presentation & styling) » JavaScript (behavior) » PHP/MySQL (server-side mojo).

» HTML5 Makes This a Good Time

Recently I've been learning HTML5. The longer I look, the bigger HTML5 seems. From what I can see, it promises to be a major step forward for the Web.

The main reason for its geeky coolness (by far) is the new HTML5 API's. (I count 31 of them.) As Erik says, HTML5 means » more power to the browser as a programming platform.

And the language HTML5 uses to exercise this power? .. that's right » JavaScript.

In HTML 4, for example, you need to specify JavaScript as the language inside the script tag (i.e. » <script type="text/javascript"> ). In HTML 5, on the other hand, you neednt specify (rather merely » <script> ) .. cuz JavaScript is assumed (.. as the default scripting language for an HTML5 web page).

So it's clear, even from my limited vantage point .. as a non-professional web-hacker .. that the time for learning JavaScript has arrived.

» Soon as I converted/upgraded the home page to HTML5, I started getting mail saying things like » "Rad, your new home page looks like krap on my iPhone." [ Doncha love the way my readers feel no need to sugarcoat. =) ]

There've been other glitches I've been trying to resolve, and the iPhone issue wasnt a major problem, since visitors could always use the weblog (where you're reading now) which is based on Movable Type ..

.. which views fine in any phone. But I finally got around to troubleshooting the "looks-like-krap" issue.

Seems the entire center column would instantly plunge all-the-way-down to below the end of the blue-green sidebars .. when the page-width was narrowed sufficiently (.. to ~800 pixels, which is not very narrow).

It didnt do that before .. back when I was using the XHTML 1.0 Strict <!doctype>. CSS, which controls the styling, shouldnt be affected by the HTML5 <!doctype>. So, what gives?

You might recall how there used to be a Google AdSense text-links bar at the very top of the center column (black) .. right below the blue-green horizontal navigation bar (i.e. » Forum, Weblog, Guides, etc), which itself wraps just fine. The text-link bar looked like » this.

I could see the problem occurred soon as the width of the center column became narrower than the width of that ad bar (468-pixels).

I'm not sure why it now behaves like that, but I couldnt fix the problem with CSS mojo, so I just removed the sucker.

» Notice anything different about the Rad home page? (Hopefully not much.) For a cool surprise, scroll down to the bottom (of the home page) and click the link labeled » Validate.

That's right, dawg! » 100% valid HTML5! .. employing a handful of new, semantically-rich HTML5 elements ..

.. such as » <header>, <footer>, <article>, <section>, <nav>, <aside>, <hgroup> & <time> (.. including the datetime & pubdate attributes) ..

.. most of which are designed to replace the semantically-vague » div tag .. used so prevalently in HTML4 & especially in XHTML layouts.

[ The HTML5 spec contains 28 new semantic elements. ]

I'm not talking about a div-laden page which merely contains an HTML5 <!doctype>. No, sir. We're talking about honest-to-God HTML5 mark-up. I also implmented significant WAI-ARIA features (via the role attribute) which are invalid in HTML 4.

[ The term semantics simply means that the new elements used to mark-up the web page have more MEANING. In other words, they're more descriptive, and browsers will therefore be able do more things with them (.. when they become HTML5-aware in the coming months). ]

Call me Mr. Early-Adopter. More to come on how I accomplished this (.. much hair-pulling, my first jQuery script, headaches, burning eyeballs, etc.). But right now I need to re-screw my head on straight. (Might take me a while.)

There are still a few minor glitches I need to iron out, but nothing I'd consider a deal-breaker.

[ Special thanks to the Excavator (Alaska) for helping with the jQuery script. (Yeah, that's something I need to learn.) ]

Modifying the mark-up itself was actually the easy part (.. after reading the excellent book by Remy & Bruce). Fun stuff. On the other hand .. converting my previous CSS-styles to target the new HTML5 elements .. that turned out to be the tricky part.

With CSS, if you omit even a single comma, your whole page-style falls apart in grand fashion. And it can be difficult to find something like a missing comma.

» Headaches of Being an HTML5 Early-Adopter

But my BIGGEST headache (by far, surprisingly enough) .. was getting the dang column lengths equal. What a pain that was!

I searched long-n-hard for answers .. googling queries such as » html5 equal height columns script.

Was surprised to find nothing helpful. If you really wanna torque your brain nicely, take a gander at THIS page (.. titled » Equal Height Columns with Cross Browser CSS). I mean, you start to get the feeling » Just shoot me now. (And note that I understand CSS pretty well.)

Regulars may recall that getting equal column heights/lengths was the first problem I ran into .. way back (in 2007) when I was trying to convert the home page from a table-based layout to pure CSS.

Seems it's STILL a royal pain .. cuz my old matching_columns script wouldnt work in HTML5 (.. despite tweaking the 'div' to 'section' .. and pleading desperately).

The Opera web browser is made in Norway (.. with headquarters in Oslo, the nation's capital). Before reading today's entry you should download & install a copy (currently at v11.x) .. as a way of thanking them. For what? Keep reading.

HTML 5 is coming. Sooner than many had expected. That's good news. (The Standards-creation process » aqui.)

The W3C, which is headed by Tim Berners-Lee -- the guy who invented the Web and was subsequently knighted -- operates on a consensus basis.

This might be why changes to Web standards (called Recommendations) such as HTML & CSS are made at such a frustratingly glacial pace.

Getting people from Microsoft & Apple (and others who make browsers) to agree on anything is no mean feat.

In '98, the W3C decreed that HTML was done (toast) and that XML represented the way forward.

The current spec/standard (that I use) is called » XHTML 1.0, which is simply an XML version of HTML. It uses HTML elements wrapped in (stricter) XML syntax. This is the standard used by most web pages being written today.

» <!doctype html>

HTML5 was not always called HTML5. Rather it started out as something called » Web Applications 1.0, which began in 2004 when folks from Mozilla & Apple joined forces with a group from Opera, who was not convinced that XML represented the best way for the Web to proceed.

They called themselves the » WHATWG .. the Web Hypertext Application Technology Working Group. (You must admit, WHATWG is a funny name .. especially for a group of über-geeks.)

» The Philosophical Battle Line » Backwards-Compatibility

But let's back up a bit. What's known today as HTML5 actually began as a philosophical battle. (Everybody loves a good philosophical battle, and a good story.)

The battle was over » backwards-compatibility. Sorta. It was definitely a prime consideraton in the battle that ensued.

The problem was » XHTML 2.0. It was a revolutionary design-concept .. that broke backward compatibility with HTML. Something that had never happened before. Moreover XHTML 2.0 came with draconian error-handling, which would cause browsers to stop rendering a page if errors were detected.

This draconian path of XHTML 2.0 that broke backward-compatibility with HTML, and where errors would not be tolerated, was the course the W3C had chosen for the Web's future.

In 2004, the W3C's futuristic purity-of-design philosophy (embodied by XML-based » XHTML 2.0) was challenged by a small group from Opera, who claimed that a pragmatic approach (that didnt break backward compatibility) would be a better solution. A better idea.

» Pragmatism vs Purity of Design

Pragmatism vs purity of design .. that's a good match up for any geek. Normally (without knowing the details) I would side with P-o-D.

But, we're talking about the Web .. which we want to be EASY for people to use.

I mean, ease-of-use is one of the main things that makes the Web so cool. Right? Anybody and their grandma can use it.

But I can feel it becoming more difficult. Of course, the more power you bring to any software or technology .. the greater the learning curve to wield that power.

Before I learned CSS, webmaster-life was tough sledding. Before I learned my way around the Linux shell, web admin-life was also tough. When you learn how to use it (.. becoming a student) .. technology can be pretty cool.

Anyway, the gang at Opera developed a proof-of-concept spec called » Web Forms 2.0 - that extended the functionality of HTML forms withOUT breaking backward-compatibilty. "See!" they exclaimed. "It can be done. In your face, Timmy-boy. I mean, Sir Tim."

Nevertheless, the W3C rejected their proposal, claiming it conflicted with the course they had already laid out and had already committed to.

Created my first HTML5 page today. See here » HTML5. Nothing fancy, but it does validate, and it's something I can use to test new features. For the last few years, I've been using » XHTML 1.0 Strict. HTML5 is TNBT (the next big thing) for the web.

IE9 is currently in beta, but once it's officially released, HTML5 will take off in a big way (.. because the Microsoft browser has so much market share).

Along with CSS3, HTML5 will make working with web pages and creating web applications much easier.

If you haven't seen Apple's HTML5 site yet, check it out. Very cool. You'll need to install the Safari browser, tho.

Exciting stuff. HTML5 + CSS3 will be like » Web 1.0 .. the way the web should have started.

One big difference between HTML5 and other W3C specifications .. is that HTML5 is very OPEN. Anybody can join the WHATWG mailing list.

Anybody can submit suggestions & recommendations. And many have. Yet browser manufacturers have veto power, since a spec that's not implemented is pointless. This frustrates developers.

Anybody who creates web pages for a living will find this notice a big deal, titled » W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5 Standard. A great interview with the HTML5 HMFIC (editor, named Ian Hickson) is posted » here.

Check out some of these heavyweights on the WHATWG team:

• Brendan Eich - the guy who invented Javascript
• Hakon Wium Lie - the guy who invented CSS
• David Hyatt - the architect of the Safari web browser & the Webkit engine that powers it.

So you shouldnt be surprised that HTML 5 will have Javascript playing a bigger part in the web of the future. HTML 5 will make Javascript's role more native, less like a plug-in.

Here's hoping that HTML5 will help Javacript run more efficiently, and keep it from making our CPUs run at 100% power when loading pages from sites that make heavy use of it.

If there's a loser with HTML 5, it will Flash video. The jury is still out, but it looks like Flash will be losing market share to HTML5 video.

HTML 5 is really about » backward-compatibility. XHTML 2.0 was a revolutionary design that broke backward compatibility. This is the main thing that folks didnt like about XHTML 2.0, and the major reason why HTML 5 ultimately triumphed. XHTML 2.0 would've "broke the web" .. or so the claim goes.