Dicas/ RIA

Jogar um código fora e refaze-lo do zero #soudev

Escrevi um Tweet ontem que muita gente que acompanha o #hastag #soudev pode concordar ou não, foram levantados alguns argumentos, como lá só tem espaço para 140 caracteres, deixa eu jogar aquele tweet fora e escrever do zero outro tweet aqui no Blog, onde tem mais espaço para eu mostrar quais motivos me levaram a isso.

Em resumo, o meu tweet foi :

Jogar um código fora e refaze-lo do zero, me retornou + performance +resultado +aprendizado #soudev

O real motivo:

Em um projeto onde trabalhamos temos um componente que é deveras complexo, e esse bendito componente acabou gerando outros 19 sub componentes, o que atingiu uma certa parte de grande esforço da equipe para concretiza-lo.
Um dos grandes obstáculos foi ter que cria-lo sem especificação técnica, ou seja no estilo Jack Bauer ou melhor, Mãe Diná (Prevendo as necessidades Rah!).

Impactou em 2 semanas escrevendo, 1 testando e 3 dias implementando, no resultado, o componente só funcionou 50% do que era previsto como achavamos que era para ser.

Então, no modo “faca na caveira” ou Coragem tecnicamente falando. Resolvemos que era mais fácil jogar fora todo o componente (leia-se parar de usar aquele código e criar outro do zero). Que fosse necessário para tal. Agora tendo a especificação pronta de fato, o levantamento de requisitos e os caprichos do pessoal de UX, só nos restou mãos a massa.

Em resumo, depois de 12 horas, o componente está criado, já testado e implementado no projeto.

Com isso nós ganhamos alguns itens:

Performance : O componente que era 19 sub-compontes ficou em apenas 11, De 6.700 linhas passou para 2.346 linhas, reduzindo os Skins do Flex para uma coisa bem mais simples e rápida, já que skins são ainda o gargalo do Flex 4.5.

Resultado: Com bem menos tempo e com um grande obstaculo pulado que foi na especificação, o resultado foi de 99% esperado pelo gerente de projeto e isso nos deu mais retorno sobre o que realmente importava nele.

Aprendizado: Aprendemos que o modo Mãe de Diná, não funciona em projetos, ter bola de cristal é sempre um 171, Optimizamos várias formulas matemáticas que eram utilizadas nele, re-criar a roda não vale a pena e sempre fica faltando um parafuso. Onde nos levou a usar algumas classes dessa biblioteca.

Quando você escreve um código,uma vez, ele se torna fácil nas próximas vezes que você for fazer em seguida. O grande problema e você julgar se isso realmente é necessário ou não. Depende muito de cada projeto, entre os fatores como: Quem está bancando o projeto, Prazo, estimativas de hora, Quantidade de mão de obra necessária.

Pense nisso.

Android/ Cursos/ Dicas

03 e 10 de Setembro Curso on-line Android Nativo Essencial

androidbanner2

Ser ou não ser eis a questão, essa é uma frase famosa do poeta William Shakespeare, escrita no século 15.

Hoje eu mudaria ela para Ser Android ou não ser, eis a questão. A empresa que eu trabalho eu realmente amo o que eu faço pelo simples fato dela ser uma empresa que motiva seus funcionários a fazer o melhor e não só isso, motiva a outras pessoas (alunos) a criarem coisas fantásticas e assim colaborar mais ainda para uma internet rica, móvel e fantástica.

Nos dias 03 e 10 de Setembro o Grande Stefan Horochovec vai ensinar ao pessoal como criar Apps nativamente para plataforma Android, o mais interessante de se criar apps nativas com código do próprio SDK é que você não fica só limitado ao AIR 2.5+ e Android 2.2. Você tem uma grande leva de dispositivos que você pode atingir.

Atualmente cerca de 550 mil novos smartphones com Android são ativados diariamente. Que juntos somam um exército de 130 Milhões de dispositivos rodando o Robozinho. Dai eu fico perguntando e você vai ficar ai parado e vendo toda essa manada passar diariamente e não vai fazer nada para criar algo para ela?

