Há muito abandonei esse blog, mantenho apenas como registro pessoal. Estou encerrando "oficialmente" as atividades dele. Obrigado a todos que visitaram o blog enquanto esteve ativo.

Leia Mais

Nos posts anteriores, mostrei como colocar um slider com o Unslider e como colocar um slider com o BxSlider no seu blog.

Agora, uma solução mais extrema: automatizar a criação de slider. Com essa opção, qualquer post que tenha mais de uma foto e não esteja marcado para não ter slider terá automaticamente a criação de um slide.

Para fazer isso, primeiro é preciso incluir o CSS do BxSlider no seu blogger. Vá na configuração de modelo, Personalizar, Avançado, Adicionar CSS e inclua o conteúdo do CSS do BxSlider.

Depois disso, você precisa configurar o BxSlider para ser acionado automaticamente. Para isso, você deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, você deve incluir o seguinte código:

 <script src="//code.jquery.com/jquery-latest.min.js"> </script>   
 <script src="https://googledrive.com/host/0Bz60gXzIeiEqUHdFVHhtSWdUWTQ"></script>  
 <script src="https://googledrive.com/host/0Bz60gXzIeiEqWENnTHF5cVdIdzg"></script>  

Pronto. Seu blog está preparado para transformar em slider qualquer post que tenha mais de uma imagem. Para impedir que isso ocorra em algum post, ao editar no modo HTML, inclua o seguinte código:

 <div class="noslide"></div>  

Lembrando que só funciona se o código for inserido no modo de edição HTML.

Abaixo, um Slider gerado automaticamente, apenas adicionando imagens ao post.

Leia Mais

No post anterior, mostrei como colocar o Unslider no seu blogspot. Nesse post, mostrarei como configurar outro slider: o BxSlider. A vantagem de colocar o BxSlider é que ele tem um número muito grande de configurações, por isso é muito mais versátil.

Uma desvantagem do BxSlider é que ele não vem por padrão com a navegação dos slides pelo teclado, mas isso pode ser implementado.

O primeiro passo para incluir o BxSlider é adicionando o CSS no seu modelo. Para isso, vá na configuração de modelo, Personalizar, Avançado, Adicionar CSS e inclua o conteúdo do CSS do BxSlider. Esse arquivo de estilos foi modificado do original para pegar as imagens de uma url externa.

Teremos que incluir os JavaScript. Para isso, você deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, você deve incluir o seguinte código:

 <script src="//code.jquery.com/jquery-latest.min.js"></script>  
 <script src="https://googledrive.com/host/0Bz60gXzIeiEqUHdFVHhtSWdUWTQ"></script>  

Agora, o seu blog está pronto para receber o BxSlider. Crie um post, insira as imagens que você quer que fiquem no slider em sequência. Depois que inserir as imagens, mude o modo de edição para HTML. Só vai funcionar se você inserir os códigos no modo HTML.

Identifique o bloco de imagens que você acabou de inserir. Antes do início do bloco, você deve inserir uma div com um identificador para o slider. No nosso exemplo, usaremos o id "testeBxSlider".

 <div id="testeBxSlider">  

No fim do bloco, você deve encerrar a div inserindo o código abaixo:

 </div>  

Agora, no final do arquivo, insira o seguinte código para ativar o slider, substituindo o testeBxSlider pelo identificador que você colocou na sua div.

Cuide para que esse identificador seja único pois se você usar o mesmo identificador, pode dar problema caso mais de um post com o mesmo identificador seja exibido na mesma página.

 <script type="text/javascript">  
 $(document).ready(function(){  
   var container = $("#testeBxSlider");  
   /* Prepara as imagens para serem exibidas no slider */  
   while(container.find("div.separator img").length > 0) {  
     container.find("div.separator img").unwrap();  
   }  
   container.find("div.separator").remove();  
   container.find("img").wrap("<div class='bximg' />");  
   container.children().not("div.bximg").remove();  
   container.find("img").css({"margin-left":"auto", "margin-right":"auto", "display":"block"}); // Centraliza imagem  
   container.bxSlider({  
     slideSelector: "div.bximg"  
   });  
 });  
 </script>  

