tecnologia de implementação de interfaces web web

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, Dra2
Programa de Pós Graduação em Engenharia e Gestão do Conhecimento – UFSC | Programa de PósGraduaçã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
2
[email protected], [email protected]
[email protected]
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 1995. 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 interface3 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
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ência4 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
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
Figura 3 – Site da H. Stern - layout fixo em 800x600 pixels
Fonte: Hstern (2007).
Largura: 620 pixels
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
Figura 6 – Layout líquido do site CSS Zen Garden
Fonte: Csszengarden (2007).
Largura: 800 pixels
Largura: 530 pixels
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
Fixo/Congelado
Pontos positivos
Pontos negativos
O projetista tem controle sobre a
forma como a informação é
apresentada;
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;
As linhas de texto têm uma largura
fixa e curta, facilitando a leitura de
texto na tela;
Maior acessibilidade. Os conteúdos
adaptam-se melhor à resolução da
tela do usuário;
Líquido/Fluído/Elástico
Os conteúdos ocupam toda a área
visível da tela, permitindo transmitir
mais informação;
Menor acessibilidade, uma vez que o
layout não se adapta às necessidades
do usuário;
Maior dificuldade na leitura de
linhas de texto demasiado longas;
Perde-se o controle sobre o
posicionamento de alguns elementos
na página;
Deixa de haver espaço vazio à volta
do web site;
Fonte: Adaptado de Tidwell (2005).
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
Conforme o W3C, os padrões atuais são:
Extensible Hypertext Markup Language (XHTML) 1.0
Linguagens Estruturais XHTML 1.1
Extensible Markup Language (XML) 1.0
Cascading Style Sheets (CSS) Nível 1
Linguagens de Apresentação 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)
Mathematical Markup Language (MathML) 1.01
Linguagens de Apresentação
MathML 2.0
Adicionais (Marcação)
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
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;
Fonte: Webstandards (2007).
O Quadro 3, apresenta pontos positivos e negativos em referência aos padrões web:
8
Quadro 3 – Pontos positivos e negativos dos Padrões Web
Padrões Web
Pontos positivos
Pontos negativos
• Curva de aprendizado acentuada;
• Downloads mais rápidos;
• Código e conteúdo acessível para amplo • Problemas com incompatibilidade entre
browsers;
número de:
– usuários (usuários normais, cegos, • Alguns tipos de layouts podem ser obtidos com
deficientes visuais, disléxicos, deficientes
mais facilidade utilizando tabelas, ao invés de
físicos, entre outros);
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, 1997.
CEDERHOLM, Dan. Bulletproof Web Design: Improving flexibility and protecting against
worst-case scenarios with XHTML and CSS. Berkeley: New Riders, 2005.
MEYER, Marilyn; BABER, Roberta; PFAFFENBERGER, Bryan. Nosso futuro e o
computador. 3a ed. – Porto Alegre: Bookman, 2000.
9
MEYER, Eric A. Eric Meyer on CSS: Mastering the Language of Web Design. -- 1st Edition.
Indianapolis: New Riders Press, 2002.
NIELSEN, Jakob. Designing web usability: The practice of simplicity. Indianopolis: New
Riders Publishing, 2000.
NIELSEN, Jakob; LORANGER, Hoa. Prioritizing Web Usability. Berkeley CA: New Riders
Press, 2006.
PRIOSTE, Marcelo. Textos na web. In: Faces do design. -- São Paulo: Edições Rosari, 2003.
-- (Coleção TextosDesign)
RADFAHRER, Luli. Design web design: 2. São Paulo: Market Press, 2000.
SERRA, A. P. G; MARTUCCI JÚNIOR, M; CORRÊA, P. L. P. Convergência
Tecnológica. Disponível on-line em
http://www.lps.usp.br/lps/arquivos/conteudo/grad/dwnld/ConvergenciaTecnologica.ppt,
acesso em 12/01/2007.
TIDWELL, Jenifer. Designing Interfaces. Sebastopol: O'Reilly, 2005.
Sites Referenciados
CNN. Disponível em www.cnn.com, acesso em 10/03/2007.
CSSZENGARDEN. Zen garden: a beleza do CSS Design. Disponível em
http://www.csszengarden.com/tr/portuguese/, 16/01/2007.
HSTERN. H.Stern: Coleção 2007. Disponível on-line em www.hstern.com.br, acesso em
16/01/2007.
NATURA. Disponível on-line em http://www.natura.com.br, acesso em 20/01/2007.
WEBSTANDARDS. The Web standards Project. Disponível on-line em
http://webstandards.org/, acesso em 20/01/2007.