Blog CataBits

Como Mestre André bem colocou, o DTD¹ do HTML determina como a página web vai ser renderizada pelo navegador, e a declaração do “javascript” determina como a programação vai ser interpretada. Erros ou inconsistências no código gerado pelo software (ou manualmente) acabam afetando como a página vai ser renderizada ou bloqueando funcionalidades desta.

Um fato comum em minhas aulas de web é layout de páginas com  tabelas aninhadas (tabela dentro de outra tabela) não centralizarem verticalmente com código X/HTML.

Leia mais »

Quem desenvolve sites profissionalmente ou mesmo quem faz para uso pessoal mas gosta de se manter atualizado, sempre se depara com problemas de incompatibilidades.

A maioria desses problemas são causados pela falta de padrão entre os navegadores, mas muito podem ser resolvidos simplesmente conhecendo os padrões web e aplicando-os corretamente. Os famosos “Web Stadards” determinam por regras muito rígidas e bem documentadas como devemos escrever documentos para a Internet, usando as sintaxes e parâmetros de forma certa.

Leia mais »

Os formatos de divulgação de notícias RSS e Atom não são novos. Já existem a algum tempo na web, mas só agora estão sendo padronizados e se popularizando entre os usuários da Web.

Imagine que você precisa estar sempre por dentro das informações e notícias mais atualizadas; seja por causa da profissão, por “vício” ou mesmo porque gosta de saber das coisas. Sabemos que a Internet é o melhor veículo para isso, afinal, que outra mídia de massa permite uma atualização das informações de qualquer parte do mundo, praticamente em tempo real?

Há um tempo atrás, a melhor forma de se manter atualizado na Internet era acessando, um por um, os sites de notícias e lendo com cuidado aquele monte de chamadas espalhadas pelo design da home page, com aqueles GIFs animados, cores berrantes e propagandas atrapalhando, quando não, tínhamos que ir na “busca” do mesmo site, que nunca funcionava bem, e procurar tudo o que foi postado naquela data… Qualquer favorito que se preze sempre foi uma bagunça, imagina o tamanho dos nossos “Favoritos” só para ler notícias?

Eis que chegam o RSS e o Atom, formatos de divulgação de notícias, informações e atualizações baseados no padrão XML que permitem que, de um único local (programa ou página web) possamos saber as novidades de vários sites ao mesmo tempo, através de resumos das notícias. Basta então um clique na notícia de nosso interesse para sermos levados à página no “site fonte” onde podemos ler a notícia completa.

O Quick RSS é um bom exemplo de Agregador de Feeds

A revolução do XML

Um dos segredos dos feeds RSS e Atom está no XML, uma linguagem de marcações, parecida com o HTML usado na Web, armazenado na forma de um arquivo texto plano, como os .TXT, que pode ser facilmente compreendido e interpretado por qualquer tipo de aplicativo e até mesmo por nós, seres humanos “comuns”.

Que fique claro que está não é, nem de longe a única aplicação do XML. Existem até mesmo modernos sistemas de arquivos controlados via XML e sua lista de contatos do MSN é outro exemplo de uso deste poderoso recurso. Apesar de parecido com o HTML, o XML não é voltado para design. Sua função é armazenar informações dos mais diversos tipos em um formato padronizado e universal, e serve para Internet e para qualquer outro tipo de aplicação.

Para vermos a simplicidade com que o XML pode ser interpretado, veja o exemplo abaixo. Ele é um fragmento de uma agenda telefônica de um celular de marca famosa. Observe atentamente e veja se a forma com que os dados foram armazenados entre marcas (expressões entre os sinais “<” e “>”). Com exceção da primeira linha, não faz bastante sentido?

<?xml version=?1.0? encoding=?UTF-8??>
<agenda>
    <contato>
        <sobrenome>Bom de Bola</sobrenome>
        <nome>Geremias</nome>
        <telefone>2345-6789</telefone>
        <celular>9876-5432</celular>
    </contato>
    <contato>
        <sobrenome>Pinto da Silva</sobrenome>
        <nome>Dilermano</nome>
        <telefone>2233-4455</telefone>
        <celular>9988-7766</celular>
    </contato>
    <contato>
        <sobrenome>Setembrino</sobrenome>
        <nome>Eustáquio</nome>
        <telefone>2323-4545</telefone>
        <celular>8989-6767</celular>
    </contato>
</agenda>

Os formatos RSS e Atom seguem esta mesma padronização do XML, só que as marcações são sempre as mesmas, padronizadas de acordo com cada um dos dois formados, de forma a serem interpretadas por um aplicativo leitor ou agregador. Veja um exemplo abaixo:

<?xml version=“1.0“ encoding=“UTF-8“?>
<channel>
    <title>Últimas notícias da Desenholândia</title>
    <description>Últimas novidades sobre o mundo dos desenhos animados</description>
    <url>http://www.saite.com.br</url>
    <language>pt-br</language>
    <item>
        <title>Bob esponja processado por patente</title>
        <description>O funcionário do Siri Cascudo, uma famosa lanchonete da Fenda do Biquini foi acusado de fabricar siriburgueres sem autorização do proprietário. o Sr. Sirigueijo...</description>
        <pubDate>Tue, 31 Oct 2006 15:18:23 -0300</pubDate>
        <link>http://www.saite.com.br/Bob_esponja</link>
    </item>
    <item>
        <title>Chaves é plagiado por estudantes</title>
        <description>Ontem, durante uma prova de química, vários estudantes de uma escola da Zona Sul foram expulsos da sala porque estavam imitando o Chaves. Segundo relatos, eles babavam e falavam coisas inúteis...</description>
        <pubDate>Thu, 26 Oct 2006 09:57:49 -0300</pubDate>
        <link>http://www.saite.com.br/Chaves_e_plageado</link>
    </item>
</channel>

Com uma olhada rápida o fragmento de RSS acima pode parecer confuso, mas preste atenção: as marcas (Tags) delimitam o título da notícia, e delimitam um resumo da notícia (chamada), e delimitam o link para a página da notícia original, e delimitam a data de publicação da notícia e e delimitam cada uma das diversas notícias do site. Veja como o código acima é exibido pelo leitor RSS embutido no Mozilla Firefox.

Feed Atom visto no Mozilla Firefox

Para alguém com um pouco de conhecimento em linguagens para Web como PHP ou ASP, por exemplo, fica fácil gerar um arquivo texto formatado em XML RSS/Atom à partir de um banco de dados. Até mesmo para quem tem sites, mas nenhum conhecimento de programação, existem aplicativos que formatam e criam o XML RSS/Atom automaticamente.

Como ler RSS e Atom

Vários sites na Internet, inclusive blogs, fotologs, webmails e outros serviços para usuários em geral disponibilizam seu conteúdo em RSS e/ou Atom chamados de “Feeds” (alimentadores). Bons exemplos são o Blogger, o álbum de fotos Google PicasaWeb e o site de notícias IDG Now!.

Para acessá-los necessitamos de um agregador, nome dado ao leitor de arquivos de notícias. Vários agregadores gratuitos podem ser encontrados em sites de downloads, mas o problema é que, normalmente, temos que instalá-los para usar.

As versões mais modernas dos navegadores Mozilla Firefox, Opera e Internet Explorer também incluem um agregador de Feeds. Mas a melhor opção atualmente é usar sites Web 2.0. Um bom exemplo é o Google Reader que permite o acesso às notícias mais recentes sem a necessidade de instalar programas em cada computador que usamos. As páginas iniciais personalizadas do Hotmail, Google, Yahoo entre outros também permitem incluir seus próprios Feeds.

O próximo passo é “assinar” um Feed. Calma! Nada de entrar com dados pessoais ou pagar por alguma coisa. “Assinar” na linguagem dos Feeds significa incluir os links dos arquivos XML dos Feeds dos sites no seu agregador. Para isso, temos que descobrir o link, copiá-lo e colá-lo em nosso leitor.

Descobrir o link correto é fácil, normalmente temos que encontrar o ícone laranja com um RSS ou com o símbolo do Feed e clicar nele. Alguns sites maiores podem possuir mais de um Feed, e podemos escolher sobre que assuntos queremos ficar atualizados. Para exemplificar, veja os links dos diversos Feeds do Catabits.

