JulioGreff.net » Usabilidade/Acessibilidade

O Internet Explorer 6 é culpa nossa!

Julio Greff — Mon, 06 Jul 2009 11:20:24 +0000

Não há nada que um desenvolvedor web odeie mais do que o Internet Explorer 6. Por mais que desejemos, parece que ele não vai embora. Entretanto, e por incrível que pareça, a permanência do Internet Explorer 6 no mercado é culpa nossa!

Logo que o IE7 foi lançado em 2006, parecia algo lógico manter a compatibilidade com o IE6 por algum tempo, por mais doloroso que isso fosse. Usuários comuns mal sabem diferenciar entre um browser e o Google, atualizar para o IE7 nos primeiros dias seria pedir demais. O estranho é que, até hoje, quase 3 anos depois, muitos de nós continuam a dar suporte ao browser. Perdemos tempo, paciência e alguns anos de vida corrigindo bugs e assegurando que tudo funcione relativamente bem. Isso significa que nivelamos nosso desenvolvimento por baixo, deixando de usar coisas como PNGs transparentes, muitos seletores CSS e scripts mais eficientes, só para começar a listar alguns. Algo está errado aí, você não acha?

Mas se o browser é usado pelo usuário, como isso pode ser culpa nossa? Simples: enquanto tudo funcionar, o usuário não fará o menor esforço para atualizar seu software. O usuário é acomodado (pra não dizer ignorante). É preciso tomar atitudes para que ele se atente que seu software está muito ultrapassado, e essa atitude cabe a nós. Por pressão dos clientes e dos nossos superiores, o máximo que conseguimos foram barrinhas sutis no topo da página que, convenhamos, não servem para nada mais do que decoração e alívo de consciência. Será preciso muito mais que isso.

Até que as coisas deixem de funcionar, o usuário não fará nada. Fato. Em um mundo ideal, os sites de maior tráfego não dariam mais suporte a browsers legados, e a evolução começaria a acontecer. Como não vivemos em um mundo ideal, precisamos dar o nosso jeito. Educar o cliente, os parentes, os amigos, pode até parecer legal, mas é numa escala muito pequena. Em meus projetos pessoais, coisas como a singela tela acima começarão a aparecer. Como freelancer, o suporte ao IE6 terá seu preço (e as telas de aviso serão um pouco mais educadas). Na agência onde trabalho ainda enfrento alguns problemas, mas na maioria dos projetos o IE6 é completamente ignorado, e simpáticas telas explicando como atualizar o browser estão sendo implementadas.

Não existe mais motivo algum para a existência do IE6. Não deveriam mais existir motivos para mantermos a compatibilidade. Eu seria um profissional muito mais feliz se, em 2010, eu nunca mais ouça falar em Internet Explorer 6. Acredito que esse seja o desejo de muitos, e espero que ele consiga ser realizado dessa vez. Vamos fazer nossa parte e acabar com o monstro que criamos?

Posts Relacionados

Novatec – 20% de desconto!

Julio Greff — Wed, 15 Apr 2009 11:59:52 +0000

Recentemente fui contatado pela Editora Novatec para participar do programa de afiliados deles. Tenho certeza que vou demorar um bom tempo pra receber qualquer coisa que seja, mas há um lado bom: eles me ofereceram um código promocional, com 20% de desconto.

O esquema funciona assim: você compra qualquer livro do catálogo da Novatec e, na hora de fechar o pedido, entra com o código promocional JULIOGREFF. Você ganha um bom desconto, e eu uns trocados.

Caso você queira comprar algum livro, mas ainda não tem idéia do que, aí vão alguns que podem valer a compra:

Expressões Regulares – Uma Abordagem Divertida (2a Edição), do Aurélio
Extreme Programming, do Vinícius Manhães Teles
jQuery – A Biblioteca do Programador JavaScript, do Maujor
Ruby on Rails, do Rodrigo Urubatan

Se você precisava de (mais algum) incentivo pra comprar um livro, esse é um. Tá esperando o que?

Posts Relacionados

Hijax: Ajax Acessível

Julio Greff — Thu, 22 May 2008 20:08:11 +0000

De longe, um dos maiores problemas no uso de Ajax é a acessibilidade. A facilidade em atualizar apenas uma parte da página tornou os desenvolvedores menos preocupados com a acessibilidade de seus projetos. Sem JavaScript, sites inteiros tornam-se completamente inacessíveis. Então, qual a solução para esse problema?

