Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Tim Berners-Lee Sees Promise, Challenges in HTML5


SANTA CLARA, California — The man credited with founding the world wide web is both excited and cautious about its future.

Sir Tim Berners-Lee, the British physicist who first designed the way web servers deliver pages to web browsers nearly 19 years ago, sees great promise in HTML5, the much-anticipated rewrite of the language used to build web pages.

“I think (HTML5) is great,” he said at the Worldwide Web Consortium’s (W3C) annual member gathering, taking place here this week.

HTML5 is a mixture of several different technologies that allow content creators to do more with web pages. It defines rules for presenting video, audio, mathematical equations, complex layouts, 2-D animations and non-standard typefaces. Each bit of technology has its own working group within the W3C chartered with developing that one component.

“We’ve had the pieces for a while,” he says. “Seeing all these things finally coming together is exciting, and it multiplies the power of each one,” Berners-Lee says.

HTML5 also enhances the way browsers can store and process data, which has led to the creation of more complex and rich web applications that run in the browser like Gmail, Facebook and apps that allow real-time data sharing, like Google Wave.

“Yes, this is a markup language for web pages,” he says, “but the really big shift that’s happening here — and, you could argue, what’s actually driving the fancy features — is the shift to the web becoming a client-side computing platform.”

The HTML5 specification is close to completion. The most recent releases of browsers like Firefox, Chrome, Safari and Opera all support most of the technologies being rolled in to HTML5. Microsoft’s Internet Explorer supports fewer of HTML5’s advancements, but it’s catching up. HTML5 is expected to become an official recommendation by late 2010 or 2011.

Now that the web has been elevated to a more powerful computing platform by HTML5, Berners-Lee says it has also given rise to complicated security issues.

“You got a piece of code from site A, and you’re person B running a browser you got from company C, and that code wants to access data stored with company E for the purposes of printing it on a printer owned by company D — How do you build that so that it’s not susceptible to all kinds of nasty attacks?”

“The technology is very exciting, but there’s actually a lot of work to do in these corridors to make it work on the real web in a secure way.”

See Also:



Same as it Ever Was: The History of HTML is a Conversation, Not a Spec

Developer Mark Pilgrim has posted a fascinating look at how the HTML img tag came into existence. The history Pilgrim digs up — mailing list conversations between the creators of the first web browsers like Marc Andreessen and the webs early pioneers like Tim Berners-Lee — show that far from being a carefully planned specification, the lingua franca of the web evolved a bit like the early universe — out of a murky chaos.

That from the chaos we got a workable — some would argue good — solution for creating the web is proof on some level that conversations and not abstracts, proposals and design by committee are the key to HTML’s success.

As Pilgrim writes:

HTML has always been a conversation between browser makers, authors, standards wonks, and other people who just showed up and liked to talk about angle brackets. Most of the successful versions of HTML have been “retro-specs,” catching up to the world while simultaneously trying to nudge it in the right direction.

You might be wondering, why did img succeed where other proposals, like an include or an icon tag failed? The answer is simple, because Marc Andreessen shipped code — Netscape Navigator — while those backing the other proposals, for most part, did not.

Of course that doesn’t mean that just shipping code is always good plan. Shipping code before a standard doesn’t necessarily produce the best solutions, as Pilgrim says. Or, put another way by a commentator on Pilgrim’s post, “shipping doesn’t mean you win, but not shipping means you lose.”

From those who shipped without the official blessing of a standard, we’ve come to have an img tag, the basis for AJAX, all of the HTML5 tools available in browsers today and much more.

Critics of HTML’s disorganized evolution will be quick to note that we’ve also come to have the blink tag, cross-browser rendering issues and other pains of web development.

Indeed we’re not suggesting that shipping features without at least engaging in the conversation is a good idea, but, when it comes to the future of HTML, if browser makers don’t ship HTML5 features before the standard is official we’ll be waiting until 2022 to use the new tools.

But while the future of HTML5 might be moving at a rather slow and convoluted pace. Pilgrim’s post is reminder that HTML has always progressed that way.

