Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

A Brave New Web Will Be Here Soon, But Browsers Must Improve

The great promise of HTML5 is that it will turn the web into a full-fledged computing platform awash with video, animation and real-time interactions, yet free of the hacks and plug-ins common today.

While the language itself is almost fully baked, HTML5 won’t fully arrive for at least another two years, according to one of the men charged with its design.

“I don’t expect to see full implementation of HTML5 across all the major browsers until the end of 2011 at least,” says Philippe Le Hegaret, interaction domain leader for the Worldwide Web Consortium (W3C), who oversees the development of HTML5.

He tells Webmonkey the specification outlining the long-promised rewrite of the web’s underlying language will be ready towards the end of 2010, but because of varying levels of support across different browsers, especially in the areas of video and animation, we’re in for a longer wait.

Most web pages are currently written in HTML version HTML 4.01, which has been around since the late 1990s. The web was mostly made up of static pages when HTML was born, and it has grown by leaps and bounds since then. Now, we favor complex web applications written in JavaScript like Gmail and Facebook, we stream videos in high-definition, we consume news in real-time feeds and generally push our browsers as far as they’ll go. These developments have left HTML drastically outdated, and web authors have resorted to using a variety of hacks and plug-ins to make everything work properly.

HTML5 — which is actually a combination of languages, APIs and other technologies to make scripted applications more powerful — promises to solve many of the problems of its predecessor, and do so without the hacks and plug-ins.

We’re already close. All the major browsers are providing some level of support for HTML5.

“There’s strong support already in Firefox and Safari. Even Microsoft IE8 has some partial support,” says Le Hegaret, referring to some code within HTML5 that enables the browser to pass information between pages.

Browser makers are approaching support incrementally, adding features little by little with every subsequent release. Some, like Mozilla, can build new features into the next release in a matter of months. For others, like Microsoft, it takes much longer.

Google Chrome is maturing extremely quickly and already supports most of HTML5. This is mostly because Google didn’t start from scratch — the company chose to use the open source Webkit rendering engine, the same one used by Safari. Still, this doesn’t mean both browsers support HTML5 equally.

“Video support between Safari and Chrome, despite the fact that they are both using the same underlying engine, is totally different because video support is not part of the Webkit project at the moment,” says Le Hegaret.

It’s actually this very issue — support for playing videos inside the browser — that continues to be one of main factors blocking the broad adoption of HTML5.

The way the specification is written now, website authors will have the ability to link to a video file as simply as an image file. The video plays in the browser without using a plug-in, and the author can create a player wrapper with controls.

But browser vendors are stuck arguing over which video format to support. Mozilla, Google and Opera are interested in the open source Ogg Theora video format. Apple has substantial investments in its Quicktime technology, so it’s pushing for the Quicktime-backed H.264 format. Microsoft wants people to use its Silverlight plug-in, so Internet Explorer isn’t supporting native video playback in the browser at all.

Google has voiced support for Ogg, but it has also recently made a bid to purchase On2, a company that makes a competing video technology. Rumor has it Google might release On2’s video technology under an open source license once the sale is complete.

Until these issues are sorted out, consumers and content providers alike are forced to rely on plug-ins. Le Hegaret says that while these plug-ins have certainly helped the web arrive where it is today, they continue to be a burden on the user.

Setting up any browser to support both H.264 and Ogg Theora requires at least one plug in, which harms the user experience.

“It’s hard today to ask people to install a plug-in unless the payoff is huge,” he says. “What’s driving the most successful plug-in, which is Flash, is video support. If you can’t see YouTube, your life on the web is pretty miserable. You’re missing a lot.”

Plug-ins aren’t just harder on web users, but they’re hard on web developers, too.

“Building with Flash or Silverlight in a way that lets you share information between the content appearing inside the plug-in and the rest of the page presents some challenges,” says Le Hegaret.

Unlike its predecessor, HTML5 has been designed with web applications in mind. The current HTML5 specification includes a media API that makes it easier to connect animations or video and audio elements — things traditionally presented within a Flash player — with the rest of the content on the page.

“You get a smoother application if you use HTML5. You’re not crossing a software layer. It’s all part of the same application.”

Unfortunately, the YouTubes of the world aren’t going to make a baseline switch from Flash to HTML5 unless they know there’s strong support for it in the browsers.

But they are testing the waters: Wikipedia is experimenting with HTML5 video support by serving Ogg Theora video to browsers that can handle it, and Flash to everyone else. YouTube and the video site Dailymotion have also set up special demo pages using this technique.

Le Hegaret says we’ll be in this period of transition — a dual-experience web where content sites serve HTML5 video along with a Flash fall-back — for a while.”

