Há um certo tempo atrás escrevi uma lista com os 10 mellhores plugins para o Firefox. Agora o Chrome entrou de vez na briga para tentar alcançar um número maior de usuário (Developer’s) com um pacote de Extensions.

Bom, no site do Google Chorme é possível encontrar mais extensions para personalizar seu navegador, mas aqui fica a dica dos que eu prefiro:

1. Firebug
2. Web Developer Tool Bar
3. Lorem Ipsum Generator

Além desses que são extremamente úteis para desenvolvimento de Websites, vocês podem encontrar vários extensions acessando o site do Google Chrome.

Ta aí mais uma dica e em breve tem mais.

Esse vídeo é muito legal. Vale apena assistir até o final. Ainda não sei de quem é a produção, mas é fantástico.

Espero que tenham gostado.

Finalmente decidi qual video game comprar. Depois de ver o Project Natal e ficar totalmente indeciso entre um XBox 360 e um Playstation 3 (isso é claro pelo game God of War III), agora a Sony me deu um bom motivo para ter um PS3.

Sim, PlayStation 3 Move é a união do controle do WII e a WebCam do XBox 360. Veja alguns Gameplay já usando o Move.

Simplesmete Excepcional!!!

Sim, ainda estou vivo…

Galera, final e inicio de ano passaram totalmente em branco, tudo em consequência de muito trabalho. Grandes mudanças na empresa e principalmente a correria de colocar meu projeto pessoal no ar logo.

Bom, em breve voltarei a escrever com mais frequência, mas pra começar ai vai um vídeo para quem gosta de DnD.

Simplesmente, PERFEITO.

Um esporte que eu gosto muito de acompanhar é o Vale-tudo ou Mixed martial arts como é mais conhecido hoje em dia. O Brasil também é muito bem representado neste esporte com grandes campeões, como por exemplo Anderson Silva, Lyoto Machida entre outros.

Esta modalidade de esporte nunca teve um bom defensor nos video-games, mas dois grandes títulos prometem um grande “Combate”, UFC 2009 Undisputed contra MMA.

Na minha opnião UFC sai na frente pelo número de lutadores, já o MMA apresenta um realismo maior.

Confira a apresentação do UFC 2009 e do MMA e tire suas próprias conclusões.

UFC 2009 Undisputed

MMA

Bom, pra quem curte o esporte acho que esses são dois grandes títulos que prometem fazer sucesso.
Espero que tenham gostado e em breve tem mais.

Bom, galera primeiro de tudo desculpe o sumiço. Realmente tenho me ausentado das atualizações do Blog por questões profissionais, que em breve vocês poderão ver mais de perto.

Este é um vídeo de uma revista bem conhecida e que foi criada uma edição dela toda feita com BIC (com excessão das publicidades). A idéia é muito legal, vejam só.

Este post foi mais pra dizer que ainda estou vivo e eu já estou preparando uma série de post’s novos e interessantes. Prometo tentar manter o mais atualizado possível o Blog, será dificil mas irei tentar.
Aguardem que em breve tem mais.

Galera, eu ando sumido devido ao trabalho, e mais trabalho, projetos pessoais e muito mais. Só pra dizer que eu ainda estou vivo to postando um vídeo que vi semana passada e achei demais.

Assista ao vídeo e veja o que uma movimentação em redes sociais e um pouco de ensaio pode fazer.

Espero que tenham gostado. Em breve tem mais.

Bom, conforme prometido essa é a galeria apresentada no post Galeria com JQuery.

A ideia é bem simples, quando a galeria está com JavaScript habilitado ela possui um efeito de transição entre as imagens e a páginação dos itens da galeria.

Sem JavaScript habilitado a galeria é apresentada em uma DIV com scroll.

Download da Galeria

Faça o download da galeria aqui.

Ah é, graças a minha amiga e colega de trabalho a Fran que resolveu meu probleminha de FTP, eu consegui disponibilizar a galeria para vocês.

Aguarde que em breve tem mais.

Bom, primeiro desculpe o sumiço mas isso é consequência de muito trabalho na Webroom e em um projeto pessoal que em breve vocês irão conhecer. Tenho alguns e-mails para responder e ainda não tive tempo, mas prometo em breve dar um retorno a todos.

Parando um pouco de dar desculpas, vou apresentar hoje uma galeria que fiz onde a utilização dela é muito simples e acredito que ela seja bem útil, pois funciona com e sem JQuery (ou seja com e sem JavaScript habilitado).

Como todos já devem imaginar o primeiro passo e baixar a última versão do JQuery. Depois basta montar a galeria seguindo os passos abaixo. Veja que a estrutura da galeria é bem simples:

• galeria.js
• estilo.css
• galeria.html
• além do jquery-1.3.2.min.js

Gostaria de apresentar um preview para vocês, mas infelizmente estou tendo um pequeno problema para acessar o FTP do meu blog e não consigo disponibilizar a galeria pronta e funcionando (mas nada impede vocês de copiarem o código e utilizar a galeria).

Abaixo segue o código HTML da galeria:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Galeria</title>
  <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  <script type="text/javascript" src="galeria.js"></script>
  <link href="estilo.css" type="text/css" media="all" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="painel_noscript">
  <ul class="galeria_noscript" >
    <li><a href="#"><img src="imagens/200/foto1.jpg" width="200" height="200" alt="Foto 1" /></a></li>
    <li><a href="#"><img src="imagens/200/foto2.jpg" width="200" height="200" alt="Foto 2" /></a></li>
    <li><a href="#"><img src="imagens/200/foto3.jpg" width="200" height="200" alt="Foto 3" /></a></li>
  </ul>
</div>
  <ul class="navegacao" >
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
  </ul>
  </div>
  </body>
</html>

Agora segue o código JavaScript da galeria:

var itens = 0; //Serve como o contador de itens realizados até aquele determinado momento.
var limiteItens = 0; //É a quantidade limite de elementos dentro da galeria. Ela é recuperada automaticamente de acordo com a quantidade de LI dentro da UL principal.
var tempo = 6000; //Em milisegundos 5000 = 5 segundos
var widthImagem = 0; //Tamanho da imagem da galeria. Serve para andar o tamanho correto de acordo com o tamanho na tag IMG
var heightImagem = 0; //Tamanho da imagem da galeria. Serve para andar o tamanho correto de acordo com o tamanho na tag IMG
var timer; // Este é o timer da galeria
var tempoEfeito = 1300; //Velecidade da transição

$(document).ready(function(){
  startTimer();
  if($('.galeria_noscript').length != 0 ){
    $('.painel_noscript').removeClass('painel_noscript').addClass('painel');
    $('.galeria_noscript').removeClass('galeria_noscript').addClass('galeria');

    $(".navegacao a").click(function () {
      itens = parseInt($(this).attr("href").replace("#",""));
      rodar($(this).attr("href"),false);
      clearTimeout(timer);
      timer = setTimeout(startTimer,tempo); //Se usuário clicou no numero, então para o timer e inicializa ele novamente aqui.
    }); 

    limiteItens = $('.galeria li').length;
    widthImagem = $(".galeria li img").attr("width");
    heightImagem = $(".galeria li img").attr("height");

    $('.container').css({'width' : (widthImagem)+'px','height' : (heightImagem)+'px'});
    $('.painel').css({'width' : (widthImagem)+'px','height' : (heightImagem)+'px'});
    $('.galeria').css({'width' : (limiteItens * widthImagem)+'px'});
    $('.navegacao').css({'display' : 'block'});
  }
});

startTimer = function(){
    if(itens == limiteItens){itens = 0}
    itens= 1 + itens;
    rodar(itens,true);
    timer = setTimeout(startTimer,tempo);
} 

classeAtual = function(elemento){
  $('.navegacao li a').removeClass('atual');
  $('.navegacao li a[href=#'+ elemento +']').addClass('atual');
}

