O que é este tal de Node.js?

Node.js é uma plataforma construida em cima do motor V8 de Javascript criado pelo Google, que funciona do lado do servidor. Você pode ter pensado assim: “Javascript do lado do servidor? Tá maluco?” Não estou ficando maluco e sim, você leu isto certo: “Javascript do lado do servidor”. Isto significa que podemos trabalhar com programação orientada a eventos no servidor.

Este primeiro artigo servirá como base para os próximos que tentarei publicar na sequência. Então, mãos a obra:

Para instalar node.js no Ubuntu, você precisará de algumas bibliotecas, para poder compilar o source:
Abra o terminal e digite:
sudo apt-get install g++ curl libssl-dev apache2-utils

Depois de instaladas as bibliotecas, vamos baixar o source no site oficial: www.nodejs.org e extraia o conteúdo do arquivo:
tar -xf node-v0.8.10.tar.gz
Acesse a pasta criada e execute os seguintes comandos:
./configure
make
sudo make install

Pronto! O Node.js está instalado em sua máquina Ubuntu.

No próximo artigo iremos construir uma aplicação básica com node.js. Até lá!

Bruno Wiltemburgon

Neste rápido tutorial veremos como utilizar a API de gráficos do Google (Google Charts API) para gerar seu próprio QR Code de maneira bem simples.

No site da Google Charts API encontramos as informações necessárias para fazer uma requisição via HTTP da geração do código QR Code. Vejamos algumas opções disponíveis para utilizarmos como parâmetros:

Sabendo os parâmetros que são necessários, vamos ao PHP, criar uma função que faça a requisição do QR Code.

<?php
   function getQRCode($texto, $width = 150, $height = 150) {
      $texto  = urlencode($texto);
      $imagem  = '<img src="http://chart.apis.google.com/chart?chs='.$width.'x'.$height.'&cht=qr&chl='.$texto.'" alt="QR code" width="'.$width.'" height="'.$height.'"/>';
      return $image;
   }
   // Criada a função, vamos chamá-la para exibir a imagem gerada com nosso QR Code
   echo getQRCode("http://brunoew.com.br/blog");
?>

O resultado deverá ser semelhante à este:

Até a próxima!

Bruno Wiltemburgon

Nesta série de artigos iremos abordar a utilização de padrões de projeto para aplicações web, mais especificamente, para PHP. Neste primeiro artigo, veremos o que são e como funcionam os Design Patterns.

O que são Design Patterns?

Um Design Pattern não é uma classe ou uma biblioteca que você inclui em seus arquivos. É muito mais que isso. É uma metodologia que deve ser seguida no desenvolvimento de um projeto, seja ele no ramo de desenvolvimento de software, de construção civil, de engenharia, etc.
Descrevem soluções para problemas recorrentes no desenvolvimento de um projeto.
Os padrões de projeto visam facilitar a reutilização de soluções na fase de projeto.

Por que utilizar um Design Pattern?

Pela facilidade de manutenção, pela escalabilidade do projeto, reutilização de material, organização e padronização internacional, podendo seu projeto ser mantido por pessoas que vivem em outro país e falam outro idioma por exemplo.

Como Design Patterns é uma metodologia, pode ser aplicada a qualquer situação. No ramo de desenvolvimento de software essa metodologia pode ser aplicada a qualquer linguagem de programação.

Mas então porque esta série de artigos vai falar sobre Design Patterns & PHP?

Pelo fato de PHP ser uma das linguagens mais utilizadas no desenvolvimento web e ter a fama de "linguagem de amadores". Iremos desmitificar isto e provar que PHP é uma linguagem robusta e sofisticada.

Bem vindo aos padrões de projeto

Basicamente existem três tipos de de Design Patterns:

1. Estruturais
2. Criacionais
3. Comportamentais

Estruturais

Geralmente tratam de relacionamento entre entidades, tornando mais fácil para que essas entidades trabalhem em conjunto.

Padrões Estruturais

• Adapter
• Bridge
• Composite
• Decorator
• Façade
• Flyweight
• Proxy

Criacionais

Fornecem mecanismos de instanciação, tornando mais fácil a criação de objetos de uma forma que se adapta à situação.

Padrões Criacionais (ou de criação)

• Abstract Factory
• Factory Method
• Singleton
• Builder
• Prototype

Comportamentais

São utilizados na comunicação entre as entidades deixando mais fácil a comunicação entre elas.

Padrões Comportamentais

• Chain of responsability
• Mediator
• Strategy
• Command
• Memento
• Template Method
• Interpreter
• Observer
• Visitor
• Iterator
• State

Estaremos abordando nos próximos artigos a utilização da maioria destes padrões na linguagem PHP.

Bruno Wiltemburgon

O exemplo utilizado aqui será bem simples, mas poderá passar a idéia do funcionamento da API, permitindo que você faça uso mais complexo desta abordagem.

Limitações deste artigo:

