Archive for August, 2010

File Under: Multimedia
Aug
26
2010

MPEG LA Extends Web Video Licensing Moratorium Until the End of Time

By

The group that oversees patents on the H.264 video format has announced it will not charge royalties for H.264 videos that are freely broadcast on the internet.

The MPEG Licensing Association (MPEG LA) holds patents on AVC/H.264, the most widely-used video format on the web.

The group announced earlier this year that it would extend a moratorium on royalty fees for H.264 videos on the web from 2011 until the end of 2015. Thursday’s announcement extends this royalty-free period for “the entire life of [the AVC Patent Portfolio] license.”

This means that as long as H.264/AVC videos are around, publishers can post them on web pages and people can watch them in their browsers without having to pay any licensing fees.

The moratorium is only for the Internet Broadcast AVC video patent, which covers videos that are freely available via a web browser. Thursday’s announcement basically extends the status quo until the end of time — you don’t have to pay MPEG LA royalties to watch H.264 video on the web from free services now, and you won’t have to in the future.

The MPEG LA says it will continue to collect fees on AVC/H.264 video that consumers pay for. The video format is used on Blu-Ray discs and on most on-demand and paid video delivery services, such as iTunes. It will also continue to collect fees from software that ships with the coders and decoders required to play H.264 video — even software that’s distributed for free, such as web browsers.

Clearly, the MPEG LA is feeling pressure from the WebM Project, a new initiative launched in May that seeks to build a patent-free web video format. The project has created the WebM format as an alternative for H.264 and other patent-encumbered formats. WebM has already gained the support of Mozilla, Google and Opera, all of which are shipping new versions of their browsers with support built in. It has also gained the support of developers passionate about free and open web standards, especially as the web increasingly moves towards HTML5-based video experiences that work without the aid of plug-ins like Flash.

As promising as WebM’s advancements are, H.264 remains the dominant format for video on the web by a very wide margin — about two thirds of web video is H.264. By extending the royalty moratorium, the MPEG LA is likely trying to maintain that dominance on the web and encourage content providers to continue to use its format for publishing videos. By doing so, it also guarantees the group a revenue stream of licensing fees from the tools used to create, encode and watch those videos — cameras, editing software, authoring suites and web browsers.

Continue Reading “MPEG LA Extends Web Video Licensing Moratorium Until the End of Time” »

Tags: , , , ,
File Under: Browsers
Aug
26
2010

Leaked Screenshot Shows a Cleaner, Simpler IE9

By

The new design for Microsoft’s next web browser is expected to be unveiled September 15th, but the company’s Russian press site may have inadvertently spilled the beans a bit early. A screenshot of what appears to be the new IE9 made a brief appearance on the site before being yanked down.

It wasn’t taken offline fast enough to escape the press, though. Long-time Microsoft specialist Mary Jo Foley at ZDNet grabbed a screenshot that shows a much simplified user interface for IE 9.

Leaked Photo: This may be the new look for IE 9

Internet Explorer 9 promises to be a boon for the web — the modernized rendering engine is faster and much better with emerging web standards. We’ve seen four developer previews of IE9, but thus far the focus has been on the underlying code and rendering engine. There’s been no real hint as to what the final browser interface will look like until today.

Among the notable details visible in the screenshot are a unified search and URL bar a la Google’s Chrome browser, an enlarged back button, much like what you’ll find in Firefox, and a noticeable lack of menu items in the main bar.

In short, it looks like Microsoft has decided that less is more by greatly simplifying the browser UI. This is keeping in line with something Ryan Gavin, director of platform strategy at Microsoft, said previously: “The browser is the theater, we’re not the play.” In other words expect IE9 to have a cleaner, less in-your-face design. As the Russian site stated (in translation), “Now the user sees only what you need to navigate.”

Until the official launch, only Microsoft knows what the browser looks like, and it wouldn’t comment to Foley or to anyone else about the screenshot.

