webmaster

Quovolver: Citações Elegantes Em Seu Site

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

Quovolver: Citações Elegantes Em Seu Site

Quovolver logo

É bastante comum, para web sites dos mais diversos gêneros, o uso de citações de pessoas ou trechos de livros para corroborar determinado artigo ou, simplesmente, reforçar as mensagens e conteúdos, em geral, apresentados neste site. Outra situação bem comum é empresas usarem boas citações de seus clientes no site para corroborar a qualidade de produtos e/ou serviços.

Em (X)HTML, existe uma tags específicas para isso, sendo a mais conhecia a blockquote, que, semanticamente, foi projetada para a exibição de citações de pessoas e/ou publicações em páginas (X)HTML. Mas, às vezes, uma apresentação “crua” dessas citações não é o suficiente, e é neste ponto que entra o Quovolver!

O Quovolver interpreta um set de blockquotes e os apresenta de maneira mais elegante e sofisticada, alternando cada um deles e adaptando seu “container” para os respectivos tamanhos. Realmente algo bonito de se ver! E, como não poderia deixar de ser, é muito, muito simples de ser usado!

Usando Quovolver

Em primeiro lugar, faça o download do Quovolver (no momento da escrita deste artigo, está na versão 1.0). Você vai receber um arquivo compactado com 4 arquivos dentro:

  • index.html
  • jquery.quovolver.js
  • readme.txt
  • style.css

O único realmente essencial é “jquery.quovolver.js”, já que os outros são somente para exemplo, explicações e estilização (que, para o uso em sites “de verdade”, deve seguir a “linha visual” de onde o Quovolver será usado).

Então, para começar, é preciso chamar o jQuery juntamente com o arquivo js do Quovolver (usando sua própria estrutura de pastas, claro):




Obviamente, é preciso ter um set de blockquotes para que o plugin funcione corretamente (é para isso que ele serve, certo?), então, em seu (X)HTML, deve existir uma estrutura, mais ou menos, assim:

“uspendisse potenti. Nam pellentesque, dolor sit amet egestas volutpat, quam leo eleifend mauris, sed blandit nulla odio eu tellus. Etiam dapibus mauris eu felis varius at tincidunt turpis interdum. Aenean vitae odio odio, nec cursus purus. Morbi justo justo, malesuada et consectetur vel, sodales sit amet lacus. ”

– Quote Author

“Vestibulum pellentesque sagittis tortor, vitae interdum justo mollis gravida. Maecenas vulputate, lacus et lacinia imperdiet, leo orci malesuada ipsum, volutpat aliquam sem augue sit amet mi. Nulla facilisi.”

– Quote Author

“Suspendisse potenti. Cras a eros a nulla accumsan sollicitudin. Nulla id suscipit turpis. Nunc posuere vehicula erat, a tempor lorem aliquet ac.”

– Quote Author

Então, basta 1 linha para ativar o Quovolver (depois de iniciar o jQuery):


$('blockquote').quovolver();

Pronto! As citações serão alternadas de tempos em tempos e o “box” que as envolve se adaptará dinamicamente a cada tamanho!

Uma dica é, quando for mexer no CSS para adaptar as citações dinâmicas, deixe a largura dos elementos de citação com largura fixa, especificando algum valor para a propriedade “width”. Isso garante que a animação ocorra somente no sentido vertical.

Opções do Quovolver

O Quovolver tem somente 2 opções:

  • speed. Velocidade da animação em milissegundos (padrão “500”)
  • duration. Tempo, em milissegundos, antes de trocar de citação (padrão “6000”)

Então, se fosse preciso ativar o Quovolver com velocidade de animação de 350 milissegundos e cada citação ficar disponível para leitura durante 5 segundos, o código seria:


$('blockquote').quovolver(350, 5000);

Conclusão sobre o Quovolver

Obviamente que nem todo site precisa de uma apresentação tão elegante e sofisticada de citações. Entretanto, utilizar o Quovolver para tal função, certamente é um diferencial!

Utilize o Quovolver com sabedoria e faça das citações uma arte!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)

Deixe o seu comentário, participe!

Leave a Reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.