25
Jun 10
publicado por andr3, às 18:39 | comentar | ver comentários (0)

A dConstruct é um evento de um dia, organizada pela Clearleft em Brighton, que se foca sempre em temas interessantes para quem constrói sites e aplicações Web.

Ano após ano, tem sido não só um exemplo em termos de conteúdo mas também a nível dos fantásticos sites da própria conferência... o que nem sempre acontece em sites de eventos relacionados com a web ("Em casa de ferreiro..." hehe)

Podem confirmar os sites das edições anteriores: 2005, 2006, 2007, 2008 e  2009. Para confirmarem o conteúdo, espreitem a página do podcast do ano passado.

Este ano não desiludiram (2010), em que o site para além de bem construído a nível visual, inclui uns quantos pormenores a nível técnico para deliciar a audiência-alvo; para além do uso de microformatos (como já é hábito) inclui também bom uso de media-queries (CSS) para o site se adaptar aos vários tamanhos de ecrãs que podem aceder à página (experimentem com um Android ou iPhone).

Edição de 2010

Este ano o tema é Design & Criatividade e conta com nomes como:

A data está confirmada para dia 3 de Setembro e os bilhetes vão ser postos à venda no dia 6 de Julho às 11h (UK).

Adicionem aos vossos calendários: programa da conferência (subcrever), início da venda dos bilhetes.

18
Jun 10
publicado por andr3, às 16:55 | comentar | ver comentários (12)

Nos últimos anos tornou-se cada vez mais frequente encontrarmos com pequenos controlos na web que são enriquecidos com a magia do JavaScript.

Sejam eles tabs (abas em Português), paginações, votações, etc., o que interessa é que o controlo "quebra" o conceito de hiperligação (link) do hipertexto. Como conceito, os links servem para interligar hiper-documentos em que cada link refere um outro documento através do seu URL.

Ora, uma vez que o AJAX permite carregamento de conteúdo sem refrescar toda a página, esta é uma técnica perfeita para mostrar grandes quantidades de conteúdo que não são necessariamente acedidos em todas as visitas.

Exemplo do link Todo o SAPO na Homepage do SAPO

Evitar barreiras desnecessárias

Existem imensas formas de programar o comportamento do exemplo mostrado.

  1. <a href="#" onclick="mostrarTodoOSapo();">Todo o SAPO</a>

    O browser executa a função de JavaScript e segue o href, provocando às vezes um scroll para o topo. Sem JavaScript, nada acontece ao clicar/activar o link.

  2. <a id="todo-o-sapo" href="#">Todo o SAPO</a> e num ficheiro à parte de JavaScript $('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};

    O browser executa a função de JavaScript e não segue o href. Sem JavaScript, nada acontece ao clicar/activar o link.

  3. <a id="todo-o-sapo" href="/todo-o-sapo">Todo o SAPO</a> e num ficheiro à parte de JavaScript $('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};

    O browser executa a função de JavaScript e não segue o href. Sem JavaScript, o browser segue normalmente o href, logo que o documento servido nesse URL deve imitar a função desempenhada por JavaScript.

Neste último ponto, estamos a falar duma questão de acessibilidade visto que se trata de permitir acesso ao conteúdo. No entanto, ao resolver este problema estamos também a melhorar a usabilidade do link uma vez que passamos a permitir também que o utilizador opte por abrir o link numa nova Janela ou tab (opção "Abrir link numa nova Janela" do menu contextual).

Esta solução tem o custo de ter de desenvolver uma versão server-side da funcionalidade mas muitas vezes isso é bastante simples e justifica o investimento.

Exemplo prático

Quando desenvolvemos o sistema de tabs da Homepage do SAPO, tivemos todos estes cuidados. Para além disso, era crucial que o utilizador pudesse usar o endereço do browser para partilhar o link para determinada parte da homepage.

Assim sendo, adoptámos a seguinte estratégia...

location.hash = '/'+lnk.getAttribute('href');
//exemplo: http://www.sapo.pt/noticias => http://www.sapo.pt/#/noticias

Os links que tiveram esta atenção foram:

No entanto, não conseguimos resolver um cenário.

  1. Utilizador com javascript, partilha o endereço do browser: http://www.sapo.pt/#/noticias/tecnologia
  2. Utilizador sem javascript segue este link e vê a aba por omissão aberta e não a de tecnologia.

Nesta situação, não conseguimos que o link partilhado seja outro sem provocar um recarregamento da página. Também não conseguimos que o link partilhado funcione sem javascript porque a parte do endereço chamada "Hash" não é enviada para o servidor.

Se tiverem algumas ideias, deixem nos comentários em baixo.

Mais pormenores

Se ainda assim quiserem ler sobre esta técnica, normalmente apelidada de JavaScript Não-Obstructivo (Unobtrusive JavaScript), podem consultar os slides publicados em Abril de 2009 no Blog do Developers: JavaScript done right.

11
Jun 10
publicado por ivogomes, às 14:20 | comentar | ver comentários (0)

Além da componente de usabilidade e user experience, aqui no SAPO também damos grande valor à acessibilidade. O nosso objectivo é que todos os nossos sites e produtos sejam acessíveis, no entanto dado que há centenas deles (muitos já são bem antigos) não é fácil mudar tudo de um dia para o outro.

Felizmente, pouco a pouco vamos melhorando este aspecto e no mês passado realizámos alguns testes de acessibilidade com utilizadores com vários níveis de necessidades especiais: invisuais e doentes com paralisia cerebral (com vários graus). Normalmente quando se fala em acessibilidade na web, só se pensa nos screen-readers e nos invisuais, mas no decorrer dos testes verificámos que além disso é extremamente importante pensarmos também na destreza manual ou na forma como os utilizadores usam os vários sistemas apontadores para navegar.

Os resultados dos testes demonstraram que na maior parte das vezes estes utilizadores não procuram uma "versão acessível" do site, mesmo tendo lá o link para tal. Talvez seja por acharem que não precisam de uma versão acessível, ou por não estarem habituados a ter essa opção e por isso ignoram-na. Este facto vai de encontro com a recomendação de conceber um design universal, que funcione para todos. Esse design só tem é que se adaptar às várias circunstâncias (quer seja através do aumento do tamanho dos textos e controlos, quer seja através do aumento do contraste entre os elementos usando uma folha de estilo alternativa). Estes foram, aliás, os principais problemas encontrados nos testes com os doentes com paralisia cerebral (dificuldade de visão/pouco contraste para ler os textos; e controlos demasiado pequenos para conseguirem clicar eficientemente).

Dispositivo apontador para o GRID

Em cima: imagem de um dispositivo apontador usado pelos doentes com paralisia cerebral para controlarem o computador (usando o sistema GRID)

 

Durante as próximas semanas iremos continuar a realizar mais alguns testes. Se tiverem algum tipo de deficiência ou conheçam alguém com alguma necessidade especial e estejam disponíveis para participar, podem responder com um comentário a este post ou escrever-nos para: acessibilidade@sapo.pt

Teremos todo o gosto em receber-vos cá :)

Categorias:
02
Jun 10
publicado por andr3, às 11:56 | comentar | ver comentários (0)

No passado mês de Maio, ocorreu em Lisboa uma conferência que trouxe a terras Lusas alguns dos maiores nomes da nossa área: a UX LX.

Não é todos os anos que temos o Jared Spool e o Steve Krug (entre muitos outros) a assistir a uma palestra do Peter Merholz.

Toda a equipa do Departamento de Qualidade do SAPO este presente e todos concordamos que foi uma conferência extremamente rica em conteúdo e oradores—algo raro no nosso país.

Slides

Após a conclusão da conferência, os oradores começaram rapidamente a depositar no slideshare as suas apresentações. Algumas não funcionam muito bem sem as explicações do orador mas mesmo assim há importantes mensagens que se podem retirar examinando apenas os slides.

Slides da UX LX no Slideshare

Slides sugeridos

A equipa do Dept. de Qualidade e Usabilidade do SAPO, que esteve presente em massa no evento, juntou-se e elaborou uma lista de slides sugeridos para que começassem pelos melhores. Aqui ficam as nossas recomendações.

Gostávamos de poder destacar mais apresentações, mas muitas delas (ainda?) não foram partilhadas. Especialmente a do Web Dogma do Eric Reiss. ;)

Até para o ano!

Categorias: , , , ,
Autores
Pesquisar
 
Posts recentes

Processo de criação do ME...

Testes de Usabilidade no ...

MEO Interactivo

Banco de Padrões de Desig...

dConstruct 2010

JavaScript não deve compr...

Acessibilidade no SAPO

Slides da UX LX - 2010

"Mostrar password" consid...

UX - O Regresso

Arquivo

Fevereiro 2012

Setembro 2010

Julho 2010

Junho 2010

Maio 2010

Setembro 2009

Julho 2009

Junho 2009

Maio 2009

Categorias

todas as tags

Subscrever feeds