Olá a todos! Fica aqui um pequeno apontamento sobre o evento que decorreu na FNAC da Rua de Santa Catarina aqui no Porto:

O workshop correu bastante bem! A sala esteve cheia e o ambiente era porreiro.

Já estava habituado a fazer algumas apresentações… No entanto, até Sábado, quando as fazia, sabia que 100% do público estava lá para ouvir vários speakers a falarem sobre um assunto que lhes interessava.

Neste caso, havia uma mistura dos dois. Havia claramente pessoas que se deslocaram ? FNAC para ouvir falar sobre o tema e que estavam interessadas, e havia outras que claramente “aterraram” lá apenas para beber um chá e comer uns bolinhos e aproveitaram e ficar a ouvir.

O rapaz do vídeo e áudio da FNAC foi cinco estrelas! Sempre preocupado com a qualidade da imagem / som da apresentação e a soltar um sorriso quando eu falei do Amiga 500 e do Spectrum 48k

De qualquer forma, só tive duas “desistências” e eram de dois senhores mais velhos, que ainda “aguentaram uns bons quarenta minutos (a apresentação teve 50m)!

Foi engraçado ver uma família inteira interessada no tema e a acenar com um “sim” sempre que via / ouvia certos temas que eu ia falando e com os quais concordava.

Sem dúvida uma iniciativa muito interessante por parte da FLAG, em conjunto com a FNAC!

PS: Para quem quiser ver os slides da apresentação, podem seguir o link em baixo:

Desenho de soluções interactivas para diversas plataformas

Olá a todos!

No próximo dia 3 de Setembro, ? s 17 horas, na FNAC de Santa Catarina, vou dar um workshop com o título “Desenho de soluções interactivas para diversas plataformas”.

O workshop vai-se centrar na forma como devemos pensar / desenhar e desenvolver aplicações para vários dispositivos ao mesmo tempo.

Aqui ficam alguns dos tópicos que vão ser abordados:

• A mudança de paradigma com a introdução do mobile (telefones e tablets);
• Tipos de ecrãs e resoluções diferentes – ter atenção ao detalhe!;
• Do rato de computador para o corpo do utilizador;
• A harmonia entre as diferentes experiências e os diferentes dispositivos;
• Tipos de utilizadores nos vários dispositivos;
• As diferentes “App stores”;
• Uma linguagem, várias aplicações / Uma aplicação, várias linguagens;

Este workshop insere-se em uma séries de eventos que o Adobe User Group Porto vai fazer, em conjunto com a FLAG.

A saber:

8 de Setembro, ? s 22 no NorteShopping

Rui Silva : “Importância da arquitectura em design e desenvolvimento de soluções interactivas”.

Este workshop vai falar da integração de diversos dispositivos numa única experiência de utilização e como isto é vital nos dias de hoje com os smartsphones, tablets, e desktops.

11 de Setembro, ? s 17 no Marshopping

Rui Silva: “Aura tecnológica: Interacção distribuída”

Este workshop vai falar sobre a definição e reutilização de elementos arquitecturais para o desenho e desenvolvimento de soluções interactivas.

Apareçam e vamos partilhar ideias, experiências, e tomar um café

Um abraço, Mauro.

Olá a todos!

A Adobe lançou, esta semana, a versão 2.6 da sua framework AIR. Esta framework permite criar projectos que correm em cima do Flash Player e que permite o acesso a informações / interacções com o computador / dispositivo mobile do utilizador.

Aqui ficam vários links sobre tudo o que tem sido escrito sobre esta nova release, alguns tutoriais e ainda um jogo muito interessante:

• Everything new in Adobe AIR 2.6
• What’s new in Adobe AIR 2.6
• iOS Features in Adobe AIR 2.6
• Developing for iOS with AIR for Mobile 2.6
• “Comb Over” : An AIR 2.6 multiscreen game

?

Abraço e até à próxima!

Olá a todos!

