Tutorial Intermediário de CSS: Pseudo Classes

18 03 2008

Quatro Estados de um Link

Pseudo classes são usadas juntos com seletores para especificar um estado do seletor. Elas aparecem na forma seletor:pseudo classe { propriedade: valor; }, com um sinal de dois-pontos separando o seletor e a pseudo classe.

Muitas das pseudo-classes definidas pelo CSS não são suportadas por todos os navegadores, mas existem quatro que podem ser usadas com segurança quando aplicadas à links:

  • link indica o estilo de links não-visitados.
  • visited indica links que foram visitados.
  • active indica um link que está com o foco (por exemplo, quando ele está sendo clicado).
  • hover indica um link enquanto o cursor é mantido sobre ele.
a.homemdasneves:link {
	color: blue;
}

a.homemdasneves:visited {
	color: purple;
}

a.homemdasneves:active {
	color: red;
}

a.homemdasneves:hover {
	text-decoration: none;
	color: blue;
	background-color: yellow;
}

Experimente. Crie uma página HTML que use esses estilos. Veja quando cada pseudo classe é usada. Crie uma outra página HTML e um outro arquivo CSS e explore um pouco mais essas classes. Dominar esses estados te ajuda a fazer páginas bem mais legais.

Embora CSS te dê o poder de contornar isto, manter links visitados com cores diferentes de links não-visitados é uma boa prática, já que muitos usuários supõe que isso vai acontecer.

Tradicionalmente, links de texto são azuis se não visitados e violeta se visitados, e ainda existem razões para acreditar que essas cores são as mais eficazes para isso. No entanto, com a crescente popularização do uso do CSS, essas cores estão deixando de ser lugares-comum e o usuário médio não assume mais que links precisam ser azul ou violeta.

Você também devia estar apto a usar a pseudo classe hover com outros elementos além de links. Infelizmente, o Internet Explorer (sempre ele) não suporta esse recurso até a versão 6. Isso é uma tremenda irritação, porque existem um monte de truquezinhos legais que você pode fazer com isso que ficam ótimos em outros navegadores.

Páginas Relacionadas

Exemplos

  • Rollovers 1 – links gráficos que mudam quando o cursos passa por eles usando :hover.
  • Rollovers 2 – Efeitos mais interativos, usando :active.
BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios




Tutorial Intermediário de CSS: Agrupando e Aninhando

17 03 2008

Código CSS com seletores aninhados e agrupados

Agrupando

Você pode aplicar as mesmas propriedades a vários seletores sem precisar repetí-los. Basta separar os seletores com vírgulas.

Por exemplo, se você tem alguma coisa assim:

h2 {
	color: red;
}

.outraClasse {
	color: red;
}

.maisUmaClasse {
	color: red;
}

Você pode trocar por isso:

h2, .outraClasse, .maisUmaClasse {
	color: red;
}

Aninhando

Se o CSS estiver bem estruturado, não deve existir a necessidade de muitos seletores de classe ou ID. Isso porque você pode especificar propriedades para seletores dentro de outros seletores. Por exemplo:

#topo {
	background-color: #ccc;
	padding: 1em
}

#topo h1 {
	color: #ff0;
}

#topo p {
	color: red;
	font-weight: bold;
}

Faz com que não haja necessidade de mais classes e ID’s se estiver aplicado a um HTML que pareça com esse:

<div id="top">

	<h1>Acarajé de Chocolate</h1>

	<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

	<p>Mmm mm mmmmm</p>

</div>

Isso acontece porque, ao separar seletores com espaços, nós estamos dizendo “h1 dentro do ID topo tem a cor #ff0” e “p dentro do ID topo é vermelho e está em negrito”.

Isso pode ficar bem complicado (porque pode se extender por mais de dois níveis, como isso dentro disso dentro disso etc.) e pode exigir um pouco de prática.

Páginas Relacionadas

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de CSS

16 03 2008

Trecho de Código CSS

Como o Tutorial Intermediário de HTML, esse Tutorial Intermediário de CSS não deve ser tão difícil, mas ao invés disso complementar o básico que você viu no Tutorial Iniciante de CSS.

Conteúdo

Páginas Relacionadas

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de HTML: Tags Más

13 03 2008

Código