Web developers will continue to have to understand that not everyone is using the latest generation web browser, and that’s OK in the short term.”As far as being able to make the switch to a pure HTML5 web altogether, Le Hegaret says that’s only possible once browser vendors sort out their differences.

Once that day arrives, the final switch to HTML5 will be in the hands of the content providers. It’s up to them to begin coding for HTML5 standards and ditching support for old browsers.”

There are still a significant amount of people out there using IE6,” says Le Hegaret. “As a developer right now, you can’t really ignore it. Hopefully, in two or three years, you will be able to start ignoring IE6.”

See Also:



Microsoft Wants to Separate the Canvas 2D API from HTML5

In an e-mail sent to the public-html@w3.org mailing list on Wednesday, Microsoft’s Eliot Graf proposed removing the Canvas element, which is used to create complex vector animations in the browser without plug-ins, from the HTML5 specification. Graf also proposed launching a new, separate specification for the Canvas 2D API.

His e-mail:

In his mail describing why he created a separate Canvas 2D API specification, Doug Schepers wrote [1]:

> There is a chance that currently Canvas could be a blocker on progress
> for the HTML5 spec, and at this point, Canvas is so widely implemented
> that I don’t think it’s at risk, so I hope this isn’t disruptive. I am
> available to help with any editing that needs doing, but I hope that
> others will also work with this draft, and step into the editor role.

At Microsoft, we agree with the sentiments expressed by Doug, Maciej [2], and others about creating a separate Canvas 2D API specification. [3] We are prepared to offer editorial resources to aid in the completion of this separate specification. We have looked over Doug’s initial document, made some editorial enhancements, and are prepared to follow through in taking feedback and maintaining the specification.

We believe that some sort of accessibility API functionality is needed in the canvas element. However, the exact nature and depth of that functionality presents a dilemma that may block progress on the HTML5 spec. We also think that the Canvas 2D API may be a desirable feature used in other technologies such as SVG.

Starting with Doug Schepers’ initial draft, we made changes to get the document to adhere to the W3C PubRules [4], enhance readability, and improve logical flow of the document. In addition, we foresee adding sample code throughout the specification, where appropriate. No normative changes have been made. As with all drafts, the Canvas 2D API specification is still a work in progress. We would like to solicit feedback about the changes that were made (see below TODO) and about further changes that the working group would like to see.

Our updated version is published at http://dev.w3.org/html5/canvas-api/canvas-2d-api.html.

[1] http://lists.w3.org/Archives/Public/public-canvas-api/2009JulSep/0002.html
[2] http://lists.w3.org/Archives/Public/public-canvas-api/2009JulSep/0007.html
[3] http://lists.w3.org/Archives/Public/public-html/2009Aug/0628.html
[3] http://www.w3.org/2005/07/pubrules

[…]

Microsoft Internet Explorer is the only modern browser with no plans to support Canvas — Firefox, Chrome, Safari and Opera all do. Redmond’s opposition makes sense, as the animation capabilities Canvas provides would conflict with Microsoft’s plans to speed adoption of its Silverlight platform, which affords web authors many of the same capabilities using a proprietary plug-in and commercial development software.

Several list members pointed out that if Microsoft has the resources to author the spec independent of HTML5, those resources could be better spent building support for Canvas into the browser.

A follow-up response from Ian Hickson, a Google employee who is the primary editor of the HTML5 spec, points out a few clear problems with this strategy and stresses that it doesn’t seem list a good idea:

IF we’re going to split out the 2D API — and I’m not really sure if at this point that’s something we should do, frankly — then I would much rather we do it based on the text in the HTML5 spec now, and would much rather we have an editor who is able to give this the full-time attention that it needs.

However, I’m really not sure at this point that it even makes sense to extract the API anymore. The API intergrates pretty tightly with the rest of HTML, for example it refers to HTMLVideoElements, the HTML5 “structured clone” feature is defined in terms of canvas interfaces, and so on. There would have to be a two-way reference, which would be a maintenance nightmare, and which would just delay the progress of both documents.

What are the problems that we are trying to solve by splitting out the API at this point?

The whole thread, which is still growing, can be viewed here.

What do you think? What’s Microsoft up to?



Google Shows Off Chrome Themes With Cool YouTube Hack

Click on the image above (or here) to see the video Google just posted to YouTube to promote its new theme library for the Google Chrome browser. The themes, which are designed to give your browser’s skin a splash of color and personality, were developed by famous artists and designers.

The video in the link shows some of them off, but be sure to watch until the end, when the browser skin literally explodes out of the video frame and takes over the page. Once the video is over, there’s more cool page-skinning trickery to be had — the video player window turns into a theme browser you can click through, altering the design of the YouTube page itself.

