BB10/ HTML5 / CSS3/ Mobile

Criando seu primeiro App com BBUI.js e Webworks para BB10

bb10

Uffa! Quem acompanha no twitter, viu que passei uma maratona para criar um App do zero para a plataforma BB10 gastando aproximadamente 29 horas, por simples 2 motivos.

1 – Conhecer o workflow de desenvolvimento da plataforma

2 – Ganhar um device específico para desenvolvedor.

Ok, minha aventura começa na quinta-feira as 10 da manhã, primeiro passo foi conhecer bem o webworks um SDK específico para a plataforma Blackberry desde a versão 5.0 em diante. Por que não o Phonegap? Veja só; Basicamente o phonegap funciona com muita coisa do webworks, então ao invés de tercerizar a API eu partir direto para a plataforma específica, não é assim que tem que ser a cadeia de distribuição? Alô administradores!

Antes que você leia todo o post, esse video abaixo mostra o que vamos fazer até o final do post.

Documentação

Primeira coisa que notei e me senti em casa, documentação, como estava acostumado com as documentações da Adobe, elas não fogem, vasta e muito bem detalhada, inclusive tem suporte a tudo quanto é tipo de desenvolvimento não só para HTML. A documentação mais completa acima de todas, sem dúvida é a do Cascades, que se fosse comparar à outras plataformas, seria a plataforma oficial.

Porém, a blackberry deixa bem claro na página de desenvolvedores, ela ama todas as tecnologias de desenvolvimento e ela deixa bem claro em sua página para os desenvolvedores.

A documentação do webworks é basicamente o empacotador, já que 80% da API do webworks é puramente HTML5. Isso mesmo! Não tem formula mágica, adorei essa parte do desenvolvimento por que frisa justamente a singularidade de uma só API. Claro que é importante notar que há exceções como toda regra, por exemplo APIs que são identicas ao HTML5.

