FACULDADES INTEGRADAS DE RONDONÓPOLIS CONSTRUÇÃO DE LAYOUTS COM by ojp13483

VIEWS: 0 PAGES: 33

									        FACULDADES INTEGRADAS DE RONDONÓPOLIS
                  CIÊNCIA DA COMPUTAÇÃO




   CONSTRUÇÃO DE LAYOUTS COM LISTA DE ESTILOS (CSS –

CASCADING STYLE SHEET) PARA AMENIZAR O TRÁFEGO DE DADOS

                  NOS SERVIDORES WEB

            HELDER VASCONCELOS BARGÃO ROBALO




                     Rondonópolis – MT
                           2007
        FACULDADES INTEGRADAS DE RONDONÓPOLIS
                  CIÊNCIA DA COMPUTAÇÃO




   CONSTRUÇÃO DE LAYOUTS COM LISTA DE ESTILOS (CSS –

CASCADING STYLE SHEET) PARA AMENIZAR O TRÁFEGO DE DADOS

                  NOS SERVIDORES WEB




                           Monografia/Trabalho de Conclusão de Curso
                           apresentado às Faculdades Integradas de
                           Rondonópolis – MT, como requisito parcial para
                           obtenção do titulo de Bacharel em Ciência da
                           Computação, sob a orientação do professor
                           mestre Clóvis dos Santos Júnior.




                     Rondonópolis – MT
                           2007
                   AGRADECIMENTOS
Ao Sr. Carlos Robalo e a Sra. Meire
Vasconcelos por serem meus pais.
A Sra. Marisa Figueira Paiva pelos laços
familiares receptivos.
                                      RESUMO

Os avanços do desenvolvimento de interfaces web cada vez mais atrativas e pesadas
geram grande fluxo de informações na rede. Cabe a este trabalho descobrir um modo de
reduzir informações desnecessárias ou redundantes. O que este trabalho busca é verificar
a validez dos padrões web para amenizar o trafego de dados nos servidores web,
gerando redução de custo com hospedagem. Foi realizado um estudo exploratório de
uma técnica comercial e da técnica de lista de estilos a fim de comparar e constatar qual
método gera menor tráfego. Sendo assim uma referência para adoção dos padrões web
pelos desenvolvedores.

Palavras-chave: Padrões Web, Lista de estilos, servidores web, Tráfego de dados.
                                       ABSTRACT

The development advances of web interfaces, more and more attractivies and heavy it
made a very information flow into the web. It’s up this assignment to find a way of reduce
the unnecessary or repeated information. What this assignment search is to check the
validity of web standards to reduce the data traffic into web host, it madding reduces in the
host costs. It carry out an explorer study to compare which method give minimum traffic.
Being a reference to adoption of web standards to web developers.



Keywords: Web Standards, Cascading Style Sheet, Web host, Data Traffic.
                                                          SUMÁRIO



INTRODUÇÃO ................................................................................................................09
1. FUNDAMENTAÇÃO TEÓRICA ..................................................................................10
   1.1 Internet ..................................................................................................................10
   1.2 Web .......................................................................................................................11
   1.3 W3C – World Wide Web Consortium ...................................................................12
   1.4 Evolução no Ambiente Web .................................................................................13
   1.5 Servidor Web ........................................................................................................15
   1.6 Padrões Web ........................................................................................................16
   1.6.1 Vantagens dos Padrões Web ............................................................................18
   1.6.2 Desvantagens dos Padrões Web ......................................................................19
   1.7 HTML – Hypertext Markup Language ..................................................................19
   1.8 CSS – Cascading Style Sheet ..............................................................................22
   1.9 Ferramentas Utilizadas .........................................................................................24
   1.9.1 cPanel ................................................................................................................24
   1.9.2 Adobe Photoshop ..............................................................................................25
   1.9.3 Macromedia Fireworks ......................................................................................25
   1.9.4 Macromedia Dreamweaver ...............................................................................25
   1.9.5 NotePad ++ ........................................................................................................26
2. METODOLOGIA..........................................................................................................28
3. DESENVOLVIMENTO.................................................................................................30
   3.1 Utilização das ferramentas para o layout em tabelas ..........................................31
   3.2 Utilização das ferramentas para o layout com CSS .............................................33
   3.3 O processo para exploração ................................................................................34
   3.4 Resultados ............................................................................................................35
4. CONCLUSÃO..............................................................................................................38
5. BIBLIOGRAFIA............................................................................................................39
                                            LISTA DE ILUSTRAÇÕES

Figura 1 – Apresentação dos layouts.....................................................................................31
Figura 2 – Layout para ser transformar em tabela................................................................32
Figura 3 – Ferramenta Fatia......................................................................................................32
Figura 4 – Primeira fatia feita no cabeçalho...........................................................................32
Figura 5 – Fatias do conteúdo e rodapé .........................................................................33
Figura 6 – Resultado final do fatiamento................................................................................33
Figura 7 – Dados gerais sobre o acesso................................................................................36
Figura 8 – Horários de acesso e dados transferidos............................................................37
                                         INTRODUÇÃO
       O ambiente web é muito complexo e variado, tanto em estrutura quanto em
tecnologia envolvida. Existem vários órgãos que regulamentam não só a estrutura, mas
também as tecnologias que serão utilizadas na rede. Um órgão muito importante é o W3C
(World Wide Web Consortium) que regulamenta como as informações devem ser
disponibilizadas na internet via http.
       Um dos padrões propostos pelo W3C é a adoção de layouts elaborados com CSS,
separando a informação de sua formatação.
       Empiricamente,     sabe-se        que   a   grande   maioria   dos   profissionais   de
desenvolvimento de conteúdo para internet, utilizam a técnica de construção de layouts
com tabelas, que em sua maioria são gerados por programas construtores de layouts
automatizados. Estes layouts não se adequam aos padrões web por dificultarem o acesso
à informação por leitores de tela e também por não separarem o conteúdo da formatação.
Esta técnica consome pouco tempo para gerar os layouts, entretanto, a manutenção é
muito complicada.
       Os layouts de CSS (Cascading Style Sheet) são indispensáveis para o bom fluxo
da informação final, e incorporados a outros padrões propostos pelo W3C, tornam a
internet cada vez mais atrativa e útil aos usuários.
       Para as empresas e profissionais liberais que desejam ter presença na internet,
hospedando um web site em algum servidor web, deve-se estar atento ao tipo de técnica
envolvida na elaboração do web site, haja visto que através de uma avaliação
exploratória, fica muito claro qual técnica deve ser utilizada, produzindo baixo tráfego de
dados nos servidores de hospedagem.
       Esta preocupação se dá, devido os servidores web cobrarem pelo tráfego de dados
de cada website. Um site que tiver alto fluxo de dados extras e redundantes pode onerar,
e muito, o orçamento do departamento de tecnologia.
       Portanto, este trabalho está focado em por à prova os padrões web adotados pelo
W3C, centrado na utilização de layouts com CSS.
1 FUNDAMENTAÇÃO TEÓRICA
1.1    Internet
       A internet é uma rede global de computadores, com cerca de 100 milhões de