Para evitar que o caos venha a este mundo, surge outra palavrinha: Hijax. Mas primeiro vamos voltar a algumas premissas do desenvolvimento web: aprimoramento progressivo (progressive enhancement) e degradação elegante (graceful degradation), e me desculpem se errei a tradução dos termos…

Aprimoramento Progressivo – Primeiro o Conteúdo

Ninguém começa (ou pelo menos não deveria começar) a desenvolver uma aplicação primeiro pela camada de comportamento, isso vai completamente contra a filosofia de desenvolvimento em camadas (primeiro o conteúdo, depois a apresentação e, por último, o comportamento).

A idéia é começar o desenvolvimento de baixo. Em outras palavras, desenvolva da maneira antiga, usando links como sempre se usou desde que a Internet é Internet, devolvendo páginas inteiras como resposta. Depois, somente depois, comece a adicionar funcionalidades que melhorem a experiência do usuário (nada de frescuras que o usuário só vai achar bonito, pra que reinventar o link?).

Degradação Elegante – Útil sem perder a elegância

“Degradação elegante” significa perder alguns recursos sem perder suas funcionalidades. Pode-se perder algumas animações e outros fru-frus, mas perder acesso ao conteúdo é inadmissível. CSS não é tão importante quanto as informações que queremos mostrar. Nunca ouviu a frase “mais ajuda quem não atrapalha”? A idéia é a mesma.

O desenvolvimento progressivo e em camadas é o caminho mais rápido para a degradação elegante. Mesmo utilizando Ajax, o conteúdo ainda deve continuar acessível através de um link comum. É aí onde Hijax entra.

Hijax – Seqüestrando os Links

O próprio termo explica bem o uso da técnica. Hijax, do inglês hijack (“seqüestrar”), quer dizer seqüestrar os links comuns, e transformá-los em links Ajax. Simples assim.

“Simples assim”? Bem, nem tanto, eu confesso. Seus scripts server-side precisam estar preparados para decidir se enviam o “pacote completo” ou a “versão básica” da página, se for uma requisição normal ou uma requisição assíncrona, respectivamente. Uma breve dica: header X-Requested-With. Duas versões do site? Nunca mais, isso morreu junto com o Netscape, há muito tempo.

Vale lembrar que somente o uso de Hijax não faz uma aplicação completamente acessível, usável e rica. Há muito mais a se pensar. Já falei sobre alguns aspectos para uma boa aplicação Ajax, mas tenho absoluta certeza que não passei nem perto de tudo que é necessário. Mas tudo isso já é uma boa base a ser levada em consideração, e com isso já é possível criar algo melhor que muita coisa que existe por aí, tenha certeza. E você, tem feito seu dever de casa e seguido princípios para tornar sua aplicação disponível a todos?

Posts Relacionados

Ajax vs. Moda vs. Performance

Julio Greff — Sun, 11 Mar 2007 16:24:31 +0000

Lendo o Tableless, “Cuidado para não regredir“, continua a velha discussão sobre o que é bom, o que é moda e o que realmente não presta pra nada (esse último não é o caso de nenhum dos dois posts…).

Vamos à uma discussão rapidinha. Pense: vale a pena escrever uma montanha de código JavaScript, correndo o risco de ficar completamente inacessível para alguns browsers, quebrar a cabeça, fazer algo bonitinho que demora o dobro pra carregar, sabendo que você podia escrever uma (uma só, nada mais, sem exagero) única linha? É o caso do pessoal que faz todos os links usando Ajax.

E não é só isso. Há muita coisa que poderia ser evitada. Carregar páginas quase inteiras, pequenos textos estáticos (babem…), outras coisinhas irritantes que pulam na tela… Quer que eu prove que não melhora a performance? XML HTTP Performance and Caching. Creio que posso te convencer.

Descartando a acessibilidade por enquanto. Um site que use Ajax, pra ser mais útil e mais rápido, precisa de muito planejamento. Um ótimo exemplo de planejamento é o Gmail e Google Reader. Inclua a acessibilidade: ainda temos o Google na frente (Gmail sem Ajax também existe). Uma boa discussão sobre isso também rolou lá no Ajax Online.

