quinta-feira, 5 de julho de 2012

Estudo web dando resultado

Há algum tempo venho querendo botar em prática o que venho estudando de tecnologia web.

Na falta de algo mais desafiador para fazer, resolvi usar minha nameplate como teste. Esse site na verdade só estava apontando para um perfil meu, inicialmente para o do plaxo e depois para o do about.me. Agora resolvi colocar a responsabilidade em minhas próprias mãos e fazer eu mesmo o design e implementação. Não é exatamente a minha área ou meu forte mas é legal fazer algo diferente de vez em quando.

Screenshot do nameplate usando o layout largo
O resultado em versão desktop

Como editor de texto quis testar o novo Coda 2 da empresa Panic. Já usava o Prompt no iPhone e há tempos admirava o trabalho deles à distância. É uma ferramenta bem legal para esse tipo de desenvolvimento pois é possível fazer tudo de dentro de um único aplicativo: editar, commitar, visualizar e publicar.

Queria usar CCS3 mas sem precisar ficar me preocupando com o problema dos prefixos e usar algum dos pré-processadores para gerar o CSS. Eu já tinha usado o LESS mas com todo o buzz ao redor do SASS, resolvi experimentar usando a sintaxe SCSS. Procurando por ferramentas para automatizar a geração do CSS a partir do SCSS, encontrei o CodeKit. É uma ferramenta bem legal, ela faz o lint do HTML e do CSS, minimiza e ainda otimiza as imagens do site. Por conta dela, acabei me deparando com o Compass, que já tinha visto antes mas sem dar muita importância. Foi ele que resolveu meu problema com os prefixos, nada mais de -webkit, -moz, -ms, -o. Agora faço o @include dos estilos CCS3 apenas uma vez.
Screenshot do nameplate usando um layout mais compacto
Versão móvel

Tentei usar um pouco do que aprendi lendo o Responsive Web Design e o Mobile First na hora de implementar o layout e acho que funcionou ... pelo menos no meu iPhone!

Nem testei com IE para não me aborrecer. Uma das vantagens de fazer algo apenas para si.

Só faltava achar um lugar para hospedar. Lembrei que tinha uma conta configurada no S3 e depois de descobrir que o Coda suporta essa plataforma, foi o que resolvi usar. Apanhei um pouco com as permissões, toda vez que fazia um upload os arquivos voltavam a ser privados.  Encontrei esse gist que seta os arquivos como públicos automaticamente a cada upload e o problema foi resolvido. Fiz o deploy no CloudFront, cadastrei no Webmaster Tools, rodei alguns testes de desempenho com o YSlow! e ponto final.

Agora só falta alguém visitar o site. Deem um pulo em http://marcelo.fontenele.com e me digam o que acham.

Nenhum comentário:

Postar um comentário