Estou falando da regra do CSS chamada @font-face . Ela permite que você utilize famílias de fontes fora do padrão do sistema operacional.

Formatos

É importante utilizar várias extensões da fonte escolhida, pois cada navegador renderiza de uma maneira.

Os formatos de fontes aceitos pelos navegadores padrões são .ttf, .eot, .otf, .svg e .svgz. Veja abaixo:

• TTF: Arquivo Raw TrueType, criado para visualizações em tela.
• EOT Lite: EOTs é suportado apenas pelo Internet Explorer. O EOT é descompactado e tem o mesmo tamanho que o TTF.
• EOT Compressed: EOT comprimido com LZ. O tamanho dos arquivos são muitas vezes menor do que WOFF.
• WOFF: Cross-browser, formato de fonte única que usa compressão gzip. IE9+, FF3.6+, Chrome 5+.
• SVG: Formato XML exigido por dispositivos de iOS antes da versão 4.2.
• SVGZ: Versão comprimida do SVG.
• OTF: Foi concebido para ser o sucessor do formato TrueType e do formato PostScript Type 1. Pode ser utilizado em Mac OS, Windows e alguns sistemas Unix.

Para converter uma font, você pode utilizar a ferramenta do site Font Squirrel .

Google Web Fonts

Você pode utilizar o Google Web Fonts e obter uma font online no servidor do Google. Pode ser viável se o uso for pequeno e em palavras específicas do site.

Como usar o @font-face

Adicione a sintaxe abaixo na sua folha de estilos, alterando apenas o nome e endereço da font escolhida:

1
2
3
4

@font-face {
     font-family: helveticaneue;
     src: url('HelveticaNeueLTStd-UltLt.otf');
}

Feito isso, você a utiliza como qualquer outra font:

1

p { font: 18px helveticaneue, Arial, Tahoma, Sans-serif; }

Um detalhe importante é que para utilizar a fonte, ela precisa ser gratuita ou caso seja paga, ter a devida autorização.

Leia mais sobre o @font-face:

• Maujor
• Tableless

• Por que renovar o design do seu site?
• Capitalistas Sociais e Economia Criativa na Campus Party 2011
• Criatividade vs. Usabilidade e Acessibilidade
• Referências rápidas (Cheat Sheets) para Desenvolvedores Web
• 5 dicas para deixar o seu código CSS mais legível e otimizado

1. Utilize espaços em branco e idente os elementos filhos

Os espaços em brancos facilitam a leitura de um código CSS. Não escreva os elementos e as suas propriedades tudo junto sem nenhum espaço. Outra dica é identar os elementos filhos, pois destacam as dependencias entre os elementos.

Utilize os espaços em branco com bom senso: Eles influenciam no peso final do arquivo CSS. Então no processo de desenvolvimento, mantenha os espaços em braço, mas quando o arquivo CSS é finalizado, faça uma versão comprimida do mesmo, utilizando os compressores de CSS citados no final desse artigo.

Exemplo de um código não espaçado e não identado:

1
2
3

div#menu-esquerda{padding:10px;margin:5px;float:left;border:1px solid #333;width:300px;height:500px}
div#menu-esquerda-superior{font-size:12px}
div#menu-esquerda-inferior{font-size:14px;font-weight:bold}

Exemplo de um código espaçado e identado:

1
2
3

div#menu-esquerda { padding: 10px; margin: 5px; float: left; border: 1px solid #333; width: 300px; height: 500px }
        div#menu-esquerda-superior { font-size: 12px }
        div#menu-esquerda-inferior { font-size: 14px; font-weight: bold }

Há pessoas que preferem escrever o código com cada propriedade em uma única linha, por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div#menu-esquerda {
        padding: 10px;
        margin: 5px;
        float: left;
        border: 1px solid #333;
        width: 300px;
        height: 500px
    }
 
    div#menu-esquerda-superior {
            font-size: 12px
    }
 
    div#menu-esquerda-inferior {
            font-size: 14px;
            font-weight: bold
    }

2. Comente o seu código

Comente o seu código CSS, separando-o em partes lógicas, mas não abuse dos comentários: Não comente partes desnecessárias que não irão servir para auxiliar o entendimento do código.

1
2
3
4
5
6
7
8

/* ----- Conteudo ----- */
div#conteudo { float: right: border: 1px solid #333 }
 
/* ----- Menu esquerda ----- */
div#menu-esquerda { padding: 10px; margin: 5px; float: left; border: 1px solid #333; width: 300px; height: 500px }
 
/* ----- Rodape ----- */
div#rodape { ... }

3. Agrupe os elementos com as mesmas propriedades

Se você possui elementos que compartilham das mesmas propriedades, agrupe-os e reaproveite o seu código. Caso esses elementos possuam alguma propriedade diferente, declare-as separadamente. Olhe o código abaixo:

1
2
3

