Posts marcados com ‘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!

Site lento? Cheque com o Desempenho de Site do Google!

17-12-2009

Faz pouco tempo que a Google divulgou à comunidade um auxílio para os desenvolvedores melhorarem a velocidade de carregamento das páginas de seus sites: trata-se da opção Desempenho do Site, localizada nas Ferramentas para Webmasters do Google.

Nos tempos de hoje, o carregamento rápido das páginas de um site saiu do “sonho” dos desenvolvedores para se tornar uma obrigação para quem deseja estar bem posicionado (ou quem se preocupa com a paciência de seus visitantes). Manter as páginas leves e otimizadas faz parte dos processos modernos de desenvolvimento, e a cada mês a Google disponibiliza novas opções para os usuários que se preocupam com detalhes tão importantes como este. Nada como aproveitar o melhor delas ;)

A ferramenta oferece um gráfico geral com o tempo médio de carregamento nos últimos meses e lista sugestões que podem ajudá-lo a melhorar o desempenho do site , onde você puder estar errando. É uma verdadeira “mão na roda” àqueles que estavam preocupados com a velocidade de carregamento das páginas mas não sabiam o que e como melhorar.

Se você trabalha com AdSense, por exemplo, checar a performance do seu site deve ser prioridade, uma vez que você deseja manter as pessoas em suas páginas o maior tempo possível. E, claro, evitar o Bounce Rate é importante para todos! O Mashable prevê que em breve esta opção estará disponível no Google Analytics, ajudando você também a compreender porque as tais taxas de rejeição do seu site estão tão altas.

Se você utiliza o Firefox, acesse as Ferramentas para Webmasters do Google, clique em Google Labs e Desempenho do Site. Na base da página é possível instalar um add-on que checa automaticamente a velocidade de carregamento de suas páginas e indica sugestões de melhorias para uma melhor performance. Muito legal :)

Otimizar páginas para a web não beneficia apenas o seu site, mas a todos. Portanto, mãos à obra!

Um abraço e até a próxima!

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!

Botões lindos com CSS3 – Adeus às imagens!

08-12-2009

Conforme já comentamos em posts anteriores aqui do blog, o CSS3 é uma maravilha que veio para facilitar nossa vida e tornar a formatação visual de elementos algo simples, rápido, acessível e otimizável.

Hoje vamos mostrar a vocês como criar botões de cair o queixo apenas utilizando algumas linhas simples de código. Acredite, não são imagens, é puro CSS! Alguns browsers, no entanto, podem não suportar o CSS3 e se você estiver usando uma versão de navegador mais antiga, provavelmente não conseguirá ver o que essa maravilha é capaz de fazer. Um exemplo testado aqui na Agência foi o Firefox 3.0 para Mac, que não exibiu os efeitos de sombra; já na versão 3.5, ficou perfeito.

O CSS3 conta com alguns recursos fantásticos como a possibilidade de aplicar sombra aos elementos (Box-Shadow e Text Shadow), novas opções de aplicação de cores e a possibilidade de criar boxes com bordas arredondadas. Para este exemplo, utilizaremos recursos do CSS3 e HTML 5.

Podemos criar botões facilmente com a tag button. Assim, para incluir um botão em nossa página, bastaríamos escrever um código do tipo:

<button type="submit" class="btsombra">Ver mais detalhes</button>

Sem formatação, ele aparece assim no Safari do Mac OS:

1. Utilizando o recurso Box Shadow e RGBa para ajustar a tonalidade da sombra:

O modelo de cor RGBa é suportado por browsers novíssimos, e você pode aplicá-lo juntamente com a propriedade Box Shadow para definir a cor da sombra de seus botões e outros elementos. Observe os exemplos abaixo:

Para definirmos uma sombra escura básica para os nossos botões, o exemplo de código a ser aplicado na classe seria:

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Os valores dentro dos parêntesis podem ser alterados para números entre 0 a 255 na escala RGB, sendo os três primeiros referentes às tonalidades da sombra e o último à sua opacidade (zero é totalmente transparente, “1″ totalmente opaco); para a sombra ciano, colocamos um valor de 0 para o primeiro campo e 255 para as demais cores, mais o valor “1″ para a opacidade:

-moz-box-shadow: 0 1px 3px rgba(0,255,255,1);
-webkit-box-shadow: 0 1px 3px rgba(0,255,255,1);

Apenas uma observação: os parâmetros de CSS “-moz” aplicam os estilos ao Mozilla Firefox e “-webkit” ao Safari.

Para aplicarmos sombra ao texto adicionamos a seguinte linha de código aos estilos:

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

2. Bordas arredondadas!

Chega de imagens, recortes complicados, planos de fundo! Utilize o recurso Border-Radius para arredondar os vértices de seus botões e criar efeitos surpreendentes.

O código usado para o botão acima foi:

-moz-border-radius: 25px;
-webkit-border-radius: 25px;

Outros exemplos:

Você ainda pode usar o CSS para aplicar efeitos de roll over de cursor sobre os botões.

Esperamos que tenham gostado! Confira aqui os botões funcionando e faça o download dos exemplos aqui.

As dicas são do site Zurb.

Obs#2: O Internet Explorer 8 não suporta o recurso de bordas arredondadas.

Um super 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! ;-)