Pense bem, e faça esse curso que vai explorar todos esses recursos, quem é desenvolvedor Web ou Java vai adorar, afinal de contas a didática do Stefan é muito boa.

Ande logo! Por que é imperdível.

Dicas/ Negócios/ Notícias/ Pessoal

Esse teu digital aí não tem gosto de velho não?

O título é do blog post do Rene de Paula, eu conheci o Rene na época de uma apresentação byYou pela extinta Datasul. Ele lançou um blog a pouco tempo e nele ele ja tem uma série de videocasts onde comenta sobre idéias digitais, produtos, serviços e sua visão bem mente aberta sobre as novidades que estão por vir.

Um dos vídeos me chamou bastante atenção, que foi esse do título do post, acho que vale a pena assistir o vídeo e deixar ai seu comentário no blog do Rene ou aqui e imprimir seu ponto de vista sobre o assunto.

esse teu digital aí não tem gosto de velho não? from renedepaula on Vimeo.

Android/ Flex/ Flex 4.5/ Flex Mobile Framework

Novo grupo on-line para discutir Flex em dispositivos móveis

Hoje abrimos um espaço para tirar dúvidas relacionadas ao Flex só que com foco em mobilidade.

O grupo é uma extensão do atual Flex-Brasil, onde fica mais fácil focar e ajudar desenvolvedores que queiram utilizar o Flex em dispositivos móveis.

Já tem 45 inscritos, então se você quer discutir sobre Flex em Smartphones e Tablets, lá será o melhor lugar.


http://groups.google.com/group/flex-mobile

Participe, é grátis!

Notícias

Prontos para o desafio global Blackberry?

desafio

Como dizem nossos leitores mineiros, é prêmio para mais de metro. Esse ano a Blackberry está realizando o MAIOR se não o MELHOR E MAIOR DO MUNDO, desafio para desenvolvedores de sua plataforma.

O desafio é muito simples, você não paga nada, crie um App muito bem bolada, submete o app para análise e a Blackberry pode te escolher para ser o Grand Top desenvolvedor da app para distribuir em seus dispositivos móveis.

São 3 categorias principais que você pode escolher:

Melhor App feito em Flash/Flex/AIR ( Esse era de maio a 12 desse mês, então nem adianta tentar)
Melhor inovação tecnologia usando o WebWorks que funcione no BlackBerry PlayBook e BlackBerry 6 ( Em aberto até dia 26 desse mês)
Melhor aplicativo social viciante usando a plataforma social BBM. (Até 23 de Setembro)

Participe, basta visitar essa página e aqui e saber como entrar no desafio.

Corre e não perde tempo. Eu vou participar!

AIR 2.7/ AIR Mobile/ Flash Player

Adobe AIR 3.0 e Flash Player 11 Beta 2 já disponível no Adobe Labs

Cansado do Flash Player 10.3 e seus erros de HTTPS ?

Então prepare-se, por que além disso o Flash Player 11 vai vir bombando nessa versão. E não é papo de blogueiro não, juntei aqui algumas novidades que vai deixar muita gente com vontade de instalar ele antes mesmo de sair no mercado. Se você é desenvolvedor você já deveria ter instalado ele para testes.

Adobe AIR 3.0

Novidades que realmente valem a pena comentar

Stage3D Accelerated Graphics Rendering (desktop) — Stage3D (“Molehill”) é uma nova arquitetura para aceleração de hardware para renderização de gráficos criada pela Adobe. Stage3D tem API de baixo nível para habilitar gráficos avançados em 2D e 3D que funciona para múltiplas telas, como desktop, mobile e tv.
Ou seja,quem é acostumado com o OpenGL, softwares de 3D vai achar isso o máximo.

H.264/AVC Software Encoding for Cameras (desktop) — Transmitir agora sua webcam 720p virou real, o Flash Player agora dá suporte a isso, imagino as apps de video conferência utilizando isso em tempo real com uma qualidade excepcional. Vale lembrar que tem que ter banda de internet boa.

Native JSON (JavaScript Object Notation) — Suporte nativo a JSON, Uffa! até o JQuery tinha API o Flash Player tinha que ter.

