Apache Cordova/ ios/ iPad/ Mobile/ Phonegap/ Tablets

Apache Cordova, removendo os 300ms de delay entre o toque e o click

apache_cordova

Desenvolver apps Híbridas sem a ajuda de um framework que mitigue todas as particularidades nas plataformas é um caso de dependência de várias técnicas, se você está nesse campo à um bom tempo, sabe que essa tarefa as vezes depende muito de bibliotecas e pequenos scripts em Javascript para fazer funcionar de uma forma nativa.

Um dos problemas enfrentados é o famoso Delay dos 300ms, esse problema afeta tanto apps híbridas como as feitas em Titanium, Cordova, etc, como os “site-apps” nos navegadores.

Quando eu começei a criar um aplicativo chamado Gui Brasil em Cordova(Phonegap na época), 2012. Apresentava esse problema, dando uma aparência de lentidão e quebrado, coisa que tirava toda a experiência de se criar algo ao estilo nativo. Na época eu resolvi com algumas técnicas relacionadas a CSS, melhorou, mais não tanto quanto essa solução que vocês vão ver abaixo.

O FastClick resolve esse problema, especialmente relacionado ao errinho do web-kit em dispositivos que tenham navegadores que usam ele como base, assim como o Webkit(WebView) do Apache Cordova.

Antes de chamar qualquer biblioteca no Cordova, você deve esperar o evento “deviceReady”

Inclua o FastClick na dependência do seu projeto.

<script type='application/javascript' src='/path/to/fastclick.js'></script>

E em seguida inclua essa linha abaixo:

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

E como em um passe de mágica, sem precisar melhorar nada na performance, seu App já ganha de cara uns 10% até 20% de melhoria na responsividade do toque para a execução.

ios/ iPad/ Iphone/ Mobile/ Negócios/ Notícias/ Pessoal

92.6% do mercado de smartphone é Android ou iOS, só que nem tudo que reluz é ouro

smartphones
[quote style=”1″] De acordo com a Gartner, 92,6% dos smartphones vendidos no primeiro trimestre de 2013 eram Android ou iOS. Os outros sistemas têm participação ínfima: BlackBerry (3%), Windows Phone (2,9%) e Bada (0,7%). Os dados divulgados pela IDC não são muito diferentes, mas dão o terceiro lugar para o Windows Phone, que alcançou 3,2% de participação de mercado.
[/quote]

Porém, nem tudo que reluz é ouro, vender para smartphone só por que ele lidera a lista não quer dizer que aquela plataforma paga suas contas necessariamente. Existe um ponto flutuante entre a plataforma e o ecosistema que sustenta ela.

Sem dúvida, para minha realidade, eu ganho mais dinheiro na Apple Store do que vendendo Apps para o Android, eu costumo fazer mais Apps para Apple do que para Windows e costumo fazer mais Apps para Blackberry do que para a Nokia.

Dá para ganhar dinheiro principalmente com plataformas emergenciais, fomentando a classe C e D do mundo, o Firefox OS mesmo é minha aposta para ganhar dinheiro diretamente com o público final.

Como 99% do tempo fazendo Apps para terceiros lucracrem sobre usuários finais, você acaba não faturando tanto quanto seu cliente fatura, mas manter o cheque recebível mensalmente é outra história.

Desde que lançaram a moda de Smartphones em 2007 a quantidade de apps que criamos para clientes foram:

[table style=”1″]
Apple Android Blackberry
49 Apps 21 Apps 13 Apps
[/table]

Destas apps 80% são gratuitas e envolve campanhas publicitárias, mercado de publicação digital, 12% são games e 8% apps institucionais.

De todas elas, a mais lucrativa foi a Blackberry, Apple Store dá dinheiro, mas não tanto. O mercado de Android é saturado, ou você distribui a App de graça com propaganda ou nem dinheiro para um burger king você vai ter.

Fonte: http://www.gartner.com/newsroom/id/2482816

HTML5 / CSS3/ ios/ iPad

CSS3 específico para iPad Retina

css3

Existem aproximadamente 30 milhões de iPads retinas no mercado, e 9 andam visitando esse site. Esse post vai mais para quem cria soluções em CSS3, Javascript,etc. E a turma do design responsivo.

Enquanto você procura uma maneira ideal para distribuir seus gráficos para N densidades, o CSS3 pode te ajudar a recuar essa busca e transformar seu projeto em uma forma mais agradável.

@media only screen and (-webkit-min-device-pixel-ratio : 2), 
only screen and (min-device-pixel-ratio : 2) 
{ 
   #class_imagem{ background-image: url('../images/background-retina.png');
 }

Use media-queries especificando o pixel ratio do dispositivo, para telas retinas use 2, para Android Tablets use 1.5 e o Galaxy S3/4 use o fator 1.3

Gostou da dica? Faça sugestões com outras soluções que vocês tem encontrado por ai.

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.

ios/ iPad/ Iphone/ Mobile/ Negócios/ Notícias/ Phonegap