Essa página analisa algumas tags HTML dos mundos de contos de fada e tempos pré-históricos. Más, fedorentas, ou simples coisinhas feias que pertenceram a padrões HTML ultrapassados, tolices proprietárias aleatórias que só quase-funcionam numa sub-versão de algum navegador ou tags que simplesmente foram suplantadas por tags mais novas.

A abordagem do HTML Dog de ensinar HTML e CSS baseado nos padrões web sem fazer barulho nenhum sobre os próprios padrões é uma boa mas, ao fazer isso, usuários (principalmente iniciantes) podem encontrar abordagens diferentes e más-práticas em outros lugares e não saber o que há de errado com elas. Pensando nisso foi criado esse guia sobre o que Não usar.

HTML tentou se mover da apresentação para o significado, conduzindo uma filosofia de separar o conteúdo e significado (HTML) da apresentação (CSS). Essa abordagem geral torna as páginas muito mais enxutas, porque um único conjunto de instruções relativas à apresentação (em um arquivo CSS externo) pode ser aplicado a muitas páginas. Isso também faz com que a manutenção do site se torne muito mais fácil, já que mudanças globais podem ser feitas a partir de uma única origem.

Algumas das “tags más” são apenas tags relativas à apresentação (como small) que devem ser substituídas por alguma coisa com significado ou simplesmente CSS. Outras podem ser não apenas relativas à apresentação, mas desnecessariamente volumosas (como a tag font) ou horrivelmente prejudiciais à usabilidade (como o blink).

Tags

Essas são algumas das tags mais comuns por aí que têm alternativas melhores:

  • b pode ser usado pra deixar um elemento em negrito. Usar strong (que quer dizer ênfase forte) em seu lugar adiciona significado. Para adicionar apenas negrito, sem significado especial, a regra CSS font-weight: bold faz o serviço.
  • i pode ser usado para deixar um elemento em itálico. Usar em (significa ênfase) em seu lugar adiciona também significado. font-style: italic também pode ser usado pra ajustar apenas a apresentação.
  • big pode ser usado pra criar um texto grande. Usar, ao invés disso, cabeçalhos (h1, h2, etc., quando o texto for um cabeçalho genuíno) adiciona significado, ou simplesmente usar a propriedade font-size no CSS te dá mais controle sobre a apresentação.
  • small pode ser usado pra criar texto pequeno. CSS (font-size) mais uma vez te dá mais controle.
  • hr pode ser usado pra mostrar uma linha na horizontal. De qualquer forma, é raro usar hr numa página feita com CSS; propriedades como border-top e border-bottom ou até mesmo simples imagens fazem o trabalho bem melhor.

Todas as tags mencionadas acima são compatíveis com os últimos padrões HTML, mas elas não aplicam nenhum significado ao conteúdo, coisa que todas as “tags boas” devem fazer. Elas poderiam ser mais úteis, mas elas não são muito prejudiciais, e facilmente poderiam ser confundidas com pequenas criancinhas inocentes e cheias de bondade perto dessas tags imundas abaixo:

  • u pode ser usado pra sublinhar elementos. Só que a maioria das pessoas associa texto sublinhado com links (se tá sublinhado, é pra clicar). Por isso essa tag morreu muito tempo atrás – você realmente não quer sublinhar texto que não seja link.
  • center pode ser usada pra centralizar um elemento dentro de outro. A propriedade CSS permite os valores não apenas de center, mas também left (esquerda), right (direita) e justify (justificado).
  • menu pode ser usado pra criar um menu. Ela faz exatamente o que ul faz, mas como uma “lista não-ordenada” é mais geral, ul permanece de pé sobre o cadáver de menu.
  • layer é similar ao elemento div posicionado com CSS. Ela só funciona em versões velhas do navegador Netscape, o que a torna meio inútil.
  • blink faz o texto piscar e marquee faz o texto ficar atravessando a página. Apenas digam “NÃO!”, crianças. Elas tem um suporte muito limitado e com certeza foram criadas só pra fazer brincadeiras muito, muito doentes.
  • font, que podia ser usada pra definir o nome da fonte, tamanho e cor de um elemento ganhou uma merecida reputação de ser o notoriamente perverso Lord dos Duendes diabólicos da Taglândia. Velhos sites (e até mesmo alguns novos) tem tags font espalhadas por todas as suas páginas como uma praga de cupim. Muita de sua proliferação começou com os softwares de autoria web colocando a tag font ao redor de cada elemento em que o autor aplicava cor ou tamanho. Enquanto a tag font precisa ser aplicada em cada ocorrência de um elemento (digamos, sempre que você usa uma tag p), com CSS você pode aplicar propriedades a todas as ocorrências de um elemento com apenas uma linha de código para todo o seu site. Usando esse método, a página fica bem mais leve que uma página equivalente infestada de tags font. Além disso, mudanças podem ser feitas mais facilmente porque tudo que você precisa fazer é mudar uma linha de CSS ao invés de cada instância da tag font. Isso também aumenta suas chances de manter um design consistente em todo o site. tags font e o uso inapropriado de tabelas são as causas mais comuns de páginas desnecessariamente inchadas.