Perhaps the truly remarkable part is that, for all its flaws and convoluted evolution the core tech behind the web remains essentially the same now as it was then. “HTML is an unbroken line… a twisted, knotted, snarled line, to be sure… but still… Here we are, in 2009, and web pages from 1990 still render in modern browsers.”

See Also:



Typotheque’s Web Fonts Rock, But Old Machines Can’t Learn New Type Tricks

Font foundry Typotheque has introduced a new web font system that gives web authors a new set of font embedding options for their website designs. However, as cool as Typotheque’s new tools are, they can’t overcome some larger problems with the @font-face rule in CSS and the state of type on the web in general.

Typotheque, a Netherlands-based font foundry, recently unveiled a set of web licenses and an easy cut-and-paste solution for web developers looking to take advantage of the CSS3 @font-face support in modern web browsers. The solution is particular nice because it doesn’t require the overhead of loading JavaScript libraries like some other proposed solutions we’ve covered, such as TypeKit. Typotheque’s system requires only a CSS file and a simple @font-face stylesheet rule.

Also working in Typotheque’s favor is a web-only license, which is issued and controlled by the company, that’s considerably cheaper than licensing the actual font files.

Unfortunately, in the real world, @font-face’s results aren’t always what you expect. As BoingBoing recently discovered when it tried a redesign using @font-face to embed custom fonts, CSS3’s @font-face rule doesn’t always render correctly on older PCs.

While it’s nice to see font foundries like Typotheque embracing both web licenses and simple embedding tools, the results are decidedly mixed. So long as your site’s users are running a modern OS like Mac OS X, Windows Vista or most Linux distros; and they have modern browsers like Firefox or most of WebKit-based browsers, the @font-face and Typotheque’s new embedding system work wonderfully. The only minor issue is a quick flash of unstyled text appearing when the page loads in Firefox, but that can be addressed with a simple JavaScript workaround.

However, for those users still using Windows XP, embedded fonts are not, by default, anti-aliased and results in jagged, ugly fonts that aren’t going to make you or your visitors happy.

To see how things looked in various browsers, we loaded Typotheque’s Fedra Sans font up in a test page at 72 pixels and then looked at it in various browser/OS combos:

Fedra Sans in various browsers. Click the image for a larger view.

As the image above demonstrates, the results are just fine in Firefox on Mac OS X and Linux, acceptable in IE7 in Windows XP and downright ugly in IE6 on XP. Given the considerable percentage of web users still browsing with IE6 in Windows XP, @font-face clearly isn’t going to work for every site.

Still, for those that just want to experiment with @font-face, Typotheque’s new system is the simplest, cheapest system we’ve tested. There’s even a free month-long trial available for testing purposes. For more details, head over to the Typotheque website.

See Also:



Pack Up Your Data and Leave Whenever You Want, It’s the New Rule of the Cloud

There’s a certain level of trust that goes along with using a cloud-based web application. You upload your photos and your documents so you can access them everywhere, but you also trust that you’ll be able to pull those photos and documents down any time you want.

It sounds like a perfectly reasonable assumption, but many web-based services make it difficult for you to export your data. Worse, they’ll charge you a fee for the privilege. Some offer APIs — a bonus if you’re technically astute, but a solution that leaves the average user short on options.

To prevent such headaches, Google recently launched the Data Liberation Front, an initiative within the company to ensure every one of its products has a clear, easy option for users to export their data in bulk and take their business elsewhere.

Leading this project is Brian Fitzpatrick, an engineering manager at Google. Brian and his team launched an educational website at dataliberation.org in September where you can track their progress and find instructions for exporting your Blogger blog, your Picasa photos, your Gmail inbox, or whatever service you want to bail on.

It may seem odd as business strategies go, but as a practice, data portability and the trust it engenders are key to fueling the growth of the open web. In the following interview, Brian explains why this concept is especially important now, as more of us are sharing our data not only with Google, but with Facebook, Yahoo, Microsoft and other major players. He also hints at some new export features coming to popular Google products — like the ability to export all of your Google Docs files in a single, downloadable Zip archive.
Webmonkey: What led to the creation of this initiative within Google?