Apesar de tudo, ainda acredito que já evoluímos muito, e estamos evoluindo. O Ajax no Brasil já amadureceu bastante (até o Ajax Online abandonou a versão 100% Ajax, evolução). Ainda temos muito a progredir, e vai demorar, eu sei, mas não podemos parar. Graças a muita gente já temos trabalhos bons. Agora queremos trabalhos ótimos, basta amadurecer a idéia.

Esta é a minha opinião, não tomem como certa. Apenas pense sobre isso, concorde ou não. Até!

Também já havia falado sobre essas algumas questões relacionadas a Ajax em Ajax vs. Acessibilidade. Também falei sobre A Aplicação Ajax Perfeita, que pode colocar algumas minhocas em sua cabeça…

Posts Relacionados

Títulos e Usabilidade

Julio Greff — Wed, 29 Nov 2006 21:38:44 +0000

Ultimamente meus posts estão saindo todos dos meus feeds, então esse é mais um: HTML Page Titles & Usability. Recomendaria que todos lessem, mas como tem gente que não domina o inglês, vou fazer um pequeno resumo.

Seguinte: você entra em um site, como um catálogo (o exemplo usado foi o iStockPhoto). Aí você clica em vários links, lógico. Quando vai voltar para algum, vê algo assim:

Isso é realmente irritante. Você vai procurar, daqui a pouco ou amanhã mesmo em seus históricos, e só vai encontrar o título da página e o nome do site. Chato pra caramba.

A sugestão foi a seguinte: utilizar Title of this page < Section of the Website < Name of the Website. Bem mais útil.

Explicando: não posso mudar aqui, antes que me chamem de chato que não cumpre o que diz. Esse WP não permite, é versão MU. Nesse caso, me guentem até poder pagar um servidor pago… Até!

Posts Relacionados

Feeds Parciais para Móveis

Julio Greff — Fri, 10 Nov 2006 21:32:30 +0000

Quando aderi a campanha dos feeds completos, do Rafael Arcanjo, pensei em contentar gregos e troianos com os feeds completos. Mas acabou de entrar no meu Bloglines um post de Aldemir Silva, Feeds Parciais para Dispositivos Portáteis. A “campanha” não é dele, mas fiquei sabendo pelo blog. Em resumo, a “campanha” fala sobre “analisar o outro lado da moeda”, ou seja, disponibilizar feeds resumidos para dispositivos móveis. Por quê? Leia aqui, “O outro lado da campanha dos feeds completos”. Realmente, existem vantagens e desvantagens.

A solução? Disponibilizar dois feeds: um resumido, um completo. ~~Infelizmente, se depender do WordPress, vou ficar fora dessa. Estou dando uma olhada no FeedBurner agora, pra ver se a situação se resolve. Se alguém tiver uma idéia, me passe.~~ Já está funcionando o feed parcial também: JulioGreff Parcial.

Na minha opinião, é bem legal essas idéias que surgem. E até concordo com a Bia. Visitei meu blog ontem pelo celular. Levou um tempinho pra carregar, mas estava lá. Meio desconfigurado, mas gostei. E espero que mais gente experimente os dispositivos móveis (eu só pude experimentar mesmo, não tenho dinheiro suficiente para grande tráfego de dados mesmo).

Enfim, está dada a largada para mais uma corrida de acessibilidade! E lá vou eu ver o que posso fazer…

Posts Relacionados

Disponibilize seus feeds completos

Julio Greff — Sat, 04 Nov 2006 16:53:23 +0000

Hoje estava navegando pelo BlogBlogs e me deparei com um banner no canto da tela: “Ofereça seu feed COMPLETO!”. Curioso que sou, cliquei. O resultado foi um post de Rafael Arcanjo: Disponibilize seu Feed COMPLETO!. O post se trata de uma campanha para que os blogueiros brasileiros disponibilizem seus feeds (RSS/Atom) completos, e não somente o sumário, definidos como “martírio”.

Sem nem mesmo pensar muito, apenas na usabilidade, estou aderindo à campanha, e distribuo a a partir de hoje meus feeds COMPLETOS. Sem sumários.

~~O próprio Rafael coloca no site alguns banners para você colocar em seu blog. O meu já está lá, depois do banner do MDC (recém colocado também): 80×15: Feed Completo.~~ Sim, banners retirados… Agora já passou.

Gostei de ver. Iniciativa muito boa. A análise também. Parabéns, Rafael. Ajude você também, junte-se à essa campanha.

Mas por quê?

