Isso já é de se esperar, com a popularização da internet móvel e a redução dos preços (olha que aqui no Brasil ainda continua caro) de aparelhos que permitem acessar a internet, o uso destes aparelhos se torna cada vez mais popular.

Com isso surge a importância das empresas adequarem os websites para o acesso móvel, pensando na apresentação, usabilidade e no conteúdo que será exibido para o usuário final.

É claro que os smartphones permitem navegar em um site construído para desktop, mas a experiência em usar um site preparado para o dispositivo que estamos usando é muito melhor.

As grandes empresas como o Google, Facebook, Yahoo, LinkedIn, Wikipedia estão adequadas para o acesso móvel e a tendência é que isso se espalhe para as demais empresas que atuam com ecommerce, serviços, e sites institucionais.

Tendo em mente o crescimento de acessos móveis, as empresas devem adequar os respectivos websites, mas é importante buscar prestadores de serviços que busquem performance, usabilidade, adequação de conteúdo e um design adequado.

Visite o site Go MO e veja algumas Razões para se importar com Mobile  e algumas Melhores Práticas.

Leia também o artigo Mobile First – A arte de pensar com foco, é bem legal e completo.

Google Developer Day 2011 - São Paulo

Embora o evento estivesse lotado, a estrutura do local estava muito boa, com fones para tradução simultânea para os interessados, Wi-Fi, coffee breaks, lanche para o almoço e os brindes que são sempre bem vindos.

Alguns dos assuntos abordados foram Android, Chrome, HTML5 e Cloud. A programação completa pode ser visualizada na Agenda do Evento.

No meu ponto de vista, as apresentações foram conceituais, no entanto, com exemplos de aplicações e as vezes com demonstrações de codificação. O mais interessante foi observar as novas possibilidades que despertaram ideias de como e onde poderíamos usá-las.

Eu acho que agora vale a pena pesquisar sobre os temas, acompanhar alguns vídeos e com base nisso, aplicar e inovar.

Um problema é que diferente de outras linguagens que são validadas pelo próprio editor, o JavaScript pode ser codificado de diferentes formas, isso gera abertura para práticas ruins de codificação que podem gerar problemas de performance ou bugs que podem ocorrer em certas versões de navegadores ou sistemas operacionais.

Como normalmente os prazos para a entrega dos projetos são apertados e é difícil conseguir realizar todos os testes que deveriam ser feitos, uma forma interessante de checar o seu javaScript é usar o JSLint. O JSLint, criada pelo Douglas Crockford, verifica se existe erros de sintaxe e checa a qualidade do seu código emitindo avisos que indicam a linha aproximada do possível problema.

Se o JSLint apontar um aviso, isso não quer dizer que o seu javascript não irá funcionar, mas é interessante checar o apontamento, desta maneira o seu código terá qualidade e o risco de erros será reduzido.

Faça um teste acessando o site http://www.jslint.com/.

Os Skip Navigation são links com âncoras inseridos nas páginas que servem como atalhos para facilitar a localização de um determinado conteúdo através do teclado. Para usuários que navegam com o mouse isto não é relevante, porém para um deficiente visual usando um leitor de tela, esta técnica ofecere uma alternativa ágil para chegar ao conteúdo desejado.

Por exemplo, imagine uma página com um menu superior com cerca de 30 links e logo abaixo o conteúdo principal. Navegando com o teclado usando a tecla tab será necessário passar por todos os links até chegar na informação desejada. A solução é simples, basta inserir um link antes do menu apontando para um elemento da página onde está o conteúdo principal.

Skip Navigation: Exemplo 1 (Teste em um bom navegador. Firefox por exemplo.)

Bug do Skip Navigation no Internet Explorer

Se você testou o Exemplo 1 usando o Internet Explorer o resultado não foi o esperado. Ao acessar o link o foco vai para o elemento desejado, porém ao usar a tecla tab novamente o foco permanece no link original. Na verdade o foco deveria ir para o próximo elemento da página que neste caso é o link “Ir Para o Menu”. Para resolver o problema basta definir uma largura para o elemento que será referenciado na âncora.