As plataformas preferidas do desenvolvedor Mobile esse ano e no próximo

mobile_war

Dizem que uma foto vale mais do que mil palavras, e uma foto mostrando um gráfico vale mais do que mil argumentos sem cabimentos.

Eu gosto de acreditar nesses fatos já que está ai com o tempo provando que é o que é.

grafico_mobile_2013

 

 

O gráfico acima, pertence a empresa AppCelerator, que faz uma pesquisa a cada quatro meses para medir a confiabilidade do desenvolvedor ao mercado e predicar onde o desenvolvedor está atento.

iOS e Android continuam sendo os mercados onde desenvolvedores utilizam suas habilidades para ganhar dinheiro. E um fato bem importante é que nesse relatório, o Google Nexus que é o Tablet do Google ganhou bastante na disparada para competir com o Tablet da Apple.

A Blackberry está cambaleando com seus 9% de preferência, perdendo para o estreante Windows Phone, que em 2013 será alvo de grande especulação na competição.

Veja na íntegra aqui o relatório.

AIR Mobile/ Android/ Apache Cordova/ ios/ iPad/ Iphone/ JQuery Mobile/ Phonegap/ Tablets

Apache Cordova vs Adobe AIR para dispositivos móveis

cordova_logo

É bom ter competitividade na esfera web, assim nasce projetos fantásticos que ajudam o desenvolvedor a criar soluções práticas e rápidas.
Este é o caso do Apache Cordova aka “Phonegap”, o Cordova tem surpreendido diversos desenvolvedores móveis, pela sua praticidade em acessar recursos nativos do aparelho para diferentes plataformas móveis, assim como o Adobe AIR o Apache Cordova te ajuda de uma maneira fácil acessar calendário, contato, notificações, alertas, vibrar, geolocalização, compasso e uma diversidade de novas funções built-in que vem no seu celular.

Depois de gastar um bom tempo estudando seu modelo, seu comportamento e como ele trabalha, decidi escrever um post sobre ele e compara-lo ao Adobe AIR, o que nesse caso eu tenho mais intimidade.

Assim como em qualquer tecnologia, você tem os pros e cons, acho que com isso você já tem uma noção maior do que usar e o que não usar, colocando em mente que cada caso é obrigatório analisar primeiro antes de decidir.

Apache Cordova

Pros:

  • Atinge 6 plataformas com uma só API
  • 90% de sua API já é built-in ( Vibration, BatteryLevel, Menu, Alertas, Calendário, Contatos)
  • Possibilita você criar suas extensões próprias com facilidade
  • Larga comunidade e alta frequência de builds.
  • Curva de aprendizagem muito rápida
  • Arquivo de instalação leve máx (4mb)
  • Performance de execução do App e efeitos de transição beira o nativo.
  • Interface pode ser feita em HTML/CSS/JS o que muito designer pode criar suas próprias Apps facilmente.
  • Componentes são criados e desacoplados em tempo de execução
  • Interfae é interpretada por um navegador interno WebKit

Cons:

  • Diversos frameworks para UI, faz você se perder em qual usar para seu projeto
  • Não tem suporte a HTTPS
  • Não suporta gestos por padrão, você tem que usar biblioteca externa para isso.
  • Ainda para dispositivos ios você tem que colocar o velho POG em ação para aceleração de hardware
  • Documentação é pobre de exemplos
  • Sem suporte a SQlite por padrão
  • Não suporta encriptação do sqlite
  • Suporta transferencia de dados em XML/JSON

 

Adobe AIR  3.5 para mobile

Pros:

  • Atinge apenas (Android 2.3.3+, ios 3.1+ e Blackberry Playbook)
  • Ciclo de vida de componentes baseado em eventos
  • Suporte a gestos por padrão
  • Suporta transferencia de arquivos em AMF/AMF3/JSON/XML
  • Suporta HTTPS/ SQLite/ Webcam/Audio e Video
  • Live stream de videos
  • Componentes já pré-fabricados usando o Flex Framework
  • Performance de 60fps quando usadas as classes Stage3D
  • Documentação extensa

Cons:

  • Arquivo de instalação ~10mb o que é grande para se transmitir via 3G
  • Interface é compilada e rendenizada
  • Suporta recursos nativos apenas se você extender com o ANE
  • Rendenização de texto é um pesadelo
  • Layout fluido para diversas telas diferentes é um POG gigantesco
  • Performance lenta quando se tem mais de 5 views
  • Ciclo de 24fps deixa qualquer celular com Android 2.3.3 lento
  • Não melhora o gerenciamento da bateria.

 

Claro que tem outros pros e cons de cada tecnologia, só que essas são as mais corriqueiras que você vai ver em grande parte dos casos quando for escolher.

E qual devo usar? Essa deve ser sua pergunta agora depois de ter lido os pros e cons. Minha resposta é vai depender de seu caso e o que você precisa fazer.

Um exemplo é, se você vai fazer jogos, eu lhe aconselho usar o Adobe AIR, já que a performance é melhor e muito mais fácil para criar jogos, agora se você vai fazer uma App para empresa que ela coleta informações de inventário, informações de cliente ou um App para registro de compras, o Apache Cordova é seu melhor parceiro.