O que é igual a api do HTML5:

  • Geo Localização
  • Captura de Midia( camera apenas)
  • Camera
  • File ( estrutura de arquivos)
  • Persistência de arquivos
  • Cache
  • Aceleração (acelerometro)
  • SMS, Chamar telefone, E-mail
  • Alerta ( javascript:alert(‘mensagem’);
  • Esquemas de URI

O que é específico da plataforma e requer o webworks de fato:

  • BBM
  • Calendário
  • Sensores( Giroscópio, Gravidade, Magnetometro, aproxiamção)
  • Toast
  • Microfone
  • Identity (para identificação do dispositivo)
  • Agenda de contatos
  • Pagamento ( in-App purchase)
  • Systema como nível de bateria e etc.

 

Comunidade e colaboratividade

Ambas andam juntos é claro, e a decisão dela de usar o Github para expor suas APIs, SDK de forma aberta ao público, facilitou ainda mais o trajeto do desenvolvedor aos seus SDK. Tanto é que existem repositórios completos só para listar contribuições dos desenvolvedores espalhados pelo mundo.

O mais importante não é nem os SDKs da Blackberry e sim o Github, você facilmente faz amizade com quem está por trás do projeto e vira e mexe você até contribui para melhorias. Essa idéia de social + código, foi um casamento da raposa, muito bem bolada!

bbuijs

BBUI.js Toolkit para aparência das Apps

Você já ouviu falar do Twitter Bootstrap, JQuery Mobile, Sencha Touch, Enyo, certo? Então adicione a lista o BBUI.JS, ele funciona só para os dispositivos da Blackberry, já que todo seu sistema de eventos é voltado para eventos do próprio navegador, se você tiver tempo, pode mudar a aparência, mais isso ai é meio que matar o Chinês achando que é barata. Sacô?!

É basicamente Javascript e extensívo uso do atributo data-bb-* . É um ponto de partida para você começar a criar algo que respeite o guia de interface da plataforma, só que não fique na regra, você pode mudar e usar o que você quiser.

[pullquote align=”left”]Você pode continuar usando seu framework preferido, lembre-se só da experiência mobile![/pullquote]

A parte de transições de telas built-in é bem legal, com vários efeitos pré fabricados e o mais interessante notar é a parte de navegação entre as telas, lembra muito o navigator do Flex Mobile; Só que usa de fato um Array simples para fazer o cast das telas pelo atributo data-bb-type=”screen”.

Na página do projeto, você encontra mais detalhes da documentação, como inicializar as coisas. Eu quero focar mais na parte Hello World! Quando você terminar de ler o post já sair com um App na mão.

Criando um App de demonstração

[note color=”#FFCC00″]No próprio site do Webworks, você encontra um guia passo-a-passo em inglês mais completo que este, se você quiser saber mais sobre como iniciar com o pé direito, vá direto ao site. http://developer.blackberry.com/html5/[/note]

Primeiro passo

Registre-se como desenvolvedor, é 0800, grátis, oba-oba, FREE, Paga não, Passe-livre.

Segundo passo

Requisite o acesso as chaves para assinar sua App, sem elas a festa não acontece. Elas funcionam para qualquer SDK que você vier usar.

[pullquote align=”left”]Dica importante: Lembre-se do PIN que você fornecer, esse PIN é uma espécie de RG.[/pullquote]

As chaves são obrigatória, elas tem um propósito: Assinar suas obras de arte “Seus Apps” para distribuição e teste.

Terceiro passo

Baixe o WebWorks, SDK Aqui. http://developer.blackberry.com/html5/download/ Dica( use a versão Gold, que é o botãozinho cor de ouro na página).
Para testes e desenvolvimento, vamos usar o Ripple Emulator, que é uma ferramenta para testes e emulação do seu HTML5 para dispositivos móveis, ele foi criado pela Blackberry (a.k.a RIM), e é hoje bastante utilizado.

[pullquote align=”left”]Siga as instruções de instalar o Ripple Emulator no Google Chrome.[/pullquote] Supondo que deu tudo certo nas suas instalações, siga as seguintes instruções:
Baixe as seguintes bibliotecas, elas são necessárias para iniciar o toolkit e acessar tags do HTML de forma mais fácil, ZeptoJS sem dúvida é a melhor para isso no ambito mobile, já que ele é leve, bem leve.

E quanto a ferramenta de desenvolvimento? Bom, use a que você achar melhor para editar páginas em HTML5, CSS3, Javascript. Eu gosto do Sublime Text. Mas não se apegue a esse detalhe, vai de sua escolha e ele não influencia o work-flow para esse exemplo.
Estrutura de uma App

É bem simples, basta ter um arquivo config.xml que é a espinha do projeto e um arquivo html para você indexar.

Vamos fazer o seguinte, veja um exemplo pronto de um arquivo de configuração de um projeto para criá-lo do zero.

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0"
        id="com.apps.suaApp">
 
  <name>To-do-List</name>
  <content src="index.html" />
  <author rim:copyright="2013"
            href="http://www.igorcosta.com/"
            email = "igorcosta@gmail.com">Igor Costa</author>
 
 
  <description>Simples App com lista de tarefas, crie listas e tarefas especificas</description>
 
  <license href="http://www.apache.org/licenses/LICENSE-2.0">
        Licença caso sua App se aplique
  </license>
 
  <access uri="*" subdomains="true" />
  <access subdomains="true" uri="file:///store/home" />
  <access subdomains="true" uri="file:///SDCard" />
  <access subdomains="true" uri="local:///" />
 
  <feature id="blackberry.app">
        <param name="orientation" value="portrait" />
  </feature>
  <feature id="blackberry.app.event"/>
  <feature id="blackberry.system.event" />
  <feature id="blackberry.connection" />
  <feature id="blackberry.ui.toast" />
  <feature id="blackberry.ui.dialog" />
  <feature id="blackberry.io" />
  <feature id="blackberry.io.file" required="true" version="1.0.0.0" />
  <feature id="blackberry.utils"   required="true" version="1.0.0.0" />
  <feature id="blackberry.io.dir"  required="true" version="1.0.0.0" />
 
    <rim:splash src="splash-portrait-768x1280.png" />
    <rim:splash src="splash-landscape-1280x768.png" />
 
 
    <!-- para mais permissões visite 
    http://developer.blackberry.com/html5/documentation/rim_permit_element.html
	-->
    <rim:permissions>
        <rim:permit>access_location_services</rim:permit>
        <rim:permit>use_camera</rim:permit>
        <rim:permit>access_shared</rim:permit>
    </rim:permissions>
 
 
 </widget>

Salve esse arquivo com o nome config.xml em um diretório seu local, por exemplo localhost/bbui_app_exemplo
No mesmo diretório crie um arquivo de html, index.html como eu configurei ali acima para chamar logo que iniciar o arquivo index.html na tag content.

O arquivo config é bem simples e quase auto explicatório o que cada tag faz. A única coisa que você precisa ter em mente é que se você quer acessar a internet em domínios diferentes, a tag access te ajuda nisso, lembre-se de incluir sub-dominios caso exista.

Quarto passo

Criar a app propriamente. Quando você instala o Ripple Emulator no Chrome você pode usar a biblioteca do webworks direto na sua App, sem precisar colocar no diretório, já que você vai utiliza-lo para empacotar a App, basta fazer uma referência ao script dessa forma aqui.

<script type="text/javascript" src="local:///chrome/webworks.js"></script>

A estrutura do App ficou dessa forma.
[pullquote align=”left”]bbuijs-estrutura[/pullquote]

Para economizar tempo, use esse template que eu fiz do arquivo index.html, assim fica mais fácil de você replicar em sua própria máquina.

<!doctype html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="format-detection" content="telephone=no" />
	  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
	<title>Sua App</title>
 
	<!-- Estilos -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/bbui.css" />
 
	<!-- Javascript -->
	<script type="text/javascript" src="js/lib/zepto.js"></script>
	<script type="text/javascript" src="js/lib/bbui.js"></script>
    <script type="text/javascript" src="local:///chrome/webworks.js"></script>
 
	</head>
 
	<body>
		<div>
 
		</div>
	</body>
</html>

Ok, estamos prontos para começar a criar o App, mais que App? Para o própsito desse post vamos fazer um App simples, uma TO-DO-LIST, carregamos de um banco de dados local usando Web Storage, editamos e adicionamos itens.

Antes de criar qualquer coisa, deixa eu explicar mais ou menos como funciona o BBUIjs.
bbuijs-estrutura2

Ok, o BBUI.js além do nome ser sugestivo ele já possui um esquema de navegação no próprio toolkit, como você pode ver ai na imagem acima, basicamente o que você precisar em termos de interface básica o próprio toolkit oferece, porém se você quer algo mais complexo, sugiro utilizar outro, ele atende a uma única e exclusiva vantagem de ter a aparência nativa de um App. Quando você termina ela fica tão bem polida que parece muito com um App nativo.

O navegador entre telas funciona muito bem, e já possui efeitos de transição entre elas como Fade,Slide Left/Right,Slide Up/Down. Se você quiser um efeito de carta (flip) por exemplo, ai você vai ter que implementar. Como ele não atende exclusivamente apenas ao BB10, é bom notar algumas particularidades. Esses detalhes você pode conferir no Wiki do projeto.

Para inicializar o toolkit, você precisa escutar o evento webworksready, quando estiver pronto você pode iniciar com esses parametros.

            var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) {
 
                if (webworksreadyFired) return;
                webworksreadyFired = true;
                app.initialize(); //phonegap
 
                bb.init({actionBarDark: true,
                        controlsDark: true, // controles são pretos ou brancos
                        listsDark: false, // usar uma lista escura
                        bb10ForPlayBook: false, // é para playbook ou não
                        highlightColor: '#00A8DF', // cor de alguns elementos
                        onscreenready : function(element,id,params){
                            // use essa função para criar algum argumento
                        },
                        ondomready : function(element,id,params){
                          // depois que o DOM da tela estiver pronto você pode disparar algum evento antes 
                         // da tela ficar pronta.
                        }
 
                        });
 
                 // Depois de iniciado, chame a tela principal do App.
                 bb.pushScreen('Main.html', 'MainScreen');
            }, false);