Skip Navigation: Exemplo 2 (Funciona no Internet Explorer)

Skip navigation No Real Internet Banking

No Real Internet Banking o recurso Skip Navigation foi usado em páginas de menus. Como estas telas de menus possuem uma lista de transações e subtransações, o uso desta técnica economiza tempo do usuário que está navegando com um leitor de tela e deixa a navegação mais simples.

No próximo post eu irei mostrar um menu construído com listas não ordenadas em conjunto com o recurso Skip Navigation.

Referências

WebAIM: “Skip Navigation” Links
JimThatcher – kip Navigation

A especificação para as adequações no código foi feita com base em uma análise realizada pela consultoria Fhios. Com o relatório da Fhios em mãos foi definido um padrão de codificação com base nos padrões web dando a devida atenção ao funcionamento no Virtual Vision.

Por que adequações? O foco do projeto era realizar modificações no código para permitir o acesso de deficientes visuais, e não a reconstrução das telas. Esta linha foi adotada para não inviabilizar o projeto. Afinal, são aproximadamente 800 páginas. A grande maioria são de arquivos transacionais que requerem atenção especial, pois qualquer problema pode representar um dano a imagem do banco.

Principais adequações do código

• Definição do título (<TITLE>) em todas as páginas
• Aplicação do atributo alt nas imagens
• Inclusão do atributo title nos links
• Associação da tag label aos campos de formulários
• Criação das tags <fieldset> e <legend>
• Inclusão das tags <caption>, <th>, <thead> e <tbody> nas tabelas
• Substituição da tag <b> por <strong> e <i> por <em>
• Reconstrução dos menus usando listas não ordenadas
• Aplicação de skip navigations para facilitar a navegação

Nos próximos posts eu irei detalhar melhor os pontos acima e comentar sobre os casos específicos e soluções encontradas.

Um detalhe que eu creio que a maioria não conhece é a existência do .shtml. Um arquivo .shtml é um arquivo .html que pode usar o recurso SSI (Server Side Includes). Com esta extensão não é necessário que o seu site seja feito com ASP, PHP ou JSP para usufruir dos includes. Basta colocar a extensão .shtml no arquivo e executa-lo no navegador usando um servidor local. Exemplo: http://localhost/arquivo.shtml

Chamando um include

Exemplos para chamar um include:

<!–#include file=”menu.inc” –>

ou

<!–#include virtual=”/includes/menu.inc” –>

Prefira sempre a instrução virtual, assim o path do arquivo será relativo ao diretório raiz do site. Isto garante que o trecho de código usado para chamar o include seja sempre o mesmo em qualquer documento do site.

Para maiores informações visite a página Server Side Includes | using SSI to keep your pages up to date do site HTMLSource.

É inegável que a funcionalidade é muito boa. Seria chato e demorado fazer uma requisição para o servidor simplesmente para reordenar uma coluna específica. Ainda mais se pensarmos em milhares de acessos simultâneos.

No site DHTML Crossbrowser Fácil — Um Guia Rápido para Desenvolvedores (leitura recomendada) que o Elcio criou, há um exemplo para classificar colunas de uma tabela usando Javascript.

Porém a tabela que eu precisava ordenar é mais complexa. Trata-se de uma listagem com colunas numéricas, alfanuméricas e ainda por cima, havia uma coluna com radiobuttons. Para a “minha salvação” encontrei a página sorttable: Make all your tables sortable no site kryogenix.org.

A biblioteca é bem interessante. Com uma instalação simples é possível ordenar vários tipos de dados, indicar quais colunas não devem ser classificadas e além disso, definir o rodapé da tabela. Assim é possível não mexer nos dados que estão no fim da tabela.

