Bom, que o CSS é uma ferramenta que há um tempinho atrás trouxe uma nova cara à web todo mundo sabe. Sabemos que ele facilita muito a vida.
Porém, hoje recebi uma mensagem no Twitter que me redirecionou para http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-here/, e achei muito interessante a rapidez e a flexibilidade do desenvolvimento de botões estilizados puramente em CSS, com gradiente e cantos arredondados.
Durante o vídeo, vi que o autor trabalha com HTML e um arquivo de extensão .sass, com um código que lembra o CSS, mas que parece ser mais poderoso. Googleei e encontrei http://sass-lang.com/.
Pelo que entendi, o .sass é uma forma diferente de se escrever CSS, ou, se você preferir, é um framework CCS, pois no final do processo o código é compilado em CSS. O código .sass é muito mais limpo, sem repetições, e o melhor: com uso de variáveis no CSS! No vídeo do primeiro link dá para se ter uma idéia…
Uma das desvantagens é que, pelo que entendi, somente funciona com Ruby. Então eu não consegui testar.
De qualquer forma, fica aí a dica e, se você resolver experimentar (e tiver como), deixe um comentário com a sua experiência!
English Embed Object was uptadet to version 1.3, and now, it works on any content of your blog, including rss
Português Atualização para a versão 1.3: agora o plugin Embed Object funciona em qualquer parte do seu blog, incluindo feeds rss.
ENGLISH
With this plugin you can easily embed flash objects and YouTube videos in your wordpress blog. You can use it in posts and pages, and you can use any attribute that you want, like FlashVars and wmode, and others.
Com este plugin você pode inserir objetos flash e vídeos do youTube facilmente em seu blog. Você pode usá-lo em posts e em páginas, com qualquer atributo que você quiser, como FlashVars, para passar parâmetros ara o flash, e wmode, para transparência do background.
Eu particularmente uso skype, e nele mantenho apenas contatos profissionais. Parei de usar msn, pois como trabalho com internet, e toda hora aparece alguém perguntando se você tem msn, e como qualquer ser humano, não resiste adicionar, parei de usar msn porque vicia…
Mas, sempre é legal vc se expressar via emoticons… e no skype também pooodi!
Então, depois de me enviarem um emoticon que disseram ser a minha cara , descobri o site http://www.andernetas.lt/pocius/ com muitos emoticons e flags para o skype!
Hoje vou mostrar uma maneira muito simples e profissional de se animar background com css, usando sprites com efeito hover, especialmente para botões.
Ao invés de se usar javascript para fazer o pre-loader da imagem, e mesmo para gerar o efeito de animação, vamos usar apenas a técnica css de sprites e background.
Bom, primeiro vamos à imagem, que será nosso sprite:
A vantagem do sprite é que todas as imagens serão carregadas somente uma vez, assim não é necessário um preloader. Esta imagem contém uma série de botões que serão utilizados.
A idéia que quando o usuário passar o mouse sobre um botão, ou item de menu, o background seja animado.
Criando o HTML e os estilos CSS
Vamos criar os elementos HTML para nosso exemplo, no caso, um menu:
E agora vamos criar o estilo CSS para os itens do menu:
<style type="text/css">
/* Abaixo é definido a largura e a posição inicial do background para cada item do menu */
#button1{
width:102px;
background-position:0px 0px;
}
#button2{
width:115px;
background-position:-102px 0px;
}
#button3{
width:115px;
background-position:-217px 0px;
}
/* E abaixo é definido a posição do background para cada item do menu, ao passar o mouse sobre eles */
#button1:hover{
background-position:0px -280px;
}
#button2:hover{
background-position:-103px -280px;
}
#button3:hover{
background-position:-219px -280px;
}
/* E abaixo são os estilos comuns dos itens do menu, inclusive a imagem de background */
ul{
margin:0px;
padding:0px;
}
.item_menu{
margin:0px;
padding:0px;
list-style:none;
cursor:pointer;
float:left;
height:70px;
background-image:url('sprite.jpg');
}
</style>
O resultado
Esta simples técnica gera o resultado abaixo:
Outras variações
Usando ainda a mesma imagem, podemos apenas alterar os valores de background-position para cada item do menu, e podemos fazer variações como os exemplos abaixo:
Variação 1
Variação 2
Usando javascript você poderá adicionar efeitos de fade in e slider, o que ocasionará um efeito menos seco do que com css. Mas isso fica para um outro post.
Descompacte o arquivo na pasta /wp-content/plugins/
Ative o plugin pelo wordpress
Como usar
Para inserir um ifame em seu post, no local em que você quer que o iframe apareça, insira o código como no exemplo abaixo (sem espaços entre [ e iframe: ):
Tem a versão free, que coloca uma pequeno texto no gráfico, como o exemplo acima.
Para gerar o gráfico, você somente precisa gerar um arquivo XML ou CSV que será lido pelo flash. E para gerar o XML, você pode usar, por exemplo, o PHP, extraindo dados de um banco de dados MySQL.
Gerando um arquivo XML com PHP e Banco de dados
Por sua vez, gerar um arquivo XML com PHP tanbém é relativamente simples. A primeira coisa que você deve ter em mente é a estrutura final do XML. Aí o resto fica fácil.
Utilizando o XML de exemplo do amCharts para o gráfico de pizza, temos a seguinte estrutura XML:
Desta forma, supondo que temos uma tabela no MySQL, chamada continentes, podemos executar o seguinte script para gerar o XML que será lido pelo flash, e que vai gerar o gráfico:
$sql = "select continente, dimensao from continentes";
$res = mysql_query($sql);
// Abre o arquivo ampie_data.xml, que, se não existir, será criado (devido ao parâmetro w+)
$arquivo = fopen("ampie_data.xml","w+");
$xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
$xml .= "<pie>";
// Agora serão criados os nós filhos com os resultados da consulta
while( $campo = mysql_fetch_array( $res ) )
{
$destaque = "";
// Se o continente é América do sul, escreverá os atributos de destaque
if( $campo['continente'] == "América do Sul" )
{
$destaque = " pull_out=\"true\" color=\"#FCD202\"";
}
$xml .= "<slice title=\"" . $campo['continente'] . "\"" . $destaque . ">" . $campo['dimensao'] . "</slice>";
}
$xml .= "</pie>";
// Depois de finalizado, gravamos os dados no arquivo XML aberto por fopen(), usando fwrite()
fwrite($arquivo,$xml);
// Por fim, fechamos o arquivo XML
fclose($arquivo);
Desta forma, temos o arquivo XML gerado dinamicamente via PHP e MySQL
, descobri o site 
