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.

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/ Blackberry/ Flex/ Flex Mobile Framework/ HTML 5/ HTML5 / CSS3/ JQuery/ JQuery Mobile

Criando uma lista de scroll infinito para seu próximo projeto Mobile

scroll_inifinito_1

Coisa boa na vida é ter desafios, puxa daqui e puxa dali, e acabamos com uma idéia nova em um novo projeto não é verdade? Outra coisa melhor é você ter alunos onde você dá suporte o tempo todo, é o que acabou motivando a criação desse artigo.

Independente de qual é seu próximo projeto, você vai acabar querendo implementar isso uma vez na vida no seu próximo projeto mobile.

Sorte sua se seu próximo projeto for escrito em Flex Mobile ou JQuery Mobile.

Como funciona o Scroll Inifinito?

Independente do tamanho da tela de seu dispositivo, você pode calcular a altura da tela disponível no aparelho vs. altura que o conteúdo produziu para ser disponibilizado, sendo que você pode pegar a posição atual da barra de rolagem “scroller” quando ela atingir a altura  total do conteúdo ou seja, quando ela não tiver mais para onde deslizar até o final.

É ai onde entra o scroll inifinito, você pegando essas variáveis e fazendo o calculo direito, você pode fazer um Append ou incrementar os elementos de uma lista existente, seja Array, Lista, Datalist não importa, você pode implementar isso de maneira fácil usando o seguinte calculo.

 

posicaoAtualDoScroll == ( tamanhoAtualDaLista – tamanhoDisponivelNaTela)

 

Assim, você pode ir incrementando a lista se a barra de rolagem atinge o tamanho máximo disponível na tela e com isso vai paginando os resultados, tanto localmente quanto via chamada de processo remoto RESTful,RTMP,Ajax.

 

Versão Flex Mobile

Para fazer no Flex Mobile, você precisa conhecer bem a arquitetura Spark, uma vez que é desacoplada, a interface do componente, você pode começar investigando o Skin atual do componente <s:List/> até chegar duas propriedades importante do Skin que fazem menção ao componente em sí, dataGroup e scroller , ambos são peça fundamental para começar a implementar tal tarefa.

O dataGroup é onde os dados são guardados na lista e scroller é o componente que faz a barra de rolagem, é com ele que observamos a mudança acontecendo da posicaoAtualDoScroll e assim fazer o uso da formula  de condição e carregar mais itens.
Já que eu observo a mudança de posição do Scroller, eu tenho que chegar até o componente e escutar via EventListener qual é a propriedade que está sendo modificada, para isso o framework do Flex tem o evento PropertyChangeEvent, ele me dá o novo valor que a propriedade sofreu.

As propriedades em questão do scroller que eu quero saber são “verticalScrollPosition” para posição vertical e “horizontalScrollPosition” para posição horizontal.

Então sabendo qual é as propriedades que eu tenho que olhar eu procuro alinhar a formula usando o novo valor menos o tamanho atual da lista sobre o tamanho da tela.

Acabei criando o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			import mx.events.PropertyChangeEvent;
 
 
			[Bindable]private var dados:ArrayList = new ArrayList();
			private var proxima_pagina:int = 20; // numero de itens para carregar
 
			protected function loadItens(event:FlexEvent):void
			{
				for (var i:int = 0; i <19; i++) 
				{
					var item:Object = new Object();
					item.label = "Item "+i;
					dados.addItem(item);
				}
				lista.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,getPosicao);
 
			}
 
			private var posicao_anterior:int;
 
			protected function getPosicao(event:PropertyChangeEvent	):void
			{	
 
				if(event.property == "verticalScrollPosition"){
 
					if(event.newValue == (event.currentTarget.measuredHeight - event.currentTarget.height)){
							carregarMaisItens();
					}
				}
			}
 
			private function carregarMaisItens():void
			{
				var indice:int = dados.length;
 
				for (var i:int=0;i<=proxima_pagina;i++) 
				{
					var item:Object = new Object();
					item.label = "Item Carregado "+(i+indice);
					dados.addItem(item);
					trace(item['label']);
				}
 
 
			}
 
		]]>
	</fx:Script>
	<s:List id="lista" dataProvider="{dados}" creationComplete="loadItens(event)" width="100%" height="100%">
 
	</s:List>