Chrome is only available now in stable form for Windows users. Mac and Linux versions are still in development and will be finalized later this year.

Google first began developing themes for Chrome in August, as we noted in a previous report. Firefox has a similar theming architecture for its browser called Personas, which you can explore at Mozilla’s dedicated Personas site.

See Also:



Flickr Adds People-Tagging for Finding Friends in Photos

Popular photo sharing service Flickr added a new feature Wednesday that lets users tag each other in photos. In addition, Flickr has updated its privacy controls, so users can opt out of being personally identified in individual photos.

The new feature lets you tag particular people in pictures by drawing bounding boxes around their faces. Flickr then asks you to ID each person, and if the person is a Flickr member, the system suggests the member’s name to you as you type the tag.

Once people are tagged, it makes finding them in searches much easier. Instead of searching for somebody’s name and only seeing photos blindly tagged with your search term, Flickr now shows you where that person is located inside the photo — especially helpful if you’re looking at a group shot.

Flickr has over 40 million members according to Yahoo, which owns the service.

People-tagging features have long been available to users of other photo-sharing web services like Facebook and Google’s Picasa. And Flickr’s new feature doesn’t go as far as Picasa, which will actually find the person’s face in the picture and take a guess at who it is. Google debuted this technology in 2008 and enhanced its capabilities just last month.

But while Flickr’s new people tags are close to what you’ll find elsewhere, Flickr’s implementation offers more user controls for privacy by letting you opt out of being ID’d.

As Facebook users know, you often get tagged in a photo that you didn’t approve of, isn’t particular flattering or shows you in a, shall we say, “compromising position.” But once you’re tagged in a picture on Facebook, that photo with you in it gets tied to your profile. It shows up in image searches, whether you want it to appear or not.

Flickr’s new face-tagging system lets users opt out of being tagged in individual photos. So, you can pretend that’s not really you holding that bong or shotgunning that can of PBR. You can also set your preferences so you can never be tagged in a photo, or you can determine which users are allowed to tag you and which users aren’t. You can also opt out of the whole face-tagging system in general.

Non-Flickr members can be identified in photos as well, but they’ll need to approve the ID before it appears within the system.

That won’t stop users from adding your name as a tag on the photo. Users can also draw a box around your face and add your name as a note. But neither of those options physically connect the tag to your Flickr account the way the people-tagging feature does. Instead, it’s just another piece of metadata attached to the photo.

For those who want to play along, just watch your Recent Activity page. Every time you’re tagged in a picture, you’ll see a little notifier in your Recent Activity stream telling you who tagged you, and offering a link to the picture.

Once a photo is tagged up with people, the photo page displays a list of all the people identified within the picture, along with links to their Flickr profiles.

See Also:



Turn Your Vector Art Into Canvas-based Animations With Opacity

The latest version of Opacity, a vector graphics editor for Mac OS X, is able to export animations to code that can be pasted into web pages and played back in any browser that supports HTML5.

We’ve written quite a bit about HTML5 and�� the power of its proposed <canvas> tag. While the spec isn’t quite finished, the Canvas element in HTML5 promises to eventually give web developers a way to display complex 3-D graphic animations in the browser without plug-ins. Right now, the dominant technologies for doing so are proprietary players like Flash and Silverlight.

There is, however, a trade-off. Canvas-based animations must be written in pure code, and most easy-to-use graphics creation applications like Adobe Flash can’t export the browser-ready animation code, which is complex. Such a limitation is going to put off some of the most talented graphic designers and animators, many of whom are not trained programmers.

That’s why we were excited to hear that Opacity’s new capability to save animated vector shapes and their paths as browser-native code.

Opacity is a bit like Adobe Illustrator, but considerably simpler and easier to use. And with its new export feature, Opacity has a clear leg up on Illustrator when it comes to supporting the next generation of web graphics.

To use the new source code feature in Opacity, simply design your vector-based graphic or animation sequence and, once you’re happy with it, head to the Inspector menu where you can use what Opacity refers to as “Factories” to export your image in various formats. To get Canvas-based source code, chose Source Code for the format and Canvas (JavaScript) as the language.

The resulting JavaScript code looks almost exactly like the examples we’ve shown you in the past (if you don’t own a license for Opacity, which costs between $40 and $90, your image will be watermarked).

We should note that there are other tools around that can do similar things with just an image file — such as Alistair MacDonald’s Burst engine, which can take SVG animations and convert them to JavaScript objects that are rendered inside of a <canvas> tag.

