Hoje o dia foi tranquilo, e como sempre, quando tem tempo livre agente ajuda abeça. Na lista flex-dev teve um rapaz perguntando como criar um monitorador de câmeras da CET do Rio de Janeiro em tempo real.

Bem, não é bem um tempo real, elas atualizam de 30 e 30 segundos e disponibilizam um link de imagem que você pode consumir facilmente. Está ai uma maneira legal de você criar serviços que ajudem a população a evitar grandes engarrafamentos e assim reduzir o consumo de combustível.

Pois bem, fizemos uma rápida API para o CET do rio de Janeiro. onde você pode ver o resultado abaixo. Detalhe é que se você usa um Android, você pode usar o aplicativo abaixo já direto no navegador.

Código da Aplicação.

Código fonte da classe CETCameras

/**
 * Copyright (c) 2010 RIACycle LTDA ME. www.riacycle.com
All rights reserved.

The MIT License - http://www.opensource.org/licenses/mit-license.php

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
package
{
	import flash.events.TimerEvent;
	import flash.utils.Timer;

	import mx.collections.ArrayCollection;

	public class CETCameras
	{
		public function CETCameras()
		{
		}
		[Bindable]public static var cameras:ArrayCollection = new ArrayCollection([]);

		private static var _intervalo:Timer;
		private static var quantidade:int;

		public static function addCamera(value:int=96):void
		{
			quantidade = value;
			for(var i:uint=1;i<=quantidade;i+=1)
			{
			var cam:CameraVO = new CameraVO();
			cam.nome = "Camera " + i;
			cam.camera = "http://200.141.78.14/imagens1/"+ String(i) + ".jpg?=" + Math.ceil(Math.random()*1000);
			cameras.addItem(cam);
			}
		}
		public static function atualizar(intervaloEmSecs:int=30):void
		{
				_intervalo = new Timer(intervaloEmSecs*1000);
				_intervalo.addEventListener(TimerEvent.TIMER,gerarNovamente);
				_intervalo.start();
		}
		internal static function gerarNovamente(e:TimerEvent):void
		{
			for(var i:uint=1;i<=cameras.length-1;i+=1)
			{
				var cam:CameraVO = cameras.getItemAt(i) as CameraVO;
				cam.nome = "Camera " + i;
				cam.camera = "http://200.141.78.14/imagens1/"+ String(i) + ".jpg?=" + Math.ceil(Math.random()*1000);
				cameras.setItemAt(cam,i);
			}
		}
	}
}

Código fonte do CameraVO, um Model usado para registrar a camera:

/**
 * Copyright (c) 2010 RIACycle LTDA ME. www.riacycle.com
 All rights reserved.

 The MIT License - http://www.opensource.org/licenses/mit-license.php

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in
 all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
package
{
	[Bindable]
	public class CameraVO
	{
		public function CameraVO()
		{
		}
		public var nome:String;
		public var camera:String;
	}
}

Quem acompanha o Twitter, viu eu falar que quem vivesse por mais 3 meses teria grandes surpresas, uma delas é a notícia que saiu hoje no site da Apple. Não que eu já tivesse essa informação de uma certa forma privilegiada, mais rumores nos corredores indicavam que a Apple estava planejando isso. Porém como boato não é nada concreto, fiquei na espera para ver se era realmente verdade.

September 9, 2010
Statement by Apple on App Store Review Guidelines

The App Store℠ has revolutionized the way mobile applications are developed and distributed. With over 250,000 apps and 6.5 billion downloads, the App Store has become the world’s largest mobile application platform and App Store developers have earned over one billion dollars from the sales of their apps.

We are continually trying to make the App Store even better. We have listened to our developers and taken much of their feedback to heart. Based on their input, today we are making some important changes to our iOS Developer Program license in sections 3.3.1, 3.3.2 and 3.3.9 to relax some restrictions we put in place earlier this year.

In particular, we are relaxing all restrictions on the development tools used to create iOS apps, as long as the resulting apps do not download any code. This should give developers the flexibility they want, while preserving the security we need.

In addition, for the first time we are publishing the App Store Review Guidelines to help developers understand how we review submitted apps. We hope it will make us more transparent and help our developers create even more successful apps for the App Store.

The App Store is perhaps the most important milestone in the history of mobile software. Working together with our developers, we will continue to surprise and delight our users with innovative mobile apps.

http://www.apple.com/pr/library/2010/09/09statement.html

AEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!! Parabéns Apple pela sua postura e transparência em não só assumir erros como também pedir desculpas e relaxar mais um pouco no protecionismo de seus produtos para desenvolvedores. Granto que o Steve Jobs agora ganhou meu respeito, mais do que já tinha sobre suas idéias.

As sessões 3.3.1 e 3.3.1, 3.3.2 e 3.3.9, podem aceitar LLVM, coisa que o Packager para iphone e ipad da Adobe faz divinamente e o que acabou gerando um grande atrito entre ambas as empresas e uma rede de desenvolvedores dos produtos da Adobe.

Porém vale ressaltar que sua aplicação não deve baixar nenhum código, que ela respeite essa clausula você pode usar LLVM de Actionscript 3.0 para Objective-C é de boa.

Tenho certeza que a competitividade e o espírito de livre escolha imperou nessa decisão da Apple, que foi de muito bom grado. Agora se você correr rápido pode baixar gratuitamente o Packager para iPhone e iPad antes que a Adobe cobre por isso.

Maravilha ganhar essa notícia em plena semana.

Criar estilos no Flex 4 é quase igual a criar no Flex 3, atento apenas em pequenas mudanças devido essa fase de transição e suporte ao Halo. veja as mudanças.

Flex 3 para aplicar estilo na sua aplicação você fez:

1
2
3
4
5
6
7

< ?xml version="1.0" encoding="utf-8"?>
<mx : Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx : Style source="Estilo.css"/>
 
 
</mx>

No Flex 4 você faz:

1
2
3
4
5
6
7
8
9

< ?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">
	<fx :Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx>
	<fx :Style source="Estilo.css"/>
</s>

Absolutamente não existe diferença entre o uso de um para o outro. Esse exemplo é apenas para uso de CSS externo ao código mxml. Uma vez que você não é tão inocente em escrever o CSS da sua aplicação dentro do próprio arquivo mxml do application.

Mudanças no namespace

Nem tudo são flores, você achou que isso ia passar direto, você pode usar e continuar usando seus componentes do Flex 3 restrito apenas alguns, contanto que respeitem as novas regras de ciclo de vida, você não terá problemas aparente.
O que mudou é que se você continuar usando seus componentes do Flex 3 com o Flex 4 para funcionar os estilos você terá que adicionar um namespace ao arquivo de CSS e também um seletor na frente de cada tag padrão do componente. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* CSS file */
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
 
 
/*
 Para estilizar seu componente Button do Flex 3 você tem 
que fazer isso
*/
mx|Button{
	  /* suas preferencias do CSS aqui */
}
 
