TECNOLOGIA DE IMPLEMENTAÇÃO DE INTERFACES WEB WEB INTERFACES IMPLEMENTATION TECHNOLOGY

Transcrição

1 TECNOLOGIA DE IMPLEMENTAÇÃO DE INTERFACES WEB WEB INTERFACES IMPLEMENTATION TECHNOLOGY Claudia Regina Batista, M.Eng. 1 Doutoranda no Programa de Pós Graduação em Engenharia e Gestão do Conhecimento - UFSC Universidade do Sul de Santa Catarina UNISUL, SC Vania Ribas Ulbricht, Dra 2 Programa de Pós Graduação em Engenharia e Gestão do Conhecimento UFSC Programa de Pós- Graduação em Design de Hipermídia Universidade Anhembi/Morumbi, SC Resumo Este artigo apresenta um panorama sobre as tecnologias para implementação dos documentos digitais para web, evidenciando os Padrões Web como um meio de propiciar amplos benefícios ao maior número possível de usuários da Web. Palavras-chave: Interface Web, Estilo de Layout, Padrões Web. Abstract This paper presents a view about the technologies for web page implementation. It shows that the Web Standars is a way to propitiate wide benefits to the biggest number of web users. Key Words: Web Interface, Layout style, Web Standars. 1 claudiabatista@gmail.com, design@unisul.br 2 ulbricht@floripa.com.br

