Arquivo da Categoria ‘Desenvolvimento’

Flash Catalyst: Facilitando o design de sites em Flash

23-02-2010

Em tempos de SEO e HTML 5, muitos declaram que o Flash está com os dias contados. De fato, sites 100% em Flash sairam de moda há algum tempo, e são tendência ultrapassada, graças às novas exigências de marketing digital da web 2.0, que praticamente ordenam que o site seja leve, acessível e, acima de tudo, legível pelos mecanismos de pesquisa.

O HTML 5, conforme comentamos em posts anteriores, promete ser um punhal no coração do Flash, já que grandes sites de vídeos como o Youtube provavelmente abandonarão a ferramenta graças aos novos recursos de inclusão de vídeos direto no código.

Apesar de tudo, quem pensa que a Adobe desistirá fácil da fascinante tecnologia Flash está enganado. Talvez, apenas talvez, ela esteja apostando suas fichas em outros meios, como games e interfaces offline… ou será que ela investiria tempo, recursos e esforços em uma belezinha muito atraente chamada Flash Catalyst se não fosse por um bom motivo?

Conceituando a novidade, trata-se de um novo software voltado especialmente aos designers que não programam. Simples e objetivo. O Flash Catalyst permite criar e implantar interfaces com os mais sofisticados recursos de interação, coisa que só quem programa muito bem a linguagem Actionscript consegue executar. Pois bem, o Catalyst chega para os designers  que não investiram tempo em programação AS mas que desejam criar projetos interativos com animações e ações sofisticadas, sem gastar seus dedinhos digitando e corrigindo código. Lindo! :)

É uma excelente aposta da Adobe, que espera alcançar agora um público específico, e reconquistar possíveis “desertores” do Flash.

Confira o vídeo com as funcionalidades, recursos e benefícios do Catalyst na página do programa no Adobe Labs. É possível baixar uma versão beta para testes, e participar da discussão sobre o programa nos fóruns :)

Opiniões sobre o Flash Catalyst? Comente!

Até o próximo post!

Galeria de sites sensacionais em HTML 5

14-12-2009

HTML 5: a brand new way...

Embora ainda esteja em sua fase de “pré-lançamento”, muitos desenvolvedores e web designers já estão se utilizando dos novos recursos do HTML 5. Isso porque a maioria dos browsers modernos já suportam a nova tecnologia, para a nossa felicidade e satisfação :D

Conforme dissemos em um post de alguns meses atrás, o HTML 5 surge para facilitar a vida de quem desenvolve para a web. Seu código permite a escrita livre de aspas e mescla letras maiúsculas e minúsculas, em contraponto ao XHTML atual (embora a versão serializada do XHTML 5 trate com rigor certos detalhes…). Sua proposta é ambiciosa e promete enterrar de vez a tecnologia Flash (e Silverlight!) para sites. 2012 está perto, e aguardamos por esse novo cenário ansiosamente ;-)

Hoje, traremos a vocês uma galeria bacana de sites construídos sob a tecnologia HTML 5. Trata-se do HTML 5 Gallery, e seu banco de dados contém centenas de sites para você se inspirar, estudar o código ou apenas admirar :D

Aproveitamos o post para comentar que até a próxima semana, sem data definida, lançaremos o visual 2010 do site da Agência Liquid e, adivinhe: foi inteiramente construído em HTML 5! Depois de um ardoroso trabalho de alguns dias, ele finalmente está quase pronto, e a identidade visual do site está bem diferente da atual. Ficamos satisfeitos por aqui, esperamos que você também goste do resultado ;-)

Um grande abraço e até o próximo post!

Design de interação – Ferramentas úteis

03-12-2009

Nós, desenvolvedores de interfaces para a web e desktop, sabemos o quanto é importante para o sucesso do projeto que tudo esteja funcionando de acordo. Mais do que isso, definir bons padrões para a experiência do usuário, seja qual for o seu nível de conhecimento, não é apenas legal mas uma responsabilidade que devemos ter com nosso trabalho e nossas funções.

Mesmo os “projetistas” mas experientes podem encontrar certas dificuldades em criar o escopo da estrutura de um projeto digital, dependendo de sua amplitude. Entretanto, para ajudar a todos, existem ferramentas ou uilitários bacanas que você pode usar para organizar e prever disposições de elementos que farão toda a diferença em um projeto.

Conheça as dicas de utilitários do UX Booth, utilizadas pelos maiores nomes no ramo de interação digital, para os profissionais interessados em otimizar seu rendimento com a estruturação do design de seus projetos. Aproveite bem ;-)

