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.

Muitos empreendimentos começam com uma idéia, ou seja, a identificação de um problema e de sua solução. A partir daí, o empreendimento se desenvolve, sendo que a idéia, além de ser o primeiro passo, é também um dos principais fatores para o seu sucesso ou fracasso. Portanto, é natural concluirmos que a avaliação do valor de uma idéia é um processo fundamental, principalmente quando estamos diante de uma idéia ruim.

O problema é que as pessoas tendem a supervalorizar qualquer coisa que suas mentes venham a produzir. Assim, ao terem uma idéia, elas ficam tão satisfeitas consigo mesmas que a consideram instantaneamente boa, ou até mesmo revolucionária. Acontece que essa não é a verdade na extrema maioria dos casos.

Não quero ser fatalista, mas as estatísticas me permitem dizer que a maioria das idéias não são boas, muito menos revolucionárias. Portanto, é importante reconhecer quando sua idéia não é boa o bastante para merecer ver a luz do dia. Dessa forma, ao contrário do que possa parecer, você está lhe prestando um serviço, já que evitará perder tempo e energia em um empreendimento que já começa perdendo.

Contudo, não é exatamente fácil reconhecer quando suas idéias são ruins, devido principalmente à natural valorização que damos a nossas próprias idéias. Além disso, a definição de uma idéia ruim é um tópico complexo, e o que é uma idéia ruim para alguns, pode ser uma idéia excelente para outros. Tendo isso em vista, abaixo eu disponibilizo algumas perguntas que eu faço quando quero identificar aquilo que eu considero uma idéia ruim.

O que as Outras Pessoas Acham da sua Idéia?

Uma forma de anular o deslumbramento natural que temos em relação a nossas próprias idéias é pedir a opinião sobre elas a outras pessoas. Só tome cuidado de perguntar para as pessoas certas. Em geral, as melhores pessoas para conversar sobre o assunto são aquelas que você respeita intelectualmente e/ou que entendam do problema que sua idéia resolve.

Entretanto, é importante ter em mente que ninguém tem credenciais boas o suficiente para afirmar que sua idéia é ruim se você realmente acredita nela. Portanto, se você tem uma idéia que você tem certeza que é válida, não desista dela só porque existem incontáveis opiniões contrárias, e nenhuma a favor. Muitas idéias revolucionárias só foram adiante porque os seus autores foram visionários o suficiente para não darem importância ao fato de estarem sozinhos na crença de que ali tinha algo que valia a pena.

Você está Resolvendo um Problema ao qual Você se Importa?

Se a resposta a esta pergunta for “não”, nem perca o seu tempo, provavelmente você não terá sucesso em seu empreendimento. Fazer uma idéia florescer em um negócio rentável é realmente trabalhoso, e não há nenhuma garantia que você consiga isso, mesmo estando apaixonado pelo seu projeto. Portanto, tentar o mesmo sem estar engajado diminuirá consideravelmente suas chances, já que você provavelmente não terá o mesmo gás quando tiver que enfrentar os problemas que inevitavelmente surgirão.

Adicionalmente, você estará lutando contra as estatísticas novamente, uma vez que a maioria dos empreendimentos não dão certo. Logo, você terá uma chance enorme de fracassar, o que lhe trará um enorme sentimento de frustração caso ocorra, uma vez que investiu tempo e energia em algo que no fim não deu certo e que nem mesmo lhe interessava em nível pessoal.

Você sabe Implementar a Solução do seu Problema?

Não adianta conhecer bem o problema e ter uma possível solução para ele se você não sabe como efetivamente implementar a sua idéia. É o mesmo que resolver o problema da falta de tempo com uma máquina do tempo. É uma ótima solução, mas você não faz idéia de como torná-la real, portanto é o mesmo que nada.

Sendo assim, seja qual for a área pela qual a sua solução transite, garanta que você tenha conhecimento suficiente para construi-la. Se não for o caso, você deve aprender o que precisa para resolver o problema em questão, ou encontrar alguém que seja capaz de fazê-lo. Caso contrário, qualquer tentativa de levar sua idéia adiante será perda de tempo.

