Nos últimos anos e com o passar do tempo, a plataforma Tumblr teve um boost na sua popularidade muito por culpa da sua característica única, a simplicidade. No passado, a abordagem feita através da utilização de frameworks e bibliotecas acabava por sobrelotar com demasiadas coisas. Quantas mais funcionalidades eram adicionadas, mais dificil ficava a tarefa dos usuários terem uma experiência de utilização agradável, tornando a própria plataforma um pouco confusa e pouco intuitiva. Uma grande questão que se colocou foi, no mundo do blogging, quanto poder será realmente necessário para uma plataforma? Será necessária tanta complexidade para satisfazer todos e quaisquer desejos e necessidades dos usuários? Naturalmente que a resposta a estas questões pode variar dependendo do objetivo que se pretenda dar ao blog, mas Tumblr destacou-se e fez a diferença. A atual simplicidade de utilização, o próprio funcionamento da plataforma e as funcionalidade que são oferecidas aos seus usuários é tudo aquilo que você necessita para ter um blog num formato rápido, onde poderá partilhar imagens, citações, textos, links ou mesmo músicas.

Como criar um Theme para Tumblr (Parte II)

Não perca o primeiro artigo desta série Como criar um Theme para Tumblr (Parte I)

1. BLOCOS E VARIÁVEIS

No Tumblr existem blocos e variáveis que basicamente são o primeiro passo em direção à criação de um template. Para aqueles que estão familiarizados com o WordPress, o Codex é um compêndio gigante com toda a informação necessária para os desenvolvedores, com centenas de páginas. Para Tumblr, você tem uma só página – sim, uma. Se estivesse a criar um blog de raiz, teria de criar um banco de dados, criar as tabelas, criar as queries SQL para tratamento de dados, entre muitos outros processos.

No Tumblr, isto é feito automaticamente, facilitando a tarefa do desenvolvedor. Aquilo que é necessário criar é os locais onde irão ser inseridos os dados, que são denominados Blocos. Por exemplo, se você quiser mostrar texto simples, utilizaria algo idêntico ao código abaixo:

{block:Text}
    {block:Title}
        <h2><a href="{Permalink}">{Title}</a></h2>
    {/block:Title}
    {Body}
{/block:Text}

Para decifrar este pequeno trecho de código não é necessário ser nenhum expert em linguagens de programação. Para começar, o bloco é iniciado e definido qual o seu conteúdo, com o {block: Text}, de seguida é inserido o bloco onde será inserido o título do post ao inserir o {block: Title}, dentro do qual inserimos o heading a utilizar, o permalink e o título. Depois fechamos os blocos e está concluído.

A inserção do titulo dentro do bloco title tem como propósito proporcionar mais flexibilidade ao usuário, pois no Tumblr é possível não inserir um título ou omitir o mesmo. Caso isto seja feito, será utilizada uma tag como título do post, sendo estilizada com o h2 do exemplo. Então estes blocos fazem com que a informação dentro dos mesmos apenas seja mostrada se o post específico tiver um título, caso contrário será pulado.

No que toca a variáveis e como acontece com a grande maioria dos aplicativos de blogging disponíveis na internet, Tumblr oferece-lhe uma mão cheia de variáveis básicas que podem ser utilizadas nos seus projetos, como o titulo do seu blog, a descrição ou simplesmente o caminho para o seu avatar.

A informação pode ser inserida ou atualizada a partir da seção de personalização do seu template, como mostramos no ponto 2 do artigo anterior. Dentro do nosso template, se pretendermos mostrar o título e a descrição do mesmo, utilizamos o {Title} e {Description}. Além destas duas variáveis, existem ainda algumas mais como lhe mostramos abaixo:

  • {Title} – Título do blog
  • {Description} – Descrição do blog
  • {RSS} – O caminho para o RSS Feed do blog, criado pelo Tumblr
  • {Favicon} – O URL para o favicon desejado
  • {PortraitURL-64} – O URL para a foto de perfil enviada, em que o 64 representa a dimensão em pixéis, sendo assim uma imagem de 64x64px. Este número pode ser alterado de acordo com a preferência, podendo ter valores como 16, 24, 30,  40, 48, 64, 96, 128px.
  • {CustomCSS} – Ao incluir este bloco, estará a inserir o código CSS personalizado, que terá prioridade sobre o código original, esta funcionalidade está disponível através do painel de controlo em “Avançadas”

 2. POST TYPES

