Archive for the ‘HTML5’ Category

File Under: CSS, HTML5

‘Form Follows Function’ Experiments Showcase the Power of HTML5

Form Follows Function. Image: Screenshot.

If you’ve been missing the early days of HTML5, back when experimentation, not stolid, functional sites was the name of the game, we’ve got a site for you: Form Follows Function.

Form Follows Function is a collection of interactive experiments built using HTML5 elements like Canvas and CSS 3 tools like 2-D/3-D transforms. Experiments include growing trees with the click of the mouse (or touch of a finger, depending on your device), dragging waves and 3-D cans of Campbell’s soup. Even the rotating menu of the experiments is impressive.

The site is the brainchild of developer Jongmin Kim, whose design work has previously garnered a Webby award.

Fun thought experiment: Imagine taking this site back in time, showing it to your 2002 self and then pointing out that it’s all built with web standards, no Flash involved.

While we really like Form Follows Function it does fall prey to the main reason we don’t really miss the early days of HTML5 and CSS 3 all that much — it doesn’t use CSS prefixes properly. Form Follow Function optimizes for Firefox and Chrome while ignoring Opera and Internet Explorer; a shame, considering how well done the rest of the site is.

File Under: Browsers, HTML5, Web Standards

Future Firefox to Bring PDF, WebCam Streams to the Browser

W.T. Monkey loves WebRTC. Image: Screenshot

Firefox 18 is out the door, which means Mozilla has bumped up all the pre-release channels, showcasing features coming soon to a final release near you.

If you’d like to try out a pre-release version of Firefox, head on over to Mozilla’s channel download page and grab either the Beta or Aurora releases. (The former is a bit more stable, but both are pre-release software so proceed with caution.)

The Beta channel contains Firefox 19, which is six weeks away from release and features a few modest improvements, including a baked-in PDF viewer based on PDF.js. It may not mean the end of those annoying (and untrue) buttons that say “you need Adobe Acrobat to view this file,” but at least you don’t, well, need Acrobat just to view a PDF.

The Aurora channel has been bumped up to Firefox 20, which contains a far more interesting new feature — support for capturing local camera and microphone streams with the getUserMedia API.

Here’s how Mozilla describes getUserMedia:

[getUserMedia] is a new HTML5 DOM API that allows the browser to capture local camera and/or microphone streams directly, and not through third party plugins. This means JavaScript developers can now quickly and easily write code to access the user’s camera or microphones (with the user’s permission, of course) without having to install anything because the support is already inside the browser.

There’s a demo page you can try out over on Mozilla’s GitHub page.

The getUserMedia API is just the first of several components that make up WebRTC, a set of APIs which enable real-time, interactive, peer-to-peer audio/video calls and data sharing. Two other pieces of the WebRTC puzzle — PeerConnection and DataChannels — can be found in the Firefox Nightly channel, for those who really enjoy living on the edge (you’ll still need to enable them in about:config, set the media.peerconnection.enabled option to true).

Firefox’s six week release cycle means that — barring unforeseen problems — the PDF viewer will arrive in final form sometime in early March, with the getUserMedia tools coming in mid April.

File Under: HTML5, JavaScript

Emulator Brings the Bygone Era of Amiga to the Web

Amiga pinball wizard.

Miss your Amiga? Now you can play Prince of Persia, Pinball Dreams and other Amiga hits right in your web browser thanks to the Scripted Amiga Emulator, an Amiga emulator written entirely in JavaScript and HTML5.

To view the emulator, which was written by developer Rupert Hausberger, you’ll need a browser with support for WebGL and WebAudio, as well as a few other HTML5 APIs. I tested the emulator in the latest version of both Chrome and Firefox and it worked just fine.

If you’d like to see the code behind the Scripted Amiga Emulator, head on over to GitHub.

Happy Friday afternoon time wasting.

File Under: HTML5, Web Standards

HTML5 Inches Closer to the Finish Line

Image: Screenshot/Webmonkey.

The W3C has an early Christmas present for web developers: The standards body that oversees the lingua franca of the web has published the complete definition of the HTML5 specification.

HTML5 isn’t an official standard yet, but the move to what the W3C calls “Candidate Recommendation” (CR) status means that the spec is largely stable, features are frozen, and testing can begin. In other words, the W3C is on track to publish the final version of HTML5 by 2014.

While developers targeting modern web browsers are already using HTML5 and many of its accompanying APIs, the move to CR status is nevertheless important because it marks the beginning of the interoperability and testing phase. Testing helps ensure that HTML5 can be implemented compatibly across browsers, servers, authoring tools and the dozens, if not hundreds, of other potential HTML5 clients — think your television, your car, your refrigerator and beyond.

HTML5 will likely be the language of the fabled Internet of Things and the lengthy testing period — the W3C plans for testing to last through 2014 — is designed to make sure that everything in the web of the future plays nicely together.

To go along with HTML5′s progress, the W3C has also published the First Public Working Draft of HTML5′s successor — HTML5.1. Although the W3C has “modularized” much of HTML5 over the years, spinning off sections like Web Workers, WebSockets, Microdata and half a dozen others, which are all now separate specifications at the W3C, the group plans to continue with versioned releases as well.

At the moment there isn’t much to see in the HTML5.1 spec, but look for the HTML5.1 draft to grow as new ideas are proposed.

It’s worth noting that, while the CR publication is generally a good thing, there are still over 100 known bugs and not everyone is happy with the decision to move HTML5 forward. But moving forward it is. After the CR stage is finished, the next step for HTML5 will be “proposed recommendation” status. From there HTML5 will become a final standard — if all goes according to plan — in 2014.

File Under: Browsers, HTML5, Mobile

New Simulator Showcases Mozilla’s Coming Firefox OS

Firefox OS’s lock screen, app screen and Twitter app. Image: Screenshot/Webmonkey

Mozilla has released version 1.0 of its Firefox OS Simulator, a new add-on for Firefox that makes it easy for web developers to start building apps for Mozilla’s coming mobile Firefox OS.

Despite the 1.0 status, Mozilla’s Hacks blog still refers to the Firefox OS Simulator as a “preview” — largely because Firefox OS itself is still in development. The Simulator, however, is much less buggy than the release I tested last month (and the problems with the Linux and Windows builds have been resolved).

If you’d like to get started building apps for Firefox OS, the Simulator now has an official page on Mozilla’s Add-Ons site. Once it’s installed and running you’ll get a preview of what Firefox OS will be like on a mobile device.

Locked out of Apple’s iOS due to the platform’s developer limitations and only recently beginning to create a truly competitive browser on Android, Mozilla’s long-term mobile plan is to create its own mobile operating system built entirely on open web technologies.

Although the company has since switched to the “Firefox OS” moniker, the original name, Boot2Gecko, neatly captures Mozilla’s take on the mobile operating system — essentially turning the Firefox web browser into an operating system.

That means building apps for Firefox OS is just like building apps for the web. HTML, CSS and JavaScript form the foundation and emerging web standards like WebRTC help bridge the gap between Firefox OS and device hardware.

To run the Simulator in Firefox open up the “Simulator Manager” by selecting the Firefox OS Simulator option in the Web Developer menu. Once the Simulator Manager is running you’ll see controls to start and stop the Simulator and a JS Console option to see any error messages as you build your app. If you need help getting started, this video from Mozilla walks you through the process step by step:

For more on how to get started using the Simulator and building apps for Firefox OS, see our earlier post as well as the Mozilla Hacks blog, especially the very thorough tutorial from Mozilla community member Luca Greco, who walks through nearly the entire process of building and testing an app on Firefox OS.