See Also:

Tags: , ,
File Under: Browsers, Mobile
Aug
25
2010

Get to Know Your New User Agent Strings

By

With the two most-popular web browsers ready to drop new versions within the next couple of months, you’re going to have to adjust a few twiddly bits on your website if you’re sniffing user agent strings. Of course, you should be sniffing for capabilities and not blocking browsers, but nonetheless, it’s helpful to see what the new strings look like.

Internet Explorer 9

Microsoft’s new browser, due in September, has a new UA string. Details are on the IE blog, but here it is:

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Firefox 4

Likewise, the new version of Firefox — version 4 is due October-ish — will have an updated UA string. Unlike IE, Firefox runs on several platforms, so there are a few:

Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/yyyymmdd Firefox/4.0.1
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/yyyymmdd Firefox/4.0.1
Mozilla/5.0 (X11; Linux i686; rv:2.0.1) Gecko/yyyymmdd Firefox/4.0.1

Easy enough to decipher. The “year month date” part is where the Gecko build id will show up. This build id will be different for each platform. Mozilla developer Daniel Witte covers the changes in depth on his blog. There’s also a more complete reference on the Moz Dev Center wiki.

Mobile browsers

Both Mozilla and Microsoft have new mobile browsers in development. Firefox Mobile was once known by the codename Fennec, so the mobile UA string is the same as desktop Firefox, but it has Fennec/fennecversion appended at the end.

The new IE mobile UA string is:

Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; <DeviceManufacturer>;<DeviceModel>)

There are more details on the Windows Phone IE blog.

All this talk of strings gives me the itch to hear a little “Foggy Mountain Breakdown.”


See Also:

Tags: , , , ,
File Under: HTML5, JavaScript, Programming
Aug
25
2010

Tips and Tricks for Better HTML5 Canvas Animations

By

HTML5If the latest flashy HTML5 experiments have you fired up to experiment with HTML5′s canvas element yourself, one seasoned developer has some advice for newcomers — particularly those coming from Flash backgrounds.

Hakim El Hattab, whose experiments with HTML5 were featured in our round up here on Webmonkey earlier this week, has a short, instructional write up on the Canvas tag that includes some tricks to make your JavaScript experiments run smoother and faster.

Perhaps the most useful tidbit in the article is that “bitmap operations are very processing expensive,” and whenever possible you should reduce and reuse as many pixels as you can between frames. While browsers are getting faster, optimization will always be key (the same is true of Flash animations).

Another thing Hakim recommends you keep in mind if you’re coming from a Flash background is that, “unlike the Flash Player’s redraw regions, this management of ‘dirty rectangles’ needs to be done manually for canvas.” Think of it as garbage collection — like C or C++, you’re in charge of cleaning up after your code when it comes to redrawing in Canvas.

Along the same lines is his tip for clearing your canvas: just reset the width and height. This is also good know if you want to avoid clearing your canvas.

The advice is good for those who have some experience drawing with JavaScript in canvas tags, but if you’re totally new to the animation possibilities in HTML5, we’d recommend starting with Mark Pilgrim’s online book Dive into HTML5, which has an entire section devoted to Canvas. Once you’ve mastered the basics, this handy HTML5 Canvas cheat sheet is good to keep on hand for looking up the various methods and attributes available.

See also:

Tags: ,
File Under: Browsers
Aug
24
2010

Fourth Firefox 4 Beta Adds ‘Panorama,’ Hardware Acceleration

By

Firefox 4 beta

Mozilla has released the fourth beta for the upcoming Firefox 4 browser. The latest pre-release version of Firefox 4 brings several new features including a new tab-organization tool, hardware acceleration in Windows 7 and support for the HTML5 video-buffered property.

If you’d like to help Mozilla test beta 4, you can grab Firefox 4 beta 4 for all major operating systems (and more than 30 languages) from Mozilla’s beta download site.

