Web Developer Toolbar e a Acessibilidade

Postado por: Pedro Rogério em

A poucos dias atrás descobri uma funcionalidade interessante que compõe a Web Developer Toolbar, ela possui uma lente de aumento que pode auxiliá-lo em muitas coisas, principalmente naqueles sites em que os desenvolvedores definiram tamanhos de fonte muito pequenas, ou até mesmo quando você está desenvolvendo e precisa fazer verificações minuciosas no layout.

Para acessá-la basta ter, obviamente, a barra instalada em seu Firefox, ir até Miscellaneous > Display Page Magnifier. Pronto, e ainda você tem a opção de aumentar ou diminuir a proporção de aumento. Abaixo vocês podem ver um exemplo:

Exemplo de uso da lente de aumento da Web Developer Toolbar

Hijax: AJAX Acessível

Postado por: Pedro Rogério em

Hijax é uma nova estratégia para o uso de Ajax que tem como objetivo tornar as páginas web acessíveis, que as páginas web sejam totalmente funcionais para aqueles que não podem fazer o uso de Ajax (por que querem ou não possuem suporte a JavaScript).

Essa técnica se baseia nos termos: progressive enhancement e graceful degradation, duas estratégias que permitem que um sistema informaizado (no nosso caso, uma página web), funcione corretamente caso ocorra a falta de algum componente.

Progressive enhancement parte de uma versão básica totalmente operativa (parte-se de uma página web que faz o menor uso de tecnologias complementares como CSS e JavaScript, tornando-se assim compatível com a maioria dos browsers), já com Graceful degradation se parte do extremo contrário, desenvolvendo para navegadores mais novos, com a possibilidade de que funcione em navegadores antigos.

No caso de Hijax, a estratégia que se emprega para desenvolver com Progressive enhancement é a seguinte:

  • Primeiro desenvolva o site ao “estilo antigo”, com links e ações de formulários que enviam informações ao servidor e devolvem uma página completa para cada requisição.
  • Empregar JavaScript para capturar todos os links e ações dos formulários para enviar a informação mediante XMLHttpRequest. Dessa forma pode-se selecionar quais partes da página devem se atualizar de forma individual, ao invés de recarregar a página toda.

Referências

13 erros comuns ao desenvolver sites com Ajax

Postado por: Pedro Rogério em

Abaixo vocês irão ver uma série de conselhos para evitar cometer erros ao desenvolver sites com ajax:

  • Ajax é uma ferramenta, e não um brinquedo: Muitas vezes os desenvolvedores fazem o uso desnecessário de Ajax, onde um simples HTML resolveria tudo.
  • Comece bem com o botão voltar do navegador: Este botão é necessário para a Usabilidade, e o JavaScript não se dá muito bem com ele.
  • Não avisar ao usuário que ocorreu uma ação: Quando o usuário clica em uma área da página e ocorre uma ação, isso deveria ser avisado a ele para que saiba que os dados estão sendo atualizados.
  • Deixar os usuários off-line de lado: A cada dia existem mais e mais usuários com acesso a internet, e nem por isso iremos desenvolver sites para usuários que fazem uso dela, devemos também pensar em usuários que fazem uso de conteúdo off-line, pois com Ajax, o conteúdo é carregado de forma dinâmica, e não teria o mesmo efeito com que navega off-line.
  • Deixar o usuário esperando: o ‘A’ de Ajax significa assíncrono, não é necessário que o usuário faça algo para obter dados, nós podemos adiantar sua ações e realizar requisições para obter dados e com isso o usuário não tem que ficar aguardando a resposta.
  • Enviar informações simples de forma visível: Em muitas ocasiões enviamos ao navegador os mesmos dados que foram recebidos pela aplicação, a diferença é que a aplicação filtra os dados e nos mostra o que convém. No navegador, embora nem todos mostrem, caso seja apresentado será mostrado.
  • Assumir que Ajax é uma plataforma única: Você deve testar suas aplicações Ajax em distintas plataforma que permitem isso, ou seja, em diversos browsers.
  • Múltiplos usuários: Se sua aplicação é utilizada por múltiplos usuários, tome cuidado pois podem haver problemas de um vizualizar dados por parte dos outros.
  • Excessivo trabalho para o navegador: As vezes o uso excessivo de aplicações Ajax faz com que o browser tenha que executar muitas tarefas, e isso pode não ser bom para o rendimento de uma aplicação.
  • Esquecer daqueles que navegam com JavaScript desabilitado: Segundo as estatísticas, 11% dos usuários de Internet navegam com JavaScript desabilitado, por isso é bom pensar em uma alternativa ao Ajax.
  • Não utilizar links: Ao carregar conteúdo dinâmico, não esquecer de mostrar os links que levam a esse conteúdo.
  • Sair do comum em relação a Usabilidade: Ao permitirmos realizar ações pouco habituais, nos encontramos com a circunstância de que esperamos que o usuário realize uma ação que ele não esperava ser feita. As pessoas estão acostumadas a realizar sempre as mesmas ações.
  • Não realizar alterações em cascata: Não devemos esquecer de que quando alteramos parte do conteúdo da página, devemos alterar também partes relacionadas.