Tem sido difícil arranjar tempo para escrever alguma coisa aqui para o blog. O meu tempo tem sido quase totalmente dedicado ao Adobe User Group Porto. Desde arranjar autores para escrever para o blog, a arranjar novos patrocinadores, a tentar descobrir sítios para novos eventos e manter a marca nas redes sociais, o tempo que me resta é pouco para poder dedicá-lo a outra coisa qualquer.

No entanto, venho aqui deixar uma notícia que alegra, de certeza, todos os designers, web designers, e pessoa que procuram inspiração em Portugal!

A Computer Arts Portugal nasceu!

Para quem nunca ouviu falar da Computer Arts, esta é uma revista muito conceituada no Reino Unido que nos dá a conhecer excelentes artistas e mostra-nos sempre grandes trabalhos com conteúdos de grande qualidade.

O site já está online e, em breve, a revista vai ser lançada na rua para todos comprarmos.

Podem já ver a capa aqui e ver todo o portfólio no behance:

Enfim, resta-me dar os parabéns à equipa e dar força para tudo o que possa vir aí!

PS: Aguardem, porque, em princípio, haverá notícias sobre novas parcerias do Adobe User Group Porto com estes “senhores”.

Apesar de ter mais de onze meses, esta é dos melhores trinta minutos que se podem ouvir na net sobre o poder dos sites da web social (Twitter, Facebook, Digg).

Kevin Rose, co-founder do Digg, WeFollow e Revision3, fala-nos sobre o que fazer para tornar o nosso site popular e que tipo de funcionalidades são necessárias para um site que queira ter sucesso hoje em dia.

Um verdadeiro must!

Taking your Site from One to One Million Users by Kevin Rose from Carsonified on Vimeo.

O primeiro evento do Adobe User Group Porto já la vai e tudo correu muito bem!

O grupo de pessoas que apareceu era excelente e cheio de boas ideias!

Tivemos boas discussões sobre o que está a acontecer no Norte / Porto. Falamos sobre as condições de trabalho, a diferença Porto / Lisboa, e o que falta para que o Porto se afirme no panorama do web design e do desenvolvimento.

Tivemos também oportunidade de testar a nossa nova conta Adobe Connect versão Pro que passou com distinção no teste! Aguentou cerca de três horas com várias pessoas online e a participarem no chat com os membros que estavam no local.

Podem ver as fotos todas no Facebook ou na galeria do grupo

Se é em 2014 não sei, mas lá que é interessante é!

Se calhar ainda vai demorar algum tempo para este tipo de tecnologia estar disponível para todos, mas entretanto sonhemos um pouco com estas possibilidades:

A utilização de efeitos no Flex é um dos grandes pedidos da comunidade. O uso moderado de efeitos pode tornar a sua aplicação mais bonita e funcional, só não abuse porque o usuário do sistema vai cansar de ver tanto componente girando na tela

Uma notícia não muito boa do Flex 4 é que não podemos mais utilizar as propriedades MoveEffect, ResizeEffect.. entre outros no Flex 4, devendo atribuir cada efeito diretamente na declaração do documento mxml. Isso significa que toda a descrição de um efeito deve estar contida na tag fx:Declarations.

Efeito Move

Este efeito é responsável em mover componentes na tela. Uma simples aplicação para ela é, por exemplo, uma tela de login:

<?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>
		<s:Move id="MoveDown" target="{login}"
				yFrom="-200" yTo="200"/>
		<s:Move id="MoveUp" target="{login}"
				yFrom="200" yTo="-200"/>
	</fx:Declarations>

	<s:creationComplete>
		<![CDATA[
			MoveDown.play();
		]]>
	</s:creationComplete>

	<s:Panel id="login" title="Login"
			 width="200" height="150"
			 x="300"
			 >
		<s:Button label="ok" x="50" y="50">
			<s:click>
				<![CDATA[
					MoveUp.play();
				]]>
			</s:click>
		</s:Button>
	</s:Panel>

</s:Application>

Neste simples exemplo, criamos dois efeitos chamados de MoveDown e MoveUp. O efeito Move possui as propriedades yTo e yFrom, que descrevem a animação do efeito de mover, da coordenada y de origem e da coordenada y de destino. O mesmo vale para xFrom e xTo. Outra propriedade é o target, que informa o alvo em que o efeito será realizado. Neste caso o target é o panel criado.

