Thematic: Framework Para Facilitar a Criação de Temas

Se você já tem alguma experiência em web design, tem conhecimento ao menos intermediário de linguagens como HTML, Javascript, CSS e PHP, e gosta de WordPress, provavelmente já criou, ou pensou em criar, um template personalizado para seu blog, ou de algum cliente. Mas o trabalho de construir um template do zero, reescrevendo todas as páginas, é grande. E depois de passar por toda a etapa de programação (quase integralmente em PHP), ainda tem a estilização, design das imagens em algum programa, etc.

Para facilitar a vida dos designers, existem os frameworks. Eles são como o "esqueleto" na construção de um template, trazendo toda a estrutura das páginas já pronta, restando ao designer apenas estilizar tudo, e inserir suas próprias modificações, de acordo com as necessidades do blog que vai usar o tema.

Ainda que alguns prefiram programar tudo desde o início, sob o argumento de que assim terá mais controle sobre o template de forma geral, com os frameworks, tendo conhecimento suficiente, é possível fazer qualquer coisa, pulando várias etapas que seriam obrigatoriamente seguidas na criação de um tema. Se os recursos nativos do framework não forem suficientes, basta fazer as alterações necessárias em seu código para incluir novas funções.

O template anterior aqui do Tutoriart, por exemplo, foi criado sobre um framework, o Thematic. Se visitar a página de modelo do framework original, verá que ele foi bastante modificado antes de ser empregado aqui. E isso é apenas um exemplo.

Neste artigo, você vai conhecer melhor o Thematic, mais que recomendado no processo de criação de temas. E antes que pensem que é pago, já aviso que não: Thematic é grátis para baixar, usar e fazer o que bem você quiser.

Thematic

Gratuito e de código aberto, o Thematic é altamente adaptável às necessidades do designer, sendo otimizado para os motores de busca, usando um código limpo e emprego correto das tags e regras de estilização.

Se as ferramentas do tema não forem suficientes, basta conhecer o código necessário (normalmente PHP e/ou CSS) e fazer as alterações necessárias. Por exemplo, se você precisar de mais áreas de widget, em áreas específicas, é só editar o tema.

Veja ao lado as áreas de widget disponíveis ao utilizar o Thematic em seu blog: 13 áreas padrão, mais uma na header, que é inserida facilmente com poucas linhas de código no arquivo functions.php.

Recursos

• Pode ser usado tanto como um tema clean, ou como base de desenvolvimento de temas derivados (child themes);
• Totalmente otimizado para os motores de busca;
• 13 áreas de widget prontas para uso (possível aumentar através de códigos);
• Temas derivados disponíveis para download, livre para uso comercial ou pessoal;
• Tema derivado modelo incluso;
• Guias e de ajuda e fóruns disponíveis na internet;
• Totalmente compatível com plugins como All-in-One SEO e Platinum SEO;
• Fácil implementação de layouts 2 ou 3 colunas (ou outras através de modificaçõse no código);
• Texto no footer editável (pode-se inclusive remover o crédito ao autor, sem qualquer dano ao tema);
• Opções para blogs multi-autor;
• Constantes atualizações;
• entre outros.

Usando Como Tema Pronto

Antes de mais nada, o Thematic pode ser tranquilamente usado como tema pronto. Você terá um blog clean, de fácil leitura, organizado, com muitas áreas de widget e otimizado para os motores de busca. A fonte dos textos é de leitura agradável, tons que não cansam a vista depois de algum tempo, e as colunas são bem distribuídas, com espaço suficiente para tornar o visual limpo.

Se você precisar modificar o tema, pode proceder de duas formas...

Child Themes

Pode-se, além de usar o tema sem alterações, modificá-los de duas formas: duplicar o conteúdo de toda a pasta do tema, e criar um tema novo a partir dele. Você poderá alterar qualquer arquivo do tema (menos indicado, já que neste caso, você não poderá contar com futuras melhorias no tema base). Ou, criar temas "filhos".

