O resultado final que comporta um unico ficheiro PSD prontinho a ser usado nas suas aplicações, completamente separado por layers, grupos e muito tem identificado. Com o poder do Flash Catalyst já devem supor que será simplesmente muito facil importa-lo para as vossas aplicações flex…

Segue a preview (cliquem para ver em maior):

Como não foi aprovado, mas no entanto está 100% funcional, ainda estou meio indeciso se o coloco à venda no graphicriver, se o vou utilizar para um futuro cliente ou o disponibilizo gratuitamente aqui no blog para download…

Que dizem?

Abraço.

Como já devem ter visto no blog, vou partir de férias para o Brasil amanha bem cedo, pelo que a partir das 23:59 o fórum, blog e contactos por emails estarão a funcionar apenas minimamente… 

Ou seja, é muito provavel que durante dezembro e até dia 10 de janeiro de 2009 eu me encontre totalmente incontactavel… provavelmente verei os meus emails, blog e fórum algum vezes, mas dificilmente responderei quer a duvidas no fórum ou email enquanto que o blog não deverá ter qualquer novo post durante este tempo pelo que peço a vossa compreensão!

E pronto, o anuncio está feito e a partir de mais logo estará tudo a meio gaz! 

Aproveito para vos desejar um óptimo Natal e um excelente final de ano na companhia de amigos e familiares. Que 2009 vos traga muito sucesso!

Abraço.
Mário Santos.

http://www.photoshopstar.com/blog/photoshopstar-birthday-giveaway/

e habilita-se a ganhar:

Pelos comentários:

• 2 x Subscrições de 1 ano no deviantART
• 2 x Subscrições de 3 meses no deviantART
• 1 x Subscrição de um ano no GameWallpapers
• 1 x Subscrição de 1 ano no CGWallpapers
• 3 Meses de free hosting no Host Gator (Hatchling package)
• 2 x Copias do Killer Domains e-book por Daily Blog Tips

Pelos trackback’s:

• 1 x Pagina programada pelo PSD2HTML.com (Valor de $211)
• 2 x Licenças de desenvolvedor em Blubs WordPress theme (Valor de $198)
• 3 Mêses de publicidade no PhotoshopStar (Valor de $150)

O sorteio será feito quando forem atingidos os 175 comentários e os 35 trackback’s.

Colaborem! Não custa nada!

Nota: os trackbacks devem ser feitos para os patrocinadores também:

http://www.blogperfume.com/

http://www.webappers.com/

http://www.psd2html.com/

http://theuniversitykid.com/

http://www.dailyblogtips.com/

http://www.dotcompalsphotoblog.com/

http://www.oiopublisher.com/

http://www.photoshopstar.com/

Abraço.

Neste exemplo podem encontrar alguns detalhes de código que pode ser muito util, como o alinhamento central do blog, algum css (externo), viewstack e linkBar, bem como colocar todas as nossas imagens no flex.

Se contar-mos com o tamanho da framework (cerca de 220 kb) e sabendo que o final da nossa aplicação compilada o tamanho do swf é de 297kb, conseguimos incorporar as imagens no flex, e fazer o seu layout com apenas 77kb de dados e com uma imagem bem original no flex, quase uma skin.

Podem fazer o download do pdf com o tutorial aqui.

Dentro do pdf encontram-se os downloads para o layout.psd (ficheiro de origem do psd com os devidos grupos do layout) bem como o link para o código fonte e visualização online que também podem ver aqui  com o código disponível e umas pequenas alterações.

Aguardam-se opiniões e já agora deixem as vossas experiências gráficas em comentário.

Abraço.

Todos sabemos que a imagem é uma marca. Se repararem conseguimos ter acesso a excelentes aplicativos no showcase do flex em http://www.flex.org/showcase, mas muita gente já pensou como conseguir aqueles layouts fantásticos e chegou à conclusão que se torna bastante trabalhoso fazer um layout gráfico no photoshop por exemplo e conseguir inclui-lo no flex. (aghrrrr… ainda falta algum tempo pro release do thermo…)

