Small Pieces, Loosely Joined

The presentation that really brought home the potential of these next-generation web technologies for me was by Brad Neuberg, a developer who used to work at Google. Neuberg’s talk had the theme of “Small pieces, loosely joined,” and showed how technologies such as HTML5, CSS3, SVG, Canvas and WebGL can be used together to create stunning applications within the browser. The centerpiece of his presentation was the slide deck. It wasn’t a standard PowerPoint or Keynote presentation, but rather, a jaw-dropping, browser-based, 3-D slide demo, built using the very tools that Neuberg was talking about,. Neuberg could slickly navigate between the various slides in the presentation at will, and many “slides” contained a live demo of the technologies discussed. If you have Safari on Mac OS X Snow Leopard, you can check it out here. (Note: To navigate between the slides, use the arrow keys. You can zoom in and out using the space bar. The 3-D slide demo only works properly in Safari currently, but you can view a video of it in action in this blog post). While these technologies are impressive on their own, Neuberg’s demo showed that the way they can be easily combined in the browser will lead to real innovation in web apps over the next few years.

Ready for Prime Time?

It’s unlikely that we’ll see all of these technologies being used to their fullest potential for a little while yet, because they aren’t yet fully supported by all of the browsers. However, the various browser manufacturers seem to be racing each other to incorporate support as quickly as possible. Even Microsoft, lambasted for its poor support of web standards in previous versions of Internet Explorer, has upped its game with the release of a beta of IE9 that has decent HTML5 and CSS3 support. It won’t be long before many of these technologies are widely available, and developers can start using them in web apps; indeed, Neuberg mentioned that both Firefox 4 and Chrome betas would soon support the technology used in his slide demo.

It’s Not Just the Flashy Stuff

At the moment, many HTML5/CSS3 apps are flashy demos that show off the potential of these technologies, but while Canvas and SVG demos look cool, many of the most useful bits of HTML5 do stuff that’s mainly “under the hood.” For instance, these are tools that do things like enable geolocation. Because some aspects of these technologies are already available in many browsers, we’re starting to see them used in some web apps. Google has already started incorporating some HTML5 features into its web apps, for example, as has Facebook. While Facebook’s and Google’s use of HTML5 isn’t visually impressive like Neuberg’s slide demo, these companies are making their existing apps better by enabling innovative features like geolocation and drag-and-drop.

As technologies like HTML5, CSS3, SVG and WebGL start to become more mainstream, not only will the web apps we already use become more useful, but we should also see developers building web apps that do things that previously could have only been done by desktop applications. It’s an exciting time to be working on the web, both for the developers of web apps, who have a plethora of new technologies and techniques to experiment with, and for users of those apps.

I’m really looking forward to seeing what developers do with these new tools. What developments are you most looking forward to?

Image credit: Flickr user justinsomnia, licensed under CC 2.0

Related content from GigaOM Pro (sub. req.):

• HTML5’s a Game-Changer for Web Apps
• What Does the Future Hold For Browsers?
• Report: The Real-Time Enterprise

Web designers have long been using CSS to customize font size, style, family, backgrounds and layouts across a site. CSS3 brings a much more powerful feature set to those designers, including:

Text shadows, borders, shaped borders, boxes with shadows. No longer will you have to fancy up fonts as graphics files and embed them. Also, because of the detailed specifications for shaping a border, gone are the days of struggling with rounded corners. You can set the radius for each corner and voila!

Web fonts. Yes, you can now specify the font you want to use in CSS3, and the browser will auto-download it if it’s not already installed. No longer are you at the mercy of the fonts your users have installed.

CSS3 also offers transitions for dynamic effects such as changing the size, color or positioning of text by hovering your cursor over it. Move over Flash and JavaScript effects: CSS3 has got these animation-like features covered.

The current version of Opera already supports parts of CSS3, while support in Opera 10 will be even greater. Opera 10 beta should be available in the next few months.

Lie also showed me an e-book designed entirely using CSS3. The CSS took care if all of the intricate printing layout details, like pagination, that would normally be handled by something like Adobe InDesign. Fascinating.

Opera, Mozilla and Safari will all fully support CSS3 in the future; indeed, they have all had partial support for the standard for a while now. The lone party pooper is IE, of course. Lie is hoping web developers will rally together to ignore IE in their development strategies and, “free yourself from the IE prison.” A noble cause, but probably not realistic just yet. Personally, I haven’t used IE for eons (especially as a Mac user). However, many of my clients  are still adamant that IE is their visitors’ most popular browser.

Check out this live video demo of CSS3 by Lie at SXSW:

Håkon Wium Lie from Opera Software Demos CSS3 from WebWorkerDaily on Vimeo.

What are your thoughts on CSS3? And how likely do you think it is that we’ll be able to banish IE from our web design work in the future?

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• What Does the Future Hold For Browsers?
• Mobilize 09 Wrap-up
• Why iPad 2 Will Lead Consumers Into the Post-PC Era