Projetar para o WWW

Hans Liesenberg
Instituto de Computação
Unicamp
hans@dcc.unicamp.br

IMPORTÂNCIA DE SABER PROJETAR

O MEIO

Como funciona o WWW?

• Sistema aberto e não centralizado de consulta e disponibilização de informações estruturadas na forma de hiper-documentos
  
  
  • abrange milhões de pessoas do mundo todo pertencentes a culturas, formação, camadas sociais e faixas etárias variadas;
    
    
  • cresce e apresenta novidades todos os dias;
    
    
  • permite registrar e recuperar conhecimentos nas mais diversas áreas;
    
    
  • todos são potenciais autores e podem veicular a sua produção de forma instantânea.
  
  
  
• Anatomia de uma página WWW
  
  

  página do Repositório de Informações Educacionais
  ("snapshot" tirado no início de maio de 1997)

  http://lite.fae.unicamp.br/repeduc/ (página original)
  
  

  o texto fonte de tal página

  informação "bruta" + instruções de estruturação e apresentação na forma de marcas (tags)

  
  
  
• O modelo cliente-servidor
  
  
  • A Internet adota um modelo de computadores autônomos interligados em rede que cooperam entre si.
    
    Informações disponíveis via WWW, portanto, não se encontram centralizadas em um determinado lugar.
    
    
  • A informação encontra-se disponível em um computador (servidor) que a entrega a outro computador (cliente) sob demanda, via rede.
  
  
  
• Paginadores (Browsers)
  
  
  • Paginador: software que executa na máquina cliente com o qual interage o usuário. Suas funções principais são formatar e apresentar páginas WWW e demandar novas páginas junto a servidores de acordo com as escolhas feitas pelo usuário.

    Um browser solicita a um servidor a entrega de um arquivo correspondente a uma página selecionada bem como outros arquivos referenciados ao mesmo ou outros servidores (de acordo com as referências) que contenham imagens "inline" (embutidas) e possivelmente "applets" a serem apresentados na página selecionada.
    
    

  • Protocolo de comunicação: "hypertext transfer protocol" (http)
    
    
  • Diversidade: Lynx, Mosaic, Netscape, Internet Explorer, HotJava, ....
    
    
  • O processo de interação entre browser e servidor não mantém informações do estado desta interação.

    O browser estabelece conexão com o servidor que é quebrada após o recebimento das informações solicitadas.
    
    

  • O projetista tem controle apenas limitado sobre a apresentação final de páginas.

    A apresentação de páginas varia de browser para browser e mesmo para um browser específico, a apresentação pode ser diferente em plataformas (Unix, Windows, ...) distintas.

    A apresentação ainda é afetada pelas dimensões da janela aberta para o browser e parâmetros do browser ajustados pelo usuário (preferências pessoais).

    O aspecto de controle é muito diferente, por exemplo, para um artista plástico que vai produzir a sua obra sobre uma superfície de dimensões fixas onde ele tem total controle das cores a serem empregadas.

  
  
  
• Servidores WWW
  
  
  • Um servidor WWW é o software que executa em uma máquina servidora (computador de propósito geral com PC, estação de trabalho, ...) ligada à Internet.

    Um servidor WWW recebe solicitações de browsers sobre informações disponíveis na máquina servidora ou na rede local em que se encontra a máquina servidora e, se encontradas, ele as retorna para o browser solicitante.
    
    

  • Um hospedeiro de servidor WWW (isto é, uma máquina servidora) é identificado por um nome (host name). Exemplos:
    •  lite.fea.unicamp.br
    •  www.dcc.unicamp.br
  
  
• Localização de recursos
  
  
  • Recurso: arquivo fonte de uma página, arquivo com imagem, arquivo com trecho de a áudio, applet, ...
    
    
  • URL: "Universal Resource Locator" (localizador universal de recursos)
    
    
    • "Path" relativo à raiz padrão do servidor

          http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
          ----   ----------------- -------------------- ---------------
       protocolo     hospedeiro           "path"            arquivo
          

    • "Path" relativo à raiz padrão relativa a um usuário em um sistema multi-usuário com servidor WWW

          http://www.dcc.unicamp.br/~hans/mc102/index.html
          ----   ------------------ ----------- ----------
       protocolo     hospedeiro       "path"      arquivo
          

      Nesse caso a raiz relativa é:

          /proj/cats/staff/hans/public_html/mc102/
          

  • Arquivos padrões definidos ao ser instalado o servidor WWW. Exemplos: index.html, welcome.html.

    O uso sistemático deste tipo de arquivo evita que usuários vasculhem diretórios.

    No caso acima a URL poderia ser mais curta:

        http://www.dcc.unicamp.br/~hans/mc102/
        

  • Exemplo de ancoração de uma referência:

        No <a href="http://www.dcc.unicamp.br/proj-xchart/modelo.html">modelo</a> adotado ...
        

