Criando quadrados responsivos

No projeto que estou trabalhando atualmente, tive a necessidade de criar quadrados responsivos.
Criar um quadrado é muito fácil, não? Basta setar a altura igual a largura e estamos felizes. Porém, por se tratar de um quadrados responsivo, estamos pensando em porcentagem.

Se eu definir um quadrado com 10% de largura e 10% de altura. Adivinha o que vai acontecer? Você acertou! Não será um quadrado

Exemplo:

10% x 10%

Depois de muito tempo estudando uma maneira de fazer um quadrado responsivo, cheguei a seguinte solução:

O padding é sempre relativo a largura, logo, se você definir a altura do elemento com 0 e o padding-bottom com a porcentagem da altura você terá o resultado esperado. Segue exemplo abaixo:

Guia para Designers: Website Responsivo


Primeiramente gostaria de informar que eu não sou designer. Estou criando esse post para esclarecer as principais dúvidas que os designers costumam ter em relação à websites responsivos.

O que são Frameworks?

Sempre me perguntam o que é esse tal de Framework que eu sempre falo. Framework nada mais é do que um conjunto de elementos pré-definidos que ajudam a nós desenvolvedores não ficarmos reinventando a roda.

Nesse post trabalharei com o Bootstrap do Twitter. Há vários outros, porém a ideia desse post não é ensinar a usar frameworks front-end e sim exemplificar os conceitos de um website responsivo.

Grids

Acredito que esse seja o ponto mais importante quando estamos falando de website responsivo. Os grids são o que mandam na forma que o seu conteúdo irá aparecer.

A primeira coisa a se considerar é qual vai ser a largura do site. Por padrão o Bootstrap trabalha com 1170px de largura no modo responsivo, caso a tela seja menor que 1170px ele passa a assumir 940px, depois 724px, após isso o site fica fluido, ou seja, todos os elementos assumem 100% da página.
Temos 12 tamanhos de colunas diferentes que se encaixam perfeitamente e serão dentro dessas colunas que você colocará o conteúdo do seu site.

Veja um exemplos de colunas aqui: http://maniero.tk/bootstrap/grids.html

Mostrando e ocutando elementos

Uma prática necessária na criação de layouts responsivos é a de mostrar e ocultar elementos na página dependendo do dispositivo que está acessando o site. Um exemplo de utilização dessa prática na criação de Menus. Dificilmente um menu localizado no Header fica bom na navegação mobile, então deve ser criado uma versão para os dispositivos mobile.

Bootstrap em PSD

O Bootstrap possui diversos outros elementos que podem ser aproveitados também no layout, assim como botões icones, navbars, etc. Você pode baixar os elementos do Bootstrap em PSD aqui: http://www.bentdesignstudio.com/v2/2012/03/twitter-bootstrap-2-photoshop-template-psd/

Conclusão

Espero que esse artigo possam ajudar a vocês "amigos designers" (se é que existe amizade entre programadores e designers, hehe) a esclarecer dúvidas básicas de como funciona um website responsivo. Se surgirem dúvidas eu atualizarei essa postagem.

BikeSampa: Experiência

Não, programador não vive só sentado na frente do computador tomando café e digitando na "telinha preta". Tenho hobbies é um deles é pedalar. Adoro a sensação de vento na cara.
Aqui estou eu indo trabalhar de bicicleta.
Assim que vi as bikes do Itaú espalhadas pela cidade, fiquei encantado. Logo procurei fazer meu cadastro.
Nos primeiros dias comecei a ter problemas. A estação 82 (Shopping Santa Cruz) nunca está disponível. Meu trajeto começa no Shopping Santa Cruz e vai até a Dr. Barcelar (Vila Clementino). Porém devido a essa indisponibilidade tenho que andar até a estação Altino Arantes (estação 83).
Fora isso, em um único dia, peguei uma bicicleta com pneu furado. Devolvi e procurei outra, mas estava com o pedivela com problemas. Só em uma terceira tentativa, encontrei uma bike em estado razoável.
Porém, não tive tantos problemas no estado das bicicletas, as boas pelos 10 reais pagos para dois anos de utilização.
Mas hoje confesso que fiquei tremendamente decepcionado com o serviço, já tive problemas em desbloquear uma bicicleta e ela não sair, porém, bastava ligar novamente e desbloquear outra. Hoje foi diferente. Para começar só havia duas bicicletas na estação (isso não é um problema, sei que tem bastante gente usando) e além de mim, havia outra garota, aparentemente com problemas para desbloquear a bicicleta. Era uma bicicleta para cada. A bicicleta na posição 8 se recusou a sair, minha reação natural foi ligar e pedir para que fosse desbloqueada novamente.
A bicicleta não saiu e ainda ficou como "em uso", o que era para ser  um meio alternativo de chegar ao trabalho para poupar tempo, acabou me custando meia hora de atraso.
De qualquer forma, amanhã tentarei usar novamente o serviço, entre pegar um ônibus, ir andandado ou ir de bicicleta, eu ainda prefiro ir de bicicleta, mesmo tendo mais dor de cabeça.
Espero mesmo que o Itaú melhore o serviço, afinal, acho um serviço incrível.