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.

Microsoft Wants to Separate the Canvas 2D API from HTML5

By Michael Calore October 23rd, 2009 Categories: Multimedia, Platforms & APIs

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?


Post Comment | Comments | Permalink

Google Shows Off Chrome Themes With Cool YouTube Hack

By Michael Calore October 22nd, 2009 Categories: Multimedia, Software & Tools

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:


Post Comment | Comments | Permalink

Flickr Adds People-Tagging for Finding Friends in Photos

By Michael Calore October 21st, 2009 Categories: Multimedia, social

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:


Post Comment | Comments | Permalink

Turn Your Vector Art Into Canvas-based Animations With Opacity

By Scott Gilbertson September 24th, 2009 Categories: Multimedia, Software & Tools

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:


Post Comment | Comments | Permalink

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

By Scott Gilbertson September 24th, 2009 Categories: Multimedia, Software & Tools

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:


Post Comment | Comments | Permalink

The FSF Offers Web Video Publishers a Helping Hand

By Michael Calore August 20th, 2009 Categories: Multimedia, Software & Tools

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:


Post Comment | Comments | Permalink

NBC Adds Facebook Connect Logins to Video Sites

By Michael Calore August 12th, 2009 Categories: Multimedia, Web Basics


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:


Post Comment | Comments | Permalink

Adobe Takes an Open-Source Swing at Open Video

By Michael Calore July 21st, 2009 Categories: Business, Multimedia

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:


Post Comment | Comments | Permalink

Google Earth Lands on the Moon

By Michael Calore July 20th, 2009 Categories: Multimedia, Software & Tools

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:


Post Comment | Comments | Permalink

Silverlight 3 Arrives, Brings Smoother Video, Better Web Apps

By Michael Calore July 9th, 2009 Categories: Multimedia, Software & Tools

Microsoft has released the latest version of its Silverlight player.

The release of Silverlight 3 arrived late Thursday night. The company’s presentation technology for graphics and video on the web was supposed to be released to the public on Friday morning, July 10 — there’s even a lavish launch event scheduled at a San Francisco hotel — but Microsoft decided to push Silverlight out a day early.

Silverlight 3 is a small, free plug-in download from Microsoft. It’s cross-browser and cross-platform, so it runs on Windows, Mac (the newest versions are Intel only) and Linux computers. The open-source Linux version is called Moonlight, and it ships with Novell distributions. If you’re running Ubuntu or some other non-Novell distribution, you can download it and install it manually.

Silverlight is Microsoft’s plug-in based player for streaming video and audio content, handling rich internet apps and displaying animated user interfaces in the browser — Redmond’s answer to Adobe Flash and open-source technologies like those promised by HTML 5. When Silverlight first arrived in 2007, it didn’t run too well on non-Windows desktops. Worse, with very little content available on the web for Silverlight to play, there wasn’t much of a reason to bother with it.

But quite a bit has changed in two years. Most notably, the compelling content finally arrived. Microsoft streamed live video and highlight clips on NBC’s official Beijing Olympics website in the summer of 2008 using Silverlight. The company released version 2 in September of 2008, an upgrade which improved Silverlight’s performance on Macs and improved the video playback quality overall. Silverlight was used again to stream coverage of the 2008 Democratic National Convention and all of the NCAA March Madness basketball tournament games in 2009, serving to raise Silverlight’s profile — and it’s install base — even more.

By now, Silverlight is installed on around 30% of web-connected PCs and devices like Windows Mobile smartphones. It’s a far cry from Adobe Flash’s install base (which is over 90%) but it’s a significant gain in a short period of time nonetheless. Also, Microsoft claims there are over 300,000 developers actively building web sites, apps and animated user interfaces in Silverlight right now.

Silverlight’s video capabilities have always been impressive when compared to Flash, and the new version boasts some new features that should keep the competition with Flash hot. It uses a media broadcasting technology Microsoft calls Smooth Streaming, an adaptive technology for playing the same H.264 video stream at the highest bitrate the device and its bandwidth limitations will allow. So if you’ve got a fast computer with an HD monitor and a wide open pipe, you’ll see super high quality video at up to full 1080p HD. If you’ve got a dinky smartphone with mid-level data service, you’ll see a constrained version of the same video.

The new version of Silverlight also has better 3-D graphics support and the ability to offload graphics work to a GPU for a smoother, hardware-accelerated user experience.

On the rich internet apps front, Silverlight 3 includes the ability for developers to create apps that run outside of the browser on a PC desktop, or on a mobile phone — yet another place where Silverlight 3 is catching up to competing technologies like AIR, Adobe’s Flash-based runtime for running webapps outside of the browser.

Also due to be released Friday (but not showing up yet, as of this writing late Thursday night) is Expression Studio 3, Microsoft’s set of tools for building Silverlight apps, standards-based websites and vector graphics for the web. The current version, Expression Studio 2, costs $700, or $350 for an upgrade from previous versions.

As mentioned previously, the Silverlight browser plug-in is free.


Post Comment | Comments | Permalink
 
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