usuários mundiais, estimados em 1998, e está crescendo freneticamente; de acordo com
uma estimativa, mais de 300 mil novas páginas Web aparecem a cada sete dias e a
quantidade total das informações disponíveis nessa rede mundial dobra a cada ano. Mas
definir a Internet como uma rede global de rápido crescimento subestima sua importância.
Estamos testemunhando o nascimento da primeira mídia importante de massa desde a
televisão; mais de 50% dos habitantes dos Estados Unidos entre 16 e 34 anos de idade
são usuários da Internet. Além disso, ela não é simplesmente uma nova mídia de massa:
é a primeira que envolve computadores e utiliza dados digitalizados. Por essa razão, é
mais interativa que a TV, o rádio e o jornal, que limitam a interação do usuário à seleção
do conteúdo. Com a internet, as pessoas podem criar informações assim como consumi-
las. É a primeira mídia de massa verdadeiramente democrática.
       (...) Para entender a Internet, é importante iniciar com um entendimento sólido do
que deferencia a Internet de outras redes que percorrem grandes distâncias (...). E eis o
ponto mais importante: tecnicamente, a Internet é melhor definida como uma tecnologia
para ligar redes locais (LAN) em uma enorme rede de longa distância. (MEYER, 2000, p.
279)
       A Internet é um nome reduzido que significa internetwork system (sistema de
interconexão de rede de comunicação). Para expandir a analogia já iniciada, este sistema
de interconexão (a Internet) serve ao mesmo propósito que o nosso sistema interestadual
de rodovias – ela (a Internet) movimenta por todo o mundo um produto (informação) entre
redes individuais de comunicação. (WYATT, 1995, p.9)
       Asleson (2006, p.1) explica que a Internet passou por modificações enormes até
chegar ao estágio que a conhecemos atualmente, e desde então têm sido a principal
plataforma para vários tipos de aplicações.
                      [...] Usando os vastos recursos da Internet, você pode se comunicar com pessoas
                      em todo o mundo, trocando informação sobre qualquer assunto que desejar. Você
                      pode transferir arquivos de computadores remotos para o seu computador. Você
                      pode pesquisar qualquer um entre milhares de tópicos, comunicando-se a todo o
                      momento com outras pessoas que compartilhem de seus mesmos interesses. [...]
                      (WYATT, 1995, p.12)


       Como citado, é possível fazer muitas atividades na Internet, entretanto, o que irá
possibilitar a execução dessas tarefas são os tipos de serviços que estão disponíveis.
        Os tipos básicos de serviços disponíveis na Internet são:
           •   World Wide Web
           •   E-mail
           •   FTP
           •   Telnet
           •   IRC
        Ainda existem outros tipos, que atualmente não são tão populares. E neste
trabalho, o serviço básico a ser utilizado é o WWW (World Wide Web).

1.2     Web
   Wall (1997, p.11) A web é um sistema hipertexto, ou seja, não é organizado em forma
linear como um livro tradicional ou outro tipo comum de apresentação.
   A Web não tem ‘princípio’ nem ‘fim’. Trata-se de uma nuvem de informações através
da qual você pode encontrar seu caminho da forma que melhor desejar.
   (...) Na web, passagens que conduzem a outras páginas da Web são chamadas
hipervículos (hyperlinks). Hipervículos podem consistir em palavras ou imagens.
   (...) Uma home page é uma página que serve como ponto de presença na Web para
uma entidade – uma pessoa ou uma empresa. Algumas vezes, o termo se aplica à página
principal de um conjunto de documentos Web correlacionados. Home pages pessoais
normalmente contêm informações sobre seus donos, incluindo, ocupação, interesses,
uma foto e outras informações, tais como um curriculum vitae. Home pages de empresas
incluem vínculos para outros documentos Web dessas empresas.
   O protocolo que controla a Web no nível de aplicação é o HTTP (HyperText
Transmission Protocol), o qual é utilizado pelos programas clientes e servidores na
transmissão de documentos da Web. Os programas clientes, ou seja, aqueles utilizados
pelos    usuários    para   acessar   esses   servidores,   são   chamados   de   browsers
(navegadores), e conhecidos também como programas navegadores. O primeiro browser
foi desenvolvido no próprio CERN, em 1991, e recebeu o nome de WWW. Mas, o primeiro
browser a se tornar popular foi o Mosaic, desenvolvido no National Center for
Supercomputing Applications (NCSA), em Illinois, por uma equipe chefiada por Marc
Andreesen, e tornado disponível para toda a comunidade Internet a partir de 1993,
quando o número de servidores Web ainda era aproximadamente, 500, contrastando com
a impressionante quantidade deles existentes atualmente.
   A confecção de documentos da Web é feita utilizando-se uma linguagem padrão
chamada HTML (HyperText Markup Language). Desde a sua criação no CERN, quando
foi idealizada para atender apenas às necessidades do meio acadêmico, mais interessado
no conteúdo do que na aparência dos documentos, a HTML vem evoluindo por meio de
sucessivas versões que têm procurado aumentar a interatividade e a flexibilidade da
linguagem na apresentação de documentos multimídia. Ao invés de documentos com
conteúdo estático, podem-se agora construir documentos dinâmicos, suprindo assim os
atuais provedores de informação, de uma ferramenta de desenvolvimento eficaz.
Segundo ROSA (1998, p.111).
   Para manter a HTML atual, padronizada entre os vários navegadores que começaram
a surgir a partir de 1994, dentre eles, o Internet Explorer e Netscape, uma entidade foi
fundada a fim de regulamentar a forma com que os conteúdos são apresentados na Web.
Dado início ao consórcio da Web W3C que objetiva estabelecer padrões que facilitem o
desenvolvimento do serviço WWW.

1.3   W3C – World Wide Web Consortium
   No ano de 1994, é fundado o World Wide Web Consortium (W3C) dirigida por Tim
Berners-Lee. Uma organização da Internet com participação inicial do CERN e da
DARPA, e que, atualmente, está aberta à participação de quaisquer outras organizações
interessadas no estabelecimento de padrões que facilitem o desenvolvimento do serviço
WWW, por meio da criação de grupos de trabalho que tratam de assuntos específicos.
Fundamentado por ROSA (1998, p.111).
   Macedo (2004, p.1) A implementação dos padrões Web está longe de ser unânime.
Mas, nos últimos anos, o suporte a esses padrões está se tornando mais constante. Tem
havido muita discussão sobre a importância de usar as recomendações do W3C como
padrões de fato para a Web. São muitas as vantagens obtidas com a adoção deles. O
crescimento da Web tem criado muitos desafios que só podem ser respondidos com o
uso desses padrões. A adoção de padrões remove grande parte das dificuldades e dá
maior dinamismo ao desenvolvimento de sites e/ou qualquer outro documento Web,
permitindo um melhor compartilhamento das informações envolvidas.
   Designadas como recomendações ou especificações e, por vezes, referidas como
padrões, HTML (HyperText Markup Language), XML (eXtensible Markup Language),
XHTML (eXtensible HyperText Markup Language), CSS (Cascading Style Sheets), DOM
(Document Object Model), entre outras linguagens e metodologias, estão sendo
desenvolvidas pelo W3C com diretivas claras sobre o seu uso. Com eles, será possível
construir sites acessíveis a um maior número de usuários e de dispositivos de
visualização, melhor estruturados, com redução de custos de produção e com maior
facilidade de manutenção.

1.4     Evolução do Ambiente Web
   No começo dos anos 90 no mundo, e em meados de 1995 no Brasil, a Internet