1. A API de tradução do Google tem um limite de 500 palavras a serem traduzidas por requisição.
2. Neste artigo será traduzido apenas o conteúdo de uma div.
3. Como a tradução feita pela Google API é feita palavra a palavra, a tradução pode não ser fiel.

Então, mãos à obra.

Arquivo HTML

Crie um arquivo chamado index.html. Neste arquivo faça como a seguir:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tradução de textos com a API do Google</title>


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 // Inicializa a versão 1 da Google Ajax API
 google.load("language", "1");

 // Carrega o framework JQuery, tambem atraves da mesma API do google
 google.load("jquery", "1.3");

Neste trecho iniciamos a construção do cabeçalho da página e fizemos a chamada da API do Google. Nesta API já podemos fazer tanto a invocação da API de tradução

google.load("language", "1");

quanto a chamada do framework JQuery

google.load("jquery", "1.3");

. Mas qual o motivo pelo qual foi utilizado a API do google para chamar JQuery neste exemplo? A principal vantagem é a economia de banda e distribuição cd conteúdo (CDN), utilizando também menos requisições HTTP, mas isso é assunto para um próximo artigo. Vamos dar continuidade ao artigo.

Agora neste passo iremos criar as funções em JavaScript que serão responsáveis pela tradução do conteúdo.

  google.setOnLoadCallback(function() { // Ao carregar a API do google, faça:
    $(function(){ //Escuta o carregamento da página.
        $("#idioma").change(function(){ //Quando ouver mudança no campo "idioma" executara a função como segue...
            var idioma = $("#idioma").val(); //Pega o idioma selecionado no campo idioma

            var texto = $("#traduzir").html(); //Conteudo que será traduzido
            var len = content.length; //Tamanho do texto a ser traduzido
            var palavras = 500; // Como a Google API language aceita apenas 500 palavras por vez...
            var idiomaOrigem = "pt"; //Idioma de origem do texto a ser traduzido 

            //Limpa o conteudo da div com o resultado da tradução
            $("#traduzido").html("");

            for(i=0; i <= (len/palavras); i++) {
              google.language.translate (texto.substr(i*palavras, palavras), idiomaOrigem, idioma, function (resultado) {
                 if (!resultado.error) { //Caso não ocorram erros
                        $("#traduzido").html($("#traduzido").html()+resultado.translation); //Adiciona o resultado dentro da div traduzido (palavra a palavra)
                 }
               });
             }
        });
    });
});
</script>

Agora ainda no cabeçalho da página (a fim de exemplo apenas) adicionamos algum estilo CSS

  
<style type="text/css">
.area{
    width: 42%;
    float:left;
    padding: 1%;
    border: 2px solid #ccc;
    color: #666;
    font: 1.2em "Trebuchet MS", Arial, Verdana, sans-serif;
    margin: 2%;
}

#idioma{
    font-size: 1.1em;
    color: #666;
}
</style>

</head>

E por fim, resta fazermos o conteúdo da página, como segue:

   <body>

   <p><label for="idioma">Idioma: </label>
    <select name="idioma" id="idioma">
        <option value="en" selected="selected">english</option>
        <option value="de">deutsch</option>
        <option value="pt">português</option>
        <option value="fr">francais</option>
        <option value="it">italiano</option>
        <option value="es">espanol</option>
        <option value="nl">nederlands</option>
        <option value="ja">japanease</option>
    </select>
   </p>

    <div class="area" id="traduzir">
        <p>
            Este texto será traduzido para outro idioma. Ao selecionar o idioma desejado no campo &quot;Idioma&quot;, este texto será traduzido. <br />
            Porém vale lembrar que a API do Google tem um limite de ate 500 palavras por requisição.
        </p>
    </div>

    <div class="area" id="traduzido">
        
    </div>

</body>
</html>

Para visualizar o exemplo completo, acesse http://www.brunoew.com.br/translate.

Até o próximo artigo!

Bruno Wiltemburgon

Menu drop-down:

• Mega drop down menu com JQuery
• Menu drop down multinível
• Menu drop down com CSS

Menu com sprites:

• Menu utilizando sprites

Menus animados

• Menus animados com JQuery
• Menus animados com JQuery II
• Menus parecidos com o da página inicial da MooTools, com JQuery
• Menu animado estilo Apple
• Menus com background animado com JQuery
• Criando um menu animado com efeitos muito interessantes

Bruno Wiltemburgon

A idéia é criar um accordion horizontal que se abre ao passar com o mouse por cima das imagens. Utilizaremos JQuery & CSS3.

Este tuto é uma adaptação do original: http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/

Veja aqui uma demonstração do proposto.

HTML:

No arquivo HTML teremos uma lista. Dentro de cada elemento da lista, adicionamos um cabeçalho que desaparecerá quando estivermos com o mouse por cima deste elemento. Segue abaixo o código HTM para um elemento. Repita esta operação para todos os seus itens.

<ul id="accordion" class="accordion">
   <li class="bg1">
   <div class="heading">Cabeçalho</div>
   <div class="description">
      <h2>Cabeçalho</h2>
         Algum texto aqui
         veja mais
   </div>
   </li>
