Blog CataBits

Bancos de ônibus emporcalhados

É lamentável ver como a população desrespeita os bens públicos.

Leia mais »

A Mozilla Foundation lançou uma campanha muito legal, solicitando que os usuários baixem o novo Firefox 3 em até 24 horas após o lançamento. O objetivo é fazer parte do Guinness Book, o livro dos recordes.

“Queremos estabelecer um Recorde Mundial no Guinness para o software mais baixado em 24 horas. Com o auxilio da nossa comunidade e a sua ajuda temos certeza de que conseguiremos.”

Diz a página oficial da campanha.

Leia mais »

Se você ainda não leu, acesse a primeira parte deste artigo.

4) Estruturas de MicroNavegação:

Compreenderiam o modo como a informação é acessada/visualizada, dentro de uma mesma página ou dentro de um conjunto de páginas de hipertexto.

BreadCrumb Trails (trilhas de migalhas de pão)

Figura 22: BreadCrumbs Trails1, uma estrutura
para navegação profunda; navegação normalmente
linear, mas que indica ao internauta o caminho
percorrido (ou existente) até ali.

Os BT (BreadCrumb Trails) para poder indicar exatamente o caminho percorrido de maneira não-linear (como o histórico do navegador), devem ser implementados por programação. Se não, acabam sendo uma barra de navegação comum.

TrackBacks (trilhas reversas)

Figuras 23 e 24: TrackBack (TB) ou Trilha Reversa – recurso utilizado em blogs
que visa ajudar a estruturação de hipertexto; aqui, links são gerados na página de destino por meio de um link reverso.

O TB funciona da seguinte forma: sempre que se faz um link para um “texto X” dentro de um “corpo fechado”[2] ao final do “texto X” é criada automaticamente  tabela de todos os links que apontam para ele. Como é um caminho de mão dupla, isso faz com que o leitor do “texto X” acesse todos os textos relacionados a ele, ampliando base de informação sobre o assunto tratado. O TB depende da existência de “corpos fechados”; assim sendo, quando o TB não é possível (quando o link para o “texto X” parte de uma página localizada em um “corpo aberto”) os comentários dos leitores (a rede social da blogosfera ou da internet) acabam cumprindo essa função de apontar os textos relacionados, através de links “comuns”.

Essa restrição visa tanto não criar uma lista infinita de links reversos, como limitar os links desejáveis. Por outro lado essa estrutura normalmente só é desejável em Blogs.

Links externos

Para documentos e pontos intradocumento que estejam:

• na mesma janela
• em nova janela (ou janelas de salto – pop-ups)
• em camadas

Fig.25 Links exibidos numa mesma janela do navegador ou em nova janela; apontando para novas páginas ou pontos específicos da página.

A interface desse tipo de navegação pode se dar com exibição/ocultação de links (menus ou barra de navegação verticais/ horizontais).

Fig.26 Interface para hipervínculos/hyperlinks. Como cita SANTOS (2008)
“A opção por usar um tipo ou outro está mais ligada ao aspecto da página (desenho) do que a questões técnicas”.

Os pontos favoráveis, no caso do link apontar para conteúdo de terceiros, consistem na atualização do conteúdo ao longo do tempo, a cargo do autor do link de destino.

Os pontos negativos compreendem:

• eventuais links quebrados ao longo do teempo se a página for retirada ou mudada de lugar sem redirecionamento;
• falta de projeto de navegação no uso de frames/quadros: pode-se exibir o cabeçalho de outro site dentro do frame/quadro principal.

Fig.27 Links quebrados ou mal estruturados.

Navegação hipermídia (vídeo, animação ou áudio)

É uma estrutura de hipertexto em conteúdo multimidia (animação, vídeo e/ou áudio); são links que apontam para posições da mídia reproduzindo a informação a partir do ponto desejado.

Fig.28 Conteúdo multimídia (áudio, vídeo, animação) longo pode ser sumarizado através de links descritivos.

Esse tipo de navegação cria uma sumarização de conteúdo não-textual longo (áudio, vídeo, animação);

Fig.29 Exemplo de site que indexa conteúdo de vídeo, com sumário curto e descritivo. Interface desenvolvida em Flash (mas conceitos independem da tecnologia utilizada).