Brian Fitzpatrick: Even before I joined Google, I heard (CEO) Eric Schmidt speak. And one of the things I heard him say time and time again is, “we don’t lock our users in.” If they wish to leave, they are free to do so, and they can take their data with them. After I started, the one thing I kept hearing over and over again from the team was that we focus on our users first, and everything else follows that principle.

In talking to other engineers here, I realized that we don’t lock our users in. But while the door isn’t ever locked, in some cases, it could use a little bit of grease. It’s a little stuck.

We asked various product people if they’ve looked into doing an easy bulk-export type of thing where users can take out their data — and put it in — en masse. The typical response was, “Oh, it’s been on our roadmap for four or five years, it’s just de-prioritized because we have to work on these things our users are demanding.” So, it just wasn’t getting done.

We decided to start a small team of engineers to do just that — go around to our various products and help build those systems.

WM: So it wasn’t a question of evangelizing data liberation since the product managers were already sold on it, but more of a mission to go install the plumbing?

BF: Yeah, but we’re also trying to raise awareness in general. Most engineers don’t typically think about data liberation. They’re more involved in launching products. But I think it’s important because it’s a way for our users to trust us more.

WM: How much do you see the Data Liberation project as good policy for Google internally versus good policy for the web in general?

BF: I would love nothing more for other companies to copy-cat us on this. It’s good policy because we’re in a different world than we were in ten years ago.

If you wanted a piece of software ten years ago, you’d go to the store, buy a box and take it home. If you wanted to try another piece of software, you’d have to go back to the store, buy another floppy and do the whole process over again. There’s a huge barrier to trying different things out.

Today, if you want to try something else out, you just type another URL in your web browser. We want people to try our software, and if we’re going to encourage people to put data in the cloud and use more cloud-based apps, it’s important to show that it should be easy to get that data out as well. I want more people to think about this. It’s an important thing, and most people don’t think “I want to get my data out,” until it’s too late.

To be very clear: It’s not that Google is just an altruistic, lovable, huggable company. I think we’re a good company, but we get a benefit from this. We benefit from the work we do with open web standards, open-source and data liberation. But if you’re using a Google product now and you decide to go somewhere else, the easier we make it to leave and take your data with you, the more likely you are to come back and use something we come out with in the future.

There’s also the “rising tide floats all boats” analogy — the more we contribute to the success of the internet, the more we contribute to our own success since we’re such a big player.

WM: So, are you taking steps to future proof your products as well? Like in the case of Google Docs, or in the case of feed-based data, are you making sure what’s supported today will be supported in 10 years?

BF: We’re focusing on open formats wherever possible. So, you’ll see things coming out in open-documented Atom feeds, XML feeds.

In the case of Docs in particular, there’s something great we’re working on at the moment. Right now you can get your docs out one at a time. We’re working on a way for you to be able to select multiple docs at once, choose whatever format you’d like — ODF or MS Word or whatever — and our server will convert everything for you, create a Zip file and stream it down to you. (Brian says this feature will launch within the next couple of months).

WM: That’s great for backups.

This is interesting, too. Last winter, we launched Blogger liberation. When you log in to Blogger, there are options for “import blog” and “export blog.” It’s a nice, user-friendly experience, an easy download. We noticed some people were exporting their blog every other day — they were just creating a back up. We have several copies of their blog across several data centers, but these people felt more comfortable having their own copy on their own computers.

WM: There are other Google tools that run back ups automatically, like Picasa, where you can sync your photo library in the desktop app to your album on the web, right?

BF: Right, and we’ve been doing some additional work with Picasa because we’ve recognized we can do a better job with syncing things like your photos’ metadata.

WM: That’s interesting because data portability on the social web isn’t only about your data, it’s also largely about your metadata — your tags in Picasa and who they’re attached to, who you follow in Blogger and your ratings and comments for their posts. Are those bits of metadata being taken into account?