comercial, juntamente com a Web, teve o seu “boom”. Esta se viabilizou através do
surgimento de protocolos abertos e padrões de comunicação, significando o surgimento
de um cliente universal de rede. Várias questões menores foram eliminadas e no palco
apareceram, simplesmente, o usuário e seu provedor de serviços. Todos os problemas de
baixo   nível   foram   eliminados.   Novas   questões   surgiram, como   por   exemplo,
personalização da experiência do usuário ou segurança em transações eletrônicas.
   No começo, novos servidores surgiram com um recurso chamado Common Gateway
Interface, ou CGI. Usando CGI, um programador pode com 10 linhas fazer uma aplicação
que antes eram necessárias centenas delas. Em vez de somente programas em C ou
outras linguagens de programação, o programador começou a usar o que ele achava
mais confortável, como em seu ambiente de trabalho usando Perl, Python, Visual Basic
ou uma tradicional linguagem que ele já esteja habituado.
   Hoje em dia, todos os grandes fabricantes de TI estão voltados para a Web. Você
pode programar usando em seu servidor PHP, ASP da Microsoft, Java (com JSP) da Sun,
E-Speak da HP, utilizar banco de dados Oracle, ou base Lótus Domino, ou programas
backend da Siebel, CA, SAP.
   Há ainda APIs de servidores web, entre muitas formas de se desenvolver para web,
tomando complicada e difícil a escolha de como basear seu desenvolvimento por parte da
equipe responsável pelo projeto. Afirma BAREINBOIM (2000).
   Além da programação cliente-servidor, na Web é necessário preocupar com a forma
que a informação será apresentada aos usuários finais. Medeiros abre a discussão sobre
a funcionalidade e interação com usuário de sites muito acessados na Web.
   Medeiros (2002) Websites: produtos de função prático funcional ou simbólico
funcional?
   Poderíamos dizer que os guidelines de usabilidade, com sua preocupação em
priorizar os aspectos práticos ao custo de não endereçar questões nem estéticas nem
simbólicas os usuários, privilegiariam a configuração de websites de acordo com a
estética prático-funcional, uma vez que tais guidelines partem do pressuposto que seus
usuários têm objetivos muito claros da função prática do site e não tolerariam que
artifícios estéticos – imagens puramente decorativas, animações, publicidade, etc. – se
interpusessem entre ele4s e seus objetivos durante a navegação.
   O Google, por exemplo – um dos maiores mecanismos de busca e indexação de
documentos hipermidiáticos na internet e uma das maiores marcas na internet segundo
as pesquisas do NetRatings – é uma referência mundial em termos de usabilidade. A
simplicidade de sua diagramação e a pouca ênfase aos aspectos estéticos de seu layout
são típicos de produtos configurados a estética pratico-funcional.
   Por outro lado, designers, ao confeccionar websites que, além de satisfazer alguma
necessidade prática do usuário – prestando algum tipo de serviço, por exemplo – tentam
agregar valores adicionais à marca do cliente/produto a que se relacionam, privilegiariam
a configuração de websites de acordo com a estética simbólico-funcional.
   O Yahoo!, por exemplo – grande concorrente do Google – presta um serviço similar ao
de outros mecanismos de busca. Porém, a identidade corporativa da marca Yahoo! é
reforçada através de estetização de sua interface. A composição relativamente complexa
de seu layout é típica de produtos configurados segundo a estética simbólico-funcional.
   Em outro artigo, Medeiros completa dizendo “[...]Esta “estetização” dis websites segue
uma tendência histórica, similar a que aconteceu com os produtos de uso: com o aumento
do número de empresas industriais concorrendo entre si, atuando nos mais diversos
ramos industriais, e com o acesso de amplas camadas da população às posições sociais
mais elevadas, com poder de compra cada vez maior[...]” e traz o foco para a Web
“[...]Desta forma, a internet enquanto mídia interativa, através de peças publicitárias
interativas e websites conhecidos como institucionais, torna-se uma ferramenta
estratégica das empresas para melhor posiciona-las perante o mercado, acrescentando
valores à marca e diferenciando produtos.[...]”

1.5   Servidor Web
      Pereira (2006, p.11) Para entender a função de um servidor Web, é necessário
primeiro entender o conceito de cliente e servidor. Define-se por cliente-servidor uma
relação entre processos que atuam em máquinas diferentes. O servidor é aquele que
fornece um serviço, e o cliente é aquele que utiliza esse serviço (Consumidor).
      Um servidor Web é um modelo inteiramente novo, introduzido pela Internet, e
geralmente conta com uma grande quantidade de clientes, que se comunicam com
servidores pesados, responsáveis por atender a milhares de requisições.
      A comunicação entre eles é feita utilizando-se o protocolo http (Hyper Text Transfer
Protocol), normalmente por meio do envio de requisições de um navegador (browser)
como o Internet Explorer ou o Mozilla Firefox, para um servidor Web, que retorna as
respostas por meio de conteúdo Web (como páginas) de volta para o cliente.
      Assim, a definição de um servidor Web é a seguinte: é um aplicativo capaz de
fornecer ao cliente (navegador Web) os dados solicitados por meio de suas requisições.
                     [...] Cada vez que o usuário entra em seu site, ele carrega arquivos como arquivos
                     HTML, gifs e jpeg. A cada vez que seu servidor envia um arquivo desses para um
                     usuário, o caminho percorrido obrigatoriamente será a conexão (link) entre a sua
                     rede e o seu provedor de acesso. Para sites com pouco acesso, um link de baixa
                     velocidade resolve a questão. Por exemplo, um site que transfere um total de 1GB
                     por mês, faz transferência média de 3.314 bits por segundo. Um link de 64kbps dá
                     e sobra para esse site. E em sites com alto volume de acesso, o link
                     obrigatoriamente terá que ser maior.[...] (TORRES, 2001, p.631)


      Atento a este problema, este trabalho visa discutir e analisar técnicas de
construção de sites que diminuam a transferência de dados desnecessários entre servidor
e link de acesso, fazendo com que empresas e até mesmo residências utilizem a largura
de banda para outras atividades que necessitem de maior taxa de transferência, como por
exemplo, vídeo por demanda ou streaming.

1.6   Padrões Web
      Segundo Ferraz (2003) com a expansão da Web, as necessidades das pessoas e
organizações cresceram também. Por exemplo, os primeiros navegadores, antes do
Mosaic, suportavam apenas documentos textos. Em 1993, com a criação do Mosaic e
alguns outros navegadores similares, o HTML incorporou também imagens. (Conta-se
que Tim Berners-Lee reclamou da adição de imagens dizendo que o recurso seria usado
para pornografia. Infelizmente, ele estava absolutamente certo.) Outros elementos foram
adicionados também à especificação inicial criada por Berners-Lee para atender às
demandas crescentes de estruturação de documentos. O HTML, inicialmente, era apenas
uma aplicação do formato SGML, uma metalinguagem cujo propósito é criar linguagens
de marcação de documentos. O SGML é muito poderoso e permite a fácil extensão das
linguagens criadas com base no mesmo. Isso, por sua vez, permitiu o crescimento rápido
do HTML pela adição desses novos elementos e atributos.
      O crescimento da Web também trouxe seus problemas. No começo, os elementos
