Varal de Bits » Quebra Galho

Select and Share

Renato Ferraz — Fri, 28 Jan 2011 23:04:55 +0000

Select and Share é uma biblioteca em JavaScript que permite seus visitantes compartilhar qualquer conteúdo do seu site em algumas redes sociais. Agora na versão 2.0 você também poderá acompanhar o que está sendo compartilhado, quantas vezes um conteúdo foi compartilhado e também em quais redes sociais ele foi compartilhado, também foi adicionado um gráfico para você acompanhar o alcance das redes sociais.

Como funciona?
Basta o visitante do seu site selecionar qualquer texto e pronto, irá aparecer as redes que ele pode compartilhar.

Como configurar somente a biblioteca Javascript.
Muito simples, basta adicionar o JavaScript e CSS em seu site e pronto. Nada mais, já está pronto para usar.

É claro existe alguns ajustes que você pode fazer. Se você estiver usando somente a biblioteca JavaScript fique a vontade para editar o CSS e no JavaScript você pode alterar algumas linhas:

var _ss_networks = Array('facebook','twitter','orkut','delicious','google','hotmail','linkedin','myspace','yahoo', 'email', 'wordpress');

var _ss_title_page = jQuery('title').text();
var _ss_url_site = window.location.href;
var _ss_selected_text;

var _ss_title_networks = 'Compartilhe este conteúdo.';
var _ss_wordpress_text = 'Digite a url de seu WordPress.';
var _ss_email_text = 'Para qual e-mail deseja enviar?';
var _ss_email_is_invalid = 'E-mail inválido.';
var _ss_url_is_invalid = 'URL inválida.'

// Se você alterar _ss_stats_enable para true é necessário adicionar a url na variável _ss_data_stats_url
var _ss_stats_enable = false;
var _ss_data_stats_url;

Você pode remover qualquer rede social que não deseja e também mudar os textos que irá aparecer para seus visitantes. Um nova opção na versão 2.0 é que você pode optar para a biblioteca fazer uma requisição ajax para salvar as informações que seu visitante está compartilhando:

var _ss_stats_enable = true;
var _ss_data_stats_url = 'http://www.exemplo.com.br/estatistica';

A biblioteca irá fazer uma requisição para a url informada passando os parâmetros:

title_page; // Título da página.
url_site; // URL da página.
network; // Rede social selecionada pelo visitante.
selected_text; // Texto selecionado.

Salve essas informações e utilize da maneira que desejar.

WordPress

Já no WordPress essas alterações no CSS podem ser feitas editor de plugins e no JavaScript podem ser feitas no menu do plugin. Onde você pode também acompanhar as estatísticas.

Redes Sociais
Facebook, Twitter, orkut, delicioso, google, hotmail, LinkedIn, Yahoo, E-mail and WordPress.

GitHub
JavaScript
Plugin WordPress

WordPress
Plugin

HiddenFile

Renato Ferraz — Sat, 01 Jan 2011 01:06:06 +0000

HiddenFile é uma biblioteca baseado em jQuery que facilita a aplicação de CSS em input tipo “file”. Utilização: Você precisa adicionar a biblioteca jQuery, HiddenFile e o arquivo CSS da biblioteca no head de sua página. Depois basta adicionar a classe hiddenfile em algumas destas tags , , , e

GitHub e Exemplo Online

Adicionar em seu site.

Exemplos de utilização:

adicionar mais fotos

Você poderá mudar a mensagem de selecionar a imagem usando o parâmetro title.

adicionar fotos

Bela solução para as “firulas” dos designers

Renato Ferraz — Fri, 06 Nov 2009 15:17:01 +0000

Aqui entre nós. Esses designers deveriam aprender um pouco mais sobre html. Acho que vou escrever para o MEC para incluir html na grade curricular do curso de design web. Esses caras acham que se é possível desenhar um site no Photoshop é possível fazer ele em html, ainda mais tendo que fazer funcionar no IE6. Aff. Um tempo atrás peguei um site para produzir e criar um template para o WordPress e o design colocou todo o conteúdo do site em uma fonte “esdrúxula” e eu procurei uma fonte padrão mais parecida com a dele, e o cara veio reclamar que não era a fonte que ele “criou”. Oh deus do design!

Um tempo atrás o site do PatioSavassi tinha dezenas de flash só para colocar os títulos das seções com fontes diferente, uma solução aceitável mas de muito código. Bom vamos ao que interessa. Nesses momentos que os design te fazem raiva com fontes “esdrúxula”. Você só precisa fazer algumas “coisinhas”. Primeiro pedir os arquivos das fontes para ele. Depois utilizar esse script muito interessante e simples de usar. Cufón – fonts for the people.

Basta você fazer o download da biblioteca, escolher a fonte desejada e gerar o script da fonte atraves do site. Após preencher as informações necessárias e selecionar a fonte clique em “Let’s do this!”. Baixe o script que ele irá gerar e divirta-se. Outra coisa interessante é que o script captura informações do seu CSS criando os canvas com os atributos dele.

Exemplo fonte “Cherif”

Viu como é fácil colocar isso em sua página.
Até em links com hover: Varal de Bits

CSS

Javascript

HTML



    Viu como é fácil colocar isso em sua página.

    Até em links com hover:
    Varal de Bits

W3C X Target _new ou _blank

Renato Ferraz — Sun, 26 Jul 2009 16:04:59 +0000

Estou agora na era W3C. A empresa que trabalho exigi que façamos todos os sites validados pela W3C. Nunca me preocupei tanto com isso como agora. Mas recentemente tive um pequeno problema. Um cliente pediu para abrir um aquivo pdf em outra página. E lá fui eu todo bonito coloquei o target=”_new”, para descobrir que o W3C não valida isso. Tudo bem que vem com aquela liçao de moral. “De que o usuário do site tem que ter a liberdade de abrir um link na página que ele quiser e bla, bla, bla…” mas cliente não quer nem saber disso. Dureza. Ai começa a chover um monte de coisa…

Varal de Bits
// Script
function link_externo(url){
 window.open(url,”,”);
}

Não preciso nem falar o que isso gera nos browsers. E eu como sou um cara muito chato. Não achei isso a melhor solução. Deve existir outra maneira melhor para fazer ter o target=_new e passar no W3C. Foi ai que entrou em ação nosso amado jQuery. Ow ferramente maravilhosa. Uma solução muito mais simples, funcional e elegante.

BitBucket
// Script
$(document).ready(function(){
   $(“a[@rel=externo]“).attr(‘target’,'_new’);
});

Ou seja, qualquer link em seu site que você colocar o rel=”externo”, o jQuery irá aplicar o atributo target para você. Maravilhoso.

Aproveite e se livre desse x vermelho no canto direito do seu Firefox.