Quinto passo

bbuijs-app-estrutura

Vou adotar essa estrutura de navegação do App. Simples e direta.

Como é que se cria as telas? Basicamente por esquema de atributo, o toolkit basicamente usa o atributo data-bb-* para definir as coisas.

Crie os .html conforme mostra a imagem e defina o HTML de cada um deles da seguinte forma.

<div data-bb-type="screen" data-bb-indicator="true" data-bb-back-caption="Voltar">
 
</div>

Para navegar entre as telas basta eu usar o método pushScreen(‘pagina.html’,’idPagina’); Por dentro do toolkit ele faz um popScreen() da tela atual e retorna com a tela anterior.

Então aqui vai o código atual das páginas que tenho.

index.html

<!doctype html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta name="format-detection" content="telephone=no" />
	  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
	<title>Sua App</title>
 
	<!-- Estilos -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/bbui.css" />
 
	<!-- Javascript -->
	<script type="text/javascript" src="js/libs/zepto.js"></script>
	<script type="text/javascript" src="js/libs/bbui.js"></script>
    <script type="text/javascript" src="local:///chrome/webworks.js"></script>
    <script type="text/javascript">
            var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) {
 
                if (webworksreadyFired) return;
                webworksreadyFired = true;
                bb.init({actionBarDark: true,
                        controlsDark: true,
                        listsDark: false,
                        bb10ForPlayBook: false,
                        highlightColor: '#C82C29',
                        onscreenready : function(element,id,params){
                        },
                        ondomready : function(element,id,params){
                        }
 
                        });
                 bb.pushScreen('Main.html', 'MainScreen');
            }, false);
 
        </script>          
	</head>
 
	<body>
		<div>
 
		</div>
	</body>
</html>

Tela Main.html

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Principal"></div>
 
	 <ul>
	     <li><a href="#" onClick="bb.pushScreen('Listas.html','ListaScreen')"  title=""> ir para Lista de Tarefas</a></li>
	     <li> <a href="#" onClick="bb.pushScreen('Sobre.html','SobreScreen')"  title=""> ir para Sobre Tela</a> </li>
	     <li><a href="#" onClick="bb.pushScreen('Tarefas.html','ListaScreen')"  title="">ir para Tarefa</a></li>
	 </ul> 
</div>

Telas Sobre.html

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Tarefas" data-bb-back-caption="Voltar"></div>
</div>

Telas Listas e Tarefas possuem o mesmo código fonte

<div data-bb-type="screen" data-bb-indicator="true">
	<div data-bb-type="title" data-bb-caption="Tarefas" data-bb-back-caption="Voltar"></div>
 
	<div data-bb-type="image-list" data-bb-images="none" data-bb-style="arrowlist">
		 <div data-bb-type="header">Lista de tarefas para fazer</div>
		 <div data-bb-type="item"  data-bb-accent-text="Strength" data-bb-title="Item 01">Descrição</div>
	</div>
</div>

Ok, interface montada, veja o que você tem até agora.

Sexto passo

Já que você tem montado as telas, hora de começar a programa-las, para persistência de banco de dados eu fiz uma classe em Javascript de forma literal, igual como você faz na declaração de um objeto JSON.