Temas "filhos", ou child themes, são criados modificando apenas o arquivo de estilização do tema (style.css) e a página com as funções do tema (functions.php). Todo o resto do tema será carregado a partir dos arquivos do tema "pai", que não deverão sofrer nenhuma alteração. Com isso, você terá um tema personalizado, e ainda contará com a possibilidade de atualizá-lo conforme surjam novidades dos desenvolvedores.

Se você não tiver conhecimento suficiente para desenvolver seus próprios temas, pode tentar usar algum dos disponibilizados, na página oficial de child themes do Thematic (veja mais abaixo).

Ajuda

Além dos recursos, o Thematic conta com uma comunidade de suporte, podendo o designer questionar sobre qualquer alteração e obter ajuda dos outros membros, ou pesquiser em um vasto acervo de dúvidas resolvidas (em inglês, claro).

Alguns temas "filho", disponíveis para download:

Acamas

The Gallery

Early Morning

Simple Chart (JS)

Auto Focus

Astatic

Ninja One

Links do Thematic

• Página do Thematic
• Para baixar o Thematic
• Guia de uso e customização (usa o tema sem grandes alterações, servindo também como modelo)
• Página oficial de child themes
• Fóruns de ajuda (Themeshaper Forums)

Leia também...

• 

  Estampas de camisetas com carimbo – por Aaron von Freter

  Todo mundo adora camiseta, e se ela tiver uma estampa legal e bem feita, melhor ainda. Se você produz as suas mas já cansou de tentar técnicas tradicionais de silk ou com máquinas, veja essa do designer americano baseado na europa, Aaron von Freter. Com mais de 12 de experiência no ramo de vestuário, ele inovou alguns anos atrás com esse processo de carimbar - o mesmo dos velhos carimbos de borracha.

  Cada estampa acaba tendo um estilo próprio, variando de acordo com a quantidade de tinta e pressão exercida. Fica ao mesmo tempo rústico e estiloso. Quem sabe é uma inspiração pra você desenvolver algo similar.

• 

  Como criar transição (fade) com CSS no carregamento da página e imagens

  Quem aí trabalhava ou brincava com design web na primeira metade dos anos 2000? Lembram como era feito pra conseguir um botão ou imagem com efeito de transição, tipo ir aparecendo aos poucos, ou mudando de cor? Normalmente eram duas abordagens: uma com Javascript e a outra - mais fácil e menos indicada - era apelar pro Flash. Mais recentemente surgiram vários meios de fazer isso com jQuery.

  Mas felizmente, com a modernização dos navegadores, mais recursos e propriedades de CSS vão se tornando compatíveis num ambiente mais amplo, e dá pra conseguir quase tudo só com CSS. Vamos ver dois exemplos da regra keyframes (quadros-chave) pra criar animações simples, completas pela propriedade animation. Com opacity vamos "esconder" os elementos durante o carregamento, aparecendo aos poucos.

• 

  Cartazes Oficiais das 12 Sedes da Copa do Mundo 2014

  Foram divulgados os cartazes oficiais das sedes na Copa do Mundo Brasil 2014. Alguns foram escolhidos por comissões formadas por designers e membros da FIFA e do governo, outros através de votação popular pela internet.

  Como era esperado, muita gente já está batendo o pé e reclamando da baixa qualidade de um e outro. Apesar de não concordar com as críticas feitas antes ao mascote (que teve o infeliz nome de Fuleco escolhido também por votação popular), concordo que não foi um trabalho muito compacto. Temos ótimos cartazes e outros bem inexpressivos.

  Pra falar a verdade, não curto a ideia de votação popular nesses casos, acho que é uma forma de fugir da responsabilidade de uma escolha que depois pudesse ser criticada. Uma boa equipe profissional deveria ser incumbida, num processo bem claro, mas enfim... Se até no logo oficial já houve tanta confusão...

  Seja como for, aí estão eles. Confira e opine.