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.

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.

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?

Blackberry/ Playbook/ Tablets

BlackBerry Playbook lançado no Brasil

playbook
Wow, Adriano meu filho está me ouvindo?! É amigos, finalmente o Playbook da RIM, chegou ao mercado Brasileiro, como era previsto para seu lançamento ser hoje dia 19, de fato ocorreu.

A indústria Brasileira estava bem anciosa por esse lançamento, tanto é que o Tablet já vem preparado com conteúdo nacional, Apps Brasileiras e está bem vendido.

Vem com vários Apps Brasileiros, como da Revista Exame, Cinemark, Buscapé, TAM, UOL Notícias, Rádio CBN, Guia Mais, Documents to Go e uma infinidade de Apps bem bacanas, a loja conta com mais de 40 mil Apps prontos para seu tablet, isso mostra que a RIM possui uma séria posição no mercado para de fato concorrer de igual peso com o iPad; E se ela fizer com o tablet como fez com seus smartphones é garantia de sucesso no mundo corporativo quanto no público geral.

Existem 3 modelos do tablet, a diferença mesmo se dá por conta da capacidade, 16GB, 32GB e 64GB. Vem com camera de 3 Mega Pixel e filma em 1080p, coisa que só agora o Iphone 4S faz. Conta também com uma camera frontal, bateria bem duradoura.

Uma coisa que notei bastante no meu Playbook é a velocidade com que a bateria carrega usando seu carregador de tomada, via USB demora um pouco, porém via plug normal de tomada a coisa é ultra rápida.

Os preços do Playbook no modelo de 16GB sai por R$1.299,00 e vai até R$2.999,00.

Você vai encontrar nas Americanas.com, Lojas Saraiva,Submarino, FNAC e Claro Brasil. Dentre outras grandes lojas de varejo no mercado Brasileiro.

Algumas caracteristicas técnicas dele:

Tela de LCD de 7″, 1024×600 WSVGA, tela de touch-screen com suporte a multi-toque e gestos.
OS com suporte a multiprocessamento simétrico.
Processador de 1 GHz com núcleo duplo (dual core).
1 GB RAM.
Dual câmera HD (3MP frente e 5MP a de traz). Suporte a gravação de vídeo HD1080p.
Reprodução de vídeo: 1080p HD Video, H.264, MPEG, DivX e WMV.
Reproduz Audio: MP3, AAC, WMA.
Saída de vídeo HDMI.
Wi-Fi – 802.11 a/b/g/n.
Bluetooth 2.1 EDR.
Conectores: microHDMI, microUSB, carregador.
Abre, a plataforma de aplicação flexível, com suporte para WebKit/HTML-5, o Adobe Flash Player 10.1, Adobe AIR Mobile, o Adobe Reader, POSIX, OpenGL, Java.
Formato ultra fino e portátil, medindo: 5.1″ x 7.6″ x 0.4″ (130mm x 193mm x 10mm)

Pesa aproximadamente 425 gramas.

Eu tenho um em mãos e prometo fazer um review dele bem bacana, mostrando alguns recursos dele.

AIR Mobile/ Android/ Dicas/ Flex/ Flex 4/ Flex Mobile Framework/ Tablets

Antes de comprar seu Android para testar o Flex leia esse post

Amigo leitor, você está totalmente satisfeito que agora o Flex está disponível na plataforma Android, Playbook e futuramente logo em junho ios.
O fato é que esse post é mais direcionado a você que está comprando um smartphone ou um tablet com Android apenas para testar o Flex nele ou criar soluções corporativas para sua empresa.
Hoje aconteceu uma coisa bem ruim com o Maurício Martins um de meus alunos do último curso de Adobe AIR Mobile. Ele comprou um Samsung Galaxy 551 apenas por suportar o Android 2.2 que é um dos pré-requisitos para você testar qualquer aplicação mobile na plataforma Android.

Infelizmente você acaba esquecendo que existem outros pre-requisitos importantes que devem ser levados em conta, como quantidade de memória instalada, resolução da tela, arquitetura do processador.
Então antes de sair comprando seu Android só por que já suporta 2.2, lembre-se desses fatores.
O que eu mais indico é visitar a lista de tablets, smartphones que já suportam o Adobe AIR e estão certificados pela Adobe para tal fim. Confira a lista aqui.

A lista pode sofrer mudanças constantemente, então é sempre bom ficar de olho nela, pois ela só lista o que realmente já foi testado pela própria Adobe e ela aconselha seus desenvolvedores e usuários finais a usar esses aparelhos.

Os requisitos técnicos para ter suporte ao Adobe AIR são:

MOBILE SYSTEM REQUIREMENTS

* Android devices
o Google Android™ 2.2 operating system
o ARMv7-A processor with vector FPU
o OpenGL ES 2
o H.264 and AAC hardware decoders
o 256MB of RAM
* BlackBerry™ Tablet OS
* iOS 3 and higher

Actionscript/ AIR Mobile/ AS 3.0/ Flex/ Flex 4/ Flex Mobile Framework/ Tablets

5 Webcasts para você criar aplicações para o Playbook da RIM

Quer criar aplicativos para o tablet da RIM?

Domina o Adobe AIR /Flex / Actionscript 3.0?

Então, você facilmente irá criar uma aplicação do zero usando o Framework Adobe AIR para a plataforma da RIM.

O Playbook é a grande aposta da RIM para o mundo dos tablets, e vem com força total, um dos recursos é que mais agrada é o fato da FULL WEB, sem quadradinho do lego dizendo que Flash Player não está disponível e claro, reprodução de video em FULL HD 1080p, processador rápido e por ai vai.

Assista aqui os 5 webcasts para você começar a detonar no Playbook