A crítica que se pode fazer é que, na Internet, o usuário pode ficar dependente da tecnologia para acessar o conteúdo multimídia se o player/tocador de mídia não existir no lado cliente (navegador ou sistema operacional). Se o navegador do internauta precisar de plug-in ou codec para exibir a mídia (áudio, vídeo, animação vetorial) fica impossibilitado de acessar o conteúdo (até instalar o software necessário).

Fig.30 Atrelar o conteúdo à tecnologia (no lado cliente) pode impedir o acesso a informação.

Links internos

Que apontam para pontos intradocumento.

Fig.31 Exemplos de links internos

Exibição/ocultação de conteúdo

O conteúdo está “inline” (na linha do texto)

Fig.32 Exemplos de links para conteúdo inline.

O conteúdo está “inpage” (na página)

Fig.33 Exemplos de links para conteúdo in-page (na própria página)

O conteúdo está “over-the-page” (sobre a página)

Fig.34 Exemplos de links pra conteúdo Over-the-page (sobre a página).

Essas estruturas proporcionam rápida contextualização e compreensão do conteúdo (não depende de carregar uma nova página ou janela para acessar a informação) além de evitar acesso indireto, como no caso dos frames/quadros.

Os contras existem apenas se houver exibição de conteúdo de terceiros, pois este pode ficar desatualizado ou indisponível.

Fig.35 Conteúdo desatualizado ou indisponível.

Conclusões:

Estas são as situações mais comuns que o projetista de internet (webdesigner) pode se deparar no projeto de sites. Como o objetivo deste texto é discorrer sobre os prós e contras de cada decisão projetual, vale ressaltar que novas necessidades/conteúdos demandam novas soluções; assim sendo este texto é uma base para se evitar erros básicos no presente e para fomentar criação de soluções inovadoras, no futuro.

_____________________________________________
Bibliografia:
BRUSILOVSKY, Peter; User Modeling and User-Adapted Interaction, Holanda, Kluwer Academic Publishers, 2001
SANTOS, Robson; Sistemas de navegao em ai, Blog Interfaceando, acessado em fevereiro de 2008.

[1] Além dos estados do link (página ativa, visitada e não-visitada) há os BreadCrumb Trails (trilhas de migalha de pão) ou BCT que se subdividem em BCT de localização, caminho e atributo. Cada uma dessas categorias tem a função de orientar o internauta durante a navegação dentro de um hipertexto e cumprem razoavelmente bem esse papel como os sinais de trânsito (se o leitor estiver informado sobre essas regras).

[2] “Corpos fechados” segundo BRUSILOVSKI (2001) estão relacionados com sistemas de recuperação de informação que fazem “busca dentro de um site”; neste exemplo uso o termo para me referir a um conjunto de páginas relacionadas dentro de um blog, site de blogs ou blogs que compartilhem uma mesma estrutura de TrackBacks ou links reversos.

Se você ainda não leu, acesse a primeira parte deste artigo.

Resumo:

Este texto procura discorrer sobre Estruturas de navegação interativa em hipertexto e hipermídia, com análise crítica sobre estas.

Palavras-chave:

Hipertexto, estruturas, navegação

Abstract:

This article discuss navigation structures in hypertext and hypermedia with critical analisys about them.

Keywords:

Hypertext, hypermedia, structures, navigation.

__________________________________________________

O texto que inspirou este artigo é o “Sistemas de navegao em AI” de Robson Santos, que discorre sobre estruturas de navegação em hipertexto. Aproveitando as definições de Robson, procuro desenvolver o seu raciocínio aqui, detalhando como se dão estas estruturas, com uma leitura crítica sobre elas.

Fig.1 Navegações do ponto de vista da interação.

Quando se fala sobre estruturas de navegação podemos dividi-las em navegação interativa e navegação não-interativa.

A navegação interativa se dá com ação do usuário. A web, aplicações em CD/DVD ou para PCs seriam os melhores exemplos de navegação interativa, que ocorre em camadas (de apresentação e de interface) percebidas pelo navegante.

Esse tipo de navegação se destina a conteúdo de hipertexto/hipermídia, onde o navegante decide a ordem pela qual deseja acessar uma informação fragmentada ou distribuída em várias páginas/telas ou mídias. A falta de projeto ou recursos de acessibilidade ou adaptatibilidade podem acarretar retardo ou ineficácia na apreensão do conteúdo.

