Category Archives: Web-Development

Is Your Browser Ready for HTML5?

The HTML5 era is already here, it just isn’t evenly distributed yet. Browsers vary in their levels of support for the emerging standard, and developers are pushing the envelope with hacks, experiments and proof-of-concept demos.

If you want to find out how well-equipped your browser is for the HTML5 future, just pay a visitHTML5test.com.

The page will check if your browser supports HTML5 parsing, canvas, file drag-and-drop, embedded audio and video, and all of the other elements required by the draft HTML5 specification, as well as specifications that are related to HTML5 but not actually a part of it, like geolocation and local storage.

You’ll be issued a score (out of a total of 300 points) that indicates the level of support for the stuff in the spec, as well as bonus points for support that goes beyond what’s required for HTML5 compliance. For example, your browser gets bonus points for each video codec and audio codec included in the browser. These are only bonus points, and not real points, since HTML5 outlines how audio and video files can be embedded on a page, but does not require a specific audio or video codec to be included.

Here’s how the browsers on my Mac stack up:

  • Chrome (dev channel) scores 217 points and 10 bonus points
  • Safari 5.01 scores 208 points with 6 bonus points
  • Firefox 4 beta 2 scores 189 points with 9 bonus points
  • Opera 10.6 scores 159 points and 7 bonus points
  • Internet Explorer 9 platform preview scores 84 points and 1 bonus point

If you’re wondering how these scores are being generated, the code behind the single-serving app wasposted to Github by creator Niels Leenheer. He says he also incorporated the HTML5 parser tests created by Mozilla developer Henri Sivonen.

HTML5, the much-anticipated rewrite of the web’s lingua franca, is currently in open development, with the web’s standards body and all the browser vendors taking part. While some browsers won’t fully support HTML5 until it is officially standardized some time in the next year or two, developers have already begun building with it, and all major browser vendors are adding support into their latest releases.

There are multiple methods of checking for HTML5 element support when a user visits your page, as well as libraries like Modernizr, which let you take advantage of HTML5 elements while controlling how browsers with limited support handle your page.

The HTML5 specification is updated frequently, and browser support for the various elements is in constant flux. As such, the test numbers will go up and down as new browser versions are released and as the code that powers the tests is improved and is updated to reflect HTML5′s changing status.

Also, Leenheer has posted the next version of the test, which ups the total possible score to 315 points, atbeta.html5test.com. Go there if you want to see what the page will be testing for in the future.

Mozilla Builds Video Chat App Using Nothing but Web Standards

Mozilla recently showed off a demo of a video chat app built entirely from web standards. Most of the demo runs on top of the proposed Web Real Time Communication (WebRTC) standard, the W3C’s answer to the audio and video streaming capabilities once found only in proprietary plugins like Flash.

Mozilla’s demo movie shows two users signed in with BrowserID (recently renamed Persona) start a video chat right in the browser. The Persona features, combined with the SocialAPI add-on for Firefox, make the demo browser look a bit like Facebook or other social sites with a “buddy list” of currently signed in users available in the sidebar. Select a user from that list and just click the video chat link to start a call.

Currently Mozilla’s video chat demo requires an experimental build of Firefox and actually uses “a custom API intended to simulate the getUserMedia and PeerConnection APIs currently being standardized.” In other words, video chat in Firefox is still a long way from replacing Skype, but Mozilla does plan to bring at least preliminary support to Firefox later this year.

The short-term goal, according to Mozilla hacker Anant Narayanan, who narrates the video above, is to add WebRTC support to Firefox’s Nightly channel “by the end of this quarter.” Narayanan cautions that in the beginning support may be “limited to just getUserMedia and not the full PeerConnection.”

While the demo video focuses on making video calls work in the desktop browser, with help from some other elements in Mozilla’s larger WebAPI project — which is developing a set of APIs that will allow web apps to better compete with platform-native applications — web-based video chat could work on any device. We recently looked at Mozilla’s Camera API, which gives developers access to your device’s camera, and, in conjunction with these video chat tools, could theoretically bring video chat to mobile browsers as well.

Opera Updates Opera Mini for iPhone, Opera Mobile for Android

Opera Software has announced a slew of updates for its various mobile web browsers, including a new Opera Mini for the iPhone and Opera Mobile 12 for Android phones.

Contrary to what many may think, the real race in mobile web browsers is not between Mobile Safari and Android’s web browser, but between Mobile Safari and Opera Mobile/Mini. As we’ve mentioned before, actual mobile traffic data puts Opera just a touch ahead of Mobile Safari in the race for most-used mobile web browser.

To get the latest version of Opera Mini for the iPhone, head to the Apple App Store. The Android version of Opera Mobile 12 is available in the Android Market Place. If you’re using another platform, or have a feature phone, head to m.opera.com to download the latest release for your phone.

