As 3 camadas da Web

1Era uma vez... Um rei! meus pequenos leitores diriam imediatamente. No, crianas, vocs esto errados. Era uma vez um pedao de madeira...

As Aventuras de Pinquio

Voc pode fazer muita coisa sem JavaScript. Usando HTML (Hypertext Markup Language)1, possvel produzir documentos complexos que descrevem de ma-neira complicada o contedo de uma pgina e o significado desse contedo nos mnimos detalhes. Usando CSS (Cascading Style Sheets), voc pode apre-sentar esse contedo de muitas maneiras, com variaes to sutis quanto uma nica cor ou to notveis quanto substituir texto por uma imagem.

Contudo, independentemente de quanto voc melhore o aspecto, HTML e CSS s podem chegar beleza esttica de um manequim de loja de departamentos ou, na melhor das hipteses, 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 ca por sua conta e no tem muito a ver com JavaScript. O cdigo HTML que apresentaremos neste livro ser XHTML 1.0 Strict vlido.

As Trs Camadas da Web

26 S JavaScript

Mas o fato de sua nova criao 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 cdigo JavaScript que deu vida a ela.

Portanto, antes de aprendermos a operar milagres, vamos examinar como cons-trumos sites de boa aparncia por dentro e por fora e ver como JavaScript se encaixa nesse quadro.

Separe-os

No faz muito tempo, Web designers profissionais empilhavam alegremente cdigo HTML, CSS e JavaScript em um nico arquivo, davam a ele o nome de index.html2 e chamavam isso de pgina Web. Ainda possvel fazer isso, mas esteja preparado para ouvir xingamentos dos seus colegas.

Em algum momento, os Web designers perceberam que o cdigo que escrevem ao fazer uma pgina Web faz trs coisas fundamentais:

2 Ou default.htm, de acordo com o padro Microsoft.

As Trs Camadas da Web 27

Descreve o contedo da pgina.

Especifica a apresentao desse contedo.

Controla o comportamento do contedo.

Eles tambm perceberam que manter esses trs tipos de cdigo separados, como representado na Figura 1.1, facilitava o trabalho e ajudava a criar pginas Web que funcionavam melhor sob condies adversas, como quando os usurios es-to com JavaScript desativado em seus navegadores.

Os viciados em computador sabem disso h anos e at deram um nome para esse princpio: a separao de preocupaes.

Compor-tamentoContedo

Apresen-tao

Figura 1.1 Separao de preocupaes.

Mas perceber isso uma coisa, fazer outra especialmente se voc no vicia-do em computador. Eu sou viciado em computador e fico tentado a fazer a coisa errada o tempo todo.

Estou editando alegremente o cdigo HTML que descreve o contedo de uma pgina Web, quando subitamente comeo 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 fotocpia hilria de meu rosto que fiz na ltima festa do escritrio da SitePoint. Distrado que sou, quero fazer essas alteraes imediatamente.

28 S JavaScript

Agora, o que mais fcil: abrir um arquivo CSS separado para modificar a folha de estilos da pgina ou apenas digitar essas propriedades de estilo no cdigo HTML que j estou editando?

Assim como se comportar nas funes do trabalho, manter os tipos de cdigo que voc escreve separados exige disciplina. Uma vez que voc entenda as vanta-gens disso, poder aplicar a fora de vontade necessria para se manter no modo correto e apropriado de fazer as coisas.

Trs camadas

Manter diferentes tipos de cdigo o mais separado possvel recomendvel em qualquer tipo de programao. Isso torna mais fcil reutilizar partes desse cdigo em projetos futuros, reduz a quantidade de cdigo duplicado que voc acaba es-crevendo e facilitar encontrar e corrigir problemas meses e anos mais tarde.

No que diz respeito Web, h mais um motivo para manter o cdigo separado: isso permite satisfazer as muitas maneiras diferentes pelas quais as pessoas aces-sam as pginas Web.

