As Três Camadas da Web

As Três Camadas da Web
1
Era uma vez... “Um rei!” meus pequenos leitores diriam imediatamente. Não,
crianças, vocês estão errados. Era uma vez um pedaço de madeira...
As Aventuras de Pinóquio
Você pode fazer muita coisa sem JavaScript. Usando HTML (Hypertext Markup
1
Language) , é possível produzir documentos complexos que descrevem de maneira complicada o conteúdo de uma página – e o significado desse conteúdo
– nos mínimos detalhes. Usando CSS (Cascading Style Sheets), você pode apresentar esse conteúdo de muitas maneiras, com variações tão sutis quanto uma
única cor ou tão notáveis quanto substituir texto por uma imagem.
Contudo, independentemente de quanto você melhore o aspecto, HTML e CSS
só podem chegar à beleza estática de um manequim de loja de departamentos –
ou, na melhor das hipóteses, a uma monstruosidade animada eletronicamente
que cambaleia quando algo se move nas proximidades. Com JavaScript, você
pode dar vida a esse boneco desajeitado, elevando-se, como seu criador, de um
humilde vendedor a mestre em Web design!
1
Neste livro, vamos nos referir a HTML e a XHTML apenas como HTML. O que você escolhe fica
por sua conta e não tem muito a ver com JavaScript. O código HTML que apresentaremos neste
livro será XHTML 1.0 Strict válido.
26 Só JavaScript
Mas o fato de sua nova criação ter o caminhar gracioso de uma modelo ou o
andar arrastado do monstro do Dr. Frankenstein depende tanto da qualidade de
suas origens HTML e CSS quanto do código JavaScript que deu vida a ela.
Portanto, antes de aprendermos a operar milagres, vamos examinar como construímos sites de boa aparência por dentro e por fora e ver como JavaScript se
encaixa nesse quadro.
Separe-os
Não faz muito tempo, Web designers profissionais empilhavam alegremente
código HTML, CSS e JavaScript em um único arquivo, davam a ele o nome de
2
index.html e chamavam isso de página Web. Ainda é possível fazer isso, mas
esteja preparado para ouvir xingamentos dos seus colegas.
Em algum momento, os Web designers perceberam que o código que escrevem ao
fazer uma página Web faz três coisas fundamentais:
2
Ou default.htm, de acordo com o padrão Microsoft.
As Três Camadas da Web
27
■ Descreve o conteúdo da página.
■ Especifica a apresentação desse conteúdo.
■ Controla o comportamento do conteúdo.
Eles também perceberam que manter esses três tipos de código separados, como
representado na Figura 1.1, facilitava o trabalho e ajudava a criar páginas Web
que funcionavam melhor sob condições adversas, como quando os usuários estão com JavaScript desativado em seus navegadores.
Os viciados em computador sabem disso há anos e até deram um nome para esse
princípio: a separação de preocupações.
Apresentação
Conteúdo
Comportamento
Figura 1.1 Separação de preocupações.
Mas perceber isso é uma coisa, fazer é outra – especialmente se você não é viciado em computador. Eu sou viciado em computador e fico tentado a fazer a coisa
errada o tempo todo.
Estou editando alegremente o código HTML que descreve o conteúdo de uma
página Web, quando subitamente começo a pensar em como aquele texto ficaria
bem se tivesse um sombreado cinza diferente, se fosse deslocado um pouco para
a esquerda e se tivesse no fundo aquela fotocópia hilária de meu rosto que fiz
na última festa do escritório da SitePoint. Distraído que sou, quero fazer essas
alterações imediatamente.
28 Só JavaScript
Agora, o que é mais fácil: abrir um arquivo CSS separado para modificar a folha
de estilos da página ou apenas digitar essas propriedades de estilo no código
HTML que já estou editando?
Assim como se comportar nas funções do trabalho, manter os tipos de código
que você escreve separados exige disciplina. Uma vez que você entenda as vantagens disso, poderá aplicar a força de vontade necessária para se manter no modo
correto e apropriado de fazer as coisas.
Três camadas
Manter diferentes tipos de código o mais separado possível é recomendável em
qualquer tipo de programação. Isso torna mais fácil reutilizar partes desse código
em projetos futuros, reduz a quantidade de código duplicado que você acaba escrevendo e facilitar encontrar e corrigir problemas meses e anos mais tarde.
No que diz respeito à Web, há mais um motivo para manter o código separado:
isso permite satisfazer as muitas maneiras diferentes pelas quais as pessoas acessam as páginas Web.
Dependendo do seu público, a maioria de seus visitantes pode utilizar navegadores desktop bem equipados, com suporte de ponta para CSS e JavaScript, mas
muitos podem estar sujeitos a políticas de TI corporativas que os obrigue a utilizar navegadores mais antigos ou a navegar com certos recursos (como JavaScript)
desativados.
Os usuários deficientes visuais frequentemente navegam usando software leitor
ou ampliador de tela e, para eles, seu projeto visual refinado pode mais atrapalhar do que ajudar.
Alguns usuários nem mesmo visitarão seu site, preferindo ler feeds de conteúdo
em RSS ou formatos semelhantes, se você os oferecer. Na hora de construir esses
feeds, você desejará enviar o conteúdo HTML para esses usuários sem qualquer
lixo JavaScript ou CSS.
O segredo para favorecer a maior gama possível de visitantes de seu site é pensar
na Web em termos de três camadas, que convenientemente correspondem aos
três tipos de código mencionados anteriormente. Essas camadas estão ilustradas
na Figura 1.2.
As Três Camadas da Web
29
nto)
e
m
a
t
por Script
Com ( Java
taçã) o
n
e
s
e
Apr (CSS
Riqueza da
experiência
do usuário
údMoL)
e
t
n
o
C (HT
Figura 1.2 As três camadas da Web.
Ao construir um site, trabalhamos nessas camadas de baixo para cima:
1. Começamos produzindo o conteúdo no formato HTML. Essa é a camada de
base, que qualquer visitante, usando qualquer tipo de navegador, deve ser
capaz de ver.
2. Feito isso, podemos nos concentrar em melhorar a aparência do site, adicionando uma camada de informações de apresentação utilizando CSS. Agora o
site terá boa aparência para os usuários exibirem estilos CSS.
3. Finalmente, podemos usar JavaScript para introduzir uma camada a mais de
interatividade e comportamento dinâmico, que tornará o site mais fácil de
usar em navegadores equipados com JavaScript.
Se mantivermos o código HTML, CSS e JavaScript separados, será mais fácil garantir que a camada de conteúdo permaneça legível em ambientes de navegação
onde as camadas de apresentação e/ou comportamento não conseguem operar.
Essa estratégia de “começar embaixo” para o Web design é conhecida como aperfeiçoamento progressivo.
Veremos cada uma dessas camadas isoladamente para saber como manter essa
separação de código da melhor maneira possível.
30 Só JavaScript
HTML para conteúdo
Tudo que é necessário para ler e entender o conteúdo de uma página Web pertence ao código HTML dessa página – nada mais, nada menos. Simples assim.
Os Web designers ficam em apuros quando se esquecem do princípio SE3 e
comprimem informações de conteúdo no código HTML ou, alternativamente,
movem parte do conteúdo da página para o código CSS ou JavaScript dessa
página.
Um exemplo comum de informação que não é conteúdo colocado em páginas é
HTML de apresentação – código HTML que descreve como o conteúdo deve parecer quando exibido no navegador. Isso pode incluir tags HTML antigas, como
<b>, <i>, <u>, <tt> e <font>:
<p>Faça o que for, <a href="666.html"><font color="red">mas não
clique neste link</font></a>!</p>
Isso pode assumir a forma de código CSS em linha aplicado com o atributo
style:
<p>Faça o que for, <a href="666.html" style="color: red;">mas não
clique neste link</a>!</p>
Isso também pode incluir a vergonha secreta de muitos Web designers bem-intencionados – estilos CSS aplicados com nomes de classe de apresentação:
<p>Faça o que for, <a href="666.html" class="red">mas não clique
neste link</a>!</p>
Nomes de classe de apresentação?
Se esse último exemplo lhe pareceu correto, você não está sozinho, mas é definitivamente mau agouro. Se você decidir posteriormente que deseja que o link seja amarelo, estará
condenado a atualizar o nome da classe e os estilos CSS aplicados a ele ou a conviver com
o constrangimento de ter uma classe chamada “red” (vermelho) que na verdade tem o
estilo amarelo (“yellow”). Isso vai tornar seu rosto amarelo – ou melhor, vermelho!
3
Simplifique, Estúpido.
As Três Camadas da Web
31
Em vez de incorporar informações de apresentação no código HTML, você deve
se concentrar no motivo da ação – por exemplo, você quer que um link seja exibido em uma cor diferente. O link é importante? Considere colocá-lo dentro de
uma tag que descreva a ênfase que você deseja dar a ele:
<p>Faça o que for, <em><a href="evil.html">mas não clique neste
link</a></em>!</p>
O link é um aviso? HTML não tem uma tag para descrever um aviso (warning),
mas você poderia escolher um nome de classe CSS que transmitisse essa informação:
<p>Faça o que for, <a href="evil.html" class="warning">mas não clique
neste link</a>!</p>
Evidentemente, você pode levar essa estratégia longe demais. Alguns designers
confundem tags com <h1> como se fosse de apresentação e tentam remover esse
código de apresentação do código HTML:
<p class="heading"> Um cabeçalho com crise de identidade</p>
Na verdade, a informação de apresentação que você deve manter fora do documento é a fonte, o tamanho e a cor com que um cabeçalho (heading) deve ser
exibido. O fato de um texto ser um cabeçalho faz parte do conteúdo e, como tal,
deve ser refletido no código HTML. Assim, o código a seguir está perfeitamente
correto:
<h1>Um cabeçalho em paz consigo mesmo</h1>
Em resumo, o código HTML deve fazer o máximo para transmitir o significado
(ou semântica) do conteúdo da página, enquanto evita descrever como ele deve
parecer. Os nerds de padrões Web chamam o código HTML que faz isso de marcação semântica.
A escrita de marcação semântica permite que seus arquivos HTML sejam significativos como documentos. As pessoas que por qualquer motivo não possam
ler esses documentos examinando-os em um navegador Web desktop normal,
poderão entendê-los melhor desse modo. Os usuários deficientes visuais, por
exemplo, poderão usar software auxiliar, como leitores de tela, para ouvir o que
está escrito na página. Assim, quanto mais claramente seu código HTML descrever o significado do conteúdo, mais fácil será entendê-lo.
32 Só JavaScript
O melhor de tudo, entretanto, é que a marcação semântica permite aplicar novos
estilos (apresentação) e recursos interativos (comportamento) sem que seja necessário fazer muitas (ou, em alguns casos, todas!) alterações no código HTML.
CSS para apresentação
Obviamente, se o conteúdo de uma página deve estar inteiramente contido dentro do código HTML, seu estilo – ou apresentação – deve ser totalmente descrito
no código CSS aplicado na página.
Com todo o trabalho que você teve para manter seu código HTML livre de código
de apresentação e rico em semântica, seria um vexame bagunçar esse arquivo,
enchendo-o de trechos de código CSS.
Como você deve saber, os estilos CSS podem ser aplicados em suas páginas de
três maneiras:
Estilos em linha
<a href="evil.html" style="color: red;">
Os estilos em linha são tentadores pelos motivos que explicamos anteriormente: você pode aplicá-los no conteúdo à medida que o cria, sem precisar
trocar de mecanismo e editar uma folha de estilos separada. Porém, como
vimos na seção anterior, você desejará evitar os estilos em linha se quiser
manter seu código HTML significativo para aqueles que não podem vê-los.
Estilos incorporados
<style type="text/css">
.warning {
color: red;
}
</style>
⯗
<a href="evil.html" class="warning">
Os estilos incorporados mantêm sua marcação limpa, mas vinculam seus estilos a um único documento. Na maioria dos casos, você desejará compartilhar
seus estilos por várias páginas de seu site; portanto, é melhor evitar essa estratégia também.
As Três Camadas da Web
33
Estilos externos
<link rel="stylesheet" href="styles.css" />
⯗
<a href="evil.html" class="warning">
styles.css
.warning {
color: red;
}
Os estilos externos são os melhores, pois permitem que você compartilhe estilos entre vários documentos, reduzem o volume de código que os navegadores precisam baixar e também permitem modificar a aparência de seu site sem
o trabalho de editar HTML.
Mas você sabia de tudo isso, certo? Afinal, este é um livro sobre JavaScript;
portanto, vamos falar sobre o código JavaScript que está em suas páginas.
JavaScript para comportamento
Assim como acontece com CSS, você pode adicionar JavaScript em suas páginas
Web de várias maneiras:
■ Você pode incorporar código JavaScript diretamente no conteúdo HTML:
<a href="evil.html" onclick="código JavaScript aqui">
■ Você pode incluir código JavaScript no inicio do documento HTML, em uma
tag <script>:
<script type="text/javascript"><!--//--><![CDATA[//><!-código JavaScript aqui
//--><!]]></script>
⯗
<a href="evil.html" class="warning">
34 Só JavaScript
CDATA?
Se você estiver se perguntando que geringonça é essa depois da tag <script> e que precede a tag </script>, isso é o que é necessário para incorporar legitimamente código
JavaScript em um documento XHTML sem confundir os navegadores Web que não entendem XHTML (como o Internet Explorer).
Se você escrever sua página com HTML em vez de XHTML, poderá se dar bem com esta
sintaxe muito mais simples:
<script type="text/javascript">
Código JavaScript aqui
</script>
■ Você pode colocar seu código JavaScript em um arquivo separado e, então,
vincular esse arquivo a quantos documentos HTML desejar:
<script type="text/javascript" src="script.js"></script>
⯗
<a href="evil.html" class="warning">
script.js (excerto)
código JavaScript aqui
Adivinhe que método você deve usar.
Escrever código JavaScript que melhora a utilização sem congestionar o documento (ou documentos) HTML em que é aplicado, sem deixar de fora os usuários
que estão com JavaScript desativado em seus navegadores e sem interferir em
outro código JavaScript que possa estar aplicado na mesma página, é chamado
de script não invasivo.
Infelizmente, embora muitos desenvolvedores Web profissionais tenham percebido as vantagens de manter o código CSS em arquivos separados, ainda existe
muito código JavaScript misturado em HTML por aí. Mostrando, neste livro, a
maneira correta de usar JavaScript, esperamos ajudar a mudar isso.
As Três Camadas da Web
35
A maneira certa
Então, qual é a verdadeira importância de tudo isso? Afinal, as pessoas têm construído sites com HTML, CSS e JavaScript misturadas há anos, e, para a maioria
das pessoas que navegam na Web, esses sites têm funcionado.
Quando você aprende JavaScript, mais do que nunca é importante saber fazer da
maneira correta, com certeza. De longe, JavaScript é a mais poderosa das três linguagens que você usará para projetar sites e, como tal, ela oferece uma liberdade
sem precedentes, de modo que é possível fazer uma bagunça completa.
Como exemplo, se você gostar muito, muito de JavaScript, poderá chegar a ponto
de colocar tudo – conteúdo, apresentação e comportamento – no código JavaScript. Já vimos isso e não é nada bonito – especialmente quando aparece um
navegador com JavaScript desativado.
Ainda mais importante é o fato de que JavaScript é a única dessas três linguagens que tem a capacidade de travar o navegador, tornando-o sem resposta para
4
o usuário.
Portanto, no restante deste livro, faremos o máximo para mostrar a você a maneira certa de usar JavaScript, não apenas porque isso mantém seu código organizado, mas porque ajuda a manter a Web funcionando da maneira que foi pensada
– tornando o conteúdo acessível para o máximo de pessoas possível, independentemente do navegador que utilizem.
Bibliotecas JavaScript
Conforme mencionamos, uma das vantagens de manter os diferentes tipos de
código separados é que isso torna mais fácil pegar código escrito para um site e
reutilizá-lo em outro. Certos maníacos por JavaScript (que serão chamados daqui
em diante de “pessoas”) montaram vastas bibliotecas de código JavaScript útil e
não invasivo que você pode baixar gratuitamente e usar em seus sites.
Ao longo deste livro, construiremos cada um dos exemplos a partir do zero –
todo o código JavaScript necessário pode ser encontrado aqui, nestas páginas.
Entretanto, como nem sempre há tempo de fazer isso no mundo real e como as
bibliotecas estão se tornando rapidamente uma parte importante no cenário Ja-
4
Vamos mostrar um exemplo disso no Capítulo 7.
36 Só JavaScript
vaScript, veremos também como as bibliotecas JavaScript populares são eficientes em determinados casos.
Eis as bibliotecas que usaremos neste livro:
Prototype
http://www.prototypejs.org/
script.aculo.us
http://script.aculo.us/
Yahoo! User Interface Library (YUI)
http://developer.yahoo.com/yui/
Dojo
http://dojotoolkit.org/
jQuery
http://jquery.com/
Mootools
http://mootools.net/
Nem todas as bibliotecas são criadas da mesma maneira
Cuidado com sites que oferecem trechos de código JavaScript para copiar e colar em suas
páginas Web a fim de obter um efeito específico. Existe muito código gratuito por aí, mas
nem tudo é bom.
Em geral, as boas bibliotecas vêm na forma de arquivos JavaScript (.js) que você pode
vincular em suas páginas de forma não invasiva, em vez de colar JavaScript diretamente
no código HTML.
Se você não tiver certeza que uma biblioteca JavaScript em particular é boa ou ruim,
peça ajuda nos fóruns da SitePoint5 ou fique apenas com as bibliotecas mencionadas neste livro – todas elas são muito boas.
Vamos começar!
Chega de conversa – você comprou este livro para aprender JavaScript, certo? (Se
não foi por isso, ficará um pouco desapontado.) HTML e CSS puras são legais,
mas é hora de mergulhar na terceira camada da Web: o comportamento.
Vire a página e se prepare para começar a usar código JavaScript interessante (e
não invasivo).
5
http://www.sitepoint.com/forums/