1. OmniGraffle

Aplicativo para Mac OS que permite focar exclusivamente nos processos de interação por trás do design do site, e que permite o envolvimento de toda a equipe. Ele contém uma série de funcionalidades, como ferramentas de desenho vetorial para esquematização dos gráficos, funcionalidades ‘click-to-reveal’ (clicar para revelar conteúdo) e esboços. Muito legal! :D Quem adquire o programa ganha de brinde uma série de UI Components adicionais, como botões, stickers e outros. Veja aqui.

2. Balsamiq Mockups

Este incrível aplicativo do Adobe Air torna o ato criar wireframes divertido, fácil e muito mais compreensível. Sua biblioteca trás inúmeros elementos já prontos e alguns dos itens mais utilizados nas mídias e interfaces da atualidade. O site contém um vídeo demonstrativo e no blog oficial deles você pode ver do que a ferramenta é capaz a partir de esquemas criados pelos próprios usuários do programa. Confira as reproduções em wireframe da interface do Google Wave e do Facebook, imperdíveis!

3. Adobe InDesign

Calma, nem só de livros vive o InDesign. A coleção de templates EightShapes Unify e mais algumas bibliotecas permitem a construção de wireframes interativos pra lá de eficientes. O bom é que a maioria dos profissionais de desenvolvimento estão familiarizados com as ferramentas da Adobe, então manusear o InDesign, mesmo os que nunca o fizeram, é quase que intuitivo.

Confira a biblioteca EightShapes e utilize o InDesign muito além da mera editoração gráfica!

4. Bloco de Anotações

Pensou que esqueceríamos dele? Nada como um bom bloco de anotações para aquelas longas reuniões com o cliente. Apesar de a fonte original ter sugerido o bom e velho Moleskine, sabemos que o seu inseparável (e organizado) caderno pode ser o seu melhor amigo quando o seu latop estiver indisponível ou para aquelas conversas bate-e-volta com a equipe de desenvolvimento. Não o subestime!

Esperamos que tenham gostado das dicas. Um grande abraço e até o próximo post! ;-)

Google Wave – Seis dicas para usá-lo bem em seu projeto

30-11-2009

O Google Wave é, hoje, uma das grandes promessas da Google para um futuro próximo. Os poucos que tiveram a oportunidade de testá-lo já tiveram uma idéia do que será possível fazer em breve, quando ela for finalmente liberada ao público com suas funções definitivas e permitindo a entrada de todos os que desejarem.

Google Wave para gerenciamento de projetos: um sonho virando realidade

Google Wave para gerenciamento de projetos: um sonho virando realidade

Embora os poucos desbravadores da ferramenta ainda estejam engatinhando com as possibilidades, o certo é que já é possível começar a controlar projetos e compartilhar dados entre pessoas e mesmo com o cliente, unindo os vários programas para fazer isso em um só (chat, ferramenta de gerenciamento, skype, etc). E várias pessoas já estão fazendo isso!

O blog Web Worker Daily criou um pequeno “manual de uso” do Wave para gerenciamento de projetos e relacionamento com o cliente. O autor aceitou fazer a experiência com um de seus clientes e, a partir dos resultados positivos, elaborou alguns tópicos legais para ajudá-lo com a sua primeira experiência profissional no Google Wave. Vamos a elas? :)

1. Vá com calma, no começo.

Como dissemos antes, o Wave ainda está em fase “beta beta”, ou seja, é um preview com acesso muito limitado de usuários, justamente por estar em fase de testes. Os primeiros usuários são como “cobaias” do sistema. Assim, como nós da Agência já pudemos ver, o Wave ainda é lento e cheio de pequenos bugs, portanto, ainda não se pode esperar excelência em sua performance e confiar 100% nele para tudo.

2. Utilize o Wave para troca de idéias em tempo real e para manter um histórico dos seus “debates”.

A proposta do Wave é unir o e-mail e um mensageiro eletrônico comum (como o MSN, por exemplo), e manter ao seu alcance duas poderosas ferramentas de comunicação que podem ajudá-lo a organizar aquela “troca de figurinhas” com o seu cliente. Organize seus pedidos e idéias, guarde as mensagens, inclua anexos e converse em tempo real com seus contatos. Sua produtividade vai melhorar!

3. Controle suas Waves, para o bem da sua cabeça!

No começo é assim mesmo: Waves para todo o lado. Entretanto, para facilitar sua vida, crie uma Wave para cada novo projeto que estiver gerenciando. Será muito mais fácil encontrar solicitações e rever assuntos anteriormente tratados.