Localizando links de Feeds

Usando o Google Reader

O Google Reader é meu leitor de notícias favorito, pela facilidade de configurar e usar, e principalmente pela disponibilidade, já que posso ter acesso às minhas notícias mais recentes de qualquer computador conectado à Internet e até do Palm e do celular.

Para usar este serviço você precisa ter uma conta no Orkut, Gmail ou qualquer outro serviço do Google. Então, acesse o site http://www.google.com/reader e logue-se com os mesmos dados (usuário e senha) dos serviços citados. Inicialmente (e opcionalmente), você assistirá a um vídeo onde um dos funcionários do Google descreve alguns recursos do Google Reader.

Agora, é hora de incluir seus Feeds: para isso, acesse o seu site preferido e localize um link ou um dos ícones do Feed ( ou ) e clique nele. Alguns sites têm apenas um link apontando para a página de Feeds como é o caso do PicasaWeb que tem um link RSS na parte inferior da página. Quando localizar o link do Feed clique nele ou copie e cole na barra de endereços para que o navegador o exiba seu conteúdo. Alguns navegadores podem exibir o código fonte do XML, já outros, como o Firefox 2.0 e o IE7 exibem o conteúdo bem formatado.

No Firefox aparecerá um ícone de Feed ao lado do link do site, na barra de endereço. Clicando neste ícone, o Feed poderá ser adicionado automaticamente na barra de favoritos e seu conteúdo será exibido na tela. No IE 7 o ícone aparece na barra de status e o procedimento é praticamente o mesmo.

Ícone de site com suporte à Feeds

Uma dica: a maioria dos links de Feeds aponta para um arquivo XML, como é o caso do Blogger. Por exemplo http://blogdosiris.blogspot.com/rss.xml é o Feed do Blog do Siris. Mas lembre-se que isso não é uma regra. No Siris Games por exemplo, uso um script em PHP para manter o Feed atualizado em tempo real. Isso faz com que o link seja diferente como, por exemplo, http://feeds.feedburner.com/sirisgames_ultimosposts que é o feed do Siris Games.

Com um pouco de pesquisa e prática, fica fácil achar o que queremos. Sempre digo aos meus alunos: “se fosse para achar as fotos proibidas daquela atriz famosa ou aquele crack para o game lançado recentemente, você acharia rapidinho, mas como é alguma coisa útil, tudo é difícil…”.

Incluindo e lendo as notícias

De posse do link do Feed do seu site favorito, siga esses passos:

• Abra a página inicial do Google Reader, obviamente já logado;
• Clique no link Add subscription, cole o endereço do Feed no campo que aparece;
• Clique no botão Add e pronto!

Sua inscrição foi feita e um link aparecerá na sua lista “All subscriptions:”. O número que aparece entre parênteses após o nome do site é a quantidade de notícias ainda não lidas. Siga os mesmos passos acima para incluir novos Feeds.

Lendo Feeds no Google Reader

Para ler as notícias:

• Clique no nome do site para ver as chamadas para as notícias do mesmo;
• Clique título de uma notícia para ver a versão completa no site de origem.

Na parte superior direita da listagem existem três abas:

• “Feed setings” permite fazer algumas configurações (quando disponível) ou remover sua assinatura;
• “Expanded view” mostra as notícias de forma expandida, exibindo a introdução das mesmas e várias ferramentas úteis;
• “List view” mostra apenas os títulos, os primeiros caracteres da chamada e as datas de publicação de cada notícia;

Em qualquer modo, clicando no link você será direcionado à página da notícia no site que a publicou.

Existem muitos outros recursos a serem explorados no Google Reader como exportar suas notícias favoritas, montar um Feed com elas, criar links para readers de outros usuários, etc.

Quem tiver dúvidas, dicas ou contribuições, nosso fórum está a disposição…

Bons provedores de hospedagem fornecem este tipo de redirecionamento, através de uma página (definida pelo provedor ou pelo proprietário do site) que informa um link inexistente.

Figura 1