O Problema em Questão Merece Ser Resolvido?

Atualmente é quase um consenso que qualquer que seja o problema que você tenha, você não é único. Embora isso seja verdade, acaba passando a ilusão de que se você se incomodou com algo e imaginou uma forma de resolver isso, então vale a pena colocar em prática.

Acontece que isso só é verdade se você tem como único objetivo resolver o problema, ignorando qualquer possibilidade disso se tornar um empreendimento rentável. Afinal, nem todos os problemas incomodam um número suficiente de pessoas ao ponto de virar um negócio. Alguns problemas simplesmente são pequenos demais para se tornarem o ponto central de um empreendimento bem sucedido.

Conclusão

É claro que existem outras questões a serem consideradas ao avaliar a validade de uma idéia, mas acredito que os questionamentos acima já ajudam um pouco. Portanto, se a sua idéia passsar intacta por todos esses questionamentos, é possível que você tenha mesmo uma boa idéia.

No entanto, é sempre bom lembrar que só uma idéia não é nada. A melhor idéia do mundo pode ser arruínada por uma péssima execução. O mesmo vale para uma idéia muito ruim, que pode ser salva por uma implementação primorosa.

Logo, se tiver uma boa idéia, vá adiante e se dedique também a sua execução. Mas caso ela seja ruim, ou simplesmente não seja boa o bastante, e você não consiga pensar em nada melhor, vá em frente com ela mesmo. Qualquer idéia é melhor do que nenhuma, e você pode acabar sendo redimido por um trabalho operacional brilhante. Além disso, em última análise, é o seu público alvo que decidirá o valor da sua idéia.

A menos que você seja um recém chegado na Web, certamente já se deparou com algumas, senão todas, as expressões mencionadas no título desse post. Elas são comumentes usadas por caras super descolados, como forma de mostrar sua enorme sagacidade ao criticar de forma extremamente ácida a Microsoft e os seus produtos. Ou pelo menos é isso que eles acham que estão fazendo.

A verdade é que estes trocadilhos são tão manjados que hoje integram o status quo tanto quanto os produtos que eles tentam ridicularizar. Como consequência disso, muita gente começa a usar essas expressões só para parecer cool, até porque não existe forma mais fácil de parecer cool do que falar mal da Microsoft. O curioso é que muitos dos que se valem destas expressões geralmente o fazem sob alguma versão do Windows, e em alguns casos até mesmo sob o Internet Explorer.

É mais um exemplo do velho caso do comportamento herdado sem questionamento algum, apenas por que outros o fizeram antes. Dessa forma, repetindo esses geniais trocadilhos, muitos acreditam que estaram anexando à sua reputação a qualidade de alguém crítico, questionador, quando na verdade são meros repetidores de trocadilhos bem pouco inspirados.

Além disso, duas dessas expressões merecem destaque especial: Micro$oft e M$. Elas por si só nem mesmo são depreciativas, pois colocar um cifrão no nome ou na abreviação do nome de uma empresa, pelo menos pra mim, significa apenas que se trata de uma empresa lucrativa, ou que busca o lucro. E isso de maneira alguma é ruim. Pelo contrário, uma empresa tradicional, ou seja, aquelas que vendem produtos ou serviços, precisam lucrar para se manter no mercado, portanto associar a imagem da Microsoft ao lucro é o mesmo que dizer que ela é competente em fazer aquilo que toda empresa deve fazer: lucrar.

Por fim, eu só quero destacar que não estou defendendo a Microsoft e nem os seus produtos, assim como também não os estou criticando. A crítica aqui é direcionada apenas ao que eu considero ser a forma mais infantil de crítica, ainda mais quando repetida a exaustão por aqueles nem sabem o porquê da crítica. Portanto, se quiserem criticar algo ou alguém, armem-se de argumentos, não de velhos trocadilhos que só deixam transparecer que o bobo da história é você.

Se você é um desenvolvedor Web que faz o seu dever de casa, já deve estar cansado de saber que o HTML/XHTML serve para estruturar o conteúdo de uma página Web. Sendo assim, você usa elementos como p para parágrafos, h1, h2, h3, h4, h5 e h6 para títulos, ol para listas ordenadas, entre outros igualmente populares. No entanto, existem alguns outros elementos com tanto valor semântico quanto estes, mas que são bem menos conhecidos. Veja alguns destes abaixo:

