X
Tech

Apple touts technology demos of HTML5, CSS3 standards

Days before the opening of its Worldwide Developer Conference (WWDC), Apple once again is touting the advantages of new Web standards, such as HTML5, CSS3, JavaScript, and the WebKit rendering engine. The demos are on the Apple Developer site.
Written by David Morgenstern, Contributor

Days before the opening of its Worldwide Developer Conference (WWDC), Apple once again is touting the advantages of new Web standards, such as HTML5, CSS3, JavaScript, and the WebKit rendering engine. The demos are on the Apple Developer site.

Called Safari Technology Demos, the page gathers together 8 demonstrations that combine a range of technologies:

-CSS effects including transforms, reflections, and image masks are applied to HTML5 video. Apple said this was implemented in a single line of code.

-CSS typographic capabilities such as shadows and customized Web fonts. Using styled text instead of images offers better download performance and is easily discovered by search engines.

-An interactive Web gallery combines 2D and 3D transforms CSS transitions.

-CSS3 transitions and animations are used in a Web-based slideshow.

-An HTML5 audio demo shows how JavaScript lets programmers pause, play, seek, and check the current playback position. It says that listeners can "enjoy sound in your web pages without downloading any additional software."

- A page shows an interactive 360 degree view of an iPad, iPod Touch and a case. The photos are positioned with CSS and loaded dynamically with JavaScript. Apple said that Document Object Model support for touch events will make it all work on iPhones and iPads. And no 3D plugin required.

You can deliver interactive 360 degree product views in your web pages, without a plugin. By taking several product snapshots and then assembling them with HTML, CSS, and JavaScript, you can easily create the kinds of rich interactions that users would typically need additional software to experience. And, by integrating DOM touch events, you can optimize for touch-enabled devices like iPad and iPhone.

-Similar to the 360 degree demo, the VR example shows an Apple Store in NYC to create a virtual 3D environment. CSS transforms position the images in 3D space.

-What Apple calls Canvas Pixel Manipulation demonstrates the interactive capabilities of JavaScript Canvas APIs that allow pixel-level data to be modified and displayed and a "snapshot" stored locally or on the Web. This lets users draw lines and shapes directly into the page.

Editorial standards