The latest release of the iPhone variant of Opera Mini adds several useful new features, including support for more than nine items on the Speed Dial page, support for the iPhone’s native dictionary and improved traffic compression on the iPhone 4 and iPhone 4S. Other changes include fixing a bug that prevented session restore from working properly when your battery died. For full details on everything that’s new in Opera Mini 7 for iOS, check out the release notes.

There’s also a new preview version of Opera Mini available, with support for what Opera calls “Smart Page.” Smart Page takes the idea of Opera’s Speed Dial — the “new tab” screen with your favorite sites just a click away, which has since made its way into all the major desktop browsers — and applies it to the social web. Smart Page gives feature phone users one-click access to social networks and news sites like Twitter and Facebook. For now Smart Page is only available on the feature phone version of Opera Mini Next, though the company plans to eventually include it on other phones as well.

If you’d like to take Opera Mini Next for a spin on older feature phones, point your phone tom.opera.com/next. Keep in mind that this a preview release and there may be bugs.

In addition to Opera Mini and Opera Mini Next, Opera has also released Opera Mobile 12 for Android, Symbian and other mobile platforms. This release brings WebGL support to Opera Mobile 12 on Android, which means better support for 3D and other complex web graphics. Opera’s new HTML5 parser — which we looked at in our review of Opera 11.60 for the desktop — is also included in Opera Mobile 12.

Other new features include support for the Media Capture API, which means websites can access your phone’s camera, and more options for customizing the Speed Dial (including the same increased number of Speed Dial items found in the other releases).

HTML Editor Calls HTML5 Video Copy-Protection Proposal ‘Unethical’

A newly proposed web standard could bring DRM to web video.

The Encrypted Media Extensions draft — which is backed by the likes of Google, Microsoft, and Netflix — defines a framework for bringing DRM, or “protected media content” as it’s called in the spec, to a web browser near you.

The proposed standard is controversial to say the least, and has already been dismissed as “unethical” by Ian Hickson, the WHATWG’s HTML spec editor. Hickson goes on to say that the proposal “does not provide robust content protection, so it would not address this use case even if it wasn’t unethical.”

The use case Hickson refers to is solving one of the biggest obstacles to the wider adoption of HTML5 video — it lacks the copy protection mechanisms that media companies are accustomed to having. Currently streaming media services like Netflix and Hulu rely on plugins like Adobe Flash to deliver protected content. While such services might like to abandon Flash in favor of HTML5 video, they are often contractually required to have copy protections in place first.

As it stands, the HTML5 video spec offers no means of adding such protection. The proposed Encrypted Media Extensions standard would not actually define any DRM schemes itself. Rather it would add a new set of API extensions for the HTMLMediaElement which would provide the necessary components for a DRM scheme. The actual content protection would be handled by “an appropriate user agent implementation.” That means technically the actual DRM would not be in the spec, though arguing that the Encrypted Media Extensions doesn’t bring DRM to HTML is roughly the same as saying you didn’t inhale.

But there’s a very serious problem with the proposal as it stands — open source browsers. As Mozilla’s Chris Pearce writes on the HTML mailing list, “since the decoded video frames are stored in memory (as are audio samples) so that they can participate in the HTML rendering pipeline, how do you guard against an open source web browser simply being patched to write the frames/samples to disk to enable (presumably illegal) redistribution of the protected content?”

The answer, according to Netflix’s Mark Watson, is that the decryption could be handled at the firmware or hardware level. “If my understanding is correct,” writes Watson, “it’s not unknown for open source products to make use of or even ship with closed source components, such as drivers, for access to platform or device capabilities.”

The Encrypted Media specification is currently a draft proposal, which means it’s a long way from becoming a W3C-blessed standard. It does enjoy the backing of some high-profile W3C members like Google and Microsoft, but with Hickson very adamantly against it and Mozilla unlikely to support it in its current form, it’s not likely to move beyond the draft stage without some serious revisions. That does not, however, mean that pressure to add some sort of DRM to HTML5 video is going to go away any time soon.

Microsoft, Atari Bring Arcade Classics to the Web

Microsoft’s Internet Explorer team has partnered with Atari to re-imagine classic Atari games for the modern web. That’s right, Centipede, Asteroids, Missile Command and half a dozen more all re-written using HTML5 and JavaScript.

If you’d like to play, point your browser to the new Atari Arcade and enjoy the glory of Pong, Super Breakout and the rest of the Atari back catalog.

While the games look a bit different — the graphics aren’t exactly what you might remember from the arcades of your youth, hence the “re-imagining” — the game play is faithful to the originals, especially on a touch screen where the controls are more like the classic arcade button layouts.

For those curious to know how it all works, the answer is largely CreateJS, though for full details be sure toread through the developer documentation. You can even create your own HTML5 Game on top of the new Atari Arcade SDK.

For more details on how it all works check out the video below featuring developer Grant Skinner and the rest of the team behind Atari Arcade.