/* Copyright 2013 Igor Costa
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this db except in compliance with the License.
 You may obtain a copy of the License at
 
   http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
 
Simple class for WebStorage persistence, not big deal. Just for to-do-list demo
*/
var Db = {
	currentList:'',
	db : window.openDatabase('geba','0.1','Banco de dados simples para um App de to-do-list',2*1024*1024),
	listaSQL : 'CREATE TABLE IF NOT EXISTS listas (id  INTEGER,lista_nome TEXT NOT NULL, cor_lista TEXT NOT NULL DEFAULT "#f2f2f2",data_criada TEXT NOT NULL, PRIMARY KEY (id))',
	tarefasSQL: 'CREATE TABLE IF NOT EXISTS tarefas(id INTEGER,tarefa_nome  TEXT,completa  REAL,data_criada  TEXT,lista_id  INTEGER NOT NULL,PRIMARY KEY (id),FOREIGN KEY (lista_id) REFERENCES listas (id))',
	open : function () {
			try{
				if (window.openDatabase) {
					if(this.db != null){
						this.db.transaction(
				        function (transaction) {
				        	var demoData = new Date();
				        	// preload de 1 lista e 1 tarefa
				        	transaction.executeSql(Db.listaSQL, [], this.onSucess, this.errorHandler);
				        	transaction.executeSql(Db.tarefasSQL, [], this.onSucess, this.errorHandler);
				        	//To insert new records in the first demo, uncomment this than comment again.
				        	//transaction.executeSql('INSERT INTO listas (id,lista_nome,cor_lista,data_criada) VALUES (1,"Lista Demo","#aa0000","'+demoData+'")',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Primeira tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Segunda tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        	//transaction.executeSql('INSERT INTO tarefas (tarefa_nome,completa,data_criada,lista_id) VALUES ("Terceira tarefa demo","true","'+demoData+'",1)',[],Db.onSucess, Db.errorHandler);
				        });
				    }	
				}else{
					var msgSupport = "Doesn't support WebStorage";
					alert(msgSupport);
					console.log(msgSupport);
				}
 
			}catch(e){
					printMsg();
			}
	},
	close : function (){
 
	},
	executeSQL : function (sql){
 
	},
	editRecord : function (object){
 
	},
	deleteTarefa : function (id){
		try{
 
			this.db.transaction(
				        function (transaction) {
 
				        	transaction.executeSql('DELETE FROM tarefas WHERE id=?',[id], Db.onDeleteTarefaSucess, Db.errorHandler);
				        });	
 
 
		}catch(e){
			printMsg();
		}
	},
	onDeleteTarefaSucess : function (e,result){
			document.getElementById('myTarefasList').refresh();
			Db.getTarefas(Db.currentList);
			Db.toast('Tarefa Apagada');
 
	},
	addNewLista : function (name){
		try{
 
			this.db.transaction(
				        function (transaction) {
				        var demoData = new Date();	
				        	transaction.executeSql('INSERT INTO listas (lista_nome,cor_lista,data_criada) VALUES (?,"#aa0000","'+demoData+'")',[name],Db.onSucess, Db.errorHandler);
				        });	
 
			bb.pushScreen('Listas.html','ListaScreen');
		}catch(e){
			printMsg();
		}			
	},
	getListas : function (){
		try{
			this.db.transaction(
				        function (transaction) {
				        	transaction.executeSql('SELECT * from listas',[],Db.onListaSucess, Db.errorHandler);
				        });	
 
		}catch(e){
			printMsg();
		}
	},
	onListaSucess : function (e,result){
				var response = [];
				var len = result.rows.length, i;
				var render;
				  for (i = 0; i < len; i++) {
				   var item = result.rows.item(i);
 
				         render =  document.createElement('div');
					     render.setAttribute('data-bb-type','item');
					     render.setAttribute('data-bb-title',item.lista_nome);
					     render.setAttribute('data-itemid',item.id);
					     render.innerHTML = "Total de tarefas " +item.total;
					     render.setAttribute('data-bb-img','imgs/tag.png');
					     render.addEventListener('click',function(){
					     	bb.pushScreen('Tarefas.html','TarefasScreen',{listaid:$(this).data('itemid')});
					     });
					     response.push(render);
 
				  }document.getElementById('myLists').refresh(response);// voodoo!
	}
	,
	addNewTarefa : function (name){
		try{
 
			this.db.transaction(
				        function (transaction) {
				        var demoData = new Date();	
				        	transaction.executeSql('INSERT INTO tarefas (tarefa_nome,data_criada,lista_id) VALUES (?,"'+demoData+'",'+Db.currentList+')',[name],Db.onSucess, Db.errorHandler);
				        });	
 
			bb.pushScreen('Tarefas.html','TarefasScreen',{listaid:Db.currentList});
		}catch(e){
			printMsg();
		}			
	},
	getTarefas : function (id){
		try{
			Db.currentList = id;
			this.db.transaction(
				        function (transaction) {	
				        	transaction.executeSql('SELECT * FROM tarefas WHERE lista_id = ?',[id],Db.onTarefaSucess, Db.errorHandler);
				        });	
 
 
		}catch(e){
			printMsg();
		}
	},
	onTarefaSucess : function (e,result){
		var response = [];
				var len = result.rows.length, i;
				var render;
				  for (i = 0; i < len; i++) {
				   var item = result.rows.item(i);
				         render =  document.createElement('div');
					     render.setAttribute('data-bb-type','item');
					     render.setAttribute('data-bb-title',item.tarefa_nome);
					     render.setAttribute('data-itemId',item.id);
					     render.innerHTML = "Total de tarefas " +item.data_criada;
					     render.setAttribute('data-bb-img','imgs/bookmark.png');
					     $(render).swipeRight(function (){Db.deleteTarefa(item.id);});
					     response.push(render);
 
				  }document.getElementById('myTarefasList').refresh(response);// voodoo!
	},
	errorHandler: function (transaction, error){
		console.log(error);
		 	if (error.code==1){
		 	} else {
			    console.log('Oops.  Error was  '+error.message+' (Code '+error.code+')');
		 	}
		    return false;
	},
	onSucess: function(e,result){
	 return result;
	},
	printMsg : function (){
			var msg = "Can't open Database" + ' Error: ' + e.error;
			alert(msg);
			console.log(msg);
	},
	toast : function (msg, timeout){
 
		  if(typeof timeout == 'undefined') {
		    timeout = 1000;
		  }
 
		  // toast options
		  options = {
		    timeout: timeout
		  };
 
		  // display the toast message
		  toastId = blackberry.ui.toast.show(msg, options);
	}
}

Como cada função é bem específica para o exemplo,à medida que eu for implementando os métodos eu vou colocando na classe.

O banco de dados é hiper simples, veja a estrutura.

db-todolist

E aqui está o script para você executar.

CREATE TABLE IF NOT EXISTS "listas" (
"id"  INTEGER,
"lista_nome"  TEXT NOT NULL,
"data_criada"  TEXT NOT NULL,
PRIMARY KEY ("id")
);
CREATE TABLE IF NOT EXISTS "tarefas" (
"id"  INTEGER,
"tarefa_nome"  TEXT,
"cor_tarefa" TEXT,
"completa"  REAL,
"data_criada"  TEXT,
"lista_id"  INTEGER,
PRIMARY KEY ("id"),
CONSTRAINT "lista_id_fk" FOREIGN KEY ("lista_id") REFERENCES "listas" ("id") ON DELETE RESTRICT ON UPDATE RESTRICT
);

Em fim, até ai já fizemos a persistência, falta agora só navegar, e para simplificar, eu criei uma classezinha em literal para fazer o trabalho.

