2010 de cara nova!

16-12-2009

Viram que bonitinho? Resolvemos trocar de roupa e renovar as energias para 2010, deixar o passado para trás sem, claro, esquecer seus bons frutos :)

O novo site da Agência foi um grande desafio, uma vez que começamos a explorar o HTML 5 e trabalhar com essa linguagem que, embora nova, permite uma infinidade de facilidades para os desenvolvedores e uma melhoria significativa na construção do código.

Aproveitamos também para divulgar a nova newsletter mensal do Guia Mais Casamento, que ainda está em processo de desenvolvimento pela Agência. Ela comportará anúncios publicitários e chamadas para as novidades e matérias do portal. Dê uma olhadinha no preview (clique para abrir no navegador. Versão sem textos apenas para testes!).

Newsletter Mensal do Guia Mais Casamento

Newsletter Mensal do Guia Mais Casamento

Então é isso! Esperamos que tenham gostado. Críticas, sugestões e “alôs” podem ser enviados pelo Twitter. Não nos deixe no suspense, diga o que achou ;)

Um grande abraço e 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!

Mala direta de Natal – Realmax

10-12-2009

Dando continuidade aos nossos projetos especiais de fim de ano, publicamos hoje a newsletter de Natal para a Realmax, para envio interno e clientes potenciais da empresa. Buscamos seguir ao máximo a identidade visual e criamos um design sofisticado para o a campanha “Natal da Realmax”, além de enfatizar uma mensagem positiva para os receptores do e-mail.

Confira abaixo um preview.

Clique aqui e veja a peça em tamanho real. A tela também está em nossa galeria do Flickr, que você pode acessar clicando em “Galeria de Fotos” na barra no rodapé do blog.

Continue acompanhando nosso blog para mais atualizações em nosso portfolio :)

Um abraço e até a próxima :D

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 :)

Web 2010 – Tendências “Quentes”

07-12-2009

Final do ano é época de previsões. Na web também não poderia ser diferente: especialistas do ramo e analistas de tendências começam a dar seus palpites sobre o que será “quente” no ano seguinte.

Hoje vamos trazer na íntegra as apostas de Peter Cashmore, fundador do blog Mashable, um guia de mídias sociais. Ele é colunista da CNN e listou dez tendências em que aposta para o perfil da internet em 2010. Acompanhe.

1. Tudo em tempo real. Mais ainda!

A combinação das ferramentas de comunicação massiva on line (estilo Twitter), somada à popularização de aparelhos móveis cada vez mais sofisticados, fará com que a comunicação e a urgência da informação sejam cada vez mais vinculadas em tempo real. Aposto que você, se acompanha o Twitter, já percebeu isso. No dia seguinte, a maior parte das notícias já está “velha”…

2. Localização.

Mais uma vez graças aos aparelhos móveis e smartphones, os serviços se tornarão cada vez mais localizados, numa tentativa de centralizar públicos de interesses e regiões específicas. Já ouviu falar em geotagging? ;-)

3. Realidade Aumentada.

Já falamos desta tendência em um post aqui do blog,e parece que ela vem conquistando espaço cada vez mais. Aliada aos serviços móveis, a tecnologia focará especialmente nos serviços de geolocalização, sobrepondo dados em tempo real nos mapas consultados pelos usuários.

4. Filtragem de conteúdo pela popularidade atribuída pelo usuário.

A tendência está cada vez mais firme e é o princípio básico adotado no cálculo de PageRank do Google. A análise de qualidade dos conteúdos será feita cada vez mais com base na indicação do usuário. Portanto, não economize esforços na hora de elaborar seus conteúdos para a web! :D

5. Cloud Computing.

A onda de serviços web-based está cada vez mais “surfável”: a grande tendência do futuro são os aplicativos on line, que facilitarão cada vez mais a participação de colaboradores externos (por exemplo, um parceiro seu que more em outro estado ou seu cliente, lá do escritório dele). O Chrome OS vem com força e promete abrir ainda mais as portas da computação na nuvem.

6. TV e cinema via web.

A web está atraindo todas as mídias para si, e a TV e o cinema obviamente não ficarão de fora. Ano que vem espera-se uma integração ainda maior entre as mídias.

7. Convergência de gadgets.

Um iPod, uma câmera digital e mais um celular no bolso serão cada vez mais coisa do passado. A grande tendência hoje são os gadgets com múltiplas funções, cada vez mais sofisticados e poderosos. Mais poderosos ainda serão os aplicativos desenvolvidos!

8. Jogos sociais.

Os jogos sociais (Farmville do Facebook, por exemplo) são sucessos inesperados e que continuarão a crescer cada vez mais. Espera-se outros tipos de jogos, inclusive no Orkut, e a exploração econômica dos mesmos será a tendência dos novos negócios do futuro.

9. Pagamentos Móveis (EUA).

Espera-se um crescimento vertiginoso no pagamento de contas e compras via celular nos Estados Unidos em 2010. Prevê-se que o aumento do volume permitirá o surgimento de novas plataformas de acesso. Esperamos que o mesmo aconteça no Brasil :)

10. Fama, muita fama. E cada vez menos privacidade.

Quase que dispensável lembrar, mas Andy Warhol tinha razão. Com as mídias sociais, hoje é fácil alcançar a fama da noite para o dia (veja os casos que tivemos este ano na mídia). Entretanto, a privacidade do usuário estará cada vez mais ameaçada graças à velocidade ainda maior com que os dados se propagarão (como já vem acontecendo).

Vamos esperar para ver o que mais o futuro nos reserva…

Até amanhã :D