</ul>

Os outros elementos da lista devem possuir as classes diferentes (ex. bg2, bg3, etc).

CSS

No arquivo CSS, adicione as linhas abaixo:

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}

ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}

ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}

ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}

ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}

ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}

ul.accordion li.bleft{
    border-left:2px solid #fff;
}

ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}

ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}

ul.accordion li .description h2{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}

ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}

ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}

ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

/** Gradiente para colocar a descrição em cima **/
ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
}

Note que a propriedade text-shadow não irá funcionar no Internet Explorer.

O caminho para as imagens aqui irão variar de acordo com a localização das imagens que você irá utilizar.

A largura inicial para cada item será de 115px. Depois na parte do Javascript iremos fazer com que esta largura seja alterada.

A imagem gradiente que está sendo utilizada é um gradiente que parte da cor branca para o transparente. Isto traz um efeito visual legal.

Vamos agora para a parte que irá fazer com que as coisas funcionem: O javascript…

Javascript

Primeiramente iremos precisar incluir o framework JQuery. Você poderá incluir através do Google APIS, como segue:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Agora criaremos uma função para que quando o mouse estiver sobre a imagem (li) faça o efeito de slide para exibir o conteúdo completo da mesma.

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Espero que este tutorial tenha sido útil para você. Caso tenha alguma sugestão, adicione um comentário a este post.

Até a próxima dica!

Bruno Wiltemburgon

01 – Pelo espírito de liberdade;
02 – Pelo vento na cara;
03 – Por sentir a garupa agarradinha na sua cintura;
04 – Por ter uma 125 e se sentir um Valentino Rossi numa 500;
05 – Por ter uma custom e ser o próprio Peter Fonda em Easy Rider;
06 – Por fazer novos amigos, que falam a sua língua;
07 – Por poder viajar em grupos;
08 – Por ficar encharcado e feliz;
09 – Por ter a sua pista livre em cima da faixa, quando o trânsito está totalmente congestionado;
10 – Por poder andar sujo, no melhor estilo aventureiro;

11 – Por poder usar a sua fantasia de mau, com caveiras e crucifixos;
12 – Para ir ao Mundial de Motos torcer pelo Alexandre Barros;
13 – Para poder juntar um dinheirinho e comprar uma moto maior;
14 – Por já ter dinheiro e status e finalmente voltar a andar de moto, como na juventude;
15 – Para ouvir o ronco do motor;
16 – Para matar de inveja o seu vizinho careta;
17 – Para conquistar as menininhas;
18 – Para trabalhar, porque a moto é o seu ganha-pão;
19 – Para se sentir poderoso dentro do seu macacão de couro;
20 – Para ter a sensação de voar, como um pássaro do asfalto;
21 – Para ser o pole position nos faróis das grandes avenidas;
22 – Porque a primeira trilha a gente nunca esquece;
23 – Para passar nos pedágios sem pagar;
24 – Para ter um estacionamento exclusivo no shopping center;
25 – Para dar umas escorregadas, porque um tombinho não dói;
26 – Para fazer uma curva e sentir o joelho quase ralando no chão;
27 – Para encher o seu capacete de adesivos bacanas;
28 – Para ir aos encontros de motos falar sobre motos;
29 – Para tentar dar um cavalo de pau com a roda da frente, como Tom Cruise em Missão Impossível 2;
30 – Para cruzar do Paquistão à Índia, como fez Rafael Karan, o aventureiro;
31 – Para comprar um monte de acessórios e deixar sua moto personalizada;
32 – Para poder carrega-la na caçamba da sua picape até a entrada da trilha;
33 – Para servir de moto-táxi no Nordeste e faturar uma graninha a mais;
34 – Para vir a ser um grande piloto de motovelocidade;
35 – Para poder abrir sua própria oficina de motos;
36 – Para um dia participar do Racing Day, em Interlagos;
37 – Porque todos os caminhos levam a Daytona, o grande encontro mundial de motos;
38 – Para se perder numa trilha no meio da noite;
39 – Para rasgar sua calça no mourão da cerca;
40 – Para deixá-la parada na garagem de casa e apenas ficar admirando-a;
41 – Para sentir o cheiro de óleo queimado da sua velha e inesquecível 2T;
42 – Porque entre sua namorada e a moto, você fica com a moto;
43 – Porque a moto só tem dois lugares: não cabem a sogra e o papagaio;
44 – Porque ela gasta muito menos combustível que seu carrão;
45 – Porque ela leva você pelos caminhos da emoção;
46 – Porque no peito de todo motociclista, bate um coração aventureiro;
47 – Porque você consegue extravasar por trás de sua viseira, mesmo que as lágrimas embacem o seu caminho;
48 – Porque um dia você sonhou que chegaria lá;
49 – Porque você ama estar vivo;
50 – Porque você isso, meu amigo, um amante da liberdade . . . motociclista.

Bruno Wiltemburgon