Resumo - Unemat

WEB STANDARDS : UMA ABORDAGEM PRÁTICA
(1)
(2)
Hédi Carlos Minin ; Flávio Teles Carvalho da Silva
Acadêmico do curso de Ciência da Computação – UNEMAT. Campus Universitário de Barra do
2
Bugres.– email: [email protected] ; Professor Orientador, Depto de Matemática, UNEMAT. email: [email protected]
1
Resumo: O Web site da UNEMAT – Campus de Barra do Bugres é um dos
principais meios de comunicação entre o Campus e os diversos grupos de usuários
presentes na instituição. Seu desenvolvimento realizado seguindo os Web
Standards (Padrões Web) gerou diversas vantagens para seus usuários, como
maior acessibilidade e compatibilidade. Sua estrutura em três camadas proporciona
maior flexibilidade e facilidade de desenvolvimento e manutenção.
Palavras-chave: Padrões, Web, W3C, Standards
Introdução
O uso da internet cresce a cada dia, fazendo com que mais usuários tenham
acesso aos mais variados tipos de informações. Para empresas que buscam
manter-se atualizadas ter um Web site na rede mundial de computadores é mostrar
sua empresa para o mundo e abrir portas para novas oportunidades de negócios.
O crescimento de usuários na rede e as facilidades de publicação de
conteúdo geram um espantoso crescimento de informações. Para que estas
informações sejam facilmente localizadas e absolvidas é imprescindível a utilização
de padrões em sua publicação, garantindo desta forma seu acesso por qualquer
pessoa utilizando qualquer dispositivo. Estes padrões são desenvolvidos e mantidos
pelos membros que compõem o W3C (World Wide Web Consortium), que é um
consórcio internacional formado por várias empresas.
A utilização de Web Standards é um assunto que tem ganhado destaque nos
últimos tempos, sendo amplamente discutido em sites especializados, alertando os
desenvolvedores sobre a importância e os benefícios gerados quando utilizados de
forma correta.
Metodologia
O portal bbg.unemat.br foi desenvolvido utilizando-se recomendações e
padrões estabelecidos pelo W3C. As páginas do portal foram divididas em três
camadas: lógica de negócios, conteúdo e apresentação.
A camada lógica de negócios, neste caso desenvolvida em PHP(Hypertext
Preprocessor"), é responsável pela geração do conteúdo dinâmico, geralmente com
dados proveniente de um banco de dados.
Figura 1: Camada de lógica de negócios desenvolvida em PHP
A camada de conteúdo foi desenvolvida utilizando XHTML(eXtensible
Hypertext Markup Language). O XHTML é uma linguagem de marcação de
hipertexto utilizada para estruturação do conteúdo de forma a organizar a
informação para que a mesma se torne legível. Esta camada é a mais importante,
pois é responsável pelo conteúdo do Web site.
Figura 2: Camada de conteúdo desenvolvida em XHTML
A camada de apresentação é responsável pela formatação visual dos
elementos que compõe a camada de conteúdo, é nesta camada que se define cores
e tamanho de fontes, imagens de fundo, posições dos elementos entre outros
atributos. Esta camada é construída utilizando uma linguagem de estilos
denominada CSS (Cascading Style Sheets), em português folhas de estilo em
cascata, que contém as regras de formatação de cada elemento que compõe a
página.
Figura 3: Camada de apresentação desenvolvida em CSS
Desta forma cada página do portal é composta por uma página desenvolvida
em PHP contendo a lógica de negócios, uma página XHML que contendo o
conteúdo gerado pela camada lógica e um arquivo contendo as regras CSS, como
ilustrado na figura 4. Para a camada de apresentação somente um arquivo é
necessário em todo o Web site, pois, este arquivo pode ser compartilhado entre
todas as páginas do portal, não havendo necessidade de repetição de regras para
formatação de elementos similares.
Figura 4: Camada de lógica de negócios (a), conteúdo (b) e apresentação (c) compondo a
página inicial do portal bbg.unemat.br
A utilização de tabelas para o desenvolvimento do layout é uma prática
comum, mas não recomendada. Tabelas são elementos desenvolvidos com a
finalidade de tabular dados, o seu uso na criação de layouts pode trazer diversos
problemas como prejudicar a acessibilidade da página e dificultar sua visualização
em dispositivos móveis.
O layout foi desenvolvido sem a utilização de tabelas, esta técnica é
conhecida como desenvolvimento Tableless, que visa à diminuição do uso de
tabelas e utilização correta das tags HTML para construção das páginas, permitindo
desta forma, uma maior flexibilidade na formatação da página.
Resultados
O desenvolvimento utilizando Web Standards gerou vários benefícios para o
portal:
• Portal mais acessível;
• Diminuição do código fonte, tornando o carregamento da página mais rápido;
• Possibilidade de formatação das páginas para diversos dispositivos, como
dispositivos móveis e impressoras;
• Manutenção facilitada;
• Diminuição do tráfego utilizado;
• Melhor indexação pelos mecanismos de busca.
Uma comparação entre a página inicial do portal bbg.unemat.br e o www.ufmt.br
(Tabela 1) mostra, em números, alguns benefícios obtidos ao adotar Web Standards
para o desenvolvimento do portal.
Itens comparados
Tamanho HTML
Tamanho imagens
Tamanho CSS
Tamanho Javascript
Total
Linhas de código fonte
bbg.unemat.br
16,6 KB
51 KB
24,4 KB
1,79 KB
93,79KB
286 linhas
www.ufmt.br
30,02 KB
75,6 KB
45,4 KB
122 KB
273,02KB
712 linhas
Tabela 1: Comparação entre o portal bbg.unemat.br e o www.ufmt.br
Comparando o tamanho total das páginas observa-se que o tamanho total da
página inicial do portal www.ufmt.br é 271% maior que do portal bbg.unemat.br. Uma
estatística com base em 10000 acessos mostra que a economia de banda pode
chegar a 1,75GB, mostrando que os benefícios gerados não afetam somente aos
usuários mas também a quem mantêm o Web site.
Considerações finais
A adoção de Web Standards no desenvolvimento de Web sites traz benefícios
tanto para o usuário, que terá uma página robusta em qualquer navegador, quanto
para quem desenvolve e mantém as páginas, já que o tempo de desenvolvimento e
manutenção é reduzido.e não há necessidade de se criar diversas versões da
mesma página.
Desenvolver seguindo os padrões do W3C garante que o Web site seja
acessível por qualquer pessoa, independente de suas limitações, e por diversos
dispositivos como smartphones (Telefones inteligentes). A compatibilidade com
navegadores antigos é mantida ao mesmo tempo que se mantém a compatibilidade
com tecnologias futuras.
Referências Bibliográficas
W3C. World Wide Web Consortium. About the World Wide Web Consortium,
2008. Disponível em:<http://www.w3.org/Consortium/>. Acesso em 16 de setembro
de 2008
W3C. World Wide Web Consortium. XHTML™ 1.0 The Extensible HyperText
Markup Language (Second Edition), 2002. Disponível
em:<http://www.w3.org/TR/xhtml1/> Acesso em 16 de setembro de 2008
W3C. World Wide Web Consortium. Web Standards Switch, 2008. Disponível em:
<http://www.w3.org/QA/2003/03/web-kit.html.en>. Acesso em 16 de setembro de
2008
The Web Standards Project. Frequently Asked Questions, 2008. Disponível em: <
http://www.webstandards.org/learn/faq/> Acesso em 17 de setembro de 2008
Silva, Maurício Samy. CSS para Webdesign, 2008. Disponível em:
<http://www.maujor.com> Acesso em 17 de setembro de 2008
Escobar, Igor. Tableless, o termo maldito?, 2008. Disponível em: <
http://imasters.uol.com.br/artigo/8159/webstandards/tableless_o_termo_maldito/>
Acesso em 17 de setembro de 2008