Archive for the ‘HTML5’ Category

File Under: Browsers, HTML5, Mobile
Nov
19
2012

Mozilla Tempts Mobile Developers With Firefox OS Simulator

By

Firefox OS’s home screen, dialer and web browser. Image: Screenshot/Webmonkey

Mozilla has released a new version of its experimental Firefox OS Simulator. The Firefox OS Simulator (which also goes by the nerdtastic nickname r2d2b2g) is a new add-on for Firefox that makes it easy for web developers who would like to get their hands dirty building apps for Mozilla’s coming mobile Firefox OS.

Mozilla’s Firefox OS is still in the very early alpha stages, but if you’d like to test your apps in the latest version of the Simulator, head on over to the download page (note that there are known issues running the simulator on Linux and Windows XP).

Firefox OS is Mozilla’s answer to the question how does Firefox stay relevant in an increasingly mobile world? Locked out of Apple’s iOS due to the platform’s developer limitations and only recently beginning to create a truly competitive browser on Android, Mozilla’s long term mobile plan is to create its own mobile operating system built entirely on open web technologies.

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

Applications built for Firefox OS use nothing more than web development tools — everything is made with HTML, CSS and JavaScript — which then run atop Firefox’s Gecko rendering engine.

To make it possible to create full-featured mobile apps with only HTML and other web tools, Mozilla is relying heavily on device-level APIs to tap into everything from dialing phone numbers to listing contacts, taking photos and getting Wi-Fi information. Not all of the APIs Firefox OS uses are web standards yet, though Mozilla has submitted most of them to the W3C for consideration.

Mozilla hardly has a monopoly on using web tools to build mobile apps; that was Apple’s original plan for iOS and it’s also exactly what tools like Phonegap or Cordova allow you to do for iOS, Android and other mobile platforms. The difference with Firefox OS is that you don’t need to package your app up in a native container — there’s no need for Phonegap and its ilk.

While Firefox OS may use familiar web development technologies and may run on the same Gecko engine that already powers the Firefox web browser, developers still need a way to test their apps in a mobile environment, which is where the Firefox OS Simulator comes in.

To get started with the Simulator, first open up the “Simulator Manager” by selecting the new Firefox OS Simulator option in the Firefox Web Developer menu. In the Simulator Manager you’ll find controls to start and stop the Simulator and a JS Console option to see any error messages as you develop.

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

Tags: , , ,
File Under: HTML5, Multimedia
Nov
12
2012

Mozilla’s Popcorn Maker Brings Video Remixing to the Masses

By

Popcorn Maker 1.0 makes video remixing a snap. Image: Screenshot/Webmonkey

Mozilla has released Popcorn Maker 1.0, the company’s mashup-creating, video-editing suite for the web. Popcorn Maker makes it easy to pull just about any content on the web into a video container you can then publish back to the web.

Despite the interactive nature of the web, video on the web remains little more than glorified television in your web browser — a passive experience in the midst of the otherwise interactive online world.

It doesn’t have to be that way. HTML5 makes video into just another HTML element — editable, hackable, remixable.

It’s HTML, after all. And that means it can interact with other HTML elements or use JavaScript to augment video in real time — annotating videos with information like location, details about the people and topics in the video, subtitles, Twitter feeds, current weather information, links and much more.

The problem is that there aren’t a lot of tools that make it easy to create interactive web videos, which is where Popcorn Maker comes in.

Popcorn Maker is a free online video editor for mashing up, remixing and adding outside content to web videos. Popcorn Maker’s drag-and-drop timeline interface makes it easy to pull all kinds of outside web content into your videos. For example, add photo overlays, maps, links, in-video pop-ups of Wikipedia entries, Twitter widgets with relevant hashtag searches and so on.

As you would expect from the makers of Firefox, Popcorn Maker is built entirely from web technologies — pure HTML, CSS and Javascript. But more than just being an impressive use of web standards, Popcorn Maker 1.0 is a genuinely easy-to-use video editor and that’s no small feat regardless of which tools you use to build it.

I’ve been playing around with Popcorn Maker for a few days now and it does indeed deliver on its promise to bring video editing to the people. To get started you just need to pull in a video you’d like to annotate or remix. Adding a source video is just a matter of pasting in a link to a YouTube, Vimeo or Soundcloud video. Alternately you can just add a link directly to your video file.

Once you’ve got your base video (or videos) in Popcorn Maker, adding elements to it is as simple as grabbing one of the “events” from the right hand side of the editor and dragging it onto either the video stage itself, or the timeline below. Once your event is in the timeline you can change the settings, resize it, move it around and otherwise tweak it to behave the way you’d like.

Once everything is working the way you want, just click the share link and Popcorn Maker will give you either a link (or an embed code) you can paste anywhere on the web.

To get started remixing videos, head on over to the Popcorn Maker site. If you want to see some examples, check out new Popcorn Maker projects on Webmaker.org. For more background on how Popcorn Maker works, check out the Mozilla Hacks blog post and watch the video below.

Tags:
File Under: HTML5, Web Standards
Nov
1
2012

Mozilla Busts HTML5 Myths

By

Image: Christian Heilmann/Flickr

Mozilla has jumped into the shark-infested debate about whether or not HTML5 can compete with platform native apps. Chris Heilmann, Mozilla’s Principal Evangelist for HTML5, has a new post on the Mozilla Hacks blog that challenges many “false assumptions” about HTML5.

Heilmann’s post is not so much about which you ought to use for your next app — right now that depends on what you’re building — rather it attempts to clear the air about just what HTML5 actually can and cannot do.

Among the things Heilmann covers are the myths that HTML5 has performance problems, that it can’t work offline and that developers can’t make money building HTML5 apps.