Venho desmistificar isto, e dar uma ajuda a quem necessita de algumas noções para começar a melhorar a aparência de aplicações Flex.

O que me proponho fazer (mesmo não tendo muito tempo) é fazer um layout bem simples para uma aplicação flex que apresentará algumas categorias do meu blog. (podendo mesmo substituir o frontend do wordpress com algum trabalho).

Inicialmente apenas irei apresentar os ultimos 10 posts do blog, e um listagem dos detalhes dos ultimos posts, bem como a lista de downloads e mais algumas informações, aliado a pequenos efeitos conseguimos um resultado final excelente.

Já comecei com o desenho do layout no photoshop, e aqui fica um pequeno cheirinho do que aí virá. No final da aplicação terminada disponibilizarei o seu código fonte bem como o layout para download.

Aqui está já a preview do layout aproximado que pretendo implementar no flex.

Quem quiser já ter acesso ao .psd deste layout, deixe uma mensagem em comentário.

Para já, quero saber apenas a vossa opinião.

Edit: Tutorial já disponivel… vejam aqui

Um abraço.

Um dos maiores desafios a quando da mudança de aplicações web 1.0 para o desenvolvimento de Ria’s é aprender a pensar diferente. O flex disponibiliza um conjunto de componentes que permite fazer coisas que eram impensáveis e impossíveis de fazer à apenas uns anos atrás. Por vezes essa possibilidade é esquecida e a framework acaba por ser utilizada apenas para implementar as tradicionais aplicações Web 1.0. Construir aplicações Web 2.0 é mais do que um actualizar parcial de uma pagina e adicionar cantos redondos em divs. Para isso é altamente recomendado recorrer apenas ao Javascript/Ajax e Css e não desperdiçar tempo com o Flex, porque o flex deve ser usado sim para oferecer um design e funcionalidade atractiva para os utilizadores. Se já são programadores java, aprender Action Script 3 e a linguagem de interface será brincadeira de criança. O maior desafio por vezes é que os programadores não estão habituados a “desenhar” visualmente a sua aplicação, e para o desenvolvimento de ria’s é um “must-know” ter alguns conhecimentos de design. A programação pode ser muito boa, mas a verdadeira “força” do Flex está no seu aspecto visual aliado à sua versatilidade.

2. Quebrando aspectos standard dos browsers.

Enquanto o Flex providencia uma excelente plataforma para melhorar a experiência e agradar o utilizador, continua a ser muito importante manter o aspecto “familiar” do site/aplicação como os botões anteriores e seguintes do browser, bookmarking e auto-complete. Ao contrário do que às vezes se pensa, estes aspectos não são difíceis de implementar no Flex. O flex 3 já inclui propriedades “deep-linking” para suportar os botões seguinte e anterior bem como bookmark. E aspectos como o “auto-complete” pode ser facilmente implementado, até mesmo usado alguns componentes. Deep Linking @ labs.adobe.com – Flex Wiki. Auto complete; Exemplo e componente @ AutoComplete Input

3. Muitos “containers” reduzem o desempenho da aplicação.

O flash player utiliza uma hierarquia gráfica para apresentar objectos parecida com objectos DOM em HTML. Quantos mais “containers” forem usados, mais tempo leva a rederização. No centro de desenvolvimento Flex da adobe (Adobe’s Flex Developer Center) pode-se encontrar um artigo que fala das melhores práticas relacionadas com a performance do Flex, incluindo o uso de “containers”. O maior inimigo da performance do Flex está relacionado com a tentação de usar muitos “containers” para melhorar o aspecto da nossa aplicação, mas isso aumenta muito negativamente a performance do Flex. Este é o pior inimigo da performance do Flex, e felizmente é 100% contornável, bastando fazer uso moderado destes mesmos containers.

4. Usar XML para transferência de dados em protocolos (já optimizados), reduz o desempenho.