The big news in beta 4 is the Panorama feature (it used to be called Tab Sets, and Tab Candy before that — hopefully this name sticks). We looked at in depth when it hit the nightly builds.

Panorama allows you to group and quickly switch between related clusters of open tabs. Designed for those of us over-stimulated freaks who frequently have dozens of tabs (or more) open at one time, Panorama allows you to conquer tab chaos: for example, grouping tabs for work together and tabs for fun together, and then quickly switching between groups.

The feature works a bit like multiple desktops in your operating system — a la Expose on Mac OS X — except in this case it’s just web pages inside a single browser window. Here’s a video by Firefox designer Aza Raskin showing the latest version of Panorama in action:

Firefox beta 4 also brings what’s fast becoming the new hotness in web browsers: hardware acceleration. Like graphics-intensive games, the idea behind hardware acceleration is to shift some of the work from your PC’s main processor to the graphics card, which will speed up page-rendering, particularly text and graphics. The coming Internet Explorer 9 and future versions of Google’s Chrome browser will both take advantage of hardware acceleration.

Firefox is planning to do the same, but, as Mozilla’s Mike Shaver recently posted on Twitter, the hardware-acceleration features are currently disabled by default in beta 4. If you’d like to see Firefox take advantage of Windows’ Direct2D interface — regardless of the bugs that may exist — Mozilla has some instructions on how to enable it in beta 4.

The Mozilla road map still calls for the hardware-acceleration features to make the final release of Firefox, which presumably means we’ll see at least one more beta before Firefox 4 moves to the release-candidate stage.

The latest beta also brings support for HTML5 video’s buffering property, which means Firefox can accurately determine which time segments of a native web video can be played without having to pause while more data downloads. The end result is that the progress bar appears nonlinear and makes it easy to determine which parts of the video are available.

If you’d like to know everything that’s new in Firefox 4 beta 4 since the release of Firefox 3.6, Mozilla has put together a handy list of new features (including a few that aren’t quite finished). The list is quite extensive, and Firefox 4 is shaping up to be one of the biggest updates in some time.

While Mozilla still does not have a firm release date, Firefox 4 is expected to arrive in final form some time before the end of 2010. We’re expecting it in late October or early November.

See Also:

Tags: , , , ,
File Under: HTML5, JavaScript, Programming, Web Standards
Aug
24
2010

Flashy HTML5 Experiments Point to Web’s Future

By

We’ve showed you where on the web you can find practical examples of HTML5 — like Google’s homepage, Scribd’s document viewer and Vimeo’s new video player. However, to really see the bleeding edge of HTML5 and what might be possible in the future, you’ll have to look beyond the practical.

Big names have released HTML5 showcase sites, Apple and Google among them. More importantly, hundreds of curious designers around the web are constantly experimenting with HTML5, trying to push the boundaries and see what’s possible with the new markup language and its related technologies. Many such experiments have little practical value as of yet, while others may well find their way into your favorite online games and web apps in the next few years.

Of course, some of the examples below aren’t purely HTML5. In fact there’s been quite a bit of talk about what is and what is not HTML5. All of the examples below use HTML5 tags, however some also use elements of CSS 3 and almost all of them use JavaScript to handle animation and user interaction.

In fact, most of the more interesting experiments we’ve seen revolve around the HTML5 canvas tag and JavaScript. The HTML5 canvas tag is essentially what it sounds like, a canvas on which all sort of JavaScript-powered goodness can be displayed. Regardless of whether you think of the end product as being an experiment in HTML5 or JavaScript or both, the results are impressive.

One other thing to keep in mind: HTML5 is still an unfinished spec and browser support varies. All of these experiments work in the latest versions of Firefox, Chrome, Safari and Opera, but other versions of those browsers and Internet Explorer won’t be able to see these demos.

