Dear followers, Mozilla has launched its mobile operating system (OS). In the general opinion, this is one of the toughest markets to compete, given the competition composed by Apple iOS and Google Android.

Where can I get a Firefox OS phone?


Fireweb the new LG mobile phone with Firefox OS.

LG is already part of the family Firefox OS with LG Fireweb, which is sold for €150 euros unlocked. There are 3 devices on the market with Firefox OS. Brazil is the first country to have 2 simultaneously, LG and Alcatel One Touch Fireweb Fire.
This OS is not yet a rival of iOS and Android. The technical specifications of this LG leave this clear:
Operating System: Firefox OS v1.1
Display: 4 (480 x 320)
Camera: 5 MP with flash
Internal memory: 2GB
Battery: 1,540 mAh\
Connections: Bluetooth, Wi-Fi, 3G
Weight: 122.50 g

Movie demonstration on Youtube: http://www.youtube.com/watch?v=t_7sTP7IRn4 .

First Time Firefox OS – Hello World

-Firefox OS Simulator

To begin the application development, it is necessary to have installed the latest version of the browser Mozilla Firefox.

Below, all steps necessary to install  the emulator of OS will be presented.

1. First of all, it is necessary install the latest version of the Firefox Browser. The version for this tutorial is 26.0.

2. Through the Firefox, access the following link.
https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator

3. This will bring up the following Add-On page as shown below:

4. Click on the green Add to Firefox button. This will start downloading the Firefox OS Simulator add-on as shown. It might take a while on slow connections, so be patient. A downloading progress window will be presented, as depicted below.

5. When the download is complete, it will show a dialog where the permission to go ahead and install the add-on will be asked.
6. Then the Dashboard appears in the browser. Otherwise, just follow the following steps.
7. To start the simulator, one must click “running”, marked with a circle in the following image.

What is Firefox OS?

Firefox OS is an operating system from Mozilla, Linux-based but designed in HTML, to allow that applications communicate directly with the hardware using JavaScript.

Hello World Firefox OS

To build an application for the Firefox OS at least four files are needed: 1 HTML file, 1 CSS file, 1 JavaScript file and a manifest.webapp file.

For this first example, lets keep things simple. We want to simply display a Hello World at the top of a picture, that just opens a message when clicked.

HTML (index.html)

  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset=“UTF-8”>
  5.                 <title>Hello World Firefox OS</title>
  6.         </head>
  7.         <body>
  8.                 <article class=“content”>
  9.                         <h1>HELLO WORLD Firefox OS</h1>  
  10.                         <img id=“picture” width=“100%” src=“imagem.png” alt=“Click me”>
  11.                 </article>
  12.                 <script src=“script.js”></script>
  13.         </body>
  14. </html>

Javascript (script.js)

  1.  ( function() {
  2.     var $picture = document.getElementById(‘picture’);
  3.      
  4.     $picture.onclick = function() {
  5.                 alert(‘http://infptavares.blogspot.pt’)
  6.     };
  7.     })();

Manifest (manifest.webapp)

  1.  {
  2.         “version”: “1.0”,
  3.         “name”: “Hello World”,
  4.         “launch_path”: “index.html”,
  5.         “description”: “Hello World”,
  6.     “icons”: {
  7.                 “16”: “/icons/16.png”,
  8.                 “22”: “/icons/22.png”,
  9.                 “32”: “/icons/32.png”,
  10.                 “48”: “/icons/48.png”,
  11.                 “64”: “/icons/64.png”,
  12.                 “128”: “/icons/128.png”
  13.     },
  14.     “developer”: {
  15.                 “name”: “Pedro Tavares”,
  16.                 “url”: “http://infptavares.blogspot.pt”
  17.     },
  18.     “installs_allowed_from”: [“*”],
  19.     “default_locale”: “en”
  20.     }

The manifest.webapp file contains the information that the browser needs to interact with the application. This is a JSON file that contains the name and description of the app, information on the programmer, the homepage of the application and the icons used.
At this point, it is necessary start the simulator, click Add Directory and select the manifest of your app, if the manifest is valid click the Run button.


-Add the application into simulator


To open Firefox OS click the Firefox button Web DeveloperFirefox OS Emulator. If you are not using Windows go to Tools Web DeveloperFirefox OS Emulator.
The application will be automatically installed in the emulator. After that, go to the menu and open it.
The project initially conceived is now available in the emulator. The whole basis for building applications pass through HTML, interconnected with Javascript. It is extremely easy create applications for this operating system.
HTML5 is here to stay and will be the language of the web for many  years. Firefox OS implements the latest specifications and allows the applications to use these web languages.
With the free market place for programmers and cheap mobiles, Firefox OS has everything to grow and become a successful operating system.
The source code is available for download here. (password: infptavares.blogspot.pt .)
Pdf document here.