Mas não posso usar nenhuma imagem. Nada, zero, nothing!

Claro podia subir a parada e dizer que tem que ser compatível com todos os navegadores! Mas não, vamos deixar esse pequeno detalhe de lado, porque iria ser um pouco mais difícil.

Neste tutorial vamos usar CSS3, por isso qualquer navegador que suporte CSS3 deve funcionar como deve ser. Eu testei esta solução em:

• Firefox
• Google Chrome

Agora que já sabemos o que queremos fazer, vamos pôr mãos à obra.

HTML

Vamos começar pelo o nosso HTML.

<div id="Navegacao">
  <ul>
    <li><a href="#undefined" title="Página Inicial">Página Inicial</a></li>
    <li><a href="#undefined" title="Sobre">Sobre</a></li>
    <li><a href="#undefined" title="Contactos">Contactos</a></li>
    <li><a href="#undefined" title="Negócios" class="selecionado">Negócios</a></li>
    <li><a href="#undefined" title="Suporte">Suporte</a></li>
    <li><a href="#undefined" title="Link Muito Grandeeeeeeeeeeeeeeee">Link Muito Grandeeeeee</a></li>
  </ul>
  <div id="Caixa"></div>
</div>

Nada de complicado, como podemos ver é um markup bastante simples e correcto.

Temos um div com o IDNavegacao vai servir de contentor para a barra de navegação.

Temos uma lista com links, e por fim temos um div com o IDCaixa que vai servir para criar uns quantos efeitos que vamos ver mais tarde.

Se repararem no design do Edumicro podem ver que o link que esta seleccionado tem uma cor de fundo diferente, para tentarmos criar o mesmo efeito vamos usar o Caixa.

Mas antes de começarmos a pensar em funcionalidade, vamos tentar criar esta barra de navegaçãoa mais parecida possível ao design do Edumicro, para tal começamos com CSS.

Explicar um pouco o CSS

No design em Photoshop podemos ver que certos detalhes são um pouco mais difíceis em CSS, mas mesmo assim possíveis, mesmo sem ter o mesmo resultado final podemos quase imitar o original.

Cantos redondos, com o CSS3 já é possível conseguir sem ter que recorrer a grandes truques ou a imagens para tal usamos border-radius.

Gradientes também já é possível, apesar de ainda ser necessário usar uns quantos truques, e o resultado final não ser bem igual para todos os navegadores.

Especialmente porque temos que criar o efeito em três formas diferentes para suportar cada navegador ( FF / Motor Webkit / IE).

Para o firefox usamos:

  background: -moz-linear-gradient(top, #2E6FC0 0%, #4491D6 50%, #3A86CA 51%, #2D6FBE 100%); 

O top é usado para indicar onde queremos começar, o ponto de partida do nosso gradiente.

O resto usamos para indicar as cores dos gradientes, as posições que começam e acabam.

Para mais informações visitar Mozilla.

Para navegadores baseados no motor WebKit (Safari por exemplo), usamos:

  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2E6FC0), color-stop(50%,#4491D6), color-stop(51%,#3A86CA), color-stop(100%,#2D6FBE)); 

O primeiro argumento é o tipo de gradiente e pode ser linear ou radial.

O segundo e o terceiro argumento é a posição, e por fim as cores onde começam e onde acabam.

Para mais informações visitar o WebKit.

Por fim temos a solução para o Internet Explorer, que mais uma vez não corresponde aos standards, mas para também não ser tão mauzinho, acho que o Internet Explorer já suporta gradientes desde a versão 5.5.

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E6FC0', endColorstr='#2D6FBE',GradientType=0 );

Como podemos ver o IE não suporta a possibilidade de controlarmos as posições onde queremos começar uma cor e acabar com outra cor.

Temos também o GradientType, que pode ser 0 para vertical e 1 para horizontal.

Para mais informações visitar o site da Microsoft.

Uma forma mais fácil de fazeres os gradientes é através do site Colorzilla.

Vamos então construir o CSS.

CSS

#Navegacao{
  border: 1px solid #004FAA;
  padding: 15px 30px 15px 30px;
  font-family: arial, serif;
  font-size: 18px;
  
  /* Cantos redondos */
  -moz-border-radius: 6px; 
  border-radius: 6px;
				
  /* A posicao e o z-index queremos que a nossa caixa esteja por baixo da barra de navegacao */
  position:absolute;
  z-index: 2;
				
  /* Gradiente */
  /* browsers antigos */
  background: #2E6FC0; 
  /* firefox */
  background: -moz-linear-gradient(top, #2E6FC0 0%, #4491D6 50%, #3A86CA 51%, #2D6FBE 100%); 
  /* webkit */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2E6FC0), color-stop(50%,#4491D6), color-stop(51%,#3A86CA), color-stop(100%,#2D6FBE)); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E6FC0', endColorstr='#2D6FBE',GradientType=0 ); /* ie */
				
}

#Navegacao ul{
  list-style-type: none;
  padding:0;
  margin:0;
}
			
#Navegacao ul li{
  display: block;
  float:left;
  padding-right:20px;
}
			