• Como disponibilizar uma página no WWW?
  
  
  • Em computadores em rede local já com acesso direto à Internet
    
    
    • instalar o código do servidor (se ainda não instalado).
      
      
    • deixar os arquivos relacionados com a página disponível em um diretório localizável pelo servidor e desprotegê-lo para permitir a leitura por outros.
    
    
  • Em computador "hospedeiro" de um provedor de acesso à Internet. Transferência via ftp.
  
  
• Uso isolado da Internet
  
  
  • "texto eletrônico" manipulado diretamente pelo cliente sem auxílio de servidor (opção "open file").

Especificidades

• "Enchurrada" de informações
  
  
  • sensação de perda no "hiper-espaço";
    
    
  • reduzir a carga cognitiva com "mapas de navegação"
  
  
• Natureza imprevisível de browsers
  
  
  • meio mais fluido e em constante evolução (diferente de projeto gráfico em papel com dimensões fixas, por exemplo). Não dá para controlar e antecipar a forma exata com que uma particular página será apresentada ao usuário.
    
    
  • parâmetros com valores padrão embutidos (como dimensão inicial da janela do browser) variam de acordo com o browser (existem algumas dúzias de browsers) e a plataforma (PC, Macintosh, Unix, ...) utilizada.
    
    
  • o usuário (existem milhões deles) pode redefinir alguns parâmetros de acordo com as suas preferências pessoais:
    • seleção de cor: texto, fundo, âncora, ...;
    • dimensões da janela do browser;
    • inibição ou não da apresentação de imagens "inline";
    • ...
    
    
  • variabilidade na apresentação de imagens
    
    
    • o usuário pode inibir a busca e a apresentação de imagens em caso de conexão com baixa passagem de banda (modems lentos), por exemplo;
      
      
    • um browser pode ser incapaz de apresentar imagens (caso do Lynx, por exemplo);
      
      
    • imagens podem variar nas suas dimensões dependendo da plataforma utilizada para a execução do browser (problemas de resolução de tela).
    
    
  • apresentação de página varia de browser para browser
    
    
    • novos tipos de browsers surgem outros desaparecem (novas facilidades podem ser providas e outras podem desaparecer para sempre);
      
      
    • a forma de resolução ("rendering") de marcas ("tags") não é pré-estabelecida (variação em padrões de estilo). Exemplo: O rendering de <h2> pode apresentar variações na fonte (conjunto de caracteres tipográficos como Times, Helvetica, ...), estilo de apresentação (normal, negrito, itálico, ...), tamanho(18 pontos, 12 pontos, ...);
      
      
    • variação na capacidade de "rendering": o browser Lynx é o de menor capacidade e é utilizado em terminais sem capacidade gráfica
      
      
    • uso corrente de versões diferentes de browsers (muitos usuários não estão utilizando a última versão de um determinado browser).
  
  
  
• HTML - Hypertext Mark-up Language
  
  
  • em constante evolução;
    
    
  • privilegia uma descrição lógica de documentos em detrimento de uma descrição mais estilística (<strong> x <b>);
    
    
  • tags podem funcionar em alguns browsers, mas não em outros ou podem estar apenas parcialmente implementados em um particular browser (por exemplo, eles são apresentados corretamente, mas não impressos como apresentados);

    Cuidado com tags eventualmente não tratados por determinados browsers: sua página fica apenas um pouco menos atrativa em tais browsers ou ela se torna inutilizável?
    
    

  • implementação apenas parcial do padrão por parte de um browser - tags não reconhecidos são ignorados;
    
    
  • extensões (exemplo: o tag <center> da Netscape)
    
    
    • disputa pelo mercado;
      
      
    • o WWW foi inicialmente mais usado no meio científico para difusão de textos mais técnicos e por este motivo era menos refinado;
      
      
    • uso mais generalizado criou novas demandas para tags mais sofisticados. Projetistas querem mais controle na disposição da informação em uma página;
      
      
    • novas facilidades são incorporadas em browsers comerciais que eventualmente viram padrões de fato (exemplos: textos em volta de imagens, definição de cor de fundo, ...);
    
    
  • usar extensões?
    
    
    • se utilizadas podem resultar em projetos sofisticados em browsers particulares, mas resultar em apresentações extremamente probres ou absolutamente inutilizáveis em outros;
      
      
    • decisão depende fundamentalmente do público alvo e dos browsers mais utilizados por este público (Netscape é o mais utilizado no momento);
      
      
    • na melhor das hipóteses, um documento com tags não reconhecidos é apresentado de forma muito diferente do planejado ou se torna completamente inutilizável, no prior dos casos.
    
    
  • implicações para o projetista:
    
    
    • é preciso acompanhar tendências e novos desenvolvimentos de browsers;
      
      
    • avaliar novas facilidades e verificar se os "ganhos" de seu uso compensa os problemas trazidos do uso de recursos não padronizados e não aceitos amplamente;
      
      
    • decidir que extensões utilizar e em que grau (é praticamente impossível satisfazer a todos!)
    
    
  • ferramentas relacionadas com a produção de textos em HTML
    
    
    • World Wide Web and HTML Tools
      http://www.w3.org/pub/WWW/Tools/Overview.html
  
  
  
