Archive for the ‘Mobile’ Category

File Under: Browsers, HTML5, Mobile
Dec
12
2012

New Simulator Showcases Mozilla’s Coming Firefox OS

By

Firefox OS’s lock screen, app screen and Twitter app. Image: Screenshot/Webmonkey

Mozilla has released version 1.0 of its Firefox OS Simulator, a new add-on for Firefox that makes it easy for web developers to start building apps for Mozilla’s coming mobile Firefox OS.

Despite the 1.0 status, Mozilla’s Hacks blog still refers to the Firefox OS Simulator as a “preview” — largely because Firefox OS itself is still in development. The Simulator, however, is much less buggy than the release I tested last month (and the problems with the Linux and Windows builds have been resolved).

If you’d like to get started building apps for Firefox OS, the Simulator now has an official page on Mozilla’s Add-Ons site. Once it’s installed and running you’ll get a preview of what Firefox OS will be like on a mobile device.

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.

That means building apps for Firefox OS is just like building apps for the web. HTML, CSS and JavaScript form the foundation and emerging web standards like WebRTC help bridge the gap between Firefox OS and device hardware.

To run the Simulator in Firefox open up the “Simulator Manager” by selecting the Firefox OS Simulator option in the Web Developer menu. Once the Simulator Manager is running you’ll see controls to start and stop the Simulator and a JS Console option to see any error messages as you build your app. If you need help getting started, this video from Mozilla walks you through the process step by step:

For more on how to get started using the Simulator and building apps for Firefox OS, see our earlier post as well as 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.

File Under: Browsers, Mobile, Multimedia
Nov
30
2012

Firefox for Android, Now With Video That ‘Just Works’

By

H.264 video in Firefox for Android. Image: Scott Gilbertson.

Mozilla has added support for the H.264 video codec to its Firefox for Android mobile web browser.

Right now support is limited to Android 4.1 (Jelly Bean) and Samsung phones running Android 4.0 (Ice Cream Sandwich). Mozilla is working to fix some bugs that currently prevent H.264 from working on other devices. Support for older Gingerbread and Honeycomb Android devices is still in the works.

This is the first time Mozilla has released a web browser with support for the popular H.264 codec. The company previously refused to support H.264, citing royalty and licensing concerns. Instead Mozilla touted Google’s WebM codec, which offers many of the benefits of H.264 in a royalty-free package. Unfortunately for Firefox fans WebM has failed to gain ground against H.264.

Adobe’s Flash Player plugin can also play H.264 video and, until Adobe decided to abandon Flash for Android, that was Mozilla’s solution for H.264 video in Firefox for Android.

With WebM adoption lagging and Flash for Android dead, Mozilla found itself in a bind. Some estimates claim up to 80 percent of video on the web is encoded in H.264, forcing Mozilla to choose between supporting H.264 on Android or leaving Firefox users with no way to watch video on mobile devices. Fortunately for Firefox users, Mozilla decided to be practical and support H.264.

Technically the new H.264 support is not a part of Firefox, rather the browser is tapping into Android’s underlying H.264 support to decode video. That means royalty payments are covered by hardware makers, not Mozilla.

I tested Firefox for Android’s H.264 on a Samsung Galaxy Nexus running Android 4.1 and for the most part H.264 video worked without issue. Some popular video sharing sites, however, appear to be doing OS/browser detection rather than feature detection — I’m looking at you Vimeo — which means that, even though your phone can play the video, Vimeo thinks it can’t.

Hopefully Vimeo and other sites doing the same thing will fix this soon because Mozilla is planning to bring the same H.264 support to the desktop. As with Firefox for Android, desktop Firefox won’t have its own decoder, but will rely on OS-level H.264 decoders. For end users though the result will be the same — video that just works.

Tags: , ,
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: Browsers, Mobile, Web Standards
Nov
16
2012

Microsoft Offers Guide to Adapting Your Site for IE 10

By

Nokia Windows Phone 8. Photo: Ariel Zambelich/Wired.

Microsoft’s Windows Phone 8 offers much better HTML5 support than its predecessors thanks to the Internet Explorer 10 web browser.