O flex oferece aos programadores um grande número de opções de comunicação entre o Flex e tecnologias servidor, incluindo AMF3, XML, SOAP, e pedido HTTP directos. Podem ver um exemplo do uso destas tecnologias bem como os “benchmarks” aqui. O BlazeDS (open source) actualmente com suporte da adobe, deve ser uma escolha quase obrigatória em projectos que usem backend em Java, fazendo uso do protocolo AMF3. O AMF é um protocolo de transferência binária que facilmente se integra com o Java, PHP, Python ou praticamente qualquer linguagem server side, recorrendo a diversas variações especificas para as variadas linguagens e que oferece muito mais fiabilidade e performance.

5. Tentar contratar um programador Flex “pode não ser a melhor nem fácil escolha”.

Programadores Flex experientes e com credenciais, ainda são muito difíceis de encontrar e os que se encontram são pagos a peso de ouro. Actualmente o Flex encontra-se em vias de adopção como foi o java nos finais dos anos 90. O pedido de programadores flex continua a exceder as ofertas o que torna muito dificil encontrar um bom programador de Flex, mas ao mesmo tempo cria uma grande oportunidade para os programadores Java e não só expandirem os seus conhecimentos e adoptar o flex como framework de desenvolvimento. Muitas empresas que procuram programadores Flex acabam por contratar pessoas que conhecem bastante bem o Java ou outras linguagens de aplicativos Web, e dada a escassez de profissionais Flex, acabam mesmo por dar ao longo de algumas semanas acções de formação de Flex já que a sua linguagem e API’s são facilmente aprendidas por qualquer pessoa que esteja já familiarizada com programação Web e GUI’s.

6. Não usar exageradamente animações e efeitos.

Usando o flash como plataforma de distribuição, facilmente um programador flex se sente tentado a usar e abusar dos “one-line-effects” que o flex traz, mas os programadores apenas devem usar estes efeitos quando eles são mesmo necessários, e nunca os usar sabendo que o utilizador se distrairá do contexto da aplicação. O uso exagerado de efeitos pode cansar o utilizador!! Os efeitos no flex, bem como as suas durações devem ser tidos em conta, e se puderem contar com uma ajuda e percepção visual de um “Designer” melhor, assim com certeza que terão uma aplicação bem mais agradável. Muitas das animações são simplesmente muito longas, lentas, chatas e por vezes excessivas. Reduzam as animações!! Se existe alguma coisa que os utilizadores não gostam é ter que esperar pelo terminar de uma animação, que por vezes nem agrada, para poderem começar a usar o aplicativo. Não se pretende terminar com as animações no flex, mas sim sensibilizar para o bom uso das mesmas. Cada animação/efeito deve ter um propósito e serem aplicados moderadamente!! Podem ver um artigo bem interessante sobre animações e efeitos aqui.

7. Não definir um “eco-sistema” na empresa.

Como em todos os trabalhos de programação de projectos de software, também no flex é extremamente importante montar um “eco-sistema” para desenvolver aplicações. O TTD (Test Driven Development, ou desenvolvimento “assistido”), é um marco em qualquer projecto de qualquer empresa. Para o Flex, o FlexUnit framework serve precisamente para programar “unit tests”. No Adobe Developer Connection, o Neil Webb discute a utilização do TTD para programadores Flex, usando o FlexUnit. (podem ver o post aqui ). Existe também o Flexcover para “code coverage reporting”, algo como “relatórios de cobertura do código”. A integração contínua (CI), está provada como sendo uma boa pratica para construir e programar Flex quando o projecto é desenvolvido por mais que um programador. Em semelhança ao Java, as plugins Ant e Maven também estão disponíveis para integração contínua de aplicações Flex.

8. Não usar a framework por completo.

Existe um número elevado de “features” opcionais no Flex que devem ser consideradas no desenvolver de uma aplicação. Por exemplo Runtime Shared Libraries (RSL) podem ser usadas para diminuir bastante o tamanho das aplicações. O tamanho de uma aplicação pode ser reduzido utilizando referencia directas a ficheiros/imagens/scritps que podem ser separadamente transferidos do servidor para a cache do computador do utilizador. Esta operação obriga que varias aplicações que utilizem estes mesmos “assets” sejam carregados na “runtime”, mas o utilizador apenas as descarregará para o seu computador apenas uma vez. Estes ficheiros/imagens/scripts partilhados são chamados de Runtime Shared Libraries. Outra das “features” pouco usadas da framework, são as características de usabilidade já incluídas no Flex. Podem ler mais sobre estas características aqui. Quem deseja realmente respeitar e usar acessibilidade nas suas aplicações, o flex torna simples essa tarefa e oferece muitas características como podem ver aqui.