</s:View>

 

Veja que além do scroller me dá as propriedades de posição do verticalScrollPosition e horizontalScrollPosition, você precisa usar a propriedade reservada dele para pegar essas mudanças acontecendo, é como se fosse uma caixa onde a barra de rolagem vai indo porém é pre-definido um espaço onde isso pode acontecer, que é o caso da variável viewport.

 

Versão JQuery Mobile

Para fazer em JQuery mobile, é também a mesma técnica, porém uma ressalva, o componente de lista do JQuery Mobile requer que você dê um refresh no listView, é uma espécie de renderização dos itens para aplicar os estilos padrões de CSS.

A diferença entre Flex Mobile e JQuery Mobile é que no Flex eu adiciono direto ao componente, já que o pai View não é passível de ter o Scroller, já no caso do JQuery Mobile como tudo é HTML e o DOM é manipulado diretamente no documento, eu escuto as mudanças do $(window) que é a janela ou tamanho da tela disponível, assim comparo através da mesma fórmula o scrollTop que basicamente é equivalente a verticalScrollPosition e diminuo do tamanho da lista menos o tamanho disponível da tela.

O código acabou ficando assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function($) {
 
 
 
 
 
	carregarItens(20); // 20 itens 
 
 
 
 
	$(window).scroll(function()
	{
	    if($(window).scrollTop() == $(document).height() - $(window).height())
	    {
	    	  carregarItens(20); // carrega sempre 20 itens
	    }
	        
	    	
	});
 
 
 
 
});
 
 
 
 
function carregarItens(pagina){
	var tamanhoLista = $("#lista li").length; // tamanho atual da lista
	for (var i = 1; i < pagina; i++) {
		var indice = i + tamanhoLista;
		$("#lista").append('<li data-theme="c"><a href="#page1" data-transition="slide"> Item '+indice+'</a></li>');
		$("#lista").listview('refresh');
	};
}
</script>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="d" data-role="header" data-position="fixed">
        <h3>
            Exemplo Lista
        </h3>
    </div>
    <div data-role="content" style="padding: 15px">
        <ul id="lista" data-role="listview" data-divider-theme="d" data-inset="false">
            <li data-theme="c">
                <a href="#page1" data-transition="slide">
                    Item
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Da próxima vez que você ver no Twitter ou no Dzone uma lista de scroll infinito, você já saberá como implementa-la.

 

HTML 5/ HTML5 / CSS3/ JQuery/ Web 2.0

10 mitos da incompatibilidade nos navegadores para HTML/CSS/JS

Quem anda de cabresto, sempre tende a olhar para baixo, excluindo a curiosidade de olhar o mundo exterior ao seu redor, depois que eu saltei da minha zona de conforto a 10 meses atrás, eu tinha a notória sensação de que eu descobria coisas novas a cada segundo, e as lembranças da zona de conforto me acomodaram mal, muito mal por sinal.
Uma das coisas que te deixam infeliz é a tal preguiça de inovar, justamente por que confortavelmente você acha que nunca precisa mudar, e nessa migração constante deparamos com mitos criados ou expurgados por quem não dá a mínima atenção em inovar e ser competitivo.

Quando eu comecei a estudar HTML5/CSS3/JS, eu tinha aquela sensação de mal estar adquirido, achando que nada prestava, tudo precisava melhorar, CSS então era a brincadeira de estica e puxa,Deus nos acuda!

Ao passar das semanas eu fui percebendo que os navegadores evoluíram bastante, frameworks e desenvolvedores de padrões web colaboraram para essas evoluções e no final percebi que quem estava atrasado na história era eu mesmo.

Então somei o que eu achava mito e decidi escrever esse post para você abrir sua mente e se liberar de seus medos.

10 Mitos da incompatibilidade nos navegadores

MITO 1 – HTML e CSS é feito para fazer sites e não sistemas.

Resposta: Então você nunca usou o Hotmail, Gmail, adWords, adSense na vida, você nunca usou itaú bankline, Bradesco on-line e por ai vai. o HTML e CSS é poli valente, funciona para tudo.