Uma vez que não existe server-side scripting como acontece em WordPress, Tumblr torna-se uma ferramenta particularmente fácil para os designers. Ao invés de utilizar alguns métodos como WordPress, Tumblr apenas necessita de utilizar as tags do template, sem necessidade de utilizar longos ficheiros de programação. Como referenciámos no artigo anterior, Tumblr tem 7 tipos de posts diferentes, Texto, Fotos, Citações, Links, Chats, Audio e Video.

POST TYPES

Para determinar onde será inserido o conteúdo dos artigos dentro da markup HTML, temos de definir que o mesmo irá ser inserido dentro do bloco Posts, utilizando o código do exemplo abaixo:

{block:Posts}
    <li>{Permalink}</li>
{/block:Posts}

Este é um tipo genérico para a apresentação do conteúdo de um post. Mas e se pretender personalizar cada tipo de post, com imagens relativas a cada um deles? Nesse caso terá de utilizar os blocos específicos para cada um dos tipos de posts. A título de exemplo, se pretender fazê-lo com uma citação utilizaria o seguinte bloco:

{block:Quote}
    <li>{Permalink}</li>
{/block:Quote}

3. BLOCOS ESPECÍFICOS DOS POSTS

Como referenciamos no ponto anterior, existem blocos específicos para cada um dos post types existentes em Tumblr. A utilização de um bloco genérico para a apresentação do conteúdo dos artigos poderá não ser a melhor maneira, nem em termos de código nem em termos de aparência do mesmo, uma vez que é possível personalizar cada tipo de artigo. Existem blocos específicos para cada um dos tipos de artigos:

  • {block:Text} {/block:Text}
  • {block:Quote} {/block:Quote}
  • {block:Video} {/block:Video}
  • {block:Audio} {/block:Audio}
  • {block:Photo} {/block:Photo}
  • {block:Photoset} {/block:Photoset}
  • {block:Link} {/block:Link}
  • {block:Chat} {/block:Chat}

Agora tem conhecimento de todos os blocos disponíveis para utilização no seu template tumblr. De notar que não tínhamos falado ainda do Photoset, que se insere dentro das fotografias mas é um post com mais que um fotografia, sendo considerado um Photoset e podendo ser estilizado de forma diferente dos posts simples de fotografia. Agora, imaginando que você pretender personalizar um dos tipos de posts existentes, vamos-lhe dar um exemplo:

Imagine que pretende personalizar os tipos de posts e inserir um ícone relativo a cada um deles. Nesse caso poderá inserir o seguinte código, a título de exemplo:

{block:Posts}
{block:Text}
<li><img src="http://URL/icone-texto.png" />{Permalink}</li>
{/block:Text}
{block:Photo}
<li><img src="http://URL/icone-foto.png" />{Permalink}</li>
{/block:Photo}
{block:Link}
<li><img src="http://URL/icone-link.png" />{Permalink}</li>
{/block:Link}
{block:Quote}
<li><img src="http://URL/icone-citacao.png" />{Permalink}</li>
{/block:Quote}
{block:Video}
<li><img src="http://URL/icone-video.png" />{Permalink}</li>
{/block:Video}
{block:Audio}
<li><img src="http://URL/icone-audio.png" />{Permalink}</li>
{/block:Audio}
{block:Photoset}
<li><img src="http://URL/icone-photoset.png" />{Permalink}</li>
{/block:Photoset}
{block:Chat}
<li><img src="http://URL/icone-chat.png" />{Permalink}</li>
{/block:Chat}
{/block:Posts}

Com esta informação você já conseguirá começar a personalizar o seu template, colocando uma imagem relativa a cada um dos diferentes tipos de posts, de forma a diferenciar os conteúdos em termos visuais para os visitantes.

No caso dos artigos de fotografias, irá ter disponível uma variável que permite obter o url para a fotografia enviada, então quando um utilizador cria um novo post de fotografia a variável {PhotoURL-500} estará disponível para utilização, podendo utilizá-la como ícone:

{block:Photo}
    <li><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></li>
{/block:Photo}

No próximo artigo iremos abordar as variáveis específicas de cada um dos tipos de posts disponíveis em Tumblr, começando a entrar no núcleo da programação de um template Tumblr. Não perca!

Abraço

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz