Aproveitei a manhã de domingo de carnaval e, enquanto o carro dos produtos de limpeza não passava aqui na rua tocando aquele forrozinho, o vizinho baterista não começava seus ensaios e nem minha cunhada ligava para agitar a programação do dia… aproveitei para fazer esse vÃdeo tutorial.
Você pode baixar o vÃdeo aqui.
Ok, você está aprendendo sobre os padrões da web, comprou livros, está fazendo cursos, jogou aquele livro do Front Page (acho que exagerei nessa…) fora e o removeu definitivamente da sua máquina, xinga as tabelas de demônio, já está olhando meio torto para Dreamweaver, pinta e borda, etc.
Bela notÃcia para uma tarde de sexta-feira e principalmente para quem inaugurou um blog sobre padrões da web como eu há duas semanas atrás. O pessoal do Tableless acabou de abrir uma nova área no site que está sendo chamada de Comunidade Tableless. A área vai reunir posts de sites diversos sobre web standards e assuntos relacionados.
Parabéns Tableless… excelente idéia !
Esse artigo é a continuação do Sua primeira vez com XHTML e CSS e, por isso, se você fez a leitura dele, recomendo que faça para poder entender melhor os passos que daremos agora.
No artigo anterior trabalhamos o xhtml e o css para construir um layout com três colunas conforme a idéia abaixo:
layout de 3 colunas
Você quer colocar a mão na massa e montar sua primeira página com a dobradinha XHTML e CSS ? Então vamos lá. Montei quatro arquivos que, na realidade, servirão como quatro passos para alcançarmos o resultado. Primeiramente vou resumir o conteúdo dos arquivos:
1. O XHTML possui uma div, um cabeçalho H1 que é o tÃtulo do site e um parágrafo. O CSS formata apenas esse elementos da página, ou seja, não há classes ou IDs. As regras do CSS não possuem abreviações, estão “cheias”.
2. Tudo igual ao primeiro arquivo, mas o CSS foi resumido que é para você perceber o quanto pode diminuir o seu código.
3. Divs foram criadas e receberam IDs, mas as regras dos IDs não foram criadas ainda.
4. Criadas as regras para as IDs. São regras que controlam o posicionamento e outras caracterÃsticas das divs e fim.
Vamos ver agora o código de cada um deles comentados em seguida:
Observe a caixinha que segue e que tem o seguinte código:
Não me lembro exatamente quando, mas o ano passado (2005) alguns termos na web me chamaram a atenção. Esses termos eram: Web Standards, Tableless, XHTML, CSS, Semântica, Acessibilidade, Usabilidade, etc.
Lembro-me de alguém comentando… “você viu que agora o layout do site pode ser controlado via CSS… não precisamos usar mais tabelas para fazer layouts !”.
Desde que consegui o primeiro resultado importante nos buscadores por causa do uso da semântica, toda vez que vou fazer um novo site, observo como os sites concorrentes estão aparecendo na busca.
O que quero dizer com “observar” significa acessar o site e olhar o código fonte, saber se lá dentro algum esforço foi feito para que uma posição entre os primeiros fosse alcançada, ou seja, se quem fez o site usou os padrões da web, se tem alguma idéia do que são e se a idéia está sendo usada com bom senso.
