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

Fiz o possível para trabalhar com o código de um forma simples para facilitar o entendimento. Bom chega de papo furado e mãos a obra. O Flex 4 basta uma pequena busca no google e você já consegue baixar, já o PHP e SQlite acho que esse link pode ajudar, um pouco antigo mas te dá o caminho das pedras. Um “pouquinho” de esforço não mata ninguém.

Depois de criar um novo projeto WEB no Flash Builder 4. Você terá o seguinte código.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

Agora vamos adicionar um mx:HTTPService dentro de fx:Declarations. Agora nosso código cresceu um pouco e ficou assim.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

	<fx:Declarations>
		<mx:HTTPService id="ControllerUsers" result="ControllerUsersResult(event)" useProxy="false" resultFormat="text" method="POST" />
	</fx:Declarations>

</s:Application>

É importante que você adicione um id, result no mx:HTTPService conforme o código acima. Ao salvar irá aparecer um erro, mas não se preocupe com ele. Logo está erro irá virar história.

Adicione agora uma tag fx:Script dentro de s:Application onde iremos trabalhar nossas ações. Em fx:Script vamos adicionar alguns funções. ControllerUsersResult essa função irá capturar o resultado do mx:HTTPService e a outra função será InitSystem. Está irá apenas executar algumas ações ao carregar nossa aplicação. Iremos também adicionar duas variáveis e uma delas será Bindable. Vou explicar tudo isso em seguida, mas antes vamos ver como nosso código ficou.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   creationComplete="InitSystem()"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

	<fx:Declarations>
		<mx:HTTPService id="ControllerUsers" result="ControllerUsersResult(event)" useProxy="false" resultFormat="text" method="POST" />
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import com.adobe.serialization.json.JSON;
			import mx.rpc.events.ResultEvent;

			[Bindable]
			public var Users:Array;	

			public var UrlController:String = "http://varaldebits.com.br/sample/flex-php-sqlite/controller.php";

			private function InitSystem():void {
				ControllerUsers.url = UrlController;
				ControllerUsers.send();
			}

			private function ControllerUsersResult(event:ResultEvent):void {
				Users = JSON.decode(String(event.result)) as Array;
			}

		]]>
	</fx:Script>

</s:Application>

Resolvemos aquele erro, não foi? Mas agora apareceu outro erro. Este erro é porque precisamos adicionar dentro da pasta libs o arquivo “corelib.swc“. Estou utilizando JSON para capturar os dados que o PHP irá retornar.  Adicione o arquivo na pasta libs e aguarde alguns segundos e… este erro também virou história.

Conforme prometido, vamos agora explicar o código.

Primeiro porque a variável Users é [Bindable] e a UrlController não? A variável Users nós iremos utilizá-la fora da tag fx:Script em um outro componente, que iremos criar ainda já a variável UrlController iremos apenas utilizá-la dentro da tag tag fx:Script.

Na função InitSystem iremos apenas adicionar uma url em nosso mx:HTTPService e enviá-lo. Você precisa adicionar esse função na tag s:Application como creationComplete. Simples assim. Já na função ControllerUsersResult iremos capturar o resultado que foi retornado pelo PHP em formato JSON (iremos ver isto ainda) e converte-lo a um Array adicionando-o dentro da variável Users. Simples assim também.

Tendo explicado isso vamos exibir o Array. Você pode utilizar vários componentes. Neste caso irei utilizar um mx:DataGrid. Logo após a tag fx:Script adicione o seguinte código.

<mx:DataGrid y="10" x="10" dataProvider="{Users}" height="250" width="580" id="DataGridUsers">
	<mx:columns>
		<mx:DataGridColumn dataField="username" headerText="Nome do Usuário" />
		<mx:DataGridColumn dataField="email" headerText="Email" />
	</mx:columns>
</mx:DataGrid>

Repare que na tag mx:DataGrid temos o parametro dataProvider com a nossa variável Users. Por isso foi necessário colocá-lo como [Bindable].

Bom com tudo isso a parte do Flex está pronta. Agora vamos para o PHP.

<?php

  $kind = isset($_GET["kind"]) ? $_GET["kind"] : "";

  switch ($kind) {
    case "SQLiteDatabase":
          $query = "SELECT * FROM users ORDER BY ID";
          $database = "sampleWebOthers.db3";
          $db = new SQLiteDatabase($database, 0666);
          $results = $db->query($query)->fetchAll();
        break;
    case "sqlite_open":
          $query = "SELECT * FROM users ORDER BY ID DESC";
          $database = "sampleWebOthers.db3";
          $db = sqlite_open($database, 0666, $error);
          $results = sqlite_array_query($db, $query, SQLITE_ASSOC);
        break;
    default:
        $query = "SELECT * FROM users ORDER BY RANDOM()";
        $database = "sampleWebPDO.db3";
        $dbh = new PDO("sqlite:$database");
        $sth = $dbh->prepare($query, array(PDO::ATTR_CURSOR => PDO::CURSOR_FWDONLY));
        $sth->execute();
        $results = $sth->fetchAll();
  }

  echo json_encode($results);

