Use a Cabeça! (Head First) HTML com CSS & XHTML

Há um bom tempo atrás eu comprei o livro Use a Cabeça! (Head First) HTML com CSS & XHTML, e apesar de já ter começado a lê-lo várias vezes, somente no início desse ano eu tomei vergonha na cara e o li do início ao fim. Sendo assim, aqui está a minha opinião sobre o livro.

Assim como os demais títulos da série Use a Cabeça, esse livro tem uma abordagem bastante inteligente, focada num texto fácil e extremamente agradável de ler. Esta característica, combinada com algumas outras, faz com que o nosso cérebro preste mais atenção no conteúdo, além de aumentar as chances de memorização, conforme os livros da série explicam em seus capítulos introdutórios.

Outra tática inteligente do livro é dar exemplos para cada novo tópico apresentado, só que limitando o escopo, de forma que os exemplos sejam bem simples e diretos. Isso evita que o leitor fique cansado lendo longos exemplos onde apenas um pequeno trecho é realmente relevante.

Essa abordagem mais direta também é aplicada nos exercícios, que aparecem com razoável frequência, mas sempre bem focados no tópico que está sendo discutido no momento. Além disso, muitos dos exercícios são divertidos, e o obrigam a pensar fora da caixa, principalmente os exercícios de palavras cruzadas, presente em quase todos os capítulos.

Uma outra característica que torna o livro mais eficiente na tarefa de ensinar o conteúdo é o fato dele ser redundante sobre muitas coisas importantes. Dessa forma, alguns tópicos são apresentados mais de uma vez, só que em contextos e de formas diferentes, muitas vezes adicionando uma pequena novidade, e facilitando que o assunto em questão seja memorizado através da ocorrência repetida.

Ainda sobre a didática do livro, é interessante notar que a série segue essa fórmula não porque está dando certo, ou baseada em achismo, mas porque estudos relacionados a metacognição indicam que as técnicas de apresentação de conteúdo usadas no livro estão entre as mais eficientes.

Em relação ao conteúdo propriamente dito, é impossível não destacar positivamente a preocupação do livro em focar desde o início a separação da estrutura e da apresentação de uma página Web. Para ter uma idéia do quão engajados eles são em relação a este assunto, já no capítulo que explica sobre a metodologia da série, ou seja, antes mesmo do primeiro capítulo com conteúdo sobre HTML, XHTML e CSS, há uma breve e clara explicação sobre a função dessas tecnologias.

Adicionalmente, o livro menciona com frequência que devem ser utilizados os elementos do HTML/XHTML que melhor representarem o conteúdo que está sendo marcado, enfatizando assim a importância da semântica no desenvolvimento de uma página Web.

No entanto, nada é perfeito, e este livro não é diferente. Pra começar, a tradução é péssima. A Alta Books, que é a editora do livro, fez um trabalho extremamente descuidado na tradução, o que não me surpreendeu, já que o único outro livro traduzido que eu tenho deles, o Use a Cabeça! Java, também tem uma tradução sofrível.

Aliás, ao meu ver, este é o maior defeito do livro, pois realmente complica a compreensão do texto por parte de quem não sabe nada sobre HTML, XHTML e CSS, sendo que este é exatamente o público alvo do livro. Como exemplo deste péssimo trabalho de tradução, eu posso citar nomes de elementos sendo traduzidos, sendo o elemento head o campeão no número de ocorrências.