var navigatorController =  {
	openMain : function (){
		 var webworksreadyFired = false;
            document.addEventListener('webworksready', function(e) { 
               if (webworksreadyFired) return;
                webworksreadyFired = true;
                bb.init({actionBarDark: true,
                        controlsDark: false,
                        listsDark: false,
                        bb10ForPlayBook: false,
                        highlightColor: '#C82C29',
                        onscreenready : function(element,id,params){
                        	if(id == "ListaScreen")
                        	{
                        		Db.getListas();
                        	}
                        	if(id == "TarefasScreen")
                        	{
                        		 Db.getTarefas(params.listaid);
                        	}
                        	if(id == 'NewTarefaScreen')
                        	{
 
                        	}
                        },
                        ondomready : function(element,id,params){
 
                        }
 
                        });
                bb.pushScreen('Main.html', 'MainScreen');
				Db.open();
            }, false);
	},
	openSobre : function (){
		bb.pushScreen('Sobre.html','SobreScreen');
	},
	openConfig : function (){
		bb.pushScreen('Config.html','ConfigScreen');
	},
	openListas : function (){
		bb.pushScreen('Listas.html','ListaScreen');
	},
	newLista : function (){
 
			bb.pushScreen('NovaLista.html','NewListScreen');
	},
	saveNewLista : function (){
			Db.addNewLista($('#listaInputName').val());
 
	},
	newTarefa : function (){
			bb.pushScreen('NovaTarefa.html','NewTarefaScreen',{mode:true});
	},
	saveNewTarefa : function (){
			Db.addNewTarefa($('#tarefaInputName').val());
	}
}

Pontos negativos

Coloque em prática seus conhecimentos em Javascript e CSS3, por que muita coisa você vai precisar criar do zero, alguns componentes como o datePicker por exemplo ou um Numeric Stepper, algo como um Slider horizontal de imagens, Item renders para itens da lista, nada que não seja possível, vai dar só mais um pouco de trabalho e não fica com aquela coisa de out-of-the-box (tudo pronto).

O próprio toolkit tem muito código da própria comunidade como por exemplo o iScroll que foi utilizado para navegar entre as telas e nas listas. O legal é você poder hacker o código.

A performance não é 100%, eu testei a geração de efeitos com o context do Canvas e realmente leva-se de 2 a 3 segundos para aplicar um efeito a uma imagem, coisa que em um desktop no Chrome por exemplo é instantaneo, provavelmente seja a versão do webkit que esteja sendo utilziada, acredito que isso só o tempo pode dizer se eles vão melhorar esse item específico ou não.

Condeirações finais

É um pouco trabalhoso usar o BBUIJS, mais o acabamento final do projeto, é fantástico, por que você tem a exata idéia de estar criando um App com aparência nativa do sistema OS e isso meu amigo leitor, é fantástico. Porém nada lhe impede de usar outros toolkits de inicalização.

Código fonte disponível no Github

O código fonte dessa App você pode fazer o Fork no Github, a licença do projeto é via licença Apache.

https://github.com/igorcosta/bbuijs-todolist-demo

Dicas/ HTML5 / CSS3/ ios/ iPad/ Mobile/ Pessoal

Produtividade no desenvolvimento de Apps

mobile_device_image3

Exatos 20 dias que estou trabalhando incansavelmente em jogos para celulares, e acredito que daqui alguns dias terei um primeiro release. O importante é notar a produtividade de desenvolvimento de um App para dispositivos móveis, já que existe farta oferta de players, dificil é ficar fora de todas as opções.
Produtividade no desenvolvimento

Tem IDE que faz isso fácil, por exemplo quem usa o Flash, Flex, Actionscript pode notar que você faz tudo em uma rápida interface gráfica, adotando algumas caracteristicas que seu app irá pedir ao aparelho e até mesmo assinar para distribuir no dispositivo.

Eu não gosto muito dessa produtividade assim tão dada, já que é fácil perceber alguns outputs que o console dá quando está gerando algo para você, eu gosto mesmo é de ver a telinha do console do DOS rodando o comando que digitei, por que eu tenho controle daquilo que eu fiz.

Porém, cada qual com seu gosto, dos males os piores, eu fiz um teste rápido como é o processo de empacotar e testar o App no aparelho usando o PhoneGap(Apache Cordova).

As plataformas que eu testei foram essas: iOS (iphone/ipad retina), Android, Blackberry Dev Alpha, Windows Phone.

Para iPhone/iPad eu gasto cada vez que eu vou testar no dispositivo uma média de 3 até 4 minutos para teste em cada sprint que eu faço.

Para Android eu gasto entre 30 segundos e 1 min e meio para testar no dispositivo, sempre a cada sprint que eu faço.

Para Blackberry eu gasto exatos e travados 8 e 10 segundos para isso, novamente a cada sprint separado que eu faço para plataforma.

Para o Windows Phone eu gasto entre 12 e 15 segundos para fazer o empacotamento e teste no dispositivo.

Ok, eu vi que eu gastava um bom tempo em cada sprint que eu fazia que são de 1 em 1 hora, ou seja Eu perco uma média de ~40 minutos empacotando e testando no dispositivo. Precisava rápido mudar isso e abandonar alguns hábitos e automatizar tudo.

 

Um só código

Ao contrário do que você pensa, o Phonegap não garante um só código para N plataformas, o que ele garante é uma só API para N plataformas, é ai que eu vejo quão redondo eu estava nessa hora, veja bem, cada plataforma possui suas regras, desde acesso a dominios estritos, acesso a recursos e arquivos cada um trabalha de uma maneira diferente para um propósito similar.

[pullquote align=”left”]Como assim de maneira diferente para um propósito similar?[/pullquote]