?>

Você precisa de tudo isso para que funcione? A resposta é não. Eu fiz desta maneira porque já tive vários problemas com formatos de banco de dados. Alguns bancos de dados só abrem utilizando PDO outro apenas com sqlite_open e outros ainda com SQLiteDatabase, então segue os 3 exemplos para você. Descobrindo o que funciona para você, utilize apenas o que está dentro do case.

// Apenas o SQLiteDatabase":
$query = "SELECT * FROM users ORDER BY username";
$database = "sampleWebOthers.db3";
$db = new SQLiteDatabase($database, 0666);
$results = $db->query($query)->fetchAll();

// Apenas o sqlite_open
$query = "SELECT * FROM users ORDER BY username";
$database = "sampleWebOthers.db3";
$db = sqlite_open($database, 0666, $error);
$results = sqlite_array_query($db, $query, SQLITE_ASSOC);

// Apenas o PDO
$query = "SELECT * FROM users ORDER BY username";
$database = "sampleWebPDO.db3";
$dbh = new PDO("sqlite:$database");
$sth = $dbh->prepare($query, array(PDO::ATTR_CURSOR => PDO::CURSOR_FWDONLY));
$sth->execute();
$results = $sth->fetchAll();

Configurado da sua maneira. retorne o resultado como JSON.

echo json_encode($results);

Segue aqui para download e o exemplo online. Adicionei algumas coisa simplesmente para testes.

Download corelib.swc | Exemplo Online | Código Fonte

GitHub e Exemplo Online

Adicionar em seu site.

<head>
  …
  <link href=”stylesheets/hiddenfile.css” media=”screen” rel=”stylesheet” type=”text/css” />
  <script src=”jquery.min.js” type=”text/javascript”></script>
  <script src=”javascripts/hiddenfile.js” type=”text/javascript”></script>
  …
</head>

Exemplos de utilização:

<a href=”javascript:void(0)” class=”hiddenfile”>adicionar mais fotos</a>

<input type=”button” class=”hiddenfile” value=”adicionar arquivos”/>

<input type=”file” class=”hiddenfile” name=”filename” id=”filename”>

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

<a href=”javascript:void(0)” class=”hiddenfile” title=”Selecione uma foto de seu computador.”>adicionar fotos</a>

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”

CSS
<style type=”text/css”>
  #varal-de-bits {color: #86A63F;letter-spacing:1px; }
  #varal-de-bits a {color: #86A63F}
  #varal-de-bits a:hover {color: #B7BFA7}
</style>