Outro erro bizarro está nos exemplos de regras do CSS. A extrema maioria delas não possuem um par de chaves tradicional, ou seja, { e }, e sim um bizonho par de chaves { e {. Exemplo:

p
{
  color: maroon;
{

O exemplo acima foi tirado do próprio livro, no capítulo que começa a explicar o CSS. Ou seja, quem nunca ouvir falar sobre a linguagem vai ficar bem confuso sobre a forma correta de combinar as chaves. E o mais curioso é que a versão original do livro não contém estes erros, portanto, a Alta Books fez besteira até onde nem precisava traduzir.

Contudo, nem todos os defeitos do livro são culpa da Alta Books, uma vez que há também alguns poucos deslizes na versão original em inglês. Por exemplo, o livro usa com certa frequência o elemento <br />, o que, ao me ver, é errado, uma vez que este elemento insera uma quebra de linha, o que caracteriza uma função relacionada a apresentação, não representando absolutamente nada em relação à semântica da página Web.

Outro erro relacionado ao uso incorreto de um elemento no que diz respeito a semântica está presente no exemplo abaixo:

  <h1>BEVERAGES</h1>

  <p>House Blend, $1.49</p>

  <p>Mocha Cafe Latte, $2.35</p>

  <p>Cappuccino, $1.89</p>

  <p>Chai Tea, $1.85</p>

Neste caso, novamente de acordo com a minha opinião, há vários elementos p sendo usados para representar itens de uma lista, portanto o correto seria envolver toda a lista com o elemento ul, que representa listas não ordenadas, e então usar o elemento para itens de lista, li, para cada bebida individual. O resultado seria esse:

  <h1>BEVERAGES</h1>

  <ol>
    <li>House Blend, $1.49</li>
    <li>Mocha Cafe Latte, $2.35</li>
    <li>Cappuccino, $1.89</li>
    <li>Chai Tea, $1.85</li>
  </ol>

Mas nesse caso podemos deixar passar, já que na verdade este exemplo está presente na página de recursos do livro.

Enfim, o Use a Cabeça! (Head First) HTML com CSS & XHTML é um excelente livro. Ainda que ele cometa alguns poucos deslizes, é de longe o melhor livro que eu conheço para quem quer aprender HTML, XHTML e CSS, uma vez que ensina desde o início a desenvolver páginas Web da maneira correta: usando o HTML ou XHTML para estruturar o conteúdo da página, respeitando a semântica de cada elemento, e definindo a apresentaçao através do CSS.

P.S.: Uma dica para quem se interresou pelo livro: compre a versão original e se livre de uma péssima tradução.

Posts Relacionados:

1. Organizando seu código CSS

Então eu desenvolvi 5 regrinhas que ajudaram meu CSS a ficar mais organizado, e mais fácil de mexer.

1- Usar um CSS Reset

CSS Reset é como tomar uma droga bem forte. Quem nunca usou acha que não é algo útil, ou até ruim. Mas depois que você experimenta não quer mais voltar atrás e ainda tenta convencer os outros a usarem também.

Apesar dos navegadores terem um ótimo suporte ao CSS, muitos deles tem padrões diferentes. Se você não definiu uma coisa, ela é exibida com o padrão do navegador, e isso pode fazer o seu site ficar com caras diferentes de acordo com o navegador do usuário.

O CSS Reset pega uma grande parte dos elementos visuais e padroniza eles, geralmente zerando ou definindo um novo padrão. Ele tira as bordas, as margens, os paddings, padroniza o tamanho da fonte, etc. A partir daí, você sabe que as coisas vão ficar mais certinhas em todos os navegadores e não vai ter nenhuma surpresa desagradável.

Recomendo Eric Meyer Reset, ou o fantástico YUI Reset.

2- Colocar em ordem alfabética

Sabe quando você tem aquele elemento no CSS que tem uns 12 parâmetros ou mais? Aí você precisa editar a margem, passa o olho rápido pela lista de parâmetros e não encontra. Cadê a margem que estava aqui? Tá ali bem na sua frente, mas tem que olhar umas 3 vezes pra achar. É um saco.

Eu passei então a organizar meus parâmetros do CSS em ordem alfabética, e fez uma grande diferença. Eu sempre sei que a border vai estar perto do começo, e que a margin vai estar ali perto do meio, perto do padding.

3- Separar os trechos de códigos em categorias

Quando o CSS fica realmente grande, o jeito mais fácil de organizar o código é usando comentários pra criar uma separação visual.

/* ------------------------------------------- */
/* ---------- MENU LATERAL ------------------- */
/* ------------------------------------------- */
elemento {
    color: #000;
    background: #FFF;
    outros códigos...
}
elemento a {...}
elemento img {...}

/* ------------------------------------------- */
/* ---------- RODAPÉ ------------------------- */
/* ------------------------------------------- */

div#footer {...}
div img {...}

Fica ainda mais organizado se as categorias estiverem numa ordem lógica, indo dos elementos mais genéricos pros mais específicos.

4- Colocar seu esquema de cores como comentário  no topo

Geralmente no site você tem umas poucas cores selecionadas pra usar. O que acontecia muito comigo era toda hora ter que parar pra procurar qual era mesmo o código daquele azul do título, ou o código do vermelho da borda do rodapé.

Uma solução simples passou a me poupar muito tempo.

Eu passei a colocar um comentário no topo do CSS, indicando os códigos das cores do meu site.

/* ---------- CORES ------------------------- */
/*
    Azul Claro: #A8EFEE;
    Marrom Escuro: #473B38;
    Rosa Clodovil: #FF4095;
    Amarelo Urina: #F2D843;
*/

5 – Não usar o parâmetro important!

O CSS tem o recurso important! que serve para definir uma regra como prioridade máxima, insubstituível. E isso atrapalha demais. Se você definiu, por exemplo, a cor da fonte como !important, não tem nada que você possa fazer no CSS pra definir outra cor de fonte. Na verdade, nem por javascript você conseguirá mudar a cor da fonte. O important! sempre tem prioridade máxima.

Acontece que no fim das contas isso sempre acaba atrapalhando no futuro. Mesmo que a versão inicial do layout saia legal, mais cedo ou mais tarde você vai precisar editar o seu site e aquele important! perdido lá vai te dar dor de cabeça.

Se você usou esse recurso no seu CSS, é porque algo não está certo. Dá pra organizar todo o seu site sem ter que usar isso, e é bom se planejar para isso desde o começo.

Usar !important no CSS é como casar com mulher promíscua. Você pode não ter tido nenhum problema até agora, mas é só questão de tempo.

Posts Relacionados:

1. Cada um no seu quadrado
2. Use a Cabeça! (Head First) HTML com CSS & XHTML