Na falta de uma hospedagem que gerencie links quebrados, o webdesigner deve ter um fluxograma da estrutura de seu site. Antes de projetar a nova versão do site deve fazer uma lista das principais páginas antigas, e repeti-las na versão nova, mas tendo como conteúdo apenas a informação de que a página foi movida ou não existe mais.

Figuras 2 e 3

No segundo caso – hospedagem que não forneça gerenciamento de links quebrados – uma tag/marcação que direcione automaticamente a página “antiga” para a página “nova” resolve a questão de modo rápido.

Figura 4

Aqui é particularmente útil o projetista de internet (ou webdesigner) saber quais as opções do navegador que podem interferir na navegação, e quepodem ser desabilitadas no computador do internauta. Muitos computadores estão num contexto (escolas, acesso público) em que a programação (scripts) e recursos de navegação podem estar desabilitados por questão de segurança (para não baixar vírus ao computador do usuário) ou restringir acesso a sites “não-permitidos” no ambiente. Nesse sentido, código “redundante” (que pode ser interpretado por alguns como “obsoleto”) pode ser efetivo para essas situações. Por exemplo, caso a tag META de redirecionamento esteja desabilitada no navegador (computador?) do usuário, um link “comum” para a nova localização deve existir na página, ou alerta de que scripts podem estar desabilitados no navegador (tag NoScript).

Figura 5

O redirecionamento de URLs também é útil para criar um endereço “curto” – para seu site ou página, facilitando o acesso. Como existem sites especializados em criar esses endereços curtos, se o redirecionamento for por curto prazo de tempo, utilizar uma URL do tipo “http://seusite.dominioY.com” pode ser uma boa solução de custo-benefício.

