deserves

Øredev2013 – Firefox OS – the platform HTML5 deserves

It is not very often that I mess up completely, but when I do, I don’t give up easily. On the second day of Øredev I was scheduled at 1 in the afternoon to talk about Firefox OS and I thought I totally got over my jetlag (I arrived 2 days before from San Francisco). I got back to the hotel around midnight to be up early, have breakfast, go to the gym and be ready bright and bushy-tailed for my presentation after lunch. Guess my horror when my hotel room phone rang and I was asked where I was as my talk started 5 minutes ago. My mobile phone alarm did not go off for some reason and I had overslept about 6 hours! This morning I learned that I can brush my hair and teeth at the same time and that I can be on stage and ready to present in 10 minutes after getting up. I am terribly sorry and grateful for the audience waiting for 10 minutes and I still managed to power through the talk in 25 minutes. I am really looking forward to the video of this one as I almost lost my voice at the beginning. The audience reaction was great though, dedication does pay off 🙂

The slides are available on Slideshare

The Screencast is available on YouTube.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Web Activities – Firefox OS: the platform HTML5 deserves

In the sixth video of our “Firefox OS – the platform HTML5 deserves” series (the previous five videos are published here) we talk about how Web Activities allow you as a developer to access parts of the hardware without having to package your app.

Firefox OS - be the future

Check out the video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Telefónica Digital/ W3C talking about the why and how of Web Activities. You can watch the video here.

Web Activities are a way to extend the functionality of HTML5 apps without having to access the hardware on behalf of the user. In other words, you don’t need to ask the user to access the camera or the phone, but instead your app asks for an image or initiate a call and the user then picks the app most appropriate for the task. In the case of a photo the user might pick it from the gallery, the wallpapers or shoot a new photo with the camera app. You then get the photo back as a file blob. The code is incredibly simple:

var pick = new MozActivity({
   name: "pick",
   data: {
       type: ["image/png", "image/jpg", "image/jpeg"]
   ?}
});

You invoke the “pick” activity and you ask for an image by listing all the MIME types you require. This small script will cause a Firefox OS device or an Android device running Firefox to show the user the following dialog:

pick dialog

All activities have a success and failure handler. In this case you could create a new image when the user successfully picked a source image or show an alert when the user didn’t allow you to take a picture or it was the wrong format:

pick.onsuccess = function () {?
    // Create image and set the returned blob as the src
    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(this.result.blob);
 
    // Present that image in your app
    var imagePresenter = document.querySelector("#image-presenter");
    imagePresenter.appendChild(img);
};
 
pick.onerror = function () {?
    // If an error occurred or the user canceled the activity
    alert("Can't view the image!");
};

Other Web Activities work in a similar fashion, for example to ask the user to call a number you write the following:

var call = new MozActivity({
    name: "dial",
    data: {
        number: "+46777888999"
    }
});

This opens the application the user has defined as the one to make phone calls, and asks to call the number. Once the user hangs up, you get a success handler object back.

Web Activities have a few benefits:

  • They allow secure access to hardware – instead of asking the user to allow yet another app to use the camera you send the user to the application they already trust to do this.
  • They allow your app to be part of the user’s device experience – instead of building a camera interface you send the user to the one they already are familiar with to take photos
  • You allow apps to become an ecosystem on the device – instead of having each app do the same things, you allow them to specialise on doing one thing and one thing well
  • You keep the user in control – they can provide you with the photo from anywhere they want and they can store results from your app’s functionality where they want rather than in yet another database on their device

We’ve covered the subject here before in detail in the Introducing Web Activities post.

The simplest way to get started with Web Activities on a Firefox OS device (or simulator) or an Android phone running Firefox is to download the Firefox OS Boilerplate App and play with the activities and the code:

Firefox OS Boilerplate App

Web Activities are a simple way to enable the apps hosted on your servers to reach further into the hardware without acting on behalf of the user. Instead, you let users decide how to get the information you want and concentrate on what to do with the data once you have it instead.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

WebAPIs – Firefox OS for developers: the platform HTML5 deserves

In the fifth video of our “Firefox OS – the platform HTML5 deserves” series (part one, part two, part three and part four have already been published) we talk about how Firefox OS extends the capabilities of the Web by adding new APIs, called WebAPIs to the existing stack of technologies.

Firefox OS - be the future

Check out the video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Telefónica Digital/ W3C talking about the need for device APIs on the Web, how some of the existing APIs can be used and how the work on Firefox OS benefits the Web as a whole. You can watch the video here.

The WebAPI work is important as it allows apps built with Web technologies to access the hardware. For the work on Firefox OS (which is fully built in HTML5 itself), we very much needed to know the status of the phone, how much battery is left, what the connectivity is like, the screen orientation and many more features. Thus we defined access to the various parts of the hardware as JavaScript APIs and sent these as proposals to the standard bodies.