Opacity is a Mac OS X application and costs $90 — not cheap, but cheaper than than Adobe Illustrator. There’s also a lighter version known as Opacity Express, which still has the code export option, but lacks some other features and retails for $40.

See Also:



New Firefox Demos Show Off WebGL’s Powerful 3-D Potential

If you’d like to see what the next generation of 3-D web graphics might look like, Mozilla has a few examples ready for you to feast your eyes on.

Mozilla’s WebGL project gives web developers a way to connect the HTML5 Canvas element, which can be used to display complex graphics in the browser without plug-ins like Flash, to your operating system’s native, hardware-accelerated graphics engine ��� in this case, OpenGL.

While these capabilities point to a bright future for HTML5 and its promise of delivering animated, rich-media web experiences without plug-ins, Mozilla’s WebGL rendering tools aren’t ready for prime time. At the moment, WebGL support is limited to Firefox nightly builds, beginning with the September 18 build. To see any of these demos in action you’ll need to grab a nightly build.

The first WebGL example comes from Christopher Blizzard, an Open Source Evangelist at Mozilla. Blizzard exported a Spore creature, and used WebGL’s API to render it as a 3-D model that you can rotate around, viewing it from different angles.

Blizzard also has some links to three other demos showing off some 3-D effect in WebGL. The most hypnotic is the rotating charcoal drawing showing the Escher-Droste effect (infinite zooming the always reveals the same scene).

If you don’t want to install an experimental browser build just to see some cool visuals, here’s a short video. This is a basic capture of the Escher-Droste animation playing in browser window — no plug-ins, no special dressing:


Although testing all three demos at once did spin up the fan on my MacBook Pro, the CPU load for Minefield (Firefox’s nickname for nightly builds) never got above 50 percent, which is very impressive for graphics this complex.

The ability to display complex 3-D graphics without seizing up your PC bodes well for a whole new crop of online games. But the new WebGL support in the Firefox nightly builds is very much in the alpha testing stage. In other words, don’t look for your favorite online games to rush to adopt WebGL tomorrow.

However, as developers start to experiment with the new tools we’ll likely get a sneak peek at how HTML5 can push the boundaries of what’s possible on the web for 3-D animations interfaces without using Flash, Silverlight or any other plug-ins.

See Also:



The FSF Offers Web Video Publishers a Helping Hand

Wondering what’s happening in the world of free, open-source video on the web following this summer’s browser codec support meltdown?

The folks at the Free Software Foundation have ascended the dias to give us a broad update on the status of open video in the browser and the likelihood of seeing the widespread proliferation of plugin-free video experiences any time soon.

The Foundation’s report cites recent browser share data showing that a full 24% of the web can view Ogg Theora videos embedded in HTML5 web pages right now. But the real revolution, according to the FSF, doesn’t just involve watching a video on Dailymotion, Archive.org or YouTube without the Flash plug-in. It involves actually publishing those videos yourself, on your own site, without the need for any intermediary content hosts.

There are some “tricky” things you’ll need to do before hosting your own videos, which the FSF outlines:

  1. Edit your .htaccess file so your mime types will be set correctly and your videos will display properly.
  2. Enable others to link directly to your hosted video file, as they would an image.
  3. Set fall-backs for browsers that don’t support Ogg Theora playback using the <video> tag. The FSF recommends a short-term workaround for IE and Safari of using Cortado, a video wrapper written in Java.

The group also provides a set of instructions for enabling your visitors to upload their videos, and how you can re-encode people’s videos using free tools built on the Theora codec.

Photo: Forcery/Flickr

See also:



NBC Adds Facebook Connect Logins to Video Sites


When the Winter Olympics roll into Vancouver early next year, you’ll be able to chat and share videos with all of your Facebook friends more easily than ever.

NBC Universal has announced it will launch the Facebook Connect sign-on technology across several of its TV websites within the next few months. NBC.com is the first to implement Facebook Connect, starting Wednesday. NBCSports.com, Syfy.com and Oxygen.com, among others, will come next. NBCOlympics.com will be Facebook-enabled in time for February’s opening ceremonies.

The emphasis is on video content, NBC Universal says in a press statement. The company wants to enable Facebook users to post highlight clips from “Saturday Night Live,” “30 Rock” and other shows that already have heavy viral mojo.

Facebook Connect is the social networking company’s technology for logging in to third party sites using one’s Facebook login and password. Once you log in to a site using Facebook Connect, any comments or media you share on that site will also appear in your Facebook stream. It’s a win for Facebook users, because it makes engaging with a new site easy (you don’t have to create yet another user profile just to leave a comment) and it helps you find your friends on the new site. The third-party sites get free links back to their content from within Facebook, and it also gets a trusted commenter — when you login with Facebook Connect, the website knows you are who you say you are, and can even pull your name, profile photo to put next to your posts.

