Klaus Paiva

Esse texto surgiu de uma necessidade que é bastante comum pra nós, seres programadores de interfaces web.

Sabe quando o webdesigner desenha uma caixa de tamanho fixo (e largura variável, pra complicar um pouco), em que o texto deverá ficar contido ali dentro da caixa, e no caso do texto ser maior que o tamanho disponível, os famosos "três pontinhos" devem aparecer?

Pra ilustrar isso melhor, veja a imagem abaixo:

Caixa com dimensões fixas e conteúdo "ajustado" para caber

Um método comum de se fazer isso é contar o número de caracteres e colocar "...", caso o número de caracteres ultrapasse o número máximo de caracteres que ficarão visíveis. Claro que esse número máximo é uma estimativa e nem sempre o resultado fica bom. Além disso, pode acontecer do "corte" no texto acontecer no meio de uma palavra, gerando um resultado estranho ao visitante, "tipo isso aq...".

Nas CSS existe uma propriedade chamada "text-overflow" que, sob certas circustâncias, adiciona automagicamente "..." ao final do texto que não coube na área visível. OK! Problema resolvido então? Não exatamente...

O problema não está resolvido por conta de duas outras questões. Uma delas é que o Firefox ainda não implementa essa propriedade (sim, o IE tem! Moderno hein? ). A outra questão é que essa propriedade não se aplica nos casos em que o texto ocuparia mais de uma linha.

Se você quiser uma explicação mais detalhada (e exemplos) sobre a propriedade "text-overflow", acesse este texto no blog do PPK.

Voltando ao assunto original, agora precisamos resolver aquelas duas questões. Felizmente, com algum tempo de Google e mais algum tempo de pesquisa em fóruns, consegui encontrar algo capaz de ajudar nesta tarefa: o jQuery textOverflow Plugin.

O código é relativamente simples e oferece várias opções de customização. Aqui tem uma página de exemplo (exemplo 1) gerando algo similar ao que foi mostrado na imagem acima.

Caso você tenha vários elementos na página que vão receber esse tratamento, deixo uma dica: tome cuidado com a performance! Como é uma operação intensiva no DOM, a chance desse código deixar o navegador bastante lento é bastante alta.

Pra esses casos, se você realmente precisa dos "...", acho que vale a pena tentar juntar esse código com a solução de "execução de Javascript com pausas", proposta pelo Nicholas Zakas.

Fiz uma proposta com essa combinação. Ela pode ser vista aqui no exemplo 2 (com 100 elementos). Embora seja visualmente mais lenta, ela não trava o navegador em momento algum, mesmo no IE 6.

Bom, o texto ficou bem longo... mas acho que deu pra passar bem a ideia. Sugestões ou comentários, é só usar o formulário abaixo.

Durante as minhas leituras das referências para o TCC me deparei com um conceito que é amplamente empregado em páginas web: é a sensação de continuidade que um site, página ou sistema pode, ou deveria, ter.

Para explicar melhor esse conceito primeiro vou exemplificar como ele se aplica no contexto de páginas web em geral.

Imagine que você vai consultar o site da Receita Federal para saber o andamento da sua restituição do imposto de renda. Você acessa a respectiva página e insere seu CPF mas esquece de algum dos dígitos, você clica no botão "Consultar" e a página retorna com o campo do CPF vazio e nenhuma informação adicional.  O que você pensa? (Só pra deixar claro... não é isso que acontece no site, é apenas um exemplo...)

"Ué, o que aconteceu?", "Será que enviou?", "Será que o site tá funcionando?", "Será que eles não receberam minha declaração?", "Será que meu CPF está bloqueado?", além de mais outros N possíveis questionamentos.

Só que todos esses questionamentos somem de uma só vez se a tela que é mostrada após o envio trouxer uma mensagem de erro, além de outras informações contextuais que sejam revelantes. Em outras palavras, a tela exibe uma continuidade em relação ao que foi feito anteriormente.

Quando mudamos o contexto para uma aplicação com reconhecimento de fala a situação é similar. Imagine o seguinte o diálogo entre o sistema (máquina) e um ser humano.

E assim vai... Já deu pra perceber que este exemplo está com problemas, né? Quando o sistema reproduz pela segunda vez exatamente a mesma pergunta, o ouvinte não tem condições de saber o que aconteceu para a pergunta anterior ser repetida. Novamente, na cabeça do ouvinte, surgem uma série de questões e impressões:

"Eu acabei de falar Indaiatuba, será que ele não ouviu?", "Será que eu não posso viajar para Indaiatuba?", "Será que esse sistema entende mesmo o que eu falo?", "Será que esse sistema funciona?", entre outros.

O problema nesse contexto também se resolve da mesma forma, mantendo a conversa de forma contínua, similar ao que fazemos naturalmente ao conversar com outra pessoa. O exemplo acima poderia ser melhorado desta forma:

Perceba neste segundo exemplo que quando o sistema emite sua segunda mensagem ele repete a pergunta do destino da viagem mas, antes da pergunta há uma contextualização com a informação dizendo que "ele" não entendeu o que a pessoa havia dito.

Diante desses exemplos acredito que fica bem claro o quão é importante demonstrar para o usuário a continuidade nas possíveis interações que seu sistema permite. Um sistema que transmite essa sensação de continuidade não gera dúvidas nas ações de seus usuários e torna o sistema uma ferramenta melhor usável.

Curiosamente, este texto se relaciona muito com um texto que eu publiquei anteriormente sobre a importância do feedback positivo.

Nota: Os textos publicados com a identificação [tcc] no título são textos relativos aos assuntos que estou pesquisando para o meu TCC. Como eu estou na etapa de pesquisa e formulação das ideias, nem tudo o que for apresentado aqui deve ser encarado como verdade absoluta, além de estar sujeito a erros, como qualquer outro trabalho. Utilize seu senso crítico ao ler estes textos e, se você desejar, deixe seus comentários no formulário abaixo.

É, já faz mais de um mês desde o meu último texto. Confesso que eu não esperava essa correria logo no começo do ano. Aqui no trabalho precisei dar uma ajuda num projeto com o prazo apertado e, por conta disso e de alguns outros fatores menores, o desenvolvimento do meu TCC, cujo qual ainda não comentei nada por aqui, acabou sofrendo algum impacto.

O bom é que parece que as coisas voltaram a se normalizar. Vou aproveitar e comentar aqui um pouco sobre meu TCC, até porque ele vai me acompanhar até o final do ano.

Sobre meu TCC

Até parece que foi ontem que comecei minha graduação mas o fato é que já estou no último ano. =) Sendo assim chegou a hora de elaborar o "temido e famigerado" TCC.

Acho que as dúvidas que povoaram minhas ideias para a escolha do tema devem povoar as ideias de muitas outras pessoas também: devo procurar algo numa área que já conheço e/ou trabalho? Procuro algo numa área desconhecida para que eu possa aprender coisas novas?

Momento de indecisão =)

Diante dessa indecisão qual foi minha escolha? Optei pela segunda alternativa, elaborar o trabalho focado em uma área em que eu não tenho grandes conhecimentos mas que certamente vai me permitir um grande aprendizado.

E o tema que escolhemos (sim, é em dupla) para o TCC foi: "usabilidade em sistemas com reconhecimento de fala".

Confesso que o tema "usabilidade" já faz parte do meu conjunto de áreas de interesse mas, aplicado a sistemas com reconhecimento de fala é uma área totalmente nova para mim.

E qual a consequência de escolher uma tema assim "desconhecido"? Simples! Estou lendo muitas, mas muitas mesmo, coisas sobre o assunto ultimamente. Entre as várias coisas que li ou estou lendo, está o livro "Voice User Interface Design". Esse livro é muito bem escrito e está sendo meu "norte" na pesquisa.

Por fim, vou passar a escrever aqui no blog ideias relativas ao TCC, inclusive detalhar os objetivos da pesquisa, até para obter uma melhor fixação e reflexão sobre o assunto. Mas claro, não vou deixar de falar sobre desenvolvimento web em geral.

Hoje eu lia o livro "The Ruby Way" quando me deparei com a seguinte frase: "Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away", frase atribuída a Antoine de St. Exupery.

Refletindo um pouco sobre ela lembrei-me de um artigo que eu havia lido há alguns meses atrás, um artigo que falava sobre a importância do feedback positivo, numa associação entre jogos e programas de computador (ou sites).

Percebi que o artigo e a frase estavam, de alguma forma, conectados. Em termos de aplicações web, todos queremos uma aplicação Google-like: simples, clara e eficaz. E se você reparar bem, vai ver que as aplicações do Google (ou aquelas Google-like) possuem características que se encontram na frase ou no artigo acima.

Focando na importância do feedback positivo, veja esta parte: "Hearing the discovery fanfare makes you feel smart(...)". É essa sensação que um usuário espera sentir ao usar um site, uma aplicação web. Ele deseja se sentir no comando, ter poderes, sentir que a aplicação entende o que ele está fazendo.

A falta de feedback conduz ao desapontamento. Um clique para enviar um formulário e vai processar uma imagem? Informe que a imagem está sendo processada! Um clique para gerar o PDF do artigo (que ainda não está em cache)? Informe que o artigo está sendo preparado! Conseguiu preencher o cadastro completo? Uma enorme mensagem de sucesso!

Ao invés de simplesmente qualificar seu usuário como (l)user , avalie se não é a falta de feedback positivo que faz o usuário esquecer de seu site.