If you want to learn more about these new APIs the canonical place to go to is the WebAPI Wiki Page where you can find an up-to-date list of all the APIs, their implementation status in the different Firefox platforms, the standards bodies involved and where to file bugs for them. You can also click through to bugzilla to see demos of the APIs in action. We’ve blogged here about WebAPIs in detail before: Using WebAPIs to make the web layer more capable and you can see a lot of information and demos in that post.

In general, all the APIs follow a simple model: you ask for access and you define a success and failure handler. You also get methods to ask for various properties in detail and some have Boolean values available to you. This makes it very easy to test for the support of a certain API before trying to access it.

Not all APIs can be available on the open Web as we can not trust every server out there. That is why the APIs come in three flavours: regular, privileged and certified. Regular APIs can be used in any app, regardless of its location (you can self-host these apps). Examples for that are the geolocation or the battery API. Privileged and Certified APIs both need your app to have a content security policy and be hosted on Mozilla servers. That way we can give you access to the hardware but minimise the potential of abuse and malware at the same time.

Take a look at the exhaustive list of blog posts here dealing with WebAPIs for more reading and we’ll be back with the next video covering WebActivities soon.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firefox Marketplace and alternatives – Firefox OS for developers: the platform HTML5 deserves

In the fourth video of our “Firefox OS – the platform HTML5 deserves” series (part one, part two and part three have already been published) we talk about how to submit apps to the Firefox Marketplace, and explain alternative ways to distribute your apps.

Firefox OS - be the future

Here are Mozilla’s principal developer evangelist Chris Heilmann (@codepo8) and Desigan Chinniah (@cyberdees) of the Firefox OS business development team showcasing how easy it is to get your app published on Firefox OS. You can watch the video on YouTube.

Firefox OS – like any other mobile platform – has a marketplace that allows you to find apps by name or category.

marketplace

As a developer, to submit your app to the marketplace all you have to do to is to create a manifest file and host it on your server (make sure to give it the correct MIME type “application/x-web-app-manifest+json”). In the manifest you define name of your app, provide icons and ask for permission to access web activities and other functionality. You can validate your manifest online before going further to avoid erroneous submissions.

Once you have your manifest in place, you can submit your app to the marketplace. There you provide screenshots or videos and a longer description of your app.

If the app is hosted on your server, you get all the HTML5 functionality you expect to get. You don’t get access to the camera or the contact book though. To get this, you need to package your app and host it on the marketplace. You can get more information on the different levels of app privileges on the Wiki.

As your apps are HTML5 apps you can also install them directly from the web without having to go through the marketplace. This also means that we don’t break the link-ability of the Web – you can send someone a link that will trigger the app install on a device that allows for the Open WebApps standards proposal (Firefox OS or Android with Firefox installed). This proposal is part of the WebAPI proposals and allows you to create a “install this app” button with a few lines of code:

if (navigator.mozApps) {
  function install() {
    var installapp = navigator.mozApps.install(manifestURL);
    installapp.onsuccess = function(data) {
      // App is installed
    };
    installapp.onerror = function() {          
      // Something went wrong,
      // information is in: installapp.error.name         
    };         	
  }
  var button = document.createElement('button');
  button.innerHTML = 'Install this app';
  button.addEventListener('click', install, false);
  document.body.appendChild('button');
}

This allows you to re-use all the effort you put into promoting your existing web presence to become the advertisement for your app.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Getting started with apps – Firefox OS for developers: the platform HTML5 deserves

In the third instance of our “Firefox OS – the platform HTML5 deserves” video series (part one and part two have already been published here) we talk about tools available for building apps for Firefox OS.

Firefox OS - be the future

Check the short video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Telefónica Digital/ W3C talking about starting your first HTML5 app. You can watch the video here.

First things first: you don’t build apps for Firefox OS – you build HTML5 apps for the Web. Firefox OS enables you as a developer to access the hardware of the phone by means of Web APIs – JavaScript APIs that are proposals to the standards bodies to give secure and simple access.

This means first and foremost that for web developers, nothing changes. There is no SDK for the web you need to download and install. You can use the editor and tool chain you are familiar with. This could be as simple as VI on the command line, or Eclipse as you are working with other languages than the web ones. Firefox OS doesn’t demand any fixed environment, much like the Web doesn’t. That said, there are efforts to create HTML5 tools out there and Mozilla is keeping a close eye on these efforts to see where and if partnering makes sense.

To get you started with building a Firefox OS app, you simply start with an HTML5 application in your browser. Whilst the first wave of Firefox OS devices have a resolution of 320 x 480 pixels, you should not fix your app to that size. Embracing the ubiquitous nature of the web, it seems prudent to use a responsive design approach. We’ve collected a lot of information on how to design a good HTML5 app on the Firefox OS developer hub.

One great feature of the Firefox Developer Tools is the responsive view mode. You can turn this one on by opening the developer tools and clicking the responsive mode icon. This will result in the current page becoming re-sizable in the browser without losing the developer tools or having to resize the window: the responsive mode in the Firefox developer tools allows you to resize your app without resizing the browser