#Navegacao a:link{
  text-decoration: none;
  color: #FFFFFF;	
}

#Navegacao a:visited{
  color: #FFFFFF;	
}
		
#Caixa{
  /* z-index para a caixa estar por baixo da navegacao */
  position: absolute;
  z-index:-1;
  border:1px solid #265FB1;
  background: #2E6FC0; /* browsers antigos */
  background: -moz-linear-gradient(top, #3374C5 0%, #7CB3E2 50%, #74ABDA 51%, #6396CF 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3374C5), color-stop(50%,#7CB3E2), color-stop(51%,#74ABDA), color-stop(100%,#6396CF));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3374C5', endColorstr='#7CB3E2',GradientType=0 ); /* ie */
  padding:20px 10px 20px 10px;
  /* Cantos redondos */
  -moz-border-radius: 3px; 
  border-radius: 3px;
}

Podemos notar que em termos de estilo a barra de navegação está completa, mas o efeito que foi dado na Caixa de momento não faz sentido.

Para tal vamos usar javascript com ajuda do jQuery, para criar uma animação. Basicamente queremos que a Caixa se mova conforme o rato do usuário.

Se o o usuário passar com o rato pelo o link "Negócios" então queremos que a nossa Caixa se mova até esse link.

Queremos também que a posição inicial da Caixa seja o link que tenha a referência à classe selecionado

Um pequeno aviso, o javascript que vou apresentar é bom já terem um pouco de conhecimento de jQuery.

Vamos então começar o nosso Javascript.

Javascript

