Em primeiro lugar, não tenha pressa para começar! Faça duas preparações mentais antes de fazer qualquer coisa. Esta é a coisa mais importante para o seu processo de aprendizagem:
O aprendizado leva tempo e deve ser feito passo a passo;
Haverá contratempos ao longo do caminho.
Mas você não está sozinho, muitos de nós estamos investindo no aprendizado e no uso de padrões da web. Há uma comunidade em constante expansão para ajudá-lo a aprender com mais facilidade, veteranos que tiveram muitas dificuldades para aprender técnicas e técnicas e retardatários sortudos (inclusive eu) que se beneficiarão com seu suor e lágrimas.
Quando você finalmente se tornar proficiente no uso de métodos de design baseados em padrões da web (fazendo com que os métodos tradicionais baseados em tabelas pareçam eclipsados), olhando para trás, você ficará surpreso ao ver que o layout de páginas com CSS não é tão difícil. Ah, é claro, se os navegadores convencionais tivessem melhor suporte para algumas operações na especificação CSS2, talvez fosse mais fácil de usar.
Bem, parece que estou um pouco fora do assunto.
Então, vamos começar imediatamente com as informações realmente úteis. Primeiro de tudo, compre uma cópia de "Designing With Web Standards" (Nota 1), não pense muito, apenas faça isso imediatamente. Já tem um? Bem, leia agora e não deixe acumular poeira. Cada ponto que quero abordar é explicado em detalhes no livro. O livro é dividido em duas partes iguais, um manifesto (por que você deve fazer o que faz) e um tutorial (como fazer). Isso pode ser útil para você.
Agora, a primeira coisa é estabelecer um conceito de sistema ideológico de XHTML, quer você escolha HTML4.01 ou Uma tarefa entorpecente), todos os documentos começam com a seleção de um DOCTYPE. Informar ao navegador qual linguagem de marcação seu documento usa evitará erros de desempenho desnecessários que, de outra forma, deixariam você louco com resultados ruins de exibição de página. Por exemplo: se eu quiser voar para Chicago, devo informar à agência de viagens para onde quero ir, caso contrário posso voar para Viena sem rumo. Para exibir HTML ou XHTML, você deve primeiro informar ao navegador que configurar o DOCTYPE garante que eu alcance o "destino".
Próximo objetivo: logotipos rigorosamente formatados. Isso é muito fácil de dominar. Citar todos os atributos (ex.: <a href="link">); aninhar tags corretamente; fechar todas as tags abertas (ex.: <input type="text" />). Cada logotipo ou elemento precisa ser fechado.
Nota rápida: não sei quando as tags se tornaram elementos. Elas têm o mesmo significado, mas maneiras diferentes de dizê-lo. Como quer que você os chame, o nome correto parece ser “elementos” agora, talvez fosse assim no começo, não sei e ninguém me contou.
Independentemente disso, cada elemento deve ser fechado corretamente. Se você usar HTML4.01, poderá ignorar elementos individuais como <br>, <hr> e <input>. Se usar XHTML, os elementos individuais também deverão ser fechados, adicionando uma barra no final, por exemplo: <br. > se transforma em<br />.
A seguir, existe uma regra um tanto confusa sobre atributos XHTML: todos os atributos devem ter um valor e, se não houver valor, o próprio valor é usado. Por exemplo <input type="radio"checked="checked" />. Em HTML4.01 o valor verificado não é obrigatório, mas em XHTML é obrigatório.
Finalmente, o XHTML exige que você escreva todo o código em letras minúsculas. O HTML não diferencia maiúsculas de minúsculas, mas o XHTML sim, e segue as regras da sintaxe XML.
Isso é tudo sobre as mudanças do logotipo! Você já sabe tudo! Respire fundo, tome uma cerveja e relaxe. Porque esse é apenas o primeiro passo.
Seção 2
Agora, começamos a aprender a escrever HTML/XHTMLL corretos e validá-los no validador (validador) da organização W3. Se você escreveu corretamente, verá uma mensagem de sucesso com texto amarelo sobre fundo azul. Experimente gostar desta combinação de cor/fonte, ela será sua melhor amiga.
Por que a verificação é tão importante? Isso importa? Porque logotipos mal escritos (aleatórios, imprecisos) trarão total imprevisibilidade. A "vida ou morte" de uma página depende completamente do método de tratamento de erros do navegador. Embora a maioria dos navegadores também possa suportar bem o logotipo mal escrito, esse é um hábito incorreto. Olá, o que nos acostuma com os padrões fora dos padrões? A primeira razão é a guerra dos navegadores. Em 1995, a Microsoft conseguiu competir e ganhar participação de mercado com o Netscape porque o IE lidava com erros de páginas da web exatamente da mesma forma que o Netscape.
Outra perspectiva: a validação ajuda a encontrar códigos errados e garante que suas páginas se comportem de maneira mais consistente. Verificar o código é a primeira coisa que faço ao depurar um layout, e acredito que você também.
OK, quando você verificar seu primeiro site pela primeira vez, provavelmente terá que suportar setenta ou oitenta mensagens de erro incríveis enviadas de volta. Infelizmente, embora a soma de verificação seja útil, ela não é perfeita e é mantida apenas por alguns voluntários. A boa notícia é que esses erros estão relacionados. Se você descobrir que uma tag </p> está faltando e corrigi-la, é provável que os próximos 24 erros tenham desaparecido. Resumindo, pode parecer que o resultado da verificação é ruim, mas muitas vezes não é.
Agora você passou na validação e seu código está compatível. Neste ponto, você segue uma diretriz rígida, mas não entende totalmente por que faz isso.
Seção 3 A próxima etapa é refatorar a documentação que você criou usando uma marcação bem formada, eliminando os atributos da camada de apresentação que estão cada vez mais listados como "obsoletos" em DOCTYPEs recentes e colocando-os em um arquivo separado. Esta é a polêmica “separação entre desempenho e estrutura”, razão pela qual o CSS é tão importante.
Aqui está uma analogia: seu texto é conteúdo. O conteúdo está completo, mas não há nenhum indício da estrutura do conteúdo (como espaços, seções, títulos, listas, etc.). O que você obtém é apenas um texto confuso, que não é nada fácil de usar. A camada estrutural é adicional. Elementos individuais são adicionados ao documento para transmitir informações estruturais adicionais para quebrar o texto confuso e torná-lo mais lógico e organizado. Mas esses elementos não controlam a aparência padrão do texto. Por exemplo, muitas vezes você descobre que o título da primeira página é maior que a fonte do texto. Isso não é uma função da estrutura.
É hora da "camada de apresentação" aparecer. A representação é uma dica de formatação, que indica que o título da primeira página fique vermelho, em itálico e que o tamanho da fonte seja 150% da fonte do corpo. A camada de apresentação é uma camada adicional acima da camada de estrutura do documento. CSS pertence à camada de apresentação e pode transformar documentos em formatos incríveis por meio de tags simples no documento - visite CSS Zen Garden para ver exemplos.
Então, qual é a melhor maneira de separar desempenho de estrutura? Vamos pegar um trecho de código tradicional para ilustrar, que contém elementos HTML ou atributos usados para fornecer apresentação. É hora de cortar as tags bgcolors e <center>. Vamos fazer um teste casual:
No código de demonstração a seguir, quais atributos e tags de apresentação devem ser eliminados?
<center><h1><font face="Verdana">Este é meu primeiro site.</font></h1></center> <table border="0" cellpadding="0" cellpacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>Eles estão vindo me levar embora...</p></td>
Você está pronto com sua resposta? OK, o resultado correto está listado abaixo, que é um código estruturado limpo e sem vestígios de desempenho:
<h1>Este é meu primeiro site.</h1> <table> <body> <td><p>Eles estão vindo me levar embora...</p></td>
isso é tudo? É isso.
Embora este código não esteja explicitamente em conformidade com nenhuma especificação, o maior significado desta separação é que os elementos corretos sejam usados. O uso do layout da tabela é uma questão secundária. No exemplo acima, o método de uso das tabelas está incorreto. De uma perspectiva prudente e de longo prazo, os elementos <table> e <td> devem ser removidos. Embora seu uso esteja obsoleto, as tabelas ainda são muito úteis e podem ser usadas quando apropriado - em dados organizados tabularmente.
Bem, eliminamos a formatação de nossas páginas, viva! O que mais você faz agora? Isso deixa apenas alguns elementos, textos e linhas feios na fonte Times-New-Roman. Não é nada engraçado, onde estão as páginas lindas e brilhantes que nos foram prometidas?
Olhando para o exemplo do Zen Garden, você vê o design bonito? Quão diferentes eles parecem? A questão é: por baixo desse lindo design está o mesmo XHTML que é tão enfadonho quanto o documento não formatado que você acabou de criar. Não é verdade?
Na verdade, chato e feio tem uma boa base. Você deve ter notado que esse HTML não formatado parece tão ruim quanto a web de 1994. Com algumas exceções, esses elementos são tão antigos quanto a própria web, <h2> existe desde os tempos do navegador Mosaic.
Os benefícios certamente não param por aí, com facilidade de uso (para necessidades especiais), SEO integrado, custos reduzidos de largura de banda e assim por diante. Jeffrey Veen já havia escrito “O valor comercial dos padrões da Web” no ano passado, e Roger Johansson também explicou as técnicas e benefícios do design baseado em padrões em seu recente “Desenvolvendo com padrões da Web”.
CSS é bem suportado por todos os principais navegadores atuais e há inúmeros recursos para ajudar a aprender a sintaxe CSS, layout baseado em CSS e técnicas avançadas. Eu recomendo alguns bons: westCiv oferece um curso CSS gratuito e contínuo que o ajudará a começar e dominar rapidamente. Andrew Fernandez construiu uma lista enorme de recursos CSS que serão úteis, quer você seja novo em CSS ou não. Eric Meyer escreveu um conjunto de livros que você pode guardar em sua mesa e consultar a qualquer momento. Esses livros incluem Eric Meyer sobre CSS baseado em casos e More Eric Meyer sobre CSS. O livro de referência CSS: "The Definitive Guide to CSS" publicado pela O'Reilly Publishing House foi lançado para a segunda edição e é melhor mantê-lo em sua mesa. Também estão disponíveis "The Designer's Edge" de Molly Holzschlag e "Designing CSS Web Pages" de Chris Schmitt.
Entrar nos detalhes da aplicação de CSS e da construção de layouts levaria muito tempo. Não direi muito mais. O conselho acima é o conselho que posso dar aos designers que estão começando a prestar atenção aos padrões da web. Leia e compartilhe suas idéias e vamos crescer como comunidade. Muitos de nós estamos promovendo ativamente os padrões da web. Temos uma rede global.
Notas 1. "Designing With Web Standards" é um livro escrito por Zeldman para promover os padrões da web. A versão chinesa foi lançada e lançada em maio de 2004. O livro é intitulado "Website Reconstruction - Designing with Web Standards".