Apache Cordova/ ios/ Mobile/ NodeJS/ Notícias/ Phonegap

Phonegap App, um live reload para desenvolvedores

phonegap_app

Acabaram de lançar o PhoneGap App. Um aplicativo que permite você testar o aplicativo que você está fazendo, sem se preocupar nesse período em assinar, empacotar e testar o que você faz.

Para quem é desenvolvedor Front-end e conhece o benefício do Live Reload, é basicamente a mesma coisa, facilita para caramba na hora de testar enquanto desenvolve.

Como usar?

Primeiro passo

Baixe o Phonegap ou atualize para última versão.

Depois instale o Phonegap como global.

  npm install phonegap -g
Se você não tem ainda o phonegap ou Apache Cordova como é conhecido, você deve instalar primeiramente o NodeJs que vem acompanhado do NPM (Node Package Manager), para baixar o nodejs, vá até o site nodejs.org

Segundo passo

Acesse o Phonegap App e baixe o aplicativo para seu dispositivo Android ou iOS, para Windows Phone em breve será disponibilizado.

Terceiro passo

Com o aplicativo instalado em seu dispositivo e o phonegap já configurado começe com os seguintes comandos:

Se você não tem aplicativo, basta executar esses passos.

c:\ phonegap create MeuAplicativo
c:\ cd /MeuAplicativo
c:\MeuAplicativo/ phonegap serve

Se você já tem aplicativos, só executar assim:

c:\ cd /MeuAplicativo
c:\MeuAplicativo/ phonegap serve

O código fonte tanto do PhoneGap, assim como dos PhoneGap App e o site, estão disponíveis aqui

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.

Android/ Apache Cordova/ Dicas/ ios/ Mobile/ Phonegap

Lista completa de dispositivos móveis, tamanhos e densidades

density

Quando o assunto é criar para dispositivos móveis você acaba sempre procurando qual é o tamanho da tela, resolução, densidade e basicamente isso torna qualquer app um desafio de concretizar, especialmente falando-se nos dias atuais.

Eu comentei, antes e aqui no Blog sobre esse aspecto, só que com tantos lançamentos a cada MWC, fica dificil acompanhar tudo, foi ai que alguém teve a brilhante idéia de ir agregando isso a uma lista no Wikipedia.

Boom! Não precisa fazer mais nada, esse post serve para qualquer um que encara esse problema diário em suas apps móveis, especialmente quem usa Cross-compliadores como PhoneGap(Cordova), Titanium, etc.

Só entrar e procurar no Wikipedia para qual dispositivo você procura. http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

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.

Android/ ios/ Pessoal

Android Alerta: Cuidado com que o seu dispositivo envia quando está conectado

android_malware

android_malware

Quando se trata de celular, eu sou cético em sair instalando tudo que tem por ai, por mais gratuito e bem polído o aplicativo seja. Quando sobra aquele tempo eu investigo  um pouco a mais o que o app trás. E pasmem, Todos os Apps que eu baixo 2 em cada 5 querem os meus dados como ‘lista de contatos’, última localização válida, quais serviços estão sendo executados no exato momento.

Mesmo o Google com uma batalha de gato e rato e implementando novas coisas, mesmo assim tais Apps são só descobertos se você desconfiar.

Se você tem um Android, você tem a grande facilidade de monitorar isso com maior clareza, já que você é responsável pelos seus dados e toda fabricante (Apple/Google/Microsoft/RIM) afirma, você é quem deve dizer se deixa ou não acessar tais informações.

Ontem eu queria instalar um App grátis no meu Android, para manter a descrição intácta e preservar os autores, digamos que ela seja uma to-do-list. É sempre bom ficar de olho na concorrência e para minha surpresa, mesmo não pedindo autorização a lista de contatos a App tinha um serviço para tal coleta. Acreditem ou não o App faz duas instalações do aparelho, 1 que é o app propriamente dito e outra é o serviço.

Afim de estudar um pouco à mais essa perceção de captura de dados eu começei a debugar o Aparelho, mesmo com o .apk inacessível você consegue ver os serviços em questão e ver o que eles rodam.

Você pega o ADB e começa a dedilhar o que é exposto, mesmo assim não dá para saber muita coisa além do nome do serviço rodando que você também pode ver direto do Android.

Pesquisei como capturar o tráfego e o que estava saíndo do Android, e acabei com esse link que indico para você baixar e testar em seu próprio aparelho.

No final das contas, realmente o App copiava meus contatos apenas com e-mails, enviava minhas últimas coordenadas de GPS válidas e algumas variáveis métricas para saber que aparelho eu estava utilizando. Ficando apenas o ponto crítico e imoral de coletar meus dados pessoais.

Fiquem espertos com muita vantagem! Cabe a você fazer tais denúncias.

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.

HTML 5/ ios/ JQuery/ JQuery Mobile/ Phonegap

Phonegap só resolve 50% do problema, o resto é contigo

cordova_logo_problem

Ok, eu já falei das vantagens e desvantagens do phonegap em comparação ao Adobe AIR, e eu acho que faltou um post mais completo sobre a maior dificuldade que se tem em criar uma solução mobile completa fora da caixa de areia do SDK nativo.

Phonegap resolve parte do problema em suportar Apps escritos em HTML5/JS/CSS, depois que você cria seu primeiro Hello World, você se pergunta, “Ok, e agora o que eu faço?”.

É ai, onde seus problemas começam, definir uma interface fluída, que funcione em diversos dispositivos é tarefa ultra complicada, já que temos dispositivos de diferentes densidades.

Resolver esses problemas sem o SDK nativo é um baita desafio, em especial quando se tem em mente que grande parte de Apps móveis, são customizáveis, já que você vai enfrentar isso, é bom se preparar, eis algumas ferramentas e frameworks para JS que ajudam a encurtar esse caminho.
Se você é do tipo que gosta de frameworks, com tudo prontinho, essa é a lista que eu sugiro para você.

Sencha Touch – O melhor entre todos

JQuery Mobile – Funciona para apps nativas também, só que não é tão bom para diferentes telas.

LungoJS – Biblioteca bem interessante e completa que imita um pouco do jQuery Mobile, mas trabalha com a idéia de componentização.

KendoUI – Igual ao JQueryMobile, poucos componentes.

Agora se você está em um nível que prefere fazer tudo do zero já que sua App demanda isso, devido seu nível de complicação e elementos gráficos, então aqui vai algumas dicas bem interessantes.

Zepto.js – Biblioteca igual ao jQuery, só que mais leve e compatível com o Phonegap, muito rápida por sinal na hora do loop para montagem de listas.

Foundation da ZURB – Eu uso os media-queries do framework Foundation em meu CSS próprio, já que eu não quero gastar tempo calculando o tamanho exato da fluidez das coisas, eles são os melhores e coloca o Twitter bootstrap no bolso nessa questão.

Abuse e reuse bastante de Media queries, aqui vai uma maneira de como eu resolvi meus problemas nessa questão.

 

Separando cada CSS com suas particularidades e aplicando o estilo quando for necessário em cada tela. Dica Javascript Desabilite o Touch Move no body do documento, ou você vai ter problemas de redimensionamento com o conteúdo sambando para um lado e para outro, caso o usuário toque e arraste na tela.

 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

Precisa controlar melhor os gestos que são usados em sua aplicação? Você pode usar os padrões ‘touchmove’,’touchTap’,’swipeLeft’,’swipeRight’, mas você está acostumado com a sintaxe do JQuery ou ZeptoJS, por que não continuar com isso?

O HammerJS é uma biblioteca para isso, muito útil nas dificuldades de implementar gestos em containers que possuem gestos internos já existentes.

O que o phonegap se propoe é lhe ajudar a acessar recursos nativos do aparelho, e isso ele faz com louvor. O que ele não faz é te dar de mão beijada a interface ou componentes que serão usados para criar uma app móvel. É nessa parte que você se pergunta o por que.

Então, da próxima vez que você for criar Apps móveis com tecnologia HTML, leia esse post ou indique à um amigo. Vai salvar alguns dias em seu calendário apertado de entregas.