Unfortunately, if you’ve been building WebKit-centric sites IE 10 users won’t be able to properly view your site, which is why Microsoft has published a guide to adapting your WebKit-optimized site for Internet Explorer 10.

If you’ve been following CSS best practices, using prefixes for all major browsers, along with the unprefixed properties in your code, then there’s not much to be learned from Microsoft’s guide (though there are a couple of differences in touch APIs that are worth looking over).

But if you’ve been targeting WebKit alone, Microsoft’s guide will get your sites working in IE 10, WebKit, and other browsers that have dropped prefixes for standardized CSS properties.

Sadly, even some the largest sites on the web are coding exclusively for WebKit browsers like Chrome, Safari and Mobile Safari. The problem is bad enough that Microsoft, Mozilla and Opera are planning to add support for some -webkit prefixed CSS properties.

In other words, because web developers are using only the -webkit prefix, other browsers must either add support for -webkit or risk being seen as less capable browsers even when they aren’t. So far Microsoft hasn’t carried through and actually added support for -webkit to any versions of IE 10, but Opera has added it to its desktop and mobile browsers.

Microsoft’s guide to making sites work in IE 10 for Windows Phone 8 also covers device detection (though it cautions that feature detection is the better way to go) and how to make sure you trigger standards mode in your testing environment, since IE 10 defaults to backward-compatibility mode when used on local intranets.

For more details on how to make sure your site works well in IE 10 for Windows Phone 8, head on over to the Windows Phone Developer Blog (and be sure to read through the comments for a couple more tips).

Tags: ,
File Under: Browsers, Mobile
Nov
9
2012

Internet Explorer 10 Brings HTML5 to Windows Phone 8

By

Web font support is just one of IE 10′s new mobile tricks. Image: Microsoft

Windows Phone 8 brings Internet Explorer 10 to mobile, which means Windows Phone 8 devices have much better HTML5 support than previous releases.

The version of IE 10 that ships with Windows Phone 8 packs in most of the improvements found in its Windows 8 desktop/tablet cousin, though there are a few exceptions web developers should be aware of.

First the good news. IE 10 on mobile is leaps and bounds ahead of its predecessors and supports web app essentials like the Application Cache API for creating offline apps and IndexedDB for storing data. There’s also support for Web Workers, WebSockets and several of the new HTML5 form elements. For more on the latter, be sure to check out developer Andrea Trasatti’s nice rundown of HTML5 form support in IE 10.

IE 10 on mobile has all the new CSS features found in the Windows 8 version as well, including CSS layout features like CSS Regions and Grid layout. The Windows Phone Developer Blog also touts Flexbox, but it appears that IE 10′s Flexbox support uses the older syntax, which effectively means it doesn’t support Flexbox (so far Chrome and Opera are the only browsers to support the new syntax). Hopefully Microsoft will add support for the new syntax in a future IE 10 update.

While IE 10 for Windows Phone 8 is very close to feature parity with the desktop/tablet release, there are a few things web developers need to be aware of. Here’s Microsoft’s full list of things IE 10 can do on the desktop but not on phones:

  • Inline video
  • Some of the new manipulation views APIs  for touch panning and zooming, with the exception of –ms-touch-action
  • Multi-track HTML5 audio (simultaneous)
  • ActiveX and VBScript
  • Drag-and-drop APIs
  • File access APIs with the
    exception of blobs which
    are supported on Windows Phone 8

  • Windows 8 integration features: Link previews, pinned site icons & notifications and support for connecting sites to apps
  • Also in Internet Explorer 10 for Windows Phone, Window.open does not return a valid window object. This is because on the phone each “window” is isolated in its own sandbox.

The lack of support for the File Access API is disappointing, but to be fair iOS has been around for over five years and it just recently added File API support. However, the biggest gotcha for web developers may well be the last item since it’s not so much a missing feature as an unexpected behavior and could affect applications that would otherwise work just fine.

For more info on what’s new in IE 10, check out Microsoft’s technical documentation. For IE 10 on Windows Phone specifically be sure to read through the entire post on the Windows Phone Developer Blog

Tags:
« OLDER POSTS