/*
	Para usar o Button do pacote Spark você usa assim
*/
s|Button {
	/* suas preferencias do CSS aqui */
}

Veja que não só os css do Flex 3 ainda funcionam como também você poderá mesclar ambos os css, tanto do 4 quanto do 3.

Suporte da ferramenta Flash Builder para CSS:

Você estáva acostumado a ter o Flex Builder com sua facilidade absurda em criar CSS e customizar suas telas, deixando-as cute cute para seus usuários finais. Porém o time de desenvolvimento do Flash Builder (novo nome para o antigo Flex Builder), decidiu tirar o suporte ao CSS da ferramenta e obriga-lo a usar o Flash Catalyst e forcar você a ser um pouco mais ninja. Vai ver algum desenvolvedor com alma boa tenha portado o Flex 3 Style Explorer para o Flex 4 e assim facilitar novamente sua vida.

Houve uma grande polêmica quando estavam fazendo o novo Flex 4 à mais ou menos 1 ano atrás. Quando estavam falando dos novos namespaces e prefixos. Melhorou um pouco do que eles haviam criado devido a comunidade de desenvolvedores reclamarem por causa do problema, eles voltaram atrás e fizeram direito.

No Flex 3 você tem apenas 1 namespace original para criar aplicações Flex, que é:

1

xmlns:mx="http://www.adobe.com/2006/mxml"

Ele define tudo que seu aplicativo precisa para acessar componentes e classes originais do Framework em seu todo.
Só que agora é que vem um grande diferencial do que você estava acostumado a fazer no Flex 3 para o Flex 4. No Flex 4 tudo mudou, temos agora um namespace para cada parte do SDK, isso se da ao fato que temos agora uma nova forma de criar interfaces no Flex 4, através de Skins e o Flash Catalyst é um grande influenciador nesse sentido, além dos seus próprios namespaces o SDK do Flex 4 em sí, vem com vários namespaces pré-definidos, então para não prolongar mais e mais, focarei apenas no SDK.

No Flex 4 temos os seguintes namespaces:

1
2
3

xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"

Tais namespaces representam cada parte do SDK por completo, os novos componentes do Flex 4 ficam no namespace com prefixo S, e os elementos core do SDK ficam no prefixo FX. Já os conhecidos componentes do Flex 3 continuaram no pacote de prefixo mx.

Cada namespace tem suas próprias propriedades, estilos, efeitos e vez ou outra você pode ficar empacado em achar que funciona no Flex 4, muito cuidado nesse aspecto por que mudou muita coisa mesmo para componentes do Flex 3 funcionarem perfeitamente no Flex 4.

Então uma aplicação típica no Flex 3 ficaria assim:

1
2
3
4
5
6
7
8
9
10

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
 
 
	</mx><mx :Script>
		< ![CDATA[
 
 
		]]>
	</mx>

No Flex 4 uma típica aplicação ficaria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13

< ?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">
	<fx :Declarations>
	</fx>
 
	<fx :Script>
		< ![CDATA[
 
		]]>
	</fx>
</s>

Uma das caracteristicas de frameworks RAD (Rapid Application Development) é a fácil abstração da API. Você deve ter em seu aplicativo Flex 2/3 de pequeno e médio porte muito uso do parentApplication, parentDocument, outerDocument. Esse mecanismo ajuda você acessar propriedades já existentes no Application principal e compartilhar métodos entre componentes, fazendo assim uma representação meia boca de interface.

Então você estava acostumado a fazer assim no Flex 3:

parentApplication:

Application principal

1
2
3
4
5
6
7
8
9
10
11
12
13

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
 
 
	</mx><mx :Script>
		< ![CDATA[
 
 
			public var VALOR_DECLARADO:String = "Oba Flex 3/4";
		]]>
	</mx>
	<ns1 :Teste x="120" y="38">
	</ns1>

E nos componentes você acessar a variável VALOR_DECLADO dessa forma:

Componente acessando a variável:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< ?xml version="1.0" encoding="utf-8"?>
<mx :Panel creationComplete="teste()" xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" width="196" height="244">
 
 
	</mx><mx :Script>
		< ![CDATA[
			import mx.core.Application;
 
			private function teste():void
			{
				this.title = parentApplication.VALOR_DECLARADO;
			}
 
		]]>
	</mx>

Você pode acessar tudo que quiser, desde que os métodos no Application principal esteja público.

No Flex 4, como temos 2 tipos de Application, seja ele mx.core.Application ou spark.core.Application, eles mudaram esse acesso, passando de uma forma simples de parentApplication para um singleton (topLevelApplication), onde você pode acessar da mesma forma que você usava, só que agora usando a classe reservada para isso FlexGlobals.

Então o mesmo exemplo no Flex 4 você teria isso aqui:

Application

1
2
3
4
5
6
7
8
9
10
11
12
13

< ?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">
	<fx :Declarations>
	</fx>
 
	<fx :Script>
		< ![CDATA[
				public var VALOR_FLEX_4:String = "Ola Flex 4";
		]]>
	</fx>
</s>

Componente acessando a variável VALOR_FLEX_4:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 
< ?xml version="1.0" encoding="utf-8"?>
<s :Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" creationComplete="panel1_creationCompleteHandler(event)">
	<fx :Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx>
 
	<fx :Script>
		< ![CDATA[
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;
 
 
 
			protected function panel1_creationCompleteHandler(event:FlexEvent):void
			{
				this.title = FlexGlobals.topLevelApplication.VALOR_FLEX_4;
			}
 
		]]>
	</fx>
</s>

O parentDocument continua a mesma coisa, então você não encontrará problemas relacionado a isso em seu processo de migração para o Flex 4. Saiba mais dicas aqui na documentação oficial.

O Twitter te deixa bem preguiçoso quando o assunto é escrever em grande volume.
Embora esse texto não tenha cunho voltado para o Twitter e sim na migração de projetos feitos com o Flex 3.x para o Flex 4. Olha, faz tempo que eu queria escrever isso.

Já teve muita gente me perguntando com dúvidas em nossos cursos, via e-mail,etc. Se era melhor usar o Flex 4 já nos seus projetos ou continuar usando o Flex 3.x? Já teve a pergunta, eu devo aprender primeiro Flex 3 e depois pular para o Flex 4?
De todas essas perguntas eu compreendo que é um receio ao novo e lhe garanto que também já tive meu pé atrás com o Flex 4. Depois que escrevi isso, para depois passar na prática a coisa foi bem feia.
Só que eu queria deixar aqui minha mensagem a todos os leitores do blog e conseqüentemente a todos os desenvolvedores que conhecem o Flex. O Flex não morreu. Não apodrecerá e nem tampouco está horrível.
O grande medo que você pode sentir é ouvir boatos, Ah! Ainda é instável. Ah! Ainda é bugado, Ah! Ainda estão criando.
De fato todas as afirmações são corretas. Só que existe uma grande diferença entre um produto já homologado que é o caso do Flex 3.5.x SDK quanto ao Flex 4.0, Flex 4.1 e Flex 4.5.

Vamos aos fatos

Lascou tudo. A Adobe colocou as mãos pelos pés quando lançou o Flex 4 antes do Flash Player 10.1 e AIR 2.0 sair no mercado. Eu quando vi a troca de comentários nas correções de bugs um dia antes do lançamento eu pensei “Fudeu!”. Desculpem a palavra. Mais lançar o Flex 4 antes da finalização do Flash Player 10.1 e AIR 2.0 é um tremendo erro, não deu em outra, logo em seguida lançaram o Flex 4.1, saiba mais aqui e aqui.
Ai, todos nós nos deparamos com uma crise financeira dos diabos, a Adobe demite 600 funcionários, dos quais uma grande parte do time do Flex Builder, Flex Builder QA, Flex SDK, Flex DVM, Flex DVM QA foi mandado embora. Ficando ai pouco mais de 26 pessoas para trabalhar em um PUTA projeto que é líder de mercado no segmento.

Passado a crise, contratações continuam, e surge os rumores do HTML 5 que faz isso, faz aquilo, que o Flex tem que ser mobile também. Ai vem o MAX 2009 e ela apresenta o futuro do SDK do Flex que suportará dispositivos móveis, antes era chamado de Slider, e agora chamado de Hero.

Pensei UAU! Que mudança. Agora triste por saber que o Flex 4.5 não terá nightlybuilds , aqueles builds que você adora quando vive na beira do penhasco.
Tanta coisa acontecendo e eles não sabem para onde atirar, Sai o Matt Chotin gerente do SDK e vai para uma cadeira de diretor do produto Flex e entra a Deepa antes engenheira agora gerente, pensei, agora vai. Agora vai mudar à passos largos. Enganei-me.

Continuou no mesmo ritmo e a passos normais, listas de discussão diminuíram o tráfego, comunidade está perdida sem saber se o Flex 4 vai vingar ou se o produto está morto. Está um verdadeiro dilema que qualquer tecnologia que chega ao topo tem. Como se manter lá? Eis a ciência do negócio.

Ouvi a história uma vez que a Adobe tinha aberto o código fonte do Flex SDK, tanto compiladores quanto tudo.
De fato é aberto, mais já prestaram atenção que o novo SDK do Flex 4 você não consegue customizar de maneira fácil a GUI do seu sistema como era feito ainda no Flex 3?
Eles nos deram o pão, mais a manteiga e a faca ainda continua deles. Sabe o que é a manteiga e a faca? Chama-se o Flash Facalyst (Oops, Flash Catalyst) e Suite de produtos CS5.
Como disse, é tudo fato verídico, onde essas frases são a mais nua e crua verdade.
Porém, nada está perdido, eis que surge uma luz no final do túnel, e não é o trem.

Acabei me empolgando e desviei do assunto. É possível aplicar o jeitinho brasileiro nisso tudo e contornar todos esses problemas? Mais é claro. Se político tem jeito de driblar a lei, por que agente não?

Nunca desista

É o lema, o Flex 4 fora isso que comentei, que ao meu vê são problemas administrativos de decisões erradas que podem dar em merda. O Produto em si é uma excelência. Eles conseguiram mudar muita coisa que eu acharia impossível em 1 ano e 8 meses de trabalho. Eu tava apostando que eles conseguiram uns 50%, mais no final mesmo ainda em mudanças constantes eu digo que eles chegaram a 80%.
É válido migrar tudo para Flex 4.1?
Sim, aprenda desde agora que o Flex 4 não é apenas uma nova versão do produto, é uma nova versão do paradigma de GUI, eles estão ajudando você a entender que sua interface é modular, flexível, customizada de acordo com as regras do negócio. O Flex 4 vai render e ficar no mercado de vez por mais 3 anos ou até mais que isso.

E o Flex 3.x simplesmente será abandonado?

Já começou. Onde a própria Adobe disse que ia parar. Já fazem 9 meses que eles não mexem mais no SDK, à não ser para consertar bugs antigos ou bugs que impeçam que o SDK pare de funcionar.
As maiores e significativas mudanças é no SDK 4, onde eles tem um grande processo de implementação de novas idéias, de novos frameworks. Eu não deixaria de pensar em migrar um sistema antigo em Flex 2/3 para o Flex 4.

Então eu simplesmente largo a mão do Flex 3 e passo a usar o Flex 4?

Não estou dizendo isso, eu digo à você que, se sua empresa ou cliente precisa usar os novos benefícios do Flex 4 como RSL avançado, customização de telas, velocidade, aumento de performance, melhorias na comunicação remota, entre outras mais de 40 grandes novidades, então é importante que você migre para o Flex 4. E o mais importante que ela/ele tenham dinheiro para investir nisso.
Agora se você está chegando agora ou se tem um projeto em vista que precisa ser feito em Flex. Eu aconselho você pular do Flex 3 e partir para o Flex 4 de imediato.
Ah! Mais eu ainda tenho muita coisa em Flex 3 que demorará muito tempo para ser migrada e meu cliente não quer pagar para migração. Então aconselhe a ele que o sistema dele está fadado ao descaso não mais que 2 anos.
Flex 4 tem suporte a dispositivos móveis otimizado, tem componentes que rodam 4x mais rápido que na versão anterior, é mais leve, é muito mais amigo do designer e fiel ao que o cliente gosta de usar.
Então quer dizer que se eu começar a usar o Flex 4 eu vou re-escrever tudo que eu já tinha no Flex 3?
Claro que não, não seja tolo, você respeitou o ciclo de vida de componentes, criou novos componentes baseados no UIComponent, etc. Então você terá uma grande chance de escrever pouca coisa.
Então, vendo tudo isso, em todos os ângulos, vou ajudar vocês a entender melhor os benefícios do Flex 4, como temos ajudado nossos alunos nos cursos on-line, escrevendo mais a migração do Flex 3 para o Flex 4 e a experiência que tivemos nos últimos 9 meses usando o SDK.
Finalizando, se você continuar vivo pelos próximos 3 meses, garanto que você terá excelentes surpresas pela frente, no ramo de Flex. Otimismo meu amigo, Otimismo. Tempo é um luxo que todos nós temos, prazos não.

