Neste artigo vamos dar continuidade á série Como criar um Theme para Tumblr, na qual você poderá aprender tudo o que necessita para poder criar themes para tumblr como um verdadeiro profissional, ainda que não tenha os profundos conhecimentos a nível da programação para o fazer. Na prática, esses conhecimentos avançados não são realmente necessários, pelo que a conclusão desta série e a execução dos passos contidos nela não serão um problema para si que não tem extensos conhecimentos de programação. 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.

Como criar um Theme para Tumblr (Parte II)

Não perca os artigos anteriores desta série:

1. VARIÁVEIS DOS POSTS

Os artigos utilizam uma série de variáveis que podem ser consultados na lista abaixo:

  • {Permalink} – é o permalink para o artigo
  • {ShortURL} – é o url reduzido para o artigo
  • {PostID} – é o ID do artigo
  • {block:Odd}{/block:Odd} – pode ser utilizado para estilizar as páginas de número impar
  • {block:Even}{/block:Even} – pode ser utilizado para estilizar as páginas de número par
  • {TagsAsClasses} – irá atribuir ao atibuto class da tag uma série de tags utilizadas no artigo
  • {block:Post[n]}{/block:Post[n]} – Permite-lhe determinar um artigo específico e inserir algo no meio da página
  • {block:More}{/block:More} – Se um artigo tiver um “Ler mais” a markup deste bloco irá ser renderizada

Em termos de teste, iremos introduzir estes blocos em um theme para ver o seu resultado e perceber realmente o seu funcionamento. Vá ao painel de controlo do seu tumblr e dirija-se à personalização do tema. Insira o seguinte código para que sejam mostrados os valores de cada uma das variáveis:

<h2>Valores atuais</h2>
{block:Posts}
<ul>
<li><strong>Permalink:</strong>{Permalink}</li>
<li><strong>ShortURL:</strong>{ShortURL}</li>
<li><strong>PostID:</strong>{PostID}</li>
<li><strong>TagsAsClasses:</strong>{TagsAsClasses}</li>
</ul>
{block:Odd}<p>Este artigo é de número impar.</p>{/block:Odd}
{block:Even}<p>Este artigo é de número par.</p>{/block:Even}
{/block:Posts}

Depois de inserir este código e salvar as alterações, observe o resultado:

Como criar um Theme para Tumblr (Parte III)

Temos o artigo de teste criado, um simples artigo de texto. Por cima temos o resultado do código que inserimos em que temos o permalink do post, o short URL, o ID do artigo e as tags, que neste caso não foram utilizadas.

2. VARIÁVEIS ESPECÍFICAS DOS ARTIGOS

Dentro de cada um dos tipos de artigos disponíveis para si na plataforma Tumblr, poderá ainda usufruir de variáveis diferentes em cada um deles.

Artigos de texto:

  • {block:Text}{/block:Text}
  • {block:Title}{/block:Title}
  • {Title}
  • {Body}

Exemplo:

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

Em termos práticos, este é o resultado em que o titulo do artigo tem o permalink associado:

Como criar um Theme para Tumblr (Parte III)

Artigos de citações:

  • {block:Quote}{/block:Quote}
  • {Quote}
  • {block:Source}{/block:Source}
  • {Source}
  • {Lenght}

Exemplo:

{block:Quote}
<div class="quote">
<blockquote>
<p>{Quote}</p>
</blockquote>
{block:Source}<cite>&#8212;{Source}</cite>
{/block:Source}
</div>
{/block:Quote}

Este é o resultado, que neste caso é bastante diferente daquilo que o tema utilizado neste exemplo iria criar:

Como criar um Theme para Tumblr (Parte III)

Artigos de Links:

  •  {block:Link}{/block:Link}
  • {URL}
  • {Name}
  • {Target}
  • {block:Description}{/block:Description}
  • {Description}
Exemplo:
{block:Link}
<div class="link">
<h2><a href="{URL}">{Name}</a></h2>
{block:Description}
{Description}
{/block:Description}
</div>
{/block:Link}
E este é o resultado, em que o título do artigo do link tem associado o link introduzido e tem também a descrição do mesmo:
Como criar um Theme para Tumblr (Parte III)
Artigos de Vídeo:
  • {block:Video}{/block:Video}
  • {block:Caption}{/block:Caption}
  • {Caption}
  • {Video-500}
  • {Video-400}
  • {video-250}