Along the way Heilmann also acknowledges where platform-native apps have the lead, namely, access to device APIs. It’s not a shortcoming of HTML5 that iOS and Android both prevent web apps from accessing many APIs native apps can use, but it is a practical reality that keeps many developers building native apps for the time being. As Heilmann writes, “in essence HTML5 is a Formula 1 car that has to drive on a dirt road whilst dragging a lot of extra payload given to it by the operating system without a chance to work around that — for now.”

The qualifier, “for now,” is the key part of that analogy. Not only are platforms slowly adding more HTML5 support to their native browsers, we’ve also seen increased support for accessing device capabilities — like GPS or the camera — through web apps. And of course Mozilla is building its own mobile OS which will consist exclusively of HTML5 apps.

It may be some time before app developers start favoring the web over platform-specific apps, but as Heilmann points out this is hardly the first time the web has taken over from a closed system: “historically, closed platforms came and went and the web is still going strong.”

Tags:
File Under: Browsers, HTML5, Multimedia
Oct
22
2012

Mozilla Plans H.264 Video for Desktop Firefox

By

Mozilla is getting closer to making H.264 video work in Firefox.

The company’s recently released Firefox for Android already bakes in OS-level support for the H.264 video codec and now Mozilla is adding support to desktop Firefox as well.

Mozilla long opposed supporting the H.264 codec because it’s patent-encumbered and requires licensing fees. It’s also the most popular codec for HTML5 video on the web, which drove Mozilla to swallow its ideals and get practical about adding support to Firefox. Instead of including the codec directly in Firefox, the browser will rely on OS-level tools to play H.264 video.

There’s still no support for H.264 in the current desktop version of Firefox, but as Mozilla CTO, Brendan Eich recently noted on his blog, work is under way and, with the exception of Windows XP, all platforms will get OS-native codec support for H.264 video. Windows XP, which lacks OS-level tools for H.264, will continue to use the Flash plugin to play H.264 movies.

If you’d like to keep track of Mozilla’s progress adding H.264 to the desktop there’s a tracking bug that follows solutions for all the major desktop platforms. Eich does not give an explicit timeline or any hint of when H.264 support might ship with Firefox on the desktop.

The HTML5 video element was supposed to offer a standards-based way to play movies on the web without proprietary plugins like Flash or Silverlight. Unfortunately that dream has failed to pan out. Instead of proprietary plugins, the web ended up with proprietary video codecs, which has created a split in browser support for HTML5 video. Firefox and Opera support the open Ogg and WebM codecs, while Safari and Internet Explorer supported H.264.

Mozilla (and Opera) were against the adoption of H.264 on ideological grounds — H.264 is not an open codec and requires that companies using it pay royalties. But earlier this year the company partially reversed course and said it would support H.264 on devices where the codec is supplied by the platform or implemented in hardware.

In announcing its change of heart with regard to H.264, Eich wrote, “H.264 is absolutely required right now to compete on mobile. I do not believe that we can reject H.264 content in Firefox on Android or in B2G and survive the shift to mobile…. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.”

However, while Mozilla may have abandoned the fight against H.264 in HTML5 video, it has taken up the same banner when it comes to WebRTC. WebRTC is a group of proposed standards that will eventually make web apps capable of many of the same feats that currently require platform-native APIs. In his recent post detailing the progress of H.264 support, Eich says that Mozilla is still focused on “the fight for unencumbered formats” for WebRTC, and promises “more on that front later”.

Tags: , ,
File Under: HTML5, Mobile, Web Standards
Sep
21
2012

New HTML Tricks for Web Developers in Apple’s iOS 6

By

Image: Screenshot/Webmonkey

Apple’s recent iOS 6 update added some nice new web standards support to Mobile Safari, the default iOS web browser for the iPhone, iPad and iPod touch.

Apple’s documentation remains sparse and occasionally outdated, but luckily Max Firtman, author of O’Reilly’s Programming the Mobile Web, has a very thorough rundown of everything that’s new in iOS for web developers.

By far the biggest news is support for file uploads and camera access using a combination of the File API and the HTML Media Capture API. To let users take a picture from your web app, you’d use a file input tag something like this:

<input type="file" accept="image/*" capture="camera">

Mobile Safari’s Media Capture support is incomplete so it will ignore the capture attribute, as well as any value for accept other than image or video, but at least web apps can now capture and upload images from the iPhone’s camera.

I put together a quick demo page of Mobile Safari’s Media Capture support so you can see the new interface in action. The first two examples on that page work, the third audio example does not. You can see in the demo that Mobile Safari helpfully shows a thumbnail of the image prior to upload. It’s also worth noting that Mobile Safari supports the multiple boolean flag for uploading more than one image at a time, though in that case you lose the ability to access the camera.

For more on what to do with those images once the user has selected them, check out the Mozilla developer network, which has an excellent tutorial on using the File API.

Other highlights for web developers in the new Mobile Safari include support for the Web Audio API (great news for anyone building mobile, web-based games), increased application cache sizes (now 25MB), a faster JavaScript engine and some new CSS tricks as well — CSS Filters, CSS Cross Fades and the not-yet-a-standard CSS Image Set we told you about earlier. Be sure to read through Firtman’s whole post for all the details.

While there’s plenty to like about the new Mobile Safari there are some things missing, like support for WebRTC and getUserMedia, WebGL and sadly our least favorite bug — the Viewport Scaling Bug, which causes Mobile Safari to incorrectly reflow content when rotating from portrait to landscape — seems to still be hanging around. As always there’s a JavaScript workaround available.

Tags:
« OLDER POSTS