$(document).ready(function() { // Documento esta pronto
  $("#Navegacao ul li").mouseenter(function(evento) { // O usuario passa com o rato nos nossos links
    // Cache
    var elemento = $(this);
    // Posicao e tamanho do elemento
    var Largura = $(elemento).width(); // Largura do li
    var PosicaoEsquerda = $(elemento).position().left - 10; // Posicao do li menos 10, pois estamos a adicionar no padding no CSS
    var PosicaoTop = $(elemento).position().top - 10; // Posicao do li menos 10, pois estamos a adicionar no padding no CSS 
    // Animacao
    $("#Caixa").stop().animate({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" }, "slow");
  });

  // Se o rato sair da barra de navegacao entao chamar a nossa funcao PosicaoSelecionado
  $("#Navegacao").mouseleave(function(evento) {
    PosicaoSelecionado(false);
  });

  // Para quando a pagina arranca pela a primeira vez ou o usuario tira o rato da nossa barra de navegacao
  function PosicaoSelecionado(PrimeiraVez) {
    // cache o elemento selecionado
    var Selecionado = $(".selecionado");
    //Mover para essa posicao
    var PosicaoEsquerda = $(Selecionado).position().left - 10;
    var PosicaoTop = $(Selecionado).position().top - 10;
    var Largura = $(Selecionado).width();

    // Se for a primeira vez que o script arranca então mudar logo para essa posição, senão usar uma animação
    if (PrimeiraVez == true) {
      $("#Caixa").css({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" });
    } else {
      $("#Caixa").stop().animate({ "top": PosicaoTop + "px", "left": PosicaoEsquerda + "px", "width": Largura + "px" }, "slow");
   }
  }

  // Quando a pagina arranca pela a primeira vez e queremos a nossa caixa no link correcto
  PosicaoSelecionado(true);

});

Conclusão

Estou contente com o resultado final, mas a verdade tem que ser dita e existe vários pormenores que não consegui igual ao pacote que o Eduardo publicou.

Os gradientes no Photoshop resultam melhor, e os detalhes que o Eduardo deu nas barras de navegação são difíceis de replicar na minha solução.

Porém foi um desafio interessante, fiquei a saber um pouco mais de gradientes em CSS3.

Para uma solução mais realista, acho que se misturarmos este tutorial com o pacote de barras de navegação, acho que é mesmo a melhor solução.

Espero que tenham gostado deste tutorial.

O próximo artigo será um tutorial de programação.

PT Tutoriais oferece a todos os visitantes este pacote em photoshop de login lightbox, criado exclusivamente para o PT Tutoriais.

PT Tutoriais oferece a todos os visitantes este pacote em photoshop de elementos de interface, criado exclusivamente para o PT Tutoriais.

PT Tutoriais oferece a todos os visitantes este pacote em photoshop de botões brilhantes, criado exclusivamente para o PT Tutoriais.

E não percam o próximo tutorial onde vamos tentar criar o mesmo efeito mas sem usar imagens e sim apenas CSS e um pouco de jQuery.

Podem ver o anúncio no blog do Scott Guthrie, por parte da Microsoft, e o anúncio oficial por parte da equipa do jQuery.

Os plugins são:

• jQuery Templates
• jQuery Data Link
• jQuery Globalization

Há pouco tempo tenho começado a brincar com o jQuery Templates, e neste tutorial vou tentar explicar como usar e para que serve.

O que é? Como usar?

Em geral usando jQuery Template permite-te uma forma fácil de interpretar HTML e substituir o conteúdo com data criado ou recebido em javascript, como por exemplo data no formato JSON.

Com o crescimento de JSON, especialmente em serviços de Web, e também em aplicações Ajax, sem dúvida que este plugin, criado pela Microsoft, vai dar muito jeito.

Como sempre começamos por referenciar o jQuery e também o plugin. Podem encontrar o plugin no site CDN da Microsoft.

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>

Vamos começar então agora a brincar um pouco. Vamos começar pelo o javascript, vamos criar alguma data sobre livros, e depois vamos usar esta data para popular uma template.

$(document).ready(function() {
  var livros = [
{ Titulo: "A Cabana", 
   Preco: "€10", 
   Editora: "Sextante", 
   NumeroDePaginas: "240", 
   ISBN: "9788599296363", 
   Descricao: "A filha mais nova de Mackenzie Allen Philip foi raptada durante as férias em família e há evidências de que ela foi brutalmente assassinada e abandonada numa cabana." },
{ Titulo: "O Simbolo Perdido", 
   Preco: "€18", 
   Editora: "Sextante", 
   NumeroDePaginas: "496", 
   ISBN: "9788599296554", 
   Descricao: "Depois de ter sobrevivido a uma explosão no Vaticano e a uma caçada humana em Paris, Robert Langdon está de volta com seus profundos conhecimentos de simbologia e sua brilhante habilidade para solucionar problemas." },
{ Titulo: "Crepúsculo", 
   Preco: "€18", 
   Editora: "Intrínseca", 
   NumeroDePaginas: "416", 
   ISBN: "9788598078304", 
   Descricao: "Isabella Swan chega à nublada e chuvosa cidadezinha de Forks - último lugar onde gostaria de viver.Tenta se adaptar à vida provinciana na qual aparentemente todos se conhecem, lidar com sua constrangedora falta de coordenação motora e se habituar a morar com um pai com quem nunca conviveu." }
];
});

Como podemos ver criámos apenas data que contem a informação de um livro. Neste exemplo temos três livros que contêm o título, preço, editora, número de páginas, o código ISBN e uma pequena descrição do livro.

Neste exemplo eu especifico a data, mas normalmente esta informação viria de um serviço web, ou mesmo de uma base dados em que usamos ajax para trazer a informação.

Vamos agora ver como podemos usar a data com o novo plugin da microsoft templates.

.tmpl()

Este método permite fazermos a combinação de uma template com a data, sem dúvida uma das partes importantes para usarmos este plugin.

Mas afinal o que é um template? Para tal temos que analisar o nosso HTML.

<body>
  <h2>Livros</h2>
  <div id="LivrosContainer"></div>
				
  <!-- Template -->
  <script id="LivrosTemplate" type="text/html">
    <div class="Livro">
      <p><span>Titulo: </span>{{= Titulo }}</p>
      <p><span>Preco: </span>{{= Preco }}</p>
      <p><span>Editora: </span>{{= Editora }}</p>
      <p><span>Numero De Paginas: </span>{{= NumeroDePaginas }}</p>
      <p><span>ISBN: </span>{{= ISBN }}</p>
      <p><span>Descricao: </span>{{= Descricao }}</p>
    </div>
  </script>
  <!-- / Template -->
</body>

Simples? Eu acho que sim. A ideia é usar a nossa template por cada livro que temos na nossa data.

Podemos ver algo novo neste HTML, primeiro declaramos o div LivrosContainer, que vai servir como recipiente para a template.

Podemos ver também o uso {{= }}, que faz parte das tags disponíveis no plugin, existe várias tags, mas {{= }} é uma das mais importantes.

Ao especificarmos {{= Titulo }} o plugin trata de ir buscar a data que definimos com esse valor.

O próximo passo será como fazer a ligação entre a data e o nosso template.

$(document).ready(function() {
  var livros = [
{ Titulo: "A Cabana", 
   Preco: "€10", 
   Editora: "Sextante", 
   NumeroDePaginas: "240", 
   ISBN: "9788599296363", 
   Descricao: "A filha mais nova de Mackenzie Allen Philip foi raptada durante as férias em família e há evidências de que ela foi brutalmente assassinada e abandonada numa cabana." },
{ Titulo: "O Simbolo Perdido", 
   Preco: "€18", 
   Editora: "Sextante", 
   NumeroDePaginas: "496", 
   ISBN: "9788599296554", 
   Descricao: "Depois de ter sobrevivido a uma explosão no Vaticano e a uma caçada humana em Paris, Robert Langdon está de volta com seus profundos conhecimentos de simbologia e sua brilhante habilidade para solucionar problemas." },
{ Titulo: "Crepúsculo", 
   Preco: "€18", 
   Editora: "Intrínseca", 
   NumeroDePaginas: "416", 
   ISBN: "9788598078304", 
   Descricao: "Isabella Swan chega à nublada e chuvosa cidadezinha de Forks - último lugar onde gostaria de viver.Tenta se adaptar à vida provinciana na qual aparentemente todos se conhecem, lidar com sua constrangedora falta de coordenação motora e se habituar a morar com um pai com quem nunca conviveu." }
];

  $("#LivrosTemplate").tmpl(livros).appendTo("#LivrosContainer");

});

Exemplo

Simples não? Com apenas uma linha conseguimos misturar a nossa data com HTML, sem estarmos com grandes complicações em fazer o loop da data e criar strings e strings de HTML em javascript e depois adicionar no DOM.

Vamos agora analisar algumas das tags disponíveis no plugin.

{{html}}

No nosso exemplo podem ver que temos a descrição do livro, mas sem nenhum HTML. Porém algumas vezes a data vem com HTML. Por exemplo:

Descricao: "<p>Isabella Swan chega à nublada e chuvosa cidadezinha de Forks - último lugar onde gostaria de viver.</p><p>Tenta se adaptar à vida provinciana na qual aparentemente todos se conhecem, lidar com sua constrangedora falta de coordenação motora e se habituar a morar com um pai com quem nunca conviveu.</p>"

Podemos ver que adicionamos dois parágrafos usando <p>.

Ao usarmos a template no exemplo em cima, podemos verificar que o navegador não interpreta o HTML, e mostra os nossos <p> como texto.

Nestes casos podemos usar {{html}} para obrigar a render o HTML.

  <!-- Template -->
  <script id="LivrosTemplate" type="text/html">
    <div class="Livro">
      <p><span>Titulo: </span>{{= Titulo }}</p>
      <p><span>Preco: </span>{{= Preco }}</p>
      <p><span>Editora: </span>{{= Editora }}</p>
      <p><span>Numero De Paginas: </span>{{= NumeroDePaginas }}</p>
      <p><span>ISBN: </span>{{= ISBN }}</p>
      <p><span>Descricao: </span>{{html Descricao }}</p>
    </div>
  </script>

Exemplo

{{if}} e {{else}}

Usando estas tags, podemos mostrar conteúdo alternativo.

Vamos supor que por vezes alguns livros não contêm a descrição e não queremos ter um espaço em branco, preferindo mostrar uma frase a informar que o conteúdo não se encontra disponível.

Para tal modificamos a nossa template.

{{if Descricao}}
  <span>Descricao: </span>{{html Descricao }}
{{else}}
  <span>Nao disponivel</span>
{{/if}}

Podemos também comparar com um valor. Por exemplo se o número de páginas do livro for maior que 250 então queremos mostrar uma mensagem a dizer "muitas páginas".

{{if NumeroDePaginas < 250}}
  <p><span>Numero De Paginas: </span>{{= NumeroDePaginas }}</p>
{{else}}
  <p><span>Numero De Paginas: </span>Muitas Paginas</p>
{{/if}}

Exemplo

{{each}}

Serve para reiterar uma matriz de dados.

Vamos supor que o ISBN pode ter vários valores, para tal modificamos a nossa data.

ISBN: ["9788599296363", "783987389", "389738973"] // Livro 1
ISBN: ["9788599296554"] // Livro 2
ISBN: ["9788598078304", "323423566"] // Livro 3

Usando o {{each}}, podemos reiterar cada valor na nossa template.

{{each ISBN}}
  <p><span>ISBN:</span>${$value}</p>
{{/each}}

Exemplo

{{tmpl}}

Em simples palavras permite-te criar templates dentro de templates.

Por exemplo se quisermos em vez de usarmos o {{each}} no exemplo em cima, podemos criar outra template.

<!-- Template -->
<script id="LivrosTemplate" type="text/html">
  <div class="Livro">
    <p><span>Titulo: </span>{{= Titulo }}</p>
    <p><span>Preco: </span>{{= Preco }}</p>
    <p><span>Editora: </span>{{= Editora }}</p>
    <p><span>Numero De Paginas: </span>{{= NumeroDePaginas }}</p>
    <span>Descricao: </span> {{html Descricao}}
    {{tmpl(ISBN) "#LivrosISBN"}}
  </div>
</script>
		
<!-- Nova Template -->
<script id="LivrosISBN" type="x-jquery-tmpl">
  <p><span>ISBN: </span>{{= }}</p>
</script>

Exemplo

O troque é chamar a nossa nova template através da template original, para isso usamos {{tmpl(ISBN) "#LivrosISBN"}}.

Basicamente, estamos a dizer para passar a data ISBN e usar a nova template que chamamos LivrosISBN.

Acabamos assim algumas das tags mais importantes neste plugin.

Mas o plugin ainda oferece algo mais.

.tmplItem()

Aqui esta um método que ajuda bastante quando queremos começar a fazer aplicações um pouco mais complicadas, e com efeitos mais engraçados.

Usando .tmplItem(), dá acesso ao item de uma template já rendida no navegador.

A melhor forma para explicar é com um exemplo. Vamos supor que queremos mostrar apenas o nome do livro, mas quando o usuário clickar no nome do livro queremos mostrar o preço.

A nossa template fica assim:

<script id="LivrosTemplate" type="text/html">
  <div class="Livro">
    <p><span>Titulo: </span>{{= Titulo }}</p>
  </div>
</script>

Agora vamos criar um evento para quando o usuário clickar na caixa, usando o .tmplItem() vamos buscar o preço e mostrar ao usuário.

$(".Livro").click(function() {
  var livroEscolhido = $.tmplItem(this).data;
  alert("O livro escolhido: " + livroEscolhido.Titulo + " / Preco: " + livroEscolhido.Preco);
});

Exemplo

Mais simples seria impossível!

Conclusão

Gosto muito deste plugin, já que oferece uma forma fácil de interpretar HTML e substituir o conteúdo com data criado ou recebido em javascript.

Este tutorial é uma pequena introdução em como usar alguns dos métodos e tags do plugin, e espero ter mostrado o potencial deste plugin.

A primeira parte serviu para criarmos a base de como o sistema funcionava, agora vamos apenas adicionar novas funções e aumentar assim as opções para os nossos usuários.

Devido a ter explicado a maioria do sistema na primeira parte do tutorial, neste vamos ver mais código do que explicação.

Novos formatos

Como vimos na primeira parte, criamos um objecto Formatos, onde queremos oferecer ao usuário da nossa aplicação uma forma de ter possibilidade de escolher formatos pré-definidos para desenhar. Na primeira parte o único formato disponível é a linha livre, um formato que o usuário pode usar para desenhar à vontade sem nenhuma restrição.

Quando analisamos pela a primeira vez o elemento canvas vimos como fazer um rectângulo, um círculo e uma linha. Agora vamos aplicar esse conhecimento nesta aplicação.

Rectângulo

  // O visitante quer desenhar um rectângulo 
  Formatos.Rectangulo = function(evento) {
    var Formato = this;
    this.comecou = false;

    this.mousedown = function(evento) { // Posição do rato em que o evento começou
      Formato.comecou = true;
      Formato.x0 = evento._x;
      Formato.y0 = evento._y;
    };

    this.mousemove = function(evento) {
      if (!Formato.comecou) {
        return;
      }

      // Calcular matematicamente 
      var x = Math.min(evento._x, Formato.x0), // Posição X
      y = Math.min(evento._y, Formato.y0), // Posição Y
      w = Math.abs(evento._x - Formato.x0), // A largura do rectângulo
      h = Math.abs(evento._y - Formato.y0); // A altura do rectângulo

      NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height); // Apagar qualquer desenho que tenhamos no canvas.

      if (!w || !h) {
        return;
      }

      NovoCanvasContexto.strokeStyle = "#000000";
      NovoCanvasContexto.strokeRect(x, y, w, h); // posição X, posição Y, largura, altura
    };
    
    // Desenha o rectângulo no canvas original
    this.mouseup = function(evento) {

      if (Formato.comecou) {
        Formato.mousemove(evento);
        Formato.comecou = false;
        Desenhar();
      }
    };

  };

Como podemos ver usámos o mesmo esqueleto para criar um novo formato, mas usámos o strokeRect() para criar um rectângulo.

A lógica funciona da mesma maneira, usamos três eventos, o primeiro mousedown onde salvamos a posição do rato. O mousemove onde calculamos o rectângulo e desenhamos no canvas temporário.

E em último o mouseup onde copiamos o canvas temporário, para o canvas inicial.

Círculo

Usando mais uma vez o nosso esqueleto vamos agora adicionar o círculo.

//Um circulo
  Formatos.Circulo = function(evento) {
    var Formato = this;
    this.comecou = false;

    this.mousedown = function(evento) {
      Formato.comecou = true;
      Formato.x0 = evento._x;
      Formato.y0 = evento._y;
    };

    this.mousemove = function(evento) {
      if (!Formato.comecou) { return; }

      NovoCanvasContexto.beginPath();

      NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height);
      var Radius = Math.abs(Formato.x0 - evento._x)

      // Coordenadas X, Coordenadas Y, Raio, Inicio do ângulo, Fim do ângulo , No sentido do relógio / Contra o sentido do relógio
      NovoCanvasContexto.arc(Formato.x0, Formato.y0, Radius, 0, Math.PI * 2, false)
      NovoCanvasContexto.strokeStyle = "#000000";
      NovoCanvasContexto.stroke();
    };

    this.mouseup = function(evento) {
      Formato.mousemove(evento);
      Formato.comecou = false;
      Desenhar();
    };

  };

Para criarmos o círculo usamos o .arc(), já explicado na nossa introdução ao canvas.

Linha

// Uma linha
  Formatos.Linha = function(evento) {
    var Formato = this;
    this.comecou = false;

    this.mousedown = function(evento) {
      Formato.comecou = true;
      Formato.x0 = evento._x;
      Formato.y0 = evento._y;
    };
    this.mousemove = function(evento) {
      if (!Formato.comecou) { return; }

      NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height);
      NovoCanvasContexto.beginPath();
      NovoCanvasContexto.moveTo(Formato.x0, Formato.y0);
      NovoCanvasContexto.lineTo(evento._x, evento._y);
      NovoCanvasContexto.strokeStyle = "#000000";
      NovoCanvasContexto.stroke();
      NovoCanvasContexto.closePath();
    };
    this.mouseup = function(evento) {
      if (Formato.comecou) {
        Formato.mousemove(evento);
        Formato.comecou = false;
        Desenhar();
      }
    };
  };

E assim completamos os nossos formatos para a nossa aplicação, sendo assim o usuário tem agora as opções de:

• Rectângulo
• Círculo
• Linha
• Linha Livre

Mas ainda falta umas modificações. De momento temos o nosso script preparado, mas falta uma maneira de deixarmos o nosso usuário escolher estes formatos.

Para tal adicionamos quatro botões na nossa aplicação e um evento para cada botão.

Vamos começar pelo o HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Aplicação canvas</title>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="Container">
      <canvas id="Canvas" width="450" height="300">
        <p>O teu navegador não suporta canvas</p>
      </canvas>
    </div>
    <a href="#" id="forCirculo">Circulo</a><br/>
    <a href="#" id="forRectangulo"> Rectângulo </a><br/>
    <a href="#" id="forLinha">Linha</a><br/>
    <a href="#" id="forLapis">Lapis</a><br/>
  </body>
</html>

Como podemos ver adicionámos quatro novos links nos quais agora vamos adicionar eventos usando jQuery.

Assim quando um usuário clicar num link, activamos esse formato.

// O usuário escolheu o circulo
$("#forCirculo").click(function() {
  if (Formatos["Circulo"]) {
    Formato = new Formatos["Circulo"]();
  }
});

// O usuário escolheu o rectângulo
$("#forRectangulo").click(function() {
  if (Formatos["Rectangulo"]) {
    Formato = new Formatos["Rectangulo"]();
  }
});

// O usuário escolheu a linha
$("#forLinha").click(function() {
  if (Formatos["Linha"]) {
    Formato = new Formatos["Linha"]();
  }
});

// O usuário escolheu a linha livre/lápis
$("#forLapis").click(function() {
  if (Formatos["LinhaLivre"]) {
    Formato = new Formatos["LinhaLivre"]();
  }
});

Cores

Para completarmos a nossa aplicação falta apenas a opção de cores e a opção de salvar o nosso desenho.

Vamos começar pelas as cores, neste momento quero só adicionar umas quantas cores, para ver como funciona.

Mais uma vez modificamos o HTML e adicionamos o seguinte:

<a href="#" id="corFFFFFF">Branco</a><br />
<a href="#" id="cor000000">Preto</a><br />
<a href="#" id="cor7c0608">Vermelho</a><br />
<a href="#" id="corf3c421">Amarelo</a><br />

No nosso javascript, vamos adicionar uma nova variável, onde vamos guardar o valor da cor.

$(document).ready(function() {
  var NovoCanvasContexto;
  var Canvas, CanvasContexto, NovoCanvas;
  var Formato;
  var FormatoOriginal = "LinhaLivre";
  var Cor = "#000000";

Usando eventos outra vez, adicionamos no nosso javascript.

// Cores
$("#cor000000").click(function() {
  Cor = "#000000";
});
$("#corFFFFFF").click(function() {
  Cor = "#FFFFFF";
});
$("#cor7c0608").click(function() {
  Cor = "#7c0608";
});
$("#corf3c421").click(function() {
  Cor = "#f3c421";
});

Por fim temos que modificar o nosso objecto formatos e adicionar esta variável.

No linha livre:

this.mousemove = function(evento) {
  if (Formato.comecou) {
    NovoCanvasContexto.strokeStyle = Cor; // Cor da linha
    NovoCanvasContexto.lineTo(evento._x, evento._y);
    NovoCanvasContexto.stroke();
  }
};

No rectângulo:

  if (!w || !h) {
    return;
  }
  NovoCanvasContexto.strokeStyle = Cor; // Cor da linha
  NovoCanvasContexto.strokeRect(x, y, w, h);

No círculo:

  NovoCanvasContexto.arc(Formato.x0, Formato.y0, Radius, 0, Math.PI * 2, false)
  NovoCanvasContexto.strokeStyle = Cor; // Cor da linha
  NovoCanvasContexto.stroke();

Por fim na linha:

  NovoCanvasContexto.lineTo(evento._x, evento._y);
  NovoCanvasContexto.strokeStyle = Cor; // Cor da linha
  NovoCanvasContexto.stroke();

Salvar imagem

Por fim vamos adicionar a opção de salvar o desenho, começando pelo HTML onde vamos adicionar o link.

<a href="#" id="opcSalvar">Salvar</a>

No javascript apenas vamos adicionar o evento click, e usar o toDataURL(), para transformar o nosso canvas numa imagem em .png.

$("#opcSalvar").click(function() {
  var dataURL = Canvas.toDataURL("image/png");
  document.location.href = dataURL;
});

Exemplo Final

Conclusão

E chegámos ao fim desta pequena serie de dois tutoriais sobre como criar uma aplicação de desenho usando o canvas.

No primeiro tutorial foi sugerido, nos comentários, novas funcionalidades que não estava a contar para esta série de tutoriais, tais como layers/camadas, filtros, e borracha.

Por isso, pode ser que daqui a uns dias apareça uma parte três desta série.

Espero que este tutorial tenha servido para aprenderem alguma das novas funcionalidades do HTML 5 e do novo API de javascript.

Podem usar e modificar a vontade para os vossos projectos.

As fontes usadas neste exemplo foram:

• Gotham Rounded
• Helvetica Neue
• Georgia

Como podem ver o PT Tutoriais foi criado com um design bastante simples, há quem diga simples demais.

E agora com o crescimento do número de tutoriais quero introduzir uma forma de mostrar artigos relacionados com o artigo que estás correntemente a ler.

Até aqui nada de novo, mas com um design tão simples como é que vou introduzir esta funcionalidade?

Existe várias soluções, visitei uns quantos sites para ter uma ideia como outros sites o estão a fazer.

Ainda não decidi de que forma fazer aqui no PT Tutoriais, mas uma das soluções que gostei, vi no Público.

A ideia é simples, o usuário quando faz scroll para baixo quando chega quase ao fim do artigo e uma caixa aparece a deslizar do lado esquerdo com novos artigos.

Como podemos ver, temos o conteúdo e quando o usuário chegar à linha encarnada queremos que uma caixa deslize da esquerda para a direita com os artigos relacionados.

Queremos também que quando o usuário faz o scroll para cima a caixa desapareça da direita para a esquerda.

Gosto do factor de não ocupar espaço no site, e só aparecer quando chegas a uma parte do site.

De seguida claro, como fazer?

HTML

Como sempre começar com o HTML.

<div id="Artigo">
  Texto do artigo
</div>

<div id="ComecarAqui">&nbsp;</div>
		
<div id="Comentarios">
  Comentarios		
</div>

<div id="MaisArtigos">
  <h2>Mais artigos</h2>
  <p>Notamos que acabaste de ler este artigo. Se gostaste deste artigo ve estes:</p>
  <p>Outro artigo</p>
  <p>Outro artigo</p>
</div>

Os pontos mais importantes no nosso HTML são o div ComecarAqui e o MaisArtigos.

O div ComecarAqui vai servir como guia, assim que a barra de scroll do navegador chegar a este div queremos que o div MaisArtigos apareça da direita a deslizar para a esquerda.

Os outros dois div são apenas para fingir conteúdo neste momento. Cada site tem a sua estrutura por isso o ponto que tens que tirar daqui e que precisas de adicionar um div para servir de guia e outro que vai ser a caixa com a informação que queres mostrar.

Vamos ao CSS

#Artigo, #Comentarios { 
  width: 500px; 
  height:2000px; 
  display:block; 
  margin: 0 auto; 
  border:1px solid #000;
}
			
#ComecarAqui {
  width: 500px; 
  height:1px; 
  display:block; 
  margin: 0 auto; 
  border:1px solid #000;
}
						
#MaisArtigos {
  width:400px; /* Queremos que a nossa caixa tenha 400px de largura */
  height:250px; /* Queremos que a nossa caixa tenha 250px de altura */
  position:fixed; /* Queremos que a sua posicao seja fixa */
  left:-400px; /* -400px isto obriga a caixa estar escondida quando comeca */
  bottom:10px; /* 10px a partir do fim da janela do navegador */
  border:1px solid #999; 
}