Exemplo:
{block:Video}
<div class="video">
{Video-400}
{block:Caption}<p>{Caption}</p>{/block:Caption}
</div>
{/block:Video}
E este é o resultado, em que aplicámos o tamanho de 400px de largura para o vídeo:
Como criar um Theme para Tumblr (Parte III)
Artigos de Imagens:
  • {block:Photo}{/block:Photo}
  • {block:Caption}{/block:Caption}
  • {Caption}
  • {LinkURL}
  • {PhotoAlt}
  • {PhotoURL-500}
  • {PhotoURL-400}
  • {PhotoURL-250}
  • {PhotoURL-100}
  • {PhotoURL-75sq}
  • {LinkOpenTag}
  • {LinkCloseTag}
  • {PhotoURL-HighRes}
  • {block:HighRes}{/block:HighRes}
Exemplo:
{block:Photo}
<div class="photo">
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
{LinkCloseTag}
{Caption}
</div>
{/block:Photo}
E este é o resultado, em que a imagem está redimensionada para 500px e tem a descrição associada:
Como criar um Theme para Tumblr (Parte III)
Artigos de sets de imagens:
  • {block:Photoset}{/block:Photoset}
  • {block:Caption}{/block:Caption}
  • {Caption}
  • {Photoset-500}
  • {Photoset-400}
  • {Photoset-250}
Exemplo:
{block:Photoset}
<div class="photoset">
{Photoset-500}
{Caption}
</div>
{/block:Photoset}

E este é o resultado, em que escolhemos o layout para expôr as imagens no blog e conta com a descrição do conjunto de imagens:

Como criar um Theme para Tumblr (Parte III)

Artigos de bate papo:

  • {block:Chat}{/block:Chat}
  • {Title}
  • {block:Lines}{/block:Lines}
  • {block:Label}{/block:Label}
  • {Label}
  • {Name}
  • {Line}
  • {UserNumber}
  • {Alt}
Exemplo:
{block:Chat}
<div class="chat">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
<dl>
{block:Lines}
<dt class="{Alt}"><strong>{block:Label}{Label}
{/block:Label}</strong></dt>
<dd>{Line}</dd>
{/block:Lines}
</dl>
</div>
{/block:Chat}

E este é o resultado em que tem o título e as linhas do bate papo:

Como criar um Theme para Tumblr (Parte III)

Artigos de audio:

  • {block:Caption}{/block:Caption}
  • {Caption}
  • {AudioPlayer}
  • {AudioPlayerWhite}
  •  {AudioPlayerGrey}
  • {AudioPlayerBlack}
  • {PlayCount}
  • {FormattedPlayCount}
  • {PlayCountWithLabel}
  • {block:ExternalAudio}{/block:ExternalAudio}
  • {ExternalAudioURL}
  • {block:AlbumArt}{/block:AlbumArt}
  • {AlbumArtURL}
  • {block:Artist}{/block:Artist}
  • {Artist}
  • {block:Album}{/block:Album}
  • {Album}
  • {block:TrackName}{/block:TrackName}
  • {TrackName}
Exemplo:
{block:Audio}
<div class="audio">
{block:Caption}
<h2><a href="{Permalink}">{Caption}</a></h2>
{/block:Caption}
{AudioPlayerGrey}
{block:ExternalAudio}
<p><a href="{ExternalAudioURL}">Baixe esta música.</a></p>
{/block:ExternalAudio}
<p>{PlayCountWithLabel}</p>
</div>
{/block:Audio}

E este é o resultado em que além da música em si tem ainda a descrição, onde neste caso inserimos o nome da música e ainda o número de vezes que ela já foi tocada:

Como criar um Theme para Tumblr (Parte III)

Caso tivéssemos inserido um URL para a música, apareceria o mesmo com a descrição “Baixe esta música”.

3. CONJUGANDO OS ELEMENTOS

Agora que introduzimos os elementos todos necessários e disponíveis para que o seu tema possa fazer a renderização dos artigos criados, podemos pegar em cada um deles e juntar no mesmo template, criando assim desde já um pequeno exemplo daquilo que poderá ser um template criado por si

<!DOCTYPE html>
<html lang="en">
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml"
href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
</head>