Para realizarmos o efeito, usamos o método play(). Ele é feito no creationComplete da aplicação e no click do botão.

Aplicando bounce

Bom, o efeito acima é muito simples, e possivelmente você não gostou dele. Você quer dar mais “efeito ao efeito” e para isso existem os efeitos do tipo bounce. Esta técnica aplica um efeito de “mola” no componente, e é ativado através do efeito s:Bounce do Flex 4.  Veja:

<fx:Declarations>
	<s:Bounce id="bounceEasing"/>
	<s:Move id="MoveDown" target="{login}"
			yFrom="-200" yTo="200"
			easer="{bounceEasing}"
			duration="2000"
			/>
	<s:Move id="MoveUp" target="{login}"
			yFrom="200" yTo="-200"
			/>
</fx:Declarations>

Neste exemplo, criamos o efeito Bounce e aplicamos ele no efeito MoveDown, através da propriedade easer. Utilizamos também a propriedade duration para definir a duração do movimento, em milissegundos.

Aplicando efeitos simultâneos

Podemos aplicar efeitos ao mesmo tempo em um componente através da tag Parallel (Paralelo). O Exemplo a seguir ilustra como combinar o efeito de Fade (aparecer) com o Move:

<s:Parallel id="MoveDown" target="{login}">
	<s:Move
		yFrom="-200" yTo="200"
		easer="{bounceEasing}"
		duration="2000"
			/>
	<s:Fade alphaFrom="0" alphaTo="1"
		duration="2000"
		/>
</s:Parallel>

Neste exemplo, criamos a tag s:Parallel e já definimos o seu target. Inserimos então os efeitos Move e Fade. O Fade possui duas propriedades novas, alphaFrom e alphoTo. Alpha é o valor da transparência sendo que o valor 0 é totalmente transparente e o valor 1 é totalmente opaco.

Aplicando Targets dinâmicos

Nos exemplos exibidos, sempre relacionamos o efeito ao componente. Ou seja, todos os efeitos faziam uma referência ao componente. Em determinados momentos, precisamos criar componentes dinâmicos no Flex, e para que possamos aplicar efeitos nestes componentes, precisamos definir um target dinâmico também. O método play que foi usado nos exemplos anteriores possui um parâmetro que aceita um array de componentes, que pode ser usado da seguinte forma:

NomeDoEfeito.play([componente1,componente2]);

O exemplo a seguir mostra este processo:

<?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>
	<s:Bounce id="bounceEasing"/>

	<s:Parallel id="MoveDown">
		<s:Move
			yFrom="-100" yTo="400"
			easer="{bounceEasing}"
			duration="2000"
			/>
		<s:Fade alphaFrom="0" alphaTo="1"
				duration="1000"
				/>
	</s:Parallel>

	<s:Fade id="Sumir" alphaFrom="1" alphaTo="0"
			duration="500"
			/>

</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.collections.ArrayList;

		import mx.events.EffectEvent;
		private function OnClick(e:MouseEvent):void
		{
			Sumir.play([e.target as Button]);
		}
	]]>
</fx:Script>

<s:Button label="Criar">
	<s:click>
		<![CDATA[

		var b:Button = new Button();
		b.x = Math.round(Math.random() * 600);
		b.label = b.x.toString();
		b.y = -100;

		b.addEventListener(MouseEvent.CLICK,OnClick);

		this.addElement(b);
		MoveDown.play([b]);

		]]>
	</s:click>
</s:Button>

</s:Application>

Neste exemplo, criamos botões dinâmicos que caem na tela. Ao clicar no botão, aplicamos um efeito de Fade para que tenhamos a sensação de que ele sumiu da tela, apesar dele continuar lá. Veja que usamos três efeitos agora, o primeiro é contido no Parallel (2 efeitos então) e o terceiro é um Fade para sumir o botão.