Dependendo do seu pblico, a maioria de seus visitantes pode utilizar navega-dores desktop bem equipados, com suporte de ponta para CSS e JavaScript, mas muitos podem estar sujeitos a polticas de TI corporativas que os obrigue a utili-zar navegadores mais antigos ou a navegar com certos recursos (como JavaScript) desativados.

Os usurios deficientes visuais frequentemente navegam usando software leitor ou ampliador de tela e, para eles, seu projeto visual refinado pode mais atrapa-lhar do que ajudar.

Alguns usurios nem mesmo visitaro seu site, preferindo ler feeds de contedo em RSS ou formatos semelhantes, se voc os oferecer. Na hora de construir esses feeds, voc desejar enviar o contedo HTML para esses usurios sem qualquer lixo JavaScript ou CSS.

O segredo para favorecer a maior gama possvel de visitantes de seu site pensar na Web em termos de trs camadas, que convenientemente correspondem aos trs tipos de cdigo mencionados anteriormente. Essas camadas esto ilustradas na Figura 1.2.


Contedo

(HTML)

Apresentao

(CSS)

Comportam

ento

(JavaScript)

Riqueza daexperinciado usurio

Figura 1.2 As trs camadas da Web.

Ao construir um site, trabalhamos nessas camadas de baixo para cima:

1. Comeamos produzindo o contedo 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 aparncia do site, adicio-nando uma camada de informaes de apresentao utilizando CSS. Agora o site ter boa aparncia para os usurios exibirem estilos CSS.

3. Finalmente, podemos usar JavaScript para introduzir uma camada a mais de interatividade e comportamento dinmico, que tornar o site mais fcil de usar em navegadores equipados com JavaScript.

Se mantivermos o cdigo HTML, CSS e JavaScript separados, ser mais fcil ga-rantir que a camada de contedo permanea legvel em ambientes de navegao onde as camadas de apresentao e/ou comportamento no conseguem operar. Essa estratgia de comear embaixo para o Web design conhecida como aper-feioamento progressivo.

Veremos cada uma dessas camadas isoladamente para saber como manter essa separao de cdigo da melhor maneira possvel.

30 S JavaScript

HTML para contedoTudo que necessrio para ler e entender o contedo de uma pgina Web per-tence ao cdigo HTML dessa pgina nada mais, nada menos. Simples assim. Os Web designers ficam em apuros quando se esquecem do princpio SE3 e comprimem informaes de contedo no cdigo HTML ou, alternativamente, movem parte do contedo da pgina para o cdigo CSS ou JavaScript dessa pgina.

Um exemplo comum de informao que no contedo colocado em pginas HTML de apresentao cdigo HTML que descreve como o contedo deve pa-recer quando exibido no navegador. Isso pode incluir tags HTML antigas, como , , , e :

Faa o que for, mas no clique neste link!

Isso pode assumir a forma de cdigo CSS em linha aplicado com o atributo style:


Isso tambm pode incluir a vergonha secreta de muitos Web designers bem-in-tencionados estilos CSS aplicados com nomes de classe de apresentao:


Nomes de classe de apresentao?

Se esse ltimo exemplo lhe pareceu correto, voc no est sozinho, mas definitivamen-te 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 Simpli que, Estpido.


Em vez de incorporar informaes de apresentao no cdigo HTML, voc deve se concentrar no motivo da ao por exemplo, voc quer que um link seja exi-bido em uma cor diferente. O link importante? Considere coloc-lo dentro de uma tag que descreva a nfase que voc deseja dar a ele:


O link um aviso? HTML no tem uma tag para descrever um aviso (warning), mas voc poderia escolher um nome de classe CSS que transmitisse essa infor-mao:


Evidentemente, voc pode levar essa estratgia longe demais. Alguns designers confundem tags com como se fosse de apresentao e tentam remover esse cdigo de apresentao do cdigo HTML:

Um cabealho com crise de identidade

