JavaScript não intrusivo

August 26th, 2008 Deixe sua opnião »

Na Lista de discussão da Acesso Digital está rolando uma thread sobre javascript que funcione em em browsers sem suporte a javascript.

Como assim?

Simples, fazer com que dados gerados via javascript funcionem mesmo que não haja suporte para javascript.

Não confundir com non-obstructive ou unobstructive, pois esse se trata de camadas, misturar CSS com HTML no JavaScript.

Algumas pessoas usam browsers que não suportam javascript, outras desabilitam por motivos de segurança ou por algum outro motivo qualquer, quem sabe um firewall que bloqueia instruções javascript, algumas empresas fazem uso deste artifício para diminuir a quantidade de backdoors e spywares que são disseminados na rede interna após clique em algum endereço equivocado.

A forma mais fácil de contornar esta situação é adicionar opção para o browser sem suporte a javascript ler.

Exemplo:

1- <script type=”text/javascript” src=”menu.js”></script>
2- <noscript>
3-     <ul>
4-          <li><a href=”/”>Página Inicial</a></li>
5-          <li><a href=”/sobre-a-empresa/”>Sobre a Empresa</a></li>
6-          <li><a href=”/contato/”>Contato</a></li>
7-     </ul>
8- </noscript>

Neste exemplo clássico, a linha 1 faz a chamada ao menu através de um comando javascript, dentro do arquivo “menu.js” conterá as linhas 3 a 7, o que é feito é o uso do elemento <noscript>. Qual o moral da história?

O elemento <noscript> é usado para definir um conteúdo alternativo se o script não for executado.

Detalhe: Só é suportado em browsers que reconhecem a tag ’script’, mas que não dão suporte a esta tag.

A W3Schools tem outro exemplo para ser conferido.

 

Mapa de Fluxo: Não naufrague durante a navegação

August 17th, 2008 5 Comentários »

Apresento mais um elemento da documentação de um website: Mapa de Fluxo de Navegação. Na arquitetura de informação, o estágio de Especificação permite organizar e documentar tudo o que é desejado para o website, detalhando a visão macro obtida no estágio anterior, Concepção.

O Mapa de Fluxo de Navegação permite reunir todos os wireframes desenhados, detalhando em cada objeto ou bloco de conteúdo suas interligações com outros objetos.

A princípio este Mapa de de Fluxo não chega a ser importante para o usuário final, mas permite aos gerenciadores do projeto terem a visão precisa dos resultados mesmo antes de algum código ser implementado, o que leva a prevenção de possíveis erros de hierarquia e classificação de produtos de forma visual.

O Felipe Memória, em seu livro Design para a Internet, alertou para o fato da complexidade dos Mapas de Fluxo de Navegação, por serem extramamente detalhados, ficam difíceis de serem impressos e esparramados em alguma mesa de reuniões. Entretanto, é visão detalhada que permite visualizar o produto como um todo, simulando uma navegação off-line para que o produto final não cause frustações à navegação do usuário final.

Exemplo Mapa de Fluxo de Navegação

Figura: Exemplo de Mapa de Fluxo de Navegação com legenda da notação.

Para facilitar a leitura e impressão é preferível dividir o mapa em partes, assim como a figura que apresenta um Mapa de Fluxo com as bolhas principais.

Verificando os mapas de fluxo de navegação, nenhum hyperdocumento fica livre de vistoria e é verificado suas ligações com o todo o website, diminuindo o risco de haverem “páginas não encontradas”. Se isto ocorrer devido falhas no processo de Implementação é facilmente corrigido fazendo o Teste de Mesa, que consiste em verificar os links unitários manualmente, mas não descarta-se a possibilidade de utilizar um robô para o teste de mesa e fazer uma leitura do seu relatório.

Close
E-mail It