Pesquisando na internet, eu encontrei alguns posts sobre formulários acessíveis. Porém, no meu caso eu preciso aplicar as tags <fieldset>, <legend> e <label> em um projeto gráfico já estabelecido, e além disso, manter o restante da codificação da página como está.

Um grande problema que eu encontrei, foi na definição de estilos para a legenda. Isto porque há diferenças de posicionamento da <legend> entre os IEs e Firefox. O artigo Legends of style no site Tyssen Design resolveu o meu problema.

Basicamente consiste em colocar um <span>, ou um <div> dentro da tag <legend> e aplicar os estilos nestes elementos. Veja os exemplos para formatar a legenda que o John Faulds disponibilizou. Com isto, eu consigo adaptar as páginas existentes.

Posts sobre formulários acessíveis

SERPRO – Acessibilidade na web – Formulários
A List Apart: Articles: Prettier Accessible Forms
WebAIM: Creating Accessible Forms
Tutorial CSS – Formulários acessíveis – Parte 1

Web Standards

Bom! Eu creio que as pessoas acabam cometendo alguns deslizes por falta de informação, ou porque estão agarradas a antigos paradigmas. Em fim, a idéia não é crucificar ninguém, mas mostrar as vantagens que os padrões trazem para a “nossa vida” e para o nosso bolso. Este último principalmente!

Vantagens dos Web Standards

Site acessível em diferentes user-agents

Abranger o máximo de dispositivos é fundamental para quem deseja viabilizar um site na internet. Não é viável excluir alguns usuários do site, devido ao navegador que ele usa, por exemplo.

Melhor indexação dos sites de busca

Aprimorar a colocação nos sites de busca é essencial, se levarmos em conta a quantidade de páginas que encontramos atualmente.

Código mais limpo e fácil manutenção

Tempo é dinheiro. Nem sempre quem implementa o site é a mesma pessoa que cuidará das manutenções. Se a codificação é mais simples, menor será o tempo de análise.

Melhora a navegabilidade de usuários com deficiências

Um site construído com base nos Web Standards, prioriza o conteúdo organizando o mesmo de forma semântica. Ou seja, mesmo que a formatação gráfica seja desabilitada, o conteúdo continua fazendo sentido. Leitores de tela por exemplo, como o JAWS, o Virtual Vision fornecem atalhos que permitem classificar as informações que estão em listas(<UL>, <LI>), ou que foram definidas como títulos (<H1>, <H2>) .

Facilidade para personalizações do layout

Usando CSS é possível diferenciar o layout para determinados segmentos de clientes, sem maiores dores de cabeça. Ou até mesmo, remodelar o visual. Um exemplo clássico é o site css Zen Garden

Consequências de não usar

Não seguir os Web Standards quer dizer restringir o acesso. Imagine um usuário navegando com o Firefox tentando comprar um produto que a muito tempo deseja, porém o site de venda só funciona no IE. No mínimo frustrante! Com certeza, este usuário irá encontrar outro site com melhores condições de atendê-lo.
Isto vale não apenas para diferentes browsers, mas outros dispositivos que acessam a internet e softwares que auxiliam pessoas com deficiências.

Reflexão

Será que alguém mais acha que seguir os padrões é uma “modinha”? Caso sim, é só dizer o porque. No entanto, vale a pena pesquisar!

Uma alternativa é usar as versões standalone do Internet Explorer disponíveis no evolt.og. Funcionava bem até o lançamento do Internet Explorer 7. O problema acontece, pois quando a versão 7 é instalada, a versão standalone do IE 6 passa a usar a engine do Internet Explorer 7. Mais detalhes no site Revolução Etc no post O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP.

Como rodar o Internet Explorer 6 e 7 na mesma máquina?

Uma solução bacana pode ser encontrada no link Install multiple versions of IE on your PC. Apenas baixe e instale o arquivo do link “Download Multiple IE installer”. Funciona direitinho. Embora, existam alguns bugs dependendo da versão do IE, os testes não são prejudicados.