Uau, faz 5 meses desde que começamos a treinar o pessoal pela internet e de lá para cá já foram 712 alunos ao total. Obrigado a todos pelo apoio para com a RIACycle e os cursos com nossos instrutores, tem sido um verdadeiro desafio e uma tremenda animação nesse período.

De lá para cá nossos ex-alunos sempre pediam tópicos avançados, então ontem e hoje lançamos 2 novos cursos avançados pela RIACycle, que são:

“Design Patterns para projetos Flex 4“

Esse curso é para quem gosta de se organizar, deixar tudo nos devidos lugares, deixar seu projeto digno de ser bem interpretado pelo flash player e assim ter uma maior fluidez entre telas, comunicação com serviços remotos e deixar sua aplicação leve e robusta, de fácil manutenção.

“Flex 4 Profissional“


Esse curso é voltado para quem já conhece Flex e quer aprofundar no Flex 4 com novo ciclo de componentes, técnicas avançadas de integração contínua, gerar swfs através de ANT Build, e fazer testes unitários, digamos que seja um nível avançado do que você já conhece de Flex e quer ficar mais expert no assunto.

Ambos os cursos tem o objetivo de treinar você a acompanhar o ritmo de projetos de médio e grande porte da solução Flex para o mercado de Rich Internet Applications.

E uma das novidades desses dois cursos é que agora em sua empresa você pode matricular 1 vez até 3 funcionários e pagando menos.

Obrigado a todos pela confiança depositada e iremos retribuir nos cursos, com conteúdo de primeira e exemplos reais.

Como é festa de lançamento estamos sorteando pelo twitter 2 vagas para cada curso, você tem sorte? Então Tweet usando os hashtags #flex4pro e #flexdp.

Eu demorei muito para escrever esse post, primeiro queria ter certeza do que eu falava, depois queria ter a convicção que não iria influenciar ninguém. Então decidi escrever abaixo sobre o que todos estão falando à respeito do HTML 5 vs. Flash vs. resto do mundo. A única certeza que eu tenho quando escrevi isso é que alguns estarão discordando de pontos que coloquei, outros colocarão “Obrigado”. O que de fato eu espero é que você me ajude também a ver diferentes angulos e concluir minhas teorias a respeito disso, afinal de contas o que eu escrever aqui pode virar passado em 6 meses.

Parte Um

O mundo de IT não é diferente do mundo geral. As regras se baseiam em ações (início,meio e fim). A unica rápida mudança que temos é que as coisas andam em velocidade 2x mais que no geral. Ações de descoberta em uma área de medicina demora cerca de 5 anos para iniciar a aplição, depois mais 2 anos para aperfeiçoa-la e assim por diante. A nossa precisa apenas de um desconfortável humor de que não está perfeito e um computador para gerar resultados rápidos. Eu acredito que não mais que 6 meses e você faz estrago. Eu acho que o poder da internet e do boca-a-boca.
Então, vem a sequência disso, precisamos de uma revolução. Quando queremos dizer que algo está ruim e que não estamos mais afim de fazer aquilo, juntamos duas dúzias de pessoas e criamos uma revolução, assim por se dizer você junta a sua fome com a coragem coletiva. Eis que surge um novo “how to”, basta espalhar a informação e pessoas que estam em bem, bem distantes respondem, os chamados adeptos; Pronto você chegou onde você queria, proliferar uma idéia. Faltando apenas o toque final para que isso dê certo. Chamar nomes de peso e dividir a causa com você. Foi assim que Steve Jobs entrou como garoto propaganda do HTML 5 e CSS3.

Parte Dois

Tem aproximadamente 7 milhões de informações na internet segundo o Google. Muita coisa não? Eu acredito que não li nem 0,01% de tudo isso. Comecei a me preparar para a árdua tarefa de ler a respeito disso calmamente, sem muita pressa, primeiro passo feito foi ler no Wikipedia, depois na W3C, acredite lá tem mais informação e sem banners do que qualquer outro lugar que eu conheça. E os resultados não foram assustadores. É onde começa a terceira parte deste estudo que entitulo de “Evolução”.

