Cappuccino, Etc. » Web Design

Texture Lovers – texturas para os seus designs

Rodrigo Esch — Thu, 11 Jun 2009 03:42:04 +0000

Em um momento em que cada vez mais a vida das pessoas está online, estímulos visuais que remetem ao mundo tangível podem fazer a diferença na interação entre interface e usuário.

Um excelente recurso estético, cada vez mais usado por designers que procuram dar esse caráter mais palpável a páginas web é o uso de texturas.

Explorando essa necessidade, já existe um bom número de sites que compartilham texturas em alta resolução, sejam gratuitas ou pagas:

http://www.textureking.com/
http://www.webresourcesdepot.com/category/design/texture/
http://www.bittbox.com/tag/textures/
http://www.cgtextures.com/

Desenvolvido por Max Stanworth, o Texture Lovers é o mais novo do gênero.

Lançado essa semana, o site disponibiliza texturas para download, tutoriais e um showcase para inspiração. E claro, usa e abusa de texturas no próprio layout.

Veja alguns exemplos de como texturas podem enriquecer um layout nessa excelente lista do blog Six Revisions. O Smashing Magazine também já publicou uma lista com direito a tutoriais.

Código bom é código limpo

Rodrigo Esch — Tue, 09 Jun 2009 14:44:11 +0000

Chris Coyier do blog CSS Tricks publicou um post bem útil sobre o que ele julga ser o ideal na formatação do HTML de uma página.

É sempre bom estimular as boas práticas no desenvolvimento de qualquer site, mesmo os mais simples.

Para favoritar e usar como referência.

Adobe Browserlab – teste seu site em múltiplos navegadores

Rodrigo Esch — Wed, 03 Jun 2009 12:53:03 +0000

Parece que a Adobe entrou de vez no nicho dos aplicativos online. Depois de lançar ferramentas como o excelente gerenciador de swatches Kuler e o seu editor colaborativo de texto Buzzword, a bola da vez é o Browserlab.

Inconsistências de layout entre diferentes browsers são um pé no saco dos web designers. Talvez a pior parte do trabalho. Fazer um site criativo, visualmente impecável e que apareça perfeito no Safari, Firefox, Opera e principalmente no famigerado Internet Explorer 6 não é tarefa fácil. Para facilitar um pouco o processo, a Adobe lança o Browserlab, uma ferramenta que mostra como o seu site vai ficar em diferentes navegadores. Só é necessário fazer uma Adobe ID antes.

Por enquanto os browsers suportados são:

Firefox 2.0 – Windows XP
Firefox 3.0 – Windows XP
IE 6.0 – XP
IE – 7.0 – XP
Safari 3.0 – Mac OSX
Firefox 2.0 – OSX
Firefox 3.0 – OSX

Para facilitar ainda mais, está disponível uma extensão para o Dreamweaver CS4, para testes dentro do programa.

Saiba mais sobre o Browserlab em http://labs.adobe.com/technologies/browserlab/

Fancybox – Lightbox com estilo

Rodrigo Esch — Fri, 29 May 2009 00:07:32 +0000

O lightbox é um script que ficou muito famoso de uns tempos pra cá não só pela fácil implementação, mas também pela maneira elegante como é capaz de apresentar conteúdo em um site.

Ao invés de abrir uma janela pop-up por exemplo, um clique num thumbnail abre a imagem em primeiro plano e destacada, com o fundo escurecido.

Pois bem, existem zilhões de scripts que fazem isso, mas eu ainda não achei um tão bonito quanto o Fancybox. E acho que a Apple concorda comigo, pois ele é usado no www.apple.com .

Assim como o Lightbox, o Fancybox flutua na tela não só imagens mas também videos, formulários e páginas comuns. Muitas vezes usar um script desses pode aumentar a usabilidade de um site.

Implementar o Fancybox é moleza. Você só precisa de algum conhecimento de jquery, na hora de adicionar o script na página.

Veja exemplos

Como instalar?

Suporte

Layout CSS – height 100% com header e footer

Rodrigo Esch — Wed, 27 May 2009 12:41:08 +0000

O Smashing Magazine através do seu Twitter (@smashingmag) publicou uma dica interessante ontem. Na época longínqua das tabelas, era fácil aplicar uma altura de 100% na área de conteúdo de uma página, ainda tendo header e footer fixos. Isso pode ser muito útil na hora da aplicação de backgrounds em layouts expansíveis verticalmente.

Essa dica mostra que não é tão difícil conseguir o mesmo com CSS. Confira:

http://www.xs4all.nl/~peterned/examples/csslayout1.html