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. CRIAR PÁGINAS

A primeira ideia que você poderá ter acerca do Tumblr é que devido á sua simplicidade não é possível a criação de páginas na plataforma, mas está errado. É verdade que a criação de páginas é uma funcionalidade relativamente recente, e foi uma adição que foi muito saudada pela comunidade de utilizadores Tumblr, que podem agora criar páginas para o seu blog a partir do painel de controlo da plataforma.

Depois de criar as páginas que pretender, é possível criar um menu no seu template para que os visitantes possam tirar partido das páginas e utilizar, ler ou simplesmente partilhá-las com os amigos. Para criar uma página, dirija-se ao painel de administração e clique em personalizar. No menu do lado esquerdo, em baixo, encontrará o local para começar a criar as suas páginas:

Como criar um Theme para Tumblr (Parte IV)

Depois de clicar em Adicionar uma página, será aberta uma nova janela onde terá acesso ás opções da nova página bem como o local onde poderá inserir o conteúdo da mesma:

Como criar um Theme para Tumblr (Parte IV)

De notar que no topo desta janela tem a possibilidade de dar à página um layout diferente, podendo optar entre manter o layout padrão, layout personalizado ou fazer um redirecionamento da página.

Depois de criar as páginas que pretende, é possível criar um menu com as linkagens de cada uma das páginas, usando um código com uma estrutura similar à seguinte:

{block:HasPages}
<nav>
<ul>
<li><a href="/">Inicio</a></li>
{block:Pages}<li><a href="{URL}">{Label}</a></li>
{/block:Pages}
</ul>
</nav>
{/block:HasPages}

A magia neste pequeno trecho de código está no bloco {block:HasPages} que basicamente significa que se houver páginas adicionais associadas a este blog, poderá utilizá-las. Assim, se o utilizador não tiver criado quaisquer páginas, não será renderizada a markup vazia, o que não faria sentido se acontecesse. Depois, tirando partido de uma das funcionalidades introduzidas em HTML5, utilizamos a tag <nav> para introduzir uma semântica mais adequada e mais funcional.

No entanto temos ainda um bloco adicional que à primeira vista poderia significar o mesmo que o bloco inicial, mas é diferente. O bloco has pages faz a verificação se o blog tem páginas adicionais, e o bloco pages é um gênero de uma declaração For. Então, o que é? Podemos desmistificar o Pages com um exemplo em um trecho de código:

<?php for ($i = 0; $i < count($pages); $i++) : ?>
<li><a href="<?php echo $url; ?>"><?php echo $label; ?>
</a></li>
<?php endfor; ?>

Comparando os dois trechos de código, o Pages e o exemplo desmistificado, o {URL} faz a renderização do URL da página e o {Label} faz a renderização do nome da Página, criando assim o menu com o nome das páginas e os respectivos URL associados. Então, se adicionarmos o código no nosso template, será feita a renderização das páginas criadas e será criado um menu de navegação. Depois, com alguma estilização utilizando CSS, poderá criar um menu simples bonito e fácil de utilizar para os visitantes:

Como criar um Theme para Tumblr (Parte IV)

Ao visitarmos o blog e verificarmos o código fonte do mesmo, podemos verificar como foi feita a renderização do código HTML em relação ao nosso menu:

Como criar um Theme para Tumblr (Parte IV)

2. OPÇÕES DE PERSONALIZAÇÃO

Um dos pontos chave que deverá ter em conta na criação de um theme é a sua flexibilidade. Felizmente a plataforma Tumblr permite que sejam adicionados atributos aos themes de forma facilitada, bastando adicionar as meta tags à secção head do seu documento. Sim, é assim tão simples. O formato básico para fazer a adição de um novo meta tag é o seguinte:

<meta name="type:Value" content="contentType" />

O aspeto mais importante nesta declaração é o tipo de meta tag que você especifica, podendo escolher de entre um conjunto de possibilidades que lhe vamos apresentar de seguida:

  • color – cria um seletor de cor, e é usado o usuário escolher a cor pretendida para o blog
  • if – é utilizado como boolean e cria uma checkbox
  • text – cria uma caixa de texto
  • image – cria um formulário de input que poderá ser usado por exemplo para fazer o upload de uma imagem de cabeçalho personalizada.
  • font – cria uma caixa de seleção onde poderá escolher de entre vários tipos de letra

Analisando cada um destes pontos individualmente poderemos verificar as suas particularidades.

Meta-color

Imagine que um cliente lhe informa que pretende mudar a cor do texto quando quiser. O meta color permite-lhe dar a possibilidade ao visitante de alterar a cor de um elemento que você escolhe. Digamos que pretende dar a escolher ao visitante qual a cor que ele pretende para o texto. Para começar, dentro da tag <head> do seu theme insira o seguinte código:

