Rafael Cavalcante

No último post sobre montagem de home office, falei recomendei as opções que eu gosto para mouse e teclado, e agora vou partir para uma parte importante que é a mesa.

Vale lembrar que você pode gastar de R$ 100,00 até R$ 2000,00 com uma mesa, tudo vai depender do quanto você quer gastar, do espaço que você tem, de qual material você precisa, o que vai ficar em cima da mesa, etc. Vou começar a lista com as mesas, e com preço crescente. Essas buscas foram feitas pela internet, e dependendo de onde você morar, vale a pena dar uma olhada em lojas especializadas para comparar preços e custo-benefício.

Leia o resto do artigo

O texto abaixo é de autoria de Ross Allen, e foi publicado no blog de desenvolvedores do airbnb. A tradução e distribuição do artigo foi autorizada pelo autor.

Trabalhando em um dos Chromebooks que a Google empresta durante os vôos da Virgin America, eu percebi a rolagem de algumas páginas do site airbnb.com ficavam lerdas, mais do que o de costume quando uso meu notebook de trabalho. A princípio culpei o hardware humilde do Chromebook, mas alguns outros sites com bastante conteúdo estavam com a rolagem normal. Percebi que o problema era o box-shadow, aplicado na lista de resultados da busca, então decidi investigar.

Usei a aba de timeline do Chrome para ver a duração do preenchimento do box-shadow nos elementos. Antes de cada teste, eu juntei alguns resultados rolando o conteúdo da página até o mesmo local, usando window.scroll(0, 140). Então, cliquei duas vezes na seta para rolar a página, sendo que cada clique corresponde a um scroll de 40 pixels, e guardei os resultados.

Elemento com 10px de blur-radius do Box-Shadow, que equivale 3 aplicações a cada 40px de rolagem.

Para checar se o problema era realmente o Box-shadow, diminui a quantidade de blur (blur-radius) pela metade. O resultado foi uma rolagem mais suave, e os números mostraram que a aplicação foi feita em metade do tempo.

Elemento com 5px de blur-radius do Box-Shadow, que equivale 3~4 aplicações a cada 40px de rolagem.

Já que percebi que o box-shadow era o culpado, resolvi removê-lo por inteiro. A rolagem foi bem mais suave.

Então, só pra finalizar o teste, apliquei um box-shadow monstruoso. O Chromebook não gostou nem um pouco de um blur-radius de 300 pixels. Ele levou exatamente dois segundos para preencher a área com sombra a cada clique para rolar a página para baixo (40 pixels por clique, lembra?). Veja a performance na tabela abaixo:

Efeitos da pesquisa no produto

Alteramos o box-shadow para 3 pixels e adicionamos um offset de 3px para manter um visual mais simples e não prejudicar a performance de aparelhos com um poder de processamento mais fraco.

Porque isso foi importante? Eu tenho por volta de 3 visitantes usuários de Chromebook!

Seus visitantes que usam Chromebook podem ser poucos – ou nenhum, como é o caso de muitos sites no Brasil – mas o Chromebook é baseado no Chrome, que usa a engine Webkit, a mesma utilizada nos navegadores de iOS e Android. Se o CSS afeta a performance do seu produto no Chromebook, é bem provável que afete também quem está usando/visualizando via Android/iOS.

Recomendo que acesse a área de comentários deste post e do post original para acompanhar debates sobre este assunto.

Ta aí algo bom de compartilhar. O pessoal da Faber Ludens fez um vídeo mostrando como fazer um tese de usabilidade utilizando um labotarório móvel. Eles estavam analizando o aplicativo do Jornal “O Globo”. Sem mais bla bla blá, vamos ao vídeo:

Vale muito a pena ver que eles utilizam a câmera que fica acima do ombro do usuário capta os gestos que ele faz com a mão sem tocar a tela, que normalmente não são capturados por um heatmap, etc.

Vocês podem ver um texto mais descritivo sobre no Blog da Faber Ludens.

Estou quase terminando meu home-office, só falta o mouse e um apoio para os pés. Usei o notebook por um tempo mas acabei comprando um PC pra poder jogar quando não estou trabalhando. Durante todo esse caminho comprando as tralhas eu vi muitos tipos de peças, periféricos, acessórios e móveis com todo tipo custo-benefício. Acho que isso é algo que eu devo compartilhar ja que muita gente ainda não tem seu home-office pronto. Decidi começar com os periféricos básicos, o  teclado e mouse. Agora vamos ao que interessa:

Teclados

Comfort Curve Keyboard 2000 (Microsoft)

De longe o melhor teclado que eu já usei. Teclas baixas, formato confortável e segundo a descrição, você pode derrubar água nele que ele não dá problema (nunca fiz esse teste, e não pretendo fazer). Recomendo pra quem quer jogar também!

