Category Dev

Descubra a fonte usada em uma imagem

fonts-title

Pode ser a coisa mais frequente que encaramos quando o trabalho envolve design e criação. Vem aquela imagem com uma fonte totalmente desconhecida e por ironia do destino, é aquela que precisamos usar. E agora?

Através de um sistema de detecção conhecido como OCR e um gigantesco banco de fontes, foi criado um sistema chamado WhatTheFont! Basta enviar um pedaço da imagem com o texto e com pequenos passos o sistema devolve qual fonte que é a usada e (se ela for gratuita) até o download da mesma. Clique aqui para conhecer.

Colorbox: crie visualizações e slideshows com este lightbox minimalista

Dica boa para webdesigners/webdevelopers é o uso deste plugin feito com JQuery. Com poucas linhas de código é possível criar visualizações de imagens e galeria de fotos para seu site.

colorbox

O plugin ainda conta com alguns efeitos de transição, interface minimalista e extremamente leve. Tenho usado ele bastante em alguns jobs recentes e tem me atendido bem. Para quem quiser conferir, o site oficial tem uma documentação simplificada e alguns exemplos de uso. Os arquivos do Colorbox também estão disponíveis no Github.

Nível de conhecimento exigido: 3 de 5

Flow Player JQuery Tools: Incremente seu site com belos efeitos

Desde que eu aprendi a usar o JQuery, difícilmente eu faço algum site sem ele. E junto com ele temos uma tonelada de plugins e ferramentas para ter mais funcionalidades e efeitos. E são os efeitos que mais me chamaram atenção no JQuery. Através de poucos comandos é possível criar animações funcionais que embelezam o site e dão um certo diferencial a ele.

Buscando algumas novidades, encontrei o Flow Player JQuery Tools: um conjunto de ferramentas com atrativos componentes, como o tooltip, abas, efeitos para formulário e modais. E a melhor parte: gratuito!

Para fazer funcionar em seu site, basta baixar o arquivo (link), descompactá-lo e copiá-lo para o diretório específico. Você vai precisar também ter o JQuery disponível em seu site. Não se esqueça de visitar a área de tutoriais para poder obter as imagens e o css dos componentes.

Gerador de imagens "carregando…"

ajax-load-info-geradorSe você usa Ajax, este site vai ser uma mão na roda. Com apenas 3 cliques você pode gerar aqueles gifs de “loading” personalizados, escolhendo forma, cor de fundo e cor da imagem.

Lytebox: Crie visualizações e slideshows para imagens em seu site

Lytebox permite que você crie efeitos para visualização e slideshow para galerias de imagens de forma simples e bonita. Quando um imagem é clicada, a página onde ela está fica escurecida e uma ampliação da imagem aparece no centro da tela, com navegação para uma galeria de imagens e uma apresentação em slideshow com um timer predefinido.


Para colocar no seu site você precisa deste arquivo, onde estão os .js, o estilo CSS da galeria e as imagens de navegação.

A chamada para o script deve ser declarada dentro da tag <HEAD> com esses parâmetros:

<script type=”text/javascript” language=”javascript” src=”lytebox.js”></script>
<link rel=”stylesheet” href=”lytebox.css” type=”text/css” media=”screen” />

Lembre-se de que se você descompactou o arquivo em uma pasta difente, você deve indicá-lo no código acima.

Agora vem as chamadas para a imagem. Essas chamadas são colocadas no parâmetro rel do link que tem a imagem como caminho. Veja exemplo neste link.

<a title=”Primeiro link do exemplo” rel=”lytebox” href=”angelinajolie01.jpg”>link</a>

Repare no parâmetro title e rel. O primeiro será a legenda que vai aparece em baixo da imagem, o segundo é a chamada para o Lytebox.

Para criar uma galeria, no parâmetro rel coloque lytebox[nome da galeria] indicando um nome para a galeria de imagens. Se você colocar vários links com esse mesmo parâmetro, na visualização irá aparecer a opção de navegar entre as fotos. Clique em uma das imagens acima para ver o exemplo.

O último uso é o Slideshow. Para criar uma transição de imagens, use no parâmetro rel a chamada lyteshow[nome da galeria]. O funcionamento é igual ao da galeria, porém agora as imagens mudam automaticamente.

É isso aí, galera. Este foi o primeiro post desta categoria. Meu objetivo aqui será compartilhar com vocês técnicas, ferramentas, dicas e scripts para facilitar a vida do programador e do webdesigner. Em breve teremos mais.