Ao clicar no botão “Criar”, criamos dinamicamente um botão e definimos o valor da coordenada x como um número randômico até 600. A coordenada y é –100, pois ainda vamos aplicar o efeito de movimento nele. Também adicionamos um listener no click do botão, executando o método OnClick. Este método irá executar o efeito de Fade.

Como os efeitos são realizados em componentes dinâmicos, temos que passá-lo como parâmetro do método play. Como este parâmetro é sempre um array, usamos os colchetes para simular um array com um elemento.

Atenção: Este exemplo serve apenas para ilustrar o processo. Veja que mesmo sumindo com os botões através do efeito fade, eles continuam lá, na memória.

No próximo artigo iremos falar mais sobre efeitos. A idéia é aplicar os efeitos em coisas úteis, ao invés de ficar mostrando como cada efeito funciona sem nenhum uso apropriado. Idéias pessoal??

A utilização de efeitos no Flex é um dos grandes pedidos da comunidade. O uso moderado de efeitos pode tornar a sua aplicação mais bonita e funcional, só não abuse porque o usuário do sistema vai cansar de ver tanto componente girando na tela

Uma notícia não muito boa do Flex 4 é que não podemos mais utilizar as propriedades MoveEffect, ResizeEffect.. entre outros no Flex 4, devendo atribuir cada efeito diretamente na declaração do documento mxml. Isso significa que toda a descrição de um efeito deve estar contida na tag fx:Declarations.

Efeito Move

Este efeito é responsável em mover componentes na tela. Uma simples aplicação para ela é, por exemplo, uma tela de login:

<?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>
		<s:Move id="MoveDown" target="{login}"
				yFrom="-200" yTo="200"/>
		<s:Move id="MoveUp" target="{login}"
				yFrom="200" yTo="-200"/>
	</fx:Declarations>

	<s:creationComplete>
		<![CDATA[
			MoveDown.play();
		]]>
	</s:creationComplete>

	<s:Panel id="login" title="Login"
			 width="200" height="150"
			 x="300"
			 >
		<s:Button label="ok" x="50" y="50">
			<s:click>
				<![CDATA[
					MoveUp.play();
				]]>
			</s:click>
		</s:Button>
	</s:Panel>

</s:Application>

Neste simples exemplo, criamos dois efeitos chamados de MoveDown e MoveUp. O efeito Move possui as propriedades yTo e yFrom, que descrevem a animação do efeito de mover, da coordenada y de origem e da coordenada y de destino. O mesmo vale para xFrom e xTo. Outra propriedade é o target, que informa o alvo em que o efeito será realizado. Neste caso o target é o panel criado.

Para realizarmos o efeito, usamos o método play(). Ele é feito no creationComplete da aplicação e no click do botão.

Aplicando bounce

Bom, o efeito acima é muito simples, e possivelmente você não gostou dele. Você quer dar mais “efeito ao efeito” e para isso existem os efeitos do tipo bounce. Esta técnica aplica um efeito de “mola” no componente, e é ativado através do efeito s:Bounce do Flex 4.  Veja:

<fx:Declarations>
	<s:Bounce id="bounceEasing"/>
	<s:Move id="MoveDown" target="{login}"
			yFrom="-200" yTo="200"
			easer="{bounceEasing}"
			duration="2000"
			/>
	<s:Move id="MoveUp" target="{login}"
			yFrom="200" yTo="-200"
			/>
</fx:Declarations>

Neste exemplo, criamos o efeito Bounce e aplicamos ele no efeito MoveDown, através da propriedade easer. Utilizamos também a propriedade duration para definir a duração do movimento, em milissegundos.

Aplicando efeitos simultâneos

Podemos aplicar efeitos ao mesmo tempo em um componente através da tag Parallel (Paralelo). O Exemplo a seguir ilustra como combinar o efeito de Fade (aparecer) com o Move:

<s:Parallel id="MoveDown" target="{login}">
	<s:Move
		yFrom="-200" yTo="200"
		easer="{bounceEasing}"
		duration="2000"
			/>
	<s:Fade alphaFrom="0" alphaTo="1"
		duration="2000"
		/>