Pronto. Seu Slider está funcionando. Note que, nesse último trecho de código, você pode configurar as opções do BxSlider no momento da chamada de "container.bxSlider". Também tem um trecho para centralizar as imagens. Se você não quer suas imagens centralizadas, pode remover essa linha. Abaixo, um exemplo do uso desse slider.

Leia Mais

Desenvolvi uma maneira de criar um slider das suas fotos em uma postagem do blogspot, utilizando o Unslider. Só não consegui desativar o slider do blogspot de quando você clica na foto do post.

Mesmo tendo desenvolvido o script especialmente para o Blogger, ele pode ser utilizado em qualquer site, desde que carregadas as dependências e o estilo especificados no post.

Para colocar o slider, primeiramente você deve incluir três scripts. Para isso, você deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, você deve incluir o seguinte código:

 <script src="//code.jquery.com/jquery-latest.min.js"></script>  
 <script src="//unslider.com/unslider.min.js"></script>  
 <script type="text/javascript" src="http://yourjavascript.com/52113791313/myslider.js"></script>  

Esse código inclui o JavaScript do JQuery, o JavaScript do Unslider e o JavaScript que eu criei para auxiliar a implantação do slider.

Depois disso, você deve incluir o CSS do Slider no seu modelo. Parte desse CSS foi baseado no disponibilizado por Winston Wolf no site cssdeck. Para isso, vá na configuração de modelo, Personalizar, Avançado, Adicionar CSS e inclua o seguinte código CSS (você pode alterar esse CSS de acordo com o estilo que quiser, essa é apenas uma sujestão inicial):

 .dots {  
   position: absolute;  
   left: 0;  
   right: 0;  
   bottom: 20px;  
 }  
 ol.dots {  
   margin-left: auto;  margin-right: auto;  
 }  
 .dots li {  
   display: inline-block;  
   width: 10px;  
   height: 10px;  
   margin: 0 4px;  
   text-indent: -999em;  
   border: 2px solid #000;  
   border-radius: 6px;  
   cursor: pointer;  
   opacity: .4;  
   -webkit-transition: background .5s, opacity .5s;  
   -moz-transition: background .5s, opacity .5s;  
   transition: background .5s, opacity .5s;  
 }  
 .dots li.active {  
   background: #000;  
   opacity: 1;  
 }  
 .next,  
 .prev {  
   color: #333;  
   display: inline-block;  
   font: normal bold 4em Arial,sans-serif;  
   overflow: hidden;  
   position: relative;  
   text-decoration: none;  
   width: auto;  
   opacity: .4;  
 }  
 .next,  
 .prev { padding: 0.7em 1.5em }  
 .next { text-align: right }  
 .next:before,  
 .next:after,  
 .prev:before,  
 .prev:after {  
   background: #333;  
   -moz-border-radius: 0.25em;  
   -webkit-border-radius: 0.25em;  
   border-radius: 0.25em;  
   content: "";  
   display: block;  
   height: 0.5em;  
   position: absolute;  
   right: 0;  
   top: 50%;  
   width: 1em;  
 }  
 .prev:before,  
 .prev:after { left: 0 }  
 .next:before,  
 .prev:before {  
   -moz-transform: rotate(45deg);  
   -ms-transform: rotate(45deg);  
   -o-transform: rotate(45deg);  
   -webkit-transform: rotate(45deg);  
   transform: rotate(45deg);  
 }  
 .next:after,  
 .prev:after {  
   -moz-transform: rotate(-45deg);  
   -ms-transform: rotate(-45deg);  
   -o-transform: rotate(-45deg);  
   -webkit-transform: rotate(-45deg);  
   transform: rotate(-45deg);  
 }  
 .prev:after,  
 .next:before { margin-top: -.36em }  
 .next:hover,  
 .next:focus,  
 .prev:hover,  
 .prev:focus { color: #c00 }  
 .next:hover:before,  
 .next:hover:after,  
 .next:focus:before,  
 .next:focus:after,  
 .prev:hover:before,  
 .prev:hover:after,  
 .prev:focus:before,  
 .prev:focus:after { background: #c00 }  
 .prev {  
   float:left;  
   position:absolute;  
   left:0;  
   bottom:50%;  
 }  
 .next {  
   float:right;  
   position:absolute;  
   right:0;  
   bottom:50%;  
 }  

Pronto. Seu blog está pronto para receber o slider. Agora, você vai criar seu post normalmente, inserindo em sequência as fotos que você quer que sejam incluídas no slider.

Depois de inserir as fotos, você deve mudar para o modo de edição HTML para colocar o código que possibilitará o slider. Você deve identificar o bloco HTML correspondente às fotos que você acabou de inserir.

Antes da primeira foto, você deve incluir uma div com algum seletor, que será utilizado para identificar o slider. Aqui, colocaremos uma div com o id "fotosSlide".

 <div id="fotosSlide"/>  

No fim das fotos, você deve colocar o fechamento da div, como a seguir:

 </div>  

Depois disso, você deve incluir o JavaScript que cria o slider, colocando o seletor configurado acima.

 <script type="text/javascript">  
   new mySlider({  
   container:"#fotosSlide",    // Seletor do conteiner de slides  
   includeArrows:true,       // Configura exibição das setas  
   maxHeight:600,         // Configura altura máxima do slider  
   speed: 500,           // Configura velocidade de transição de slides em milissegundos  
   delay: 3000,          // Configura tempo de permanencia em cada slide em milissegundos  
   complete: function() {},    // Função executada depois de completar o slide  
   keys: true,           // Habilita uso de teclas para passar slide  
   dots: true,           // Habilita navegação nos slides exibindo pontos embaixo deles  
   fluid: false,          // Habilita design responsivo. Pode quebrar layouts não responsivos  
 });  
 </script>  

Pronto. Você tem um slider. Lembre-se apenas de manter as fotos dentro das divs especificadas. Veja abaixo um exemplo do slider funcionando. Você pode manter mais de um slider na página, desde que o seletor deles seja diferente.

Leia Mais

• ABC News
• Reuters
• BBC
• USA Today
• CBC
• The Guardian
• Huffington Post
• LA Times
• El Pais
• NY Times
• Corriere Della Sera
• Le Monde

Leia Mais

Anos atrás, uma das ideias mais interessantes em computação distribuída era o projeto SETI@home, que pretendia (e pretende, porque o projeto ainda está ativo) utilizar o poder de processamento de milhares de computadores ao redor do mundo para analisar dados em busca de vida alienígena.

Baseando-se nesse projeto, surgiu a plataforma BOINC, que é de código aberto e permite criar o seu próprio projeto de computação distribuída na internet. Com o BOINC, vários projetos desse tipo surgiram, mas o SETI@home continuava sendo o maior.

Em outubro do ano 2000, surge um novo projeto que já tem mais poder de processamento do que todos os da plataforma BOINC: o Folding@home, que tem como objetivo ajudar a encontrar a cura para diversas doenças mortais hoje em dia, como a AIDS, mal de Parkinson, mal de Alzheimer e o câncer.

Parte do trabalho da busca da cura para essas doenças consiste em simulações utilizando proteínas que são muito demoradas e exigem um grande poder computacional. É aí que entra a nossa ajuda. Você pode colaborar instalando no seu computador o software cliente disponível no Folding@home e utilizando o poder de processamento ocioso da sua máquina para fazer esses cálculos. O servidor envia uma unidade de trabalho para você, o software do F@H faz os cálculos em background e devolve para o servidor, sem que você nem perceba que algo está acontecendo na sua máquina.

Através da ferramenta de controle, o FAHControl, você pode determinar o nível de uso do processador e até, caso sua placa de vídeo suporte, utilizar o GPU para fazer os cálculos.

Além disso, você pode criar seu próprio usuário para monitorar o quanto está ajudando e criar grupos com seus amigos, competindo com outros grupos para saber quem contribui mais!

Vamos ajudar? Participe e divulgue você também!

Leia Mais

Prosseguindo com os estudos do cocos2d-iphone, desenvolvi esse jogo de joquempô.

Leia Mais