Um estudo sobre a conformidade dos Browsers em relação às...

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

II

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

III

ANTONIO DIÓGENES ARAGÃO MARTINS


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

IV


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

V

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.

VI

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

VII

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.

.

VIII

“A mente que se abre a uma nova idéia jamais voltará ao seu tamanho original.”

Albert Einstein

IX

SUMÁRIO ABSTRACT ................................................................................................................................................. VI

SUMÁRIO .................................................................................................................................................. IX

1. INTRODUÇÃO. ....................................................................................................................................1

2. REVISÃO BIBLIOGRÁFICA. ..................................................................................................................4

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

3. 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

4. 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

5. ANÁLISE DA CONFORMIDADE DOS BROWSERS .............................................................................. 40

5.1 Mozilla Firefox 3.6.17 ............................................................................................................. 40

X

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

6. CONCLUSÃO .................................................................................................................................... 56

REFERÊNCIAS .......................................................................................................................................... 58

MATERIAL DE ESTUDO ............................................................................................................................ 60

ANEXOS I – CÓDIGO FONTE DOS DOCUMENTOD DE TESTES ................................................................. 61

XI

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

XII

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.


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.


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-PNG-20031110 (Fonte: Pessoal, Acessado em: 24 abr. 2011)................................ 46

XIII

Figura 45 - Renderização da página no Internet Explorer 6.0 recomendação WAI-WEBCONTENT-

19990505. (Fonte: Pessoal, Acessado em: 24 abr. 2011) ....................................................................... 47




19990505. (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

XIV

LISTA DE TABELAS

Tabela 1 - Motor de renderização e seus respectivos Browsers (Fonte: Tableless, Acessado em: 25 abr. 2011) ........................................................................................................................................................10

XV

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

1

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.

2

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

3

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.

4

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

5

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;

6

• 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.

7

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

8

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.

9

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.

10

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 tornou-

se 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.

11

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

12

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.

13

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.

14

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.

15

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

16

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;

17

• 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.

18

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

19

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

20

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.

21

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.

22

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:

23

• 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.

24

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)

25

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)

26

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] [WD-

XSL11-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

27

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://qa-

dev.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-CSS2-

20080411. 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-CSS1-

20080411. 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.

28

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-CSS3-

MULTICOL-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 REC-

HTML401-19991224. Esta página utiliza HTML 4.01 Transitional e explora funcionalidade do

29

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 REC-

PNG-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 WAI-

WEBCONTENT-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)

30


XSL11-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)


HTML401-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)


XHTML11-20010531. Esta página utiliza XHTML 1.1 e explora funcionalidade básica de XML.

31

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:

32

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.

33

Figura 25 - Tela de validação do documento HTML, recomendação REC-HTML401-19991224. (Fonte: W3C, Acesso em: 16 Abr. 2011)


REC-PNG-20031110.

Figura 26 - Tela de validação do documento HTML, recomendação REC-PNG-20031110. (Fonte: W3C, Acesso em:

16 Abr. 2011)


WAI-WEBCONTENT-19990505.

Figura 27 - Tela de validação do documento HTML, recomendação WAI-WEBCONTENT-19990505. (Fonte: W3C,



REC-XSL11-20061205.

34

Figura 28 - Tela de validação do documento HTML, recomendação REC-XSL11-20061205. (Fonte: W3C, Acesso em:

20 Abr. 2011)


REC-HTML401-19991224.

Figura 29 - Tela de validação do documento HTML, recomendação REC-HTML401-19991224. (Fonte: W3C, Acesso

em: 20 Abr. 2011)


REC-XHTML11-20010531.

35

Figura 30 - Tela de validação do documento HTML, recomendação REC-XHTML11-20010531. (Fonte: W3C,



REC-XHTML-PRINT-20060920.

Figura 31 - Tela de validação do documento HTML, recomendação REC-XHTML-PRINT-20060920. (Fonte: W3C,


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-CSS3-

MULTICOL-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;

36

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.


REC-CSS2-20080411.

Figura 33 - Tela de validação do documento HTML, recomendação REC-CSS2-20080411. (Fonte: W3C, Acesso em:

22 Abr. 2011)


REC-CSS1-20080411.

37

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 CR-

CSS3-MULTICOL-20091217.

Figura 35 - Tela de validação do documento HTML, recomendação CR-CSS3-MULTICOL-20091217. (Fonte: W3C,


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

38

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.

39

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.

40

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.

41

A Figura 39 mostra como o Browser Firefox 3.6.17 renderizou à página que

atende a recomendação CR-CSS3-MULTICOL-20091217:


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)

42

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:


Figura 40 - Renderização da página no Firefox 4 e Layout do documento que atende a recomendação REC-

REC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011)

43


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:


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)

44


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




recomendação REC-CSS2-20080411 (Fonte: Pessoal, Acessado em: 24 abr. 2011)


anterior. Houve uma falha na interpretação da tag <object> impedindo a renderização total do

elemento.

45







anterior. Houve uma falha na interpretação do CSS impedindo a renderização de alguns

elementos da página.


atende a recomendação REC-PNG-20031110:

46



recomendação REC-PNG-20031110 (Fonte: Pessoal, Acessado em: 24 abr. 2011)


anterior. Houve uma falha na renderização da imagem com extensão .PGN.


atende a recomendação WAI-WEBCONTENT-19990505:

47


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.

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 REC-

XHTML-PRINT-20060920 não são renderizadas.

5.4 Microsoft Internet Explorer 8.0



48





anterior. Houve uma falha na interpretação da tag <object> impedindo a renderização do

elemento.



49


19990505. (Fonte: Pessoal, Acessado em: 24 abr. 2011)




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 REC-

XHTML-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


50


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)


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


51

Figura 49 - Renderização da página no Safari recomendação WAI-WEBCONTENT-19990505. (Fonte:

Pessoal, Acessado em: 24 abr. 2011)




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)

52

O navegador Internet Explorer 8.0 não atendeu a 40% das recomendações testadas


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


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.

53

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.

54

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.

55

Figura 56 – Gráfico com estatística de recomendações que não passaram na análise (Fonte: Pessoal,

Acessado em: 16 abr. 2011)

56

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:

57

• 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.

58

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. Disponível em: < http://www.netapplications.com/>. Acesso em: 10 abr. 2011. Sobre Validador W3C. Disponível em: < http://jigsaw.w3.org/css-validator/about.html.pt-BR#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.

59

W3C. NORMAS ONLY. Disponível em: < http://www.w3.org/TR/tr-technology-stds#tr_XML_Signature>. Acesso em: 26 jan. 2011. W3C. Web Content Accessibility Guidelines 1.0. 1999. Disponível em: <http://www.w3.org/TR/WCAG10>. Acesso em: 04 jan. 2011. 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.

60

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/WAI-WEBCONTENT> 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.

61

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 <qa-

dev.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-CSS2-

20080411.

<!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'>



</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-rule-

013.htm' type='text/html'></object></p>

</body></html>

Código fonte para o documento que atende a recomendação REC-CSS1-

20080411.

62

<!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;


}

.three {

margin-left: 5em;


}

.four {

margin-left: 25%;


}

.five {

margin-left: -10px;


}

</STYLE>

<title>Uso de CSS 1.0 em documento HTML [REC-CSS1-20080411]</title>

</head>

63

<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-CSS3-

MULTICOL-20091217.

64

<!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.

65

<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-HTML401-

19991224.

66

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<html>

<head>


<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-PNG-

20031110.

67

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<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 WAI-

WEBCONTENT-19990505.

<!DOCTYPE html SYSTEM "http://www.w3.org/Style/HTML40-plus-blink.dtd">

68

<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-XSL11-

20061205.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

69



<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-HTML401-

19991224.

70

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<html lang="en">

<head>


<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-XHTML11-

20010531.

<?xml version="1.0" encoding="UTF-8"?>

71

<!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-XHTML-

PRINT-20060920.

<?xml version="1.0" encoding="UTF-8"?>

72

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML-Print 1.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml-print10.dtd">


<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>

Um estudo sobre a conformidade dos Browsers em relação às...

Documents

Transcript of Um estudo sobre a conformidade dos Browsers em relação às...