Firefox OS

Firefox OS disponibiliza novo simulador 3.0

Firefox_mobile_mozilla

Para quem anda investigando ou desenvolvendo aplicativos para a plataforma Firefox OS, a fundação Mozilla acaba de lançar a versão 3.0 ainda beta para desenvolvedores testar.

Dentre as novidades dessa release está a possibilidade de testar a rotação e entre as novas funções ainda as velhas, como por exemplo o debug remoto ainda não é possível no Windows.

Porém muita coisa foi consertada, menor número de bugs e o sistema operacional começa a tomar jeito de release final.

Eu espero que logo logo eles adotem o simulador Ripple para testar, vai ficar muito mais fácil debugar, empacotar e testar.

Quem quiser instalar, basta atualizar o Firefox para última versão 19 e baixar a extensão:

Mais informações em inglês você pode achar aqui.

Firefox OS/ Phonegap

Até 2016 metade de todos Apps no mundo será Híbrido com HTML5/CSS3/Javascript

gartner-logo

Quando o instituto de pesquisas avançadas com foco em tecnologia Gartner fala, todo mundo presta atenção, já que seus releases tem alto grau de acerto.

Hoje eles liberaram mais um release sobre o relatório apontando que devido ao alto grau de complexidade e o curto prazo de tempo para desenvolvimento (aka Prazo Jack bauer), empresas estão adotando soluções híbridas com HTML em um container Web que dão acesso à certos recursos do dispositivo.

Até 2016 metade de todos os Apps escritos e publicados serão híbridos.

Ou seja, Phonegap chegou para ficar.

Phonegap ROCKS!

Eventos/ Firefox OS

Criando sua primeira App para o Firefox OS

Firefox_mobile_mozilla

Então você decidiu criar um App em HTMl5/CSS3 e Javascript para o FirefoxOS certo? Não sabe como fazer, veja abaixo como criar sua primeira App Hello World para o Firefox OS.

Primeiro Passo

Baixe o Firefox

download_firefox

Segundo Passo

Baixe o Simulador do Firefox OS. Para fazer isso vá ao menu:

firefoxos_complementos

Pesquise por Firefox OS e clique em instalar

firefoxos_downloading

Demora um pouco para quem tem uma conexão lenta, já que você está baixando o compilador para suas Apps, o engine Gecko e o próprio simulador.

Testando o simulador

Pronto, instalação feita, você agora só precisa testar seu simulador e ver se está tudo correto.

Vá até o menu Firefox – > Desenvolvedor Web – > Firefox OS Simulator
firefox_opensimulator

Se você tiver isso na sua tela, metade do caminho foi andado.

NOTA: Caso você esteja clicando e nada acontece, reinicie seu Firefox, se isso não resolver, reinicie seu sistema operacional.

firefoxos_start

Agora só clicar no slider onde tem “Stopped” e o simulador vai abrir.

firefoxos_running

Criando o Hello World

Agora é a parte boa, crie um arquivo de HTML 5 simples igual a esse abaixo, basta copiar e colar.

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<meta charset="utf-8">
<title>Ola Mundo</title>
<style type="text/css">
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	width:320px;
	height: 480px;
	overflow: hidden;
}
h2 {
	display: block;
	position: absolute;
	top:80%;
	left:45%;
	font-size: 1.2em;
	font-family: 'Verdana';
}
#firefoxos {
	display: block;
    position: absolute;
    margin:0 auto;
    width:148px;
    height:153px;
    top:47%;
    left:47%;
    animation: firefoxos-spin 0.9s infinite linear;
}
@keyframes firefoxos-spin {
    from { transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { transform: rotate(360deg) scale(1) skew(0deg) translate(0px); }
}
</style>
</head>
 
<body>
	<div id="firefoxos"> <img src="firefoxos.png" alt=""> </div>
 
	<h2>Firefox OS Hello World</h2>
</body>
</html>

manifest.webapp

Assim como no iOS com o pslist, o Android com seu Android Manifest e o Adobe AIR com seu App description, o Firefox OS possui um arquivo que também define algumas caracteristicas de acesso, aparência, perfurmaria, o manifest.webapp.

Uma configuração básica para um Hello World, seria algo como mostra abaixo:

{
  "version": "1.0",
  "name": "Hello World",
  "launch_path": "index.html",
  "description": "Simples Hello World da App",
  "icons": {
    "16": "/icons/16.png",
    "32": "/icons/32.png",
    "48": "/icons/48.png",
    "64": "/icons/64.png",
    "128": "/icons/128.png"
  },
  "developer": {
    "name": "Igor Costa",
    "url": "http://www.igorcosta.com/palestras/cpbr6/foxhelloworld/"
  },
  "installs_allowed_from": ["*"],
  "default_locale": "en"
}

A URL é onde seu App vai ficar. Salve esse arquivo como manifest.webapp e chegou a hora de testar.

Para testar no simulador, se você estiver no localhost, basta clicar em Abrir Diretório e apontar para o arquivo manifest.webapp.

firefoxosmanifest

Ponto final

E ai está o resultado final.

firefoxloop

Você agora vai ver que o Simulador fechou para abrir novamente e refletir as mudanças que você fez, se você está modificando só o HTML, nem precisa adicionar novamente, basta clicar em update.

Fácil não, agora o resto é com vocês.

[Atualização 13/03/2013]
A fundação Mozilla acaba de anunciar o novo simulador 3.0 para diversas plataformas. Veja mais aqui.

http://www.igorcosta.com/novo-simulador-3-firefox-os

Firefox OS/ Mobile

Firefox OS no Campus Party 2013

Firefox_mobile_mozilla

firefoxos

Durante o Campus Party 2013 a telefônica, juntamente com a fundação Mozilla estão organizando um concurso para desenvolvedores HTML.

Em resumo, o novo sistema operacional Firefox OS transforma seu smartphone em um web OS, onde todas as Apps são feitas em HTML/CSS/Javascript, você pode até criar uma versão do seu site para o sistema operacional, para saber mais como criar Apps em HTML para o Firefox OS eu sugiro que você visite os sites abaixo:

 

Durante o Campus Party quem tiver dúvidas sobre o Firefox OS e como montar o ambiente, podem me procurar que ajudarei.

Segue a release do concurso.

A Telefonica | VIVO, em parceria com a Mozilla, está promovendo na Campus Party SP um concurso de desenvolvimento de aplicativos para FIREFOX OS na Campus Party Brasil 2013.
Nessa versão, estamos contando com o apoio do Facebook tanto do ponto de vista técnico aos desenvolvedores quanto na premiação.
Além de Smartphones VIVO para os três primeiros lugares, o primeiro fará uma entrevista com engenheiros e conhecerá como é trabalhar no Facebook Brasil!
A inscrição começou a partir de 14/01 e pode ser feita preenchendo o formulário nesse link http://bit.ly/12zAH8p. A inscrição só é efetivada quando um e-mail de confirmação é enviado ao candidato.
Lembrando que somente podem participar desenvolvedores devidamente credenciados que irão participar da Campus Party Brasil 2013. Para mais informações o link dos termos do concurso é http://bit.ly/XIIlcc.