If you’d like to see some more innovative examples of what’s possible when JavaScript and HTML5 collide, check out Swedish developer Hakim El Hattab’s HTML5 experiments. Ranging from arcade-style games like Sinuous to Twitter messages in animated bubbles, Hattab’s experiments are creative and fun, if not immediately useful to most people. Just view source to see what makes these examples tick.

Hattab includes a note on his site saying, “please don’t use this as HTML5 vs Flash firewood,” which is worth mentioning since, yes, you could do many of these experiments in Flash, but that isn’t the point. The point is to do it using open web tools that will work everywhere — modern web browsers, iPhones, Android Phones, iPads, next year’s toaster and any other device with a standards compliant web browser.

That said, some potentially useful animation experiments are in fact ports of Flash animation libraries. In these cases the innovation is less about originality than practicality — taking what’s good from Flash and porting it to JavaScript where it can be used with HTML5.

Continue Reading “Flashy HTML5 Experiments Point to Web’s Future” »

Tags:
File Under: HTML5, Multimedia
Aug
20
2010

Mozilla’s Popcorn Project Adds Extra Flavor to Web Video

By

Video on the web has always been a bit disappointing.

After all, it’s pretty much just like television, only smaller. And unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.

Mozilla would like to change that. Developers at the browser maker’s Drumbeat project — an initiative that advocates new open web technologies — have created Popcorn, a tool intended to make web video every bit as interactive as the rest of the web.

Popcorn is a very new effort and still a bit rough around the edges, but results are already impressive. Popcorn adds metadata to HTML5 native web video, annotating videos with information like location, details about the people and topics in the video, subtitles, and licensing details. The metadata can be used in real time to add to the experience.

For example, the subtitles attached to the video can be sent to an online translation tool and converted to whatever language you want on the fly. JavaScript handles the syncing. Also, the location data associated with a video can be plotted on a map, and the viewer can browse the map while the video plays.

The most-cited advantage of HTML5 is that it allows for videos to be played in the browser without the use of plug-ins like Flash and Silverlight. But HTML5 affords another layer of utility — its native multimedia capabilities allow video and audio clips to be manipulated and enhanced by other things happening inside the browser. The look, size, position and controls of the video or audio file can be altered by JavaScript, CSS and Canvas animations. Playback can be enhanced with data pulled from the web’s many APIs. More than just a technology to side-step Flash, native video in HTML5 opens up a whole new set of interactive possibilities for video experiences on the web.

Check out Mozilla’s Popcorn demo page. You’ll see a number of widgets surrounding the main video. Popcorn.js pulls topics, places and people out of the video and plots the locations on a map and searches Wikipedia, Google News, Flickr and Twitter for more info on the people and topics in the video.

The result is what Mozilla developer Tristan Nitot calls “hypervideo.” What Nitot means is that Popcorn is connecting video to the rest of the web, linking it into the hypertext world.

If you’re not using a browser capable of running the demo, you can watch a video of the demo on the Drumbeat website.

As cool as this initial demo is, Popcorn is a long way from a finished product or even usable tool for anything beyond experimenting. Also, the demo shows off several widgets all at once, which makes the experience seem a little chaotic and crowded. But used as a spice, only where appropriate, Popcorn provides extra depth around videos, and the possibilities are thought-provoking.

See Also:

Tags: , , , ,
File Under: CSS
Aug
20
2010

Simplify CSS 3 With Online Code Generators

By

The latest advancements in cascading style sheets offer web designers a bevy of new tricks that once required JavaScript or were simply impossible to do. Effects like rounded corners, drop shadows, rotated elements or gradient fills are all part of CSS 3, and modern web browsers support them right out of the box.