It’s the same sort of functionality promised by OpenID and OAuth, the two leading open-source technologies for signing in to third-party sites. Facebook Connect is proprietary and requires a separate implementation. However, Facebook is also supporting OpenID for logins, so you can log in to the social network using an OpenID from Google, MySpace or wherever.

See also:



Adobe Takes an Open-Source Swing at Open Video

Adobe announced two open-source initiatives Tuesday, both of which are intended to make it easier for web publishers to create rich media web experiences based in Flash.

The Open Source Media Framework (formerly code-named Strobe) is a set of components released under the Mozilla Public License that let developers build applications based around Flash video. The other code release, the Text Layout Framework, is a set of ActionScript tools for using a wider array of fonts and producing better-looking text content in Flash and AIR apps.

Though these development will likely present new opportunities for publishers who want to get video and rich text layouts online with minimal hassle and a lower up-front cost, it’s difficult to see Adobe’s move as anything but a defenses against open video initiatives like Ogg Theora.

One of the great promises of HTML 5 is an open video experience on the web — the ability for people to watch videos play back in the web browser natively, without having to download a plug-in like Flash or Silverlight to see it. Though still in draft, HTML 5 has provisions in place to allow for embedding of audio and video on web pages through the use of tags, with the playback codecs bundled in the browser. Of course, the web standards crowd prefers to recommend browsers use codecs believed to be free of patent restrictions, such as Ogg Theora and Dirac.

The technology is already being used in the wild — both YouTube and DailyMotion are experimenting with Flash-free video playback with Ogg Theora, and Google Chrome, Opera and Firefox 3.5 offer support for such features.

At the end of June, however, the HTML 5 working group removed the codec requirement from the draft specification after the various browser makers couldn’t come to a consensus over which codec to support.

This left the door open for Flash to hold on to developers who would have otherwise jumped ship for free software alternatives. Tuesday’s OSMF code release extends that hand even further — by freeing up the tools under an open-source license, Adobe is only strengthening its position among developers building rich internet apps.

It’s important to note that the tools needed to create video-playing Flash apps, Flash CS 4 and Flash Builder, are only available commercially, and that the playback technology is patented — Adobe must license it from the patent holders.

The timing of the Text Framework Layout release is no less curious. Just last month, a new project called Typekit was launched with the goal of allowing developers to license and use more complex fonts in their web designs. Once Typekit gets off the ground, licensed fonts will be downloaded by users in a protected environment and laid out on a page using open web standards.

Right now, this is exactly the kind of thing designers use Flash for. With technologies like sIFR, designers can go beyond the handful of fonts supported by the current web browsers, creating more complex type displays.

But newer, emerging standards like CSS3 allow for many of the same layout options as Flash, so if a service like Typekit can free up more typefaces for designers to use, the threat against Flash is obvious.

Adobe’s code releases are more than just insurance policies against losing developers to Flash-free technologies. They are also reminders that, while HTML 5 looks promising, there’s already a technology here and in abundant use that can solve many of the same problems HTML 5 hopes to. And after Tuesday’s release, it’s more attractive to the fence-sitters.

Update: Also be sure to check out Dana Blankenhorn’s opinion piece about Adobe’s open-source strategy at ZDNet.

See Also:



Google Earth Lands on the Moon

Monday, July 20 is the fortieth anniversary of the first manned moon landing. Google has chosen to mark the occassion by releasing a new set of maps for Google Earth that let you browse the surface of the moon.

Google Earth is free software. You’ll need the latest version to explore the moon, so if you don’t already have Google Earth 5.0, download it now. If you already have 5.0, no upgrade is required.

To access the new moon maps, go to the little planet icon drop-down in the Google Earth toolbar and select “Moon.” You’ll notice there are also selectors for Sky and Mars — these are previous enhancements to Google Earth that are also available. Users of Google Maps have also been able to explore the moon, the night sky and Mars in a web browser for some time.

Some awesome metadata comes with Google Earth’s moon maps that makes it worth the download, though. There are interactive tours of the moon’s various sights narrated by Apollo astronauts Buzz Aldrin and Jack Schmitt, 360-degree photo-montages of landing sites, clips from televised footage of the various Apollo missions and overlays of the training maps used by the astronauts. The are also 3-D models of the moon’s terrain, complete with models of the landers, probes, rovers and other artifacts left by humans.

Check out this video featuring Apollo 17 astronaut Jack Schmitt that shows off some of the enhancements.

See Also:



 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year