Atributos

Você pode pensar que, agora que já conhece as tag más e só vai usar as boazinhas, seu HTML está limpo e seguro. Mas existem alguns atributos na estreita esperando pra estragar suas “tags boas”.

  • name pode ser usada pra dar um nome a um elemento, o que é perfeitamente aceitável em elementos em formulários como o input, mas em qualquer outro lugar name foi substituído pelo atributo id.
  • text e bgcolor podem ser usadas pra especificar a cor base do texto e a cor do background de uma página dentro da tag body de abertura. As propriedades CSS color e background-color podem fazer isso quando aplicadas ao seletor body.
  • background pode ser usado dentro da tag body pra especificar uma imagem para o background de uma página. CSS cuida de imagens de background bem melhor com propriedades como background-image.
  • link, alink e vlink podem ser usadas na tag body pra especificar a cor dos links (não-visitado, ativo e visitado). CSS, baby – :link, :active e :visited fazem todo o trabalho.
  • align pode ser usada pra alinhar o conteúdo de um elemento (como em <div align="center">Stuff</div>), mas, como acontece com a tag center, a propriedade CSS text-align é a nova chefe.
  • target pode ser usada pra abrir um link em vários estados, geralmente em uma nova janela (como

<a href="qualquerlugar.html" target="_blank">Ajude me</a>

). Parece legal, mas não está fazendo nenhum favor ao seu site. Usuários não querem que coisas (como novas janelas) apareçam como mágica e a ferramenta de navegação mais usada em um site é o botão “Voltar”, que não vai funcionar se você abrir o link em uma nova janela. target é inválido e inacessível.

Atributos relativos a apresentação como width e height para imagens e cellpading e cellspacing para células ainda tem que ser usados devido a frequência com que diferentes valores precisam ser aplicados a diferentes elementos. Eles não são a solução perfeita, mas se você tem uma página com um grande número de imagens ou tabelas, você pode não ter nenhuma outra escolha sensata.

Os mais desconcertantes atributos relativos a apresentação pertencem a tag textarea, onde os atributos cols (número de colunas) e rows (número de linhas) são não apenas válidos, mas obrigatórios segundo o último padrão HTML.

Tags boas, mau uso

Pra entrar na sua casa você até pode se ajoelhar e se espremer por aquela pequena portinhola de cachorro mas espere! Tem uma porta humana bem grande enfeitada com um aparelho chamado fechadura! Wow! Olhe – a porta, tipo, é do tamanho certo pra um humano passar.

A coleção de tags HTML (as boas) foi feita pra uma razão específica e acredite ou não (acredite), quando você as usa pelos motivos certos, você consegue resultados melhores.

Páginas web são muito mais acessíveis para pessoas com deficiências quando o HTML é semântico (as tags são usadas pelos motivos certos), por que, por exemplo, leitores de tela vão geralmente enfatizar uma lista quando encontram uma tag ul ou ol e um cabeçalho quando encontram um h1 ou h2.

A tag HTML mais usada inapropriadamente é a table. Tabelas são muitas vezes usadas pra fazer o layout, mas elas devem ser usadas apenas pra mostrar dados tabulares, como sempre foi sua intenção. O método de layout sem tabelas não é nenhum tipo de desafio Zen Budista para a iluminação de um verdadeito geek, existe um benefício prático real de não apenas reduzir drasticamente o peso da página, mas também facilitar a manutenção e o redesign. Um bom exemplo disso é o Zen Garden (versão brasileira – Zen Garden do Maujor). Mudando apenas o CSS, você muda o visual do site inteiro. Legal, não é?