rodar = function(idBanner,auto) {
  if(!auto)
  { idBanner = idBanner.replace(/#/, "");}
  classeAtual(idBanner); // Seta a classe atual na numeração

  var tam = 0;
  if(idBanner != 1)
  { tam = (idBanner - 1) * widthImagem; }

  $('.galeria').animate({
    left: "-"+ tam+"px"
  },tempoEfeito);
}

Agora para deixar funcionando corretamente, coloque este CSS:

@charset "utf-8";

/* Galeria */
.container{ height:218px; }

/* Sem JavaScript Habilitado */
.container .painel_noscript {width: 200px; height: 200px; display:block;overflow:hidden;}
.container .galeria_noscript {width: 220px; height: 200px; display:block; position:absolute; overflow:scroll; list-style:none; margin:0; padding:0; }
.container .galeria_noscript li a {display:block; }
.container .galeria_noscript li a img { border:none; }

/* JavaScript Habilitado */
.container .painel { display:block; overflow:hidden; position:relative;}
.container .galeria {list-style:none; margin:0; padding:0; overflow:hidden; position:absolute;}
.container .galeria li {float:left;}
.container .galeria li a { display:block;}
.container .galeria li a img { border:none; }
.container .navegacao {display:none; overflow:hidden; list-style:none; margin:0; padding:0; }
.container .navegacao li {float:left; border:1px solid #000;}
.container .navegacao li a { width:22px; height:18px; display:block; color:#000; font-weight:bold; text-decoration:none; text-align:center;}
.container .navegacao li a.atual {background-color:#FF0000;}

Para concluir crie uma pasta de imagens e o tamanho das imagens deve ser colocado de forma correta no HTML. Preste atenção nos diretórios e está pronto.

Eu realmente gostaria de disponibilizar para vocês uma prévia da galeria, mas se vocês tiverem problemas deixem seus comentários que irei responder. Assim que resolver meu problema de FTP disponibilizarei essa galeria.

Há certo tempo recebi dois e-mails sobre com alguns questionamentos sobre MVC, que hoje em dia tem sido muito falado por todos (principalmente pelo programadores de .NET). O objetivo deste post é tentar esclarecer o que é o Design Patterns (Padrões de Projeto) MVC.

Bom, MVC significa Model, View e Controller. A ideia básica do MVC é de separar a lógica de negócio da apresentação (muito semelhante ao modelo de 3 Camadas. Bom, posso estar enganado e se estiver por favor comentem pois este é o objetivo). Vamos entender o que significa própriamente cada uma da letras.

M (Model)

Esta “camada” representa os dados da aplicação e as regras de negócio do acesso e modificação desses dados. Ela é quem fornece ao controlador a capacidade de acessar as funcionalidades da aplicação(Insert, Update, Delete).

Ultimamente tenho lido alguns forúns (alguns bem antigos por sinal) e percebi uma certa discussão sobre o que deve ficar no Model. Alguns dizem que a regra de negócio deve ficar no Model, mas eu particularmente acho bem mais interessante deixar o Model como sendo a DAL. Uma “camada” onde são tratadas as ações de Insert, Update, Delete e Select.

V (View)

As Views servem apenas para exibir as informações. São elas que renderizam o conteúdo de uma parte particular do modelo e encaminha para o controlador as ações do usuário. A View também acessa os dados do modelo através do controlador (Controller) e determina como esses dados devem ser apresentados.

Bom, comparando ainda com o modelo 3-tier (3 Camadas) essa seria a Interface.

C (Controller)

O controller define o comportamento da aplicação, é ele que interpreta as ações do usuário (View) e as mapeia para chamadas do modelo (Model).

Aqui sim ficaria a regra de negócio do nosso projeto. Grande partes dos post que li, tem colocado o controller como uma “gatilho” que serve apenas para disparar e identificar quais ações devem ser executadas no Model, mas para mim o Controller seria nossa BLL do modelo 3-tier.

Bom, é claro que esse é meu ponto de visto sobre como se pode utilizar este modelo.

Aqui estou apresentando uma imagem baseada em um modelo que realmente não me lembro onde vi. Ela mostra como são realizadas as requisições:

1 - O usuário realiza uma requisição de uma View (página web) ao Controller. Ex: Preenchimento do formulário de cadastro.

2 - O Controller recupera todas as informações da View e solicita uma ação (Insert por exemplo) para o Model. O Model processa a ação (grava em banco de dados) e devolve o resultado deste processamento para o Controller.

3 - O Controller processa o resultado e devolve para View o que ela deve exibir.

4 - A View recebe o que foi processado pelo Controller e exibe o resultado para o usuário. (Enteda a View como a página exibida) Ex: Imaginando um cadastro que foi realizado com sucesso, o retorno pode ser uma Mensagem de Sucesso.

Em resumo o modelo MVC é muito usado em aplicações para  Web, onde a View é a página  HTML, o controller é quem gera os dados dinâmicos para dentro da View (HTML) e o Model é representado pelo manutenção dos dados, ou seja, armazenagem em BD ou outros tipos de arquivos.

Bom, espero que com este post eu possa ter esclarecido um pouco como funciona esse Design Pattern. A idéia é simples mas pode confundir um pouco, mas nada uma boa leitura não ajude.

Em breve tem mais.