contidos na linguagem HTML apenas definiam a estrutura básica de um documento, tais
como cabeçalhos, listas, parágrafos, ênfase e similares. Não havia nada na linguagem em
si que explicava com tais elementos deviam ser exibidos. Obviamente, cada
implementação decidia como fazer isso da sua maneira. Assim, cabeçalhos eram exibidos
em fontes maiores e negritados, as ênfases apareciam em itálico, os parágrafos eram
separados por linhas em branco e assim por diante. Até aqui, não havia nenhum
problema, já que a informação em si era preservada. O conteúdo era distintamente
separado da apresentação e poderia ser visto em qualquer navegador sem
inconvenientes. Entretanto, o desenvolvimento comercial dos navegadores e a
necessidade destes de manter uma vantagem competitiva sobre os concorrentes levou à
inclusão de elementos proprietários e/ou de apresentação nas implementações
específicas. Elementos como font e center surgiram e as pessoas começaram a usar tais
elementos gráficos no lugar dos elementos de estruturação. Assim, ao invés de usar o
elemento h1, por exemplo, para a identificação do cabeçalho primário de documentos, as
pessoas estavam usando o elemento font para forçar a exibição da maneira visual
requerida. O resultado foi que o documento era bem exibido somente nos navegadores
que suportavam tais elementos. Como cada navegador implementava seus conjunto de
elementos especiais, os truques de apresentação para enganar os renderizadores se
tornaram coisa comum, aumentando o tamanho e a falta de estruturação dos documentos
e reduzindo o HTML a uma confusão de elementos despadronizados. Nessa época
começou a Grande Guerra dos Navegadores que durou vários anos. Qualquer pessoa
que tenha lidado com HTML na época poderá atestar a dificuldade de conseguir que um
documento qualquer aparecesse bem em todos os navegadores em uso então.
      O esforço de padronização do HTML, logo depois liderado pelo W3C, começou
também em 1994. Uma especificação inicial para a versão 2.0, incluindo muitos dos
elementos proprietários e outros necessários, foi criada. Essa especificação foi a primeira
a apresentar elementos para formulários e suporte a imagens mapeadas. A especificação
foi desenvolvida, transformada em uma RFC e finalmente aprovada no final de 1995. Por
esse tempo, a maioria dos navegadores existentes a suportava quase que inteiramente.
Essa especificação define as capacidades básicas da maioria dos navegadores em
existência hoje.
      Embora a situação de implementação dos padrões seja bastante complicada
atualmente, a necessidade da adoção dos mesmos é patente. O crescimento exponencial
da Web tem criado muitos desafios que somente esses padrões são capazes de
responder. Algumas pessoas acreditam que os padrões Web são limitadores. A verdade é
que eles removem grande parte da dificuldade do desenvolvimento dando maior
flexibilidade ao desenvolvedor e produtor Web, permitindo que as pessoas possam
realmente exercer a sua criatividade ao mesmo tempo em que forjam elos de
comunicação.

1.6.1 Vantagens dos Padrões Web
      Conforme especificações do órgão W3C, Macedo (2003, p.2) lista as vantagens:
       •   Liberdade – Permite total liberdade de estruturação e inovação por serem de
           domínio público. Isso faz com que possam ser usados por qualquer pessoa
           em qualquer situação, sem a necessidade de autorização ou de efetuar
           qualquer tipo de pagamento por sua utilização.
       •   Estabilidade – Significa que os sites feitos com os padrões Web
           permanecerão compatíveis. Ou seja, em ambientes com suporte limitado
           aos padrões vai se ter acesso completo ao conteúdo do site. Em
           contrapartida, esses mesmos sites continuarão acessíveis no futuro em
           ambientes ainda a serem desenvolvidos.
       •   Acessibilidade – Significa ter acesso às pessoas com algum tipo de
           deficiência ao conteúdo do site e, também, a possibilidade da sua utilização
           em outros ambientes que não o navegador-padrão, manutenção do site.
           Além de evitando a duplicação de conteúdo e facilitando o acesso geral.
       •   Simplicidade - Permitem a utilização de uma estrutura comum, a eliminação
           de elementos desnecessários e a utilização das linguagens de marcação
           somente para a estruturação dos documentos envolvidos, sem que seja
           especificada qualquer forma de apresentação.
       •   Facilidade de criação e manutenção – A separação do conteúdo da
           apresentação facilita a criação do site.    Além de organizar documentos,
           permite que seu desenvolvedor preocupe-se somente com o conteúdo. A
           apresentação será desenvolvida ou modificada em separado, de acordo com
           a situação envolvida.



1.6.2 Desvantagens dos Padrões Web
    Ferraz (2003) lista as desvantagens:
       •   Implementações discordantes       - A maior dificuldade na utilização dos
           padrões   Web    atualmente     está   na   existência   de   implementações
           discordantes dos mesmos. Isso aumenta substancialmente a complexidade
           da criação de documentos que podem ser utilizados indistintamente em
           qualquer ambiente Web.
       •   Aumento da complexidade inicial - Uma outra desvantagem da aplicação é o
           aumento da complexidade inicial na criação dos documentos. Isso pode
           parecer contraditório em relação à vantagem da simplicidade citada
           anteriormente, mas na realidade não é. Esse desvantagem só existe
                    inicialmente, quando os criadores de documentos estão fazendo uma
                    transição para o uso de padrões.

1.7      HTML – Hypertext Markup Language
         Melo (2005, p.1514) HTML é uma linguagem de marcação, baseada no formato
SGML (Standard Generalized Markup Language), criada para publicação de hipertexto na
web. Pode ser criada e processada por uma variedade de ferramentas, desde editores de
texto simples, como o bloco de notas do Windows e vi para Linux, até sofisticados
editores do tipo WYSIWYG (What You See Is What you Get), como o Macromédia
Dreamweaver1.
         Os marcadores da linguagem HTML, ou tags, apóiam a estruturação de
documentos em cabeçalhos, parágrafos, listas, tabelas, hiperlinks, etc. Sua versão 4.01
possibilita combinar informações e apresentação aos marcadores estruturais. Entretanto,
recomenda-se fortemente que estrutura e apresentação de documentos Web estejam
separados, visando facilitar sua manutenção e ampliar sua independência de dispositivos.
         Assim, a versão 4.01 da linguagem HTML foi reformulada para XHTML 1.0
(Extensible HyperText Markup Language), uma aplicação da linguagem XML (Extensible
Markup Language).

Etiquetas de HTML
         Pereira (2006, p.12) Uma tag é uma etiqueta (label) que executa uma função no
documento.
         Lemay (1996, p.62) As tags da HTML geralmente têm uma tag de abertura e outra
de fechamento envolvendo o texto afetado. A tag de abertura “ativa” uma característica
(como cabeçalho, negrito, e assim por diante) e a tag de fechamento a desativa. As tas de
fechamento normalmente têm seus nomes precedidos por uma barra (/).

<html>
         A primeira tag de estrutura em todo documento HTML é a tag <html>, que indica o
conteúdo do arquivo está na linguagem HTML.

<head>
         A tag <head> especifica que as linhas entre o ponto de abertura e de fechamento
da tag são o prólogo do resto do arquivo. Existem poucas tags que aparecem na porção
<head> do documento [...].


1   http://www.macromedia.com/
<title>
       Todo documento HTML precisa ter um título. Para dar título a um documento use a
tag <title> da HTML.

<body>
       O restante do documento HTML, incluindo todo o texto e outros elementos
(vínculos, imagens e assim por diante) está contido em uma tag <body>.

Cabeçalhos
       Cabeçalhos são usados para dividir seções do texto [...].
       Os números indicam o nível do cabeçalho (h1 até h6). Os cabeçalhos, quando