Preço: à partir de R$ 48,99
Onde: Mercado Livre e Buscapé.

Leia o resto do artigo

Acho justo que você saiba que esse seletor não funciona no IE – quer dizer, até funciona, mas só na versão 9. Já nos demais navegadores populares (FF 3.5+, Chrome 4, Safari 4) tá tudo bem, menos no Opera, que tem alguns problemas.

Como você já deve saber, o seletor first-child funciona para o primeiro item (filho) e o last-child para o último item (também filho), o nth-child seleciona esses itens de um jeito mais específico, deixando você livre da necessidade de aplicar alguma classe ou fazer alguma “gambiarra” do tipo.

Vamos para alguns exemplos:

Selecionando o primeiro item de uma lista, teremos o seguinte CSS e o respectivo código HTML:

ul li:first-child {
	color:#f00;
	}

Primeiro Item
Segundo Item
Terceiro Item
Quarto Item
Quinto (e último) Item

Caso você faça um teste, o código acima vai aplicar a cor vermelha (#f00 ou #ff000) no primeiro item da lista.

Leia o resto do artigo

Se levarmos em conta todo aquele papo de código semântico na hora de passar um layout de imagem pra html e css sempre teremos a companhia de algumas tags, e uma delas é a
<ul>, que deve ser usada para uma lista (o rly?). Ultimamente tenho trabalhado com layouts melhores e devido as exigências de onde eu trabalho, preciso codificar páginas que sejam compatíveis com o IE7, já que não damos mais suporte ao IE6.

Quando você busca utilizar uma lista e precisa estipular tamanhos e alguns outros atributos nela e nos items, você precisa utilizar o elemento “block”, e em alguns casos, se esse elemento tiver que ficar em linha, será necessário usar o “inline-block”. Mas e aí, o que tem demais? O inline-block não está implementado no IE7.

SELETOR {display:inline-block;}

Para solucionarmos esse problema, só precisamos duplicar o seletor e colocar um “* + html” antes do seletor, trocar o display por inline e pronto!

Exemplo:

* + html SELETOR {display:inline;zoom:1;}

Pronto, problema resolvido!

Aprendi com o Édipo!

Estive pesquisando uns livros sobre design de interação e coisas do gênero e encontrei o livro “Interação Humano-Computador” em promoção no Walmart. O desconto é de 15%, deixando o livro por R$ 72,08, uma barganha.

Uma dica: O produto não terá os 15% se você acessar o site do Walmart diretamente, você precisa passar pelo Buscapé ou usar o link que ele fornece.

Só pra ter certeza, certifique-se que o mais barato é realmente o do Walmart (pode mudar depois que eu fizer o post), acompanhando a listagem do produto no site Buscapé.

Não perde tempo, compra!

Simone Barbosa e Bruno Santana da Silva  publicam seu livro intitulado “Interação Humano-Computador” pela Elsevier.  Além de apresentar uma visão extensa e abrangente dos principais conceitos, teorias e técnicas de IHC, o livro inclui excelente material sobre Engenharia Semiótica, em português.

Quando você optar por estudar, você nem sempre começa pelo lugar certo. Eu comecei com uma coisa sem ter idéia do que tava fazendo, com o tempo aprendi muito bem sobre algumas coisas próximas a essa, e hoje em dia leio muito sobre outra coisa, ao invés de estudar outras (sim, tá confuso, eu sei!) duas ou três coisas que vão completar o que eu já sei e abrir muitas portas.

Se quiser, pode tratar como desabafo, mas isso é mais uma realidade, visto que muitos diamantes que estão mais profundos não são lapidados pois existem outros (muitas vezes não tão bons quanto) mais acima, acessíveis e semi-prontos para a venda.

Não entendeu? Vou explicar tudo no resto do post.

Leia o resto do artigo

Pra quem não sabe nada sobre Design de Interação, vale a pena ver essa palestra, ela é curta e bem objetiva.

Leia o resto do artigo

Um texto muito bom, vale a leitura, principalmente para quem é, vai ser, ou foi cliente, é bem auto-explicativo. O textoe stá em português de portugal mas dá pra entender.

Picasso estava uma vez na praia a desenhar. foi interpelado por uma senhora que o reconheceu. “Você não é o picasso? faça-me o meu retrato!”
“Com certeza”-respondeu o pintor. E a senhora sentou-se em pose e ele ficou ali um bocado a olhar. Passado um pouco abriu o bloco, e com um unico traço do pincel capturou toda a essência da senhora. “Fantástico-disse ela-sou mesmo eu! Quanto quer pelo retrato?”
“500.000 dolares”-disse-lhe.
“Tanto??? Mas você só demorou dez segundos a fazer isso…”
“Não, minha senhora, demorei a minha vida inteira…”

Fontes: Idéias feitas em lugares comuns e vitrine viva