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.

tumblr

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

Neste artigo vamos-lhe falar da utilização de AJAX em Tumblr , e não é por estarmos a falar sobre Tumblr que não podemos utilizar AJAX. De qualquer das formas, a verdade é que não é muito usual encontrarmos Tumblr’s com AJAX mas neste artigo vamos-lhe mostrar como utilizar AJAX no seu campo de pesquisa, inserindo uma pequena animação. Para simplificar o código utilizado vamos tirar partido do jQuery irá fazer o manuseamento do AJAX. A utilização de AJAX em websites tem tido uma crescente adesão pelas suas funcionalidades e mais valia que poderá fazer com que um simples website se torne em algo mais grandioso através de por ex. implementações visuais que melhorem não só o look de um website como também a sua usabilidade. Além disso é possível tornar um website pobre em algo que realmente comunica com os visitantes obtendo informações valiosas para a sua utilização futura.

1. QUAL O OBJETIVO

O objetivo da inserção desta particularidade e neste caso concreto no campo de pesquisa é que quando o visitante chegar no seu website e fizer uma pesquisa seja mostrada uma animação GIF para sinalizar que está sendo feita a pesquisa no website. De seguida será utilizada uma chamada jQuery $.get request introduzindo a pesquisa do visitante. Depois de efetuada a pesquisa podemos substituir o conteúdo da seção principal pelo conteúdo que está na solicitação AJAX. No fim remove-se a animação que dá conta da pesquisa  e está o processo concluído.

2. INSERIR A ANIMAÇÃO

Para inserir a animação temos duas opções: inserir dinamicamente com Javascript depois de o botão de envio da pesquisa ter sido premido e remover depois de a pesquisa estar completa. Mas imaginando que o visitante faz várias pesquisas seguidas, este processo irá ser sempre repetido. Então, outro método mais eficiente é o de adicionar a animação diretamente na markup e definir o seu estado de visibilidade para “none”. Isto faz com que a animação já esteja carregada e quando o visitante faz a pesquisa a única coisa que temos de fazer é tornar a animação visível e depois invisível quando a pesquisa é terminada. Caso ainda não tenha criado o seu campo de pesquisa, pode criá-lo com o seguinte código:

<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>

Agora, vamos inserir o GIF da animação diretamente antes da palavra Pesquisa:

<section class="search">
<form action="/search" method="get">
<h3><img id="loading" src="http://static.tumblr.com/udyyidq/
TR9l4ov0g/loadingicon.gif" alt="Please Wait" />Pesquisa</h3>
<input type="text" name="q" value="{SearchQuery}" />
<input type="submit" value="Search" />
</form>
</section>

Agora para estilizar e deixar a animação um pouco mais arranjada vamos inserir uma regra de estilização:

#loading {
float: left;
margin-right: 5px;
margin-bottom: 5px;
}

Como falámos anteriormente, queremos que o estado inicial desta animação seja invisivel, então é isso que vamos fazer, alterando o código CSS:

#loading {
display: none;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}

Neste momento a animação estará sempre presente:

Como criar um Theme para Tumblr (Parte VII)

3. TRABALHANDO O JAVASCRIPT

Esta é a altura em que começamos a entrar no núcleo do artigo, em que começamos a trabalhar o Javascript. Para fazer com que a animação faça aquilo que temos vindo a falar no artigo, é necessário algum código. Então, procure a seção <script> e insira o seguinte código (se não existir a secção, crie-a utilizando as tags <script></script>:

(function() {
// Search AJAX
var search = $('section.search')[0];
$('form', search).submit(function() {
var mainContent = $('#main'),
query = $('#query', this).val(),
loadingIcon = $('#loading', this);
loadingIcon.fadeIn(400);
$.get('/search/' + query, function(results) {
results = $(results).find('#main').html();
mainContent.html(results);
loadingIcon.fadeOut(400);
});
return false;
});
})();

Depois de aplicado este código, dirija-se ao seu campo de pesquisa e efetue uma pesquisa:

Como criar um Theme para Tumblr (Parte VII)

Depois de clicar para fazer a pesquisa, a animação irá aparecer:

Como criar um Theme para Tumblr (Parte VII)

Em termos escritos, o código Javascript que inserimos divide-se em algumas partes distintas. Logo no inicio fazemos a chamada ao campo de pesquisa e controlamos o botão, para que funcione como trigger para acionar a animação. Quando é detetado o clique sobre o botão de pesquisa, é acionada a parte do código onde a animação é inserida na página com um efeito de fade in. Depois de concluída a pesquisa, são apresentados os resultados e a animação é retirada com o efeito de fade out.

Com a utilização de um gif, algum CSS e algum código Javascript é possível tornar a pesquisa uma tarefa para os visitantes um pouco mais atrativa, talvez até quebrando a monotonia do seu website sem qualquer tipo de animação que faça os visitantes sentirem-se mais á vontade. A utiização deste tipo de técnicas não só melhora o visual do website como também faz com que os visitantes notem que o website está trabalhado e tenham interesse nisso, melhorando até a usabilidade do mesmo. A utilização de Javascript e jQuery pode sempre trazer uma mais valia aos seus websites, sejam eles um Tumblr, um website HTML, PHP ou um CMS como WordPress ou Joomla.

 

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