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 difícil 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:

Neste artigo vamos-lhe ensinar como fazer a integração do Twitter na plataforma Tumblr tirando partido das funcionalidades existentes, pois devido á sua popularidade, a equipa de desenvolvimento do Tumblr decidiu integrar o suporte para Twitter na sua plataforma. Uma vez que não vamos utilizar qualquer tipo de solução e linguagem do lado dos servidor, todo o processo é feito tirando partido de Javascript. Além da integração do Twitter na plataforma podemos também habilitar a pesquisa na mesma. Este processo é feito através da integração de um pequeno trecho de código, à semelhança de daquilo que será feito com a integração do Twitter.

1. ATIVAR O SUPORTE

Para que o suporte á integração Twitter esteja ativado, é necessário dirigir-se á tab de serviços no painel de administração do seu Tumblr, para que seja possível fazer a conexão á sua conta do Twitter. Esta ligação é feito através do O-Auth que faz o login na plataforma do Twitter de forma segura. Depois de fazer o processo de conexão da sua conta Twitter, poderá começar a utilizar as template tags disponíveis para o efeito:

  • {TwitterUsername} – Esta variável será o seu username do Twitter.
  • {block:Twitter}{/block:Twitter} – O código que for inserido dentro deste bloco apenas irá ser renderizado se a conexão á sua conta Twitter tiver sido feita, como referenciamos anteriormente.

2. TWEETS.JS

O passo anterior apenas irá habilitar o suporte para o Twitter, mas no entanto ainda é necessário implementar a funcionalidade do mesmo. Antes de se fechar a tag body, é necessário fazer a chamada ao ficheiro tweets.js:

{block:Twitter}
<script src="/tweets.js"></script>
{/block:Twitter}

Este pequeno código irá inserir dentro do bloco Twitter a chamada ao ficheiro tweets.js pois não faz sentido fazer o pedido HTTP se não estiver sido habilitado o suporte do Twitter. Quando este script é executado, irá correr a função que irá fazer a chamada dos tweets da sua conta para um array. Esta função tem de ser criada manualmente, filtrando os tweets e inserindo-os na página como uma lista de itens:

{block:Twitter}
<div id="twitter" style="display: none;">
<ul id="tweets"></ul>
</div>
<script>
function recent_tweets(data) {
var frag = document.createDocumentFragment(),
i = data.length,
li, a;
while ( i-- ) {
li = document.createElement('li');
a = document.createElement('a');
a.href = 'http://twitter.com/{TwitterUsername}/status/'
+ data[i].id;
a.appendChild(document.createTextNode(data[i].text));
li.appendChild(a);
frag.appendChild(li);
}
document.getElementById('tweets').appendChild(frag);
document.getElementById('twitter').style.display =
'block';
}
</script>
{/block:Twitter}

Mais uma vez o código é inserido dentro do bloco Twitter para poupar tempo de carregamento caso o suporte do Twitter não tenha sido ativado. Caso tenha notado, é definido que a div #twitter esteja ocultada pois apenas deverá ser mostrada se a função recent_tweets tiver sido chamada. Se não tiver sido feita a chamada, é porque terá acontecido um erro e nesse caso a div #twitter não será renderizada.

3. DATA OBJECT

O data object contém uma variedade de informação que serão interessantes:

  • text – é o tweet
  • id – o id associado ao tweet
  • in_reply_to_user_id – o id do usuário a que o tweet deu resposta
  • created_at – data da criação do tweet
  • source – o programa utilizado para criar o tweet
  • user.screen_name – o username do criador do tweet
  • user.friends_count – o número de amigos do criador do tweet

Para ver a lista completa de opções disponíveis através do data object, instale o Firebug, aceda ao separador Net e muda e para o get tweets.js. Aí verá um enorme conjunto de dados que são praticamente ilegíveis. Para tornar mais legível este conjunto de dados, uma das soluções é utilizar uma ferramenta como o gênero de JS Beautifier.

4. ATIVAR A PESQUISA

Para ativar a pesquisa na plataforma, é necessário proceder a alguns passos primeiro. Como seria de esperar, a plataforma contém a funcionalidade de pesquisa integrada, mas poderá não estar ativada por defeito. Então, para o fazer é necessário introduzir um formulário para o efeito:

<section class="search">
<form action="/search" method="get">
<h3>Pesquisa</h3>
<input type="text" name="q" value="{SearchQuery}" />
<input type="submit" value="Search" />
</form>
</section>