É que quando você está trabalhando com arquivos locais por exemplo, o iOS tem sua própria caixinha de areia, então requer que o Phonegap gere um arquivo cordova-ios.js e  o Blackberry possui também sua própria caixinha de areia e também gera um arquivo cordova-bb.js específico para a plataforma. Viu só? É por esse motivo que o Phonegap garante uma só API, só que se você é organizado, você não quer que o arquivo cordova-bb.js caia no pacote .app para o iPhone ou vice-versa.

Embora existam técnicas em javascript para testar qual plataforma está rodando e incluir no código html a biblioteca específica, você ainda está travado com o problema e precisa resolver isso. Como? ANT Scripts.
ANT Scripts

Criei um script em ANT para melhorar esse empacotamento e gerar um deploy para todas as 3 plataformas separando os arquivos correspondentes do cordova para cada um. Eu garanto que publico ele aqui em um futuro próximo.
IDE que estou utilizando para desenvolver

SublimeText. Como são jogos em HTML e usam bastante CSS3, Javascript, eu inseri uma série de snippets para melhorar a produtividade ainda mais e é dificil largálo, já que é simples de usar.

Versionamento

É de prache e necessário, eu uso o Git junto com minha conta no Dropbox, eu até já expliquei aqui no site como usar ambos. E para cada release que eu faço para testar nos dispositivos eu também guardo uma cópia separada do arquivo.

Para mim essa foi a melhor configuração que achei para minhas necessidades e eu ainda não reduzir muito o tempo perdido para testar, ainda gasto uma média de 10 minutos para esperar o ANT gerar todos eles, embora eu aproveite esse tempo para tomar um café, que por sinal está me esperando ali. Deixa eu ir!

 

Conte-me como está sendo sua experiência.

HTML 5/ HTML5 / CSS3/ ios/ iPad/ Mobile/ Tablets

5 segredos para optimizar seu CSS para dispositivos móveis

css3-markup

Eu estou começando a ter uma relação amigável com o CSS à medida que eu vou me convencendo que sem ele é impossível ter algo plausível de uso em dispositivos móveis.

A grosso modo você olha para o CSS e pensa, há é molezinha, mel na chupeta, pegar um framework pronto e dizer, Olha o que eu fiz! É absolutamente relutante quando se diz à respeito DIY.

Eu começo pelo fato que tem tanta opção de frameworks em javascript, frameworks responsivos que você friamente pode não re-inventar a roda, mais no fundo você dificilmente vai entender por completo se você não estudar o que eles fazem.

Pois bem, juntei abaixo 10 segredos que eu achei no CSS que são bem específicos para dispositivos móveis, seja para adaptar ao phonegap ou ao firefox OS, você pode usar essas técnicas e não passar pelos problemas que eu passei.

Claro que nem todos os segredos pode ser assim um SEGREDOOO para alguns leitores, o importante é manter a descrição.

 

1- Limpando a bancada (Reset)

Antes de começar qualquer coisa em HTML, você precisa se normalizar, é igual a mãe mandando você arrumar o quarto, ou o mecânico chefe pedindo para você limpar a bagunça no final do expediente.
Trabalhar com CSS para N plataformas requer esse sacrifício, existe o normalizecss que é um pouco mais amplo, envolvendo desktop.

Eu prefiro a seguinte receita, limpe tudo antes de começar e me permita fazer as coisas do meu jeito. E aqui é a minha solução.

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;
        overflow: hidden;
}

Quando você olha para cima, vê um tanto de tag sendo atribuído margens, espaçamentos, tamanho de fontes, alinhamentos, tudo isso faz parte, o mais importante de todos ali é a respeito do font-size, deixando a fonte sempre em um tamanho plausível para ajustes no que se diz respeito a telas de baixa, media e alta densidades.

2 – Media Queries

A galera menciona isso como design responsivo, tem o flexbox que está vindo. Eu chamo media queries particularmente de divisor de águas; É o santo graal para criar designs que respondem ao tamanho da tela e assim deixar qualquer usuário feliz.
Veja um exemplo típico abaixo:

Só que media queries possue mais e mais opções do que um simples layout fluido, o principal papel não é só detectar tamanhos mais densidades em telas, como em terra de mobilidade isso é um assunto amplamente diferente, fica difícil adaptar só ao tamanho da tela do usuário, existe muito terreno para ser explorado, o exemplo acima, o código fica assim:

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=0.75, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>  
<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;
	overflow: hidden;
}
h2, h3, h4, p {
	color: #fff;
	font-family: sans-serif;
}
#container {
	width: 100%;
	display: inline-block;
}
.caixa {
	width:16.5%;
	height: 100px;
	text-align: center;
	float:left;
	display: block;
	overflow: hidden;
	background-color: #0F9ED8;
	padding-left:20px;
	padding-right:20px;
	margin:5px;
}
/* para dispositivos de baixa densidade */
@media screen and (max-width : 320px) and (max-height: 480px){
body {
	transform:none;
	transform:translate3d(0,0,0);
}
.caixa {
	width:100%;
	background-color: #07508A;
	margin:0 auto;
	margin-bottom: 5px;
}
h2, h3, h4, p { 
	font-size: 22px;
}
}
/* para dispositivos de média densidade */
@media screen and (min-width:480px ) and (min-height: 800px){
body {
	/* brincando um pouco de 3D */
		transform:translate3d(0,0,0);
		transform-style: preserve-3d;
		transform-origin:30% 100%;
		transform-position: top right;
		transform: perspective(700px) rotateX(30deg) rotateY(30deg) rotateZ(-5deg);
}
h2,h3,h4,p {
	color:#000;
	font-size: 36px;
}
.caixa {
	width: 100%;
	margin:0 auto;
	margin-bottom: 5px;
}
}
</style>
</head>
 