However, while CSS 3 is powerful, remembering all the details of each element’s syntax can be overwhelming. To make matters more confusing, CSS 3 hasn’t been finalized yet, so browser makers are using browser-specific prefixes for the new attributes. For example, to get an orange to green radial gradient in Firefox, you’d use this code: background:-moz-radial-gradient(60% 50% 40deg, #866400, #FF4E28 71%).

A bit of a drag, right?

Cheat sheets help, but sometimes it’s much simpler to let an automated tool do the hard work for you. Our friends at Ajaxian recently discovered CSS 3.0 Maker, which covers all the new elements, like transitions, drop shadows and even @font-face and offers a clean simple set of tools to tweak the look on an element visually and then cut and paste the code into your style sheets.

Other similar sites include Randy Jensen’s CSS 3 Generator, the Style Master CSS Editor and CSS 3 Please.

CSS 3.0 Maker takes more of a kitchen sink approach by including a number of different effects. Sliders allow you to tweak each effect, control variables like shadow x- and y- offsets or the midpoint of a gradient without melting your brain. Once you have things the way you want them, you can either cut-and-paste the code or download an HTML file with inline style definitions. CSS 3.0 Maker also displays the browser compatibility for each new tool and takes care of all the vendor-specific prefixing for you. Our only gripe is that in some cases — like border radius — the site ignores the shorthand syntax in favor of defining each element individually, which is usually overkill.

Still, if you’ve ever struggled to remember the exact syntax of CSS 3′s new tools, CSS 3.0 Maker offers a simple solution. As a bonus, if you start watching the code change as you move the visual sliders, pretty soon you’ll be familiar with the syntax and can go back to using your text editor.

See Also:

Tags: ,
File Under: Browsers, Web Apps
Aug
19
2010

Chrome Web Store Is Now Open for Developers

By

Google has launched a developer’s preview of its Chrome Web Store — the company’s directory where users can browse and install Chrome extensions, web apps and downloadable apps that run in the browser.

There are no listings available yet in Thursday’s preview, but you can start creating apps and uploading them to the store so they’ll be available as soon as it opens later this year. All the tools you’ll need to publish apps are available there, as well as instructions on how to use the Licensing API so you can charge for your apps if you wish.

Interestingly, Google is recommending developers pursue a freemium model for paid apps. “A freshly installed app should always provide something useful or interesting, even if the user hasn’t paid yet,” the documentation says. “If the first page the user sees is useless — nothing but a payment wall, for example — the user is likely to uninstall your app, and you might get some scathing reviews.”

According to a report on TechCrunch, Google will take a five percent cut of sales revenue.

What’s up with installable web apps, you ask? Don’t web apps get served to a client from a web server? Well, yes, there’s that kind, and then there’s the kind you download and install. Google describes an installable web app as “a normal website with a bit of extra metadata.” The app is packaged, then downloaded and installed by the user, where it runs in the browser (online or off) and can access local storage.

Here’s a video that covers the details of Thursday’s developer preview:

See Also:

Tags: , , ,
File Under: APIs, Location, Social
Aug
19
2010

Facebook Opens Up Places in its API

By

Less than a full day after launching its new location-sharing feature, Facebook has opened up Places to developers.

Thursday afternoon, developers gained access to users’ check-in data via Facebook’s Graph API. Developers can also access check-in data from locations, like restaurants and businesses, to see who’s checked in there.

As we mentioned in our coverage of Wednesday evening’s launch, the Places data is read only for now. Applications can’t write or search Places data through the API. Those features are only available to Facebook’s launch partners for Places — Gowalla, Foursquare, Yelp and Booyah — while the kinks get ironed out. Everyone will get access to write and search Places data within a few months, according to Facebook.

The documentation for the Graph API has been updated to provide instructions for calling Places.

So sayeth the man page: “Every check-in is associated with a check-in ID that represents an object in the graph. Check-ins are associated with locations represented by Facebook Pages; the location must have a Facebook Page ID, whether the Page was created on Facebook directly or using the Open Graph protocol.”

If you don’t want to join in any of Facebook’s check-in reindeer games, the How-To Wiki has instructions on disabling Places in your account.

See Also:

Tags: , ,
« OLDER POSTS