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