Parem as prensas

Esses dias eu fiquei curioso para saber a diferença entre stopPropagation e preventDefault. Segue a explicação que eu achei.

  • stopPropagation é utilizado para ter certeza que o evento não vai “borbulhar” para cima.
    ex: o clique em um também ir gerar um click no <td> dispara um clique no <tr> e no <table>. O stopPropagation evita que isso ocorra.
  • preventDefault é utilizado para evitar a ação normal de um elemento.
    ex: o preventDefault em um clique sobre um link ira evitar da url ser aberta, o em um botão evitar de postar o formulário.

Essa explicação me ajudou bastante.

Ligando e desligando a luz

Nos dispositivos móveis (android, ipad, iphone, windows phone) apresentam switchs, interruptores, aquelas chaves de luz com dois estados. Cada plataforma tem o seu layout próprio: mais quadrado, mais arredondados. Mas todos são uns checkbox com estilo.

Um exemplo que achei foi o On/Off FlipSwith (http://proto.io/freebies/onoff/). O que eu mais gostei, é que ele é basicamente feito com CSS. Possui temas prontos para IOS, Android e Windows 8, e com um editar para gerar novos temas.

Uma coisa importante é que não é suportando no IE 8 (óbvio) ou inferior.

Tijolinho ao lado de tijolinho

Esses tempos tive que montar uma tela cheia de imagens, mostrando-as lado-a-lado.. Até ai tudo bem. O grande problema era que as imagens tinham tamanhos diferentes e elas deveriam ocupar toda  a largura da tela. Bem semelhante ao Flickr (http://www.flickr.com/photos/caliel_c).

Minha primeira etapa foi procurar algo pronto, algum jQuery mágico que fazia o que eu precisava. Depois de algum tempo não encontrei nada. Então resolvi fazer.

Depois de 2 dias trabalhando, ajustando e otimizando. Pronto!!!

O que aconteceu alguns dias depois?? Encontrei uma extensão o CollagePlus (http://ed-lea.github.io/jquery-collagePlus/) bem simples e fácil. 

Só não coloquei o meu código fora porque deu trabalho.

Escola de código

Essa semana me comentaram sobre o site codescholl. É um site bem maneiro para aprendizado. Aqui você pode aprender Ruby, Javascript, HTML/CSS e iOS.

Tem alguns cursos gratuitos e a assinatura custa US$ 25 por mês.

Fiz o curso de Jquery, backbone e jss que são de graças. Foram cursos bem básicos caso não saiba nada o curso apresenta coisas bastante interessantes.

A plataforma vai criando exercícios que deve ser respondidos. Caso o aluno tenha dúvidas é possível ver um slide com o material e se ainda sim não rolar é dá para pedir até 3 dicas em casa exercício.

Design Reponsivo

Tenho trabalhado bastante com sistemas para a web ultimamente, e um dos meus maiores focos tem sido a responsibilidade do conteúdo.

Estava lendo um blog e vi a seguinte frase “Responsive design é entregar a mesma informação — útil e priorizada — para todo mundo!”, a referência está em http://sergiolopes.org/responsive-web-design/ do @sergio_caelum.

Outra referência bem bacana é o http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona.

Uma dica interessante para quem quiser criar um site mobile, sem saber muita coisa, é utilizar o jQuery Mobile. Um framework bem simples e prático para criar toda a interface web/mobile.

Vou te dar um toque.

Os tablets/smartphones estão dominando o mercado, a principal forma de iteração com o disposição é através de gestos (pinçar, rotacionar, deslizar). As páginas web estão tendo que adotar esse comportamento para permitir uma melhor experiência para o usuário.

A extensão http://eightmedia.github.io/hammer.js/ fornece uma forma bem mais fácil de lidar com esses gestos. O feedback para o programador é apresentado com mais informações como por exemplo, deslocamento, ângulo, tipo do gesto entre outros.

Vale a pena dar uma olhada.