Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 27 março 2009

Fugindo um pouco do nosso foco, vamos mostrar a vocês nosso mascote: Firefox. Nada mais justo não é?

Vindo diretamente da Mozilla, este querido “panda avermelhado” veio alegrar nosso ambiente de trabalho 😉

Ah, e pra arrematar também encomendamos um pôster… Assim a gente sensabiliza sensibiliza qualquer um que ainda se atreva a usar Internet Explorer!

Poster Firefox

Quer saber alguma maneira de testar seu site no Internet Explorer 6, 7 e 8?

A melhor opção que encontramos atualmente é o IETester, aplicativo que já utilizamos há algum tempo. Seu maior trunfo é a opção de abrir todas estas versões do IE, cada uma em uma aba distinta, deixando seu trabalho de revisão muito mais fácil. O único porém é que você precisa do IE7 original para que funcione corretamente no programa.

Além desta opção temos o Multiple IE, que oferece um instalador para cada versão do Internet Explorer, ferramenta que também já foi muito utilizada em nossa equipe.

Além dessas opções, há alguns sites que geram imagens da sua página, uma para cada browser. O melhor exemplo é o Browsershots, mas é uma opção que não se compara aos softwares citados anteriormente.

Para finalizar, outra opção promissora é o Xenocode Browser Sandbox, que permite visualizar o site em diversos browsers, não se prendendo somente ao IE. Na teoria é algo muito bonito, mas na prática se mostrou bem lento… Talvez com o tempo o serviço melhore e mostre mais viável para o trabalho do dia-a-dia.

Muitos desenvolvedores iniciantes vem nos perguntar maneiras de diminuir o peso dos seus sites. O primeiro passo, com certeza, é fazer um código limpo, semantico, seguindo os princípios dos Web Standards.

Mas há casos, como em grandes portais, que necessitamos dimiuir o carregamento do site ao máximo e uma boa alternativa para isso é a técnica CSS sprites.

Como funciona o CSS sprites?

O princípio é o seguinte: se você utiliza diversos ícones em seu site, ao invés de salvar cada ícone separadamente, pode unir todos em um só arquivo, como no exemplo abaixo:

Exemplo de imagem com diversos ícones, para CSS sprites

Créditos: famfamfam.com

Para usar cada ícone específico, deve-se criar uma classe para o elemento desejado (um link, por exemplo) que use esta imagem como background deslocando seu posicionamento conforme desejado.

Por exemplo, caso seja necessário usar o ícone do Flash, é só fazer o seguinte HTML:

<a class="flash" href="#" title="Flash">Flash</a>

O CSS neste caso é bem tranquilo de fazer necessitando, somente, mudar a posição do fundo:

.voltar, .avancar, .flash { background-image: url(icones.png); background-repeat: no-repeat; }
.flash { background-position: -209px 0; }

A primeira linha é só um exemplo das várias classes criadas para os ícones distintos, definindo a imagem e a repetição de fundo, enquanto a classe específica (segunda linha) só define o posicionamento do mesmo.

Mas por que este método deixa meu site mais leve?

A resposta para esta pergunta é muito simples. Ao invés do usuário carregar imagem por imagem, ele carrega todas de uma vez, fazendo apenas uma requisição para o servidor, o que torna todo o processo mair rápido. Além disso, quando carregada, a imagem exibirá todos os ícones do site de uma só vez, proporcionando uma melhor navegação aos usuários.

Última modificação: 13 março 2009

Porque utilizar botões expansíveis:

  • Reduz número de arquivos;
  • Reduz arquivos a serem baixados pelo usuário;
  • Carregamento da página mais rápido;
  • Reduz classes no HTML / linhas de CSS;
  • Uma classe = utilizado em todos* os botões (* todos com o mesmo estilo dentro do padrão do site).

Botão expansível CSS

Convencido disto, aprenda como fazer:

  1. Criar a imagem do botão:
  2. Dividir a imagem em 2 partes:
    • O botão será formado por duas peças: o lado esquerdo, e o direito.
    • Divida a imagem deixando o lado esquerdo contendo somente a borda esquerda, veja o exemplo (print do photoshop). Salve como botao_esquerdo.png:

      Botão expansível CSS - Passo 1

      Botão expansível CSS - Passo 1

      Para fazer o lado direito, recorde o restante do botão que não seja a borda esquerda. Abra um novo arquivo com dimensões maiores, por exemplo: Se o botão for WIDTH 100px por HEIGHT 20px, o lado direito terá que ter uma largura de 500px. Essa é a imagem que vai fazer a “expansão”. Siga os passos:

    • Selecione o lado direito
    • Abra um novo arquivo (só para ele) Criando a imagem do lado direito
    • Coloque a borda de um lado da imagem (cole no canto direito)
    • Selecione uma medida 1px(largura) por altura total da imagem. Vamos fazer esse pixel ser igual para todo o resto da imagem
    • Com esse pixel selecionado, (CTRL + T ou EDIT > Free Transform). Agora sim, exenta esse pixel até o outro lado da imagem.
      Photoshop Redimensionamento

      Photoshop Redimensionamento

    • Salve como: botao_direito.png
  3. HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:

          <a class="botao_expansivel" href="#" title="Botão expansível"><strong>Botão expansível</strong></a>
        

    – Além do link precisamos de um elemento dentro dele para colocar o outro lado da imagem. Pode ser um EM, SPAN ou STRONG. Como nós gostamos dos Webstandards, indicamos o STRONG, pois não ficará sem sentido como um SPAN, por exemplo.

  4. Código CSS*:

          .botao_expansivel { display: inline-block; padding-left: 5px; background: url(../imagens/botao_esquerdo.png) left no-repeat; }
          .botao_expansivel strong { display: inline-block; padding: 5px; background: url(../imagens/botao_direito.png) right no-repeat; }
        

Quem usa os botões expansíveis (HTML + CSS)?

*CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS