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

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.

Lista de browsers alternativos

Postado por: Pedro Rogério em
Web Accessibility Initiative

O W3C disponibiliza uma lista de browsers alternativos para pessoas com algum tipo de deficiência que eu desconhecia, e que com certeza são de suma importância, divididos em 5 categorias:

Se você não conhecia, fica aí a dica, é uma boa pra você poder testar seu site e verificar se está dentro de padrões aceitáveis.

Forçar quebras de página CSS

Postado por: Pedro Rogério em

Este simples exemplo mostra como inserir quebras de página em nossos documentos, que será usado quando você quiser imprimir alguma página Web:

Veja o exemplo em funcionamento.

O CSS fica da seguinte forma:


.quebrapagina {
page-break-after: always;
}

E o HTML fica da seguinte forma:


<h1>Primera Página</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br class="quebrapagina" />
<h1>Segunda página</h1>
<p>Texto segunda página...</p>
<br class="quebrapagina" />
<h1>Terceira página</h1>
<p>Texto terceira página...</p>

Testei no Firefox e IE7 e funcionou OK, mas infelizmente no Opera não funcionou, se alguém puder testar em mais browsers e me dizer eu agradeço. Baseado no artigo original de Web Intenta.

Mau planejamento ou descaso com o usuário?

Postado por: Pedro Rogério em

Eu, como quem não quer nada, estive dando uma olhada no site da Universidade Braz Cubas, que fica aqui na região, procurando informações sobre cursos, e fiquei meio decepcionado com o site deles, apesar deles serem uma universidade muito conceituada, seu site peca em conceitos de usabilidade e acessibilidade, não precisa ser um guru da área para ver isso, aliás, quem sou eu para estar falando isso, mas não aguentei e quis compartilhar isso com vocês. Tudo começa quando você tenta encontar alguma forma de entrar em contato com eles por e-mail, opa, mas onde? Não existe forma alguma de contato com a Universidade, nem um formulariozinho sequer, a não ser um disque processo seletivo, que com certeza, ligando pra lá, você aguarda com alguma musiquinha bem chata, e depois eles te passam um outro telefone para você estar ligando. Se alguém por um acaso achar um formulário de contato me avise.

Home do site da Universidade Braz Cubas

Uma outra coisa que eu achei tão mal pensada foi a seguinte, na página institucional do site, se você clicar na opção de aumentar o tamanho da fonte do site para facilitar a leitura, por incrível que pareça, ele aumenta o tamanho da fonte do rodapé, e o resto do site continua na mesma, não, não é brincadeira, faça o teste você mesmo, onde fica a acessibilidade aí? Veja uma screenshot abaixo:

Acessibilidade zero

E por último é a área do aluno, onde eles querem passar a imagem de que o usuário é burro:

Não digite traços ou pontos no formulário

Primeiramente colocam a informação do lado do campo input de que não é permitido pontos ou traços, e depois, logo abaixo, em vermelho: “Lembre-se, sempre digite nos campos acima somente números sem traços ou pontos.”. Espera aí, acho que não é pra tanto, existem soluções hoje para que ao usuário ao digitar um ponto por exemplo alí no campo, ele não seja aceito, o próprio Élcio, ensinou em um artigo como fazer isso facilmente usando Expressões Regulares, mas eu acho que a equipe de desenvolvimento não está nem aí pra isso, bem, particularmente eu aconselho a eles fazerem um curso lá na Visie. E você, o que acha, achou mas algum erro pitoresco no site? Deixe aqui a sua opnião.

Páginas:«12345678»