Skip to main content

Apple unveils HTML5 showcase

Apple has unveiled a virtual manifesto for a Flash-free Internet with a new interactive HTML5 showcase.

The demo, which was added to the Apple web site without fanfare, is ostensibly aimed at developers but has a number of not-so-subtle swipes at Adobe's proprietary video and animation viewing plug-in. Apple has even gone as far as sticking a large link to Steve Jobs' long and uncomplimentary open letter (opens in new tab) explaining exactly why the Apple overlord thinks Flash is yesterday's news.

Judging by the showcase on offer... he may have a point.

There are seven individual demonstrations, all of which use only the capabilities of HTML5, CSS3 and Javascript.

"Every new Apple mobile device and every new Mac - along with the latest version of Apple’s Safari web browser - supports web standards including HTML5, CSS3, and JavaScript," says Apple. "These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t add-ons to the web [Flash bash]. They are the web. And you can start using them today."

Apple also points out that not all current browsers offer the level of HTML5 support needed to view the demos, so it has helpfully hobbled all but its own Safari software on the main page. Even more helpfully [cough], a link to the safari download page is proffered for anyone who hasn't yet taken up the Safari challenge.*

So much for open standards.

First up in the HTML Showcase is video. There's a short trailer of Disney's forthcoming sequel to the seminal Tron. Apple says, "The HTML5 video tag allows you to integrate video within your website’s code. And Safari offers HTTP streaming, so playback quality dynamically adjusts to the available speed of wired or wireless networks - perfect for viewing on mobile devices such as iPad, iPhone, and iPod touch."

There are simple transport controls offering play/pause and fast forward/rewind, the latter of which seem a bit clunky and adds digital noise to the audio for some reason. There's no timeline to allow you to jump to different sections of the video but there are buttons which add a mask to the playback and skew the screen to a faux perspective view, both of which are impressive but ultimately useless.

The second of the seven demos on offer is Typography and for design geeks it is possibly the most impressive.

Manipulating text in web pages has long been a pain for designers moving from traditional desktop publishing to web design, but as Apple's demo shows, CSS3 (Cascading Style Sheets) when combined with SVG (Scaleable Vector Graphics) allows type to be footled with in a much more typographical manner.

Fonts can be re-sized, coloured, made transparent and rotated using live animations. Leading (the space between lines of type) and tracking (the space between individual letters) can be adjusted on the fly. Even drop shadows can be added. Until now, web designers wanting to use sophisticated typography have had to add cumbersome image files to web pages.

As well as being the most impressive new tool in the HTML5 arsenal, this is probably the scariest. Typography is so easy to get wrong and bad typography (opens in new tab) is truly awful.

Gallery pretty much speaks for itself and uses CSS transitions and 3D transforms to offer a variety of two and three-dimensional ways to show off your holiday snaps.

Transitions does what it says on the tin and offers a variety of ways to smoothly change one image into another using a toolkit of smooth wipes and fades like cube, rotate in, horizontal flip, multi-flip and dissolve.

Audio uses the HTML5 audio tag to add sound. That's about it. Sounds very nice.

360° uses Javascript to add 360 degree images to web pages. The demo loads quickly and is smooth and impressive.

VR uses CSS 3D transforms to show the kind of virtual 360 degree panoramas which have been around for years. Nothing new to see here. Move along.

All in all the demo is a mixed bag. There's nothing really new, everything on view has been done before in one way or another, but to achieve the same results in the past you would have had to download multiple browser plugins, which as we all know (and as Mr Jobs constantly reminds us) bring their own problems to the table.

*UPDATE: Apple has now added a new page (opens in new tab) which may or may not work in browsers other than Safari. We've tried it in Firefox and it all works very nicely. monitors all leading technology stories and rounds them up to help you save time hunting them down.