A parte mais importante do CSS é o #MaisArtigos, os outros são apenas para encher a minha página de exemplo.

Começo por definir a largura da minha caixa de mais artigos, width: 400px;, de seguida defino a altura usando height:250px; é um ponto importante porque vamos usar este valor no nosso javascript.

A posição vai ser fixa, position:fixed; isto obriga ao elemento a ficar sempre na mesma posição mesmo quando o usuário usa a barra de scroll.

Por fim o left:-400px; obriga ao nosso elemento estar escondido quando a página arranca pela primeira vez.

Podem ver o exemplo do que temos até agora.

Nada de especial, podemos verificar que apenas temos uma página longa, mas podemos notar também que a nossa caixa de #MaisArtigos não aparece, isto porque escondemos lo lado esquerdo.

Para aparecer precisamos de um pouco de magia com javascript e ajuda do jQuery.

Javascript

$(document).ready(function() { // Evento pagina carregada
  var Visivel = false; // A nossa caixa de mais artigos encontra-se visível?
  var AlturaDaCaixa = 250; // A altura da nossa caixa de mais artigos, 250px como especificamos no CSS
  // Posição do nosso elemento onde queremos começar a mostrar a caixa de mais artigos
  var PosicaoDoElementoReferencia = Math.abs($("#ComecarAqui").position().top);

  $(window).scroll(function() {
    
    var AlturaDaJanela = Math.abs($(window).height()); // Altura do nosso navegador
    var PosicaoDoScroll = Math.abs($(this).scrollTop()); // Posição da scrollbar
   
    // Calcular o valor real onde queremos começar a mostrar a nossa caixa de mais artigos
    var MostrarCaixa = PosicaoDoElementoReferencia - AlturaDaJanela + AlturaDaCaixa;

    // Se a posição da nosso barra de scroll for maior que a posição onde queremos começar mostrar a caixa, então começa a nossa animação de mostrar
    if (PosicaoDoScroll > MostrarCaixa) {

      if (Visivel == false) { // A nossa caixa já esta visível?
        $("#MaisArtigos").stop(true, true).animate({ "left": "15px" }, "slow"); // Se não esta visível então começa a animação 
      }
      
      Visivel = true; // Mudar a nossa variável visível para verdadeiro

    } else { // 

      if (Visivel == true) { // A caixa esta visível?
        $("#MaisArtigos").stop(true, true).animate({ "left": "-400px" }, "slow"); // Se estiver então e porque o usuário esta a fazer scroll para cima, esconder a caixa
      }
    
      Visivel = false; // A caixa não esta visível mudar a variável para falso

    }

  });

});