9. Não usar “renderers” complexos em DataGrid’s.

O itemRenderer original para as dataGrid’s já está muito optimizado! (e por consequência ao serem alterados ou implementados irão causar diminuição do desempenho, falado no ponto 3.) O número de “item renderers” que são “compilados” pela dataGrid multiplica-se pelas linhas e colunas da tabela, criando uma enorme quantidade de código. Para minimizar esse impacto, deve-se utilizar os “itemRenderers” quando são realmente necessários e estes devem ser o mais optimizados possível. Quando itemRenderes mais elaborados e complexos são mesmo necessários deve-se usar um UIComponent (ou outras classes “low-level”) e colocar o seu conteúdo para a linha/coluna manualmente.

10. Não preparar a nossa aplicação para modo Offline.

O modelo tradicional das Ria’s é orientado para o browser, mas tecnologias como o Adobe AIR ou o Google Gears actualmente permitem que as aplicações Flex sejam executadas offline. Não preparando as aplicações para uma possível execução offline, se o utilizador/cliente a desejar em modo offline, as coisas tornam-se bastante difíceis de transformar, já que teríamos que refazer grande parte do código da aplicação. Tipicamente, aplicações de negócio/empresariais, correm num servidor. Uma ria em modo offline, permite muito mais “expansão” para o cliente/utilizador, pelo que a arquitectura da aplicação deve poder ser facilmente implementada e transformada de/para modo online/offline.

Bom, e assim termino, a tradução não foi feita à letra, mas penso que a excelente qualidade informativa do post original, mereceu este meu trabalho de “tradução.”

Foi util??

Um abraço.

Este artigo está disponivel em pdf para download.

Apesar de englobar apenas os produtos cs3, tais como o Ilustrador, Photoshop, Fireworks, Bridge, Contribute, Flash e não dedicar muito ao desenvolvimento de ria’s, é interessantíssimo para todos, mesmo os programadores, para todos ficarmos a ganhar com interfaces e conhecimentos da grande vantagem do conhecimento dos produtos da adobe.

Os vídeos online resultam de uma parceria da adobe com a lynda.com que resultou num excelente trabalho.

Bom, os curiosos já estão fartos de ler, por isso aqui vai o desejado link para o “Adobe Video Workshop” e paciência para os cerca de 180 vídeos Flex Powered!!

http://www.adobe.com/designcenter/video_workshop/

Um pérola, não?!

Edit: Só agora que descobri mais referençias a esse video workshop que afinal já está online desde a segunda metade do ano passado… epah…!! ando atrasado!! mas é um boa noticia na mesma, pode ser que não seja o unico a nao saber!!

Abraço.

outros assuntos também muito interessantes:

http://www.webdesignfromscratch.com/real-web-20-design.cfm Explica o Conceito web 2.0 e explica (não consensual) que a web 2.0 não se trata de design mas sim de simplicidade.

http://www.masternewmedia.org/…/web-20-design-simple-social-design-components-20071017.htm Web 2.0 Social design Components.

http://psdtuts.com/designing-tutorials/9-essential-principles-for-good-web-design/ 9 Princípios básicos para o bom web design

http://www.photoshoplab.com/web20-design-kit.html Web 2.0 Design Kit

Estes links, lidos atentamente, conseguem formar-nos para termos um pouco mais de cuidado a desenhar sites web 2.0 bem como a entender o seu conceito e a aprender como desenhar certos detalhes do nosso site.

Vele mesmo a pena lerem estes links, principalmente o 1, 2 e 4

Abraço.

Deixo aqui para que possa dar a vossa opinião sobre os que gostaram mais ou se não gostaram de nenhum

Aguardam-se comentários!!