address

O elemento address define um conteúdo como uma informação de contato do autor ou dono da página Web.

  Avenida Expedicionário José Amáro, número 500, Apartamento 13, Vila São Luís,
  Duque de Caxias/RJ.

del

Tem a função de marcar um texto que foi removido da página.

<p>
  O Jogo Final Fantasy XIII é a continuação da famosa saga de RPG da Square
  ,sendo o seu lançamento exclusivo para o Playstation 3.
</p>

ins

Especifica um texto que foi inserido no documento, sendo muitas vezes usado em conjunto com o elemento del, como forma de corrigir uma informação anterior.

  <p>
    A atual versão do Rails é a 2.22.3.2.
  </p>

abbr

O elemento abbr serve para marcar um texto que é a forma abreviada de uma frase ou de uma expressão composta, ou seja, ele marca abreviações. Adicionalmente, é bom utilizar o atributo title neste elemento para especificar a palavra ou frase inteira que está sendo abreviada. Além disso, é válido mencionar que este elemento não é suportado pelo Internet Explorer 6.

  <p>
    O <abbr title = "EXtensible HyperText Markup Language">XHTML</abbr> deve ser
    usado para estruturar o conteúdo.
  </p>

acronym

Este elemento tem a função semântica de identificar acrônimos, que são um tipo especial de abreviação, onde cada letra do acrônimo corresponde à primeira letra de uma das palavras da expressão ou frase abreviada.

<p>
  Para definir a apresentação de uma página Web você deve usar o
  <acronym title = "Cascading Style Sheets">CSS</acronym>.
</p>

cite

Define o autor ou a fonte de uma citação, podendo, e devendo, ser usado em conjunto comos elemento q e blockquote, que identificam a citação em si.

<p>
  Conforme Martin Fowler disse:
</p>

<blockquote>
  <p>
    Any fool can write code that a computer can understand.
    Good programmers write code that humans can understand.
  </p>
</blockquote>

dl, dt e dd

Estes elementos são usados para criar listas de definição em uma página Web, sendo muito usados, por exemplo, para a criação de FAQs. O elemento dl representa a lista em si, enquanto os elementos dt e dd representam o termo a ser definido e a sua definição, respectivamente.

<dl>
  <dt>Ruby</dt>
  <dd>Linguagem de script orientada a objetos e criada por Yukihiro Matsumoto.</dd>

  <dt>Ruby on Rails</dt>
  <dd>Framework Web desenvolvido com a linguagem de programação Ruby</dd>

  <dt>ActiveRecord</dt>
  <dd>Um dos principais sub-frameworks do Ruby on Rails</dd>
</dl>

dfn

O elemento dfn é utilizado para marcar um termo que está sendo definido, sendo que pode-se usar o atributo title para resumir a sua definição. A diferença entre o dfn e uma lista de definição, é que o primeiro é utilizado para marcar uma definição isolada no texto, enquanto o segundo agrupa várias definições em uma lista.

<p>
  O <dfn title = "Framework Ruby">Merb</df> é um framework Web escrito em Ruby.
</p>

Conclusão

Existem muitos elementos no XHTML/HTML além daqueles que são amplamente conhecidos, e uma vez que estes elementos adicionais são mais precisos quanto à semântica do seu conteúdo, não há porquê não usá-los. Dessa forma, suas páginas Web ficarão mais corretas semanticamente, o que significa uma maior acessibilidade.

Além disso, não se limite aos elementos extras mostrados aqui, uma vez que a idéia deste post era apenas mostrar através de exemplos que quase sempre há um elemento mais preciso para marcar o seu conteúdo. Portanto, quando tiver dúvidas se está usando o elemento correto em sua página Web, pesquise pare descobrir se não há uma opção mais adequada.

Por fim, embora alguns destes elementos possuam um estilo padrão definido pelo browser, a regra de ouro continua valendo, ou seja, para definir a apresentação deles você deve usar o CSS.