BF: It’s really hard to keep up with the features of individual services and the smaller bits, since they’re all so different. I don’t know if Blogger is exporting follow data. I know in Reader, you can get a list of the blogs you follow if you export your reading list to an OPML file, but you don’t get a list of the posts you’ve starred. There’s some education needed there, and some things that merit more attention. I don’t think we have the answer for all that yet.

WM: It also raises the question of interoperability among social sites. There are emerging standards that don’t yet have broad support but are gaining steam — things like Portable Contacts, OAuth, Activity Streams. How much attention is Google paying to making sure its import and export systems play well with smaller social sites who are adopting these new open standards? Versus, say, the attention being paid to bulk data export?

BF: I think that’s more relevant to the teams working on products that touch on those standards. Our team currently has a pretty sharp focus on data you create in our apps or that you’ve imported into our apps — making it so you can get that out. As far as interoperability, we’re obviously big supporters, and anything we can do to make it any easier to build on the open web, we’re doing.

For example, on OpenSocial we make it easy for developers to write apps that can be shared among different social networks. Google has also done work with OAuth. But the Data Liberation team is primarily concerned with helping you get your data in and out. It’s sort of step one of n steps.

WM: OK, so that’s your first order of business. Is there a list of tasks related to data liberation you’ve lined up to accomplish in your downtime?

BF: One thing we’re studying is the fact that your hard drive capacity is expanding way faster than your network capacity. Your hard drive capacity increases by an order of magnitude every four years. So that means by 2017, you’ll have a multi-terabyte iPod in your pocket.

Network capacity has only increased a little bit by comparison. Ten or so years ago, you had dial-up, or if you were super-advanced, you had DSL. The network speeds we have now are not a lot faster when paired with the growth of hard drive capacity. So, there are a lot of difficulties when dealing with larger data sets. How am I going to get 20 terabytes from Chicago to Mountain View quickly? I’m going to put it on hard drives and FedEx it.

We’re brainstorming about making it easier for people to move that size of data set around, or to gain access to that data.

See Also:



Debunking the Myth of the Page Fold in Web Design

Web standards give developers a way to build websites so that anyone can access them. Unfortunately web standards don’t cover more difficult problems, like how to make sure people can find what they want on your site.

For that developers need to turn to common design patterns, but unfortunately many design patterns are outdated. For example it was long held as a common belief that most users would not scroll down the page, so your content needed to be “above the fold” if it was to be noticed — a term leftover from newspapers where the primarily headlines are above the fold, so those walking by a newsstand would see the important stuff even though the paper was folded in half. The web equivalent of above the fold is the area you can see without scrolling.

However, that conventional wisdom is not nearly as true today as it was back when Jakob Nielsen encouraged developers to keep everything above the fold. Of course Nielsen’s own site has plenty of content below the fold — after all, the web isn’t a newspaper.

CXPartners, a U.K.-based design agency, recently posted the results of a study involving some 800 user testing sessions, and on only 3 occasions did the page fold stymie users.

Part of the reason for the shift can be seen in CXPartners’ hotspot study, which used eye tracking software to reveal that users nearly always spend some time glancing at the scrollbar to judge page size. Now, that doesn’t mean you bury your best content below the fold, but it does mean that you shouldn’t worry too much about things that simply don’t fit above the fold.

But one surprising thing thing comes out of the study is that having less above the fold actually encouraged exploration below the fold. According to CXPartners’s study, the judicious use of white space and visual clues that lead the eye down the page significantly increase the chances a user will scroll.

The key is to make sure there are no barriers that would make your users think there is no “below the fold” content. One example cited in the study had a large horizontal bar running across the page, which acted as a barrier — it looked like the bottom of the page even though it wasn’t. Eliminating the horizontal bar encourage users to scroll the page.

Although it might run against your aesthetics as a designer, clipped text and cut off images are also high on the list of things that encourage scrolling.