li#ico-vinho { background: url(vinho.gif); padding-left: 10px; margin-left: 10px }
li#ico-uvas { background: url(uvas.gif); padding-left: 10px; margin-left: 10px }
li#ico-acessorios { background: url(acessorios.gif); padding-left: 10px; margin-left: 10px }

As propriedades padding-left e margin-left se repetem nos três elementos, logo, podemos otimizar esse código, escrevendo-o assim:

1
2
3
4

li#ico-vinho, li#ico-uvas, li#ico-acessorios { padding-left: 10px; margin-left: 10px }
li#ico-vinho { background: url(vinho.gif) }
li#ico-uvas { background: url(uvas.gif) }
li#ico-acessorios { background: url(acessorios.gif) }

4. Abrevie as propriedades

Abreviar as propriedades de algum elemento é uma ótima maneira de escrever um código pequeno. Caso você utilize mais de uma propriedade para o mesmo elemento, abrevie-os se possível.

Os elementos margin, border, padding, background, font e list-style são alguns exemplos que permitem a abreviação das propriedades.

Ao invés de declarar as propriedades assim:

1

div#menu-lateral { padding-top: 10px; padding-right: 5px; padding-bottom: 15px; padding-left: 13px }

Podemos escrever assim:

1

div#menu-lateral { padding: 10px 5px 15px 13px }

Sendo que o primeiro valor é o superior, o segundo valor é o espaçamento direito, terceiro valor é o inferior e o quarto é o espaçamento esquerdo.

5. Resete as propriedades do seu CSS

Utilize o CSS Reset para minimizar as diferenças de formatação dos elementos HTML que cada navegador tem por padrão. Você pode encontrar várias maneiras de resetar o código CSS no site CSS-Reset.com ou utilizar o código abaixo, que é um CSS Reset genérico:

1

* { border: 0; margin: 0; padding: 0; list-style: none }

