Here’s the conclusion that all the web gurus seem to have drawn over the past months: HTML5 is the future, and that future is slowly creeping into our midst. This article by Dave Shea is the latest proof of that. Then there are inspiration galleries and blogs dedicated to the use of HTML5 for markup, plus hardly any mention of XHTML2 anywhere else.
rel and more meaningful links
But I’m not going to get into the war between the two here; I’ll just focus on a specific development in the arena: link relations. There’s more to it than rel=stylesheet and rel=alternate. About a dozen more.
For example, the Google-imposed rel=nofollow will be officially added in HTML5, but the seemingly convenient rel=feed may be dropped due to browser implementation. Other interesting link relations mentioned are rel=search, which obviously points to a search page, and rel=sidebar, which refers to a document “shown in a secondary browsing context (if possible), instead of in the current browsing context.” More are being proposed here, including rel=accessiblity.
rel seems to be what plugins are to web browsers, so it’s interesting to see how they can make a markup language as extensible as possible.
rev and a less rotten web
Still related to link relations is the rev attribute, which stands for a “reverse link”. It hasn’t been as popular as its cousin rel up until microblogging boomed, and consequently, URL shorteners and the threat of link rot.
Considering just how popular Twitter is these days, particularly as a social media marketing and SEO tool where links are the mode of currency, using rev=canonical to indicate one URL is a shortened version of the other:
Google introduced rel="canonical" recently. It’s a way of pointing from an alternate URL back to the canonical URL of the current document: the relationship of the linked document to the current document is “canonical”.
If you’re linking from the canonical URL to an alternate URL (like, say, a shortened URL), you could use rev=”canonical”: the relationship of the current document to the linked document is “canonical”.
People are also advised to check long URLs at this RevCanonical app to determine whether they already contain shortened ones.
Although we’re now in this transitional stage of shedding off old browsers and web technologies that have been stumbling blocks to creating innovative new websites, there’s still confusion and fear that needs to be quelled. (Some people just can’t get excited that easily.)
Jeremy Keith’s article, Misunderstanding markup, seems like the ideal anchor at this point. First, it points out the differences between XHTML 1.0, XHTML 1.1, and XHTML 2:
- XHTML 1.0 = HTML4 with XHTML syntax
- XHTML 1.1 = XHTML 1.0 with the requirement that documents should be served with the XML MIME type
- XHTML 2 = a whole new specification that has little in common with XHTML 1.0/1.1/HTML 4
- XHTML has two types: pages that are actually served using the
application/xhtml+xml MIME type; and pages that are actually served using the text/html MIME type but follow XHTML syntax.
Confusion? Fixed.
Second and more importantly, it emphasizes what the triumph of HTML5 means for XHTML:
- You can still use XHTML syntax on HTML5 documents; it’s flexible enough and backwards-compatible (unlike XHTML2) that way. You can also go back to old coding conventions like uppercase tag names, optional quoting of attributes, and the absence of trailing slashes, and that’s okay too.
- In fact, you can serve HTML5 documents as
application/xhtml+xml and you get an XHTML document, affectionately called XHTML5. At this point, only XHTML2 is dead.
- Still scared about taking the plunge to HTML5? It’s as easy as replacing that long-winded strict, transitional, or (gasp) frameset DOCTYPE declaration to
<!DOCTYPE html>.
Once you learn items 1 and 2, the third item is all you’ll need to focus on from now on. It’s a comforting message that if you think catching up to HTML5 will be difficult, rest assured that it’s not as scary as it looks.
Fear? Fixed.
Let’s move on, shall we?
Aside from creating brilliantly art-directed articles that push the limits in with the latest HTML and CSS features, David DeSandro is redefining at least two classic site features at the same time with his Portfolio page:
The portfolio format.
Most portfolios consist of image thumbnails with either short or detailed descriptions about each project undertaken. DeSandro’s portfolio, on the other hand, contains full-width, full-height screenshots with guided markings explaining the how and why of his work, not just the what. Not only can you admire and drool over the designs, but you can learn from them as well.
The HTML image map.
The concept of image maps is sound but its execution isn’t so exciting: you don’t exactly know where to click and if you do, you don’t know what you’re clicking on. DeSandro created annotations that are intuitive and easy to navigate.
Does your portfolio need a refresh?
Your portfolio is your resume. Presenting your work and communicating your design view is critical to how others perceive you and shouldn’t be an afterthought. David’s portfolio isn’t so complex as it is well thought out. The designs are in full view; the details are straightforward. No distractions, no hype. Reexamine your portfolio page and see if yours is the same.
Check out the more colorful, animated visualization of browser support for the latest HTML5 and CSS3 features based on data from When can I use… Inspired by a General Dynamics postcard and an infographic on America’s wealthiest religions, this single-serving site is quite literally a rainbow that’s painting optimism for the future of web standards.
Each ray represents a feature, and the different bands of color represent the leading browsers, IE6 excluded (finally). More under the hood details here, praising the virtues of Sass and Photoshop-less, in-browser design. Kudos to Paul Irish (again!) and Divya Manian.
In celebration of the iPad retail launch, Apple has created a gallery of iPad-ready websites that are said to embrace “the latest web standards—including HTML5, CSS3, and JavaScript”. That is, no Flash. You can even add your site to the gallery (scroll to the bottom).
Is Apple really opening up?
Let’s get the snark out of the way: a gallery, really? How novel. Right now there’s a vertical list (no Cover Flow?) of 20 top-tier websites. Will Apple really painstakingly update this list and add every possible HTML5/CSS3/JS-ready site submitted?
It’s a rare thing for Apple to lead a user-generated campaign like this but its best intentions are a thin veil over their real agenda—eliminating the competition and expanding further in the multimedia business. Does it really care about anything other than the big fish? What are the odds that the most humble of websites will even get into the gallery? Apple markets its products by partnering with the largest corporations that fit into its plans; I can’t imagine caring for the little guy in all of this.
This isn’t even in the same league as the iTunes app store—whose contents number in the hundreds of thousands—but could easily apply the profit-based and biased policies anyway. Not what I would call open or little guy friendly.
Is Apple a true web standards crusader?
Speaking of the app store: you can also develop specifically for the iPhone/iPod/iPad family using the SDK, but those apps don’t work in other devices. The mobile web is booming because of both the “web standards way” and the “mobile app” way, but how are device-specific apps any better than Flash apps (which happen to be cross-platform outside of Apple’s products)? Flipping off Flash when HTML5 and CSS3 aren’t ready isn’t a very responsible thing to do.
If Apple really wants to promote web standards, it should be doing a lot more with its resources to convert and educate people. The gallery is one thing, this documentation is another good step, but where are the resources for developing in HTML5, CSS3, and JavaScript? Partnerships with web standards groups like WaSP? Zeldman or one of the Super Friends speaking at the keynote?
If Apple really wants to promote web standards, see how it practically equates HTML5 with Flash-free media and nothing more. No oohs and ahs over CSS3′s text shadows and rounded corners or HTML5′s geolocation and <canvas>. This is the perfect opportunity to introduce the mainstream crowd to the wonders of these new technologies, yet all it’s pushing is anti-Flash propaganda.
One more thing…
Dear Apple, you’ve done a lot of groundbreaking things, but if you’re going to use web standards as a selling point for your most adjective-ridden product ever, you can do a hell of a lot better than an an anti-Flash gallery.
I’ve sung praises over the Flash-based multimedia suite Aviary, but what’s more disruptive than an company using Adobe’s own technology to compete with them? Perhaps something that erases Flash from the equation altogether, which is what you get with Sketchpad. If enough effort is poured into this project down the road, taking desktop tools to the web browser may no longer need plugins like Flash and Air.
That still seems like a far away future, though. Even this ReadWriteWeb report, where HTML5 has been found to be sometimes more CPU-intensive than Flash, indicates it doesn’t even have that advantage in the bag.
Then there are others who can’t see how HTML5 and Flash can even be comparable, but here’s a compelling point for that argument: where are the tools for creating in HTML5? John Nack from Adobe has a few answers. Though as an Adobe guy, he advocates for Flash too.
Finally, there’s browser adoption as the biggest and most obvious issue of all. And sadly, that one might not even be resolved.
All of these beg the question: “Is it irresponsible to advocate using HTML5 before it is ready?” But when, pray tell, will it be ready?
Or as a like to call it: podcasts that have caught my eye in the past week or so. And they differ in several ways, so there’s sure to be something for everybody. Take your pick:
Confession: It took me a while to realize that this podcast is actually the previously-named You Suck at Web Design, relaunched as a new brand with a new site design. This show isn’t so much a bag of tricks on web design as it is a quirky, personal storybook told by Matthew D. Jordan, but still a must-listen.
This is not just one but seven shows tackling different topics, from photography to Ruby programming, founded just last year by Dan Benjamin. I love the idea of a whole network of shows about the internet, on the internet, and here we have a whole suite for people who make websites. I can think of few things better than that. More networks and more topics, perhaps?
In light of the “circuses” happening in both the Hollywood late night talk show circuit and the web working groups, standardista slash comic strip creator Kyle Weems aka CSSquirrel announced this:
I am in the process of devising a “late night” talk show that the Squirrel will host, featuring interviews with cartoon representations of various web designers/developers/standardistas. It’ll draw from the mighty traditions of the Tonight Show, The Daily Show and Space Ghost: Coast to Coast, and in theory will be a plug-in free experience brought to you in part by HTML5, JavaScript and vector tree-climbing rodents.
Check out the podcast over at SitePoint, titled HTML5 is a beautiful mess:
The podcast touches on that matter, and spins out to the state of the actual implementation of HTML5 itself, whether there’s a challenge in getting designers and developers to start using it, the issues of accessibility in <canvas>, and how delightful it’d be to move past plugins.
Truthfully, I’m trying to avoid getting caught in the sticky details of how HTML5 is developing at the moment because it only adds to the anxiety (isn’t stressing over Internet Explorer enough?) and diminishes hope (we’re supposed to be moving forward with these technologies already). But it also helps to stay realistic not just idealistic, and drawing back the curtain on how the working groups are actually working on the HTML5 standard is a good way to do that.
And by jQuery-esque I mean easy! The premise of Jetpack, Mozilla Labs’s latest creation, is that anybody who knows HTML, CSS and JavaScript can create Firefox add-ons.
It takes 80 lines of code to block ads on websites as shown in the demo above, and 14 lines to edit images from within Firefox. Granted, it just sends the data to Pixlr which does all the hard work, but lowering the obstacles to develop some fairly nifty scripts is a commendable effort, just as what jQuery did with JavaScript, Sass with CSS, and HAML with HTML. It’s made even more compelling with Bespin, Mozilla’s HTML5-powered web-based code editor.
Perhaps I’m still in a “standardize everything” mood, or envy this new doodad since I’m now using Chrome as my default browser, but don’t you sometimes wish all browsers could do this? Do the same set of things? We’re getting to a point where the level of HTML and CSS support is the same across every browser, so it makes me wonder what’s the next step for the idea of cross-browser compatibility.
It will probably depend on what the web browser means to its various makers. Google has unveiled the Chrome OS, which will run on a specialized version of Chrome. Opera is focused on its “web servers for everyone” feature in Opera Unite. (And Internet Explorer is playing catch-up, mostly.) Browsers are basically the gateways to the whole Internet, but they’ve become more ambitious than that and their vendors will attend to those ventures first before convening to create new cross-platform goodness.
Two cutting-edge web technologies, two water-related metaphors, two print and electronic book guides. HTML5 and Google Wave seem to have a lot in common these days.
HTML5
The Dive Into HTML5 site is the hub of Mark Pilgrim’s drafts for his book of the same name. He’s uploaded 4 chapters so far, and lays the foundation for building HTML5 pages from the ground up.
Aside from the excellent typesetting—feels wondrous to read it like a classic book, complete with old style illustrations and drop caps from public domain images—web designers and developers will definitely appreciate how the text will remain under a shareable, remixable Creative Commons license even when the dead-tree version comes out.
Google Wave
The Complete Guide to Google Wave site is also an unofficial guide to new Google product Wave. It’s created by Lifehacker editors Gina Trapani and Adam Pash, with 8 chapters and two appendices on maximizing the power of this real-time tool.
It’s published on a wiki, and true to its collaborative spirit and Wave’s, everyone is encouraged to contribute to the Guide. The DRM-free PDF comes out this month; the book version in January 2010.
Grab your copy
Publishing the contents of an entire book online is not new, and it is akin to artists give their music away digitally but charge for the physical version. But it garners attention because it’s not the same format as the constantly-updated blogs that pop up when hot, profitable topics do. You can rent these books online at textbook rental sites.
So compared to blogs, does the “online book” metaphor work? The wiki format does seem like a good way to go, but I would think the convenience of blogs both in the front and back ends wins out.
The more important questions however: will others follow in the footsteps of Mark Pilgrim, Gina Trapani, and Adam Pash? Which types of books should have an all-access web counterpart? When is it profitable enough to do so? As a consumer and a lover of all things free, it’s an attractive and admirably fearless choice.
Google sfida Microsoft con Chrome by Federico Fieni
Guess whose turn it is to bring Internet Exploder into the 21st century. Google has been dipping its fingers and toes everywhere, including the browser market. But it wasn’t content with creating its own; it just had to meddle with everyone’s favorite browser, IE. And based on the name, Google Chrome Frame quite literally puts Google Chrome into Internet Explorer (versions 6, 7, 8). That is, Chrome’s support for HTML5 and its JavaScript engine.
For ordinary users, it means having to download a plugin for IE so it works just as well as any other modern, standards-compliant browser does. For developers, it means adding a meta tag so their websites actually work work better.
Mozilla has done something similar.
A few months back, Mozilla released a <canvas> element plugin. It’s really not a new concept; clearly folks at Mozilla and Google are taking drastic measures so they can slap sense into IE.
Isn’t this Microsoft’s job?
And look how well they’re doing with that.
Let’s turn the tables on this one: would Microsoft even think of creating extensions for competing browsers? Would we even find this acceptable? Of course things are different; Firefox and Chrome work worlds better than Internet Explorer ever has. You don’t see Kill Firefox or Kill Chrome campaigns, do you?
This is not a cure-all
If you don’t have enough privileges to install plugins on your workstation, the plugin and meta tag combo is useless. It doesn’t solve the biggest roadblock to dropping IE6. And if you can install programs on your computer, why not just get Chrome anyway?
Though it’s a valiant effort to bring the IE6 user stats down by a few notches, web designers and developers would still have to test for browsers without Chrome Frame.
Can you say passive-aggressive?
But is it really a charitable deal with a hint of “desperate times call for desperate measures”? If anything, this move by Google (and Mozilla) is an elegant finger to Microsoft.
Google could just sit on its pretty throne, throw more resources into advertising its own browser, and wait ’til it eventually dominates the market. Search, email, advertising, online office suite, VoIP, real-time protocol: everything it touches turns gold. History is on Chrome’s side.
But there’s more to Google Chrome Frame as it seems to scream: “when will you ever get your act together, Microsoft!”—masked by a 24-karat, “we’re here to make the Web a better place” grin.
*/