A navegação não-interativa ocorre independente do espectador, ou seja, ocorre como apresentação de um conteúdo. Aplicações para quiosques e visitas guiadas poderiam ser bons exemplos de navegação não-interativa.

Do ponto de vista do espectador, na navegação não-interativa a apresentação é freqüentemente linear (mesmo que sua organização seja não-linear) e ocorre em uma única camada – de apresentação de conteúdo – mesmo que seja estruturada em mais de uma camada.

Essa navegação se destina a apresentação passiva (ou definida pelo autor), onde a compreensão do conteúdo está diretamente ligada a sua organização ou forma de apresentação.

Este texto procura discorrer sobre estruturas de navegação interativa.

Fig.2 Navegação do ponto de vista da estrutura e da profundidade.

1) Estruturas de MacroNavegação:

Compreenderiam o modo como o usuário/internauta percebe um conjunto de páginas de hipertexto.

Segundo Santos (2008) se dividem em Sumários, Índices, Mapa de navegação e Visita guiada.

Sumários e índices possuem a mesma função da informação em papel, organizar o conteúdo de modo geral ou por ordem cronológica, alfabética ou de assunto.

Esse tipo de organização é necessária em sites com grande conteúdo textual (sites acadêmicos, enciclopédias, livrarias, p.ex.). No caso de uma sumarização/indexação longa, pode ser recomendada a criação de tópicos com exibição/ocultação do conteúdo.

Fig.3 Sumarização ou indexação; organização geral ou específica.

Mapas de navegação, como os mapas geográficos, possuem nível de abstração (sinais contextuais e representativos) que nos auxiliam na localização do conteúdo ou informação.

Esse tipo de organização é necessário em sites de grande complexidade, porém pressupõem um projeto, como na mídia impressa (livros, revistas). Como em qualquer sistema digital de localização, pode ser complementado por um sistema de busca por palavra-chave, uma vez que pode não dar conta de direcionar o usuário plenamente.

Fig.4 Mapeamento da navegação: estrutura de localização ou diretório.

Visita guiada tem por objetivo introduzir o usuário a áreas de maior complexidade – ou conteúdo – num sistema (de informação, p.ex.).

Esse tipo de navegação faz fronteira com a apresentação ou tutorial (no caso, de navegação num sistema de informação). Portanto deve ser bem planejada para atingir o(s) seu(s) objetivo(s) – apresentar ou ensinar algo. Uso de narração em áudio não dispensa legendas, para usuários sem placa de som. Legendamento é particularmente útil para usuários não-fluentes em outros idiomas (se o conteúdo narrado for em inglês).

Fig.5  Visitação guiada: forma de tutorial ou sistema
de informação, normalmente linear. Pode se dar
com ou sem interação – ou ação – do usuário.

2) Macroestruturas de navegação:

Compreenderiam como as páginas são organizadas ou como se apresentam.

Página única

Neste exemplo, todo o conteúdo ocorre numa única página, em uma única janela do navegador. É a navegação clássica que deu origem à WWW (World Wid Web ou Rede Mundial de Computadores).

Fig.6 Navegação em uma única tela ou
interface: navegação tradicional.

Frames/quadros

Aqui o conteúdo é exibido em uma única janela do navegador, mas distribuído em duas ou mais páginas.

Muito se fala sobre a má usabilidade dos frames (ou quadros) quando colocados no ambiente de hipertexto. De fato, nos framesets – ou conjunto de quadros/páginas – um dos frames é a barra de navegação (ou tópicos do texto) e os demais são os textos destes tópicos.

Figura 7: Frames ou quadros: exibição simultânea
de diversos conteúdos numa única interface: do lado
esquerdo a página com os tópicos, à direita
páginas com o conteúdo, em separado.

Caso o usuário faça uma pesquisa num buscador e acesse um texto fora do contexto dos frames (sem os tópicos ou navegação entre as páginas) o entendimento do texto fica prejudicado.

Figura 8: Navegação em frames (ou quadros)
– o internauta que acessa uma página não
possui navegação para as demais.

Uma solução simples para esse problema está em colocar uma programação que force as páginas fragmentadas a ocorrerem sempre no conjunto de frames (frameset), exibindo a barra de navegação, que por sua vez estrutura e dá acesso ao texto completo. Ou um link que abra o frameset de origem, em outra janela do navegador.

Figura 9: Programação (script) força a exibição
do conjunto de frames (frameset).

Janelas “de salto” ou pop-ups

Aqui o conteúdo secundário é exibido em uma segunda tela (menor) do navegador, por ser secundário ou para forçar consistência do layout em resoluções de tela variadas.

Fig. 10: pop-up: interface de conteúdo secundário
ou complementar, sobre a página principal.

O seu uso abusivo além de problemas de navegabilidade (navegação distribuída em várias janelas pode confundir o usuário) deu origem aos bloqueadores de pop-ups (add-ins ou acréscimos internos) nos navegadores, que por sua vez esbarra na incapacidade de muitos usuários novatos em acessar sites em pop-ups. Esse fato levou aos projetistas de internet (webdesigners?) a voltar a desenvolver conteúdo em página única ou em camadas.

Camadas (ou layers)

Uma prática dentro do conjunto de conceitos que se convencionou chamar de “web 2.0”, é exibir conteúdo secundário in-page (dentro da página) e over-the-page (sobre a página), criando diversas camadas de informação numa mesma interface ou tela.

Fig.11 Interface em camadas, sobre a página: interface única, conteúdo múltiplo.

Camadas que restringem o acesso a página são o equivalente às telas de alerta do sistema operacional e devem ser utilizadas quando o conteúdo da camada é dinâmico e está diretamente relacionado à página (upload/envio de imagens por exemplo); camadas móveis (arrastáveis) reproduzem a experiência das janelas-pop-up (informar sem interferir com o acesso à página); camadas fixas devem ser utilizadas quando o conteúdo da camada está relacionado a determinado ponto da página (alerta para preencher campo de formulário, por exemplo).

Fig.12 Camadas restritas, móveis ou fixas: navegação dependente da interface.

Uma prática pouco recomendável é a propaganda em camadas animadas com opção de fechar pouco clara, reproduzindo o problema dos pop-ups (conteúdo intrusivo). Os banners expansíveis, por exemplo, não padecem desse problema por serem fixos e terem exibição dependente do cursor sobre o banner (camada).

Santos (2008) propõe algumas topologias para as estruturas de navegação em hipertexto: topologia em árvore, em teia, navegação mista e linear.

3) Estruturas de navegação

Compreenderiam o modo como as páginas se relacionam entre si, ou como se organizam um conjunto de páginas no tocante ao seu acesso.

Topologia em árvore

Navegação estruturada (linear: breadcrumb, índice, mapa do site, visita guiada).

Neste caso a navegação é estruturada de forma hierarquizada, de cima para baixo, de modo geral (topo da árvore) ou em blocos (ramos da árvore).

Fig.13 Topologia em árvore: organização clássica da navegação.

O ponto negativo é que este tipo de navegação pode engessar o acesso à informação: para acessar um ponto de outro ramo, deve-se voltar ao topo da árvore (ou página inicial).

Fig.14 Estrutura tradicional amarra a navegação
ao menu principal, colocando pelo menos um clique
a mais entre a origem e o destino.

Topologia em teia

É a navegação não-estruturada (internet). Aqui, qualquer página pode levar para qualquer outra página, dentro ou fora do site (estrutura de hipertexto) que originou o link.

Fig.15 Navegação em teia: uma única tela pode remeter
o visitante para fora de seu site (sem retorno direto) ou
gerar interface de navegação confusa com muitas
opções (menu, lista vertical e/ou horizontal, etc.).

No caso de links que apontam para um “corpo fechado” (site ou conjunto de páginas de um hipertexto) há que se estruturar os links para que o conteúdo possa ser compreendido ao ser acessado de forma linear ou não-linear.  A barra – ou menu – de navegação seria uma solução nesse sentido.

Fig.16 Barra de navegação permite navegação linear ou não-linear.

No caso de links que apontam para “corpos abertos” (sites ou páginas na internet) há que se considerar no projeto links quebrados ou momentaneamente inacessíveis ao longo do tempo.

Fig.17 Navegação externa pode levar a links quebrados
ou indisponíveis. Ocultação de links indisponíveis
ou programação que gere alerta automático sobre eles
pode ser uma solução.

Navegação mista (com barra de navegação ou menus)