Este formulário necessita da utilização de comandos específicos:

  • action – a este atributo tem de se inserir o valor “/search” pois vai fazer com que seja redirecionado para o endereço da pesquisa relativo ao seu website, para onde serão transmitidas as informações da pesquisa.
  • method – este atributo deverá ser definido como “get” que irá determinar de que forma é que o valor inserido no campo de pesquisa irá ser passado para pa pesquisa
  • name – este é o nome que a caixa de pesquisa irá utilizar. Este passo não é obrigatório, mas é recomendado, inserir o valor {SearchQuery} neste atributo, pois ao clicar para fazer a pesquisa e voltar atrás, irá manter o valor inserido.
Como criar um Theme para Tumblr (Parte VI)

O formulário de pesquisa poderá ser inserido em qualquer local do seu theme, ao seu gosto, sendo que para o habilitar e como vimos anteriormente, são necessários apenas alguns passos. Experimente criar o campo de pesquisa e fazer uma pesquisa sobre qualquer coisa para observar o seu funcionamento. Notará que o endereço URL criado irá conter as palavras de pesquisa, e embora isto funcione sem problemas, não é o método mais conveniente para os usuários.

Aplicando apenas os passos que lhe indicámos, se efetuar uma pesquisa sobre algo que exista no blog, serão apresentados os resultados em uma lista como seria de esperar, mas caso a sua pesquisa não obtenha resultados, será apresentada uma área sem conteúdo – o que será pouco apreciado pelos visitantes, então a solução é criar uma página específica para a pesquisa.

5. PÁGINA DE PESQUISA

Para criar uma página de pesquisa iremos tirar partido dos blocos que Tumblr nos oferece para o efeito, podendo assim criar um ambiente mais propício para as pesquisas efetuadas pelos usuários no seu website. Assim, vamos primeiro determinar como iremos fazer o processo e como apresentar os resultados na página de pesquisa:

  • Depois de o visitante inserir os termos da pesquisa e clicar no botão de pesquisa, será apresentado um título na página que indica que está a ver os resultados da pesquisa
  • O título irá também apresentar o valor da pesquisa, como por ex. Resultados da pesquisa para <termos da pesquisa>
  • Por baixo do título iremos também introduzir o número de resultados obtidos
  • Se não forem encontrados resultados, irá ser apresentada uma mensagem a informar o visitante, ao contrário do que aconteceria se não utilizássemos uma página para a pesquisa, onde iria ficar um espaço em branco.
  • Para conveniência do visitante iremos introduzir também nesta página o campo de pesquisa, para que possam ser feitas pesquisas neste página evitando que o visitante tenha de retroceder no website para efetuar uma nova pesquisa

Blocos e variáveis disponíveis
Enquanto que outras plataformas como WordPress oferecem um template para a pesquisa, que irá ser automaticamente utilizado pela pesquisa, esta funcionalidade funciona de forma um pouco diferente no Tumblr, sendo que utilizamos o bloco {block:SearchPage}. Tudo o que for inserido dentro deste bloco só será apresentado caso o visitante tenha efetuado alguma pesquisa:

  • {block:SearchPage}{/block:SearchPage} – Só irá ser renderizado nas páginas de pesquisa
  • {SearchQuery} – o valor inserido na pesquisa
  • {SearchResultCount} – o valor do número de resultados obtidos na pesquisa
  • {block:NoSearchResults}{/block:NoSearchResults} – dentro deste bloco iremos inserir as informações que pretendemos que sejam apresentadas aos visitantes caso não existam resultados na pesquisa
  • {URLSafeSearchQuery} – formato seguro do URL da pesquisa

Então, conhecendo os blocos e variáveis disponíveis, podemos criar todo o código necessário:

{block:SearchPage}
<h2 id="searchItemsFound">
Resultados de pesquisa para: &#8220;{SearchQuery}.&#8221;
<small>{SearchResultCount} arigos encontrados.</small>
</h2>
{block:NoSearchResults}
<div id="searchResults">
<section class="search">
<form action="/search" method="get">
<h5>Pesquise aqui... </h5>
<input type="text" name="q" value="{SearchQuery}"
/>
<input type="submit" value="Search" />
</form>
</section>
</div>
{/block:NoSearchResults}
{/block:SearchPage}

Introduza este código na secção de conteúdo do seu código.

Como Criar um theme para Tumblr

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