Here’s CXPartners’ suggestions based on their user testing research:

  1. Less is more — don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.
  2. Stark, horizontal lines discourage scrolling — this doesn’t mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling.
  3. Avoid the use of in-page scroll bars — the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen.

So what would Jakob Nielsen think? Well, actually he seems to have weighed in in the comments, suggesting that what CXPartners discovered is old news. That may be true for Nielsen, but the CXPartners’ write up is much more readable than the technical, jargon-filled document Nielsen points to, and even if “below the fold” is a myth, it’s a well established one and there’s no harm in debunking it again.

Be sure to check out the comments on the CXPartners site for some helpful design tips and techniques from readers, as well as some thoughtful criticisms of the study.

Photo: Matthew Bradley/Flickr, CC

See Also:



Search Engine Optimization Is Part of Good Web Design

One significant aspect of web design that we at Webmonkey often ignore is so-called “search engine optimization,” or the art of making sure Google and its brethren can find, crawl and index your websites.

Part of the reason we typically ignore SEO is that it’s an industry full of what Derek Powazek, who has worked at both Google’s Blogger and Technorati, and is a former Webmonkey contributor, recently called “scammers.” Indeed, black hat SEO outfits are responsible for creating billions of bad results for users — highly ranked sites that actually offer little more than advertisements and spam.

It’s too bad the SEO industry ended up this way, but with the rise of Google and the importance of PageRank, as Powazek puts it, “like the goat sacrificers and snake oil salesmen before them, a new breed of con man was born, the Search Engine Optimizer.”

Naturally Powazek’s rant against SEO raised the ire of folks like Danny Sullivan over at Search Engine Land — people that focus on optimizing sites for Google without resorting to black hat techniques.

Leaving the ranting aspects of Powazek’s post aside, you’ll find that he and Sullivan actually agree. They just use different terms to describe what they’re talking about. The real message of Powazek’s rant is not that SEO is wrong, but that you shouldn’t have to pay extra to get it.

SEO is actually just a subset of good web design. Powazek writes:

Good SEO techniques are just good web development techniques. They should be obvious to anyone who makes websites for a living. If they’re not obvious to you, and you make websites, you need to get informed. If you’re a client, make sure you hire an informed web develeper.

Powazek is actually echoing Google’s own advice, which says: “if you’re thinking about hiring an SEO, the earlier the better… that way, you and your SEO can ensure that your site is designed to be search engine-friendly from the bottom up.”

In other words, if you’re a web developer and SEO isn’t part of your toolset you’re doing your customers and yourself a disfavor.

So what if you aren’t familiar with the intricacies of optimising your site for search engine spiders? Well, perhaps the best place to start is with Google’s own recommendations for webmasters and there’s also the Webmaster Central Blog.

For the nostalgic, we also recommend checking out Powazek’s decade-plus missive on why he loves HTML tables right here on this site.



Geocities, Identity and the Problem With Disappearing Web Services

Yahoo is shutting down its free web hosting site Geocities later this month. The company recently sent out a final notice to Geocities users telling them the service will shutdown October 26 and offering to port their data to Yahoo’s site hosting service. Yahoo charges $5 per month for its simple hosting plan.

While we have a bit nostalgia for the days of free Geocities accounts, let’s face it, most of that content is pretty outdated and often downright ugly. Most of us aren’t worried about Geocities disappearing. But there’s a larger issue we should be worried about — yet another once-popular service is disappearing from the web. What’s going to happen in ten years when the Googlehoo of 2020 decides to close down its aging Facebook website?

Even if the web services we use and rely on today offer a way to export our data when they disappear in the future, there’s a whole other component to those sites that’s currently nearly impossible to export — the relationships we’ve formed with other users.

It’s precisely those relationships that have led some to suggest, as Chris Messina does in a recent talk at the MindTrek conference, that identity is the real web platform — that the real value of social websites is not necessarily the data (though that can be important too), but connections between people.

Sadly, when sites disappear, whether they’re artifacts like Geocities or more modern examples like Pownce or Ma.gnolia, there’s never a way to recover the lost connections between people. Even when services return, as Pownce recently did, they don’t bring back the human connections.