Garbage Collection Advice — Melhorou muito, o lixeirinho querido dos desenvolvedores Flex/Flash, agora tem uma API que até agenda a coleta das informações.

Secure Random Number Generator — Muito bom, você pode gerar números random para encriptar banco de dados local, criar protocolos de comunicação seguras, Eu acredito que a Adobe adicionou isso ao AIR devido a Marinha Americana utilizar ele em alguns apps.

Native Extensions – Essa é uma das Maiores se não a Maior função revelação do AIR seja para Desktop ou Mobile a idéia do Native Extensions é gerar novas bibliotecas em C ou C++ para utilizar novas API. Ou seja é limitless, sem fronteiras.

Native Text Input UI (mobile) — Eles me ouviram, Eu havia postado isso como future request e não é que eles adicionaram, uma das minhas dificuldades em criar apps com AIR para Mobile era justamente em campos de texto, fica muito complexo a utilização das funções nativas que o dispositivo já possui no teclado, nada melhor que interagir com isso de uma forma mais nativa, mesmo programando em AS3. Onde você pode selecionar o texto, dar zoom no campo, pular de campo. E o bom disso tudo é que funciona em todos os dispositivos ( Android, Blackberry Tablet OS e iOs).

No Flash Player 11

Native 64-bit Support (Flash Player desktop) – Finalmente um Flash Player decente para quem tem Windows x64.

Quer ler todas as novidades? Leia aqui o release Notes

Flex/ Flex 4/ Flex 4.5/ JQuery

Redescobrindo o gosto pelos padrões Web : JQuery para devs Flex – Parte 4

Estou fascinado como ambas tecnologias possuem suas particularidades e ao mesmo tempo compartilham tantas coisas em comum. Se por um lado aprender Javascript é parte fundamental para seu progresso com JQuery, serve a mesma deixa para Flex, que depende exclusivamente de Actionscript.

Embora a zona de conforto que o Flex lhe proporciona como design padrão já pre-definido, layout Manager já ajustadinho para qualquer tela, composição de componentes, arquitetura componentizada, tudo isso acarreta na escolha de se adotar ou não JQuery e padrões Web em seus projetos e em sua carreira profissional.

Fato é, que da uma preguiça fora de sério aprender tudo isso novamente, como denominar dependências e heranças com DOM, live encoding. É deverás complicado para quem sai de outro idioma programático e cai de pará-quedas no ambiente do navegador.

Nessa quarta parte, quero mostrar em diante como é a estrutura padrão de eventos no JQuery e como isso pode encurtar pontos no aprendizado.

Eventos

A gramática de eventos no Flex é composta por pacotes e mais pacotes definhados por componentes e seus containers, tanto que é muito bem distribuído, é como se fosse 1 caixa de palito de fósforo, contendo palitos com respectivas funções programáticas, um para cada tipo de fogo que se pretende ascender.
É estimado que por padrão no Flex 4.5 existam cerca de 98 tipos de evento, boa parte eles são herdeiros do evento chave que fica no pacote flash.events.Event os demais são de uso exclusivo de cada plataforma como AIR e Flash Player.

Já a gramática de eventos do JQuery, é um tanto simplificada, onde não passa mais que 36 tipos eventos, todos herdeiros de um só evento pai que é amarrado ao HTML, o DOM Object.

Porém, essa maneira simplista da coisa tem seu certo fundo técnico, uma vez que você tem N tipos de navegadores com N tipos de engine, ou você simplifica a coisa ou acaba fadado ao fracasso. Não tão distante, por mais que você queira relutar, os eventos no Flex também seguem um padrão cronológico ou técnico possa se dizer, do modelo de DOM level 3. Onde há uma certa semelhança em nomenclatura e a estrutura de como funciona, tal como adicionar listener, remover listener.

O que o JQuery fez foi pegar tudo isso e simplificar o máximo possível, trazendo ao desenvolvedor maior facilidade nessa execução de eventos. Porém em contra partida ele pecou pela exclusão do processo de fase, o que é umas das partes fundamentais em aplicações que tomam por base eventos.