Não sou nenhum técnico em usabilidade, mas ouça o que digo: mesmo o seu leitor não visitando seu site toda vez que você disponibilizar um novo post, ele vai le-lo completo, e não o sumário. Como diz o autor da campanha, você não vai perder nenhum leitor, mas sim ganha-los, estreitando a relação entre você e ele. Ele não lerá seu artigo apenas se o sumário for bom.

Posts Relacionados

Ajax vs. Acessibilidade

Julio Greff — Mon, 23 Oct 2006 23:11:18 +0000

Nos últimos tempos, com a iminente web 2.0, fala-se muito em acessibilidade: motores de busca, deficientes, equipamentos precários ou dispositivos móveis, e uma infinidade de outras coisas.

Por incrível que possa parecer, a grande parte dos desenvolvedores torna suas aplicações utilizando Ajax completamente (ou quase completamente) inacessíveis, principalmente para os motores de busca.

Como os motores de busca não lêem JavaScript, como eles encontrarão o conteúdo de seu site, se ele for feito completamente em Ajax? E os seus usuários, como irão “favoritar” algum artigo que gostaram, se não há links?

Como já disseram, e eu repito, use ajax com moderação. Mas se você ainda deseja utiliza-lo ao extremo, seja por modismo, necessidade ou mesmo para se mostrar para os amigos, vamos tornar isso tudo acessível.

Antes de Tudo…

Como o Micox já disse em seu artigo, você deve planejar todo seu site como se Ajax não existisse. E eu estendo um pouco: planeje seu site como se nem o JavaScript existisse. Mais acessibilidade ainda? Planeje seu site como se CSS não existisse. Não, não estou louco. É possível, bem difícil, mas é possível. Essa é a grande sacada do desenvolvimento em camadas: primeiro o conteúdo, depois a apresentação e por último o comportamento.

Tá certo que hoje em dia são poucos os navegadores que não suportam CSS, mas nunca se sabe. Já o JavaScript é bem complicado mesmo.

Links

Primeiro de tudo: Ajax não veio para reinventar o link. O link é a alma da web. Mas podemos incrementa-lo, lógico. Utilizando o conceito de que você deve pensar em sua página como se JavaScript não existisse, o href não pode ser deixado de lado. Trocar o href de uma página por “javascript:” é suicídio. E pior ainda: trocar por “#alguma-coisa”. Se o usuário não tiver o JavaScript ativo, adeus pra seu site.

Então, como fazemos? Deixe o href como o link verdadeiro para suas páginas, sem ajax, sem javascript. E aí, no onclick, use:

ajax.request(...); return false;

Com o tempo a gente acaba descobrindo coisas interessantes: onclick não é a melhor maneira para capturar links. Leia: Hijax: Ajax Acessível

Isso fará com que, depois de clicado, o link apenas ative o JavaScript desejado, retornando false, para que não aconteça mais nada.

E quanto ao nosso querido hash? Sim, há lugar para ele também. Depois de toda a ação do JavaScript, antes de terminar sua função, inclua: top.location.hash = .... Simples, rápido e indolor.

Costume dos Usuários

Convenhamos: a tecnologia chega, mas nem todos estão preparados para ela. A maioria dos usuários está acostumado a esperar o “loading” do browser, e não dentro da página. Isso é um problema. Se você esquecer do seu “Carregando…”, o usuário pensará que a página travou, parou de funcionar, deu tilt, já era, babaus, enfim. Uma imagem que se mexe ajuda a dar a impressão que algo vai acontecer.

Outro costume dos usuários é o famoso botão voltar. Já postei aqui no blog uma solução para histórico. Não esqueça dela, torne-a melhor, se for o caso.

Várias requisições ao mesmo tempo

Nem todos sabem, mas os que já sabem se irritam bastate. Quando se clica em um link e, instantaneamente, se muda de idéia e clica em outro, a página vai para o último link clicado. Em ajax isso costuma não acontecer. Só a primeira requisição é carregada (nem sempre, claro). Já tive essa desagradável experiência. Coloque uma “fila de espera” para as requisições, para ocorrerem em ordem, ou para requisitar apenas o último clique. Cada uma das soluções se aplica a um caso em particular, não é uma receita específica para todos os tipos de bolo.

Bem, existem vários outros problemas relacionados a acessibilidade, mas já solucionamos os mais “críticos” (outras idéias podem ser encontradas aqui). Vai do bom senso de cada um tornar seu site compatível e acessível. Contribua para o verdadeiro espírito da Web 2.0!