apresentados, não são numerados; eles aparecem em letras maiores, em negrito,
centralizados, sublinhados ou em letras maiúsculas – de qualquer forma que os destaque
do restante do texto.

Parágrafos
       Agora que você já tem um título e vários cabeçalhos, vamos juntar alguns
parágrafos simples ao documento.
       Infelizmente, os parágrafos em HTML são algo inconstante. A definição de
parágrafo mudou em cada uma de suas versões. A única coisa que ficou mantida é que
se deve indicar um texto de parágrafo comum com a tag <p>.

Vínculo
       Para criar um vínculo em um documento HTML, você deverá utilizar a tag de
vínculo HTML <a>[...]</a>. A tag <a> é chamada também de tag de ponto de fixação, pelo
fato de poder ser utilizada como âncora de vínculos.

Listas
   •   Listas Numeradas
       As listas numeradas são envoltas pelas tags <ol>[...]</ol> [OL corresponde a
       Ordered List (Lista Ordenada) e, cada item da lista é iniciado com a tag <li>[List
       Item (Item de Lista)]].
   •   Listas Não-Ordenadas
       São as listas onde os elementos podem ser apresentados em qualquer ordem.
       Essas listas se assemelham às listas ordenadas na HTML. A diferença é que a lista
       é indicada por intermédio de tags <ul>[...]</ul> em vez de <ol>. Os elementos da
       lista são separados por <li>, como nas listas ordenadas.
As tabelas são formadas de linhas e colunas, o objetivo principal é apresentar os dados
em forma tabular para que facilite a compreensão de quadros, listas, mapas, catálogos,
etc.
                           […] Em uma página Web,, as tabelas podem ser utilizadas de várias
                           maneiras. Elas podem ser usadas com seu propósito original, o de
                           apresentar dados dispostos em forma de tabela, ou podem ser
                           usadas para auxiliar na formatação de gráficos e de páginas de
                           informações.[…] (MOHLER,1997, p.350)

       Uma tabela pode ser usada para auxiliar no desenho (layout) do web site através
das etiquetas (tags) que o HTML disponibiliza.
       A sintaxe é a mesma de outras etiquetas em HTML: Para abrir o rótulo usa-se
“<etiqueta>” e para fechá-lo usa-se “</etiqueta>”.
       <table> - É a etiqueta principal da tabela, responsável por todo o conjunto de sub-
etiquetas. Pode-se aplicar propriedades que definirão a tabela em um modo geral, como o
tamanho que a tabela terá.
       <tr> - Define os limites das linhas de uma tabela. Todos os elementos (células)
dentro delas pertencem a uma mesma linha.
       <td> - É a etiqueta que define as células que constituem as colunas de cada linha.

Editores HTML
       Editores de páginas da Web possuem duas atrações principais: a velocidade com
que lhe permitem escrever em HTML e a certeza que lhe dão de que as tags geradas
serão sintaticamente corretas. Com um editor de páginas da Web, você será capaz de
gerar código tecnicamente impecável bem mais rápido do que o mais ligeiro digitador
poderia fazer em um processador de textos.
       Existem também argumentos contrários ao uso de editores de páginas da Web.
Eles isolam você dos tags que fazem os navegadores interpretar suas páginas da forma
que eles fazem, tornando difícil para você identificar e solucionar problemas. Editores de
páginas da Web também o desestimulam a usar quaisquer tags HTML ou atributos que
não eram familiares para os criadores do editor. É o que diz WALL (1997, p.84).

1.8    CSS – Cascading Style Sheets
       Macedo (2004, p.7) informa que CSS (Cascading Style Sheets) é um padrão e
formatação para documentos HTML/XHTML. Ele permite uma maior versatilidade no
desenvolvimento de design para sites sem aumentar o seu tamanho. Basicamente, o CSS
permite ao designer um controle maior sobre os atributos tipográficos de um site, como o
tamanho e cor das fontes, espaçamento entre linhas e caracteres, margem do texto, entre
outros. Introduziu também a utilização de layers, permitindo a sobreposição de texto sobre
texto ou texto sobre imagens.
       Com a utilização do CSS, passamos                a ter a HTML/XHTML preocupando-se
somente em estruturar o documento em blocos de informação (títulos, cabeçalhos,
parágrafos, etc.) enquanto o CSS controla o design (posicionamento, cores, fontes, etc.)
Com CSS consegue-se, então, separar o estilo do conteúdo.
       Anteriormente, utilizando uma boa combinação de tags HTML (ausentes na
XHTML), podíamos criar sites interessantes sob o ponto de vista do design. Entretanto, as
possibilidades que elas ofereciam eram bastante limitadas sob o ponto de vista do design.
Entretanto as possibilidades que elas ofereciam eram bastante limitadas se comparadas
às oferecidas pelo CSS. Propriedades de CSS podem ser aplicadas a todas e quaisquer
tags, modificando seus atributos.

Etiquetas de CSS
       Macedo (2004, p. 33) diz que para dividir o conteúdo e fazer o desenho do layout é
necessário usar divisões que devem ser identificadas no documento. Cada elemento no
CSS possui atributos simples e intrínsecos. Vejamos a seguir os elementos mais comuns
das listas de estilo:

Divisor
        As tags <div>[..]</div>permitem que um documento seja divido em blocos, dessa
forma criando uma estrutura lógica para o documento. Possuem os seguintes atributos: id,
class, style, title, dir, lang e eventos intrínsecos.

Pseudo-elementos
       As definições dos estilos estão em sua maioria ligadas à pseudo-elementos, que
possuem atributos de posicionamento, coloração, estilos de fonte de seus sub-pseudo-
elementos e pseudoclasses. O símbolo que dentro do arquivo de lista de estilos ou
incorporado no próprio documento, deve ser a grade ‘#’, seguida do nome do pseudo-
elemento e seus atributos devem estar entre as chaves ‘{}’, cada atributo deve ser separa
um do outro pelo símbolo ponto e vírgula ‘;’
       Os pseudo-elementos servem como seletores de uma regra de definição de estilo,
mas a sua existência não é da linguagem HTML e sim está incorporado às listas de estilo,
mesmo que apareçam em alguns casos dentro do código HTML, isto se dá ao suporte
que os navegadores possuem em diferenciar scripts ‘text/css’ do corpo nativo do HTML.
1.9        Ferramentas Utilizadas

1.9.1 cPanel
           O cPanel é um software de gestão de alojamento web com interface web na porta
TCP 2082 (por default).
           Permite criar e-mails, contas de FTP, gerenciar arquivos, atribuir proteções de
diretórios, adicionar tarefas cron, re-encaminhar e-mails, entre outras funções (lista
completa: http://www.cpanel.net/docs/cpanel/)
           O software ainda não funciona em Windows32 ou Windows64 mas já foi lançada 1ª
versão alpha do mesmo.
           Inclui o modulo WHM (Web Host Manager) para manutenção de clientes, e a
instalação de HTTP, SMTP, e outros serviços para alojamento web.
           Existem ainda diversas themes algumas pagas outras gratuitas para o cpanel como
a X, xpbr, ckin entre outras.
           AWS é um programa de estatística muito complexo que produz uma grande
variedade de gráficos sobre quem visitou seu site. Este é provavelmente a mais popular
maquina de estatística disponível hoje. Os diferentes gráficos mostrarão à você de onde
são seus usuários e prove muitos detalhes sobre quem está acessando seu site. Visto no
site oficial CPANEL2.
           O AWStats está dentro do pacote do cPanel e, o cPanel está disponível na grande
maioria dos servidores que hospedam sites.
           Outros softwares similares são o Analog e Webalizer, que também produzem
ótimos gráficos de acesso.

1.9.2 Adobe Photoshop
           O Adobe Photoshop é um editor de imagens bidimensionais do tipo raster, que
possui ainda algumas capacidades de edição típicas dos editores de vetores,
desenvolvido pela Adobe Systems. É considerado o líder no mercado dos editores de
imagem profissionais.
           Sua mais recente versão é chamada de Adobe Photoshop CS2 (sigla cujo
significado é "creative suite 2", correspondente à nona edição desde seu lançamento),
disponível para os sistemas operacionais Microsoft Windows e Mac OS X.. Esta é a
versão que foi utilizada para o desenvolvimento do desenho dos sites.

2 http://www.cpanel.net/docs/cpanel/Webalizer.htm
1.9.3 Macromedia Fireworks
      O Fireworks é um editor de imagens desenvolvido pela Macromedia, que
posteriormente foi adquirido pela Adobe. Suas funcionalidades focam a publicação gráfica
na internet, por isso inclui suporte a GIF animado, PNG e imagens fatiadas, além de
possuir ótima compressão de imagens. A partir da versão MX, ganhou integração com
outros produtos da mesma linha, Dreamweaver, Flash e Freehand.
      Atualmente está em desenvolvimento o programa Fireworks 9, com uma nova
interface, mais adequada aos produtos da Adobe. Para este trabalho, a versão utilizada é
a 7, que compõe o pacote MX 2004.

1.9.4 Macromedia Dreamweaver
      O Macromedia Dreamweaver é uma ferramenta de desenvolvimento para a web
criada pela Macromedia, que está atualmente na versão 8. Versões iniciais da aplicação
serviam como um simples editor HTML WYSIWYG, porém versões mais recentes
incorporaram notável suporte para muitas outras tecnologias web tais como XHTML, CSS,
JavaScript e vários scripts de servidor. Desde o final dos anos 90, o Dreamweaver vem
tendo um sucesso crescente e hoje domina cerca de 80% do mercado de editores HTML.
Existem versões tanto para Mac OS quanto para Windows, mas também é possível
executá-lo em plataformas Unix e sabores através do uso de softwares de emulação
como o Wine.
      Como um editor WYSIWYG, o Dreamweaver pode esconder os detalhes do código
HTML do usuário, tornando possível que não-especialistas criem facilmente páginas e
sites web. Alguns desenvolvedores web criticam esta abordagem por produzirem páginas
HTML muito maiores do que o necessário, o que pode levar a um desempenho pobre dos
navegadores web. Isto pode ser particularmente verdade porque a aplicação torna muito
fácil a criação de layouts baseados em tabelas. Além disso, alguns desenvolvedores de
sítios web, criticaram o Dreamweaver no passado, pela introdução de código, que
freqüentemente não era compatível com os padrões W3C. No entanto, a Macromedia
aumentou o suporte para CSS e layout de página sem tabelas em versões posteriores.
      Assim como o Macromedia Fireworks foi utilizada a versão 7, que compõe o pacote
MX 2004.
1.9.5 NotePad ++
           O Notepad++3 é um software do tipo editor de texto que possui o código fonte
aberto sob a licença GPL. Suporta várias linguagens de programação e roda no sistema
operacional Windows, também possui uma versão para rodar em ambiente Unix.
           Este programa é baseado no Scintilla, é escrito em C++ com puras chamadas de
API Win32 e usa a STL. O objetivo do Notepad++ é oferecer um esguio e eficiente binário
com uma interface gráfica totalmente customizável.
           Ele suporta auto completar, expressão regular buscar e substituir, split screen,
zoom, favoritos, etc. Tem suporte para macros e plug-ins. Um plugin de usuário chamado
TextFX, que provê opções de transformação de textos, é incluído por padrão.
           O Notepad++ não é o único editor de código, mas é uma alternativa ao bloco de
notas graças a sua velocidade. Sua interface com abas, navegação entre textos abertos é
mais confortável.
           A versão atual, suporta mais de 30 linguagens de programação diferentes,
incluindo as etiquetas de HTML e CSS. Além disto, usuários podem definir suas próprias
linguagens usando User Language Define System integrado, que faz do Notepad++
extensível, para ter colorização de sintaxe and Folding de texto(Compactação de trechos
de código).




3 http://notepad-plus.sourceforge.net/
2 METODOLOGIA
      O tipo de pesquisa aplicada a este trabalho é a pesquisa exploratória e a técnica de
coleta de dados é a quantitativa.
      Nascimento (2002, p.73) explica sobre a pesquisa exploratória:
                           A pesquisa exploratória tem por objetivo permitir um aprofundamento
                           maior sobre termos ou questões com as quais o pesquisador não
                           esteja ainda muito bem familiarizado ou que se disponha de poucas
                           informações criando as condições de hipótese.

      A pesquisa exploratória visa a constituição de um problema para que a pesquisa
seja mais precisa. É o tipo de pesquisa que a investigação é caracterizada pela
engenhosidade e flexibilidade, de acordo com Oliveira (1997, p.134).
      Oliveira (1997, p.134) diz que os estudos exploratórios podem ter outros aspectos,
tais como o de possibilitar ao pesquisador fazer um levantamento de situações
econômicas de uma determinada faixa do mercado consumidor.
      Quanto à coleta de dados quantitativa, Martins e Campos (2003, p.34) afirmam que
esta técnica busca desvendar o que está evidente, busca o resultado, baseia-se na
realidade estatística para confirmação de resultados.
      A pesquisa exploratória aplica-se perfeitamente para a formulação do quadro
comparativo dos layouts envolvidos neste trabalho. O levantamento de dados no servidor
comprovou a economia gerada pelos padrões web.
      A coleta de dados quantitativos dos gráficos foi essencial para a análise e
confirmação dos resultados.
      Entre os profissionais de desenvolvimento Web, muito se comenta à respeito da
utilização ou não, dos padrões web. Tais comentários fomentaram a vontade de tirar a
prova real e sanar as dúvidas ainda existentes, através de investigação e análise da
técnica de construção de layouts com tabelas e da técnica de listas de estilos, com
finalidade de comprovar uma das vantagens dos padrões web.
      A busca pelo conhecimento desenvolveu-se através da observação do que já foi
publicado e com base nisto, um quadro comparativo foi elaborado para efeito de análise
dos resultados obtidos.
      Com isso, o estudo exploratório gerou conhecimento profundo de ambas as
técnicas, sendo estas, os únicos meios para disponibilizar conteúdo para internet via http.
3 DESENVOLVIMENTO
      Para este trabalho foram desenvolvidos dois sites baseado em um modelo criado,
aleatoriamente, com finalidade ilustrativa. Visualmente, os sites desenvolvidos adequam-
se à um modelo tradicional, baseado na divisão por partes, tais como cabeçalho, menu
esquerdo, conteúdo e rodapé. Este padrão pode ser observado em muitos sites
corporativos, portais de notícias, instituições educacionais, e entre outros mais.
      Tratando-se da parte codificada, ou seja, a estrutura, estes dois sites se diferem
muito, justo por utilizarem técnicas diferentes de formatação.
      As informações publicadas nos sites são meramente demonstrativas, sugerindo
que este trabalho sirva de alicerce contínuo para que futuros projetos reais utilizem os
padrões web recomendados neste trabalho.
      Observa-se ainda que divergindo dos tradicionais dizeres em latim lorem ipsum
dolor sit amet…, que datam de 45 a.C. e que são frequentemente utilizados por
profissionais de publicidade e internet para simular títulos e textos, optou-se por seguir as
instruções que Memória (2005, p.76) recomendou e atentou ao fato de textos
incompreensíveis atrapalharem o entendimento da finalidade da página e as possíveis
atribuições da mesma.
      A figura 1 é a visualização de ambos sites lado à lado, à esquerda o site elaborado
em conformidade com os padrões web e à direita o site que seguiu o método de
desenvolvimento sem os padrões web, utilizando tabelas para formatar os textos, títulos e
imagens.
      É esta utilização de tabelas e listas de estilos que foi comparada para averiguação
de qual técnica oferece menos tráfego de dados redundantes nos servidores web.




                                                                                 Figura    1:
                    Apresentação dos layouts.

3.1    Utilização das ferramentas para o layout em tabelas
      Utilizando o Adobe Photoshop, foi feito o modelo do site, que serviu como base
para a geração do layout por tabelas usando a ferramenta Macromedia™ Fireworks® e o
layout com CSS.
      A figura 2 mostra o desenho do site, É desta maneira que ele deve ficar após ser
transformado em tabelas.




                         Figura 2: Layout para ser transformar em tabela.

      No Macromedia Fireworks há uma ferramenta chamada fatia, conforme figura 3,
esta ferramenta faz retângulos que serão as divisões para que posteriormente seja
transformados em tabelas.



                                    Figura 3: Ferramenta Fatia
      Obtidos conhecimentos básicos sobre a ferramenta, abre-se o arquivo do layout e a
primeira ação é fazer um retângulo, com a ferramenta Fatia, sobre a área do cabeçalho
com altura igual a 155 pixels e largura igual a 785 pixels.
      O resultado obtido será precisamente igual à figura 4.




                    Figura 4: Primeira fatia feita no cabeçalho

      O próximo passo é fazer a área para o rodapé e o texto central. Para isso faça um
novo retângulo para o rodapé com as dimensões de altura igual a 35 pixels e largura igual
785 pixels. Um novo retângulo para o texto central com altura igual a 340 pixels e largura
igual a 600 pixels. A figura 5 mostra o como deve ficar.
                                Figura 5: Fatias do conteúdo e rodapé

          Este é o momento em que cada designer escolhe um modo que melhor lhe agrada
para esquadrinhar o menu. Optou-se por uma técnica clássica que recorta cada item do
menu como uma figura à parte.
          Observa-se na figura 6 que uma parte da fatia de conteúdo foi sobreposta para que
o canto superior direito ficasse fora do conteúdo e sim dentro da apresentação.




                            Figura 6: Resultado final do fatiamento.

          Com a as áreas todas definidas, é o momento de exportar para HTML. No
Macromedia Fireworks basta pressionar CTRL + SHIFT + R simultaneamente, escolher o
diretório para salvar os documentos que gerados automaticamente e clicar no botão
salvar.

3.2       Utilização das ferramentas para o layout com CSS
          Com base no modelo (desenho) criado com o programa Adobe Photoshop, faz-se a
criação da base de trabalho do layout, assim como foi feito no layout com tabelas.
          Para agilizar o processo de elaboração do layout, reaproveita-se as imagens
geradas pelo Fireworks, após o processo de fatiamento do desenho. As imagens que
serão reutilizadas são as bordas do menu e o cabeçalho, pois já estão separados e não
há necessidade de repartir o layout novamente. Lembrando que é para este caso,
provavelmente em outros layouts, ou em outros métodos de fatiamento, pode ser
necessário refatiar o modelo para que as figuras que forem geradas, sejam menores
possíveis.
      Existe certa discussão entre os desenvolvedores web, acerca do próximo passo a
seguir. Alguns defendem a idéia de que é melhor colocar as figuras juntas já formando o
layout primário, facilitando assim a geração de código estático e dinâmico. Entretanto,
esta posição duplica o trabalho do web designer, fazendo com que o mesmo tenha
contato com o layout somente para implementar a disposição das figuras e logo após
passar pelo desenvolvedor web, recebe o layout novamente para implementar a
disposição dos textos estáticos e dinâmicos.
      A      outra   teoria   defende   a   utilização   de   textos-fictícios   que   substituam
temporariamente o conteúdo que será adicionado sobrepondo-o. Assim, o web designer já
implementa a disposição das figuras e também a disposição dos textos, assim como tipos,
cores e tamanhos de fontes. Logo após esta etapa, o desenvolver web adiciona o
conteúdo HTML ou dinâmico, sobrescrevendo os textos-fictícios que devem, sim, auxiliar
o desenvolvedor web sobre qual tipo de informação deve ser inserida naquele local.
      Sabendo das alternativas, optei por seguir o segundo método, fazendo primeiro
toda elaboração da estrutura HTML, para em seguida, adicionar as propriedades de CSS
sobre o HTML estruturado.
      Com a ferramenta Notepad++, que possui recurso de auto-completar, escreveu-se
as etiquetas HTML das páginas e o mesmo também foi utilizado para a elaboração do
arquivo CSS, que contêm a formatação dos elementos de estruturação do layout.
Posteriormente, este arquivo será chamado em cada página através de um link de
referencia.
      Os títulos principais receberam atributos de cor e tamanho. Quanto aos textos,
receberam atributos de posicionamento, cor e tamanho.
      O HTML aceita incorporar ao seu código, scripts e listas de estilos de forma que
sejam chamados externamente através de tag especial ou como no caso utilizado,
referindo-se a um arquivo criado.
      Este       comando       <link    rel="stylesheet"      type="text/css"    media="screen"
href="screen.css"/> faz com que o arquivo screen.css seja incorporado ao código HTML,
ajustando então a visualização no browser.
      Este método facilita a criação de um único arquivo de CSS para ser incorporado à
múltiplas páginas de HTML, desta forma, não é necessário redigitar, ou copiar e colar, o
código CSS em várias páginas.
3.3    O processo para exploração
      O processo para a exploração seguiu o método proposto a seguir:
      No primeiro momento foi elaborado um site utilizando a ferramenta Fireworks que
resultou em um layout provido de tabelas.
      Seguidamente, um layout elaborado seguindo os padrões web, redigidos pelo
órgão W3C, com a ferramenta Dreamweaver para a codificação das etiquetas da HTML e
a ferramenta Notepad++ para os elementos do layout com CSS.
      Propositalmente, ambos layouts são idênticos para que o resultado do experimento
fosse o mais conciso possível.
      Na seqüência, a etapa da elaboração do cenário do experimento. Para que os sites
fossem submetidos aos testes, um servidor foi locado e os sites foram alojados no
mesmo.
      O método quantitativo exige que haja precisão nos estudos exploratórios, sendo o
processo de investigação rigoroso, garantindo a credibilidade e a confiabilidade dos
resultados obtidos.
      Aderindo a esta conduta, o acesso aos sites foi feito por um terminal instalado nas
dependências da União de Escolas Superiores de Rondonópolis (UNIR).
      O terminal possui as seguintes configurações:
          •   Processador: Athlon XP 2800+
          •   Memória: 512MB
          •   Sistema Operacional: Windows XP Professional
          •   Placa de Rede Via Rhine II 10/100Mbps
      A conexão de acesso à Internet da UNIR repassa para o terminal a velocidade
300kbps para download.
      O acesso ao site com CSS foi feito no dia 11/01/2007 às 15:00; o conteúdo
acessado foram os links da página inicial e página e página para contato.
      O acesso ao site com tabelas foi feito no dia 11/01/2007 às 16:00; o conteúdo
acessado foram os links da página inicial e página para contato.
      Propositalmente, o acesso não foi simultâneo devido o foco na quantidade de
dados transferidos e não o desempenho do servidor locado.
      Devido a alterações na estrutura do servidor de hospedagem, os gráficos foram
gerados pelo AWStats que é uma poderosa ferramenta que gera gráficos avançados para
web, streaming, ftp ou servidor de email, gráficos e estatísticas.
3.4    Resultados
       Após publicação do site no servidor e feito os acessos como proposto pelo
esquema acima, os gráficos foram gerados para apreciação e demonstração dos
resultados.
       A figura 7 indica a quantidade de bytes transferidos, durante os dias
separadamente, incluindo ainda a contagem das páginas acessadas. Os hits são as
informações de requisições extras, como figuras e outros arquivos tal qual o arquivo da
lista de estilos.
                                                                               Figura 7:
                                                                                   Dados
                                                                                   gerais
                                                                                sobre o
                                                                                acesso.
                                                                              Observa-
                                                                              se      ainda
neste gráfico, que a quantidade de bytes 100.015KB são referentes às quatro páginas
acessadas e as figuras de ambos layouts. Todavia, se houverem mais acessos a um site,
o que é bem comum, estes bytes transferidos serão ainda maiores, podendo chegar ao
limite do plano de hospedagem. Conforme a metodologia de hospedagem trabalhada pela
maioria dos servidores de páginas web, ao ultrapassar o limite de bytes transferidos do
plano de hospedagem, uma taxa extra é creditada na fatura da próxima mensalidade.
       A seguir, na figura 8, obtêm-se as informações de cada hora de acesso. Este
gráfico mostra o que foi planejado no item 3.3, o processo para exploração; que visualizou
o site feito com listas de estilos às 15:00 horas e revelou que a quantidade de bytes
transferidos foi de 17.490KB, enquanto às 16:00, quando foi feito o acesso ao site
elaborado com tabelas, a quantidade de dados transferidos foi 82.525KB.
                       Figura 8: Horários de acesso e dados transferidos
      Investigando à fundo, o real motivo da alta diferença de dados transferidos,
observa-se a coluna hits da figura 8 acima mostrada.
      Apesar do conteúdo de ambos sites ser idênticos, o que difere é a estrutura, e os
hits contam esta estrutura, ou seja, a quantidade de arquivos vinculados ao corpo do
documento principal, e inclusive, o próprio documento principal.
      O layout feito com CSS, possui apenas cinco arquivos extras para formar o
desenho do site. Estes arquivo são quatro figuras que compõem o desenho, ou seja,
cabeçalho, rodapé, lado esquerdo e borda do menu, também é incluído o arquivo CSS
que organiza estas figuras para apresentação no navegador.
      A construção de layouts com CSS separa o conteúdo do site de sua formatação
visual, este método é regulamentado pelo W3C que outorga os padrões web,
      Quanto ao layout gerado automaticamente pelo Fireworks, que utiliza a
metodologia de layout com tabelas, muitas figuras são criadas, aumentando a
complexidade da organização das figuras e também o tamanho do documento. Neste
layout, para cada página, dezesseis arquivos de figura são incorporados ao documento
principal, e é criada uma pasta específica para cada item do menu. Isto aumenta muito a
quantidade de dados referente ao desenho e disposição do site, demorando mais tempo
para o carregamento da informação principal, acarretando em desistência do usuário
acerca da informação, custos extras com hospedagem, e outros tipos de infortúnios como
negação de acesso à para leitores de tela.
4 CONCLUSÃO
       Os resultados obtidos pelos gráficos gerados pelo AWStats, mostra que o método
de construção de sites com listas de estilos favorece ao baixo fluxo de informações
inerentes ao desenho do site, favorecendo que o conteúdo principal, ou seja, a
informação, seja rapidamente disponibilizada ao usuário.
       A utilização de layouts feitos com tabelas, pode comprometer orçamentos para
hospedagem de websites, debilitando ainda mais a credibilidade dos profissionais que
utilizam esta técnica.
       Ao comparar os métodos de construção de sites, é de fato observável que a
adoção aos padrões web tendem a amenizar a quantidade de dados transferidos, isto por
sua vez, gera economia e traz benefícios à todos os tipos de usuários que acessarem o
website.
5 BIBLIOGRAFIA
ASLESON, Ryan; SCHUTTA, Nathaniel T. Fundamentos do Ajax. Rio de Janeiro: Alta
books, 2006.

BAREINBOIM, Elias. Introdução ao Desenvolvimento Web, 2000. Disponível em: http://
olinux.uol.com.br/artigos/292/print_preview.html acessado em 30/07/2006 às 18:10.

FERRAZ, Robaldo M. Construindo Sites com Padrões Web, 2003. Disponível em:
http://kb.reflectivesurface.com/br/artigos/sitesComPadroesWeb/introducao acessado em:
15:06/2006 às 16:16.

LEMAY, Laura. Aprenda em 1 semana: Criar home pages na WWW com HTML. Rio de
Janeiro: Campus, 1996.

MACEDO, Marcelo da Silva. Construindo sites adotando padrões Web. Rio de Janeiro:
Ciência Moderna, 2004.

MARTINS, Maria Rosana; CAMPOS, Valéria Cristina. Guia prático para pesquisa
científica. Rondonópolis: UNIR, 2003.

MEDEIROS, Itamar Lima. Sobre a discussão estética vs. Usabilidade, 2002. Disponível
em:       http://webinsider.uol.com.br/index.php/2002/11/20/sobre-a-discussao-estetica-vs-
usabilidade acessado em 27/07/2006 às 14:10.

MELO, Amanda Meincke Melo; BARANAUSKAS, M. Cecília C. Design E Avaliação de
Tecnologia Web-acessível. In: XXIV Jornadas de Atualição em Informática, 2005, São
Leopoldo: RS. Anais... São Leopoldo: UNISINOS, SBC, 2005.

MEYER, Marylin; BABER, Roberta; PFAFFENBERGER, Bryan. Nosso futuro e o
computador. Porto Alegre: Bookman, 2000.

MOHLER, James L. Aprenda em 14 dias a se tornar um Webmaster. Rio de Janeiro:
Ed. Campus, 1997.

NASCIMENTO, Dinalva Melo do. Metodologia do trabalho científico. Rio de Janeiro,
2002.

OLIVEIRA, Silvio Luiz de. Tratado de Metodologia Científica. São Paulo: Pioneira, 1997.

PEREIRA, Rafael. Guia de Java na Web. Rio de Janeiro: Ciência Moderna, 2006.

ROSA, César Augusto Salabert. Internet: História, Conceitos e Serviços. São Paulo:
Érica, 1998.

TORRES, Gabriel. Redes de Computadores Curso Completo. Rio de Janeiro: Axcel
Books, 2001.

WALL, David. Usando a World Wide Web. Rio de Janeiro: Campus, 1997.

WYATT, Allen L. Sucesso com Internet. São Paulo: Érica, 1995.

								
To top