O aguarde que deu errado

Me passaram uma reportagem bem interessante. Uma pesquisa com usuários de iOS validou o ícone de aguarde do app do Facebook.

Foi comparada a percepção dos usuários na tela inicial do aplicativo frente a dois ícones:

  • quadrado (padrão do aplicativo)
  • o circular (padrão do sistema operacional)

O resultado foi que ao apresentar o ícone quadrado a “culpa” pela demora no carregamento era do próprio app, enquanto que frente ao ícone redondo, a culpa era do sistema operacional.

Pra mim fez sentido.

A matéria original está em: http://arquiteturadeinformacao.com/user-experience/a-culpa-nao-e-do-aplicativo-e-do-sistema-operacional/

Botão estravagante

Eu tinha que fazer um botão semelhante ao voltar do iOS , ou seja, um botão com um canto triangular, de entalhe. A unica diferença é que deveria ser no lado direito, e não no esquerdo.

Procurei um pouco e encontrei um exemplo no jsfiddle: http://jsfiddle.net/stowball/XvFFX/, parabéns ao Stowball, excelente código.

Fiz pequenas alterações, troquei o pseudo selector de “:before” para “:after”, e nele alterei o border para: border-width: 1px 1px 0 0; e reposicionei o left de acordo com os meus elementos. A minha alteração está em http://jsfiddle.net/seLJP/1/.

Crash, no limite!!!

Caiu para eu resolver um problema bem interessante. No navegador Safari (versão 6.0.1) para o IOS ao abrir uma página o navegador simplesmente fechava, apresentado a janela de erro com o stacktrace. Uau… que página foda, fez o browser do IOS se fechar (nota importante em todos os outros browser funcionava, até no IE 9)

Outras pessoas já tinham conseguindo identificar que desabilitando os CSS da página ela abria sem problemas. Ao ler o stacktrace, confirmo que o problema estava realmente na configuração de estilos, em especial em animações.

Começo aquele trabalho de ir comentando os trechos de código CSS e recarregando a página até que não desse mais o erro. Como tinha poucos estilos envolvendo transitions e/ou transform foi bem rápido.
O problema era causado no seguinte HTML:


<section id="content">
<canvas />
</section>

com a seguinte formatação
#content {
-moz-transition: all .1s linear 0s;
-o-transition: all .1s linear 0s;
-webkit-transition: all .1s linear 0s;
transition: all .1s linear 0s;
}

eu tinha duas escolhas para resolver o problema:

  1. retirar o canvas
  2. retitrar o -webkit-transition

Qual será que escolhi?? Ficar com o desenho na tela, mesmo que sem transição durante as alterações, óbvio.