Hello World Firefox OS

If you are a web developer and are used to developing in HTML, CSS and JavaScript this post is for you!

Don’t miss this opportunity and build your first mobile app today.

The first devices using Firefox OS are still fresh in the market, this is the chance for many developers around the world to build something new without learning any new programing language.

Se és um programador web e estás habituado a desenvolver em HTML, CSS e JavaScript este artigo é para ti.

Não percas a oportunidade e começa hoje mesmo a tua primeira aplicação móvel.

Os primeiros telemóveis com Firefox OS ainda são recentes no mercado e esta é a oportunidade para muitos programadores em todo o mundo de construir algo novo sem necessidade de aprender uma linguagem de programação nova

What is Firefox OS?

Firefox OS is a mobile operating system from Mozilla, it’s Linux-based but was designed to allow HTML5 applications to communicate directly with the device hardware using JavaScript.

O que é o Firefox OS?

O Firefox OS é um sistema operativo da Mozilla, baseado em Linux mas pensado para permitir que aplicações HTML comuniquem diretamente com o Hardware utilizando JavaScript.

How can I start?

First you need the Firefox browser, if you are not using it you can download the appropriate version to your system here.

Once you get the browser running you have to install the Firefox OS emulator, which is very easy to do, it’s just an extension for the browser.

To get it open Firefox, and click on the Firefox button at the top left corner, then click Add-ons.
Search for Firefox OS and add it to the browser, you can also get the simulator directly from here.

Como posso começar?

Primeiro precisas do browser Firefox, se não o usas podes fazer o download aqui.

O passo seguinte é instalar o simulador de Firefox OS, que é apenas mais uma extensão do browser.

Para fazer o download abre o Firefox e clica no botão laranja no canto superior esquerdo, depois clica em Add-ons. Pesquisa por Firefox OS e adiciona-o ao browser, podes também fazer o downlaod direto do simulador aqui.

Hello World Firefox OS

To build a Firefox OS app you will need at least four files, the HTML, CSS, JavaScript and the manifest.webapp file.

Let’s keep our first app simple, it will say Hello World at the top, will have an image right below it and when it is touched an alert will open.

Hello World Firefox OS

Para construir uma aplicação para Firefox OS vais precisar de pelo menos quatro ficheiros, o HTML, CSS, JavaScript e o manifest.webapp.

Vamos manter o nível de complexidade a nossa primeira aplicação baixo, vamos apenas mostrar um Hello World no topo e uma imagem logo por baixo que abre o uma mensagem quando é tocada.

HTML

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hello World Firefox OS</title>
		<link rel="stylesheet" href="css/home.css">
	</head>
	<body>
		<article class="content">
			<h1>HELLO WORLD Firefox OS</h1>  
			<img id="picture" src="images/hot.png" alt="Bind Tuning">
		</article>
		<script src="js/home.js"></script>
	</body>
</html>

JavaScript

    ( function() {
    var $picture = document.getElementById('picture');
     
    $picture.onclick = function() {
		alert('http://handsontek.net')
    };
    })();

Manifest

    {
	"version": "1.0",
	"name": "Hello World",
	"launch_path": "home.html",
	"description": "Hello World",
    "icons": {
		"16": "/images/icons/16.png",
		"32": "/images/icons/32.png",
		"48": "/images/icons/48.png",
		"64": "/images/icons/64.png",
		"128": "/images/icons/128.png"
    },
    "developer": {
		"name": "Joao Ferreira",
		"url": "http://handsontek.net"
    },
    "installs_allowed_from": ["*"],
    "default_locale": "en"
    }

The manifest.webapp file contains information that a browser needs to interact with the app, it is a JSON file with a name and description for the app, and it can also contain the origin of the app, icons, and the permissions required by the app, among other things.

You can learn more about the manifest here.

O ficheiro manifest.webapp contém a informação que o browser necessita para interagir com a aplicação, é um ficheiro JSON que contém o nome e descrição da app, informação sobre o programador, a página inicial da aplicação e os ícones utilizados.

Podes saber mais sobre o manifest aqui.

Add the App to the simulator

To open the Firefox OS click in the Firefox button -> Web Developer -> Firefox OS Emulator if you are not using windows go to Tools -> Web Developer -> Firefox OS Emulator.

Start the simulator, click Add Directory and select the manifest of your app, if the manifest is valid click the Run button.

Adicionar a aplicação ao simulador

Para abrir o Firefox OS clica no botão Firefox -> Web Developer -> Firefox OS Emulator, se não estás a utilizar Windows vai a Tools -> Web Developer -> Firefox OS Emulator.

The application will be automatically installed in the emulator, go to the menu and open it.

A aplicação vai ser instalada automaticamente no emulador, e fica disponível no menu.

Conclusion

The HTML5 is here to stay and will be the language of the web for long years, Firefox OS is an operating system that implements all the latest specifications and allow you to build applications using the web languages, if you are already a web developer building a mobile app will be natural.

With a free marketplace for developers and with affordable devices Firefox OS has everything to grow and become a successful operating system.

Conclusão

O HTML5 veio para ficar e será a linguagem da web por muitos anos, O Firefox OS implementa as ultimas especificações e permite que desenvolvas aplicações utilizando as linguagens web, se já és um programador web, construir aplicações será um processo natural.

Com o market place gratuito para programadores e com telemóveis baratos, o Firefox OS tudo para crescer e tornar-se um sistema operativo de sucesso.

This post was powerd by BindTuning


About the Author:

Web developer focused on SharePoint branding, blogger, tech enthusiast. Traveling and sports are my addictions, knowledge and success are my daily motivations.

No comments yet

Leave a Reply

Media Partner