2 2 1. Introdução No início dos anos de 1990, a Internet ainda era uma rede universitária utilizada, principalmente, para a comunicação e a troca de arquivos. Dois fatores impulsionaram o desenvolvimento e o sucesso da Internet, transformando-a numa mídia de massa de proporções globais: o primeiro, foi o desenvolvimento da World Wide Web, em 1989 e dos primeiros browsers gráficos, em 1994; o segundo, a eliminação de barreiras para a atividade comercial, em Atualmente, estima-se que mais de 300 mil novas páginas web aparecem a cada sete dias. A Internet não é uma simplesmente uma nova mídia de massas: é a primeira que envolve computadores e utiliza dados digitalizados. (MEYER et al., 2000) A World Wide Web ou simplesmente web, é o segundo serviço da Internet na preferência dos usuários de computadores, ficando somente atrás do correio eletrônico. A Web é: um serviço que envolve o uso de um cliente (o browser) e um servidor web, que traz documentos solicitados por navegadores (p. 326) [...] um sistema hipermídia permite que os usuários obtenham recursos multimídia (imagens estáticas, animações, vídeos, sons) mais o hipertexto (palavras vinculadas a outros documentos). (MEYER et al., 2000, p. 315) De acordo com Nielsen (2000, p. 188): [...] a web é um sistema navegacional: a interação básica do usuário é clicar em links de hipertexto para circular por um enorme espaço informacional com centenas de milhões de páginas. Como o espaço é tão vasto, a navegação é difícil e torna-se necessário dar aos usuários suporte navegacional. Em outros veículos eletrônicos de massa, a relação emissor-receptor é unilateral. Na web é diferente: a relação emissor-receptor é outra. O receptor não fica passivo, ele pode montar seu espectro de informações de acordo com seus interesses dentro da rede, acessando os infinitos assuntos disponíveis. (PRIOSTE, 2003, p. 94) 2. Interfaces Web Na web, a interação do usuário ocorre através da interface 3 gráfica. Conforme Bonsiepe, a interface tem a função de permitir ao usuário obter uma visão panorâmica do conteúdo, navegar na massa de dados sem perder a orientação e, por fim, mover-se no espaço informacional de acordo com seus interesses. (BONSIEPE, 1997, p. 59) Para Radfahrer: A interface é uma das partes mais importantes de um web site, pois concentra a relação visitante-sistema. É o que apresenta informações e estímulos e recebe respostas, colocando a manipulação nas mãos do usuário. Por isso, muito mais que um visual bonitinho, deve ser o elemento de transição entre o mundo real e o digital. O ideal é que ela seja transparente, invisível, natural, sintética, intuitiva, prática. (p. 106) [...] Convencionou-se chamar de páginas os documentos de hipertexto armazenados na WWW. Eles não são exatamente páginas, pois têm dimensões e características muito diferentes de seus equivalentes em papel. Mas também não são telas, uma vez que seu conteúdo pode facilmente ultrapassar as dimensões de uma tela. Talvez o certo fosse documento web ou elemento de hipertexto. Como esses termos são específicos, usa-se a idéia de página web ou página digital. (RADFAHRER, 2000, p. 75) Os primeiros documentos que compunham os sites disponibilizados na World Wide Web não tinham os recursos e a tecnologia utilizada atualmente. Eram documentos em HTML 3 Interface é um meio através do qual as pessoas e o computador se comunicam. (IBM (1987, p. 7)

3 3 constituidos apenas de cabeçalhos, parágrafos que seguiam ao longo do documento e hiperlinks (hotwords) que permitiam a navegação, ou seja, saltar para um determinado lugar do mesmo documento ou para outro documento/página. O aspecto visual desses documentos carecia de elementos gráficos que motivassem o desejo no usuário em permanecer naquele site. A Web começou a despertar o interesse dos designers gráficos que não apreciavam o estilo visual dos web sites, então estes vislumbraram uma nova área de atuação: planejamento visual dos documentos digitais. Os designers buscavam soluções que possibilitassem realizar composições gráficas e diagramação dos conteúdos sobre o documento digital de forma análoga aos projetos gráficos para mídia impressa (por exemplo: jornal, revista, folder, entre outros). Um web site é um meio de comunicação, por isso deve apresentar a informação organizada em áreas visualmente estruturadas visando facilitar a percepção do usuário em distinguir cada grupo de informação. No projeto gráfico, o designer define uma diagramação que permita distribuir a informação de modo a guiar/direcionar a atenção do usuário/leitor para os conteúdos mais importantes da página. As soluções para compor blocos de informação visualmente distinguíveis, podem ser obtidas através de áreas vazias para separar os blocos de textos das imagens; ou ainda, usar linhas de contorno e/ou cores de fundo para formar áreas que separam os diversos blocos. O designer também precisa criar mecanismos que permitam aos usuários navegarem facilmente de uma página para outra em função do que querem ler. No ano de 1995, as tabelas do HTML (elemento <table>) começaram a ser utilizadas como estruturas na diagramação do documento. Com esta técnica tornou-se possível dirigir o olhar do usuário para os conteúdos mais relevantes e criaram mecanismos de navegação que, naquela época, eram mais eficazes. Entretanto, inserir tabelas no documento apenas para posicionar os conteúdos significa explorar o HTML além dos seus limites, pois as tabelas não foram concebidas para essa finalidade, mas para apresentar dados em forma tabular. Para assegurar que o documento digital será visualizado pelo usuário tal qual foi idealizado, utilizam-se alguns artifícios e práticas errôneas que geram maus resultados em alguns browsers. 2.1 O paradigma do Layout Fixo versus Layout Líquido Atualmente, na Web é muito comum encontrar páginas com layout fixo ou congelado. Atribui-se a denominação fixo ou congelado, porque os elementos (textos, imagens, menus, entre outros) se mantém na mesma posição, mesmo que a página seja redimensionada. Grande parte dos desenvolvedores fixa a largura da página em 800 pixels, para evitar a indesejada rolagem na horizontal. Essa largura foi estabelecida porque até poucos anos atrás, a maioria dos usuários adotava a resolução 800x600 pixels. (TIDWELL, 2005; CEDERHOLM, 2005) Entretanto, com a evolução da tecnologia e a consolidação da convergência 4 entre a computação e telecomunicações, tem-se a disposição diferentes dispositivos para acesso a internet e vários formatos de telas e resoluções, tal como ilustra a Figura 1. Hoje, há usuários que optam por telas pequenas (menores que 640x480 pixels) e outros que preferem grandes formatos como 1024x768 pixels ou até 1280x1024 pixels. 4 O principal intuito da convergência tecnológica é fornecer ao usuário acesso a suas informações e aplicações em qualquer lugar, de qualquer rede, por qualquer canal de comunicação, através de uma interface homem máquina coerente (única), com qualidade adequada e de forma transparente. Ou seja, tudo que a sociedade de informação atual necessita. (SERRA et al., 2007)

4 4 Figura 1 Tamanho de telas e variações de resolução Segundo Nielsen e Loranger (2006, p. 226): Atualmente, aproximadamente 60% de todos os monitores estão ajustados em 1024x768 pixels. Em comparação, aproximadamente 17% usam 800x600 pixels. Assim, obviamente, a importância em visar a perfeição para estes usuários de pequenas telas, é menor. Entretanto, igualmente óbvio, é o fato que não se pode simplesmente ignorar 17% dos usuários, fornecendo um layout fixo que requer mais espaço de tela do que ele tem disponível. Nielsen e Loranger (2006) e Tidwell (2005), alertam que um site com layout fixo pode ser cortado pela janela do browser ou, inversamente, grande quantidade de espaço vazio é desperdiçado, tal como pode ser observado nos sites apresentados nas Figuras 2 a 4. Largura: 1280 pixels Largura: 800 pixels Largura: 400 pixels Figura 2 Site do CNN.com - layout fixo com largura de 1024 pixels Fonte: CNN (2007). Largura: 1280 pixels Largura: 800 pixels Largura: 620 pixels Figura 3 Site da H. Stern - layout fixo em 800x600 pixels Fonte: Hstern (2007).

5 5 Largura: 1280 pixels Largura: 800 pixels Largura: 640 pixels Figura 4 Site da Natura - layout fixo em 800x600 pixels Fonte: Natura (2007). Tidwell (2005) e Cederholm (2005) apontam o layout líquido como uma solução que promove a adaptação da diagramação à janela do browser que está sendo usado pelo visitante de um site. Layout líquido, também conhecido como fluído ou elástico, é aquele cuja implementação adota unidades de medida relativas no lugar de absolutas para determinar o espaço dos elementos em uma página web. Os sites apresentados nas Figuras 5 e 6 possuem layout líquido; observa-se que o conteúdo expande ou contrai, preenchendo a janela do usuário. Largura: 1280 pixels Largura: 600 pixels Largura: 300 pixels Figura 5 Layout líquido do site Web Standards Project Fonte: Webstandards (2007). Largura: 1280 pixels Largura: 800 pixels Largura: 530 pixels Figura 6 Layout líquido do site CSS Zen Garden Fonte: Csszengarden (2007).

6 6 O Quadro 1 apresenta os alguns pontos positivos e negativos de ambos os tipos de layout: Quadro 1 - Pontos positivos e negativos referentes aos layouts fixo e líquido. Tipo de Layout Pontos positivos Pontos negativos Fixo/Congelado O projetista tem controle sobre a forma como a informação é apresentada; As linhas de texto têm uma largura fixa e curta, facilitando a leitura de texto na tela; Em tela de grande resolução, o web site fica alinhado a um dos lados ou centralizado na página, com muito espaço disponível à sua volta; Menor acessibilidade, uma vez que o layout não se adapta às necessidades do usuário; Líquido/Fluído/Elástico Fonte: Adaptado de Tidwell (2005). Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução da tela do usuário; Os conteúdos ocupam toda a área visível da tela, permitindo transmitir mais informação; Deixa de haver espaço vazio à volta do web site; Maior dificuldade na leitura de linhas de texto demasiado longas; Perde-se o controle sobre o posicionamento de alguns elementos na página; 3. Padrões Web O W3C (World Wide Web Consortium) e outros grupos e organismos reguladores, estabeleceram tecnologias para criação e interpretação de conteúdo para a Web. Estas tecnologias, denominadas Padrões Web (Web Standards) são cuidadosamente concebidas para dar amplos benefícios ao maior número possível de usuários da Web. (WEBSTANDARDS, 2007) Segundo Meyer (2002): "Web standards têm o objetivo de ser uma base comum [...] um fundamento para a World Wide Web, para que navegadores e outros programas compreendam o mesmo vocabulário básico". De acordo com o W3C, os Padrões Web foram projetados para: proporcionar as maiores vantagens para a maior parte dos usuários da Web; garantir a viabilidade a longo prazo de qualquer documento Web; simplificar o código e reduzir o custo no desenvolvimento; proporcionar web sites acessíveis a uma gama maior de pessoas e um número maior de dispositivos/aparelhos/ferramentas de Internet; garantir seu correto funcionamento à medida que os navegadores evoluem, e novos produtos surgem no mercado. Para web designers e desenvolvedores, os Padrões Web implicam na utilização de padrões no escopo estrutural, da apresentação, do objeto, das linguagens de programação e das boas práticas (código válido, semântico e acessível) para o benefício dos usuários, clientes e dos próprios desenvolvedores. (WEBSTANDARDS, 2007)

7 7 Conforme o W3C, os padrões atuais são: Linguagens Estruturais Linguagens de Apresentação Extensible Hypertext Markup Language (XHTML) 1.0 XHTML 1.1 Extensible Markup Language (XML) 1.0 Cascading Style Sheets (CSS) Nível 1 CSS Nível 2 CSS Nível 3 Semântica Resource Description Framework (RDF) Modelo de Objeto Document Object Model (DOM) Nível 1 (Core) DOM Nível 2 Linguagens de Script ECMAScript 262 (a versão padrão do JavaScript) Linguagens de Apresentação Adicionais (Marcação) Mathematical Markup Language (MathML) 1.01 MathML 2.0 Scalable Vector Graphics (SVG) 1.0 Acessibilidade Web Accessibility Initiative (WAI) Protocolos Hyper Text Transfer Protocol (HTTP) Dispositivos Móveis Mobile Web Initiative (MWI) No Quadro 2, são apresentadas algumas características de web sites tradicionais e, em contraponto, os que adotam os padrões web: Quadro 2 Web sites tradicionais versus Web sites Padrão web Tipo Web site tradicional Web site Padrão Web Fonte: Webstandards (2007). Características Layouts baseados em tabelas; Camada de apresentação junto com o conteúdo (tags Font); Código inválido; Código inacessível; Código semanticamente incorreto; Marcação semanticamente correta; Código válido; Código acessível (por humanos e máquinas); Uso de Cascading Style Sheets (CSS) para separação do conteúdo da apresentação; O Quadro 3, apresenta pontos positivos e negativos em referência aos padrões web:

8 8 Quadro 3 Pontos positivos e negativos dos Padrões Web Padrões Web Pontos positivos Pontos negativos Downloads mais rápidos; Curva de aprendizado acentuada; Código e conteúdo acessível para amplo Problemas com incompatibilidade entre número de: usuários (usuários normais, cegos, browsers; Alguns tipos de layouts podem ser obtidos com deficientes visuais, disléxicos, deficientes físicos, entre outros); mais facilidade utilizando tabelas, ao invés de CSS; aparelhos (leitores de tela, navegadores, navegadores de texto, hand helds, robots de busca, impressoras, entre outros); Poder de personalização do site pelo usuário; Fácil implementação de versões para impressão; Custos de hospedagens mais acessíveis; Melhor ranking em sites de busca; Manutenções mais rápidas e eficientes; Um diferencial de competitividade entre concorrentes; Fonte: Adaptado de Webstandards (2007) 6. Considerações Finais Na Web encontram-se documentos digitais construídos a partir de um variado tipo de tecnologias. Algumas, propiciam layouts visualmente ricos, fruto de um alto potencial criativo e boa comunicação visual; porém, muitas vezes, a tecnologia utilizada para obter tal resultado possui baixa acessibilidade e/ou não permitem satisfazer as necessidades comuns dos usuários, tais como: imprimir, marcar sites (bookmarks), copiar e colar, entre outras tarefas. Muitos designers e desenvolvedores web sentiram-se desmotivados e/ou desistiram em adotar os Padrões Web porque os browsers não os suportavam uniformemente. Os browsers de hoje suportam os Padrões Web, contudo milhares de designers e desenvolvedores web continuam adotando métodos ultrapassados que misturam conteúdo, estrutura e apresentação, repletos de marcação estruturalmente supérfluas, grandes mapeamentos de imagem, excesso de tabelas dentro de outras tabelas e scripts de detecção ultrapassados. Tais práticas inviabilizam as estruturas semânticas e causam problemas de usabilidade. Designers e desenvolvedores web devem superar a resistência as mudanças, ter ciência dos benefícios ao usuário e as vantagens em adotar os Padrões Web, além do investimento em capacitação profissional. Eis aí um grande desafio! 7. Referências BONSIEPE, Gui. Design: do material ao digital. Trad. Cláudio Dutra. Florianópolis: FIESC/IEL, CEDERHOLM, Dan. Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS. Berkeley: New Riders, MEYER, Marilyn; BABER, Roberta; PFAFFENBERGER, Bryan. Nosso futuro e o computador. 3 a ed. Porto Alegre: Bookman, 2000.

9 9 MEYER, Eric A. Eric Meyer on CSS: Mastering the Language of Web Design st Edition. Indianapolis: New Riders Press, NIELSEN, Jakob. Designing web usability: The practice of simplicity. Indianopolis: New Riders Publishing, NIELSEN, Jakob; LORANGER, Hoa. Prioritizing Web Usability. Berkeley CA: New Riders Press, PRIOSTE, Marcelo. Textos na web. In: Faces do design. -- São Paulo: Edições Rosari, (Coleção TextosDesign) RADFAHRER, Luli. Design web design: 2. São Paulo: Market Press, SERRA, A. P. G; MARTUCCI JÚNIOR, M; CORRÊA, P. L. P. Convergência Tecnológica. Disponível on-line em acesso em 12/01/2007. TIDWELL, Jenifer. Designing Interfaces. Sebastopol: O'Reilly, Sites Referenciados CNN. Disponível em acesso em 10/03/2007. CSSZENGARDEN. Zen garden: a beleza do CSS Design. Disponível em 16/01/2007. HSTERN. H.Stern: Coleção Disponível on-line em acesso em 16/01/2007. NATURA. Disponível on-line em acesso em 20/01/2007. WEBSTANDARDS. The Web standards Project. Disponível on-line em acesso em 20/01/2007.