</s:Parallel>

Neste exemplo, criamos a tag s:Parallel e já definimos o seu target. Inserimos então os efeitos Move e Fade. O Fade possui duas propriedades novas, alphaFrom e alphoTo. Alpha é o valor da transparência sendo que o valor 0 é totalmente transparente e o valor 1 é totalmente opaco.

Aplicando Targets dinâmicos

Nos exemplos exibidos, sempre relacionamos o efeito ao componente. Ou seja, todos os efeitos faziam uma referência ao componente. Em determinados momentos, precisamos criar componentes dinâmicos no Flex, e para que possamos aplicar efeitos nestes componentes, precisamos definir um target dinâmico também. O método play que foi usado nos exemplos anteriores possui um parâmetro que aceita um array de componentes, que pode ser usado da seguinte forma:

NomeDoEfeito.play([componente1,componente2]);

O exemplo a seguir mostra este processo:

<?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>
	<s:Bounce id="bounceEasing"/>

	<s:Parallel id="MoveDown">
		<s:Move
			yFrom="-100" yTo="400"
			easer="{bounceEasing}"
			duration="2000"
			/>
		<s:Fade alphaFrom="0" alphaTo="1"
				duration="1000"
				/>
	</s:Parallel>

	<s:Fade id="Sumir" alphaFrom="1" alphaTo="0"
			duration="500"
			/>

</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.collections.ArrayList;

		import mx.events.EffectEvent;
		private function OnClick(e:MouseEvent):void
		{
			Sumir.play([e.target as Button]);
		}
	]]>
</fx:Script>

<s:Button label="Criar">
	<s:click>
		<![CDATA[

		var b:Button = new Button();
		b.x = Math.round(Math.random() * 600);
		b.label = b.x.toString();
		b.y = -100;

		b.addEventListener(MouseEvent.CLICK,OnClick);

		this.addElement(b);
		MoveDown.play([b]);

		]]>
	</s:click>
</s:Button>

</s:Application>

Neste exemplo, criamos botões dinâmicos que caem na tela. Ao clicar no botão, aplicamos um efeito de Fade para que tenhamos a sensação de que ele sumiu da tela, apesar dele continuar lá. Veja que usamos três efeitos agora, o primeiro é contido no Parallel (2 efeitos então) e o terceiro é um Fade para sumir o botão.

Ao clicar no botão “Criar”, criamos dinamicamente um botão e definimos o valor da coordenada x como um número randômico até 600. A coordenada y é –100, pois ainda vamos aplicar o efeito de movimento nele. Também adicionamos um listener no click do botão, executando o método OnClick. Este método irá executar o efeito de Fade.

Como os efeitos são realizados em componentes dinâmicos, temos que passá-lo como parâmetro do método play. Como este parâmetro é sempre um array, usamos os colchetes para simular um array com um elemento.

Atenção: Este exemplo serve apenas para ilustrar o processo. Veja que mesmo sumindo com os botões através do efeito fade, eles continuam lá, na memória.

No próximo artigo iremos falar mais sobre efeitos. A idéia é aplicar os efeitos em coisas úteis, ao invés de ficar mostrando como cada efeito funciona sem nenhum uso apropriado. Idéias pessoal??

A Adobe e outras empresas do ramo da multimédia, plataformas web, etc. andam a tentar alcançar o novo mercado emergente das tablets desde que o novo iPad, da Apple, foi lançado para o mercado.

Se bem se lembram, antes da mediática alteração à EULA, por parte da Apple em relação ao export do Flash, a Adobe tinha-se juntado à revista Wired para lançar as suas publicações em um formato digital. Depois de muita controvérsia parecia que a discussão ia ficar por aí…

No entanto parece que o esforço está a ser feito de novo para produzir uma forma simples de exportar as revistas feitas para impressão através do InDesign directamente para um formato que possa ser interpretado tanto pelo iPad como por outras tablets que possivelmente irão correr a plataforma da Google, o Android.

Aqui fica um exemplo do que se pode conseguir com a nova ferramenta de workflow da Adobe: