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.

Pessoal

Adobe agora demanda dízimo se você usar o Adobe Director 12 para Apps

director
[quote style=”1″]Do Latim decimus, Dízimo significa a décima parte de algo.[/quote]

A Adobe nunca largou mão do Director,e o colocou em pauta depois do flash player sair de foco. Agora ela tem uma novidade, além de vender a licença do software ela quer 10% de seus lucros com Apps feitas com Director caso ultrapasse [highlight bg=”#DDFF99″ color=”#000000″]US$ 20 mil [/highlight] em vendas.

O que? Não acredita nisso? Então segue um link do bom para você ler e meditar.

Ai é de você começar a fazer os cálculos : Apple 30%, Adobe 10%, Impostos do governo 17.7%. Sobra o que afinal?

Ainda bem, que eu não uso isso, mais fica a dica para quem está pretendendo algo com o Adobe Director. Existem o Flash/AIR, Corona, Unity que são bem mais completos.

Fico triste em ver o caminho que uma empresa tão inovadora tem tomado, espero que eles corrijam esse fiasco de licença de uso no Director.

HTML 5/ HTML5 / CSS3

HTML5 e SSE

sse

Se você nunca fez um loop ou um timer para sempre consultar uma determinada URL e atualizar informações, então você nunca passou por um processo de criação de software.

Atualmente temos vários protocolos de transferência de dados entre o lado cliente e servidor. Hoje como é mais conhecido como “Nas nuvens”, o sujeito faz requisições a um determinado serviço e a resposta é enviada “polling”, você requisita e espera que o callback da sua requisição traga a mensagem de volta.

Tanto no Flash Player quanto no AIR, nós tinhamos diversas opções de protocolos de transferência de dados: RTMP,RTMPF, Sockets, XMLSockets, HTTPRequest.

Assim, poderimos fazer long-polling, real time data transfer (RTDF) e deixariamos muitos usuários contentes.

O problema é que se você quer fazer algo totalmente ao vivo, a coisa complica, esbarramos em altos preços de softwares, diversas modificações nos canais de comunicação e em fim conseguir a tal adaptação do model. Ok até ai você faz isso de letra, já que não é tão trabalhoso quanto parece.

É ai aonde entra o SSE ( Server Sent Events ) “eventos enviados pelo servidor”, trata-se de uma nova especificação publicada no W3C por um Ian Hickson engenheiro do Google onde torna as coisas mais simples.

Long polling, short polling, todos querendo ou não sempre vão ficar dependentes das requisições do cliente em um canel multiplo, o SSE já atua um pouco diferente dessa forma. A idéia é trazer para o cliente a resposta mesmo sem sua requisição ser feita.
Pera ai?! Eu estou no ano certo? Em fim, isso já existia à um certo tempo, a galera do Java que o diga, mais agora é legal saber que você com puro javascript pode fazer isso sem ter que re-inventar a roda.

[browser_suporte ie=”no”] [pullquote align=”left”]Na plataforma Mobile Funciona no Firefox OS, iOS e Blackberry 7/10[/pullquote]

O SSE apesar de novo já dá suporte a várias plataformas, afinal quem não quer algo simples como esse. Todos querem dados via stream para seus clientes de maneira fácil.

 

Exemplo prático.

sse

Ok, já que eu não fujo a regra, eu escrevi um exemplo prático com gráficos, os dados vem em forma de json, e no meu lado cliente html5 eu faço o parse deles e gero um gráfico bonitão, igual esse abaixo.

 

Código do PHP stream:

<?php
//header('Content-Type: text/event-stream; charset=utf-8'); // importante ter
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // só pra prevenir cache
 
 
$dados = array(
		array('empresa' => 'GFSA3','valor' => mt_rand (1.7*10, 40*10) / 10),
		array('empresa' => 'PETR4','valor' => mt_rand (4.3*10, 30*10) / 10)
	);
echo "data: " . json_encode($dados) . "\n\n";
flush();
?>

 

Código do lado cliente:

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<meta charset="utf-8">
<title>Exemplo de HTML 5 com Server Sent Events</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;
}
#graph {
	text-align: center;
	margin:0 auto;
}
</style>
<script type="text/javascript">
 
var chart;
 
 
 
 	$(document).ready(function() {
 
 	chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graph',
        type: 'areaspline',
        marginRight: 10,
        marginBottom: 50,
        zoomType:'x'
      },
      title: {
        text: 'Portifolio de Ações'
      },
      xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
        },
 
      yAxis: {
        labels: { 
          enabled: true 
        },
        gridLineWidth: 1,
        title: {
          text: 'Valor',
        },
        plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
      },
      series: [
      {
        name: 'Gafisa ON',
        data: [4.3,4.0,19.3]
      }, 
      {
        name: 'Petrobras ON',
        data: [4,18,3]
      }],
      plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, 'rgba(2,0,0,0)']
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                radius: 5
                            }
                        }
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            }	
    });
 
 
	  if(typeof(EventSource)!=="undefined")
	  {
		var source=new EventSource("cotacoes_stream.php");
		source.onmessage = function(e){
      		var result = $.parseJSON(e.data);
      			chart.series[0].addPoint([(new Date()).getTime(),Number(result[0].valor)], true, true);
      			chart.series[1].addPoint([(new Date()).getTime(),Number(result[1].valor)], true, true);
		}
	 	}else{
	 		alert('Server Sent Events não é suportado pelo seu navegador');
	 	}
 	});
 
</script>
</head>
 
<body>
	<div id="graph"></div>
 
</body>
</html>

Existem várias outras opções mais completas, como o próprio webSocket, só que devido a sua falta de suporte em determinadas plataformas, fica inviável usa-lo.

Porém a grande vantagem do SSE é praticamente coisas simples que vão te tirar do sufoco quando você precisar fazer algo para prototipação com dados reais.

Esse é um exemplo de um material de curso que estou preparando. Aconselho também você dá uma estudada na especificação e verificar as outras configurações que o SSE possui.

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