• Atrasos devido ao transporte pela rede
  
  
  • documentos trafegam pela rede antes de chegar ao usuário final;
    
    
  • imagens são codificadas na forma de conjuntos relativamente grandes de dados e, portanto, imagens grandes implicam em tempos longos de descarga ("download time"). Exemplo: um arquivo de 30K pode levar até 2 minutos (ou mesmo mais tempo) para ser descarregado com um modem mais lento (estimativa "realista": 2 segundos para o estabelecimento de conexão mais 1 segundo para cada K de dados de codificação da imagem);
    
    
  • usuários manifestem uma relação de amor e ódio no que diz respeito a imagens

    alternativas para um usuário com conexão Internet lenta:
    
    

    • esperar pacientemente a descarga (para tal o usuário deve estar muito motivado);
      
      
    • desligar a função de descarga automática de imagens
      
      
    • pular para outra página e você possivelmente o perde para sempre.

    Muitos usuários têm modems lentos: Cuidado para não perder audiência!
    
    

  • manter o total de informação ao mínimo sem comprometer a sua qualidade.
    
    
  • decisão sobre riqueza gráfica de um projeto envolve um compromisso entre uma entrega rápida da informação essencial ao usuário e o apelo que esta apresentação tem para tal usuário.

    Tal decisão é fortemente influenciada pela natureza da página e seu uso típico.

    Utilizar poucas imagens se é vital fazer chegar as informações importantes de forma rápida ao usuário.
    
    

  • possível alternativa para resolver o dilema da riqueza gráfica - prover pelo menos duas versões de um documento: uma mais rica graficamente para aqueles que dispõe de acesso Internet mais rápido ou que estão dispostos a esperar por perídos mais longos e outra basicamente na forma de texto para os menos "privilegiados" e os menos pacientes.

    Cabe ao usuário a escolha da versão de acordo com os seus fatores limitantes e interesses.

    Problemas do provimento de múltiplas versões: manutenção de consistência entre as versões, aumento substancial de trabalho para projetista e desenvolvedor, ...
    
    

  • nem todos verão as suas imagens; use o atributo ALT no tag IMG.
  
  
  
• Quadro comparativo entre documentos impressos e hiper-documentos WWW
  
  

  Impressos	WWW
  comunicação uni-direcional	usuário interage e explora, testa hipóteses, ...
  imagens resolução maior do que a normalmente perceptível pelo olho humano	imagens de granularidade alta; perda de detalhes
  texto e imagens são "absorvidas" simultaneamente	como textos são normalmente apresentados em primeiro lugar, eles devem ser auto-contidos e apenas ter a sua mensagem apoiada por imagens
  projetista tem controle total sobre a apresentação	limitações de software e preferências do usuário afetam significativamente um projeto. Maior criatividade é requerida em função de tais limitações
  conteúdo flui de maneira linear	múltiplos fluxos facilitando a exploração do conteúdo
  visualização instantânea	atrasos na apresentação completa. Textos geralmente aparecem em primeiro lugar.
  devem ter um impacto grande para chamar atenção	devem ter um conteúdo de qualidade para "segurar" a audiência
  imagens estáticas	imagens "clicáveis", imagens animadas, ...
  distribuição via livrarias, bancas de jornais, ...	distribuição "imediata" via redes de longa distância
  número reduzido de autores	responsabilidade autoral pode mudar ao longo do tempo
  informação válida no momento da publicação	informação atualizada em tempo real
  acesso indireto a referências	acesso "instantâneo" a referências em formato eletrônico disponibilizadas via rede

PROJETO E CONSTRUÇÃO DE PÁGINAS

Objetivos

• Atrair a atenção do usuário que chegou à sua página;
  
  
• Induzi-lo a explorar mais o seu documento;
  
  
• Não perdê-lo em função de um projeto de pouco apelo e/ou fraco em termos de conteúdo.

  A decisão de continuar na sua página ou "pular" para outra pode se dar em frações de segundos em função das primeiras impressões obtidas (é finito o intervalo de tempo de captura de atenção para a avaliação da "utilidade aparente" por parte do usuário). Existem tantas coisas interessantes a serem exploradas, por que se deter em algo pouco atrativo ou aparentemente de pouco interesse? Uma vez tomada a decisão de abandonar a sua página logo após o primeiro contato é provável que este usuário nunca mais retornará para ela, já que ele a classificou como sendo "de nenhum interesse".

  Chame atenção para a mensagem principal do seu documento na região nobre da página (o topo da página que cabe no espaço delimitado pela janela de apresentação do browser). A maioria dos usuários não se dá ao trabalho de fazer "scrolling" para ver se tem algo de "útil" na região da página inicialmente encoberta.

  Adote o princípio do "zoom-in" e mantenha o grau de expectativa.

