As folhas de estilo são fundamentais para controlar a aparência de nossas páginas HTML. Hoje iremos aprender sobre a propriedade Background, responsável pela formatação dos planos de fundo das páginas e elementos.

O background possui as seguintes propriedades:

• background-color: Cor do plano de fundo;
• background-image: Imagem de plano de fundo;
• background-repeat: Define se a imagem deverá se repetir ou não;
• background-attachment: Define se a imagem irá ficar fixa ou rolar junto com a página;
• background-position: define a posição da imagem de plano de fundo (esta propriedade é fundamental para o uso de CSS Sprite);

background-color

Os valores para a propriedade background-color são:
Hexadecimal: #FFFFFF
Código RGB: rgb(250,250,250)
Nome da cor (em inglês): red, blue, green
Transparente: transparent

Tanto o valor hexadecimal quanto o código RGB podem ser colhidos dentro de um programa gráfico, como o photoshop.

background-image

A sintaxe para inserir uma imagem como plano de fundo é: url(pastadaimagem/imagem.gif). Lembre de observar bem o nome da pasta na qual inseriu sua imagem, um único caractere digitado errado e seu plano de fundo não será exibido.

background-repeat

Esta propriedade é utilizada apenas se você fizer uso de uma imagem como plano de fundo. As possibilidades são:

não repetir: no-repeat;
repetir em todos os eixos (horizontal e vertical): repeat;
repeater horizontalmente: repeat-x;
repeater verticalmente: repeat-y;

background-attachment

Para fixar a imagem na tela (efeito marca d’água): fixed;
Para rolar a imagem junto com a página: scroll;

background-position