MITO 2 – Tenho que fazer vários ifs e elses para suportar N navegadores

Resposta: Não há necessidade, já que existem N frameworks no mercado que fazem a manipulação perfeita entre engines de navegadores, grande parte dos navegadores usam webkit/gecko e o único a usar um engine diferente é o IE com seu msie, porém na última versão 8, já vem com suporte a padrões web.

Frameworks que podem te ajudar a quebrar esse mito: JQuery, MooTools, EXT Js, Script.aculo.us, ProtoType.

Ou seja, alternativas é o que não falta para esse mito, já que todos peleijam em achar que irá voltar a época das cavernas por manipular DOM de cada engine de navegador.

MITO 3 – HTML5 é incompatível com navegadores

Respota: Desde quando HTML é incompatível com navegadores? HTML5 nada mais é que uma nova versão do HTML, existem alguns recursos como WebGL, Canvas, Audio, Video, codecs de audio e video que são específicos de cada navegador, que ao total 93% de todos os recursos que você vai usar em um único projeto é compatível com todos os navegadores.

Caso você ainda tenha problemas em achar que o HTML5 pode não rodar perfeitamente no IE7,8 você pode usar bibliotecas já prontas para isso. Uma delas inclusive é amplamente utilizada, a Modernizr.

MITO 4 – Não posso usar MVC em uma aplicação web feita em Javascript e HTML

Resposta : Mito detonado, no bom estilo caçadores de mitos, desde que javascript é javascript, e tudo é Objeto. Então eu manipulo qualquer objeto aplicando qualquer padrão existente, Aconselho você usar esse slides para te influenciar a pensar diferente.

MITO 5 – Não consigo criar interfaces com facilidade como no Flex

Resposta: É por que você não conhece o JQuery UI, YUI, Prototype UI, UKI, MochaUI, Livepipe UI, Alloy UI e GWT. Ou seja, alternativas para você criar interfaces não faltam.

MITO 6 – Aplicações Web feitas em HTML 5 e CSS3 não são cross-plataforma.

Resposta: Navegadores hoje são cross-plataformas, rodam no Linux, MAC, Windows, ios, Android e Windows Phone. Se sua aplicação fica na caixinha de areia do navegador então ela também será cross-plataforma, não tendo a necessidade absoluta de portar seu aplicativo para diferentes plataformas. Assim como no Flash Player ser cross-plataforma, é por que ele tira proveito dos navegadores.

MITO 7 – Aplicações feitas em HTML5 e CSS3 são lentas

Resposta: Uma vez que sua aplicação pronta, ela trafega muito mais rápido para o navegador do usuário do que seu SWF, já que não é compilável, é apenas lida.
O Flex compila o que você escreve em um SWF, esse SWF é binário, como uma imagem em JPEG ou PNG é. A diferença é que uma vez baixado ele se torna mais rápido por que não é interpretado. Já com HTML, CSS e JS ele é interpretado sempre que você manipula.

A grande vantagem está no tráfego de dados e na re-utilização do sistema, á que por padrão ele tem cache ativo. roda muito mais macio no navegador e não depende de plug-in.

MITO 8 – Em aplicações Web eu não consigo fazer Sockets, usar o AMF

Resposta: Você consegue sim, WebSockets são novidade, são feitos em js, veja o Node.JS. E AMF conheça o AMFJs.

MITO 9 – As IDE atuais são péssimas, produtividade ZERO

Resposta: Mito detonado também, existem N IDEs excelentes uma delas é as IDEs feitas pela JetBrains, compatíveis com os padrões do mercado e cheia de recursos, outras tão boas são para o Eclipse como o Aptana. E claro o Dreamweaver CS5.

MITO 10 – Meus aplicativos são re-escritos sempre que for criar uma versão mobile deles.

Resposta: Existem 2 posibilidades de você usar HTML, CSS e JS em aplicações Móveis, uma é usar os Media-Queries de CSS, fazendo o layout de suas aplicações responsivas. Ou criando um aplicativo específico para Mobile usando o mesmo HTML 5 e CSS3 feito para versão Web/Desktop.

Então se você chegou até aqui, é sinal que alguns mitos já passaram por sua cabeça e a dúvida pairava no ar. A minha sugestão é, ajude outras pessoas a se libertar desses mitos.