Fases

• Análise
  
  
  • caracterização do usuário e identificação de suas expectativas e necessidades, dos serviços a serem prestados pelo "sítio" WWW (Web site);
    
    
  • definir claramente os objetivos do projeto.
  
  
  
• Projeto
  
  
  • identificar os principais tópicos e refiná-los sucessivamente em subtópicos;
    
    
  • agrupar tópicos mais intimamente relacionados;
    
    
  • identificar recursos (textos, imagens, trechos de áudio e/ou vídeo, ... que possam facilitar a compreensão dos tópicos identificados;
    
    
  • identificar relacionamentos entre grupos de tópicos;
    
    
  • planejar formas de realimentação ("feedback").
    
    
  • Sugestão: crie um modelo do hiper-documento a ser construído em papel, na forma de um diagrama - represente esboços de cada página a ser criada e indique as ligações entre as páginas com setas; teste este modelo com alguns usuários típicos simulando uma exploração do hiper-documento; durante o teste encubra todo o modelo e só permita uma visualização parcial (isto é, so' mostre a parte que normalmente seria visível na janela do browser) da página selecianada.
  
  
  
• Desenvolvimento
  
  
  • construir páginas para os tópicos identificados na fase anterior;
    
    
  • interligar páginas de tópicos inter-relacionados;
    
    
  • verificar a validade e a confiabilidade das informações a serem veiculadas nas páginas em construção.
  
  
  
• Teste
  
  
  • antes de disponibilizar o seu hiper-documento, teste com todas as pessoas dos mais diversos perfis dispostas a isto;
    
    
  • discutir com elas o seu projeto e as dificuldades por elas encontradas;
    
    
  • analisar cuidadosamente os seus comentários e impressões, já que podem ser indícios de falhas no projeto.
  
  
  
• Repetir o ciclo para corrigir "imperfeições" encontradas
  
  
• Disponibilização e manutenção do hiper-documento
  
  
  • certificar-se que os usuários consigam realimentar você com seus comentários e sugestões;
    
    
  • considerar cuidadosamente cada uma das questões levantadas pelos usuários;
    
    não deixar caducar as informações veiculadas;
    
    
  • introduzir melhorias com freqüência;
    
    
  • manter o "ar" de hiper-documento em constante movimento.

• Implicações da falta de controle mais preciso sobre o produto final

  A sua página ainda passa a mensagem pretendida se o browser utilizado não dispuser de todos os recursos desejados por você?

  Por exemplo:
  
  

  • o padrão gráfico não apresentado para o fundo da página degrada a mensagem se ele foi utilizado para reforçar subliminarmente alguma informação?
    
    
  • a falta de animação via um applet prejudica o entendimento da conteúdo da página?
    
    
  • a informação organizada em forma de tabelas, mas não apresentada como tal, continua inteligível?
  
  
  
• Facilidades de projeto em HTML ainda muito limitadas

  Apesar das limitações ainda existentes projetos interessantes estão surgindo todos os dias.

  Aprenda com páginas bem projetadas. Veja como foram construídas (opção "view source" no browser). "Top sites":
  
  

  • 1001 best web sites da PCComputing
    http://web1.zdnet.com/pccomp/webmapd/
    
    
  • What's Cool da Netscape
    http://home.netscape.com/home/whats-cool.html
    
    
  • Top 10 sites: gardening, ...
    http://www.point.com/
  
  Exemplos de projetos mal feitos:
  
  
  • Mirsky's Worst of the Web
    http://mirsky.com/wow/Worst.html
  
  
  
• O que fazer frente a estas dificuldades?
  
  
  • teste, teste e teste novamente em browsers e plataformas distintas e adaptar o projeto para que ele atinja um padrão mínimo de qualidade em todos os browsers e plataformas consideradas relevantes para o público alvo da página.
    
    
  • resolva problemas como os de alinhamento e de apresentação prejudicada em janelas de dimensões distintas ou em telas de resoluções diferentes da tela utilizada na fase de projeto e desenvolvimento.
    
    
  • tente colocar a mensagem mais importante e todas as informações cruciais relacionadas na área nobre isto é, na região visível da janela em que é apresentada a primeira página, para evitar o deslocamento (scrolling) na visualização completa de tal informação
    
    
  • verifique se figuras e textos importantes são visíveis também em telas monocromáticas.
    
    
  • evite o uso não planejado para tags a fim de obter alguns efeitos especiais.