Esta propriedade é crucial para trabalhar com CSS Sprite (técnica utilizada para otimização de performance dos sites, juntando vários planos de fundo em um arquivo único.

É importante que compreenda que esta propriedade recebe 2 valores, sendo eles referentes aos eixos x e y, respectivamente.

por porcentagem: 50% 50%;
por pixel: 30px 20px; (isso quer dizer que a imagem ficará a 30 pixels de distância do início do eixo x e 20 pixels de distância do eixo y. Estes valores também podem ser negativos (Ex: 10px -45px;). Explicações mais detalhadas em breve.

Para definir alinhamento ao topo, direita, baixo, esquerda e centro basta que utilize sua especificações em inglês (top, right, bottom, left, center). Veja os exemplos abaixo:

background-position: top left; /* alinha a imagem de plano de fundo no topo e na esquerda) */
background-position: bottom right; /* alinha a direita e para baixo */
background-position: center center; /* alinha todo o plano de fundo ao centro */

Otimizando o código CSS

Assim como diversas propriedades das folhas de estilo, é possível resumir todas as informações aqui estudadas em uma única propriedade. Veja o exemplo abaixo:

background: #00FF00 url("images/nome-da-imagem.gif") no-repeat fixed 200px 70px;

Atenção: existem valores que se não forem inseridos o plano de fundo continuará funcionando e os mesmos receberão valores ocultos padrões. É o caso do background-attachment (padrão scroll), background-position (padrão 0 0) e background-repeat (padrão repeat).

Este é mais um post da Série: Inspiração em cores. Confira 10 belos websites que souberam utilizar muito bem a cor amarela. Observe que em geral as cores de combinação do amarelo são o preto e uma tonalidade variada de marrom. Também é possível fazer um bom casamento com a cor roxa.

www.championsound.com

www.breakbeat.co.uk

www.garethdickey.com

www.cliquestudios.com

www.cccaleb.com

www.teammanager.se

www.roome.co.uk

www.wellingtonlions.co.nz

www.uneviedesvoyages.fr

family.joshtilton.com

O RGB Magazine está lançando a série: Inspiração em cores. Toda semana serão postadas 10 inspirações de uma das cores, com logos, websites, artes gráficas ou wallpapers.

Para estreiar a série, segue abaixo a primeira lista com 10 websites em vermelho.

Siege Audio

Dan Friml

Ronnie San

Fork Bomb Studios

Coalmarch Productions

Creattica

Helveti-Tweet

Red Ant

Matriz Comunicação

Proiect 1000

Sempre que um novo projeto está começando a ser desenvolvido na web são feitos muitos questionamentos no briefing e no decorrer do processo criativo. Anteriormente publiquei um artigo chamado “Design Versus Conteúdo” que é um dos debates feitos na hora de decidir o foco para determinado produto ou serviço a ser vendido.

Você já ouviu falar sobre experiência do usuário? Sabe qual sua verdadeira utilidade e importância? Essas e outras perguntas surgem frequentemente entre desenvolvedores e designers.

Experiência do usuário é a maneira na qual os visitantes do seu site (usuários web) conseguem acessar, navegar e assimilar seu conteúdo, produto e informação, ou seja, para uma boa experiência de usuário é importante que você tenha um site rápido no carregamento e de fácil compreenssão.

Para conseguir um site que proporcione uma boa experiência de usuário o primeiro passo é pesquisar cases de sucesso, conhecer de perto o produto ou serviço a ser vendido e identificar o público-alvo do seu site. O design é peça chave, sendo assim, dependendo do grau de instrução e praticidade que o usuário tiver na web, será possível fazer um layout mais arrojado ou minimalista.

Conseguir fazer com que o usuário não precise pensar também é uma ótima escolha, desde que não torne informações repetidas e por algumas vezes inúteis.

Design

Não é preciso ser um desenvolvedor web para saber que um design atraente colabora muito para o sucesso. Isso ocorre todos os dias em nossas vidas, ao comprar uma roupa, ao escolher um carro, etc. A escolha de um produto envolve a sua função, importância e beleza, de maneira que possamos nos sentir satisfeitos em todos os aspectos.

Boas referências:

• Checklist Melhores Práticas de Design para Web (em Inglês)
• Planos de Fundo em Design para Web (em Inglês)

Usabilidade

A experiência do usuário também está diretamente ligada a usabilidade de um site.

Boas referências:

• Introdução e 6 Fatores para Aumentar a Usabilidade do Site
• Como melhorar a usabilidade de um site?
• Melhore a legibilidade do seu site com margens

O exemplo: Google

Seja no buscador ou em uma de suas dezenas de produtos, a Google relaciona seu design baseado em dados para obter melhores resultados. Várias pessoas dizem: “o Google é feio”. A empresa Google prioriza o design minimalista, com informações claras e navegação fácil.

Por mais que não hajam elementos gráficos surpreendentes, o buscador Google cumpre o que promete. Seja um usuário web antigo ou alguém que acaba de colocar internet em casa, nunca presenciei alguma história de alguém que não conseguisse navegar pelo Google. O mesmo se repete aos outros produtos, obviamente que cada um com seu nicho e tipo de usuário específico.

Recentemente o buscador tem passado por fases de teste de um novo design, com alguns elementos mais atraentes, confira site da Info.

Novo design do Google

É um privilégio acompanharmos essa transição para entendermos como o comportamento dos usuários da internet tem se comportado.

Testes

Fazer o teste de um novo site é uma tarefa simples, porém trabalhosa. Procure pessoas próximas a você com diferentes níveis de experiência em navegação. Pessoas mais jovens e mais velhas, se possível com diferente grau de instrução. O resultado será mais satisfatório para um determinado grupo de pessoas e no outro grupo estarão pessoas que não conseguiram navegar bem ou até mesmo entender como adquirir seu serviço ou produto.

Após selecionar tais pessoas, pesquise com elas os objetivos que foram atingidos:

• Compreensão do produto ou serviço
• Conseguir navegar diante das informações sem se sentir “perdido”
• Encontrar uma informação específica sugerida por você (que não esteja em muita evidência)

Caso a maior parte das pessoas selecionadas consigam compreender e gostar de navegar no site, parabéns, você está no caminho certo. Deverá então analisar as falhas, as críticas que surgiram e os resultados que não foram atingidos.

Além dos testes com usuários, que são o principal foco, também é importante fazer testes em sites de validação de códigos e padrões web como o W3C.

Trabalho Contínuo

Não basta apenas conseguir um bom resultado de início, a cada mudança mínima no seu design é necessário analisar todos os resultados novamente. Um único bloco de informação ou alteração de cores pode fazer total diferença nesse momento. Acompanhe diariamente cada resultado obtido e não tenha medo de tentar diversas estratégias várias vezes.

Os orientais são muito famosos por sua tecnologia. O Japão por exemplo é um forte produtor de games, onde o design sempre está presente. Na web não é diferente, o design oriental é belo e rico em criatividade. Abaixo uma lista de 10 sites orientais que me deram inspiração.

www.zhenze.com.cn

www.skpine.com

http://sansim.co.kr/

http://www.internetdisk.co.kr/main/main.php

http://www.lvdity.com.cn/bs/enter.htm

www.yutakaloveslondon.com

http://www.innisfree.co.kr/index.jsp

www.yeechino.cn

www.sgr.jp

bokuk.com

Trabalhar com manipulação de imagens pode ser algo técnico e que com muita prática qualquer pessoa consiga aprender, entretanto somar um alto nível com muita criatividade é para poucos.

O argentino Matias Gonzalez faz isso muito bem, confiram algumas imagens do seu portfolio.

Portfolio - Matias Gonzalez

Portfolio - Matias Gonzalez

Portfolio - Matias Gonzalez

Portfolio - Matias Gonzalez

Portfolio - Matias Gonzalez

Aqueles que gostaram da inspiração podem ver mais trabalhos de Matiaz Gonzalez no DeviantArt.

Recentemente o Google anunciou que os sites Orkut e Youtube deixaram de dar suporte ao navegador Internet Explorer 6. Não é difícil compreender os motivos. Boa parte dos desenvolvedores sentem dificuldade para escrever o CSS de sites de maneira que fique compatível com todas as versões do Internet Explorer, principalmente considerando sua total despadronização e tecnologia ultrapassada.

Desde 2009 a quantidade de pessoas que atualizaram para o Internet Explorer 7 ou instalaram um outro navegador (como firefox e chrome) cresceu, porém não o suficiente para alguns nichos de sites.

É comum ver queixas de desenvolvedores em comunidades, sempre trazendo críticas ao navegador. Mas como contribuir para que o número de usuários do IE6 reduza? Simplesmente abandoná-los funciona?

Diante destas perguntas trouxe um pequeno tutorial que tem como objetivo incentivar os visitantes dos sites a atualizarem seus navegadores.

Você deverá criar uma mensagem a sua maneira (texto, imagem ou banner) informando ao usuário de que o browser que ele está usando está desatualizado.

Através do seguinte código é possível exibir um determinado conteúdo apenas para usuários do Internet Explorer 6. Desta maneira você deverá inserir sua mensagem no HTML como se fizesse parte do site:

<!--[if IE 6]>
<div>
 <strong>Aten&ccedil;&atilde;o</strong>
 <p>Sua vers&atilde;o do Internet Explorer est&aacute; desatualizada.<br />
 Instale uma nova versão ou faça o download do firefox.</p>
</div>
<![endif]-->

No exemplo acima foi utilizada apenas um texto estático. É recomendado que esta mensagem esteja presente em todas as páginas do seu site para uma maior eficiência. Use sua criatividade e colabore por uma internet melhor.

Para entrar no clima de carnaval, o blog RGB Magazine produziu um novo papel de parede (Wallpaper) com o calendário de fevereiro de 2010.

• Wallpaper: Carnaval
• Criação: Rafael Marques
• Tipo de Arquivo: .jpg
• Resoluções: 1920×1200 | 1280 x 800 | iPhone

Papel de Parede de Carnaval

Download: 1920×1200 | 1280 x 800 | iPhone

Todo ano são lançados novos carros e junto com eles propagandas e sites de alto nível. É espetacular ver tanta interatividade e design em sites promocionais de carros, em sua maioria desenvolvidos com a tecnologia Flash. Pensando nisso, trouxe uma lista de 10 sites incríveis de carros.

Mustang 2010:

Mustang 2010

Alfa Romeo 159

Alfa Romeo 159

On Toyota’s Mind

On Toyota

Mercedes-Benz B-Class

Mercedes Benz B-Class

Lexus GS450h

Lexus GS450h

Volkswagen 60 jaar

Volkswagen 60 Jaar

GTI Project

GTI Project

Porsche

Porsche

Ferrari California

Ferrari California

Ford Fusion

Ford Fusion

Nem preciso mencionar que o Twitter é uma ferramenta de comunicação bem sucedida e poderosa. O post de hoje é para ensiná-lo a criar uma área para exibir suas atualizações no seu blog com o design que você desejar.

Existem diversos widgets prontos para fazer, alguns são recomendados pelo próprio Twitter no endereço: http://twitter.com/downloads. O twitter oferece uma ferramenta bem prática para você personalizar um widget e obter o código fonte para inserir no seu site ou blog. Quem quiser conferir basta acessar o endereço http://twitter.com/goodies/widgets.

Infelizmente a personalização é limitada, entre cores de fundo, cores dos textos, links e tamanho do widget. Que tal criar seu próprio design para exibir seus tweets?

Pre-requisitos do Tutorial

• Dominar algum programa gráfico (Photoshop, Fireworks, etc)
• Noções de HTML e CSS

Índice

1. Criando o Layout
2. Escrevendo o HTML e CSS
3. Inserindo o Script
4. Publicando

Criando o Layout

Abra o programa gráfico que você tem mais domínio. Defina primeiramente a largura na qual seu widget irá ocupar. O exemplo a seguir utiliza o Photoshop e a largura do widget será de 300px.

Você deve pensar em 3 áreas distintas:

• O topo do widget
• A área cujo serão exibidos seus tweets
• O rodapé do widget

Como sugestão é interessante deixar o topo com a sua marca ou sua foto e no rodapé um link para segui-lo. Veja o modelo a seguir:

Design de widget para exibir os updates do Twitter

Com o design pronto você deverá começar a trabalhar com o HTML e CSS. Recorte seu layout em 3 partes:

Áreas de recorte da imagem para HTML e CSS

Escrevendo o HTML e CSS

O HTML também terá 3 blocos, ou melhor dizendo divs. Escreva a seguinte estrutura:

<div id="widget-twitter">
<div class="topo">
</div>
<div class="conteudo">
</div>
<div class="rodape">
</div>
</div>

Em seguida insira o conteúdo do topo e rodapé (textos, links e imagens):

<div id="widget-twitter">
<div class="topo">
<a href="http://www.rgbmagazine.com.br/" title="RGB Magazine"><img src="widget-topo.jpg" width="300" height="80" alt="RGB Magazine" /></a>
</div>
<div class="conteudo">
</div>
<div class="rodape">
<a href="http://twitter.com/rgbmagazine" title="RGB Magazine no Twitter">siga-me no twitter</a>
</div>
</div>

Após concluir o HTML personalize o CSS com as imagens, planos de fundo e cores.

/* div principal: defina a largura do seu widget */
#widget-twitter {width:300px; color:#502A02;}
#widget-twitter img {border:0;}
#widget-twitter div {margin:0; padding:0;}
#widget-twitter a {color:#730; font-weight:bold;}

/* conteudo: insira o plano de fundo e formate a tag <li> que irá exibir seus posts */
#widget-twitter .conteudo {background:url(widget-conteudo.jpg) repeat-y;}
#widget-twitter .conteudo ul {margin:0; padding:5px 35px;}
#widget-twitter .conteudo ul li {list-style-type:none; padding:10px 0;}

/* rodape */
#widget-twitter .rodape {height:62px; background:url(widget-rodape.jpg) no-repeat; padding:75px 35px 0;}

Inserindo o Script

Faltou o código dos updates não é mesmo? Este widget utiliza o formato de lista não ordenada (tags <ul> e <li>) para exibir seus updates. Para executá-lo basta inserir o seguinte código dentro da div específico para o conteúdo:

<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/rgbmagazine.json?callback=twitterCallback2&amp;count=5"></script>

Importante: Não esqueça de inserir qual perfil do Twitter e quantos updates deverão ser exibidos. Observe onde alterar:

• Perfil a ser exibido: entre o trecho “user_timeline/” e “.json”
• Número de updates: No fim do script, logo após o trecho “count=”

Após inserir o script teste no seu navegador e formate a tag <li> da maneira que considerar mais conveniente.

Observações: a nomenclatura das classes e id’s atribuidos dentro do HTML podem ser alterados com exceção do id “twitter_update_list”, pois a mesma referência está dentro do script. Caso queira também pode salvar o arquivo javascript no dentro do diretorio do seu site, fica a seu critério.

Publicando

Seu widget já está pronto, lembre-se de testá-lo em vários navegadores para analisar se houve alguma falha no CSS. Quem usa o Wordpress pode criar um widget de texto e colar os códigos do html.

Agora você já sabe integrar seus updates do Twitter no seu blog, aproveite a dica e aumente a integração das mídias digitais com a sua marca.

Faça o download do widget criado neste tutorial: baixar arquivo.