Flex/ Notícias/ Pessoal

Onde está o futuro do Flex?

Wow! Que semana foi aquela heim?! Muito se foi dito, muito ainda estará por ser. E eu faço a pergunta, onde você quer estar?

No apagar das luzes da última semana na sexta-feira, o time de desenvolvimento do Flex SDK, fez uma declaração um tanto assustadora para todos aqueles que gostam de ficar sempre na zona de conforto. E logo em seguinda (Ontem), fez uma atualização esclarecendo melhor o que fora escrito, acalmando mais os ânimos daqueles que estavam assustados.

Curiosamente, nada disso me colocou em cheque! Ou amarelado pelo fato das declarações feitas por parte do time do Flex ou Adobe. É ai onde eu explico minha história com o Flex.

Onde?
Tudo começou em Outubro de 2003, quando nos pre-releases da Macromedia existia um produto chamado Royale(Flex SDK) e Brady(Flex Builder). Nessa época eu já criava hotsites com o Flash e tinha feito 2 jogos muito utilizado no Flash Lite para dispositivos Nokia.
Eu estava em minha zona de conforto quando apareceu o Flex e a proposta que me chamou mais atenção, naquele produto em teste foi o gráfico comparativo do Apps 1998 client/server, HTML/js e Rich Internet Applications.

Eu já tinha feito apps no Flash MX, e foi nessa época que começou o termo RIA, só que existia um grande problema, o fato de não dá suporte totalmente a uma linguagem mais poderosa, deixava esse termo enfraquecido, já que surgia no mercado outros compiladores mais robustos para Actionscript 2.0 o Motion Tween e um outro chamado SWFMill. Ambos até hoje existem.

Foi ai que surgiu o Flex, a grande proposta dele era criar Apps usando sintaxe MXML e o recém lançado Actionscript 3.0. Nossa! Que mudança eu pensei, saímos da água suja do esgoto para os melhores frascos de perfumes da França.

Então, decididamente eu larguei tudo que eu fazia em Flash, era meu porto seguro e cair de cabeça no Flex, foi assim que surgiu a 3 lista sobre Flex no mundo a Flex-Brasil. Ainda hoje é a 2th maior. Eu finalizei minha frase de boas vindas com a mensagem

“E Deus disse, vão e se ploriferem” <-- vamos fazer isso

Como eu era um poeta e apaixonado heim! E não é que foi justamente isso que aconteceu? Foi dai que surgiu a comunidade Flex no Brasil, foi dai que saíram grandes profissionais e foi dai que muitas empresas tomaram por base para adotar o Flex como tecnologia.

Esse foi o Onde.

Quem?

Quem realmente cresceu a comunidade? Todos, uma comunidade precisa de apenas uma idéia e alguém que a defenda, se você tiver isso, você consegue constrúir uma comunidade, foi e é hoje uma grande comunidade, não feita por mim, mais feita de uma ídeia, quantas pessoas hoje não vivem de Flex por que começaram ali?
De lá para cá, eu consegui ser sortudo o bastante para treinar aproximadamente 3 mil pessoas, ter viajado por todo o Brasil menos no estado do MT, preciso conhecer esse lugar, tudo através da tecnologia Flex. Tem horas que eu me pergunto, valeu a pena? Até hoje vale a pena, quantas dessas 3 mil pessoas não treinaram outras ? e essas outras, outras também?

Uma comunidade é baseada em 3 pilares, Auto sustentável, colaborativa e continuidade.

Auto sustentável, é que gere receita para quem escolhe a tecnologia adotada.
Colaborativa, que os membros da comunidade se ajudem.
Continuidade, é que as pessoas acreditem na idéia que comparam, querendo ou não são idéias que movem o mundo.

Fantástico todos esses últimos anos, sem falar a quantidade de pessoas que eu conheci, fui e sou muito feliz por isso. Em cada canto desse país eu tenho um amigo, eu acredito que sou milhonário por isso. Tudo isso proporcionado por uma idéia lançada a 7 anos atrás.

Eu sou referência no Flex? Não, eu sou referência em amar o que faz.