4. Organize seu conteúdo com pastas e tags.

A interface do Wave assusta um pouco, e é difícil se acostumar com ela. Uma dica para se familiarizar, e até se acostumar, é usar pastas e tags para marcar seus conteúdos importantes.

5. Na fase beta, faça escolhas entre anexos e edição on line de documentos.

O Wave combina muito bem seu e-mail com um processador de textos. A possibilidade de enviar anexos também o torna a oitava maravilha dos últimos anos no meio digital. No entanto, a fase beta ainda possui uma capacidade precária no trabalho com certos tipos de documentos. Testar quais extensões são viáveis e usar as ferramentas do Wave em conjunto é questão de bom senso e deve ser analisada criteriosamente em cada caso.

6. Tenha um plano B.

Não podemos esperar que uma ferramenta beta tenha um desempenho excepcional 100% do tempo. Portanto, se algo der errado, conte com seu plano B para colocar tudo em ordem novamente.

Esperamos ansiosamente pelos novos aplicativos do Wave e uma melhoria ainda mais significativa em sua performance, interface e possibilidades. Se tudo correr como se espera, em breve os e-mails se tornarão coisa do passado, assim como os discos de vinil.

Um grande abraço e até o próximo post! :)

Criação de sites: evolução em dez anos

18-11-2009

O tempo passa...

Recordar é viver. Todos sabemos que esta máxima, um clichê na verdade, é uma bela lição que nos permite olhar para o passado com olhos críticos e aperfeiçoar nossos conhecimentos para um futuro melhor :)

A internet comercial já possui um bom tempo de vida. No Brasil, ela já é uma adolescente :D E assim como as tecnologias se renovam, a cara da web também foi mudando ao longo dos anos. Para melhor, claro!

Em nossas primeiras andanças no mundo digital, quando o IE 5 e o Windows 98 brilhavam nos pcs da maioria dos usuários, nos deparávamos com pequenos detalhes e coisinhas que quase não vemos mais nos sites modernos. Que tal recordar um pouco do passado da web? Divirta-se!

1. Guestbooks ou livros de recados: os avôs dos comentários.

Todo site pessoal e muitos sites empresariais apresentavam um link para uma página de guestbook. Para os mais novatos e que nunca tiveram a sorte de encontrar um desses em seu caminho, funciona como um campo de comentário de um blog. Com a diferença de que você comenta o site inteiro, e não conteúdos específicos…

Apesar de ser uma ferramenta “ultrapassada”, de vez em quando nos deparamos com uma ou outra por ai :)

2. Mensagens de resolução de tela mínimas e navegadores recomendados.

Você lembra quando os sites traziam em suas “páginas de entrada” (mais adiante, falaremos mais sobre isso também! :) ) mensagens do tipo “Resolução mínima 800×600, Navegador Internet Explorer 5.5″? A web 2.0 trouxe para os desenvolvedores a necessidade de adaptar os sites aos mais diversos tipos de usuários. Monitores grandes, pequenos, widescreen, usuários do Internet Explorer, Safari, Firefox… então, hoje em dia, “restringir” o acesso a determinados tipos de visitantes é prática abolida e não recomendada (claro, existe a campanha para abolir o IE6 do mercado, mas isso é outra história). E viva a diversidade e fluidez da web!

3. Páginas de entrada.

Numa era onde o conteúdo é rei, não há a menor lógica em apresentar uma página inicial vazia de informações, com um botão de “entrar”. Mas antigamente, isso era mais do que usual (era considerado até bonito :) ).

4. Sites que abrem em tela inteira (fullscreen).

As opiniões variavam quanto a eles. Mas nós da Agência temos o pensamento comum de que sites que ocultavam os controles do navegador estão entre as piores idéias já desenvolvidas para a web. Ainda bem que, hoje em dia, é muito difícil encontrar sites assim!

5. Gifs animados horrorosos pulando e piscando em toda a página.

Eles distraíam tanto a nossa atenção do conteúdo real do site que quase nos faziam fechar a janela do navegador ou partir para um próximo site. Ainda bem que eles saíram de moda há um bom tempo, pelo menos entre os desenvolvedores profissionais!

6. “Powered by” alguma coisa!

Antigamente, muitos designers incluiam nos rodapés dos sites um bizarro “powered by (nome dele ou da empresa aqui)”. Poderoso, não? :)

Por enquanto é só! Esperamos que tenham gostado.

Comentem se lembrarem de mais peculiaridades das antigas!
Um grande abraço!