dpw2012: novo tema do desenvolvimento para web

Este é um “meta artigo” para os leitores e visitantes saberem sobre o novo tema do desenvolvimento para web, o dpw2012! Vou comentar um pouco sobre este novo tema e as novidades que vêm por aí! Continue lendo…  ;-)

Motivações para um novo tema, o dpw2012

Bem, pessoal, as motivações que me levaram a criar este novo tema acho que são as mesmas de qualquer um que trabalho no desenvolvimento web - e goste do que faz, obviamente: aprendizado, inovações, testes de novas técnicas, etc. Com isso em mente, há alguns meses atrás cheguei à conclusão de que o tema anterior estava “meio antiguinho” (leia-se: defasado), tanto em relação à aparência, quanto nas tecnologias usadas… Por isso, cá estamos nós, com este novíssimo tema, com muitas novidades!

dpw2012: tecnologias

Vamos a alguns pormenores das tecnologias envolvidas e como eu consegui desenvolver este tema usando algumas das tecnologias de desenvolvimento web mais recentes que podemos encontrar, hoje em dia.

HTML5 e HTML5 Boilerplate

Já algum tempo, mesmo antes de ter a ideia de desenvolver este tema, já havia começado a estudar sobre HTML5. Li bastantes artigos e alguns livros a respeito e, como não estamos falando de uma tecnologia pronta, continuo os estudos e fico de olho nas novidades - inclusive, podem esperar artigos sobre HTML5, claro!

No meio da história, tive a felicidade de conhecer o HTML5 Boilerplate! O HTML5BP é simples uma das melhores coisas que surgiu para desenvolvimento web nos últimos tempos: trata-se de um “modelo HTML5” para se começar a desenvolver rapidamente; mas não é somente isso.

Ele conta com muito mais coisas além de um excelente modelo de HTML5: javascripts, folhas de estilo, um .htaccess robusto demais e muitas, muitas coisas. Para terem uma ideia, aprendi mais sobre desenvolvimento web em 1 semana estudando o HTML5BP que em muitos meses passados… Vale a pena!

Twitter Bootstrap

O Twitter Bootstrap já está bem conhecido entre os desenvolvedores estadunidenses e europeus, mas, confesso, ainda não vi tantos sites em território nacional que se valham desse fabuloso e estupendo toolkit para desenvolvimento web. O Twitter Boostrap conta com um CSS incrível (com LESS), que garante um sistema de grid bem facinho de se mexer, além de elemento de UI muito eficientes e javascripts para fazer tudo isso ficar ainda melhor!

Imagine, você, encontrar prontos, funcionais e testados por desenvolvedores web de primeira linha elementos de navegação, botões, tabs e pills, menus drop down e muitos outros componentes de UI, que são cross-browser e ainda contam com javascript próprio! Bem, isso é Twitter Bootstrap…!

Há alguns dias atrás, também conheci um “complemento” ao Bootstrap que me foi bastante útil. A grande maioria dos ícones que vocês estão vendo no site, na verdade não são ícones: é uma fonte! O projeto Font Awesome foi criado visando aprimorar o Twitter Bootstrap, tornando possível substituir o uso de imagens por uma fonte. Ele usa todos os ícones padrão do Bootstrap e ainda estendeu com mais alguns! Realmente, “awesome”!

Design Responsivo

Oh, yeah! Somos responsivos, baby!  ;-)

Também antes de começar a desenvolver este tema, já estava estaudando sobre design responsivo. Quando comecei a colocar a mão na massa, já tinha certeza de que queria que assim o fosse - afinal, este é um novo padrão de desenvolvimento web, não uma “tendência”, como querem forçar alguns! Havia algumas possibilidades para isso: escrever tudo do zero; usar algo que ajudaria, com estilo parcialmente pronto; pegar um tema pronto para WordPress.

Como podem ver, fiquei com o meio termo. Desenvolver tudo do zero, acredito não haver necessidade e, pegar tudo pronto, acaba com toda a graça, não é verdade? Portanto, fiquei com Twitter Bootstrap responsivo + HTML5 Boilerplate fantástico! Uma boa combinação, eu diria.

Microdata API + schema.org

Também é algo que só vi em 1 site brasuca conceituado, até então, e o dpw2012 também faz uso: Microdata API + Schemas. Grosso modo, são nomes padronizados de classes e atributos HTML que dão maior significado ao conteúdo apresentado em web sites. Os principais buscadores reconhecem este padrão, embora (teoricamente) ainda não estejam usando como fatores de classificação. De qualquer maneira, está, aí, o site preparado para quando isso acontecer - se é que já não está acontecendo “na surdina”.

Atualização: Para os que não acompanham o twitter do desenvolvimento para web, a possível eficiência da Microdata API juntamente com os padrões do schema.org está ainda mais perto de ser confirmada.

https://twitter.com/#!/desenvolvweb/status/186914692495708160

Estou usando, basicamente, os schemas de Blog, BlogPosting, mas ainda vou explorar mais schemas para incluir. Apesar de eu não garantir a eficiência disso, #FicaADica para o estudo e implementação, já que é bem divertido!

Novo logo

Pra quem segue @desenvolvweb, deve ter notado (ou não) o seguinte tweet, cerca de 1 mês atrás:

https://twitter.com/#!/desenvolvweb/status/173179693833527297

Quer dizer, o logo já estava pronto e sendo “maturado” no twitter e, agora que o lançamento do tema aconteceu, me pareceu apropriado usá-lo oficialmente. Mais uma vez, obrigado a Alanna Couto!  ;-)

Considerações finais

Pra mim, o blog teve um ganho incrível com a implementação desse novo tema: com um toque mais clean, agora os conteúdos estão melhor apresentados, o leitor vai direto ao ponto e, com o design responsivo, tudo ficou muito mais acessível e agradável!

O fato de estar usando menos imagens e ter limado bastante de javascript desde a última versão, também contribui para a leveza do carregamento e, apesar de eu já estar usando cache nas páginas, performance do site é sempre uma boa coisa!

Meu “Obrigado!” a todos os que deram seus pitacos construtivos para que o tema ficasse melhor do que eu esperava, contando o pessoal do grupo html5-css3-brasil, tanto os que apareceram publicamente, quanto os que entraram em contato em particular.

E, se possível, gostaria de contar a sua ajuda, também! Caso encontre algum bug e/ou tenha sugestões a fazer, por favor, comente neste artigo ou envie uma mensagem. O desenvolvimento para web é um espaço de testes e, por aqui, nada está acabado ou é feito de maneira que não possa se alterar.

Muito obrigado, leitores assíduos, leitores do feed e até mesmo os visitantes casuais! Espero continuar contando com vocês!  ;-)