Se, ao contrário, o redirecionamento – ou URL “curta” – for utilizada por longo prazo (ou se uma URL mais personalizada for necessária para passar imagem mais profissional, sem usar subdomínios de terceiros) deve-se considerar a configuração de alias (apelidos ou URLs curtas) no servidor (http://nomedosite.com).

Por fim, ao criar estrutura de pastas e subpastas em seu site, lembre-se de sempre ter uma página index em cada subpasta (ou sub-nível) de seu site. Isso facilita a navegação por “texto” permitindo o usuário navegar digitando o caminho através das subpastas do site.

Figura 6

Enfim, gerenciamento (direcionamento e redirecionamento) de links e endereços na web é uma prática necessária para quem projeta conteúdo para a internet.

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.

Não é lá muito fácil criar uma conta de e-mail “seunome@msn.com”. É que pra criar uma conta assim, curtinha, precisamos ter o “MSN Explorer”, um pseudo-navegador que seria, mas nunca foi o provável substituto do “Internet Explorer”.

Então, sem mais enrolação, vamos ao trabalho…

1. Baixe o MSN Explorer, de preferência em português, do endereço http://explorer.msn.com.br/install.htm;
2. Conecte-se à Internet se já não estiver;
3. Inicie a instalação dando 2 cliques no arquivo baixado;

   

4. Na primeira tela interativa, aceite o contrato de licença;

   

5. Se um “Alerta de segurança do Windows” abrir, clique em “Desbloquear”;

   

6. Na caixa seguinte, “Usar o MSN Explorer”, clique no botão “Sim”;

   

7. Na janela “MSN” clique em “Continuar >”;

   

8. Aguarde o MSN Explorer se conectar na Internet;

   

9. Marque a opção “Criar um novo endereço de e-mail para mim” e clique em “Continuar >”;

   

10. Preencha seus dados na tela seguinte e clique em “Continuar >”;

    

11. Escolha seu país, seu estado e clique em “Continuar>”;

    

12. Preencha mais algumas informações e clique em “Continuar >”;

    

13. Leia os termos de uso do MSN, aceite o contrato e clique em “Continuar >”;

    

14. Escolha uma senha para sua nova conta, escolha uma “Pergunta Secreta”, responda-a logo abaixo e clique em “Continuar >”;

    

15. Este é o momento mais importante e difícil, o de escolher seu nome de usuário. Claro que ele não pode existir ainda, portanto, tenha paciência e criatividade para escolher. Se o nome já existe, ao clicar em “Continuar >” ele emite um aviso logo acima do e-mail e você deve tentar outro. Além disso, após o seu e-mail ser aceito, não há como voltar atrás;

    

16. Quando encontrar seu nome e ele for aceito, ao clicar em “Continuar >”, partimos para a tela seguinte: marque “Eu não quero fazer isso agora” e clique em “Continuar >”;

    

17. Parabéns, sua nova conta @msn.com está pronta para usar, mas é interessante entrar nela pelo menos na primeira vez pelo próprio MSN Explorer e preencher mais alguns dados cadastrais. Essas informações podem ser preenchidas via hotmal.com também, na primeira vez que você acessar sua conta;

    

18. Depois que você confirmar que sua conta foi criada (não se esqueça de fazer isso), pode remover o MSN Explorer pelo “Adicionar e remover programas” do “Painel de controle”.

Acabou! Quem não conseguiu é porque não saber ler, ver figuras ou é muito bizonho(a) ta tudo explicadinho e testadinho aí em cima. Volte e faça novamente ou então vá jogar pingue-pongue no seu velho Atary pois lá é sua praia!

Abraços…

Um argumento forte contra as janelas “que saltam” ou pop-ups é que estas podem não aparecer corretamente em dispositivos móveis. Outro argumento é a invasividade delas (propaganda não solicitada pelo usuário). Por fim, com a proliferação de bloqueadores de pop-ups, conteúdo relevante atrelado a estas pode não ser exibido se o usuário não souber desligar esses bloqueadores (!).

Vale a pena distinguir as situações em que seu conteúdo pode ser exibido em janelas do navegador:

Janelas normais

Neste caso deve-se projetar a interface de forma que o conteúdo apareça:

encaixado na tela (centralizado vertical e horizontalmente)

. .

alinhado à esquerda

. . .

centralizado horizontalmente

. .

layout líquido/fluido (se ajustando á resolução do monitor sem comprometer a diagramação)

Janelas redimensionadas

Aqui ou o conteúdo tem dimensionamento/posicionamento fixo (Figura 1) ou se adapta a largura da janela (Figura 2). Há que ter cuidado para que o conteúdo seja compreensível em um tamanho “minimo”, daí normalmente se optar por layout com largura fixa, ou seja, com barra de rolagem, ao redimensionar.

Figura 1 *

. .

Figura 2 *

Janelas pop-up

em tela cheia ou fullscreen

Como uma interface web em tela cheia tem de ser carregada por uma janela do navegador, pode-se considerar essa interface um tipo de pop-up ou uma nova janela (sem barra de títulos).

Dispensa dizer que além de desorientar o usuário novato, tem de haver opção de redimensionar ou fechar a janela facilmente.

Uma opção a esta interface seria a janela com elementos de interface 100% personalizados (em CSS chamado Chromeless Window), com barra de titulos, borda, rolagem e botões totalmente personalizados. O problema é como diferentes versões dos navegadores irão interpretar esse recurso (em tela cheia ou tamanho pré-definido).

Chromless

. .

Em tela inteira

Na verdade é um pop-up que sempre aparece ocupando a tela inteira de seu monitor, com barra de títulos.

	. .
Em tamanho pré-definido

Este pop-up tradicional se divide em pop-up e pop-up under, que se abrem ao entrar ou sair da página, respectivamente. A pop-up under é conhecida tanto por aparecer em sites “de conteúdo alternativo” como por ser uma “publicidade não-invasiva” (não atrapalha o carregamento da página ou a navegação inicial do usuário).

Uma alternativa que se justifica em tempos de web 2.0 seria o uso de camadas (layers) ou conteúdo dinâmico no lugar das pop-ups, amarrando o conteúdo ao layout e a uma janela única do navegador. Mas isso é assunto para outro texto…

__________________________________________________
Notas:
[Figura 1] tabelas de tamanho fixo ou com Folha de Estilos/CSS;
[Figura 2] layout HTML puro (com ou sem tabelas de largura proporcional ao tamanho da janela) ou layout líquido (com tabelas ou CSS).