Exemplo prático:

Criar um Div ( Bloco), onde ele siga a posição do mouse. Uns dos segredos desse exemplo é o CSS, com seu subselector position:relative;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
.bloco {width:200px; height:200px; background:#000; display:block; position:relative;}
</style>
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
		// começar a brincadeira com JQuery
 
			$(document).mousemove(function(e) {
                	$(".bloco").css("left",e.pageX);
					$(".bloco").css("top",e.pageY);
					var nova_cor = 'rgb(' + (Math.floor((-256)*Math.random()) + 200) + ','
                     + (Math.floor((-55)*Math.random()) + 200) + ','
                     + (Math.floor((-55)*Math.random()) + 200) + ')';
					$(".bloco").css("background",nova_cor);
            });
			$(document).mouseout(function(e) {
               setInterval(loop,4000);
            });
 
			function loop()
			{
				$(".bloco").animate({left:Math.random()*  screen.availWidth/2},1000);
				$(".bloco").animate({top:Math.random()* screen.height/2},1000);
			}
 
    });
</script>
</head>
 
<body>
			<div class="bloco"></div>
</body>
</html>

Se eu fizer esse exemplo no Flex, como seria?

 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init(event)">
 
	<fx:Declarations>
		<s:Move id="mover" target="{bloco}" duration="4000" />
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.events.FlexMouseEvent;
 
			protected function init(event:FlexEvent):void
			{
				this.addEventListener(MouseEvent.MOUSE_MOVE,mudarBloco);
				this.addEventListener(MouseEvent.ROLL_OUT,randomizar);
				this.addEventListener(MouseEvent.ROLL_OVER,pegarListeners);
 
			}
 
			protected function mudarBloco(event:MouseEvent):void
			{
				bloco.x = mouseX;
				bloco.y = mouseY;
				cor.color = Math.random()*0xffffff;
			}
 
			protected function randomizar(event:MouseEvent):void
			{
				mover.xTo = Math.random()* screen.width/2;
				mover.yTo = Math.random()* screen.height/2;
				mover.play();
				this.removeEventListener(MouseEvent.ROLL_OUT,randomizar);
 
			}
 
			protected function pegarListeners(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
 
				this.addEventListener(MouseEvent.ROLL_OUT,randomizar);
			}
 
		]]>
	</fx:Script>
	<s:Rect id="bloco" width="200" height="200">
		<s:fill>
				<s:SolidColor id="cor"/>
		</s:fill>
	</s:Rect>
</s:Application>

Viu que tudo não passa de mousemove, mouseOut, posição do mouse. Tudo é igual, o que realmente muda nesse exemplo é a nomenclatura das palavras chaves usadas.

Uma simples lista de tarefa no JQuery

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
			$("#btn").click(function(e) {
                	// adicionar itens
					$("#tarefas").append('<li><input name="Tete" type="checkbox" value="'+$('input').val()+'"><label>'+$('input').val()+'</label></li>');
					$('input').val('');
					$('input').focus();
            });
    });
</script>
</head>
 
<body>
<input class="input" name="tarefa" type="text" lang="pt" value="Digite sua tarefa" size="30" maxlength="50">
<a id="btn" class="button green large">+</a>
 
<ul id="tarefas" class="lista">
</ul>
</body>
</html>

Até ai tudo bem, e se você quiser dinamicamente adicionar um evento sempre que um novo item é adicionado, você faz através do evento bind (), que é próprio para isso.

					$('li input').bind('change',function (e){
						if($("li input").is(':checked')){
							$(this).toggle();
						}
					});

O código fica no final

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
			$("#btn").click(function(e) {
                	// adicionar itens
					$("#tarefas").append('<li><input name="Tete" type="checkbox" value="'+$('input').val()+'"><label>'+$('input').val()+'</label></li>');
 
					$('li input').bind('change',function (e){
						if($("li input").is(':checked')){
							$(this).toggle();
						}
					});
					$('input').val('');
					$('input').focus();
            });
 
    });
</script>
</head>
 