Na verdade, a informao de apresentao que voc deve manter fora do docu-mento a fonte, o tamanho e a cor com que um cabealho (heading) deve ser exibido. O fato de um texto ser um cabealho faz parte do contedo e, como tal, deve ser refletido no cdigo HTML. Assim, o cdigo a seguir est perfeitamente correto:

Um cabealho em paz consigo mesmo

Em resumo, o cdigo HTML deve fazer o mximo para transmitir o significado (ou semntica) do contedo da pgina, enquanto evita descrever como ele deve parecer. Os nerds de padres Web chamam o cdigo HTML que faz isso de mar-cao semntica.

A escrita de marcao semntica permite que seus arquivos HTML sejam signi-ficativos como documentos. As pessoas que por qualquer motivo no possam ler esses documentos examinando-os em um navegador Web desktop normal, podero entend-los melhor desse modo. Os usurios deficientes visuais, por exemplo, podero usar software auxiliar, como leitores de tela, para ouvir o que est escrito na pgina. Assim, quanto mais claramente seu cdigo HTML descre-ver o significado do contedo, mais fcil ser entend-lo.

32 S JavaScript

O melhor de tudo, entretanto, que a marcao semntica permite aplicar novos estilos (apresentao) e recursos interativos (comportamento) sem que seja ne-cessrio fazer muitas (ou, em alguns casos, todas!) alteraes no cdigo HTML.

CSS para apresentaoObviamente, se o contedo de uma pgina deve estar inteiramente contido den-tro do cdigo HTML, seu estilo ou apresentao deve ser totalmente descrito no cdigo CSS aplicado na pgina.

Com todo o trabalho que voc teve para manter seu cdigo HTML livre de cdigo de apresentao e rico em semntica, seria um vexame bagunar esse arquivo, enchendo-o de trechos de cdigo CSS.

Como voc deve saber, os estilos CSS podem ser aplicados em suas pginas de trs maneiras:

Estilos em linha

Os estilos em linha so tentadores pelos motivos que explicamos anterior-mente: voc pode aplic-los no contedo medida que o cria, sem precisar trocar de mecanismo e editar uma folha de estilos separada. Porm, como vimos na seo anterior, voc desejar evitar os estilos em linha se quiser manter seu cdigo HTML significativo para aqueles que no podem v-los.

Estilos incorporados

.warning { color: red; }

Os estilos incorporados mantm sua marcao limpa, mas vinculam seus esti-los a um nico documento. Na maioria dos casos, voc desejar compartilhar seus estilos por vrias pginas de seu site; portanto, melhor evitar essa es-tratgia tambm.


Estilos externos

styles.css

.warning { color: red;}

Os estilos externos so os melhores, pois permitem que voc compartilhe es-tilos entre vrios documentos, reduzem o volume de cdigo que os navegado-res precisam baixar e tambm permitem modificar a aparncia 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 cdigo JavaScript que est em suas pginas.

JavaScript para comportamentoAssim como acontece com CSS, voc pode adicionar JavaScript em suas pginas Web de vrias maneiras:

Voc pode incorporar cdigo JavaScript diretamente no contedo HTML:

Voc pode incluir cdigo JavaScript no inicio do documento HTML, em uma tag :

34 S JavaScript

CDATA?

Se voc estiver se perguntando que geringona essa depois da tag e que pre-cede a tag , isso o que necessrio para incorporar legitimamente cdigo JavaScript em um documento XHTML sem confundir os navegadores Web que no enten-dem XHTML (como o Internet Explorer).

Se voc escrever sua pgina com HTML em vez de XHTML, poder se dar bem com esta sintaxe muito mais simples:

Cdigo JavaScript aqui

Voc pode colocar seu cdigo JavaScript em um arquivo separado e, ento, vincular esse arquivo a quantos documentos HTML desejar:

script.js (excerto)

cdigo JavaScript aqui

Adivinhe que mtodo voc deve usar.