Fonte: Sentido Web.

Um breve guia sobre Acessibilidade

Postado por: Pedro Rogério em

Os seguintes conselhos listados a seguir foram extraídos da WAI (Web Accessibility Iniciative), que resumem os pontos chave das diretrizes de acessibilidade web: WCAG 1.0.

  • Imagens e Animações: Uilize o elemento alt para descrever a função de cada elemento visual.
  • Mapas de Imagem: Utilize mapas do lado cliente e proponha alternativas de texto para cada área ativa.
  • Multimedia: Proporcione subtítulos e transcrições de áudio e descrições de vídeo.
  • Links: Crie links que contenham texto que façam sentido quando se está fora do contexto, por exemplo, evite os links clique aqui.
  • Organização da Página: Utilize cabeçalhos, listas e crie uma estrutura coerente para suas páginas. Utilize CSS para dar estilo a sua página.
  • Gráficos e Diagramas: Crie resumos utilizando o atributo longdesc.
  • Scripts, Applets e Plugins: Proporcione conteúdo alternativo caso o acesso a função não seja suportado.
  • Frames: Utilize o elemento no frames e utilize títulos com sentido.
  • Tabelas: Crie tabelas que possam ser lidas linha por linha. Faça um resumo do conteúdo das mesmas.
  • Revise seu trabalho: Valide seus documentos, referências e guias podem ser encontrados em: http://www.w3.org/TR/WCAG/

Tradução do artigo original de: WebMaster Libre.

30 Extensões Firefox para Desenvolvedores Web

Postado por: Pedro Rogério em

Uma das coisas mais interessantes do Firefox é a possibilidade de você instalar extensões nele que podem lhe auxiliar e muito, seja para navegar, ou para o desenvolvimento web, e até hoje eu não entendo como tem muita gente ainda que não utiliza o Firefox, seja, ou por receio, ou por que o acha feio, não sei, mas isso fica para um próximo post, mas abaixo você pode ver uma lista de 30 extensões que eu encontrei no site Sentido Web, e podem auxiliar e muito você desenvolvedor:

CSS

  • Aardvark: Permite ver atributos CSS, ID’s e Classes, selecionando elementos individuais na página.
  • chromEdit: Permite modificar o CSS e o JavaScript de qualquer página.
  • CSSMate: Edição de arquivos CSS.
  • CSS Validator: Valida o CSS de suas páginas.
  • CSSViewer: Visualiza propriedades CSS.
  • EditCSS: Permite modificar os CSS carregados.
  • IETab: Visualize suas páginas web no IE dentro do Firefox.
  • Style Sheet Chooser II: Permite selecionar folhas de estilo alternativas para uma página.

Debug e Análise

  • Firebug: Dispensa apresentações, a melhor ferramenta para análise e debug de HTML, CSS, JavaScript e Ajax.
  • HTML Validator: Valida o HTML suas páginas de acordo com o W3C.
  • JavaScript Debugger: Debug de JavaScript.
  • Link Checker: Comprova se os links de uma página são válidos.
  • Load Time Analyzer: Ferramenta para mostrar o tempo de carregamento de uma página.
  • View Dependencies: Mostra informações de todos os arquivos usados ao carregar uma página.

Outros

  • Clipmarks: Tire screenhots de lugares específicos de sua página.
  • Codetech: Editor Web com a aparência do Dreamweaver.
  • ColorZilla: Capture cores das páginas visitadas.
  • FirePHP: Ferramenta para depurar PHP.
  • Greasemonkey: Altere o comportamento de qualquer página web com esse plug-in.
  • Measureit: Ferramenta para medir(em pixels), partes das páginas web.
  • Platypus: Uma das melhores ferramentas para modificar uma página web.
  • Poster: Permite interagir com WebServices e outras ferramentas web.
  • Professor X: Mostra o conteúdo do header de uma página web.
  • Screen grab: Tire Screenshots de suas páginas web.
  • TestGen4Web: Grava a atividade dos usuários em páginas web.
  • View Source Chart: Visualizador de código fonte.
  • Web Developer: Uma coleção de ferramentas para desenvolvimento web.
  • X-Ray: Permite ver o código fonte de uma página e alternar entre ambos de uma forma simples.

Artigo original: Sentido Web.

Páginas:«12345678»