Javascript
<script type=”text/javascript” src=”cufon-yui.js”></script>
<script type=”text/javascript” src=”cherif_400.font.js”></script>
<script type=”text/javascript”>
  Cufon.replace(‘#varal-de-bits p’, { textShadow: ‘#000 1px 1px’, hover: ‘true’});
</script>

HTML
<div id=”varal-de-bits”>
  <div>
    Viu como é fácil colocar isso em sua página.<br />
    Até em links com hover:
    <a href=”http://www.varaldebits.com.br”>Varal de Bits</a>
  </div>
</div>

Quantas e quantas vezes você já não se deparou com a necessidade de testar sua aplicação em várias navegadores, inclusive nos amados IEs (Internet Explorer). Comecei fazendo esses testes usando o Multiple IE. Deixava o IE7 na minha maquina e usava o Multiple IE para testar do 6 para baixo. Até que nossa empresa amada lançou o IE8, com mais bugs do que o IE7, mas quem diz que clientes sabem disso?

“Ah! Nossas maquinas foram atualizadas para o IE8 e o sistema parou de funcionar. O layout está quebrado, bla, bla, bla…”

Deixe-me fazer uma observação: Como uma empresa faz atualizações em seu navegador e consegue fazer sistema e sites que funcionavam nos antigos pararem de funcionar com as novas atualizações? Uma coisa é existir novas funcionalidades. Outra e fazer funcionalidades antigas pararem de funcionar. Vai entender.

Então o que fazer? Foi ai que descobri o IETester um programinha muito bacana, porém um pouco pesado. Nele você encontra desde do IE5 até o IE8 e o interessante desta nova versão é que você pode dividir a tela do programa com mais de um IE, ou seja testa nos dois ao mesmo tempo. Dentre outras funcionalidades do programa.

Em minhas experiências com ambos sistema aconselho mais o IETester pois fornece mais ferramentas e melhor usabilidades. E para os chatos como eu não espalha aquele tanto de IE no seu sistema. Porém tenha uma máquina um pouquinho melhor para aguentar o programa. Ele é um pouco pesado ainda. E quando for utilizar a funcionalidade de abrir uma url ou uma página com todos ao mesmo tempo, tome cuidado, dependendo da máquina o sistema irá fechar sozinho.

Mais vai um conselho. Cuidado em testar CSS e JS nesses programas pois as vezes eles dão pau e você fica quebrando cabeça atoa. Se você constantemente tem que testar páginas nos IE faça como eu fiz em minha empresa; se tiver a possibilidade. Tenho 3 maquinas diferentes, cada um com um programador. Cada máquina tem um IE, evitamos as atualizações dos navegadores e mantemos as maquinas como estão. Assim temos a garantia de não ficarmos agarrados em Bugs dos programas que emulam o IE.

Outra dica é o seguinte. Tenha também uma maquina com o Vista. Pois tenho enfrentando problemas de diferenças do IE8 para o Vista e o XP.

São dicas para que você não perca tempo e também não entregue algo para o cliente e ele fica torrando a paciência falando que o site está quebrando no IE e você testa na sua maquina e tudo esta certo. Até você descobrir que o sistema operacional também está influenciando no funcionamento IE8

<a href=”javascript:link_externo(“http://www.varaldebits.com.br”)”>Varal de Bits</a>
// 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.

<a href=”http://bitbucket.com.br” rel=”externo”>BitBucket</a>
// 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.

RoR:

<ol>
  <% @users.each do |user| %>
    <li>
      <%= link_to “#{user.first_name} #{user.last_name}”, user %><br/>
      <%= mail_to user.email, user.email %>
    </li>
  <% end %>
</ol>

#HAML

%ol
  - @users.each do |user|
  %li
    %a{:href => "/users/#{user.id}"}= "#{user.first_name} #{user.last_name}"
    %br
    %a{:href => "mailto:#{user.email}"}= user.email

Fiquei surpreso com o resultado. Ao utilizar o #haml minha página renderizou em 34.34400 (12%) e para a minha surpresa sem o #haml em 31.95400 (11%). Uma diferença de pouco mais de 2sec. Para um loop simples e pouco conteúdo para renderizar é uma diferença muito grande. Se você pensar em uma página com bastante códigos #haml essa diferença pode aumentar considerávelmente. Bom é isso ai. Fica a seu critério. Visualmente o #haml é bem melhor, validação W3C também, porém para performance fica minhas dúvidas.

Sobre o Celta e o Uno. Fico com o Celta.

Para gerar um menu assim:

ver álbum | adicionar mais fotos | editar álbum | excluir álbum

<%= link_to ‘ver álbum’, ‘url’ %> |
<%= link_to ‘adicionar mais fotos’, ‘url’ %> |
<%= link_to ‘editar álbum’, ‘url’ %> |
<%= link_to ‘excluir álbum’, ‘url’ %>

Agora em #haml:

a%{:href => url} ver álbum
|
a%{:href => url} adicionar mais fotos
|
a%{:href => url} editar álbum

Quase dobramos o número de linhas, de 4 para 7 linhas. Esse é um exemplo que você irá ter mais linhas do que se não usasse o #haml, com certeza irá bater com outros detalhes. Porém até agora ainda não considero o #haml ruim, olhando a documentação encontrei muitas coisas que não tinha reparado antes. Mas por hoje é só.

Vou aproveitar para dar um dica.
Quanto você for fazer um form em sua aplicação e utilizar a função “form_for” e derivados não coloque “=” e sim “-” pois senão seu “form” será duplicado.

Ele ajuda a você a criar html. Você não precisa preocupar mais com identação, abrir e fechar tag, onde abre e onde fecha tag html e o melhor economiza código. Estou aplicando esse bichinho em um site pessoal que estou desenvolvendo. Tive já alguns resultados gratificantes. A página que renderiza o layout tem 172 linhas, após converter para haml, terminei com 42 linhas e com o código perfeitamente identado e limpo. Até este momento estava muito empolgado, mas estou começando a encontrar alguns obstáculos. Não grandes o suficiente para parar ou descatar o haml, mas que ainda não encontrei soluções.

Por exemplo:

<!–[if IE 7]>
<%= stylesheet_link_tag “ie7″ %>
<![endif]–>

<!–[if lte IE 6]>
<%= stylesheet_link_tag “ie6″ %>
<![endif]–>

Isso eu ainda não consegui aplicar ao haml, o que faço é criar um partial em htm.erb. O que ainda não tive tempo de testar é performace, mas assim que der estarei aplicando a postando aqui.

Pessoal se vocês tiverem dicas e sugestões posta ai para a gente.