Algumas vezes designers usam algumas das tags e atributos mencionados aqui (especialmente tabelas para layout) pra conseguir um design que suporta tanto navegadores antigos (em especial o Netscape 4) quanto os modernos. Tabelas vão efetivamente permitir um controle melhor sobre a apresentação em navegadores que não suportam o CSS, como o Netscape 4, mas existem pouquíssimos usuários desses navegadores e cada vez menos, enquanto o número de usuários onde um layout feito com tabelas é uma grande desvantagem – usuários de dispositivos móveis – cresce. As vantagens de um design livre de tabelas mencionadas acima de longe superam as desvantagens e o resultado são páginas que, embora percam o estilo pra uma minoria, permanecem com todas as suas funcionalidades em todos os navegadores.

Frames (Quadros)

Cachinhos Dourados achou que seria uma ótima idéia comer aquelas tigelas de mingau, mas três mamíferos grandes e carnívoros apareceram e a jogaram pela janela. Frames são tigelas de mingau que pertencem a ursos. Podem parecer legais, mas é bem perigoso andar em algum lugar perto deles.

A maioria dos sites não usa frames e no geral usuários da web estão acostumados com um único documento compondo uma página.

Mas se, por alguma razão, você quer:

  • prevenir os usuários de adicionar uma página específica aos seus favoritos;
  • prevení-los de recomendar uma página por email ou mensageiro instantâneo;
  • adicionar um outro nível de complexidade pra usuários que usam leitores de tela, que vão ter que navegar entre frames ao invés de navegar por uma página
  • confundir mecanismos de busca,

vá em frente, use frames.

No geral, frames não fazem nada além de adicionar complexidadade e subtrair usabilidade.

Se você seguir essas receitas de bolo, você não vai errar muito:

  1. Se o nome da tag ou atributo pelo menos sussura alguma coisa sugerindo apresentação, não use. Isso é trabalho do CSS. E CSS faz o trabalho bem melhor.
  2. Usa a tag pra fazer o que o nome indica. Tabelas são pra dados tabulares. Cabeçalhos pra cabeçalhos. Etcetera etcetera.
  3. Quando você tiver algum conteúdo específico, use as tags apropriadas. Listas pra listas, cabeçalhos pra cabeçalho, yada yada yada.

E já que falamos muito de usabilidade e acessibilidade, alguns links pra você ficar mais por dentro do assunto:

Páginas Relacionadas

Referência

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de HTML: Listas de Definição

10 03 2008

Lista de definição

O Tutorial Iniciante de HTML analisou só as listas ordenadas e não-ordenadas. Assim como a série “Jennie é um Gênio”, listas de definição são muito frequentemente esquecidas. Isso acontece talvez porque elas são bem mais específicas que listas ordenadas e não-ordenadas e até menos úteis, mas onde existir uma lista de termos e descrições (como um glossário), uma lista de definição deve ser usada.

O elemento dl põe a bola em jogo, similar aos elementos ul e ol, iniciando a lista. Ao invés de elementos li, listas de definição tem um elemento dt, que é o termo da definição (definition term), seguido de um elemento dd, que é a descrição da definição (definition description) associada ao elemento dt.

Não é necessário haver um elemento dt seguido por um elemento dd, pode haver qualquer número dos dois. Por exemplo, se existem várias palavras com o mesmo significado, devem existir várias dt‘s seguidas por um dd. Se você tiver uma palavra que significa várias coisas diferentes, deve existir um dt seguido por vários dd‘s.

<h1>Um glossário qualquer</h1>
<dl>
	<dt>HTML</dt>
	<dd>Abreviação de HyperText Markup Language (Linguagem de Marcação de Hipertexto) - uma linguagem usada para construir páginas web.</dd>

	<dt>Canino</dt>
	<dd>Qualquer mamífero carnívoro pertencente a família Canidae.</dd>
	<dd>Um tipo de dente humano.</dd>

	<dt>Suco de Vaca</dt>
	<dt>Cerveja de Gato</dt>
	<dt>Leite</dt>
	<dd>Um líquido branco produzido por vacas e usado pra consumo humano.</dd>
</dl>

Páginas Relacionadas

  • Próxima Página: Tags Más
  • Página Anterior: Tabelas II
  • Listas – Listas Ordenadas e Não-Ordenadas (Tutorial Iniciante de HTML)
Exemplos
Referência

BlogBlogs Tags: tutorial, minicurso, html

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de HTML: Tabelas II

10 03 2008