Firefox is not the only browser with great developer tools built in. Chrome, for example allows you to simulate touch events when you are not on a touch device. To enable this, go to the developer tools settings, click “Overrides” and check the “Enable touch events” checkbox. For some great tips on when to use touch and when to use click, check out this video by Peter-Paul Koch (@ppk).

If you want to test Firefox OS itself or how your app performs in it – including the install process – you can download the Firefox OS simulator, a no-restart-required add-on for Firefox.

Once installed, you get a dashboard that allows you to manage your applications on your computer and start or stop the emulator:firefox emulator dashboard

When you start the simulator, you get a clean instance of Firefox OS running on your computer in a window of the right dimensions. You
can try out the OS, install your apps and see what the experience is like. simulator

More detailed testing of the performance of your apps requires a Firefox OS device. If you have one of them, you can connect the phone via USB and send your app directly from the simulator to the phone.

device connected

The tooling space of HTML5 applications is one of the most discussed markets on the Web right now. We are confident that in the nearer future a lot of new, amazing tools will become available to make HTML5 app development easy and give developers the insights they need when they develop. For now, using the browsers’ developer tools and the Firefox OS sSimulator will get you 90% on the way.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

App discovery – Firefox OS for developers: the platform HTML5 deserves

In the previous edition of this video series we introduced FirefoxOS and what it means for the open web and HTML5. We explained that apps for FirefoxOS are HTML5 apps, and could be as simple as a mobile-optimised web site with a manifest file. be-the-future

Now we’re back explaining how Firefox OS is different from other platforms when it comes to app discovery. Here are Mozilla’s principal developer evangelist Chris Heilmann @codepo8 and Desigan Chinniah @cyberdees of the Firefox OS business development team showcasing how easy it is to get your app found on Firefox OS. You can watch the video on YouTube.

The main difference of app discovery in Firefox OS is that you are not limited to a listing in a closed app store. Being a pure web platform, you can publish your apps either by adding them to the marketplace, but also by adding a simple “install from web” button to your already existing web sites. The code is as simple as adding an event handler to a button that points to your application’s manifest file:

var button = document.querySelector('#install');
button.addEventListener('click', function(ev) {
  var installapp = navigator.mozApps.install(manifestURL);  
  installapp.onsuccess = function(data) {
    // App is installed
  };
  installapp.onerror = function() {
    // App wasn't installed, info is in 
    // installapp.error.name  
  };
}, false);

That way you can re-use the work you put into search engine optimisation over the last years and make what you do on the web already advertise for your app.

For end users, the main difference in Firefox OS is that apps can be found in context and locale. The flow for an end user in a closed app environment is the following:

  • Go to the marketplace (log in if you aren’t already)
  • Pick a promoted app or drill down into a category or search apps by name
  • Pick the app, go through the install process, give it the permissions it wants and start the app
  • Use it or uninstall it

In any case app discovery is very targeted to the name of the app or dependent on the promotion of the app in the store. Firefox OS works around these problems and instead allows users to find relevant apps with a more intelligent search functionality that also understands locales.

In the case of Firefox OS users can search for a topic, like the name of a band or a movie and find applications that are relevant to that search. For example if you look for a band name, you get Soundcloud for music, Wikipedia for information, Ticketmaster to get tickets for their next concert and many other, relevant apps. This is in the US, in other countries you’d get apps that are relevant there.

Activating any of the icons in the search results then opens this app with the search term you entered, instead of just opening the app and asking you to re-enter your search term. The apps that are loaded are the mobile optimised HTML5 site of that provider, which means they load fast and don’t need to install – it is a real “try before you buy”.

If the user likes the app, they can long-tap and install it, which means you get all the extra functionality Firefox OS offers HTML5 solutions.

In essence, with Firefox OS, we made app discovery as easy as browsing the web, and we give you a very good reason to brush up the mobile optimised web sites you already have on the web.

We hope you enjoy this and that it answers a few of the questions you had about Firefox OS. Watch this space for more videos in this series.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firefox OS for developers – the platform HTML5 deserves

Over the next few weeks we will publish a series of short videos here that explain what Firefox OS means for developers and how you can be part of the revolution it brings to the world.

be-the-future

In various conversations we’ve repeatedly heard from developers that they view Firefox OS as simply a third player in the mobile space next to Android and iOS. This is not exactly what we are trying to achieve. Firefox OS is unique in its approach as it doesn’t target the high-end markets already saturated by other platforms. Instead its goal is to replace feature phones in markets that have no access to high-end smartphones or aren’t even considered in closed application mechanisms like marketplaces. Furthermore we wanted to create the first truly open and web-standards based ecosystem and mobile operating system – nothing in Firefox OS is closed or alien to the Web.

This is why we recorded this video series to explain in a short and simple fashion where you can go to get started as a developer for Firefox OS and how this means writing HTML5 without the limitations other platforms have in place for web-standards based applications.

Today we start with a short video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Téléfonica Digital/ W3C talking about the goals of Firefox OS. You can watch the video here.

Resources mentioned in the video are:

We hope you enjoy this and that it answers a few of the questions you had about Firefox OS. Watch this space for more videos in this series.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)