The problem, as Messina points out in the video of his talk (embedded below) is that rather than focus on identity, most of today’s web services focus on the platform — whether it’s sharing photos on Flickr or broadcasting messages on Twitter.

That means not only is the majority of the service’s development effort expended toward improving the platform, the majority of export options are also geared toward the platform — export your photos or back up your blog posts. Very few sites concern themselves with backing up your friends and relationships.

But if the central focus of the web was identity, rather than specific platforms, we might see a far different set of strategies emerge. As WordPress developer Lloyd Budd writes on his blog, “If you really love your customers, the exported data (you offer) will be richer than the raw material they originally entered.” In other words, there would be a way to take not only your data, but your metadata as well.

Making identity into the platform is something OpenID is supposed to help do. However, thus far, it has largely failed to deliver anything of the sort. As Messina points out in the video, OpenID is improving, but it still has a long way to go.

In the mean, we’ll watch Geocities and other services disappear without being able to give back half of what their users gave to them.

Identity is the Platform from Chris Messina on Vimeo.

Photo by Sage/Flickr, CC

See Also:



Design Patterns Solve Common Problems for Web’s Color Blind Users

Every website owner wants to reach as large of an audience as possible. That’s why good web developers go to pains to ensure their sites are standards compliant, work across all browsers and provide solid accessibility for devices like screen readers.

Unfortunately, while those are all steps in the right direction, none of them address a quite large subset of problematic users — the color blind.

Color blindness affects between five and ten percent of the general population. Most color blind humans are male, and the most common form of color blindness makes it difficult for the person to distinguish between reds and greens.

We’ll admit that we hadn’t fully considered the impact of color blindness on website design until Andy Biao of Waxy.org pointed us to We Are Color Blind. The site hosts a collection of design patterns for making your website more accessible to people with common forms of color blindness.

If you’re thinking this is simply another thing you need to worry about when picking color palettes and page designs, relax. The patterns on We Are Color Blind, aren’t complicated and the site is full of very easy, subtle solutions.

For example, consider Apple’s iPhone availability chart — a simple list with store locations alongside red and green dots to show which stores have iPhones and which don’t. The problem is that if you don’t see color, distinguishing between the red and green dots is very difficult. The solution, however, is very simple and elegant — change the red dots to red squares. The basic design of the site, and the color scheme, is maintained, but the difference in shapes allows color blind users to easily get the same information.

Other potentially problematic designs include pie charts, heat maps and color pickers. But as is the case with the iPhone chart, there are easy solutions. For example, with charts, heat maps and other color maps, simply adding a tooltip when the mouse hovers over a selection helps eliminate the color dependency.

Our favorite part about We Are Color Blind is that not only does it make you aware of a problem you might have previously overlooked, but it has thoughtful solutions all ready to go. We wish there were more collections of common design patterns and solutions out there; if you know of others be sure to let us know.

Note: The image at the top is a plate from the famous test developed by Shinobu Ishihara. Individuals will normal vision will see the number 74. Color blind individuals will see different numbers or no numbers at all depending on what type of color blindness they have. Learn more at Archimedes-lab.org and Wikipedia.

See Also:



Using HTML5 Today With Modernizr

Web developers looking to play with the new features in HTML5 are still struggling with incomplete and inconsistent browser support. While HTML5 is far from perfect (and complete), that doesn’t mean you can’t use it; it just means using it is a little more complicated since you need to detect the current browser’s level of support and then adjust accordingly.

Fortunately there is Modernizr, a very nice JavaScript Library that can detect which HTML5 features are available to the current user’s browser. With that information you can then create conditional JavaScript statements to offer HTML5 to those browsers that support it, but still fall back on other content for those that don’t.

We’ve covered Modernizer before, taking a look at its basic capabilities and how you can use them, but now Mark Pilgrim — of Dive Into Python fame — has released another chapter of his coming Dive into HTML5 book with a much more in depth look at how to detect HTML5 features and what to do for fallback content.

Pilgrim also covers some more complex scenarios. For instance, he shows how detecting support for the HTML5 <canvas> element is often not enough to determine compatibility since different browsers support different aspects of the full API. In one example, Pilgrim shows how to detect <canvas> support and then adds further checks for those who need the Canvas Text API.

Another pain for web developers is the mixed bag of support for the <video> element. Nearly all the latest versions of popular browsers support <video> (well, not IE8, but we’re assuming that’s no surprise), but then even those that do support <video> support different video formats. Mozilla wants .go files, Safari will be looking for .mp4 videos, and so on. Pilgrim offers up a series of checks to figure out which video to serve using Modernizr.

We know what you’re thinking: this HTML5 stuff is more trouble than it’s worth. Right now, you’re probably right. But in a year or two, HTML5 will be spoken everywhere on the web, and taking the time to figure it out and start using it now will put you well ahead of the learning curve.

Check out Pilgrim’s post, and be sure to keep an eye on Webmonkey for more HTML5 coverage.

Photo: svenwerk/Flickr

See Also:



HTML5 Drag-and-Drop API Is no Panacea for Developers

We’ve all seen it happen: a less web savvy friend wants to upload an image so they grab it from the desktop and drag it over to their web browser where… nothing happens. It’s good for a chuckle every now and then, but really, isn’t that exactly how you should upload a file to the web? After all, it works everywhere else on your PC.

Developers have been pining for drag-and-drop support in webapps pretty much since the first servers came online. But now, with HTML5 nearly here, true drag and drop support is about to become a reality.

Yes, there are JavaScript libraries that allow you to create drag-and-drop interfaces within the browser, but that’s not what we’re talking about. Rather, HTML5 offers the holy grail — drag a file from your desktop straight to a browser window and it will magically upload.

Of course, for developers, nothing is every that easy. The drag-and-drop portion of the HTML5 spec is very new, incomplete and at the moment, really only works in a very limited form in Firefox 3.5 and Safari nightly builds.

But that doesn’t mean people are starting to experiment with it. Leslie Orchard of Mozilla recently posted a very nice tutorial that will walk you through the basics of the HTML5 drag-and-drop API and help you create a little demo app (another nice working demo can be found over at The CSS Ninja).

Orchard concludes that the “first-class drag and drop events in HTML5 and Firefox make supporting this form of UI interaction simple, concise, and powerful.” However, web developer Francisco Tolmasky has a decidedly different take.

Tolmasky recently posted about his experiences implementing a drag-and-drop interface for his slide presentation web app, 280 North (think Keynote in the browser). Tolmasky found that not only are there a number of browser bugs and implementation shortcomings, but the spec itself is flawed in many ways. For example, as Tolmasky discovered, there is no reliable way to determine whether a user wants to drag an object, or simply select several by dragging to highlight them.

Another problem, and one that’s more prominent in the other side of the drag-and-drop experience (i.e. dragging out of or within the browser) is the complexity involved in figuring out where the user plans to drop the selected item and how that effects what the webapp should do with the item:

Take 280 Slides for example: When a user drags the slides out of slides navigator, he may be planning to drop it to any number of locations. If he is dragging it from one instance of 280 Slides to another, then we want to provide a serialized version of these slides so that they can be added to the other presentation. If however, he drags these slides into a program like Photoshop, then we would want to provide image data. If he were to drag them to his desktop, then perhaps we could provide a PDF version. He could even drag them to his text editor and expect the text contents of his slides to be pasted.

Desktop APIs provide hooks to delay the “what do I do with this object” problem until you actually drop the object somewhere, which saves a ton of processing overhead. But the HTML5 spec currently doesn’t have any such delays. And, in the case of dragging a large number of objects, this shortcoming can result in significant lag times.

Luckily the HTML5 drap-and-drop API is still a work in progress. The WHATWG is still gathering developer feedback. As always, if you’ve got ideas or solutions let them know on the official WHATWG mailing list.

See Also:



 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year