Caso o tamanho final do seu arquivo CSS fique grande, você pode comprimi-lo, utilizando um compressor de CSS, como o CSS Compressor (http://www.csscompressor.com/ ) ou o CSS Optimizer (http://www.cssoptimiser.com/ ). Utilizando essa ferramenta, o tamanho final do seu arquivo CSS irá reduzir drasticamente.

Se você possui outras dicas para organizar ou otimizar o código CSS, por favor compartilhe conosco deixando um comentário.

Não deixem de votar na nossa enquete, para nós escrevermos os próximos artigos.

Até a próxima!

• O pulo do gato: @font-face
• Referências rápidas (Cheat Sheets) para Desenvolvedores Web

O que são?

Os Padrões Web são recomendações do W3C (World Wide Web Consortium ), as quais são destinadas a orientar os desenvolvedores para o uso de boas práticas que tornam a web acessível para todos.

Mas espera aí! Quem é esse tal de “W3C”?
O W3C é um consórcio de empresas de tecnologia que desenvolvem padrões para a criação e a interpretação dos conteúdos para a web. Com esses padrões, o site desenvolvido pode ser acessado por qualquer pessoa ou tecnologia.

Porque utilizar

Utilizando os padrões estabelecidos pelo W3C ao desenvolver um site, você está garantindo que qualquer pessoa poderá acessar o seu site, através de qualquer aparelho ou software.

Os sites que não seguem esses padrões, não são interpretados corretamente pelos navegadores e programas para pessoas com necessidades especiais, ou seja, esses sites são limitados e não oferecem uma experiência agradável a todos os tipos de visitantes.

Uma das principais recomendações, é o uso correto das tags disponíveis, pois é comum a utilização de uma tag para um uso a qual ela não foi destinada. Um exemplo disso, é a utilização das Tags <table> e <div> para dispor os elementos na página. Utilizando corretamente as tags em seu documento, você o torna mais semântico e acessível.

Como saber?

O primeiro passo para saber se você está seguindo as recomendações do W3C, é realizar um estudo dessas recomendações. De início, é altamente recomendado a leitura dos dois documentos abaixo feitos pelo próprio W3C.

• Recomendações XHTML 1.0 (original)
• Recomendações XHTML 1.0 (traduzido)
• Recomendações CSS nível 2 (original)

Após a leitura dos documentos acima, você poderá começar a fazer o seu site utilizando XHTML e CSS. Para ter certeza que você está usando as tags corretamente e que não está faltando nada importante, existem validadores que verificam o código e retornam os erros encontrados. Os validadores mais comuns, são o de HTML / XHTML e CSS, porém há outros tipos de validadores, como o de acessibilidade para pessoas portadoras de necessidades especiais.

• HTML / XHTML
• CSS

A construção de um site seguindo os Padrões Web será assunto para um próximo artigo. Enquanto isso, estude bastante e use o bom senso. Até a próxima!

• Table vs. Div – O Bom, o Mal e o Feio
• W3C Web.br 2010 – 2a. Conferência Web W3C Brasil
• Referências rápidas (Cheat Sheets) para Desenvolvedores Web
• 1ª Conferência Web W3C Brasil
• Criação de Sites dentro dos Padrões Web

Quem é quem?

Antes de falarmos qualquer coisa, vamos saber o significado e qual o propósito de cada um em um documento HTML.

Table: A tag <table> define uma tabela dentro de um documento HTML. Ela é usada para listar dados tabulares dentro de linhas e colunas. A tag <tr> define a linha e a tag <td> define a coluna da tabela. Há outras tags utilizadas na tabela, como o <thead>, <tfoot>, entre outras, para torná-la mais semântica.

Div: A tag <div> define uma divisão ou uma seção em um documento HTML. É usada geralmente para fazer blocos de elementos, dispondo organizadamente as informações dentro do layout, que são formatadas com CSS. A tag <div> é controlada pela CSS através de um ID, Class ou pela própria tag.

Table, o Feio

Há muito tempo atrás, em uma web muito distante… ou talvez não tão distante assim (pra não dizer atual), as pessoas utilizavam a tag <table> para dispor os elementos dentro da página HTML. O site era feito rapidamente através da parte visual de algum editor HTML, como o FrontPage ou Dreamweaver por exemplo, e não havia necessidade de testar em vários navegadores, pelo fato dos navegadores interpretarem igualmente a tag <table>.

Porém, essa rapidez tem um preço: Código de difícil manutenção e restrição de navegadores. Um site estruturado com a tag <table>, consome mais tráfego e torna-se confuso para manutenção e mecanismos de busca.

Dizem que quando um site é estruturado com a tag <table>, o site é compatível com todos os navegadores e que demora muito menos para ser estruturado do que um site estruturado com a tag <div>… mas será que é isso mesmo?

“Um site que você faz utilizando a tag <div> em 5 horas, eu faço em 1 hora utilizando a tag <table>! É rápido e de fácil manutenção. É só colocar mais uma tabela dentro de outra tabela que está tudo resolvido! E se a tabela estourar, coloco mais uma tabela para consertar a outra.”

- Webmaster que utiliza Table após diagramar um site com 10 mil linhas de código (e que só ele entende).

Div, o Bom

Um site estruturado com a tag <div> ganha semântica, fácil manutenção, menor tamanho da página e melhora o indexamento para os mecanismos de busca. Porém o fato de ter que testar em todos navegadores, ainda atrapalha os desenvolvedores.

Com a utilização da tag <div> e das CSS, o termo Tableless a cada dia ganha mais força na web brasileira. Desenvolvendo um site seguindo os padrões estabelecidos pelo W3C, você disponibiliza a todos, independentemente do navegador utilizado ou da necessidade especial que o visitante possui, uma experiência agradável ao visitar o site.

Div, o Mal

A tag <div> não possui só o lado bom, mas também o lado mal. Você hoje, querer fazer a transição de Table para Div, é algo trabalhoso e que, infelizmente, isso se deve a pessoas que não possuem conhecimento nenhum de internet. Mas como asssim?

O navegador da Microsoft, Internet Explorer 6, é conhecido por dificultar esta transição, pois o mesmo não possui uma boa compatibilidade com a dupla Div + CSS. E como vocês sabem, o IE6 é aquele navegador que já vem instalado na máquina daquela pessoa que não possui conhecimento nenhum em informática e que acha que a internet se resume a Orkut e e-mail, sendo assim, você acha que essa pessoa terá o trabalho de atualizar o seu navegador? Infelizmente, não.

Ainda hoje, mesmo com o lançamento do Internet Explorer 8, uma grande parte das pessoas acessam a internet usando o Internet Explorer 6 e 7, sendo assim, não podemos frustrar a experiência desses usuários que utilizam os navegadores antigos, impossibilitando-os de navegarem e de acharem as informaçãos que procuram, mas devemos incentivá-los a atualizarem os seus navegadores para que eles tenham uma experiência mais rica e segura ao navegar pela internet.

“Maldito IE6! Não tem como fazer isso utilzando a tag <div>... acho que vou usar uma tabela aqui. Só uma tabela não faz mal e ninguém vai perceber.”

- Webmaster que começou a fazer a transição de Tabela para Div

Links úteis

Veja abaixo uma lista de links úteis para você estudar melhor as tags do HTML. Bom estudo e até o próximo artigo!

• W3Schools – HTML Tags
• W3C – Worl Wide Web Consortium
• Maujor
• Acessibilidade Legal

• Padrões Web – O que são e porque usá-los
• W3C Web.br 2010 – 2a. Conferência Web W3C Brasil
• Referências rápidas (Cheat Sheets) para Desenvolvedores Web
• 1ª Conferência Web W3C Brasil
• Criação de Sites dentro dos Padrões Web