Um Estudo Sobre a Conformidade dos

FACULDADE FARIAS BRITO
CIÊNCIA DA COMPUTAÇÃO
ANTONIO DIÓGENES ARAGÃO MARTINS
Um estudo sobre a conformidade dos Browsers em relação às
recomendações W3C
Fortaleza, 2011
G369a
Gerke, Artemilce Monteiro da Silva
Aspectos jurídicos do bullying no Brasil / Artemilce Monteiro da
Silva Gerke
56 f.
Monografia (Graduação) – Faculdade Farias Brito, Fortaleza,
2011.
Orientador (a): Prof. Dr. Laécio Noronha Xavier
1. Bullying – aspectos jurídicos no Brasil
I. Xavier, Laécio Noronha (orient.) II. Faculdade Farias Brito
Graduação em Direito III. Título
CDD 371.58
II
ANTONIO DIÓGENES ARAGÃO MARTINS
Um estudo sobre a conformidade dos Browsers em relação às
recomendações W3C
Monografia apresentada para obtenção dos
créditos da disciplina Trabalho de Conclusão do
Curso da Faculdade Farias Brito, como parte das
exigências para graduação no Curso de Ciência da
Computação.
Orientador: Sérgio Araújo Yunes, Ms.
Fortaleza, 2011
III
Um estudo sobre a conformidade dos Browsers em relação às
recomendações W3C
Antonio Diógenes Aragão Martins
PARECER __________________
NOTA:
FINAL (0 – 10): _______
Data: ____/____/_________
BANCA EXAMINADORA:
___________________________________
Prof. Me. Sérgio Araújo Yunes
Orientador
___________________________________
Prof. Me. Leopoldo Soares de Melo Júnior
Examinador
__________________________________
Prof. Me. Maikol Magalhães Rodrigues
Examinador
IV
RESUMO
Padrões Web em geral são um conjunto de normas, recomendações, artigos, tutoriais e
afins de caráter técnico, produzidos pelo W3C (World Wide Web Consortium) para orientar os
fabricantes, desenvolvedores e projetistas no uso de práticas que possibilitem a criação de uma
aplicação Web de forma acessível, independentemente dos dispositivos usados ou de suas
necessidades especiais.
Desta forma, o objetivo do trabalho é avaliar o grau de conformidade dos Browsers em
relação a uma faixa de recomendações selecionadas. Para isso, será introduzida uma revisão
bibliográfica que irá explicar desde o surgimento da Internet até informações que envolvam o
desenvolvimento de documentos Web. Além disso, será criada uma metodologia de pesquisa
para avaliar os Browsers. Por meio de um estudo de caso iremos aplicar está metodologia de
pesquisa onde se pretende legitimar os dados obtidos.
Palavras-chave: padrões Web, recomendações, W3C e desenvolvimento Web.
V
ABSTRACT
Web Standards in general is a set of standards, recommendations, articles, tutorials and
related technical in nature, produced by the W3C (World Wide Web Consortium) to guide
manufacturers, developers and designers to use practices that allow the creation of an
application Web form accessible to all, regardless of devices used or their special needs.
Thus, the goal is to evaluate the degree of compliance of browsers with respect to a
selected range of recommendations. This will introduce a literature review that will explain
since the advent of the Internet to information involving the development of Web documents,
in addition, will create a research methodology to assess the browsers. Through a case study
we will apply research methodology which is intended to legitimize the data.
Keywords: Web standards, recommendations, W3C and Web development
VI
AGRADECIMENTOS
Agradeço primeiramente a Deus por estar sempre ao meu lado. A Nossa Senhora
Aparecida por ser tão maravilhosa comigo. Agradeço aos meus pais, Otávio e Lúcia pelos anos
de dedicação, empenho, apoio pela minha formação, por todo o carinho e paciência que me
destinaram.
Agradeço aos meus irmãos, com quem tive a honra de conviver e crescer, por toda a
ajuda, apoio, palavras de incentivo e reconhecimento de minha conquista.
Agradeço a minha namorada por confiar em meu trabalho, me encher de força,
incentivo e felicidade.
Agradeço aos mestres de formação acadêmica, sobretudo o meu orientador Me. Sérgio
Yunes pela confiança depositada, paciência nas reuniões e pelo conhecimento transmitido.
.
VII
“A mente que se abre a uma nova idéia jamais
voltará ao seu tamanho original.”
Albert Einstein
VIII
SUMÁRIO
ABSTRACT ................................................................................................................................................. VI
SUMÁRIO .................................................................................................................................................. IX
1.
INTRODUÇÃO. ....................................................................................................................................1
2.
REVISÃO BIBLIOGRÁFICA. ..................................................................................................................4
3.
4.
5.
2.1
Histórico das aplicações Web.....................................................................................................4
2.2
A evolução das páginas Web......................................................................................................5
2.3
Evolução dos Browsers/navegadores .........................................................................................9
2.4
Motores de Renderização ........................................................................................................ 10
2.5
Linguagem de marcação HTML .............................................................................................. 10
2.6
XML: Extensible Markup Language........................................................................................ 11
2.7
Linguagem de marcação XHTML .......................................................................................... 12
2.8
Folha de estilo - CSS ............................................................................................................... 13
2.9
W3C .......................................................................................................................................... 14
2.10
Acessibilidade ......................................................................................................................... 16
2.11
Usabilidade .............................................................................................................................. 17
2.12
Padrões Web............................................................................................................................ 18
2.13
Validador W3C ........................................................................................................................ 19
METODOLOGIA................................................................................................................................ 22
3.1
Seleção das recomendações..................................................................................................... 22
3.2
Criação de documentos Web ................................................................................................... 22
3.3
Submissão dos documentos Web aos validadores W3C .......................................................... 22
3.4
Seleção dos Browsers .............................................................................................................. 23
3.5
Conformidade dos Browsers ................................................................................................... 23
AVALIAÇÃO DOS BROWSERS ........................................................................................................... 25
4.1
Recomendações selecionadas .................................................................................................. 25
4.2
Documentos Web de teste: ...................................................................................................... 27
4.3
Submissão aos validadores ...................................................................................................... 31
4.4
Browsers Selecionados ............................................................................................................ 37
ANÁLISE DA CONFORMIDADE DOS BROWSERS .............................................................................. 40
5.1
Mozilla Firefox 3.6.17 ............................................................................................................. 40
IX
6.
5.2
Mozilla Firefox 4.0 .................................................................................................................. 42
5.3
Microsoft Internet Explorer 6.0 ............................................................................................... 44
5.4
Microsoft Internet Explorer 8.0 ............................................................................................... 47
5.5
Apple Safari 5.0....................................................................................................................... 49
5.6
Análise da Conformidade ........................................................................................................ 51
CONCLUSÃO .................................................................................................................................... 56
REFERÊNCIAS .......................................................................................................................................... 58
MATERIAL DE ESTUDO............................................................................................................................ 60
ANEXOS I – CÓDIGO FONTE DOS DOCUMENTOD DE TESTES ................................................................. 61
X
LISTA DE FIGURAS
Figura 1- Exemplo de Website no início da Internet (Fonte: pessoal, Acesso em: 12 Jan. 2011) ..............6
Figura 2 - Website TERRA em 2000 (Fonte: wayback machine, Acesso em: 02 Fev. 2011) .......................7
Figura 3 - Site de vendas eletrônicas líder no segmento. (Fonte: Submarino, Acesso em: 30 Fev. 2011) 7
Figura 4 - Site do Facebook. (Fonte: Facebook, Acesso em: 13 Fev. 2011) ...............................................8
Figura 5 - Website que utiliza imagens 3D e realidade virtual (Fonte: Nikon, Acesso em: 14 Fev. 2011) .9
Figura 6 - Estrutura de um documento HTML. (Fonte: Pessoal, Acesso em: 20 Fev. 2011) ................... 11
Figura 7 - Estrutura de um documento XML. (Fonte: Pessoal, Acesso em: 14 Abr. 2011) ..................... 12
Figura 8 - Arquivo HTML com link de versão do XHTML utilizado. (Fonte:Pessoal, Acesso em: 16 Abr.
2011) ....................................................................................................................................................... 13
Figura 9 - Estrutura de um documento CSS. (Fonte: Tableless, Acesso em: 20 Fev. 2011) .................... 14
Figura 10 - Infra-estrutura Web conforme W3C. (Fonte: W3C, Acesso em: 22 Fev. 2011) .................... 15
Figura 11 - Validador W3C para documentos HTML. (Fonte: W3C, Acesso em: 12 Abr. 2011).............. 20
Figura 13 - Gráfico de conformidade do navegador. (Fonte: NCES, Acesso em: 12 Abr. 2011) ............. 24
Figura 15 - Documento Web para validar recomendação REC-CSS1-20080411. (Fonte: Pessoal, Acesso
em: 14 Abr. 2011) .................................................................................................................................... 28
Figura 16 - Documento Web para validar recomendação CR-CSS3-MULTICOL-20091217. (Fonte:
Pessoal, Acesso em: 13 Abr. 2011).......................................................................................................... 28
Figura 18 - Documento Web para validar recomendação REC-PNG-20031110. (Fonte: Pessoal, Acesso
em: 10 Jan. 2011) .................................................................................................................................... 29
Figura 19 - Documento Web para validar recomendação WAI-WEBCONTENT-19990505. (Fonte:
Pessoal, Acesso em: 18 Apr. 2011).......................................................................................................... 29
Figura 20 - Documento Web para validar recomendação REC-XSL11-20061205. (Fonte: Pessoal, Acesso
em: 19 Apr. 2011) .................................................................................................................................... 30
Figura 21 - Documento Web para validar recomendação REC-HTML401-19991224. (Fonte: Pessoal,
Acesso em: 19 Apr. 2011)........................................................................................................................ 30
Figura 22- Documento Web para validar recomendação REC-XHTML11-20010531. (Fonte: Pessoal,
Acesso em: 20 Apr. 2011)........................................................................................................................ 31
Figura 23- Documento Web para validar recomendação REC-XHTML-PRINT-20060920. (Fonte: Pessoal,
Acesso em: 20 Apr. 2011)........................................................................................................................ 31
Figura 25 - Tela de validação do documento HTML, recomendação REC-HTML401-19991224. (Fonte:
W3C, Acesso em: 16 Abr. 2011) .............................................................................................................. 33
XI
Figura 27 - Tela de validação do documento HTML, recomendação WAI-WEBCONTENT-19990505.
(Fonte: W3C, Acesso em: 16 Abr. 2011) ................................................................................................. 33
Figura 28 - Tela de validação do documento HTML, recomendação REC-XSL11-20061205. (Fonte: W3C,
Acesso em: 20 Abr. 2011)........................................................................................................................ 34
Figura 29 - Tela de validação do documento HTML, recomendação REC-HTML401-19991224. (Fonte:
W3C, Acesso em: 20 Abr. 2011) .............................................................................................................. 34
Figura 30 - Tela de validação do documento HTML, recomendação REC-XHTML11-20010531. (Fonte:
W3C, Acesso em: 20 Abr. 2011) .............................................................................................................. 35
Figura 31 - Tela de validação do documento HTML, recomendação REC-XHTML-PRINT-20060920.
(Fonte: W3C, Acesso em: 20 Abr. 2011) ................................................................................................. 35
Figura 33 - Tela de validação do documento HTML, recomendação REC-CSS2-20080411. (Fonte: W3C,
Acesso em: 22 Abr. 2011)........................................................................................................................ 36
Figura 34 - Tela de validação do documento HTML, recomendação REC-CSS1-20080411. (Fonte: W3C,
Acesso em: 22 Abr. 2011)........................................................................................................................ 37
Figura 35 - Tela de validação do documento HTML, recomendação CR-CSS3-MULTICOL-20091217.
(Fonte: W3C, Acesso em: 22 Abr. 2011) ................................................................................................. 37
Figura 36 - Estatística de acesso à Web por Browsers. (Fonte: NetApplications, Acesso em: 01 Mar.
2011 )....................................................................................................................................................... 38
Figura 37 - Estatística de acesso por versões dos navegadores. (Fonte: NetApplications, Acesso em: 20
Mar. 2011 ) .............................................................................................................................................. 39
Figura 38 – Renderização da página no Firefox 3.6.17 e Layout do documento que atende a
recomendação REC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011) ............................... 40
Figura 39 - Renderização da página no Firefox 3.6.17 e Layout do documento que atende a
recomendação CR-CSS3-MULTICOL-20091217 (Fonte: Pessoal, Acessado em: 24 abr. 2011)............... 41
Figura 41 - Renderização da página no Firefox 4 e Layout do documento que atende a recomendação
CR-CSS3-MULTICOL-20091217 (Fonte: Pessoal, Acessado em: 24 abr. 2011)........................................ 43
Figura 42 - Renderização da página no Internet Explorer 6.0 e Layout do documento que atende a
recomendação REC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011) ............................... 44
Figura 43 - Renderização da página no Internet Explorer 6.0 e Layout do documento que atende a
recomendação REC-CSS1-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011) ............................... 45
Figura 44 - Renderização da página no Internet Explorer 6.0 e Layout do documento que atende a
recomendação REC-PNG-20031110 (Fonte: Pessoal, Acessado em: 24 abr. 2011)................................ 46
XII
Figura 45 - Renderização da página no Internet Explorer 6.0 recomendação WAI-WEBCONTENT19990505. (Fonte: Pessoal, Acessado em: 24 abr. 2011) ....................................................................... 47
Figura 46 - Renderização da página no Internet Explorer 8.0 e Layout do documento que atende a
recomendação REC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011) ............................... 48
Figura 47 - Renderização da página no Internet Explorer 8.0 recomendação WAI-WEBCONTENT19990505. (Fonte: Pessoal, Acessado em: 24 abr. 2011) ....................................................................... 49
Figura 48 - Renderização da página no Safari e Layout do documento que atende a recomendação
REC-CSS2-20080411. (Fonte: Pessoal, Acessado em: 24 abr. 2011) ....................................................... 50
Figura 49 - Renderização da página no Safari recomendação WAI-WEBCONTENT-19990505. (Fonte:
Pessoal, Acessado em: 24 abr. 2011) ...................................................................................................... 51
Figura 50 – Gráfico de conformidade do IE 6.0 (Fonte: Pessoal, Acessado em: 16 abr. 2011)............... 51
Figura 53 – Gráfico de conformidade do Firefox 4.0 (Fonte: Pessoal, Acessado em: 16 abr. 2011) ...... 53
Figura 55 – Gráfico consolidado de não conformidade dos navegadores (Fonte: Pessoal, Acessado em:
16 abr. 2011) ........................................................................................................................................... 54
Figura 56 – Gráfico com estatística de recomendações que não passaram na análise (Fonte: Pessoal,
Acessado em: 16 abr. 2011) .................................................................................................................... 55
XIII
LISTA DE TABELAS
Tabela 1 - Motor de renderização e seus respectivos Browsers (Fonte: Tableless, Acessado em: 25 abr.
2011) ........................................................................................................................................................10
XIV
LISTA DE ABREVIATURAS
ArphaNet
Advanced Research Projects Agency Network
TCP/IP
Transfer Control Protocol/Internet Protocol
W3C
World Wide Web Consortium
DARPA
Defense Advanced Research Projects Agenc
LAN
Local Area Network
PC
Personal Computer
NSF
National Science Foundation
EUA
Estados Unidos da América
IP
Internet Protocol
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
PHP
Hypertext Preprocessor
3D
Imagens em Três Dimensões
IE
Internet Explorer
GPS
Global Positioning System
XML
Extensible Markup Language
XHTML
eXtensible Hypertext Markup Language
URI
Uniform Resource Identifier
UA
User Agents
DOM
Document Object Model
CC/PP
Composite Capabilities/Preference Profiles
WWW
World Wide Web
MathML
Mathematical Markup Language
SVG
Scalable Vector Graphics
DTD
Document Type Definition
XSL
Extensible Stylesheet Language
SGML
Standard Generalized Markup Language
XV
1. INTRODUÇÃO
Desenvolvida em 1969, a ArphaNet (Advanced Research Projects Agency Network)
tinha como objetivo manter a comunicação das bases militares americanas na época da guerra
fria. Tendo sido criada para evitar colapsos na perda de comunicação entre as bases militares, a
ArphaNet foi desenvolvida com um Backbone, ou seja, um esquema de ligações centrais de um
sistema amplo tipicamente de elevado desempenho, que passava por baixo da terra, ligando as
bases sem ter um ponto central definido ou mesmo uma rota única de passagem de
informações, sendo assim, uma rede quase indestrutível. Caso alguém resolvesse cortar a
comunicação das forças americanas, atacando a sede do departamento de defesa dos Estados
Unidos - o Pentágono, com uma bomba, a comunicação da rede poderia não sofrer grandes
perdas de comunicação.
Com o fim da guerra fria, a ArphaNet já não era tão importante para se manter
sob a guarda das forças armadas dos Estados Unidos. Assim, foi permitido o acesso aos
cientistas, pesquisadores e universidades para servir como base de estudo.
Em 1970, a ArphaNet havia crescido tanto que o seu protocolo de comutação de
pacotes original, chamado de Network Control Protocol, tornou-se inadequado. O sistema de
comutação de pacotes dividia as informações em vários pacotes que eram enviados de um
computador para outro até alcançarem o seu destino. Depois de algumas pesquisas, a ArphaNet
substituiu o protocolo Network Control Protocol pelo TCP/IP (Transfer Control
Protocol/Internet Protocol) permitindo, assim, o crescimento da rede, além de facilitar a
implementação em diferentes plataformas de Hardware (CRISTINA, 2011).
Na década de 80, passou a haver um interesse grande na utilização da Internet
(redes interligadas) no mundo dos negócios motivado pelo crescimento exponencial do número
de redes, sites e do volume de tráfego. Os proprietários de empresas passaram a disponibilizar
dados referentes aos serviços de suas organizações para que os internautas tivessem
conhecimento destas informações. Assim, a possibilidade de interação entre usuários e empresa
aumentaria a exploração de novos mercados de consumo, além de novas conquistas onde as
empresas ganhariam novos nichos de exposição dos produtos e serviços.
1
Por outro lado, encontram-se clientes a procura de informações, dispostos a
estabelecerem um relacionamento direto com as empresas. Cada vez mais pessoas ganham
acesso à rede. Seja em casa, no trabalho ou nas instituições, com dispositivos de comunicação
variados (palms, celulares, TV digital, computadores pessoais, dentre outros). Desta forma as
redes compartilhadas proporcionam oportunidades de negócios e na maioria das vezes atendem
aos interesses de usuários e empresas.
Tal contexto nos leva a refletir sobre como as empresas disponibilizam essas
informações na rede. Alguns aspectos são tratados, dentre eles:
•
Desempenho computacional e expansão do acesso por meio de novas
mídias;
•
Usabilidade e acessibilidade para abrangência do público.
A maioria das companhias ainda não tem o preparo para manter uma relação
direta com os clientes virtuais, pois requer a percepção de que a Internet pode ir além dos
limites atuais. Assim, atuar em rede não significa apenas ocupar um espaço virtual com uma
página de Internet institucional. Em outras palavras, simplesmente transferir seu cartão de
visita para um endereço virtual dentro da rede.
Na tentativa de tornar o processo de construção de uma página mais amigável,
com usabilidade e acessibilidade, foram desenvolvidos protocolos e diretivas pesquisadas por
um consórcio internacional chamado W3C (World Wide Web Consortium). Essas regras
desenvolvidas, chamadas de padrões Web, têm como objetivo assegurar um crescimento a
longo prazo da Internet através do desenvolvimento pleno de suas potencialidades.
Assim, o objetivo geral deste estudo é fornecer argumentos que atendam ao
seguinte problema: qual o percentual com relação à falta de suporte dos Browsers para
tratamento de documentos que utilizam padrões W3C?
Durante o desenvolvimento da análise quantitativa, serão identificadas outras
questões relacionadas ao problema citado acima. Essa análise irá servir para que usuários e
2
desenvolvedores de uma maneira geral possam saber qual Browser tem maior grau de
conformidade com os padrões do W3C.
Este trabalho será organizado em seis capítulos que englobam desde o referencial
teórico até definições de quais navegadores melhor se adaptam as recomendações analisadas.
No segundo capítulo será descrito um breve histórico do surgimento da Internet e seus
principais conceitos, contemplando desde sua composição, linguagens e padrões que norteiam
os documentos Web. No terceiro capítulo será criada uma metodologia com o objetivo de
conduzir a pesquisa, definindo as etapas do processo. No quarto capítulo será aplicada à
metodologia desenvolvida no capítulo anterior, contemplando desde a seleção do conjunto de
recomendações até os navegadores que irão fazer parte do escopo deste trabalho. No quinto
capítulo será analisado o grau de conformidade dos navegadores quanto à renderização dos
documentos Web criado para atender as recomendações selecionadas. Por fim, o sexto capítulo
exibirá as conclusões finais do trabalho.
3
2. REVISÃO BIBLIOGRÁFICA
Este capítulo aborda uma pesquisa bibliográfica constituída de informações
relevantes para o entendimento do trabalho. Para desenvolvimento do mesmo foram realizadas
consultas às obras de autores cuja contribuição na literatura teve suma importância.
2.1 Histórico das aplicações Web
Em meados da década de 90, a única forma de comunicação a distância era por
telefone, mas existia um problema de dependência das estações de comutação para a
informação ser transmitida, ficando assim muito vulnerável a ataques durante uma guerra.
Vários estudos foram realizados e uma possível solução havia sido identificada. O projeto de
solução descrito pelo DARPA (Defense Advanced Research Projects Agenc) como uma rede
datagramas chamado de Catenet usava protocolos de roteamento dinâmico para ajustar
constantemente o fluxo de tráfego.
Em 1975, a DARPA declarou o projeto um sucesso e entregou a sua gestão a
ArphaNet com o objetivo de impulsionar a pesquisa e o desenvolvimento tecnológico com fins
estratégicos e militares.
Até o final da guerra fria apenas os militares norte americanos usavam a rede.
Pouco tempo depois, o departamento de defesa dos Estados Unidos - o Pentágono determinou a
liberação do acesso ao público para fins de pesquisa, já que não existia mais um grande
interesse em manter sigilo.
No final dos anos 80, motivada pelo desenvolvimento da tecnologia LAN (Local
Area Network) e com o surgimento dos PC (Personal Computer), a idéia da rede interligada
tornava-se totalmente viável. O NSF (National Science Foundation) tinha o ideal de
transformar os recursos de supercomputadores disponíveis para aqueles de recursos modestos.
NSF decidiu basear a sua rede em protocolos da Internet, daí surgiu a NSFNET. Para a próxima
4
década, a NSFNET seria o núcleo da Internet nos EUA (Estados Unidos da América), até sua
privatização.
As máquinas foram mapeadas para o endereço IP (Internet Protocol) estático
usando tabelas, porém, o crescimento exponencial da Internet fez desta prática inviável. Com a
finalidade de suportar tal crescimento desenvolveu-se uma técnica nomeada IPV4, isto é, um
sistema de 32 bits, cujos endereços IP são divididos em quatro octetos separados por pontos. A
disponibilidade de uso desse sistema era de 4.294.967.296 (quatro bilhões duzentos e noventa e
quatro milhões novecentos e sessenta e sete mil duzentos e noventa e seis possibilidades). Esse
número, apesar de grande, tende a ser cada vez mais limitado, uma vez que o uso de endereços
IP aumenta constantemente. Por isso, uma nova versão do IP está sendo desenvolvida e
aprimorada, chamado IPV6 com 128 bits.
Atualmente, é impossível pensar no mundo sem a Internet. Estar conectado a rede
mundial passou a ser uma necessidade de extrema importância. A Internet está presente nas
escolas, faculdades e empresas, possibilitando acesso as informações e notícias do mundo em
apenas um click.
2.2 A evolução das páginas Web
Desde o surgimento da Internet, seu principal objetivo é a publicação e troca de
informações. Esta proposta é pregada através da navegação em documentos virtuais dispostos
na rede de forma descentralizada. Conforme relatos históricos citados, a Internet priorizava
acesso à publicações científicas. Com o passar do tempo, este cenário foi mudando e hoje
percebemos que a Internet hospeda além de publicações científicas, guias, notícias, tutoriais,
imagens, vídeos, entre outros.
No final da década de 90, o conteúdo que compunha a Internet era de pouca
interação com o usuário, sem gráficos nem cores. Na maioria das páginas os elementos
comumente encontrados eram:
•
Títulos;
•
Dados para contatos;
5
•
Data de criação do Website;
•
Tabelas de conteúdos.
A Figura 1 mostra uma cópia fiel de como eram os documentos virtuais no início
da Internet. Em geral as páginas dispunham apenas de conteúdos no formato texto, sem
nenhuma interação com o usuário. As páginas eram desenvolvidas utilizando apenas HTML
(HyperText Markup Language) 1.0.
Figura 1- Exemplo de Website no início da Internet (Fonte: pessoal, Acesso em: 12 Jan. 2011)
Com o surgimento do CSS (Cascading Style Sheets) e das linguagens de
programação voltados para Web como o PHP (Hypertext Preprocessor), as páginas passaram a
exibir com mais elegância o conteúdo. Conforme análise feita no site Terra, é fácil perceber
que a forma estrutural dos documentos virtuais mudou.
Conforme Figura 2, no ano 2000 o Website Terra já dispunha de chats, enquetes,
mural de recados, contadores de acesso e imagens. Já se falava em vendas on-line, porém,
ainda não era praticado. As páginas utilizavam CSS para melhorar a aparência e PHP para
aumentar a interação com os visitantes. Além desses recursos era utilizada uma base de dados
onde as informações fornecidas pelos usuários eram armazenadas.
6
Figura 2 - Website TERRA em 2000 (Fonte: wayback machine, Acesso em: 02 Fev. 2011)
Surgia então a Era da Web 2.0, criada em 2004 para designar a segunda geração do
desenvolvimento. Embora o termo tenha uma conotação de uma nova versão para a Web, ele
não se refere à atualização nas suas especificações técnicas, mas a uma mudança na forma
como ela é encarada por usuários e desenvolvedores. Esta década foi marcada pela explosão
das redes sociais e dos sites de vendas eletrônicas.
A Figura 3 ilustra o Website Submarino que é o pioneiro no segmento de comércio
eletrônico do Brasil, criada em 1999 e hoje, líder de mercado em vendas pela Internet (FOLHA
ONLINE, 2006).
Figura 3 - Site de vendas eletrônicas líder no segmento. (Fonte: Submarino, Acesso em: 30 Fev. 2011)
Na Figura 4, ilustra o Website de relacionamento Facebook que atualmente possui
mais de 500 milhões de usuários ativos. Esses usuários interagem entre si na forma de
7
compartilhamento de informações postadas pelos mesmos. Facebook tornou-se o 7° no ranking
de tráfego de visitantes, além de ser o maior site de fotografias dos Estados Unidos. São mais
de 60 milhões de novas fotos publicadas por semana, ultrapassando, inclusive, sites voltados à
fotografia.
Figura 4 - Site do Facebook. (Fonte: Facebook, Acesso em: 13 Fev. 2011)
Com o início da Web semântica surgia a Era da Web 3.0. A Web semântica
consiste basicamente em incluir significados através de metas-marcação nas páginas da
Internet, utilizando a nova versão do HTML. A linguagem passa a dar mais suporte quando se
trata de efeitos realistas. A Web 3.0 traz uma Internet “em tempo real”, ou seja, ambientes
virtuais 3D (Imagens em Três Dimensões) como a interação entre as pessoas numa realidade
virtual.
Conforme Figura 5 abaixo, o Website visualiza a interação feita na forma de
imagens 3D e de aplicações que realizam operações para simular a realidade.
8
Figura 5 - Website que utiliza imagens 3D e realidade virtual (Fonte: Nikon, Acesso em: 14 Fev. 2011)
2.3 Evolução dos Browsers/navegadores
Para que os usuários pudessem interagir com as informações contidas na rede, era
necessário utilizar um Software que habilitasse essa função. Esses programas foram
denominados de Browsers ou navegadores. Os primeiros navegadores ofereciam apenas
informações no formato texto de maneira estática. Com o aperfeiçoamento das linguagens de
desenvolvimento Web e com o aumento dos usuários utilizando a rede em busca de mais
informações, os Browsers foram obrigados a melhorar seu desempenho possibilitando que os
usuários pudessem utilizar todos os recursos disponíveis na Internet de forma simples e mais
interativa.
Surgia em 1995 um período chamado guerra dos Browsers, na qual grandes empresas
lutavam pelo mercado dessas aplicações. A empresa Netscape que, em 1994, era a única
empresa a atuar na área perdeu a sua liderança absoluta no mercado de Softwares dessa
categoria para a concorrente Microsoft, produtora do Software de mesma função chamado
Internet Explorer. Depois desse marco, vários outros navegadores surgiram com diversificadas
funções.
9
2.4 Motores de Renderização
Cada Browser utiliza um motor de renderização que é responsável pelo
processamento do código da página Web.
Abaixo, na Tabela 1, segue uma lista dos principais Browsers e seus motores de
renderizações:
Motor de Renderização
Navegadores
Webkit
Safari, Google Chrome
Gecko
Firefox, Camino
Trident
Internet Explorer 4.0 ao 9.0
Presto
Opera 7.0 ao 10.0
Tabela 1 - Motor de renderização e seus respectivos Browsers (Fonte: Tableless, Acessado em: 25 abr. 2011)
Os desenvolvedores Web devem produzir seus códigos focando atingir uma maior
conformidade com os motores de renderizações dos navegadores.
2.5 Linguagem de marcação HTML
Criado pelo físico Tim Berners-Lee em 1989, o HTML é uma linguagem de
marcação utilizada para produzir páginas na Web. A primeira especificação do HTML tornouse pública em 1991 e chamava-se originalmente de HTML 1.0. Após esse lançamento em 1995,
surge o HTML 2.0, onde já se falava em tratamento de padrão para aplicações futuras.
Conforme exposto abaixo na Figura 6, o HTML tem uma estrutura inicial padrão.
Essa estrutura padrão foi criada para facilitar o desenvolvimento de documentos na linguagem.
Além disso, as páginas em HTML são arquivos de texto bem simples, que podem ser criados e
alterados em qualquer editor de textos, como o Bloco de Notas do Windows, ou o TextEdit, do
Macintosh.
10
Figura 6 - Estrutura de um documento HTML. (Fonte: Pessoal, Acesso em: 20 Fev. 2011)
O HTML apresenta elementos de marcação que estão descritos entre parênteses
angulares. Esses elementos são os comandos de formatação da linguagem necessários para
definir a marcação de onde começa e termina o texto.
O HTML tem sido desenvolvido para que todos os equipamentos de comunicação
Web fossem capazes de usar informação virtuais, computadores com monitores de diversas
resoluções e vários números de cores, equipamentos para saída e entrada de voz, dispositivos
com alta e baixa freqüência, celulares, GPS (Global Positioning System), dentre outros.
Lançada no início de 2008, o HTML 5.0 prevê algumas mudanças quanto à sintaxe
da linguagem em relações as outras tecnologias como: XML (Extensible Markup Language) e
Javascript. Pela primeira vez o HTML e XHTML (eXtensible Hypertext Markup Language)
serão desenvolvidos e especificados em paralelo.
2.6 XML: Extensible Markup Language
XML é um tipo de documento utilizado no desenvolvimento de aplicações Web
com o propósito principal de facilitar o compartilhamento de informações através da Internet.
Conforme é mencionado pela W3C (World Wide Web Consortium):
“Extensible Markup Language (XML) é
um simples formato de texto muito flexível derivado do SGML
(Standard Generalized Markup Language) - ISO 8879. Originalmente
concebido para responder aos desafios das grandes publicações
11
eletrônicas, XML, também desempenha um papel cada vez mais
importante na troca de uma ampla variedade de dados na Web e em
outros lugares.” (Fonte: <http://www.w3.org/XML/>)
Abaixo segue na Figura 7, a estrutura de um documento simples desenvolvido em
XML:
Figura 7 - Estrutura de um documento XML. (Fonte: Pessoal, Acesso em: 14 Abr. 2011)
Não é difícil perceber que temos uma linguagem bastante semelhante ao HTML, os
dados são expostos dentro de Tags. As Tags do documento XML são criadas de forma
independente. O desenvolvedor cria seu próprio padrão, tornando a flexibilidade a mais
importante vantagem do seu uso.
2.7 Linguagem de marcação XHTML
XHTML é uma reformulação do HTML, baseada em dados pré-processados. Tipos
de documentos da família XHTML são criados para trabalhar em conjunto com arquivos XML.
O objetivo da utilização do XHTML é a melhora na padronização da exibição de
páginas Web em diversos dispositivos, melhoria na acessibilidade, velocidade nas respostas e
no desenvolvimento de aplicações.
12
Documentos HTML que não estão na versão 5.0, exibem um link no seu cabeçalho
informando qual XHTML está sendo utilizado e qual documento de conformidade DTD será
designado para orientar o arquivo.
A Figura 8 mostra a declaração do XHTML 1.0 Transitional e o link do DTD
exemplificando o procedimento:
Figura 8 - Arquivo HTML com link de versão do XHTML utilizado. (Fonte:Pessoal, Acesso em: 16 Abr. 2011)
2.8 Folha de estilo - CSS
Visto a dificuldade do HTML para controlar a aparência dos documentos Web, em
1994, Håkon Wium Lie desenvolveu o CSS, solução dada para ajudar na formatação de
informações nos documentos Web.
Em 1995, foi lançada a recomendação oficial pelo W3C do CSS 1.0. Embora a
especificação do CSS tenha sido lançada em 1995, os Browsers levaram mais três anos para ter
suporte completo ao recurso.
Conforme mostra a Figura 9, o CSS define características visuais para um
documento HTML.
13
Figura 9 - Estrutura de um documento CSS. (Fonte: Tableless, Acesso em: 20 Fev. 2011)
Atualmente o CSS está na versão recém lançada 3.0, que não se restringe apenas
em facilitar o design de páginas Web, mas também formatar e diagramar qualquer aplicação.
2.9
W3C
Criado em 1994 por Tim Berners-Lee, a W3C é um consórcio internacional onde
uma equipe de especialistas trabalha junto aos usuários para desenvolver padrões Web. Esse
consórcio já publicou mais de 110 (cento e dez) padrões denominados recomendações. Suas
principais metas são: criação de padrões e diretrizes para a Web, trabalhar para que a Internet
atinja todo o seu potencial e que as tecnologias de desenvolvimento sejam compatíveis entre si
e permitam que todos os equipamentos e Softwares usados para acesso aos documentos Web
funcionem de forma homogênea.
Conforme salientado por Tim Berners-Lee,
“O valor social da Web é que ela viabiliza a comunicação humana,
o comércio e oportunidades para partilhar conhecimento. Uma das metas
básicas do W3C é tornar esses benefícios disponíveis a todas as pessoas,
independentemente do seu equipamento, Software, infra-estrutura de rede,
idioma nativo, cultura, localização geográfica ou capacidade física ou mental.”.
(W3C, Visão Geral. Pg. 01)
A Figura 10 mostra como a W3C promove a longo prazo uma tecnologia onde seja
possível manter um ambiente mais cooperativo, uma Web na qual a responsabilidade,
segurança, confiança e o sigilo sejam possíveis.
14
Conforme é exemplificado, os recursos estão divididos para atender a qualquer
cenário na Web, tentando manter uma maior independência com o dispositivo e garantindo uma
maior qualidade dos documentos. A camada de aplicação mostrada na Figura 10 esboça, de
forma hierárquica, quais tecnologias devem ser utilizadas para a criação de uma página na
Internet, assim como nas camadas de Web Móveis, Voz, Web Services, Web semântica e
privacidade/segurança.
Figura 10 - Infra-estrutura Web conforme W3C. (Fonte: W3C, Acesso em: 22 Fev. 2011)
O interesse da W3C é em apresentar uma infra-estrutura de desenvolvimento na
Web, onde seja permitida mais acessibilidade, internacionalização, independência de
equipamentos, acesso móvel e garantia de qualidade.
Em abril de 2001, o
professor da Divisão de Engenharia Eletrotécnica e de
Computadores, Yasunori Tanaka, fez um comunicado sobre a infra-estrutura montada pela
W3C sobre XML:
“A Panasonic está muito contente porque a especificação
‘Modularização de XHTML’ foi aprovada como recomendação do W3C. A
norma ‘Modularização de XHTML’ nos oferece um meio formal e sistemático
15
para subdividir e estender o XHTML. A ‘modularização’ é uma técnica muito
importante para aplicar tecnologias da rede para aplicativos digitais domésticos,
como TVs digitais ou celulares, porque às vezes existem limitações de recursos
ou características específicas desses equipamentos, e a ‘modularização’ nos
permite ter a especificação que mais se adapta a cada plataforma, de maneira
sistemática. Como uma das principais empresas de aplicativos digitais
domésticos, a Panasonic espera que a ‘Modularização de XHTML’ se torne o
fundamento para uma grande variedade de aplicações da rede.” (W3C, Fonte:
W3C)
Atualmente, a W3C mantém escritórios em diversas regiões e todas têm como
missão incentivar a adoção das recomendações ou padrões Web entre os criadores de
aplicativos. Além disso, os escritórios têm como missão encorajar a inclusão de organizações
interessadas na criação das futuras recomendações.
2.10 Acessibilidade
Conforme a Lei de Acessibilidade Brasileira (BRASIL, 2000), define-se barreiras
nas comunicações e informações qualquer entrave ou obstáculo que dificulte a expressão ou o
recebimento de mensagens por intermédio dos dispositivos, meios ou sistemas de
comunicação, sejam ou não de massa, bem como aqueles que impossibilitem o acesso à
informação.
Tomando essa lei como base, percebe-se que acessibilidade é um termo bem
abrangente, mas para nossa discussão, será tratado apenas de acessibilidade voltado para
documentos Web. Pressupõe-se, portanto, todas as funções que afetam o acesso ao conteúdo
Web, incluindo as deficiências visuais, auditivas, físicas, cognitivas e neurológicas.
A acessibilidade atende a dois pontos que a W3C tenta padronizar. Destacam-se:
•
Incapacidade de ver, ouvir ou deslocar-se;
•
Dificuldade visual para ler ou compreender informações;
•
Incapacidade para usar o teclado ou o mouse;
•
Conexão muito lenta com a Internet;
16
•
Dificuldade para falar ou compreender fluentemente a língua em que o
documento foi escrito;
•
Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante do carro no
caminho do emprego;
•
Desatualização, pelo uso de navegador com versão muito antiga, ou
navegador completamente diferente dos habituais, ou por voz ou sistema
operacional menos difundido.
Assim, a acessibilidade não se aplica apenas ao usuário portador de deficiência
física, mas também a qualquer usuário, situação ou ambiente que proporcione alguma
dificuldade para se ter acesso à Internet.
2.11 Usabilidade
Conforme definição da International Organization for Standardization, usabilidade
é a medida pela qual um produto pode ser usado para alcançar objetivos específicos com
efetividade, eficiência e satisfação, em um contexto de uso geral (ISO 9241-11). Nesta citação,
podemos entender o produto como um documento virtual disponível na Web, com o qual o
internauta interage com um objetivo.
A usabilidade pode ser vista na Web nos seguintes aspectos:
•
Navegação clara e objetiva;
•
Senso de orientação (“onde está”, “de onde veio” e “para onde vai”);
•
Localização da informação desejada;
•
Design da interface;
•
Diagramação do texto;
•
Tempo de resposta.
Compreender a usabilidade significa como o usuário de um produto irá se
comportar quando estiver usando o mesmo.
17
Para Steve Krug (2006, pg. 56), testes de desempenho são usados para descobrir se
um Website funciona de acordo com os objetivos propostos e se é fácil de utilizá-lo.
2.12 Padrões Web
A W3C oferece mais de 110 (cento e dez) especificações técnicas e orientações de
desenvolvimento, denominadas de recomendações. Conforme descrito abaixo, os padrões Web
estão espalhados em diversas partes:
•
Web design e aplicações
Normas para a criação e renderização de páginas Web, incluindo HTML 5.0,
CSS 3.0 e outras tecnologias. Gera informações sobre como tornar as
páginas acessíveis a pessoas com deficiência.
•
Arquitetura Web
Explicações de princípios que sustentam a Web, incluindo URIs e HTTP.
•
Web semântica
Fornece informações para ajudar a construir sistemas confiáveis que
possam apoiar as interações na rede. O termo Web semântica refere-se à
visão da W3C para a Internet com dados vinculados. A Web semântica
permite que as pessoas criem e armazenem dados na rede, construam
vocabulários, e escrevam regras para a manipulação de dados.
•
Tecnologia XML
Informação para auxiliar a comunidade sobre a internacionalização do
XML, por exemplo, para especificar o idioma do conteúdo XML, dentre
outras informação.
•
Web Services
18
Informações que se referem à concepção de mensagens com integrações de
sistemas e nas comunicações entre aplicações diferentes.
•
Dispositivos Web
A W3C nos fornece recomendações para permitir o acesso à Web de
qualquer lugar, usando qualquer dispositivo. Isso inclui acesso à Internet a
partir de telefones celulares e outros dispositivos móveis, bem como uso da
tecnologia Web em eletrônicos de consumo, impressoras, televisão, e até
mesmo automóveis.
•
Navegadores e ferramentas de autoria
Informações úteis ao se projetar os navegadores e ferramentas de autoria,
motores de busca, agregadores e motores de inferência.
2.13 Validador W3C
O validador W3C é um Software livre baseado em OpenSP e LIBXML2 criado para
auxiliar designers e desenvolvedores na verificação de documentos que compõem uma
informação na Web, como folhas de estilo em cascata e arquivos HTML. O validador W3C
pode ser encontrado através dos links:
•
Validador HTML - <http://validator.w3.org/#validate_by_upload>
•
Validador CSS - <http://jigsaw.w3.org/css-validator/#validate_by_uri>
Além do acesso livremente na Web, você pode fazer o download e usá-lo
independente de um servidor.
Segundo Gnome (Gnome, 2009), a validação é o processo de verificação de um
documento com um DTD (Document Type Definition). Em linhas gerais uma DTD define
todos os elementos possíveis de serem encontrados dentro de um documento Web, sua forma
de utilização e seus atributos válidos.
Essa potente ferramenta é capaz de checar se um documento Web está em
conformidade com as recomendações da W3C. O resultado que o Software fornece após a
19
validação é:
apontar erros, grafias incorretas, uso impróprio do documento, alertar para
potenciais riscos à usabilidade e acessibilidade.
A Figura 11 mostra detalhes da interface do Software:
Figura 11 - Validador W3C para documentos HTML. (Fonte: W3C, Acesso em: 12 Abr. 2011)
Abaixo segue detalhamento da interface do validador W3C para documentos
HTML:
1. Campo para postar o documento HTML que será verificado;
2. Definição do conjunto de caracteres que o documento HTML está escrito
(por padrão detecta automático);
3. Define qual a versão do HTML está escrito (por padrão detecta automático);
4. Forma como será exibido os erros descritos pelo validador;
5. Forma como vai ser tratado o erro, dicas de como pode ser resolvido;
6. Botão usado para iniciar o processo de validação.
20
A Figura 12 mostra o detalhamento da interface do validador para documentos
CSS:
Figura 12 - Validador W3C para documentos CSS. (Fonte: W3C, Acesso em: 12 Abr. 2011)
1. Campo para postar o documento CSS que será verificado;
2. Define qual a versão o CSS está escrito (por padrão CSS 2.1 Níveis);
3. Define qual mídia o documento utiliza;
4. Forma como será exibido os erros descritos pelo validador;
5. Forma como vai ser tratado o erro, dicas de como será resolvido;
6. Botão usado para iniciar o processo de validação.
21
3. METODOLOGIA
Para sistematizar o processo de avaliação da conformidade em relação às
recomendações da W3C, foi desenvolvida uma metodologia, cujas etapas estão descritas a
seguir.
3.1
Seleção das recomendações
Essa etapa prevê a identificação e seleção de um subconjunto do rol de
recomendações da W3C. Esse subconjunto comporá as recomendações para quais os Browsers
terão sua conformidade analisada.
Esse trabalho concentrará sua análise nas recomendações ligadas ao processo de
renderização das páginas nos Browsers e de funcionalidades ligadas aos mesmos.
3.2
Criação de documentos Web
Essa etapa consiste na criação de documentos Web que utilizará o subconjunto de
recomendações selecionadas na etapa anterior. As páginas deverão ser criadas de modo a
estarem em total conformidade com os padrões W3C. Cada página irá contemplar uma
recomendação do subconjunto selecionado.
Após a criação dos documentos Web, esses serão apresentados por meio de uma
navegação, destacando o contexto geral do conteúdo e a arquitetura encontrada.
3.3
Submissão dos documentos Web aos validadores W3C
O objetivo desta fase é averiguar se as páginas criadas na etapa 3.2 estão em
conformidade com as recomendações da W3C.
Abaixo a lista dos validadores que serão utilizados:
22
•
Validador de CSS: responsável por verificar se a aplicação das folhas de
estilo corresponde às orientações da W3C.
•
Validador de HTML: responsável por verificar a qualidade do código
HTML quanto à aplicação dos padrões.
É esperado que após a confirmação dos validadores da W3C sob os documentos
Web todos os Browsers deverão renderizar de forma unificada o conteúdo apresentado na
página sem que haja alterações na exibição da mesma.
Das recomendações da W3C serão escolhidos 10 (dez) delas que foram utilizados
para a construção dos documentos Web e que de alguma forma são visíveis para o usuário. Os
padrões escolhidos serão enumeradas e comentadas.
3.4
Seleção dos Browsers
Essa etapa consiste na seleção de um grupo de navegadores que terão o seu grau de
conformidade avaliado em relação ao subconjunto de recomendações W3C selecionadas na
etapa 3.1. A seleção dos Browsers levará em consideração o nível de utilização desses entre os
usuários e o seu potencial futuro.
Para cada navegador escolhido será avaliada as duas versões mais utilizadas, exceto
para o navegador selecionado pelo seu potencial futuro, esse irá ser estudado apenas pela sua
versão mais nova.
3.5
Conformidade dos Browsers
Tendo em vista que as recomendações W3C a serem mensuradas junto aos
Browsers estão relacionadas ao processo de renderização e de funcionamento, a avaliação do
grau de conformidade será realizada de modo visual e os resultados serão apresentados no
formato percentual. Além da avaliação deverá ser descrito as possíveis melhorias entre as
versões dos Browsers estudadas.
23
A versão dos navegadores escolhidos que não apresentarem nenhuma anomalia ao
renderizar os documentos Web terão seu valor de conformidade de 100%. Os demais resultados
irão atender a um cálculo simples de regra de três.
Para cada versão dos navegadores analisados, será gerado um gráfico de
conformidade, como mostra a Figura 13.
Figura 13 - Gráfico de conformidade do navegador. (Fonte: NCES, Acesso em: 12 Abr. 2011)
24
4. AVALIAÇÃO DOS BROWSERS
4.1
Recomendações selecionadas
Após a análise das recomendações e consulta realizada direto a W3C, foi detectado
que existem vários padrões Web relacionados ao processo de renderização dos Browsers e de
funcionalidades que depende da sua interpretação. Com isso foram selecionados 10 (dez)
destes devido o seu uso comum no desenvolvimento dos Websites, conforme segue lista abaixo
(W3C, 2011):
1 Uso de CSS 2.1 em documento HTML [REC-CSS2-20080411]
Recomendação que regulamenta a utilização de CSS 2.1 para permitir separar o
estilo visual do Website do conteúdo. Tal fator é fundamental quando se cria o
design e a estruturação de um documento. Quando utilizado de maneira correta,
as manutenções das páginas tornam-se mais simples, além disso, facilita a
criação de estilos visuais múltiplos. (W3C, 2008)
2 Uso de CSS 1.0 em documento HTML [REC-CSS1-20080411]
Recomendação que regulamenta a utilização de CSS 1.0. Este documento
encontra-se definido mecanismos que permitem aos autores e leitores anexar
estilos (fontes, cores e espaçamento) aos documentos HTML. (W3C, 2008)
3 CSS Multi-column Layout Module [CR-CSS3-MULTICOL-20091217]
Recomendação que descreve layouts de várias colunas em CSS. Usando a
funcionalidade descrita na especificação, o conteúdo pode ser colocado em
várias colunas com uma diferença e uma regra entre eles. (W3C, 2009)
4 HTML 4.01 Transitional Iframe [REC-HTML401-19991224]
Esta especificação define o HTML 4.01, que é uma subversão do HTML 4.0.
Além do texto, multimídia e hiperlink, característicos das versões anteriores do
HTML, a nova versão suporta mais opções multimídia, linguagens de scripts,
folhas de estilo, impressão de melhores instalações e documentos que são mais
acessíveis aos usuários portadores de deficiência. (W3C, 1999)
25
5 Portable Network Graphies [REC-PNG-20031110]
Recomendação que regulamenta o tratamento dos navegadores quanto a
utilização de imagens .PNG em relação a cores indexadas, tons de cinza, canal
alfa, cromaticidade, profundidade de bits, grau de opacidade, dentre outros.
(W3C, 2003)
6 Arquivo DTD HTML40-plus-blink [WAI-WEBCONTENT-19990505]
Recomendação que fornece diretrizes para projetar agentes que reduzem as
barreiras de acessibilidade para pessoas com deficiências (visuais, auditivas,
físicas, cognitivas e neurológicas). (W3C, 2002)
7 XLS 1.1 (Extensible Stylesheet Language) [REC-XSL11-20061205] [WDXSL11-REQ-20031217]
Esta especificação define os recursos e a sintaxe para a XSL, uma linguagem
para expressar estilo. Uma folha de estilo XSL especifica a apresentação de uma
classe de documentos XML, descrevendo como uma instância da classe é
transformada em um documento XML que usa o vocabulário de formatação.
(W3C, 2006)
8 Uso de JavaScripts em HTML 4.01 [REC-HTML401-19991224]
Recomendação que define o suporte e o comportamento de um código
JavaScript ao ser carregado pelo cliente. (W3C, 1999)
9 Uso do XHTML 1.1 [REC-XHTML11-20010531]
Recomendação que define um novo tipo de documento XHTML que é baseado
na modularização. O objetivo deste documento é fornecer uma maior
consistência no desenvolvimento com códigos mais limpos e segregação de
funcionalidade do HTML 4.0. (W3C, 2001)
10 Uso do XHTML Print [REC-XHTML-PRINT-20060920]
Recomendação que define o uso apropriado do XHTML-Print para impressão de
documentos Web. Em geral essa recomendação é utilizada quando temos um
26
ambientes de impressão onde não é viável ou desejável a instalação dos drivers.
(W3C, 2006)
4.2
Documentos Web de teste:
Conforme metodologia definida no capítulo anterior, foram desenvolvidos
documentos Web que atendem a cada uma das recomendações selecionadas como segue
abaixo. Os parâmetros para a criação das páginas foram retirados do portal W3C, < http://qadev.w3.org/wmvs/HEAD/dev/tests/> e < http://test.csswg.org/harness/>.
Cada recomendação é composta de diversos itens, onde cada um representa uma
funcionalidade específica. Para a nossa base de teste foi selecionado um item de cada
recomendação. A escolha se deu por 2 (dois) motivos, importância na renderização ou por uso
fundamental no desenvolvimento de um Website.
A Figura 14 mostra o documento criado para atender a recomendação REC-CSS220080411. Esta página utiliza codificações básicas de CSS 2.0 como cor de fonte e de papel
parede. O conteúdo é exposto dentro de uma tag <object> para validar a hierarquia do arquivo
CSS.
Figura 14 – Documento Web para validar recomendação REC-CSS2-20080411. (Fonte: Pessoal, Acessado
em: 12 abr. 2011)
A Figura 15 mostra o documento criado para atender a recomendação REC-CSS120080411. Esta página utiliza uma codificação para folhas de estilos na versão 1.0 contendo
especificações referentes a cores e margens. O documento deve ser renderizado conforme a
Figura 15.
27
Figura 15 - Documento Web para validar recomendação REC-CSS1-20080411. (Fonte: Pessoal, Acesso em:
14 Abr. 2011)
A Figura 16 mostra um documento criado para atender a recomendação CR-CSS3MULTICOL-20091217. Esta página utiliza uma folha de estilo na versão 3.0 contendo
codificação para apresentação de multi-colunas com formas geométricas e cores de fundo.
Figura 16 - Documento Web para validar recomendação CR-CSS3-MULTICOL-20091217. (Fonte: Pessoal,
Acesso em: 13 Abr. 2011)
A Figura 17 mostrar um documento criado para atender a recomendação RECHTML401-19991224. Esta página utiliza HTML 4.01 Transitional e explora funcionalidade do
28
IFRAMES, que em linhas gerais é uma tag que tem como função a inserção de páginas Web
dentro da página.
Figura 17 - Documento Web para validar recomendação REC-HTML401-19991224. (Fonte: Pessoal, Acesso
em: 13 Abr. 2011)
A Figura 18 mostra um documento criado para atender a recomendação RECPNG-20031110. Esta página utiliza uma imagem com a extensão .PGN em um documento
XHTML 1.0 Transitional.
Figura 18 - Documento Web para validar recomendação REC-PNG-20031110. (Fonte: Pessoal, Acesso em:
10 Jan. 2011)
A Figura 19 mostra um documento criado para atender a recomendação WAIWEBCONTENT-19990505. Esta página utiliza um DTD especial que executa uma biblioteca
JavaScript onde é definido várias particularidades relacionadas a acessibilidade na Web. O
documento utiliza uma tag <blink> que irá forçar o conteúdo a ficar em estado de alerta
(piscando).
Figura 19 - Documento Web para validar recomendação WAI-WEBCONTENT-19990505. (Fonte: Pessoal,
Acesso em: 18 Apr. 2011)
29
A Figura 20 mostra um documento criado para atender a recomendação RECXSL11-20061205. Esta página utiliza uma lista XLS 1.1 para exemplificar uma fonte de caráter
gráfico.
Figura 20 - Documento Web para validar recomendação REC-XSL11-20061205. (Fonte: Pessoal, Acesso
em: 19 Apr. 2011)
A Figura 21 mostra um documento criado para atender a recomendação RECHTML401-19991224. Onde a página usa HTML 4.01 Transitional e explora a utilização de um
evento básico de JavaScript. Esta funcionalidade consiste em mostrar uma tela de aviso
contendo uma cadeia de caracteres, sempre que o usuário clicar no botão.
Figura 21 - Documento Web para validar recomendação REC-HTML401-19991224. (Fonte: Pessoal, Acesso
em: 19 Apr. 2011)
A Figura 22 mostra um documento criado para atender a recomendação RECXHTML11-20010531. Esta página utiliza XHTML 1.1 e explora funcionalidade básica de XML.
30
Figura 22- Documento Web para validar recomendação REC-XHTML11-20010531. (Fonte: Pessoal, Acesso
em: 20 Apr. 2011)
A Figura 23 mostra como deve ser impresso o documento que foi criado utilizando
a recomendação REC-XHTML-PRINT-20060920. Esta página é baseada em XHTML Basic e
explora funcionalidades de impressões de páginas Web.
Figura 23- Documento Web para validar recomendação REC-XHTML-PRINT-20060920. (Fonte: Pessoal,
Acesso em: 20 Apr. 2011)
No Anexo I encontram-se todos os códigos fontes referentes aos documentos
criados para a análise.
4.3
Submissão aos validadores
A avaliação dos documentos Web desenvolvidos no item anterior serão analisados
de acordo com a linguagem utilizada:
•
Os documentos Web que não utilizam folhas de estilos serão avaliados pelo
Validador HTML <http://www.validator.w3.org/>.
•
Os documentos Web que utilizam folhas de estilos serão avaliados pelo
Validador CSS <http://jigsaw.w3.org/css-validator/>
1º- Documentos avaliados por um Validador HTML:
31
Conforme mostra a Figura 24, o procedimento utilizado para validação dos
documentos HTML segue descrito abaixo:
•
No campo address foi colocado a URL do documento Web;
•
No campo Character Encoding foi escolhido à opção automático;
•
No campo Document Type foi escolhido à opção automático;
•
Foi escolhida a opção de exibição de erros em forma de lista seqüenciais;
•
Todas as demais opções foram marcadas.
Figura 24 - Tela do Validador HTML preparado para a execução. (Fonte: W3C, Acesso em: 14 Abr. 2011)
Os resultados obtidos na validação dos documentos que utilizam HTML E XHTML
seguem abaixo.
A Figura 25 mostra a validação de um documento que atende a recomendação
REC-HTML401-19991224.
32
Figura 25 - Tela de validação do documento HTML, recomendação REC-HTML401-19991224. (Fonte: W3C, Acesso
em: 16 Abr. 2011)
A Figura 26 mostra a validação de um documento que atende a recomendação
REC-PNG-20031110.
Figura 26 - Tela de validação do documento HTML, recomendação REC-PNG-20031110. (Fonte: W3C, Acesso em:
16 Abr. 2011)
A Figura 27 mostra a validação de um documento que atende a recomendação
WAI-WEBCONTENT-19990505.
Figura 27 - Tela de validação do documento HTML, recomendação WAI-WEBCONTENT-19990505. (Fonte: W3C,
Acesso em: 16 Abr. 2011)
A Figura 28 mostra a validação de um documento que atende a recomendação
REC-XSL11-20061205.
33
Figura 28 - Tela de validação do documento HTML, recomendação REC-XSL11-20061205. (Fonte: W3C, Acesso em:
20 Abr. 2011)
A Figura 29 mostra a validação de um documento que atende a recomendação
REC-HTML401-19991224.
Figura 29 - Tela de validação do documento HTML, recomendação REC-HTML401-19991224. (Fonte: W3C, Acesso
em: 20 Abr. 2011)
A Figura 30 mostra a validação de um documento que atende a recomendação
REC-XHTML11-20010531.
34
Figura 30 - Tela de validação do documento HTML, recomendação REC-XHTML11-20010531. (Fonte: W3C,
Acesso em: 20 Abr. 2011)
A Figura 31 mostra a validação de um documento que atende a recomendação
REC-XHTML-PRINT-20060920.
Figura 31 - Tela de validação do documento HTML, recomendação REC-XHTML-PRINT-20060920. (Fonte: W3C,
Acesso em: 20 Abr. 2011)
2º- Documentos avaliados por um Validador CSS:
Conforme mostra a Figura 32, os procedimentos utilizados para validação dos
documentos CSS seguem descritos abaixo:
•
No campo address foi colocado a URL do documento Web;
•
No campo profile foi escolhido à opção No special profile, exceto para a
validação do documento que atende a recomendação CR-CSS3MULTICOL-20110412. Neste caso selecione a opção CSS level 3;
•
No campo medium foi escolhido à opção all;
•
No campo warnings foi escolhido à opção nornal report;
•
No campo vendor extensions foi escolhido à opção default;
35
Figura 32 - Tela do Validador CSS preparado para a execução. (Fonte: W3C, Acesso em: 16 Abr. 2011)
Os resultados obtidos na validação dos documentos que utilizam CSS seguem
abaixo.
A Figura 33 mostra a validação de um documento que atende a recomendação
REC-CSS2-20080411.
Figura 33 - Tela de validação do documento HTML, recomendação REC-CSS2-20080411. (Fonte: W3C, Acesso em:
22 Abr. 2011)
A Figura 34 mostra a validação de um documento que atende a recomendação
REC-CSS1-20080411.
36
Figura 34 - Tela de validação do documento HTML, recomendação REC-CSS1-20080411. (Fonte: W3C, Acesso em:
22 Abr. 2011)
A Figura 35 mostra a validação de um documento que atende a recomendação CRCSS3-MULTICOL-20091217.
Figura 35 - Tela de validação do documento HTML, recomendação CR-CSS3-MULTICOL-20091217. (Fonte: W3C,
Acesso em: 22 Abr. 2011)
Conforme é mostrado acima, todas as páginas estão em conformidade com os
padrões W3C. Conclui-se então, que os documentos testados estão aptos a serem visualizados
pelos navegadores de forma que não haja alterações no layout e nem nas funcionalidades.
4.4
Browsers Selecionados
A empresa de medição online NetApplications divulga todo mês estatísticas sobre a
divisão do mercado em relação aos Browsers. Segundo a mesma, a metodologia adotada para
coleta dos dados sobre a utilização dos navegadores está baseada em parcerias com grandes
empresas de tecnologia da Internet e em mais de 40.000 (quarenta mil) sites agregados a
companhia desde 2005, estabelecendo uma fonte autorizada de informações sobre os
37
computadores pessoais, dispositivos móveis, consoles, portáteis e servidores. (NetApplications,
2011)
A estatística apresentada na Figura 36 nos fornece um cenário onde estão
considerados todos os Browsers independentes das suas versões.
Figura 36 - Estatística de acesso à Web por Browsers. (Fonte: NetApplications, Acesso em: 01 Mar. 2011 )
A liderança do mercado ainda continua sendo dominada pelo Internet Explorer da
Microsoft, porém esse cenário está sendo modificado. O Firefox seguido de outros fortes
concorrentes continuam captando usuários do Internet Explorer. Conforme a NetApplications,
em janeiro de 2011, o browser do Google ultrapassou a marca de 10% do mercado mundial.
O Browser da Microsoft teve sua participação reduzida de 69,2% para 56%, sendo
a pior marca do Internet Explorer desde 2003. Já o Firefox ganhou mercado em 2009, mas
perdeu em 2010. Sua fatia atual, sendo de 21,8%, é similar ao percentual que tinha dois anos
atrás.
Firefox 4.0 e Internet Explorer 9.0 dividem as mesmas atrações, pois usam o
processador gráfico do computador para acelerar a exibição de páginas. A Microsoft declarou
que o Software Internet Explorer está se esforçando para melhorar a compatibilidade com
padrões emergentes da Web, como HTML5 e CSS3.
Ainda seguindo a NetApplications, o uso das versões dos navegadores está dividido
conforme mostra a Figura 37.
38
Figura 37 - Estatística de acesso por versões dos navegadores. (Fonte: NetApplications, Acesso em: 20 Mar.
2011 )
A versão do Internet Explore 6.0 tendo sido o navegador mais popular da Internet,
ainda continua sendo utilizado por uma parcela de usuários, deixando Browsers como o
Chrome 10.0, lançamento da gigante Google, para trás.
Embora não apareça na estatística da NetApplications , o navegador do fabricante
Apple, Safari é uma grande aposta de liderança futura, pois é incluído como o navegador
padrão nos produtos Apple, como Iphone, que vem ganhando a liderança no mercado de
smartphones (aparelho celulares de última geração que possui funcionalidades avançadas como
uso de sistema operacional, conectividade com a Internet, aplicativos diversos, dentre outros)
(MACMAGAZINE, 2008).
Após análise dos gráficos apresentados nas Figuras 36 e 37 e considerando os
critérios estabelecidos na metodologia, foram selecionados os seguintes navegadores para a
verificação da conformidade em relação os padrões W3C :
•
Internet Explorer nas versões
o Microsoft Internet Explorer 8.0 lançado em março de 2009;
o Microsoft Internet Explorer 6.0 lançado em agosto de 2001.
•
Firefox nas versões
o Mozilla Firefox 4.0 lançado em março de 2011;
o Mozilla Firefox 3.6.17 lançado em março de 2011.
•
Apple Safari na versão
o Apple Safari 5.0 lançado em junho de 2010.
39
5. ANÁLISE DA CONFORMIDADE DOS BROWSERS
Este capítulo descreve o resultado da avaliação da conformidade dos navegadores
escolhidos, em relação aos padrões W3C. Serão comentados somente os casos em que não
houve conformidade com as recomendações estudadas.
5.1
Mozilla Firefox 3.6.17
A Figura 38 mostra como o Browser Firefox 3.6.17 renderizou à página que
atende a recomendação REC-CSS2-20080411:
Como deveria ser renderizado
Figura 38 – Renderização da página no Firefox 3.6.17 e Layout do documento que atende a recomendação
REC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011)
Note que o documento acima difere-se do Layout da Figura 14 definida no
capítulo anterior. Houve uma falha na interpretação da folha de estilo quanto à cor da fonte e
do papel de parede.
40
A Figura 39 mostra como o Browser Firefox 3.6.17 renderizou à página que
atende a recomendação CR-CSS3-MULTICOL-20091217:
Como deveria ser renderizado
Figura 39 - Renderização da página no Firefox 3.6.17 e Layout do documento que atende a recomendação
CR-CSS3-MULTICOL-20091217 (Fonte: Pessoal, Acessado em: 24 abr. 2011)
41
Note que o documento acima se difere do Layout da Figura 16 definida no capítulo
anterior. Houve uma falha na interpretação da folha de estilo quanto ao item gráfico da 4º
coluna.
5.2
Mozilla Firefox 4.0
A Figura 40 mostra como o Browser Firefox 4.0 renderizou à página que atende a
recomendação REC-CSS2-20080411:
Como deveria ser renderizado
Figura 40 - Renderização da página no Firefox 4 e Layout do documento que atende a recomendação RECREC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011)
42
Note que o documento acima se difere do Layout da Figura 14 definida no capítulo
anterior. Houve uma falha na interpretação da folha de estilo quanto à cor da fonte e do papel
de parede.
A Figura 41 mostra como o Browser Firefox 4.0 renderizou à página que atende a
recomendação CR-CSS3-MULTICOL-20091217:
Como deveria ser renderizado
Figura 41 - Renderização da página no Firefox 4 e Layout do documento que atende a recomendação CRCSS3-MULTICOL-20091217 (Fonte: Pessoal, Acessado em: 24 abr. 2011)
43
Note que o documento acima se difere do Layout da Figura 16 definida no capítulo
anterior. Houve uma falha na interpretação da folha de estilo quanto ao item gráfico da 4º
coluna.
Perceba que a nova versão do Firefox ainda apresenta as mesmas falhas na
interpretação do CSS.
5.3
Microsoft Internet Explorer 6.0
A Figura 42 mostra como o Browser Internet Explorer 6.0 renderizou à página que
atende a recomendação REC-CSS2-20080411:
Como deveria ser renderizado
Figura 42 - Renderização da página no Internet Explorer 6.0 e Layout do documento que atende a
recomendação REC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011)
Note que o documento acima se difere do Layout da Figura 14 definida no capítulo
anterior. Houve uma falha na interpretação da tag <object> impedindo a renderização total do
elemento.
44
A Figura 43 mostra como o Browser Internet Explorer 6.0 renderizou à página que
atende a recomendação REC-CSS1-20080411:
Como deveria ser renderizado
Figura 43 - Renderização da página no Internet Explorer 6.0 e Layout do documento que atende a
recomendação REC-CSS1-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011)
Note que o documento acima se difere do Layout da Figura 15 definida no capítulo
anterior. Houve uma falha na interpretação do CSS impedindo a renderização de alguns
elementos da página.
A Figura 44 mostra como o Browser Internet Explorer 6.0 renderizou à página que
atende a recomendação REC-PNG-20031110:
45
Como deveria ser renderizado
Figura 44 - Renderização da página no Internet Explorer 6.0 e Layout do documento que atende a
recomendação REC-PNG-20031110 (Fonte: Pessoal, Acessado em: 24 abr. 2011)
Note que o documento acima se difere do Layout da Figura 18 definida no capítulo
anterior. Houve uma falha na renderização da imagem com extensão .PGN.
A Figura 45 mostra como o Browser Internet Explorer 6.0 renderizou à página que
atende a recomendação WAI-WEBCONTENT-19990505:
46
Figura 45 - Renderização da página no Internet Explorer 6.0 recomendação WAI-WEBCONTENT19990505. (Fonte: Pessoal, Acessado em: 24 abr. 2011)
O documento acima não desempenhou a funcionalidade definida para atender a
recomendação WAI-WEBCONTENT-19990505. Houve uma falha na interpretação do script de
acessibilidade do DTD utilizado na página, ocasionando a perda total da funcionalidade.
O Internet Explorer 6.0 não da suporte a documentos com a extensão .XHTML,
portanto as páginas criadas para atender as recomendações REC-XHTML11-20010531 e RECXHTML-PRINT-20060920 não são renderizadas.
5.4
Microsoft Internet Explorer 8.0
A Figura 46 mostra como o Browser Internet Explorer 8.0 renderizou à página que
atende a recomendação REC-CSS2-20080411:
47
Como deveria ser renderizado
Figura 46 - Renderização da página no Internet Explorer 8.0 e Layout do documento que atende a
recomendação REC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011)
Note que o documento acima se difere do Layout da Figura 14 definida no capítulo
anterior. Houve uma falha na interpretação da tag <object> impedindo a renderização do
elemento.
A Figura 47 mostra como o Browser Internet Explorer 8.0 renderizou à página que
atende a recomendação WAI-WEBCONTENT-19990505:
48
Figura 47 - Renderização da página no Internet Explorer 8.0 recomendação WAI-WEBCONTENT19990505. (Fonte: Pessoal, Acessado em: 24 abr. 2011)
O documento acima não desempenhou a funcionalidade definida para atender a
recomendação WAI-WEBCONTENT-19990505. Houve uma falha na interpretação do script de
acessibilidade do DTD utilizado na página, ocasionando a perda total da funcionalidade.
O Internet Explorer 8.0 não da suporte a documentos com a extensão .XHTML,
portanto as páginas criadas para atender as recomendações REC-XHTML11-20010531 e RECXHTML-PRINT-20060920 não são renderizadas.
Note que houve uma melhoria quanto a renderização de imagens .PNG e na
interpretação de margens impostas pelo CSS, porém, a versão 8.0 continuou a apresentar falhas
em bibliotecas gráficas e em páginas com extensão .XHTML.
5.5
Apple Safari 5.0
A Figura 48 mostra como o Browser Apple Safari 5.0 renderizou à página que
atende a recomendação REC-CSS2-20080411:
49
Como deveria ser renderizado
Figura 48 - Renderização da página no Safari e Layout do documento que atende a recomendação RECCSS2-20080411. (Fonte: Pessoal, Acessado em: 24 abr. 2011)
Note que o documento acima se difere do Layout da Figura 14 definida no capítulo
anterior. Houve uma falha na interpretação da folha de estilo quanto à cor de fundo e a cor da
fonte.
A Figura 49 mostra como o Browser Apple Safari 5.0 renderizou a página que
atende a recomendação WAI-WEBCONTENT-19990505:
50
Figura 49 - Renderização da página no Safari recomendação WAI-WEBCONTENT-19990505. (Fonte:
Pessoal, Acessado em: 24 abr. 2011)
O documento acima não desempenhou a funcionalidade definida para atender a
recomendação WAI-WEBCONTENT-19990505. Houve uma falha na interpretação do script de
acessibilidade do DTD utilizado na página, ocasionando a perda total da funcionalidade.
5.6
Análise da Conformidade
Conforme os resultados obtidos na renderização dos documentos nos navegadores
escolhidos, seguem gráficos dos dados numéricos:
O navegador Internet Explorer 6.0 não atendeu a 60% das recomendações testadas
conforme é mostrado abaixo.
Figura 50 – Gráfico de conformidade do IE 6.0 (Fonte: Pessoal, Acessado em: 16 abr. 2011)
51
O navegador Internet Explorer 8.0 não atendeu a 40% das recomendações testadas
conforme é mostrado abaixo.
Figura 51 – Gráfico de conformidade do IE 8.0 (Fonte: Pessoal, Acessado em: 16 abr. 2011)
O navegador Firefox 3.6.17 não atendeu a 20% das recomendações testadas
conforme é mostrado abaixo.
Figura 52 – Gráfico de conformidade do Firefox 3.6.17 (Fonte: Pessoal, Acessado em: 16 abr. 2011)
O navegador Firefox 4.0 não atendeu a 20% das recomendações testadas conforme
é mostrado abaixo.
52
Figura 53 – Gráfico de conformidade do Firefox 4.0 (Fonte: Pessoal, Acessado em: 16 abr. 2011)
O navegador Safari 5.0 não atendeu a 20% das recomendações testadas conforme é
mostrado abaixo.
Figura 54 – Gráfico de conformidade do Safari 5.0 (Fonte: Pessoal, Acessado em: 16 abr. 2011)
O gráfico abaixo mostra de forma consolidada a não conformidade dos
navegadores em relação às 10 (dez) recomendações selecionadas para a análise. Perceba que o
Internet Explorer 6.0 foi o que menos atendeu aos padrões Web seguido do Internet Explorer
8.0. O Firefox 3.6.17, Firefox 4.0 e o Safari 5.0 tiveram um desempenho semelhante, deixando
de atender a 20% das recomendações estudadas.
53
Figura 55 – Gráfico consolidado de não conformidade dos navegadores (Fonte: Pessoal, Acessado em: 16
abr. 2011)
O gráfico abaixo mostra qual a estatística das recomendações que não
desempenharam uma boa renderização no processamento dos navegadores. A recomendação
REC-CSS2-20080411 foi incompatível com todos os navegadores analisados, esse padrão
aborda conceitos de CSS 2.0 em documentos HTML. Recomendações que tratam de
acessibilidade com é o caso da, WAI-WEBCONTENT-19990505, também deixaram muito a
desejar.
54
Figura 56 – Gráfico com estatística de recomendações que não passaram na análise (Fonte: Pessoal,
Acessado em: 16 abr. 2011)
55
6. CONCLUSÃO
Este estudo procurou apresentar e discutir problemas relacionados à conformidade
dos navegadores com o uso de recomendações desenvolvidas pela W3C. O pretende-se
assinalar é que mesmo com a validação do código e com a confirmação da utilização correta
dos padrões expedidos pela W3C, não garante que seu documento Web irá ser apresentado de
forma correta.
A importância fundamental para preocupar-se com este tipo de cenário é que a
Internet vem conquistando cada vez mais o mundo das intermediações financeiras, tornando-se
um passo de estratégia para as empresas. Segundo relatos da Internet World Stats, uma
empresa de estatísticas demográficas virtuais, informa que o crescimento na utilização da rede
aumentou 480,4% de 2000 para 2011 (Internet World Stats, 2011). Atualmente é reconhecida
como uma plataforma de serviços e gestão da informação, e não mais como um repositório
para publicação de conteúdo.
Diversas diretivas apresentadas neste estudo apontam para técnicas recomendadas
para promover uma unificação na interpretação dos navegadores. Muitas delas possuem até
mesmo caráter “doutrinário”, e reforçam sempre, a utilização de padrões para expor seus
documentos.
O estudo ficou limitado a uma faixa de recomendações que estavam relacionados
ao processo de renderização dos Browsers e de funcionalidades que dependiam da
interpretação dos mesmos, no entanto, foram identificados que existem navegadores que não
estão prontos para atender as recomendações da W3C (Ver Capítulo 6). Observa-se também
que os fabricantes tentaram ajustar conformidades que não haviam sido atendidos nas versões
anteriores.
Como trabalhos futuros sugerem-se:
56
•
Aumentar o conjunto de recomendações utilizadas, para prover uma
pesquisa mais ampla;
•
Utilização de mais Browsers para a análise, visando uma maior área de
estudo.
•
Aplicar a metodologia para dispositivos móveis.
57
REFERÊNCIAS
BRASIL. Decreto n. 5.296 de 2 de Dezembro de 2004. Regulamenta as Leis nos 10.048, de 8
de novembro de 2000, que dá prioridade de atendimento às pessoas que especifica, e 10.098,
de 19 de dezembro de 2000, que estabelece normas gerais e critérios básicos para a promoção
da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida, e dá
outras providências. Brasília, 2 de Dezembro de 2004. Disponível em
<http://www.planalto.gov.br/ccivil/_Ato2004-2006/2004/Decreto/D5296.htm>Acesso em 22
jan. 2011.
BRASIL. Lei n. 10.098, de 19 de Dezembro de 2000. Estabelece normas gerais e critérios
básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com
mobilidade reduzida, e dá outras providências. Brasília, 19 de Dezembro de 2000. Disponível
em <http://www.planalto.gov.br/ccivil_03/Leis/L10098.htm> Acesso em 22 jan. 2011.
CRISTINA, Kellen Bogo: A História da Internet - Como Tudo Começou. Disponível em: <
http://kplus.cosmo.com.br/materia.asp?co=11&rv=Vivencia >. Acesso em: 08 jan. 2011.
FOLHA ONLINE, Fusão de Submarino e Americanas.com cria empresa de R$ 8 bi.
Disponível em: < http://www1.folha.uol.com.br/folha/dinheiro/ult91u112608.shtml>. Acesso
em: 08 jan. 2011.
GNOME. The XML C parser and toolkit of Gnome libxml. Disponível em <
http://xmlsoft.org/index.html> Acesso em 09 jan. 2011.
ISO (1997). ISO 9241-11: Ergonomic requirements for office work with visual display
terminals (VDTs). Part 11 — Guidelines for specifying and measuring usability. Gènève:
International Organisation for Standardisation.
KRUG, Steve. Não Me Faça Pensar. Rio de Janeiro: Alta Books, 2006.
MACMAGAZINE.
Uso
do
iPhone
pelo
mundo.
Disponível
em:
<http://macmagazine.com.br/2008/02/04/uso-do-iphone-pelo-mundo/ >. Acesso em: 21 abr.
2011.
NetApplications.
Empresa
de
medição
on-line.
http://www.netapplications.com/>. Acesso em: 10 abr. 2011.
Disponível
em:
<
Sobre Validador W3C. Disponível em: < http://jigsaw.w3.org/css-validator/about.html.ptBR#who >. Acesso em: 12 abr. 2011.
TABLELESS. Disponível em: < http://tableless.com.br >. Acesso em: 25 abr. 2011.
W3C. Cascanding Style Sheets. 1999. Disponível em: <http://www.w3.org/Style/CSS/>.
Acesso em: 03 jan. 2011.
58
W3C. NORMAS ONLY. Disponível em: <
stds#tr_XML_Signature>. Acesso em: 26 jan. 2011.
http://www.w3.org/TR/tr-technology-
W3C. Web Content Accessibility Guidelines 1.0.
<http://www.w3.org/TR/WCAG10>. Acesso em: 04 jan. 2011.
1999.
Disponível
em:
W3C. Web Accessibility Initiative. Disponível em: <http://www.w3.org/WAI/>. Acesso em:
08 jan. 2011.
W3C. Extensible Markup Language (XML). Disponível em: <http://www.w3.org/XML/>.
Acesso em: 14 abr. 2011.
59
MATERIAL DE ESTUDO
AURÉLIO. Dicionário Aurélio. Disponível em: < http://www.dicionariodoaurelio.com>.
Acesso em: 20 jan. 2011.
BARROS, Adil Jesus da Silveira e LEHFELD, Neide Aparecida. Fundamentos de
Metodologia Científica: um guia para a iniciação científica. São Paulo: Makron Books, 2008.
CHISHOLM, Wendy; VANDERHEIDEN, Gregg; JACOBS, Ian. Web Content Accessibility
Guidelines 1.0. 5 Maio de 1999. Disponível em <http://www.w3.org/TR/WAIWEBCONTENT> Acesso em 10 jan. 2011.
DA SILVA. Acessibilidade Brasil. Avaliador de Acessibilidade para Websites. Disponível em
<http://www.dasilva.org.br> Acesso em 10 jan. 2011.
LAKATOS, Eva Maria e MARCONI, Marina de Andrade. Metodologia do Trabalho
Científico: procedimentos básicos; pesquisa bibliográfica, projeto e relatório; publicações e
trabalhos científicos. São Paulo: Atlas, 2001.
NIELSEN, Jakob; LORANGER, Hoa. Prioritizing Web usability. New Riders, 2006.
W3C. XHTML1.0 The Extensible HyperText Markup Language. 2002. Disponível em
<http://www.w3.org/TR/2002/REC-xhtml1-20020801>. Acesso em: 08 jan. 2011.
PHP: Hypertext Preprocessor. 2001. Disponível em < http://br.php.net/>. Acesso em: 16 abr.
2011.
60
ANEXOS I – CÓDIGO FONTE DOS DOCUMENTOD DE TESTES
Arquivos desenvolvidos com base na carga de testes da W3C.
Disponível em: <www.w3.org/Style/CSS/Test/> e <qadev.w3.org/wmvs/HEAD/dev/tests/>, a versão aqui documenta foi editada.
Código fonte para o documento que atende a recomendação REC-CSS220080411.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Utilização de CSS 2.1 [REC-CSS2-20110607]</title>
<style type='text/css'>
<!-a.report {
display: none;
}
-->
</style>
<link href='/harness/stylesheets/base.css' type='text/css' rel='stylesheet'>
<link href='/harness/stylesheets/testcase.css' type='text/css' rel='stylesheet'>
<link href='/harness/stylesheets/test_webkit.css' type='text/css' rel='stylesheet'>
</head>
<body>
<p><object data='http://test.csswg.org/suites/css2.1/nightly-unstable/html4/at-rule013.htm' type='text/html'></object></p>
</body></html>
Código fonte para o documento que atende a recomendação REC-CSS120080411.
61
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<STYLE type="text/css">
.zero {
background-color: silver;
margin-left: 0;
}
.one {
margin-left: 0.5in;
background-color: aqua;
}
.two {
margin-left: 25px;
background-color: aqua;
}
.three {
margin-left: 5em;
background-color: aqua;
}
.four {
margin-left: 25%;
background-color: aqua;
}
.five {
margin-left: -10px;
background-color: aqua;
}
</STYLE>
<title>Uso de CSS 1.0 em documento HTML [REC-CSS1-20080411]</title>
</head>
62
<body>
<table border="border" cellspacing="0" cellpadding="3" class="tabletest">
<tr>
<td colspan="2" bgcolor="silver"></td>
</tr>
<tr>
<td bgcolor="silver"> </td>
<td><p class="zero">Este elemento tem uma margem zero.</p>
<p class="one"> Esta frase deve ter uma margem esquerda de meia polegada.
</p>
<p class="two">Esta frase deve ter uma margem esquerda de 25 pixels.</p>
<p class="three"> Esta frase deve ter uma margem esquerda de 5 em. </p>
<p class="four"> Esta frase deve ter uma margem esquerda de 25%, que é
calculado com relação à largura do elemento pai. </p>
<ul class="two" style="background-color: gray;">
<li>A margem esquerda desta lista desordenada está definida com 25 pixels
de margem, e sua cor de fundo é cinza.</li>
<li class="two" style="background-color: white;">Este item da lista tem a sua
margem esquerda também definido como 25 pixels, o que deve combinar com a margem da
lista para fazer 50 pixels da margem, e sua cor de fundo foi definido como branco. </li>
<li>A margem esquerda desta lista desordenada está definida com 25 pixels
de margem, e sua cor de fundo é cinza. </li>
</ul>
<p class="zero">Este elemento tem uma classe de zero. </p>
<p class="five"> Este parágrafo tem uma margem esquerda de -10px, o que
deve fazer com que seja mais amplo do que poderia ser, e tem um fundo azul claro. Em todos
os outros aspectos, no entanto, o elemento deve ser normal.</p></td>
</tr>
</table>
</body></html>
Código fonte para o documento que atende a recomendação CR-CSS3MULTICOL-20091217.
63
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Multi-column Layout Module [CR-CSS3-MULTICOL-20110412]</title>
<style type="text/css">
div {
font: 50px/50px Ahem;
margin: 10px 0;
color: black;
background: black;
width: 410px;
}
div.multicol {
columns: 2;
column-gap: 10px;
column-rule: 10px ridge lime;
}
div.ref span {
border-left: 10px ridge lime;
}
div.multico2 {
columns: 2;
column-gap: 10px;
column-rule: 10px dotted lime;
}
div.ref2 span {border-left: 10px dotted lime;}
</style>
</head>
<body>
As duas barras horizontais abaixo devem ser idênticos. Coluna cúbica.
64
<div class="multicol">0<br>
0</div>
<div class="ref">0123<span>0123</span></div>
<br><br>
As duas barras horizontais abaixo devem ser idênticos. Coluna pontilhada.
<div class="multico2">0<br>
0</div>
<div class="ref2">0123<span>0123</span></div>
</body>
</html>
Código fonte para o documento que atende a recomendação REC-HTML40119991224.
65
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML 4.01 Transitional Iframe [REC-HTML401-19991224]</title>
</head>
<body>
<p> Este é um teste documento HTML 4.01 Transitional que está utilizando a
funcionalidade IFRAME</p>
<iframe src="http://validator.w3.org/" width="40%" height="80" align="right">
<p>Inclui um outro documento teste em um iframe.
Note que o iframe está disponível apenas em doctypes Transitório, para tipos de
documentos estritamente
prefiro usar elementos do objeto.</p>
</iframe>
</body>
</html>
Código fonte para o documento que atende a recomendação REC-PNG20031110.
66
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portable Network Graphies [REC-PNG-20031110]</title>
</head>
<body>
<img src="http://mindtechnology.com.br/tcc/image/logoMonografia.png" alt="Monografia"
width="207" height="150" />
</body>
</html>
Código fonte para o documento que atende a recomendação WAIWEBCONTENT-19990505.
<!DOCTYPE html SYSTEM "http://www.w3.org/Style/HTML40-plus-blink.dtd">
67
<html>
<head>
<title>Arquivo DTD HTML40-plus-blink [WAI-WEBCONTENT]</title>
</head>
<body lang="en">
<p>Este
documento
é
um
subconjunto
dos
<a
href="http://www.w3.org/Style/">Estilos W3C</a>.
Usa
o
<a
href="http://www.w3.org/Style/customdtd">Custom
DTD</a>
permitindo que a frase abaixo fique piscar.
<blink>Frase deve piscar de um em um segundo...Custom DTD</blink>.
</p>
<p>Este comportamento é válido para essa DTD particular.</p>
</body>
</html>
Código fonte para o documento que atende a recomendação REC-XSL1120061205.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
68
<!-- saved from url=(0043)http://www.w3.org/Press/1998/XSL-WD.html.ja -->
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<title>Press Release: W3C Issues First Public Working Draft of XSL 1.0</title>
<link
rel="stylesheet"
type="text/css"
media="screen,
print"
href="./REC-XSL11-
20061205_files/press-ja.css">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1
align="left">
<acronym
lang="en"
title="eXtensible
Style
Language">XSL</acronym> のワーキングドラフト公開について </h1>
<h2
align="left">
<span
lang="en">Web</span>
開発者のツールキットを拡張する新しいスタイルシート </h2>
</body>
</html>
Código fonte para o documento que atende a recomendação REC-HTML40119991224.
69
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Uso de JavaScripts em HTML 4.01 [REC-HTML401-19991224]</title>
</head>
<body>
<button dir="rtl" onclick="alert('‫םואניבה תוליעפ‬, W3C'); return false;">Click
Aqui</button>
</body>
</html>
Código fonte para o documento que atende a recomendação REC-XHTML1120010531.
<?xml version="1.0" encoding="UTF-8"?>
70
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Uso do XHTML 1.1 [REC-XHTML11-20010531]</title>
</head>
<body>
<p>Este é um documeto XHTML + XML do tipo MIME.</p>
</body>
</html>
Código fonte para o documento que atende a recomendação REC-XHTMLPRINT-20060920.
<?xml version="1.0" encoding="UTF-8"?>
71
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML-Print
1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-print10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Uso do XHTML Print [REC-XHTML-PRINT-20101123]</title>
</head>
<body>
<div class="TestPurpose">Teste para documento Web utilizando XHTML
Print.<br />
Deve ser impresso todo o conteúdo da página. Até mesmo os dados que estão
dentro o elemento object</div>
<div><img
src="http://validator.w3.org/images/w3c.png"
alt="Monografia"
width="100" height="100" />
<object
type="example/unknown"
width="100"
height="100"
data="unknown:example.unknown">
Dados impressos no formato XHTML Print
</object>
</div>
</body>
</html>
72