Prefácio
A primeira vez que naveguei na Internet, usei um terminal idiota. Em pouco tempo, um monitor monocromático em Minnesota poderia reproduzir o filme “Monty Python e o Santo Graal” através de um servidor. Não havia mouse, nem uma boa interface de usuário, muito menos cores de 24 bits. Gopher é a única ferramenta disponível. A pesquisa só pode usar Archie e Veronica. Ninguém tinha ouvido falar do W3 (World Wide Web), e a web parecia adequada na época.
Nota do tradutor:
1. Terminal burro. Muito parecido com um PC, mas sem CPU, memória e disco rígido próprios. As transações são processadas através de um host comum.
2.Gopher. Um aplicativo cliente/servidor que exibe todas as informações ao usuário final em forma de menu, realizando transferência FTP, login remoto, pesquisa Archie, etc., permitindo ao usuário navegar por um grande número de informações. Desta forma, os usuários não precisam saber (ou inserir) seus endereços ao acessar os recursos da Internet.
3.Archie é o primeiro programa a indexar automaticamente arquivos anônimos de sites FTP na Internet, mas ainda não é um verdadeiro mecanismo de busca.
4.Veronica é um recurso do tipo Gopher que você pode usar para recuperar todos os itens de menu que contêm palavras especiais especificadas no espaço Gopher.
Depois de um tempo, um código estranho começou a inundar meus resultados de pesquisa. Eu ainda conseguia ler o que precisava, mas era irritante. Um colega me disse que era HTML, uma linguagem gráfica para Internet. Eu aprendi alguns métodos para tentar filtrar HTML. Mais tarde surgiram monitores de 256 cores e a primeira versão do navegador Mosaic, e tudo começou a mudar.
Já se passou muito tempo desde então, a tecnologia melhorou incrivelmente e as interfaces da web foram revisadas, repensadas e reinventadas inúmeras vezes. Desde que comecei a trabalhar como web designer, experimentei em primeira mão as várias fases do design baseado em tabelas, os problemas do JavaScript, as dificuldades do CSS e, mais importante, os padrões da web mais universalmente aceitos.
No início a internet só foi criada a partir das ideias dos Geeks (fanáticos por tecnologia). Na internet só existia conteúdo puro. Eles não consideravam cores de fundo e imagens bonitas. Mas a verdade é que as pessoas gostam de ver expressões mais ricas quando surfam. O surgimento do método de design de tabelas resolve essa dificuldade. Podemos controlar o layout por meio de tabelas! Todos nós começamos a “trapacear” o sistema. Não podemos fazer uma linha fina de 1 pixel? Basta inserir um ponto GIF transparente na linha da tabela e definir uma cor de fundo e pronto! Não é possível controlar as fontes? Então use outra tag <font>!
Antes de conhecer CSS e padrões da web, eu vinha projetando tabelas há muitos anos. O método de design dos padrões da web é completamente diferente de antes. É eficiente e charmoso. Eu me apaixonei profundamente e apaixonadamente por novos métodos de design. Ele pode usar código significativo para separar o conteúdo do layout, mas ainda manter o espaço em branco e o design bonito. Eu imediatamente "gosto do novo e odeio o antigo" e não uso mais os métodos de design antigos.
Até hoje.
Tem havido muita discussão sobre padrões web e CSS. Como toda boa palavra-chave, ela se tornará o próximo “grande nome” na história do desenvolvimento de tecnologia web. Tudo começou com Dougl como Bowman redesenhando o Wired.com e continuou a evoluir. Em 2003, o livro “Designing with Web Standards” escrito por Zeldman foi publicado, permitindo que todos nós vissemos a luz. Designers de todo o mundo abraçaram e aplaudiram o novo método de design. É estruturado, é semântico, é rápido e leve.
Porém, ainda existem algumas pessoas que ainda usam o método tradicional de design de tabela, e até usam a tag <font>. Dizem que o método tradicional é mais fácil, mais conveniente para manutenção e desenvolvimento rápido. Quem está certo?
Decidi fazer um experimento para ver como as coisas mudaram e qual método escolhemos era melhor.
desafio
Projetei um site hipotético usando software gráfico. Então primeiro use HTML4.01 para fazer isso, usando tabelas sem nenhum CSS como comparação, depois use XHTML1.0 Transitional para fazer isso, o código está em conformidade com as especificações de usabilidade e acessibilidade, e usa CSS para evitar tabelas tanto quanto possível; (a menos que a tabela seja usada para representar dados tabulares.)
O processo de produção é dividido em três etapas, e o processo é registrado detalhadamente, e os prós e contras são comparados para ver o que conseguimos? O que foi perdido? De que lado devemos estar.
Fase Um: Projetar o Site
Comecei a projetar um site fictício. Presumo que estou criando um site para uma organização chamada "Butterfly Watchers Association". Haha, este é provavelmente meu melhor cliente que não estará envolvido no processo de design. Tentei torná-lo o mais realista possível, imaginando os usuários-alvo do site, utilizando um layout tradicional e fontes confiáveis.
Quero que o site seja compacto, eficaz e conciso. Além disso, pensei que deveria haver borboletas na página, então procurei em todos os lugares por uma imagem de borboleta adequada e logo encontrei uma em stock.xchng. A borboleta azul pousada entre as folhas verdes se enquadra perfeitamente na imagem do local. Após algum processamento e modificação, esta imagem passa a ser o cabeçalho da nossa página.
Durante o processo de design, aderi a alguns princípios de usabilidade. Por exemplo, tente manter o tamanho do arquivo de imagem o menor possível. A princípio planejei usar a fonte Garamond para a navegação. Posteriormente, considerando que a máquina do usuário pode não ter essa fonte, decidi usar a fonte Georgia (essa fonte é semelhante à Times New Roman, e na pior das hipóteses, pode ser substituído pela fonte Times New Roman). Mas para a imagem do cabeçalho, ainda usei Georgia porque é uma imagem.
O texto tem fundo cinza e usa a fonte Trebuchet MS; a notícia usa a fonte Verdana, que também fica bem quando reduzida; Existe uma regra não escrita para usar 4 fontes em um design, e eu realmente não concordo com isso.
A segunda etapa: “Use o método anterior e use imagens GIF transparentes para controlar o espaçamento”.
Se você já é um web designer que participou de vários projetos, a seguinte estrutura é muito familiar para você:
<table bgcolor="#ffffff" cellpacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">O conteúdo vai aqui.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
Estamos acostumados a usar tabelas para falar porque elas são nossos “blocos de construção” mais básicos. Por exemplo: use imagens GIF transparentes para controlar o espaçamento e use vários atributos de tabelas para controlar a posição. Alguém explicou desta forma: as tabelas são confiáveis e as páginas dispostas com tabelas podem ser compatíveis com versões futuras! Nenhum CSS se atreve a competir com tabelas, as tabelas cabem em todos os navegadores e assim por diante.
Vamos começar reproduzindo passo a passo todo o processo de design.
hora 1
oh. Parece que podemos voltar no tempo. Como podemos definir a cor de fundo sem usar CSS Ah, sim... é bgcolor, obrigado pela dica. Ok, vamos começar a fazer o formulário e visualizar o efeito. Defini "align=center" para que fique centralizado em todos os navegadores, ótimo, como é fácil! A forma não parece ruim e sinto que estou reencontrando um velho amigo. Usei habilmente imagens GIF transparentes para controlar o espaçamento e o trabalho foi rápido! gentileza? Por que existe um espaço em branco entre o cabeçalho e o menu? Ah, acontece que há um espaço extra após o código das imagens, e o navegador IE irá exibi-lo. Isso é fácil de alterar, basta excluir os espaços.
Hora 2
Eu uso javaScript para criar um efeito de inversão para o menu de navegação:
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);"
JavaScript é escrito assim:
função chBg(obj) { obj.bgColor = "#E1E5DB";
Além do fato de ter esquecido um pouco dos antigos métodos de design, todo o progresso foi bastante rápido. Embora eu tenha tentado reduzir ao máximo o aninhamento de tabelas, o código ainda parecia um pouco complicado, então adicionei alguns comentários para facilitar a localização dos locais que precisamos modificar.
Encontrei um pequeno problema: não consigo remover o sublinhado do link sem usar css. Talvez haja uma solução, vamos pesquisar no google.
Hora 3
Depois de pesquisar no google, ainda não consigo encontrar uma maneira. Como posso fazer um link sem sublinhado? Deve haver uma solução!
4ª hora
Vamos dar uma olhada nos resultados das primeiras 4 horas em navegadores diferentes do IE6. oh! Muito feio no Firefox, fica bem no Opera e no Netscape.
Hora 5
Vá em frente e codifique..., depure e modifique.
No trabalho, percebi as limitações da tag <font> para controlar o tamanho da fonte e não conseguia definir vários tamanhos. Caramba!
Também encontrei problemas com o layout do texto na seção Notícias. Para recuar, tive que usar mais aninhamento de tabela para conseguir o efeito. Para organizar as imagens das borboletas no texto à direita do texto, também tive que adicionar uma tabela para resolver o problema. Esse tipo de composição tipográfica “trapaça” me faz sentir impotente.
Hora 6
O design está finalizado e parece praticamente igual ao design original, você pode clicar aqui para dar uma olhada.
Clique aqui para ver quantas tabelas estão incluídas.
Fase 3: Não precisamos de formulários!
A seguir daremos uma olhada no que é um design baseado em padrões da web e elaborado com CSS. Começarei pela identificação do conteúdo. Tentarei tornar o logotipo semântico e evitar tags redundantes.
O cabeçalho é uma imagem, mas também é um título, então escrevo o código assim:
<h1>Associação de Observadores de Borboletas. Nós as observamos.</h1>
Pensarei em como exibir esse título corretamente mais tarde (idealmente, nos preocupamos o máximo possível com o conteúdo e o mínimo possível com o layout). Outros títulos (notícias, avistamentos e adesão) serão identificados como <h2>.
Um menu é basicamente uma lista (lista) não ordenada, portanto será identificado como uma lista. Os parágrafos não precisam ser classificados (usamos seletores de herança para "pendurá-los" na camada que os contém). Vou compará-lo com o texto do conteúdo original para ver quantas tags extras preciso adicionar para obter o layout (tentarei evitar adicionar tags tanto quanto possível).
Este é o texto do conteúdo original. Dê uma olhada no código original, ele está em conformidade com a especificação de transição xhtml1.0. Observe que todos os elementos já estão contidos em <div>s com nomes definidos. A data nas notícias também foi adicionada com a classe de data. Você pode ver que o código é muito simples.
hora 1
Defina a borda da camada "contêiner" como 1px. Centralize o conteúdo definindo "text-align: center" no estilo do corpo. Para ser centralizado em todos os navegadores, margin: 0 auto (que significa top=0, right=auto, bottom=0, left=auto) também é definido em "container". A centralização pode ser feita tão facilmente quanto com tabelas.
Defina os valores de preenchimento "superior" e "inferior" de "corpo" como 20px (não definir diretamente o preenchimento em "contêiner" é adequado para todos os navegadores).
A lista não ordenada (li) deve ser definida como "display:inline" para que o menu seja exibido em uma linha. Adicionei ícones de navegação entre os menus. Esses ícones de navegação são definidos usando o método de fundo não repetitivo, que pode definir com precisão a posição (x, y), semelhante a este:
background: url(menuBullet2.gif) no-repeat 4px 9px; O efeito de mudança de cor do clique do menu adota o estilo hover do link, não necessitando mais de JavaScript.
Defino a imagem da borboleta no topo da página como plano de fundo de <h1>, para não precisar me preocupar com a facilidade de uso, e o título pode ser lido normalmente em dispositivos que não podem exibir imagens (como tela leitores e robôs de busca).
Hora 2
O primeiro item do menu (HOME) usa um ícone diferente e tive que ocultar o fundo original e adicionar um id extra (primeiro) ao menu HOME:
#hMenu ul li #primeiro
Outro ícone (CONTATO):
background: URL transparente (menuBullet3.gif) no-repeat 615px 9px; Não consigo usar CSS para controlar as duas colunas para que tenham a mesma altura. Felizmente, posso usar uma imagem de fundo para contornar isso. Defini um “contêiner” que repete o fundo verticalmente.
plano de fundo: #fff url(bgMain.gif) repetir-y;
Hora 3
As caixas de definição CSS são muito mais convenientes do que as tabelas, especialmente as muitas propriedades das bordas que são muito úteis.
Agora começo a definir o cabeçalho <h2>. A definição do ícone é a mesma acima.
Eu flutuo a camada “notícias” à direita de “avistamentos” e “membros”. Defina a camada "copyright" com "clear: Both;" para que siga a camada flutuante. Flutue a imagem da borboleta no texto à direita e o texto poderá envolver automaticamente a imagem. Definir a borda de 1px da imagem e definir a distância de preenchimento pode obter o efeito de aninhamento das duas tabelas originais.
Alguns problemas foram descobertos: a camada de direitos autorais e a camada de conteúdo se sobrepõem parcialmente.
4ª hora
O erro mostrado está relacionado à definição float:right; de "avistamentos" e "filiação". Flutuá-los para a esquerda resolve esse problema, o que parece estranho. Usei o Firefox no primeiro teste. Bem, não parece ruim, exceto que os ícones do menu foram deslocados em alguns pixels.
Existem algumas técnicas CSS que podem corrigir o efeito de exibição em navegadores não-IE, como fornecer valores de propriedade diferentes para navegadores diferentes.
Usei o valor !important na definição do mesmo elemento. A mesma definição escrita na frente pode ser executada primeiro.
plano de fundo: url (menuBullet2.gif) sem repetição 4px 6px! Importante;
plano de fundo: url (menuBullet2.gif) sem repetição 4px 9px;
Em CSS, se houver múltiplas definições para o mesmo elemento, a última é válida. Mas como o IE não oferece suporte a !important, o IE usará o segundo valor definido e outros navegadores usarão o primeiro valor definido.
Tudo pronto, veja os resultados aqui.
para concluir
design baseado em tabela
Testei a página usando todos os navegadores que encontrei, incluindo aqueles para plataformas Linux, Windows e Macintosh. As páginas de layout de tabela têm a mesma aparência em navegadores diferentes. “É sólido como uma rocha”, este é o primeiro comentário feito ao layout da mesa.
Porém, quando é necessário modificar parte do conteúdo da página, alterar o layout da tabela é bastante trabalhoso. Isso é um problema. Se usarmos um CMS (sistema de gerenciamento de conteúdo), será problemático formatar o conteúdo.
Todo o tempo de design é um pouco longo porque esqueci o método antigo. Se eu fizesse isso de novo, acho que poderia economizar de 1 a 2 horas.
Eu descrevo o design baseado em tabela como um grande "trabalho pesado", embora muitas vezes me surpreenda com as técnicas avançadas de design. Com designs baseados em CSS puro, normalmente estou acostumado a detalhar o design e analisar bugs passo a passo. No entanto, usar o design de tabela não requer esse trabalho. Você só precisa continuar adicionando tabelas ao design. Vejamos o processo CSS novamente.
Design baseado em CSS
Projetar com CSS é muito melhor. As alterações de código são diretas e transparentes e posso controlar claramente todo o processo. Em contraste, o design da mesa é como colocar tijolos. Quanto maior a mudança na página, mais conveniente e eficiente se torna o design CSS.
O design CSS também é muito significativo para economizar largura de banda. Extrair todos os estilos em arquivos separados e usar um ou vários arquivos de folha de estilo para todo o site pode torná-lo menor.
Separar as informações de layout do conteúdo também traz muitos benefícios. No futuro, posso renovar todo o site a qualquer momento sem alterar nada, assim como o CSS Zen Garden. Também aumenta a facilidade de uso, tornando mais fácil para os robôs de busca descobrirem sua página (lembre-se: o Google é sua fonte de visitantes mais importante).
Embora sua eficiência de trabalho seja muito alta quando você está familiarizado com o design baseado em CSS, você deve gastar muito tempo aprendendo as regras, diferenças nos modelos de caixa, técnicas de processamento do navegador e muita teoria, e requer prática contínua para dominar . Resumindo, CSS é mais simples que tabelas, mas se você quiser projetar usando CSS puro, esteja preparado para investir muito tempo aprendendo-o. Mesmo se você for um desenvolvedor experiente, você deve estar preparado para lidar com vários bugs. Às vezes, pode levar várias horas para resolver um bug.
ganhador
Vitória do design baseado em padrões CSS e web. Basta olhar o código de ambos os métodos para fazer uma escolha. CSS oferece muito mais benefícios (principalmente em termos de facilidade de uso). Na verdade, a razão fundamental é a minha preguiça. Se eu usar um projeto de mesa e o cliente entrar em contato comigo um ano depois e disser que ele precisa ser revisado, posso dizer a ele que alistei-me no exército e estou em um país estrangeiro. Se eu estivesse usando CSS, mudaria para o cliente sem pensar duas vezes, porque não teria que reinventar a roda.