Evolução

Desde que eu entrei na internet pela primeira vez em 1997, eu apenas percebia gifs, Frontpage code. JS, HTML. Hoje é um mix de tanta tecnologia que fez dela o que é. Eu acredito que o ponta pé inicial sempre tem que existir e é necessário você ter força para sobreviver nesse mundo mesmo sendo uma linguagem de programação voltada para web. O HTML veio para ajudar a cunhar a idéia. Então a idéia pegou, mudou-se muito rápido e talvez ele não tenha acompanhado tamanha revolução ocorrida, até que tentou arduamente com o HTML 4.0.1. Só que não é fácil você definir uma linguagem que rode em diversos sistemas operacionais, que seja plataforma e que tenha variações de navegabilidade, navegadores amigo, navegadores. Eles são um saco para o HTML. Cada um quer se comportar do seu jeito. Oras mais é natural que cada um queira se comportar diferente. Alguns brigam entre si, outros tentam boicotar, outros são os bons moços e poucos são vilões.
O HTML tem sido um mestre evolutivo nesse aspecto. Joga muito bem nesse meio de campo e está dando conta do recado. Então começo a perguntar onde e em quais navegadores ele está tão respeitado, é onde começo com a próxima parte chamada de “mudanças”.

Mudanças

As mudanças começaram em 2006 quando a Apple, Mozilla Fundation e Opera juntaram-se para melhorar a linguagem. Cada empresa seja ela seu foco lucros ou não. Tem um mútuo interesse em ser dominante na área, o que acaba sendo bom por um lado e muito pior por outro, eu já já explico isso. Voltando ao meu raciocínio, a Apple fez significantes doações para o Webkit, no qual ela usa em seus produtos Apple Safari, iOS, logicamente tais mudanças geram um preço que é cobrado pelos acionistas da empresa no balando trimestral sempre. E claro ela precisa defender isso, já que parte de seus produtos é baseado nessas significantes melhorias.

O HTML 4 para o 5 mudou assim:

Em HTML 4 você criava um documento .html da seguinte maneira.

1
2
3
4
5
6
7
8
9
10
11

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 4.x e XHTML</title>
</head>
 
<body>
<p>Exemplo de HTML 4</p>
</body>
</html>

Com o HTML 5 você cria um documento HTML assim:

1
2
3
4
5
6
7
8
9
10

< !doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></head>
  <body>
    <p>Exemplo de paragrafo</p>
  </body>
</html>

Significativa mudança em termos digitação. Mais simples de definir o charset da página, removeram a parte chata de definir DTD do documento e também para XHML removeram os tais namespaces.
A grande jogada do HTML 5 é de fato promover a web semantica, aquela história já velha e conhecida de todos do microformats. Só que em tese isso funciona perfeito, no mundo real e cruel provavelmente daqui alguns anos, hoje não.

Inline SVG (Colando código de SVG)
Outra promessa que pode ser muito interessante é vetorizar o que você tiver. Imagine suportar Tudo em Inline SVG, permitir que você use um editor SVG, copie o código e jogue no novo tag porém hoje não é possível em nenhum navegador existente. Quando existir você pode testar esse código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< !doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></head>
  <body>
    <p>Uso de SVG com HTML 5</p>
 
    <svg><rect x="136" y="170" fill="#29ABE2" width="24" height="119"/>
    <rect x="173" y="233" fill="#009245" width="24" height="56"/>
    <rect x="213" y="252" fill="#ED1C24" width="24" height="37"/>
    </svg>
  </body>
</html>

Bem fácil, não é? Uma repentina mudança para quem estava acostumado apenas a rendenizar SVG. Pois bem, continuando nossa investigação vimos que tem novos tags no HTML 5, que você pode ver na íntegra aqui.

Depois de ver todas as mudanças e novos tags cheguei a uma pequena conclusão das novidades. A grande bola da vez é o tag

Canvas

, ele é o principal responsável pelo que há de mais legal e que que levou o HTML 5 ao topo da discussão sobre o assunto. Segundo a documentação em suma, ele serve para rendenizar gráficos em tempo de execução muito usado em jogos, animações, só que rendeniza apenas em 2D.

Então como eu posso fazer um simples exemplo?

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