Depois de duzias de Apps escritos, eu estou considerando o Apache Cordova como primeira opção e logo em seguida o Adobe AIR para boa parte dos Apps que escrevo diariamente.

Pergunto a você quais foram seus maiores problemas entre as duas plataformas?

Dicas/ ios/ iPad/ Iphone/ Pessoal

15 aplicativos necessários para desenvolvedores Web/Mobile que usam o Mac OSX

cocoa_cup

Recentemente, meu tempo gasto com desenvolvimento foi dividido entre duas plataformas, Windows e Mac OSX. O grande problema é se ambientar na nova plataforma, como no Windows eu tenho facilidade em montar toda as ferramentas necessárias para desenvolvimento, já que estou acostumado, no Mac OSX eu tive pouca dificuldade, já que boa parte dos softwares existentes no Windows tem para Mac OSX.

Uma dica importante é, atualize a memória do seu Mac ao menos com 4Gb de memória, eu uso os
Eu perguntei no twitter se alguém tinha algum link para me ajudar a montar o ambiente, como não tive resposta, decidir sair na busca e ir instalando aquilo que eu julguei necessário para montar um ambiente que atenda as minhas necessidades.

Compartilho com vocês essa lista de softwares necessários.

1 – Adobe Creative Suite CS6
– Adobe Flash
– Flash Builder 4.6
– Adobe Photoshop
– Adobe Fireworks
– Adobe Illustrator
2 – Eclipse IDE para Mac OSX

3 – MAMP para desenvolvimento Web com PHP

4 – Git OSX para controle de versão

5 – Dropbox para Mac OSX

6 – SublimeText

7 – XCode

8 – Free Memory cleaner

9 – CCleaner para Mac OSX

10 – Miro Video Converter

11 – FileZilla FTP

12 – Camtasia Studio

13 – Navicat Premium

14 – Google Chromium

15 – Não é bem Apps, mas frameworks que ajudam a criar AppsAndroid SDK, Corona SDK, TideSDK, PhoneGap

Um App adicional que isso é bem pessoal é o Things, um organizador de To-do-list. Baratinho e muito útil.

Se vocês tiverem outras ferramentas e que seja útil, deixe o link abaixo nos comentários.

AIR Mobile/ Blackberry/ Flex Mobile Framework/ iPad/ Iphone/ Negócios/ Notícias

Flex, Dinheiro e Mobile venha a ver no Campus Party 2012

campusparty2012

Fala meus queridos leitores. Como foi o mês de janeiro para vocês? Muita coisa bacana rolando na IDE, Git, celular?

Deixa eu te contar, hoje começa o Campus Party 2012. O maior evento da TI da América Latina, com muito nerd por metro quadrado já visto. Se bem que essa visão de Nerd já é ultrapassada, alias, lá você verá muito empreendedor jovem, cheios de idéias brilhantes para colaborar com o futuro do país. É assim que eu vejo o evento.

Esse ano dentre várias novidades, uma delas a minha favorita Michio Kaku, e também os 20G/s de conexão. Quem sabe um dia não temos uma conexão dessas por R$9,99??

O Campus Party mudou de lugar, agora está no pavilhão do Anhembi, o mesmo que acontece o Salão do Automóvel. Bem melhor mesmo, visto que é mais fácil de chegar de metrô ou taxi.

Ano passado eu palestrei lá, quem não viu, pode assistir novamente aqui. Passou-se o ano e o David me chamou para palestrar mais uma vez no evento. Eu aceitei o desafio e vou levar comigo 2 palestras.

No dia 10/02 será as duas palestras, a primeira sobre Flex 4.6 e os avanços no SDK, além de falar também um pouco da mudança para fundação Apache.

Adobe Flex 4.6: três plataformas e um só código fonte.

E a outra palestra tem mais a ver com ganhar dinheiro no mundo móvel

Como ganhar dinheiro no mundo mobile?

Nessa palestra, eu vou falar de minhas frustrações e alívios em diferentes plataformas, diferentes SDK e diferentes políticas de distribuição de Apps. Além disso, claro, como tirar proveito e ser lucrativo com Apps.

Eu vejo vocês na área de Inovação(Ala Azul) da Campus Party 2012.

Até breve.

AIR Mobile/ Flex/ Flex 4/ Flex Builder 4/ Flex Mobile Framework/ iPad/ Iphone

Novo curso da RIACycle Flex para dispositivos móveis

Como vocês viram no último post a Adobe recentemente lançou o Flex 4.5 e Flash Builder 4.5 para criação de aplicações móveis usando o Flex.

Criação de aplicações móveis com Flex tem sido um debate pertinente em nosso dia-a-dia, assim como várias palestras.
bannerflexmobile

E através disso, acabamos de lançar o curso Flex para dispositivos móveis na RIACycle onde eu sou o instrutor.

Participe, são vagas limitadas.