Neste exemplo há uma navegação hierarquizada, mas que pode ser acessada em orientação variada (diagonal, vertical, horizontal). Sistemas de recuperação de informação (quiosques, enciclopédias, p.ex.) portais de informação (universidades, notícias) fazem uso desse tipo de navegação, que precisa ser estruturada de forma a manter a consistência da informação.

Fig.18 Navegação mista, quando organizada, pode ter mais de uma opção de navegação. Um menu principal (geral) e um menu secundário podem ser complementares.

O uso de pop-ups aqui pode gerar certos tipos de inconsistências se estes:

• forem acessado diretamente, e as informaações ali contidas forem dependentes ou relacionadas a outra(s) página(s)
• não possuírem link ou informação que remmeta ao site/página de origem, conforme o caso anterior

Fig.19 Pop-ups acessados diretamente podem
remeter a navegação truncada ou incompleta.
Incluir tags (meta) que impeçam indexação
em sistemas de busca pode ser solução para o primeiro
problema. Informar qual a página de origem de pode
resolver o segundo problema.

Navegação linear

Num exemplo semelhante ao caso anterior, dentro de uma navegação linear (onde uma página leva à outra imediatamente posterior ou anterior) o usuário que acessa uma página aleatoriamente é obrigado a fazer a navegação completa, antes de usar o histórico do navegador, p.ex.; fica assim sem possibilidade de pular páginas previamente para acelerar a navegação. Se o texto estiver fragmentado em um número considerável de páginas, a compreensão do conjunto é comprometida – ou retardada – na mesma proporção.

Figura 20: Navegação linear – o internauta só percebe a estrutura se fizer toda a navegação.

A solução para essa situação está em incluir uma barra de navegação em todos os fragmentos de texto. Como existem diversas formas e variantes da implementação desta barra[1], esse tipo de estruturação será, na maioria das vezes, suficiente para garantir a compreensão do texto, independente da forma em que for acessado.

Figura 21: Barra de navegação em todas as páginas – o internauta percebe a estrutura do texto pela barra, que funciona como um índice ou sumário.

Agora, acesse a segunda parte deste artigo.

Já faz muito tempo que o Firefox é meu navegador padrão. A possibilidade de usar uma mesma interface no Linux e no Windows, a segurança durante a navegação por causa da independência do sistema operacional e a possibilidade de abrir vários sites na mesma janela com o uso das abas foram os principais motivos para adotá-lo permanentemente. As excelentes características do Firefox fizeram inclusive com que o Microsoft Internet Explorer melhorasse muito na sua versão mais recente.

Leia mais »

A popularização de dos PCs portáteis de 2006 para cá, por causa da queda nos preços dos componentes, a livre concorrência e o excesso de produção dos mercados asiáticos, fez com que muita gente, por conveniência, praticidade e até por falta de conhecimento, trocasse seu velho desktop por um notebook novinho e de tela brilhante.

Mas com o notebook vem a dificuldade de expansão e upgrade que, diferentemente dos desktops, fica limitada a alguns poucos componentes caros e difíceis de encontrar. Por sorte, a maioria dos portáteis já vem com dispositivos mais do que suficientes para a maioria das tarefas do dia-a-dia.

Leia mais »

Atenção gamers de plantão!

A Steam, um dos maiores distribuidores de games por download do planeta está com um descontaço para quem ainda não teve a chance de experimentar Call of Duty 4 – Modern Warfare em todo seu esplendor. Então prepare sua banda larga…

Com um desconto de 10 dólares, válido por alguns dias apenas, você pode comprar o game por U$39,90. menos de R$70,00, o que é bem mais barato do que os R$99,90 que a maioria das lojas mais populares estão cobrando.

Leia mais »

Finalmente a Microsoft liberou o download do terceiro e certamente último Service Pack para o Windows XP.

A MS havia cogitado retirar o pacote do ar por causa de um bug relacionado ao Microsoft Dynamics Retail Management System (RMS), sistema que permite à administradores gerenciar grandes quantidades de licenças em uma rede por exemplo, mas decidiu que a quantidade de usuários que seria afetada é pequena frente às correções que o SP3 oferece.

Com o lançamento de um hotfix para o RMS, finalmente o SP3 foi liberado para download em português do Brasil.

Leia mais »