Tabela HTML com cabeçalhos e células mescladas

Tabelas podem ter parecido complicadas o suficiente no Tutorial Iniciante de HTML. Pode ser bem difícil visualizar uma grade de bidimensional a partir de linhas de código unidimensionais.

Bem, isso fica ainda pior. Tudo graças aos atributos rowspan e colspan, usados pra mesclar células. Esses bastardos.

O código seguinte é similar àquele na página sobre tabelas no Tutorial Iniciante de HTML.

<table border="1">
	<tr>
		<th>Coluna 1 Cabeçalho</th>
		<th>Coluna 2 Cabeçalho</th>
		<th>Coluna 3 Cabeçalho</th>
	</tr>
	<tr>
		<td>Linha 2, Célula 1</td>
		<td colspan="2">Linha 2, célula 2, também ocupando o espaço da Linha 2, célula 3</td>
	</tr>
	<tr>
		<td rowspan="2">Linha 3, célula 1, também ocupando o espaço da Linha 4, célula 1</td>
		<td>Linha 3, célula 2</td>
		<td>Linha 3, célula 3</td>
	</tr>
	<tr>
		<td>Linha 4, célula 2</td>
		<td>Linha 4, célula 3</td>
	</tr>
</table>

Primeiro, nós substituímos as tags td da primeira linha por tags th. Enquanto td é uma célula padrão de dados, th é uma célula de cabeçalho. Como as tags td, tags th precisam vir dentro de tags tr.

Nós também usamos os atributos colspan e rowspan em algumas das tags td. Se você olhar pra esse código num navegador, você vai ver que na segunda linha existem agora duas células ao invés de três, com a segunda célula ocupando o espaço da segunda e da terceira colunas.

O atributo colspan, que quer dizer “column span” (colunas mescladas), vai fazer com que uma célula ocupe o espaço do número de células que for especificado. Isso significa, nesse exemplo, que não há necessidade de uma terceira tag td na segunda linha – duas células foram mescladas numa só.

O atributo rowspan (linhas mescladas) é similiar ao colspan, exceto por ele se expandir por linhas ao invés de colunas. Novamente, as células que são “ocupadas” devem ser retiradas. Nesse exemplo, como a célula se expande sobre a quarta linha, só existem nela duas células.

Páginas Relacionadas

Exemplos
Referência
BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de HTML: Tags Meta

9 03 2008

Exemplo de tag

Muitas eras atrás, quanto a Internet era apenas um pequeno número de caixas de papelão unidos uns aos outros através de barbante, tags meta eram os guias turísticos da… erm… Cidade Internet.

Tags Meta não fazem nada com o conteúdo apresentado na janela do navegador, mas são usadas por mecanismos, como os de busca, para catalogar informação sobre a página web.

A tag meta pode ser usada quantas vezes você quiser e pode conter os atributos content (obrigatório), http-equiv e name.

O atributo content é o próprio meta-dado (dado sobre o próprio dado), que está ligado ao atributo name ou http-equiv. Esses meta-dados servem para dar informação extra sobre a página.

O atributo name pode ser qualquer coisa que você queira. Nomes comumente usados incluem author (autor), keywords (palavras-chave) e description (descrição).

O atributo description geralmente é usado por mecanismos de busca (como o Google) para exibir uma descrição da página em seus resultados de busca, e essa é a maior utilidade na aplicação da tag meta.

O atributo http-equiv pode ser usado no lugar de name para fazer um cabeçalho HTTP, que é informação enviada ao servidor aonde a aplicação está. O atributo content (conteúdo) pode ser content-type (tipo do conteúdo), expires (expira), refresh (com que frequência a página automaticamente se atualiza – péssimo pra acessibilidade), ou set-cookie.

<html>

<head>

	<title>Título</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Essa é minha página super excitante sobre condicionadores de ar." />

	...

A razão pela qual as tags meta costumavam ser tão importantes é que mecanismos de busca as utilizavam para construir um perfil da página web. O meta-dado keywords, por exemplo, era usado extensivamente. Hoje em dia, no entanto, a maior parte dos mecanismos de busca usam o conteúdo real da página para definir seus resultados, tornando a maior parte das tags meta sem utilidade nenhuma além de levar informação a alguém que está lendo o próprio HTML.

Pra se aprofundar no assunto, leia o artigo sobre tags meta no Tableless.

Páginas Relacionadas

Referência
BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.