Posts com a tag: "Acessibilidade"

20 May 2008

As 7 regras do JavaScript não obstrutivo - Parte 2

Caso não lembrem, já tivemos uma pequena introdução e a parte 1 dessa série.

Se você não souber o que é JavaScript não obstrutivo, recomendo a leitura desse artigo antes de qualquer coisa. Caso contrário, vamos ao que interessa…

Encontre ganchos e relações (HTML, a base do desenvolvimento)

Antes de começar a escrever seu JavaScript, olhe para a base em que você está desenvolvendo. Se você não conhecer o código HTML ou ele estiver mal estruturado, será extremamente difícil fazer uma solução inteligente para o seu script. Provavelmente você acabará criando um código com marcações excessivas ou sua aplicação dependerá de JavaScript.

Por isso, considere duas coisas no seu HTML: ganchos e relações.

Ganchos

Dessa vez o gancho está aí pra ajudar :-)

Os ganchos HTML são, em primeira instância, os IDs, já que eles podem ser facilmente acessados via DOM pelo método getElementById. Eles podem ser usados com tranquilidade pois são fáceis de testar e um ID é único no documento. O Internet Explorer ás vezes confunde os atributos name e id, mas existem boas bibliotecas que contornam esse problema. Eu, particularmente, uso e recomendo a jQuery.

Existem outros ganchos, que são elementos que podem ser acessados com getElementByTagName e através das classes CSS (que até o momento não pode ser acessada com um método nativo - Mozilla em breve terá um e o Opera 9.5 já possui. Mesmo assim, há uma série de métodos auxiliares que permitem utilizar simular um getElementByClassName).

Utilizando um trocadilho infame, o gancho é apenas o local onde você “enroscará” seu JavaScript para atingir o objetivo.

Relações

Não esqueça: o que você quer está interligado com todo o HTML.

Outra coisa interessante sobre o HTML é como sua estrutura está relacionada. Pergunte a você mesmo:

  • Como posso chegar a determinado elemento mais facilmente e percorrendo o mínimo de passos via DOM?
  • Qual elemento eu devo alterar para atingir os elementos-filhos que eu preciso mudar?
  • Quais atributos ou informações de um determinado elemento eu posso usar para relacionar com outro?

Percorrer o HTML via DOM é trabalhoso e pode ser demorado, por isso é uma boa idéia deixá-lo para uma tecnologia que já está em uso nos browsers. Bibliotecas como jQuery, Mootools e Prototype podem auxiliar nessa tarefa.

Continua…

Para saber mais

Tags: , , ,
3 Comentários
13 May 2008

As 7 regras do JavaScript não obstrutivo - Parte 1

Caso não lembrem, eu fiz uma pequena introdução sobre esta série.

Se você não souber o que é JavaScript não obstrutivo, recomendo a leitura desse artigo antes de qualquer coisa. Caso contrário, vamos ao que interessa…

Não faça suposições (JavaScript, o assistente não-confiável)

Imagem (O Gordo e o Magro) JavaScript é seu amigo, mas não deixe que ele faça tudo.

Provavelmente a característica mais importante de um JavaScript não obstrutivo é você deixar de fazer suposições:

  • Não suponha que o JavaScript estará disponível, otimize seu código para não ficar dependente dele;
  • Não suponha que os browsers interpretarão corretamente determinados métodos e propriedades, teste individualmente em cada browser antes de publicar;
  • Não suponha que o código HTML estará correto, verifique-o e não faz nada até que ele esteja devidamente estruturado;
  • Mantenha a funcionalidade independente do dispositivo do qual seu site é acessado;
  • Suponha que outros scripts tentarão interferir com o seu e mantenha o seu script o mais seguro possível.

A primeira coisa a fazer, antes mesmo de começar a planejar seu JavaScript[bb], é analisar o código em que você irá trabalhar e ver o que pode ser usado em benefício próprio.

Não comece a escrever o JavaScript enquanto não estiver com o HTML impecável. Faça com que seu site/aplicação seja funcional sem JavaScript, para depois implementá-lo.

O que você ganha com isso?

Trabalhando dessa maneira, você evita futuros incovenientes com incompatibilidade de browsers, brechas de segurança e insatisfação do usuário. E consequentemente, melhora a qualidade do seu trabalho.

Resumindo, não confie numa aplicação baseada em JavaScript, use-o apenas para a adicionar novas funções e melhorar a experiêcia de quem acessa seu site.

Continua…

Tags: , , ,
Nenhum comentário
10 Apr 2008

O que é Javascript não obstrutivo?

Javascript não obstrutivo diz respeito a scripts que, ao serem desabilitados, não interferem no funcionamento da página.

Como assim?

Simples, digamos que você tem um menu que funciona com JavaScript:

Menu DropDown Olha que maravilha, você passa o mouse e surgem novas opções.

O que aconteceria se alguém acessasse sua página com um navegador que não tem suporte a JavaScript[bb]? Ela deixaria de funcionar? No exemplo acima, como o internauta chegaria até “sub Option 0”?

Utilizar JavaScript não obstrutivo é utilizar scripts que aprimorem suas aplicações web sem que elas fiquem dependentes do mesmo.