<body>
<input class="input" name="tarefa" type="text" lang="pt" value="Digite sua tarefa" size="30" maxlength="50">
<a id="btn" class="button green large">+</a>
 
<ul id="tarefas" class="lista">
</ul>
</body>
</html>

E com isso você pode partir para exemplos mais sofisticados como um dataGrid por exemplo:

Veja abaixo

jquerytabela

Tem editar, selecionar tudo, soma de valores.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
 
 
	$(document).ready(function(e) {
		editable();
		disable();
 
 
 
		$("#checkAll").change(function(e) {
 
			 $("table td input").each(function(index, element) {
 
								if($("#checkAll").is(':checked')){
									$(element).attr("checked",true);
								}
								else{
									$(element).attr("checked",false);
								}
							///	alert($(element).val());
 
					});
        });
 
		var count = 1;
		$("#addMaisButton").click(function(e) {
			if(count == 1){
  			$("table").append('<tr class="d1"><td><input class="checkbox" type="checkbox"></td><td></td><td></td></tr>');
			count++;
			}else if(count == 2)
			{
				$("table").append('<tr class="d2"><td><input class="checkbox" type="checkbox"></td><td></td><td></td></tr>');
				count--;
			}
			editable();
        });
 
    });
 
	function disable()
	{
			$("table tr td:first-child").each(function(index, element) {
                	$(element).unbind('dblclick');
					$(element).unbind('keyup');
					$(element).unbind('focusout');
            });
 
	}
	function editable(e)
	{
		$("table tr td").each(function(index, element) {
 
				$(element).bind("dblclick",function edit(){
					$(element).html('<input class="input" type="text" value="'+$(element).text()+'" size="30" maxlength="50">');
					$('input').bind('focus',function focusEdit(){this.select()});
				});
 
				$(element).bind("keyup",
						function closeEdit(e){
							if(e.keyCode == 13){
							$(element).text($(element).find('input').val());
							somarTotal();
							}
				});
            });
 
	}
 
	function somarTotal()
	{
			var somageral = 0;
			$("table tr td:nth-child(3)").each(function(index, element) {
					//	somageral += ;
						if(!isNaN(parseInt($(element).text()))){
							somageral += parseInt($(element).text());
							//alert($(element).text());
						}
 
            });
			//alert(total);
		$(".total").text(somageral + ',00');
	}
</script>
</head>
 
<body>
<a class="button green large" id="addMaisButton">Adicionar +</a>
<table class="grid" width="650" border="0" cellpadding="10">
  <tr>
    <th width="26" scope="col">
      <input name="checkAll" type="checkbox" class="checkbox" id="checkAll"></th>
    <th width="340" scope="col">Descrição dos itens</th>
    <th width="184" scope="col">Valor</th>
  </tr>
  <tr class="d1">
    <td class=""> <input name="checkAll1" type="checkbox" class="checkbox" id="checkAll1"></td>
    <td>q</td>
    <td>10</td>
  </tr>
  <tr class="d2">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll2" id="checkAll2"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d1">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll3" id="checkAll3"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d2">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll4" id="checkAll4"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>Soma Total:R$<span class="total"></span></p>
</body>
</html>

Estude o código e veja como fiz, eu gastei uma média de 4 horas para fazer isso. Embora o código não esteja optimizado.

Abraços e até o próximo.

AIR Mobile/ Flex/ Flex 4.5

Ganhamos no desafio do Melhor App Flex de Open Source no Flashcamp Brasil 2011

Notícia excelente, além de termos noticiado aqui e aqui , que haviamos criado o app para o Flashcamp Brasil no Android, nós decidimos abrir o código fonte do mesmo para participar do desafio do evento.

Não deu outra, acabamos por ganhar como melhor App Flex Open-source. O app é para plataforma mobile Android, onde todo e qualquer desenvolvedor que domine o Flex/AIR, possa criar um App similar para outros eventos de tecnologia ou não e assim fomentar a informação para quem participa dos eventos por ai à fora.

Muito bom ganhar um desafio, esse foi o primeiro que participamos. Parabéns aos outros ganhadores em outras categorias.