< !doctype html>
<html>
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
	<script type="text/javascript">
 
	$(document).ready(function () {
			desenharBarras();
	});
 
	function desenharBarras()
	{
		cronometro = setInterval("incrementarX()",120);
	}
	var x = 5;
	function incrementarX()
	{		
				var meuCanvas = document.getElementById('canvasContainer');
				if(meuCanvas && meuCanvas.getContext) {
					var context = meuCanvas.getContext('2d');
					context.beginPath();
					context.rect(x,meuCanvas.height >>> 1,3, (Math.random() *Math.pow(7,2)) - (meuCanvas.height >>>1) + 100);
					context.fillStyle = "#779AC4";
					context.closePath();
					context.fill();			
				}
				if (x < meuCanvas.width){
				x += 5;
				}else{
					alert("completou o gráfico");
					clearInterval(cronometro);
				}
			}
	 </script>  
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></script></head>
  <body>
    <p>Uso de Canvas para criar gráficos de barra</p>
 
	<canvas id="canvasContainer" width="700" height="500">
      <!-- Basicamente você vai usar Javascript igual como se usa a API do Flash para desenho -->
      <p>Você pode escrever isso caso seu usuário não tenha um navegador compatível e dizer que não suporta o Canvas</p>
    </canvas>
  </body>
</html>

O exemplo acima simula a criação de um gráfico de barra, podendo ai você colocar em um dashboard complementar que você venha a construir. Porém mesmo gastando pouco mais de 30min para fazer esse exemplo eu percebi que exitem diversos outros exemplos, que você pode usar como base para testar seus conhecimentos e ver o quanto burro você foi em não aprender trigonometria na escola.

Outra novidade interessante que o HTML 5 vai proporcionar para o pessoal de Web standards, é a possibilidade de se conectar com sockets, Existe um famoso chamado Node.js que faz isso bem fácil e pode te ajudar a entender muito bem como vai rolar, Eu sei como funciona conexão com sockets, então fui investigar e é 90% igual como é feito em qualquer linguagem de script, seja ela Js, Actionscript, AppleScript.

Outra mudança significativa foi a possibilidade de sincronização offline, você como desenvolvedor pode deixar o usuário preenchendo o cadastro mesmo que a conexão tenha caído e depois quando ele entrar no site, sincronizar o que ele havia deixado em aberto. O que me preocupa nesse sentido é a especificação de segurança nesse ponto. Coisa que ainda não está totalmente definida e tem pouco assunto sobre o mesmo.

Se você pensa que jamais será localizado quando navegar na internet, você se engana, o futuro é hoje nesse quesito, você pode visitar um site e ele pode pedir sua localização, igual como é feito com seu Android, iphone, Nokia phone, blackberry, só que agora é mais uma função nova do navegador do que em sí uma função do HTML 5. Já era hora deles terem soltado uma especificação nesse sentido para os fabricantes de navegadores. O grande problema é que a precisão disso está ligado apenas ao seu ISP e não ao seu IP. Eu acredito que isso possa ir amadurecendo com futuras versões.

Integrando também recursos de multimidia como simples sintaxe para vídeos e audio. Por enquanto para audio os formatos aceitos são mp3 e ogg. E o tag de video apenas suporta videos com padrão MPEG-layer 4 (.mp4), H.264, Speex, AC,etc. O que para mim é um ponto bem complicado quando se tem diversos codecs e diversos navegadores, atualmente apenas o Chrome suporta MPEG-layer4 já o firefox e opera apenas ogg, speex etc. O que torna a vida de quem vai criar o video complicada por que terá que ainda criar javascripts para detectar o navegador e para nao criar 2 tipos de videos, fazer o swap entre um player nativo ou um player de video com Flash.

Aqui é um exemplo típico de player HTML 5 nativo

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< !doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></head>
  <body>
    <p>Uso de vídeo com HTML 5</p>
 
  	<video width="854" height="480" preload controls >
    <source src="meuvideo.mp4" type='video/mp4'/>
    </video>
  </body>
</html>

E para o audio, a mesma coisa me preocupa, atualmente apenas mp3 é suportado pelo Chrome, no firefox suporta apenas ogg vorbis. Tem algumas técnicas que voce adiciona ou faz o transcode nativo para ogg, mais para usuário final, ninguém vai querer fazer transcode de cada musica para ouvi-la. Ele se preocupa apenas em dar o play.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< !doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></head>
  <body>
    <p>Uso de musica com HTML 5</p>
 
  	<audio controls="controls">
    <source src="musica.mp3" type='audio/mp3'/>
 
  </audio></body>
</html>

Por fim, chegamos a parte de mudanças. Eu abreviei ao máximo para não ficar cansativo, se você chegou até aqui, parabéns, você é meu leitor preferido. A próxima parte eu chamo de “Competitividade”.

Competitividade
Embora o HTML 5 tenha trazido recursos interativos para o usuário final e coisas bem legais para o desenvolvedor eu ainda vejo que tem muito caminho pela frente, que na situação atual já se pode fazer coisas legais com ele, não tão avançadas como outras tecnologias já conhecidas e competitivas dele o SilverLight e o Flash.