Nunca fui apegado a tecnologia, eu fui sempre apegado a idéias, amo minha esposa, a família, meus amigos e até meus inimigos. Eu sou bastante apegado ao que eu faço, eu amo todos os dias acordar e tentar resolver problemas, geralmente dos outros.

Tive sorte o bastante de achar aquilo que eu gosto de fazer logo cedo. E minha mãe achando que eu me tornaria um cardiologista, nada a ver né? Hoje sento todo dia, ligo minha parafernalha tecnologia, faço algumas ligações diariamente e continuo ganhando o dia.

Tem dias que é um saco, mais ao final dele você sabe que fez algo de melhor, colaborou para um mundo menos complexo. Organizou mais as coisas e aos poucos você vai matando o papel e tudo que é tocavelmente simples.(A moda antiga).

Esse foi o Quem.

Quando?

Toda a minha empolgação com uma tecnologia Flex, veio acabando naturalmente a medida que tecnologias emergentes vem à tona. De 1 ano para cá, eu sempre venho estudando aquilo que me deixa confortável, que tenha um mesmo nível de raciocínio que o Flex possui.

Flex veio em uma boa época onde navegadores eram lentos, existiam apenas 3 players grandes no mercado ( M$ IE e Mozilla Firefox, Safari). Somente quando o Google entrou no campo de navegadores com o chrome eu percebi que muita coisa boa ia acontecer aos padrões Web. O que de fato aconteceu nos últimos 2 anos.
Novas engines, novos frameworks Javascript, padronização ironizada do HTML5. E de fato um novo mercado tinha surgido, meio que tímido, mais com uma tecnologia não tão compreendida.

Foi quando a Apple, entrou na briga e falou que o Flash era da era dos PCs, foi onde começou toda a murmurização do assunto.

Defensores dos padrões, cairam matando uma tecnologia que mal eles sabiam era a mesma utilizada nos caixas eletronicos do Itaú, Unibanco. Mal sabiam eles que as companhias aéreas faziam uso deles, mal eles sabiam que os primeiros infográficos no mundo eram feitos em Flash.

O grande problema do Flash Player foi ter como mãe a Adobe, ela nunca foi boa em manter um nível competitivo da tecnologia, suas IDEs então nem se fala, ela é boa em efeitos visuais, ferramentas para designers. Desde então ela deu mais ouvidos à concorrência do que sua própria capacidade de ser criativa.

Foi ai que aos poucos ela mesmo foi matando a tecnologia, por que a idéia de um Player para todas os navegadores foi enfraquecendo, a idéia de uma tecnologia robusta para criação de melhores UX e UI foi morrendo, muita gente desacreditando e isso foi tornando cada vez mais relevante para mim a frase.
Está na hora de mudar.

Mudar para onde?Por quê? Eu me fiz essa pergunta centenas de vezes, fiquei por 1 ano e meio sem rumo, comecei a trabalhar com outras coisas não ligadas a tecnologia, pensei até em abandonar de vez, sabe aquela sensação de vazio que fica? Seria excesso de informação? Decidi que era hora de parar. E parei por longos 6 meses, não escrevi uma linhazinha se quer de código. Estava farto, afinal o fiasco do lançamento do Flex 4x me deixou furioso, a Adobe estava tentando colocar o SDK amarrado a suas soluções de suíte CS e esquecendo de ficar competitiva.

O mesmo compilador usado por 6 anos e nenhuma mudança drástica, foi quando em Março desse ano eu decidi que era meu último treinamento pessoal em Floripa, nunca mais eu treinaria alguém pessoalmente ou viajaria por causa do Flex.

De lá para cá eu dei atenção as tecnologias emergentes, HTML5, CSS3, Javascript,JQuery para criação de interfaces, algo que me completasse como desenvolvedor, o que o Flex já não fazia mais. Estudei muita coisa e criei muita coisa na RIACycle com essas tecnologias, até compartilhei algumas semelhanças.

Só que ai, vi que realmente não importava qual tecnologia usar, já que o próprio Flex gerava um HTML, JS,CSS para embarcar meu SWF gerado. Já que meu cliente não dava e nunca deu a mínima para qual tecnologia eu usei para criar, ele quis e sempre vai querer o produto funcional, bonito e com uma boa experiência.

É onde caiu a ficha. Tecnologia é o produto do meio e não o produto final. Você é um modelo de tecnologia ou faz dela um modelo de negócio?

É onde entra o Futuro.

A Adobe decidiu que era melhor fazer a doação do SDK para a fundação Apache(ASF), lá o SDK terá melhor visibilidade não só na fundação, mais na comunidade, outras empresas tornaram a tecnologia melhor e mais competitiva do que nunca, lá a colaboratividade será mais rápida, as respostas vão funcionar melhor.

Por que a Apache e não a fundação Spoon? Eu não acredito na fundação Spoon por 3 motivos.

1 – É baseada em 4 pessoas. Se todos estiverem no mesmo carro e por desgraça do destino sofrerem um acidente, já era o projeto.
2 – Os 4 caras são excepcionais, criadores do Robotlegs, Swiz framework, mas uma coisa é manter um framework, outra coisa é manter um SDK inteirinho.
3 – Flex SDK é baseado na tecnologia Java, quem domina o Java tirando a Oracle? Quem tem um modelo de negócio sustentável pela tecnologia Java e que o mundo inteiro usa?

O expersite da Fundação Apache é bem melhor, por que tem mais pessoas colaborando, a visibilidade do projeto será sem dúvida, notórida, já que mais e mais desenvolvedores vão colaborar com o SDK.

E quando eu me refiro ao SDK, eu me refiro aos compiladores, aos testes automatizados, a possibilidade de usar o MXML e AS3 no lado servidor, a possibilidade de compilar para JS/HTML, coisa que já está em fase de testes pela Adobe com o novo compilador Falcon.

O Fato é, Flex tem ou não tem futuro? TEM FUTURO, e seu futuro será brilhante, desde que o Flex 3.0 entrou como produto Open-source, ele foi muito mais adotado por grandes empresas, por que temos 2 fatores, 1 depender apenas de uma corporação para cria-lo e outra é depender apenas da comunidade.

Tem que ter 2 pilares fundamentais para que uma tecnologia se sustente, seja ela Flex ou outra qualquer, é a forma híbrida da coisa, tanto uma organização séria e respeitada e uma comunidade inteira que acredita em um ideal sobre um produto.

Não é atoa que até hoje o Windows XP é utilizado em grande escala, mesmo a Microsoft afirmando que parou de dar suporte.

O Flex é o produto do meio, ele terá sempre um espaço e seu espaço tende a crescer mais ainda com seus concorrentes, ele continua sendo inovador, criando Apps móveis, criando Apps desktop e criando Web Apps.

O que você como desenvolvedor não pode ficar esperando é que tudo venha pronto, nada vem de graça, tem que tomar na marra, na garra, você tem que colaborar, tem que incentivar, tem que acreditar naquilo que você faz. Seja você empregado ou empregador.

A tecnologia Flex tem sído uma grande ferramenta que não depende apenas do Flash Player, ela depende da boa vontade de quem a faz.

Se seus gerentes lê matérias sensacionalistas e tomam decisões baseadas nelas, cabe a você acreditar naquilo que você faz, e não em mera expeculações, ele provavelmente tomará decisões que pode afetar sua vida pessoal e profissional.

Continuem apostando em tecnologias emergentes, continuem vivos e alívidos com o Flex SDK e BlazeDS nas mãos da fundação Apache, continue apaixonados elo que vocês adoram fazer, Softwares.

Não percam a empolgação, não se deixem descabídos por decisões mal feitas pela Adobe, ou pronunciamentos mal elaborados. Continuem amando o que faz, tecnologias emergentes são excepcionais oportunidades de novos negócios, de novos modelos de negócios de novas fronteiras para você.

Seja criativo, nunca deixe de elaborar novas idéias, de acreditar naquilo que você ama, quando você aprender e começar a se conhecer, você vai ver que tudo é do ponto de vista de alguém, e que nem sempre esse alguém tem razão.

Que venha o futuro do Flex, da Web, das tecnologias emergentes, eu estarei sempre de braços abertos e fazendo o que eu sei de melhor, Desenvolver, ensinar e compartilhar.

Por que eu ainda tenho muito a colaborar.