<body>
<h1>{Title}</h1>
{block:Description}
<p id="desc">{Description}</p>
{/block:Description}
<div id="posts">
{block:Posts}
<!-- TEXTO -->
{block:Text}
<div class="text">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
{Body}
</div>
{/block:Text}
<!-- CITAÇÃO -->
{block:Quote}
<div class="quote">
<blockquote>
<p>{Quote}</p>
</blockquote>
{block:Source}<cite>&#8212;{Source}</cite>
{/block:Source}
</div>
{/block:Quote}
<!-- LINK -->
{block:Link}
<div class="link">
<h2><a href="{URL}">{Name}</a></h2>
{block:Description}
{Description}
{/block:Description}
</div>
{/block:Link}
<!-- VIDEO -->
{block:Video}
<div class="video">
{Video-250}
{block:Caption}<p>{Caption}</p>{/block:Caption}
</div>
{/block:Video}
<!-- IMAGENS -->
{block:Photo}
<div class="photo">
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
{LinkCloseTag}
{Caption}
</div>
{/block:Photo}
<!-- PHOTOSET -->
{block:Photoset}
<div class="photoset">
{Photoset-500}
{Caption}
</div>
{/block:Photoset}

<!-- BATE PAPO -->
{block:Chat}
<div class="chat">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
<dl>
{block:Lines}
<dt class="{Alt}"><strong>{block:Label}{Label}
{/block:Label}</strong></dt>
<dd>{Line}</dd>
{/block:Lines}
</dl>
</div>
{/block:Chat}
<!-- AUDIO -->
{block:Audio}
<div class="audio">
{block:Caption}
<h2><a href="{Permalink}">{Caption}</a></h2>
{/block:Caption}
{AudioPlayerGrey}
{block:ExternalAudio}
<p><a href="{ExternalAudioURL}">Download this
audio clip.</a></p>
{/block:ExternalAudio}
<p>{PlayCountWithLabel}</p>
</div>
{/block:Audio}
{block:Posts}
</div><!-- end posts -->
</body>
</html>

O resultado em si não está estilizado e está muito pouco atraente para que os visitantes se sintam á vontade em visitar um blog com este aspeto:

Como criar um Theme para Tumblr (Parte III)

Mais tarde iremos fazer a estilização do mesmo, mas primeiro é necessário continuar a abordar todas as variáveis que poderá utilizar no seu tema.

4. UTILIZAÇÃO E FORMATAÇÃO DE DATAS

 A utilização de uma data agregada a cada um dos artigos é uma prática recorrente na grande maioria dos blogs e é uma forma de o visitante ter noção de por ex. quando foi criado o artigo. A utilização de datas pode ser feita de várias maneiras, desde a utilização de uma data simples no formato DD/MM/AAAA ou utilizando formas mais completas como uma frase “Este artigo foi criadno no dia X, mês Y, Ano Z.”

Para a utilização das datas, existe um grande conjunto de variáveis que podem ser utilizadas:

  • {block:Date}{/block:Date}
  • {block:NewDayDate}{/block:NewDayDate}
  • {block:SameDayDate}{/block:SameDayDate}
  • {DayOfMonth}
  • {DayOfMonthWithZero}
  • {DayOfWeek}
  • {ShortDayOfWeek}
  • {DayOfWeekNumber}
  • {DayOfMonthSuffix}
  • {DayOfYear}
  • {WeekOfYear}
  • {Month}
  • {ShortMonth}
  • {MonthNumber}
  • {MonthNumberWithZero}
  • {Year}
  • {ShortYear}
  • {AmPm}
  • {CapitalAmPm}
  • {12Hour}
  • {12HourWithZero}
  • {24Hour}
  • {24HourWithZero}
  • {Minutes}
  • {Seconds}
  • {Beats}
  • {TimeStamp}
  • {TimeAgo}

Exemplo:

{block:Audio}
<div class="audio">
{block:Caption}
<h2><a href="{Permalink}">{Caption}</a></h2>
{/block:Caption}
{AudioPlayerGrey}
{block:ExternalAudio}
<p><a href="{ExternalAudioURL}">Baixe esta música.</a></p>
{/block:ExternalAudio}
<p>{PlayCountWithLabel}</p>
</div>
{/block:Audio}
{block:Date}
<div class="date">
<p>Este artigo foi publicado em {DayOfWeek},
{Month} {DayOfMonth}, {Year}.</p>
</div>
{/block:Date}

Como criar um Theme para Tumblr (Parte III)

No próximo artigo iremos fazer a abordagem à criação de páginas dentro do seu blog, como as renderizar e como as personalizar utilizando as variáveis disponíveis.

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