Então, como eu vejo isso na competitividade atual e daqui para os próximos 5 anos? Eu vejo que tanto para o lado do desenvolvedor quanto para o lado do usuário, teremos coisas boas. Por que entre eles HTML 5, Silverlight, Flash e outros, eu percebo que a parte que falei evolutiva desse artigo vem a encaixar perfeitamente no que escrevo agora. Você poderá ver exemplos como o “Muro” um aplicativo feito pela DeviantArt, lhe chocando, porém se você for ver outros concorrentes como o que o pessoal da Aviary.com faz, você fica na dúvida de qual é o melhor e qual deles vai vencer na concorrência.
Eu tenho certeza que nenhum vai ganhar do outro. Todas as tecnologias vão ser alternativas, não terá mais essa preferência de “só flash”,”só silverlight”,”só html5″, quem vai decidir o que usar no final ou é o cliente ou é o usuário final. A web precisa de diversificação de espécimes como essas, não dá para ter apenas uma tecnologia predominante, tem que existir várias, onde-se é possivel manter em armonia ambos os ninchos existentes. É ai onde eu entro com o próximo tópico que chamo de “Vendedores”.

Vendedores

Cada um sempre quer vender seu peixe, e por mais que você do time do web standard queira ver por outro lado da moeda, você deve concordar comigo a segregação de cada um dos vendedores em uma especificação ainda em andamento e a fragmentação das implementações. Empresas que tem 100% de suas ações voltadas para produção de conteúdo web como o Google vão sempre sair na frente em consolidação das implementações, tanto é que o Chrome é o único navegador existente que suporta todas as especificações já definidas, coisa que outros até mesmo a Apple ainda não suporta.

Fato tal é que me preocupa nesse cenário, eu fico ainda cometendo os mesmos erros e com medos dos antigos fantasmas da web de 1997. Onde terei que ter jogo de cintura para lhe dar com a interoperabilidade das versões do navegador. Pergunto eu? Eles apenas se interessam na semântica da linguagem e não na semântica do navegador? Mesmo já tendo ouvido que navegador era coisa do passado. Eu acho que ainda teremos por muito tempo navegadores e por muito tempo vendedores implementando novas funções DOM para que facilite a vida do usuário e seu peixe venda mais rápido que o do vizinho. Assutador como desenvolvedor não?

Uma vez que eu tenho essa preocupação, você viu que em “mudanças”, grande parte é relacionada ao navegador, colocando mais poder ao DOM de interpretação e não na linguagem em si. Seria esse um calcanhar de aquiles que eu vejo em questões de compatibilidade? Eu só aposto nisso daqui à 10 anos para ver se realmente mudou ou se continua como está, já que não só de desktop vive mais a web.
É onde agora entro na última parte do artigo que falo sobre aplicações Web e HTML 5. Chamo ela de continuação.

Continuação

Depois de ter analisado, cansavelmente todos os exemplos que eu pude achar sobre o assunto, estudar e ver que ainda eu preciso esperar um pouco, quem sabe 1 ou 2 anos para ver realmente coisas prontas, eu falo isso por que minha vivência em mercado corporativo é grande, e se tem uma coisa que o pessoal que paga seu projeto odeia é algo como “working in progress” ou não homologado. Enquanto não for homologado seja aqui no Brasil ou lá fora o HTML 5 ainda não vai entrar nesse mercado, o que pode demorar a incomodar outras tecnologias do tipo como Flash/Flex.
Principalmente orgãos do governo que temem por segurança, e estabilidade de uso.
Terei a certeza que será amplamente usado em material de propaganda, start-up’s, aplicativos web para celulares como o Sencha onde o clico de vida de uma aplicação não tem tanta burocracia como os demais.

Posso investir nisso? Se você é curioso sem dúvida, você nunca sabe de onde a próxima oportunidade virá. Como você, eu sempre procuro estudar novidades e o HTML 5 como a plataforma Flash são as minhas preferidas, nem uma e nem outra ao meu ver competem em sí, ela trás apenas alternativas, tais alternativas me impressionaram.
O HTML 5 pode até ser aplicado atualmente em aplicações Web, mais eu prefiro por enquanto ficar com o JQuery. A parte mais dificil para mim escrever isso, podem apostar, foi não falar do Flash/Flex, não dizer quem é melhor que quem. Coloquei as diferenças ao lado e me posicionei como um novo desenvolvedor querendo aprender novidades.

E disponibilizo abaixo links da minha pesquisa, quero ouvir de você seu ponto de vista.

Links da pesquisa:

• W3C definições do HTML 5
• Wikipedia HTML 5
• Gráfico comparativo atual dos navegadores e engines que já suportam parte do html 5
• Vários exemplos do HTML 5 para você ver
• Site sobre HTML 5 com 4 links úteis
• Galeria de sites que já usam HTML 5
• Excelente livro on-line sobre o HTML 5(Grátis e em inglês)
• Vários e impressionantes exemplos do tag Canvas
• Opera Dev Central – vários artigos técnicos sobre HTML 5 e tutoriais
• HTML 5 e sua tabelinha Cheat Sheet