Blog

Desenvolvimento Web com o Uso de Padrões: Tecnologias e Tendências Renata Tibiriçá dos Reis Universidade Federal de Juiz de Fora Instituto de Ciências Exatas Departamento de Ciência da Computação Bacharelado em Ciência da Computação Orientador: Prof. Tarcísio de Souza Lima Juiz de Fora, MG JLllh0 de 2007 Desenvolvimento W ors6 to view nut*ge Renata Tibiriçá dos R s: Tecnologias e Monografia submetida ao corpo docente do Departamento de Ciência da Computação do Instituto de Ciências Exatas da Universidade Federal de Juiz de Fora, como parte integrante dos requisitos necessários para a obtenção do grau de Bacharel em

Ciência da Computação. Aprovada pela banca constituída pelos seguintes professores: prof. Tarcísio de Souza Lima – orientador MSc. em Informática, PUC/RJ, 1988 vi Capítulo 1 1 1. 1. O Consórcio e a Guerra dos 1 12. Mudança de 2 1. 3. Soluções com padrões Web — . 3 1. 4. Organização da monografia 5 Capítulo 2 – Características dos Padrões Web . 6 2. 1. Definição de padrões — 5 2. 2. por que utilizar padrões 7 2. 3. Dificuldades na utilização de padrões 7 2. 4. -rabieiess vs. Web Standards. _ 8 Cap[tulo 3 – Desenvolvimento com Padrões We b apresentação e comportamento . 0 3. . 1. Design e construção… HTML semântico 123. 1. 3. XHTML. 3. 1. 4. css . PAGF 10 3. 1 . Estrutura, 11 3. 1 . 2. 13 . 13 3. 1. 4. css . . . . . . . . . 153. 1. 5. Comportamento…. 18 3. 2. Padrões Web e os navegadores . 19 Capítulo 4 – Acessibilidade na 20 4. 1. Acessibilidade na Web: o que 20 4. 2. Leis e caso Comportamento………… — diretrizes „ 21 4. 3. Componentes para a acessibilidade na Web 22 4. 4. A construção de uma Web acessível acessibilidade ….. … …. … Capítulo 5 – Estudo de Caso . 27 5. 1. Sobre o estudo de 27 5. 2. Os objetivos do desenvolvimento . 8 5. 3. Projetando o conteúdo 29 5. 4. Apresentação visual…. PAGF 3 OF 24 4. 5. Avaliando a „ 26 • 31 5. 5. 32 5. 6. Avaliação dos resultados — Capítulo 6 – Conclusão „ 37 Referências 33 . 39 Anexo A Diretrizes WCAG 1. 0 A7 Anexo g — Código-fonte da página inicial do protótipo da IJFJF…. ……… B1-37 Anexo C – Código CSS referente à página inicial do protótipo da IJFJF.. ……. C1-C8 Anexo D – Código CSS para impressão referente à página inicial do protótipo da UFJF………………………………………………………………………….

DI-DS Lista de Reduções CSS DOM DTD HTML HTTP MWI RDP SVG SMIL URL W’3C WAI wasp vmw WYSIWr’G XHTML XML cascading style Sheets Document Object Model Document Type Definitions HyperText Markup Language HyperText Transfer Protocol Internet Explorer Mobile Web Initiative Resource Description Framework Scalable Vector Graphics Synchronized Multimedia Integration Language Uniform Resource Locator World Wide Web Consortium Web Accessibility Initiative Web Standards Project World Wide Web What You See Is What You Get Extensible HyperText Markup Language Extensible Markup Language Lista de Figuras Figura 1. – Exemplo de página com e sem ss de código HTML usando padrões W3C …. 4 Figura 1. 2 – Exemplo . 4 Figura 1. 3 – Exemplo de página com alterações no arquivo CSS „ „ 5 Figura 3. 1 a – Apresentação em todas as páginas HTML…. 10 Figura 3. 1 b – Apresentação em arquivos CSS de código CSS externo………….. XHTML separados Figura 3. 2 – Exemplo 17 Figura 3. 3 – Diferentes tipos de midias para CSS • • • • • • • • … 17 Figura 4. 1 – Relacionamento dos componentes de desenvolvimento.. . implementação. ?? • • • 23 Figura 5. 1 – Atual website da UFJF.. . . ….. 23 Figura 4. 2 27 Figura 5. – Protótipo do novo portal da I_JFJF 28 Figura 5. 3 – Cabeçalho do documento -O ciclo de ……. 29 Figura 5. 4 a – Exemplo de uso de imagem no XHTML e subtítulo . …. 30 Figura 5. 4 b – Exemplo de uso do método de Image-replacement 30 Figura 5. 5 a – Exemplo de estruturação de menus 30 Figura 5. 5 b – Exemplo de código CSS para menus…. …. Figura 5. 6 – CSS externos para midias screen e print do portal através do CSS midia print PAGF s OF …. 1 Figura 5. 7 – Visualização Visualização do portal através do CSS midia …. 32 Figura 5. 8 – Exemplo de print. . chamada de scripts para biblioteca 3 Figura 5. 9 – Visualização do portal através do navegador textual .. 34 Figura 5. 10 – Exemplo de hack CSS para o atributo margin … 34 Figura 5. 11 – Visualização do portal em navegador sem suporte ? css….. Lista de Tabelas Tabela 1 . 1 – Comparativo entre website tradlcional e website de acordo com s padrões…….. 3 Tabela 3. — Suporte dos navegadores atuais aos padrões Web. Tabela 5. 1 – Comparativo de desempenho entre o website atual da UFJFe o novo portal … 36 Resumo padrões Web são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter écnico, produzidos pelo World Wide Web Consortium (W3C) e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.

Ao se falar sobre normas para a Web, tratam-se, na prática, de Linguagens Estruturais (HTML, XML e XHTML), Linguagens de apresentação (CSS e XSL), Modelos de objeto (DOM), Scripting (ECMAScript), dentre outras, e, estar em conformidade com os padrões é facilitar o acesso a usuários portadores de necessidades especiais, sejam quais las forem. Desta forma, o presente trabalho possui como objetivo principal explicar as vanta ens e razões práticas para que desenvolvedores Web est s na utilização destas estejam engajados na utilização destas normas, economizando tempo, dinheiro e proporcionando uma melhor experiência para o usuário.

Palavras-chave Padrões Web, Web Standards, W3C, Acessibilidade, Interoperabilidade. -vi- Capítulo 1 Introdução A World Wide Web foi criada no início da década de 1990, por Tim Berners-Lee, para aperfeiçoar a comunlcação no CERN (Centre European pour la Recherche Nucleaire). Berners-Lee criou o HTML HyperText Markup Language), uma linguagem de marcação baseada na bem-sucedida SGML (Standard Generalized Markup Language), para formatar os documentos que seriam distribuídos em rede e também desenvolveu protocolos de comunicação para tornar viável seu novo sistema de informações em hipertexto (BERNERS-LEE, 1999).

Como se tratavam de documentos formais, o HTML não tinha uma preocupação visual, sendo composto exclusivamente por informação. A marcação era utilizada para determinar o que significava cada elemento, sendo, por exemplo, um título de página definido entre elementos , um cabeçalho ntre elementos e números subseqüentes, um parágrafo entre e assim por diante (ANDRADE, 2005). 1 . 0 Consórcio e a Guerra dos Navegadores Em 1994, Tim Berners-Lee fundou o W3C (World Wide Web Consortium), uma organização destinada a desenvolver e padronizar tecnologlas para a construção de websites, de forma que a comunicação continuasse sendo feita de uma forma compreensível. Porém, diante do problema de falta de suporte por parte dos navegadores, os desenvolvedores foram levados a não seguir os padrões W3C e sim o adrão de renderização do navegador dominante m meados de 1995, foi

PAGF 7 OF a chamada Guerra dos Navegadores. Disposta a conquistar o mercado até então dominado pelo Netscape Navigator, a Microsoft embutiu o navegador em seu sistema operacional Windows e, a partir de então, novas versões de ambos foram lançadas a um ritmo acelerado. A inclusão de novas funcionalidades possuía maior prioridade do que a reparação de erros, acarretando a produção de navegadores instáveis, totalmente em desacordo com os padrões W3C e com enormes falhas de segurança (WIKIPEDIA, 2007).