<body>
		<div id="container">
				<div class="caixa">
					<h2>Caixa 1</h2>
				</div>
				<div class="caixa">
					<h2>Caixa 2</h2>
				</div>
				<div class="caixa">
					<h2>Caixa 3</h2>
				</div>
				<div class="caixa">
					<h2>Caixa 4</h2>
				</div>
		</div>
</body>
</html>

3 – Tenha cuidado ao usar animações em puro CSS3

É bacana e tal, vale a pena, mas sempre tente colocar a animação para ser executada na GPU do aparelho, caso contrário você vai arranjar uma dúzia de usuários insatisfeitos com sua App por que consome muita bateria e processamento.

Embora a relação da animação seja singular com o HTML, ela requerer um tanto de atenção e para isso eu sugiro usar o [highlight bg=”#f91018″ color=”#000000″]translate3d:(0,0,0)[/highlight]. e forçar sua App a mostrar a animação na GPU, seja de um simples scroll de lista até efeitos de transição.

Por exemplo, digamos que você quer mostrar um alerta animado em sua App, da seguinte forma.

O Código para esse exemplo é esse aqui:

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=0.75, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>  
<title>CSS3 Animação</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;
	overflow: hidden;
 
}
/* para dispositivos de média densidade */
@media screen and (min-width:480px ) and (max-width: 800px){
 
.alerta{
	position: absolute;
	z-index: 999;
	min-width: 100%;
	min-height: 100%;
	background:rgba(0,0,0,0.8);
}
@keyframes animar-alerta {
    from {
        top:-100px;
    }
    to {
       top:30%;
    }
}
#painel {
	display: block;
	position: absolute;
	margin:auto;
	top:30%;
	left:20%;
	width:60%;
	height: 200px;
	background: rgba(255,255,255,1);
	color: #100;
	animation: animar-alerta 0.8s ease-out;
	transform:translate3d(0,0,0);
	font-family:fantasy;
}
#painel span {
	display: block;
	width:100%;
	padding:5px;
	background-image: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%);
	color:#000;
}
#painel p {
	text-align: center;
	width: 100%;
	padding-top: 30px;
	margin:auto;
}
.button {
	padding:15px;
	background-image: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%);
	width: 200px;
	height: 44px;
	display: block;
	margin:auto;
	position: absolute;
	top:50%;
	left:20%;
}
 
}
</style>
</head>
 
<body>
	<div class="alerta">
		<div id="painel">
			<span>Confirma?</span>
 
			<p>Tem certeza que deseja excluir item?</p>
			<p><button id="btn_OK">OK</button></p>
		</div>
	</div>
	<a href="#" class="button">Chamar alerta?</a>
</body>
</html>

4 – Criando objetos para telas Retina

Se você cria Apps, você tem que criar primeiro para tela de Retina, sabe aqueles jogos que você ver “HD”, significa que ali os gráficos possuem 264PPI ou seja serrilhados só nos xing-lings.

Puramente em CSS você não tem problema algum, contanto que você tome alguns cuidados quando for colocar imagens, já que esse é o gargalo. Novamente, use o media-queries para especificar uma imagem bem nítida para esses dispositivos.

#image { background: url(image.png); }
 
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url(image@2x.png); background-size: 50%; }
}

5 – Inputs com estilo

Segundo o guia de interfaces da Apple, qualquer input para o usuário requer que tenha no mínimo 44px. Eu costumo dizer que a Apple pensou em mim também quando escreveu esse guia, já que eu tenho dedo de urso e não quero perder tempo tentando advinhar o que escrevi em um campo ou brincando de gato e rato, tentando colocar o foco no campo.

É engraçado que você pode usar seletores específicos para cada campo do formulário e assim aplicar determinadas ações em campos diferentes, igual como o Twitter bootstrap faz para determinados campos em um formulário.

Os seletores são esses:

input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email], {
   /* aplicar estilos aqui... */
}

Veja abaixo um rápido exemplo que eu fiz usando o emulador do Android para simular um formulário com o estilo e sem estilo.

O código com estilo que é o segundo exemplo mostrado, pode ser visto aqui abaixo.

 
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,maximum-scale=1, minimum-scale=1"/>  
<title>CSS3 Animação</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;
	overflow: hidden;
 
}
input[type="text"]{
	min-height: 44px;
	border:none;
}
input[type=checkbox],
 input[type=radio] {
   display: inline-block;
   font-size: 15px;
   line-height: 1em;
   margin: 0 0.25em 0 0;
   padding: 0;
   width: 1.25em;
   height: 1.25em;
   -webkit-border-radius: 0.25em;
   vertical-align: text-top;
 }
select{
	width: 100%;
}
 input[type=radio] {
    -webkit-border-radius: 2em; /* Make radios round */
  }
 form {
 	font-family: fantasy;
 	display: block;
 	font-size: 22px;
 	margin:10px;
 }
 div, label {
 	width: 100%;
 	display: block;
 	padding-top: 10px;
 }
 textarea {
 	width: 98%;
 }
</style>
</head>
 
<body>
	<form action="#" method="post">
		<div>
			<label for="name">Digite seu nome:</label>
			<input type="text" name="name" id="name" value="" tabindex="1" />
		</div>
 
		<div>
			<h4>Qual seu sexo?</h4>
			<div>
			<label for="radio-choice-1">Masculino</label>
			<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
 
			<label for="radio-choice-2">Feminino</label>
			<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
			</div>
		</div>
 
		<div>
			<label for="select-choice">Cidade onde mora:</label>
			<select name="select-choice" id="select-choice">
				<option value="Choice 1">Petrolina</option>
				<option value="Choice 2">Recife</option>
				<option value="Choice 3">São Paulo</option>
			</select>
		</div>
 
		<div>
			<label for="textarea">Comentarios:</label>
			<textarea cols="13" rows="8" name="textarea" id="textarea"></textarea>
		</div>
 
		<div>
			<label for="checkbox">Concorda com os termos</label>
			<input type="checkbox" name="checkbox" id="checkbox" />
		</div>
 
		<div>
			<input type="submit" value="Submit" />
		</div>
	</form>