Um bom exemplo disso são os links Boo-box. Ao clicar em um link, uma chamada JavaScript abrirá uma vitrine dentro do site. Caso o Javascript esteja desabilitado, o internauta é redirecionado para uma nova página. A aplicação funciona de qualquer maneira, o JavaScript apenas adiciona uma funcionalidade.

Por que utilizar?

Simples, JavaScript não obstrutivo é uma das principais maneiras de garantir a acessibilidade, facilitar a manutenção e ganhar tempo na hora de desenvolver seu site.

Para saber mais

Nos próximos dias estarei publicando a série The Seven Rules Of Unobtrusive JavaScript traduzida. Então assine o feed e fique por dentro das 7 regras essenciais para um JavaScript não obstrutivo.

Tags: , ,
6 Comentários
24 Mar 2008

As 7 regras do JavaScript não obstrutivo - Introdução

Já faz algum tempo que, como não encontrei uma versão em português, comecei a traduzir um artigo do Dev.Opera chamado The Seven Rules Of Unobtrusive JavaScript.

Eu ia postar o artigo completo mas ainda tem muita coisa pra revisar, então decidi postar as regras separadamente, acho que fica mais fácil pra acompanhar e, principalmente para os que estão começando, entender o conceito de JavaScript[bb] não obstrutivo.

O artigo foi publicado originalmente no fim do ano passado. O autor, Christian Heilmann, diz que chegou até essas regras após anos desenvolvendo, ensinando e implementando JavaScript de maneira não obstrutiva. O artigo é basicamente um resumo do que foi dito na Paris Web Conference 2007. A intenção do texto é ajudar a entender os benefícios de se trabalhar com JavaScript de maneira não obstrutiva, desenvolvendo projetos mais rapidamente, com muito mais qualidade e de fácil manutenção.

Espero que o texto seja útil a todos assim como foi pra mim.

Se quiser ficar por dentro do artigo completo assine o feed, assim você não perde uma atualização. ;-)

Tags: , , ,
1 Comentário
01 Feb 2008

Acessibilidade: Design com foco no conteúdo

Em se tratando de web, uma das coisas que mais atrai minha atenção é saber que o usuário tem o controle. Ele não precisa seguir um caminho linear, ele navega por onde bem entender à procura da informação desejada.

Facilitar o acesso à informação é o caminho do sucesso em um projeto web. E nesse ponto, é crucial aliar conteúdo de qualidade a uma apresentação impecável. Pense comigo: você pode ter o melhor produto do setor, mas se não apresentá-lo de maneira agradável contribuirá para reduzir o seu nível de confiabilidade.

Imagem Vitrines Os produtos podem ter a mesma qualidade, mas quem transmite mais confiança?

Entretanto não podemos esquecer do acesso à informação, não adianta ter um produto apresentado de maneira glamurosa se você não facilita o acesso a ele.

objetivo.jpg A informação está lá. Mas o usuário consegue chegar facilmente até ela?

E o que isso significa na prática?

Facilite a vida do usuário

Tenha em mente que muitas vezes você “perde” (entre aspas) no design para aumentar suas chances de conquistar o internauta.

Exemplo: um site com uma barra de rolagem interna.

barra1.jpg Até certo ponto, layout agradável e conteúdo ok.

No meu monitor de 17 polegadas o site aparece exatamente como na imagem acima. Agora veja o que acontece quando acesso de um monitor menor.

barra2.jpg Cadê o conteúdo? O site inteiro fica dentro desse espaço.

O conteúdo do site (que no fim das contas é o que realmente importa) fica num espaço pequeno e difícil de navegar. Apesar do layout “bacana”, não consigo acessar as informações de maneira agradável. Nesse caso, será que não valeria a pena modificar o layout para facilitar a navegação? Quem acha que sim, levante a mão.

hands.jpg Viva o usuário!

Isso quer dizer que devo fazer meu site no menor tamanho possível? Não. A recíproca também é prejudicial, diminua seu site para monitores 800×600 e ele ficará menor ainda em monitores de grande resolução, prejudicando a leitura.

O mesmo site visto em dois monitores diferentes. Vai uma lupa aí?

O que fazer então?

Desenvolva soluções criativas baseadas no público-alvo e no briefing do projeto. Tenha em mente que seu site pode ser acessado de vários dispositivos…

Existem até geladeiras acessando a internet atualmente.

E de várias maneiras…

Já tentou acessar seu site só com o teclado?

Não trabalhe achando que todo mundo acessa o site da mesma maneira que você. Desenvolva priorizando a apresentação do conteúdo de maneira agradável ao usuário, e não a apresentação do site como um todo. No fim das contas, o sucesso fica por conta dos que são criativos e sabem aliar os melhores conceitos de design e desenvolvimento web (leia-se padrões web, usabilidade, acessibilidade, SEO e todos os conceitos correlacionados) ao seu trabalho.

Lembre-se sempre que, não importa a forma de acesso do usuário, seu site sempre deve estar apresentável de modo que o conteúdo seja o foco.

Para saber mais

Tags: , , ,
9 Comentários
Página 1 de 212»
Topo