Começo por definir três variáveis importantes, a primeira Visivel vai servir para manter o estado da nossa caixa, se está visível ou não.

A razão pela qual uso esta variável é para não causar a animação da caixa a surgir e desaparecer cada vez que o usuário faz o scroll da página nem que seja apenas um scroll de 1 pixel de distância.

A segunda variável AlturaDaCaixa é o tamanho do nosso div, MaisArtigos que definimos no nosso CSS.

Por fim PosicaoDoElementoReferencia é a posição onde se encontra o nosso elemento de referencia onde queremos começar a mostrar a nossa caixa.

Vamos ao resto $(window).scroll(function() é o evento que queremos capturar, assim cada vez que o usuário fazer scroll esta função lida com esse factor.

Começamos por calcular o ponto exacto em que queremos começar a mostrar a nossa caixa.

Para tal usamos a seguinte fórmula:

A posição em que o nosso elemento de referencia o ComecarAqui se encontra menos a altura da janela do navegador do nosso usuário mais a altura da nossa caixa de mais artigos.

De seguida é fácil, se a posição do nosso scroll for maior que a posição em que queremos começar a mostrar a caixa e a caixa não estiver visível então começamos a animação e movemos a caixa de -400px para 15px, o inverso acontece se, a posição do nosso scroll for menor que a posição em que queremos começar a mostrar a caixa e a caixa encontra-se visível, então começamos a animação de mover a caixa de 15px para -400px escondendo assim a caixa do nosso usuário.

Podemos ver aqui o exemplo.

Por fim

Falta apenas um pormenor para a funcionalidade estar concluída, falta termos um botão de fechar a caixa no caso do usuário não querer ver a caixa.

Para tal, vamos criar um botão "Fechar Caixa" no nosso HTML, criamos também uma variável nova no nosso javascript.

Se o usuário carregar no botão mudamos o valor da variável para verdadeiro, e impedimos assim a caixa de se mostrar.

Usando o evento click, fica fácil de apanharmos o clique do nosso usuário.

Uma pequena modificação no nosso HTML

<div id="MaisArtigos">
  <h2>Mais artigos</h2>
  <p>Notamos que acabaste de ler este artigo. Se gostaste deste artigo ve estes:</p>
  <p>Outro artigo</p>
  <p>Outro artigo</p>
  <p><a href="#" title="Fechar" id="FecharMaisArtigos">Fechar</a></p>
</div>

E por fim o javascript

$(document).ready(function() { // Evento pagina carregada
  var Visivel = false; 
  var AlturaDaCaixa = 250; 
  var PosicaoDoElementoReferencia = Math.abs($("#ComecarAqui").position().top);

  var UsuarioFechar = false; // Nova variável para controlar se o usuário fechou a caixa ou não

  $(window).scroll(function() {
   
   if (UsuarioFechar == false) {

      var AlturaDaJanela = Math.abs($(window).height()); 
      var PosicaoDoScroll = Math.abs($(this).scrollTop()); 
      var MostrarCaixa = PosicaoDoElementoReferencia - AlturaDaJanela + AlturaDaCaixa;

      if (PosicaoDoScroll > MostrarCaixa) {

        if (Visivel == false) { 
          $("#MaisArtigos").stop(true, true).animate({ "left": "15px" }, "slow"); 
        }
      
        Visivel = true;

      } else {

        if (Visivel == true) { 
          $("#MaisArtigos").stop(true, true).animate({ "left": "-400px" }, "slow"); 
        }
    
        Visivel = false;

      }
    }
  });

  $("#FecharMaisArtigos").click(function(evento) { // Evento o usuário clicou em fechar
    UsuarioFechar = true;
    if (Visivel == true) { // Se a caixa estiver visível quando o usuário carregar em fechar, fazer animação de esconder
      $("#MaisArtigos").stop(true, true).animate({ "left": "-400px" }, "slow");
    }
    evento.preventDefault(); // Preveni a acção padrão do evento, neste caso tentar linkar para outra pagina
  });

});

Conclusão

Como podemos ver um script interessante para mostrarmos certas mensagens quando o usuário atinge certas zonas da nossa página.

Neste tutorial, usei para mostrar artigos relacionados com o artigo que o usuário se encontra a ler, mas nada impede de mostrar, ou activar seja o que for quando o usuário atinge um sítio da tua página que tu especificas.

Claro a caixa não tem beleza nenhuma, mas isso e algo que poderás modificar apenas com CSS.