Pular navegação e ir direto para o conteúdo

Pular navegação e ir direto para as categorias

Pular navegação e ir direto para a lista de colunistas

Pular navegação e ir direto a assinatura do Feed RSS

Há quase um ano, voltando para casa de carona com meu pai, ele comentou que tinha ido numa consulta e, do nada, a médica pediu para ver sua carteira de habillitação. À princípio ele negou, mas ela insistiu e ele acabou cedendo.

Ela então olhou o documento e perguntou o que havia de errado. Meu pai, sem entender nada, disse que não havia nada de errado. Ela então pediu para ele conferir qual era a data de vencimento. Puxa vida, ali estava o erro, carteira vencida há cerca de 6 meses! Afinal, quem sabe quando a habilitação vai vencer?

Quando ele terminou de contar isso, eu comecei a pensar em como resolver este problema, como a internet poderia ajudar nisso. Então pensei num sistema em que você inserisse alguns poucos dados e ele te avisasse quando a data estivesse chegando. Email me pareceu a opção mais viável, já que SMS ficaria muito caro. Depois de alguns meses desenvolvendo, coloquei no ar o renovesuacnh.com.br, um serviço para não te deixar esquecer desta data.

www.renovesuacnh.com.br

Por coincidência, na época que estava terminando o trabalho, a minha habilitação venceu e eu pude, pela primeira vez, ver como era o processo na prática. Agendamento da renovação pela Internet é a pricipal novidade, tudo demora cerca de uma hora no Poupatempo.

 

Como foi o processo

Para o trabalho prático resolvi colocar algumas limitações e tentar ser criativo em cima delas. Também estava louco para brincar com os novos media queries do CSS 3 e as técnicas emergentes mobile first e responsive web design. Partindo de uma resolução de 320 px e crescendo, também decidi que todos os elementos teriam que caber em no máximo 700 px de largura, o que me fez fritar a cabeça um pouco para encaixar a imagem da CNH em diversos viewports, como mostrado na imagem abaixo.

Diferenças de posicionamento da imagem em várias resoluções

Depois de algumas tentativas que fracassaram, resolvi usar a textura da própria CNH para compor o layout. Um ajuste aqui e outro ali e enfim funcionou.

Chegou então a hora de fazer tudo isso funcionar no browser. Por mais que haja uma grande discussão sobre o quanto é prático layoutar direto no código, eu gosto de ter uma boa noção do espaço que cada elemento ou bloco no layout vai ocupar. E acabo deixando pequenos ajustes pra serem feitos no CSS, misturando assim as técnicas.

Comecei tentando fazer tudo na raça, escrevendo o código do zero, mas responsive web design é bem mais trabalhoso do que eu imaginava, então depois de um tempo encontrei um template responsivo que fez a maior parte do trabalho sujo. Como nessa época eu já estava quase desistindo devido à dificuldade em fazer dar certo e a ideia principal era aprender o processo, o template caiu como uma luva. Eu não precisava resolver todos os detalhes, mas sim passar por todos os estágios. E vou te falar, responsive design é muito mais trabalhoso do que eu esperava. Adicionar novos breakpoints dentro dos já existentes foi a grande descoberta. Aliás, este aqui é outro bom texto para quem se interessa por essa técnica.

No site, redimensionar a tela do browser faz o layout se adaptar ao tamanho da janela e te possibilita ver os media queries em ação.

Modifiquei bastante o template até chegar no layout que havia desenhado e tinha então um site navegável. Adicionei navegação no topo para as resoluções menores (que teriam que dar bastante scroll até chegar nas últimas partes da página), adicionei todos os recursos de Analytics que eu aprendi, inclusive coisas interessantes como event tracking. Na programação, meu colaborador Guilherme Mastria fez o sistema funcionar e o Bruno Cruz aprimorou a redação que eu tentei fazer, com um toque que só um redator teria.

O próximo grande passo é criar aplicativos para iOS / Android, mas isso ainda leva algum tempo e também quero pensar na melhor forma de fazer essas notificações, pensando que a maioria das pessoas troca de celular a cada 18 meses (menos da metade do tempo de vigência de uma CNH).

Mas é isso aí, está tudo lá funcionando, qualquer coisa é só reclamar por aqui: renovesuacnh.com.br.


RSS Acompanhe os posts do Design Coletivo.

Publicado em: Web, quarta-feira, 1st agosto, 2012 às 10:00 am
Tags:
Você pode acompanhar todas as respostas para esta entrada via RSS 2.0, escrever um comentário, ou deixar um trackback através do seu site.

Permalink

1 Comentário para "Renove sua CNH!"


  1. 1 Trackback(s)

  2. ago 23, 2012: Site ajuda a lembrar de renovar sua CNH | A Vida Como A Vida Quer (@avidaquer)

Comente!

Sobre

O Design Coletivo é formado por 8 designers, interessados em criação de conteúdo relevante sobre design e seu reflexo no mercado, além do estímulo do debate nos assuntos referentes à area.

Leia a descrição completa

Destaques