Além disso, os navegadores começaram a criar seus próprios padrões para nterpretar o código HTML obrigando os desenvolvedores web a fazer versões separadas para cada navegador ou, mais comumente, a pnvilegiar somente um dos programas. -1- Em 1998, surgiu o Wasp (Web Standards Project)l, um movimento para difundir os chamados Web Standards, ou Padrões Web. Este grupo ajudou a terminar com a guerra dos navegadores, persuadindo a Netscape, a Microsoft e outros fabricantes a oferecer suporte preciso e completo às especificações do W3C.

Além dos fabricantes de navegadores, hoje o grupo também trabalha com os fabricantes de ferramentas de desenvolvmento, como a Macromedia, e com os proprietános desenvolvedores de websites (ZELDMAN, 2003). 1. 2 Mudança de Paradigma O desenvolvimento de um website de acordo com o método tradicional utilizado na década de 1990, segundo AWAMURA (2004), é uma extensão da midia impressa, isto é, páginas desenvolvidas para parecerem perfeitas nos navegadores principais da época.

Características comuns incluem: • Leiautes baseados em tabelas; • Camada de apresentação unida ao conteúdo; • Código inválido, inacessível e semanticamente incorreto. A partir do surgimento do Wasp e do fim da Guerra dos Navegadores, o desenvolvimento de acordo com os padrões Web e to PAGF 8 OF surgimento do WaSP e do fim da Guerra dos Navegadores, o desenvolvimento de acordo com os padrões Web se tornou mais difundido.

Ainda segundo AWAMURA (2004), “utilizar Web Standards signlfica aceitar a Web como uma ampla ferramenta acessível por um grande número de usuários e uma variedade de aparelhos”. Algumas características comuns que podem ser citadas são: • Marcação semanticamente correta; • Código válido; • Código acessível (por humanos e máquinas); • Uso de CSS (Cascading Style Sheets) para separação do conteúdo da apresentação (tabela 1 . ). Outras características e vantagens de se utilizar os padrões Web serão melhor explicadas no capítulo 2 deste trabalho.

Disponível em: http://www. webstandards. org -2- Tabela 1 . 1 – Comparativo entre website tradicional e website de acordo com os padrões Website Tradicional Extensão da Mídia Impressa Leiautes baseados em Tabelas Camada de apresentação aninhada ao conteúdo Código inválido Código inacessível Código semanticamente incorreto Website em acordo com os Padrões Web Acessível por qualquer dispositivo Leiautes baseados em CSS CSS para separação do onteudo da apresentação Código válido Código acessível (por humanos e máquinas) Marcação semanticamente correta 1. Soluções com Padrões Web Uma das principais vantagens do se utilizar os padrões Web para desenvolver um website é a facilidade de manutenção. Através de um único arqui ma estrutura pode clareza e a simplicidade da marcação HTML, contudo, sem perder a beleza no design, e, na figura 1. 3, observa-se a facilidade de variação de estilo da mesma página, feita sem alteração alguma na marcação HTML, e sim de somente alguns atributos no CSS.

Nos próximos capítulos serão abordadas todas as vantagens de se adequar um website aos padrões W3C, técnicas e exemplos práticos de utilização do mesmo. -3- Figura 1. 1 – Exemplo de visualização de uma mesma página sem CSS e com CSS Figura 1 . 2 – Clareza do código HTML ao se usar os padrões W3C Figura 1. 3 – Mesma página com pequenas alterações no arquivo 1. Organização da monografia A presente monografia está dlvidida da seguinte forma: o capítulo 2 aborda a definição, as principais características, as diversas vantagens e as posslVeis dificuldades encontradas ao e utilizar os padrões Web, além de fazer um comparativo entre os termos Tableless e Web Standards; o capitulo 3 trata formas de desenvolvimento e tecnologias para construção de websites acessíveis; o capítulo 4 descreve os conceitos, leis e diretrizes de acessibilidade, além de dicas de como tornar um website acessível; o capítulo 5 apresenta efetivamente a aplicação das técnicas descritas nos capítulos anteriores através do estudo de caso do protótipo do novo portal da Universidade Federal de Juiz de Fora; e, finalmente, o capitulo 6 conclui o presente trabalho e apresenta sugestões para trabalhos futuros. -5-