</body>
</html>

5 – Minimizar o arquivo

Seja HTML ou CSS, o navegador sempre vai interpretar seus arquivos, diferente do compilado, ele quando interpretado demora alguns mili segundos ou até segundos para fazer efeito e ser visto, para evitar maior tempo para rendenizar, sempre minimize o arquivo, que é o processo de remover todos os espaços em branco necessário para diminuir o arquivo em tamanho.

O site Minify CSS, tem um motor para isso, se você quiser pode usar o Yahoo Compressor.

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!

Apache Cordova/ Mobile/ Phonegap

Obrigado Brasil, Diretório de desenvolvedores Phonegap

cordova_logo

phonegap_diretorio

Eu pedi e vocês atenderam, vocês são realmente fantásticos e gostam de colaborar, e esse post é para lhe agradecer desenvolvedor que acredita no potêncial do Phonegap e aplicações de padrão aberto como HTML/CSS e Javascript.

O Diretório de desenvolvedores Phonegap hoje conta com [highlight bg=”#DDFF99″ color=”#000000″] 607 [/highlight] registros entre pessoas e empresas e o Brasil saiu de [highlight bg=”#aa0000″ color=”#ffffff”] 8 [/highlight] desenvolvedores cadastrados para [highlight bg=”#ff9900″ color=”#000000″] 29 [/highlight], que é o atual status enquanto escrevo esse artigo.

Esse número pode aumentar, divulgue ao pessoal que você conhece, estude Phonegap, HTML, CSS, Javascript e começe a compartilhas suas idéias junto com seus amigos, empresas empregadoras, aceleradoras, vamos crescer.

 

Confira o Ranking :

[table style=”1″]
País N. Inscritos
Estados Unidos 123
India 79
Reino Unido 44
Brasil 29
Canadá 29
Itália 29
[/table]

Aproveite também e junte-se ao grupo PhoneGap Brasil para discutir e postar dúvidas.

Cadastre-se no diretório de desenvolvedores Phonegap

Grupo PhoneGap Brasil

[quote style=”2″]Obrigado!!!![/quote]
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

Adobe AIR 101/ AIR 1.0/ AIR 1.1/ AIR 2.0/ AIR 2.7/ AIR 3.0/ AIR Mobile/ Flash Player

Adobe AIR perde o foco para criar Apps para dispositivos móveis

air_2_lg.jpg.adimg.mw.138

A Adobe hoje atualizou o Flash Player e Adobe AIR Whitepapers, que é um documento público mostrando as intenções da empresa desde sua mudança de foco nos últimos 2 anos.

Hoje ela acredita que suas plataformas Flash Player/ Adobe AIR continuaram fortes na arquitetura atual e abandorá todos os esforços na criação da próxima versão do Actionscript Next e Flash Player Next, que possivelmente seriam o Actionscript 4.0 e o Flash Player 12.

Ela voltará seu foco em novas VM como o V8 por exemplo do Google Chrome ou o Webkit amplamente utilizado por vários fabricantes de navegadores.
Com essas novas atualizações dos documentos, houve Buzz e ainda vai ter, veja alguns destaques de pessoas importantes dentro da empresa, e suas visões em relação à plataforma.

Já que a regra vale a máxima, Uma imagem vale mais do que mil palavras, quanto mais uma declaração como essa.

adobe_airmobile

 

Sim, nós não estamos promovendo o AIR para criação de apps para smartphones. Eu concordo que o AIR é ótimo com o Starling e o Feathers, já que você tem uma velocidade quase nativa.

 

Essa foi uma das declarações feita por alguns dos evangelistas da Adobe, em especial o Lee no Google Plus e está disponível para quem quiser ler, que hoje lidera a parte de evangelismo para Jogos.

Não é polêmica a declaração, só reafirma que o compromisso da Adobe não é só manter o foco na plataforma Flash/AIR em sí, mas dar ênfase à outra parcela de desenvolvedores que adotam o padrão aberto.

Na mesma discussão Mike Chambers reforça que o foco da Adobe para plataforma Flash é Jogos.

adobe_airmobile2

 

 

Não é que você precisa ficar desesperado por que o suporte ao Adobe AIR vai sumir do mapa e você não vai mais conseguir criar Apps usando o Adobe AIR, só para você saber quando e como usar o AIR em suas Apps, mesmo usando ele embedado na sua App.
Essa ficará para história de como destruir um eco-sistema enorme de desenvolvedores para concorrentes.

frameworks/ HTML 5/ HTML5 / CSS3/ JQuery/ Mobile/ Phonegap/ Web 2.0

Os mitos do desenvolvimento Front-end com HTML, CSS e Javascript

openweb

Eu já havia comentado em outro post aqui no blog sobre os 10 mitos de que tecnologias web não eram tão boas para fazer sistemas. Hoje me deparei com os slides de uma apresentação do Zeno Rocha que traduz tudo aquilo que eu escrevi em texto em imagens e razões para você acreditar que a semântica web está forte e cheia de recursos, navegue pelos slides e veja a variedade de possibilidades.

Sem mencionar que nos slides faltou só as soluções da empresa Sencha e o SDK da Blackberry para dispositivos móveis o Webworks.

Os sdks e bibliotecas para desenvolvimento Web amadureceram tão rápido em pouco mais de 2 anos que eu nem imagino o que estará por vir daqui a 2 anos à frente.

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.