<meta name="color:Text" content="#292929" />

Só este código irá criar uma nova opção no painel de controlo Tumblr, na parte da aparência. Ao determinar o color como o meta name, isto faz com que o Tumblr renderize um seletor de cor quando clicar no quadrado onde tem a cor:

Como criar um Theme para Tumblr (Parte IV)

Agora, para fazer com que esta alteração seja introduzida no template é necessário introduzir uma regra de estilização CSS onde é feita a introdução do valor da meta tag. Entao, insira o seguinte código:

body {
color: {color:Text};
}

E desta forma será feita a alteração da cor do texto de acordo com o especificado no painel de administração. Podem ser utilizadas muitas outras variações, como exemplificamos no código abaixo:

<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#333333"/>
<meta name="color:Secondary Text" content="#777777"/>
<meta name="color:Tertiary Text" content="#cccccc"/>
<meta name="color:Links" content="#c00906"/>
<meta name="color:Header Background" content="#444444"/>
<meta name="color:Title" content="#ffffff"/>
<meta name="color:Description" content="#999999"/>
<meta name="color:Post Headers" content="#111111"/>
<meta name="color:Big Quote" content="#e0e0e0"/>
<meta name="color:Photo Border" content="#dddddd"/>

E este é o resultado no painel de administração:

Como criar um Theme para Tumblr (Parte IV)

Meta-Text

Haverá situaçães em que irá querer obter informações a partir do usuário para as inserir no theme. Um bom exemplo disso é o username das redes sociais, em que o usuário insere essa informação no painel de controlo, e depois essa informação é inserida no theme de acordo com o especificado. Então, para obter essa informação a partir do painel de administração, teremos mais uma vez de inserir uma meta tag na secção head do documento. Neste exemplo iremos buscar o username do Twitter do usuário, para que possamos inserir no theme e partilhar com o mundo o username:

<meta name="text:Username Twitter" content="" />

Então esta meta tag irá criar um campo no painel de administração onde o usuário poderá inserir o seu username do Twitter:

Como criar um Theme para Tumblr (Parte IV)

Depois, para fazer a renderização e inserir o username no theme, é necessário inserir o código para o efeito:

<p>Siga-me no Twitter: @{text:Username Twitter}</p>

E este é o resultado:

Como criar um Theme para Tumblr (Parte IV)

Meta-Image

A meta tag image permite dar a possibilidade ao usuário de alterar por exemplo a imagem de fundo do seu theme. Este é um ponto que é bastante requisitado e que faz todo o sentido dar a oportunidade ao usuário de poder alterar o fundo do seu theme de acordo com aquilo que pretende. Então, mais uma vez o primeiro passo é inserir a meta tag na secção head do documento:

<meta name="image:Imagem de Fundo" content="">

Isto irá criar um campo no painel de administração onde poderá ser feito o upload de uma imagem de fundo nova:

Como criar um Theme para Tumblr (Parte IV)

Para implementar a imagem de fundo que for introduzida, o processo é simples, dentro do código terá de inserir o código que irá determinar a imagem de fundo para o theme, e neste caso está embutido em uma série de opções que foram criadas:

body { background: {color:Background} url('{image:Imagem de Fundo}') top left repeat; color: {color:Text}; font: normal 1em/1.5 Georgia, serif; margin: 0; }

Este código CSS irá introduzir tanto a cor de fundo determinada como a imagem, bem como uma série de outras opções relativamente ao tipo de letra.

Meta-Font

Por fim chegamos ao meta font, que basicamente e como poderá á partida imaginar é relativo ao tipo de letra a utilizar. Com a meta tag font você poderá dar ao usuário a possibilidade de escolher o tipo de letra a utilizar. Neste caso vamos focar a alteração do tipo de letra em relação aos titulos, nomeadamente h1, h2 e h3. Mais uma vez, é necessária a introdução de uma meta tag na secção head do documento:

<meta name="font:Titulos" content="Helvetica, Arial,sans-serif" />

Irá ser criado um campo no painel de administração onde poderá alterar o tipo de letra a utilizar nos títulos do theme:

Como criar um Theme para Tumblr (Parte IV)

Para que seja introduzida esta alteração no theme, é necessário introduzir um pequeno trecho de código:

h1, h2, h3 {
font-family: {font:Titulos};
}

Esta regra de estilização CSS irá aplicar o tipo de letra escolhido no painel de administração a todos os headings h1,h2 e h3!

No próximo artigo iremos abordar os sistemas de comentários e como os inserir no seu theme!

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