Escrever cdigo JavaScript que melhora a utilizao sem congestionar o docu-mento (ou documentos) HTML em que aplicado, sem deixar de fora os usurios que esto com JavaScript desativado em seus navegadores e sem interferir em outro cdigo JavaScript que possa estar aplicado na mesma pgina, chamado de script no invasivo.

Infelizmente, embora muitos desenvolvedores Web profissionais tenham perce-bido as vantagens de manter o cdigo CSS em arquivos separados, ainda existe muito cdigo JavaScript misturado em HTML por a. Mostrando, neste livro, a maneira correta de usar JavaScript, esperamos ajudar a mudar isso.


A maneira certa

Ento, qual a verdadeira importncia de tudo isso? Afinal, as pessoas tm cons-trudo sites com HTML, CSS e JavaScript misturadas h anos, e, para a maioria das pessoas que navegam na Web, esses sites tm funcionado.

Quando voc aprende JavaScript, mais do que nunca importante saber fazer da maneira correta, com certeza. De longe, JavaScript a mais poderosa das trs lin-guagens que voc usar para projetar sites e, como tal, ela oferece uma liberdade sem precedentes, de modo que possvel fazer uma baguna completa.

Como exemplo, se voc gostar muito, muito de JavaScript, poder chegar a ponto de colocar tudo contedo, apresentao e comportamento no cdigo JavaS-cript. J vimos isso e no nada bonito especialmente quando aparece um navegador com JavaScript desativado.

Ainda mais importante o fato de que JavaScript a nica dessas trs lingua-gens que tem a capacidade de travar o navegador, tornando-o sem resposta para o usurio.4

Portanto, no restante deste livro, faremos o mximo para mostrar a voc a manei-ra certa de usar JavaScript, no apenas porque isso mantm seu cdigo organiza-do, mas porque ajuda a manter a Web funcionando da maneira que foi pensada tornando o contedo acessvel para o mximo de pessoas possvel, indepen-dentemente do navegador que utilizem.

Bibliotecas JavaScript

Conforme mencionamos, uma das vantagens de manter os diferentes tipos de cdigo separados que isso torna mais fcil pegar cdigo escrito para um site e reutiliz-lo em outro. Certos manacos por JavaScript (que sero chamados daqui em diante de pessoas) montaram vastas bibliotecas de cdigo JavaScript til e no 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 cdigo JavaScript necessrio pode ser encontrado aqui, nestas pginas. Entretanto, como nem sempre h tempo de fazer isso no mundo real e como as bibliotecas esto se tornando rapidamente uma parte importante no cenrio Ja-

4 Vamos mostrar um exemplo disso no Captulo 7.

36 S JavaScript

vaScript, veremos tambm como as bibliotecas JavaScript populares so eficien-tes 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 so criadas da mesma maneira

Cuidado com sites que oferecem trechos de cdigo JavaScript para copiar e colar em suas pginas Web a fim de obter um efeito especfico. Existe muito cdigo gratuito por a, mas nem tudo bom.

Em geral, as boas bibliotecas vm na forma de arquivos JavaScript (.js) que voc pode vincular em suas pginas de forma no invasiva, em vez de colar JavaScript diretamente no cdigo HTML.

Se voc no tiver certeza que uma biblioteca JavaScript em particular boa ou ruim, pea ajuda nos fruns da SitePoint5 ou fique apenas com as bibliotecas mencionadas nes-te livro todas elas so muito boas.

Vamos comear!

Chega de conversa voc comprou este livro para aprender JavaScript, certo? (Se no foi por isso, ficar um pouco desapontado.) HTML e CSS puras so legais, mas hora de mergulhar na terceira camada da Web: o comportamento.

Vire a pgina e se prepare para comear a usar cdigo JavaScript interessante (e no invasivo).

5 http://www.sitepoint.com/forums/

As 3 camadas da Web

Documents

Transcript of As 3 camadas da Web