Papo vai, papo vem, procura na API da Prototype aqui, da jQuery ali, abre o Google acolá… e me deparo com uma página muito completa, que lista os browsers (inclusive por sistema operacional) e qual é o objeto e atributo que está disponível nele.

Ou seja, não existe um método que funcione para todos os browser…

Mas, o autor criou uma implementação cross-browser que funciona para calcular todos esses atributos (altura e largura da janela, posição da scrollbar horizontal e vertical). Fica a dica!

function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

Segue o link da página, para referência: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Nunca havia feito um modal do zero - sei que usei uma biblioteca, então não foi do zero mesmo mesmo - mas achei a experiência bem satisfatória e menos traumática do que eu pensava.

Vou explicar primeiro o que a classe se propõem a fazer

Requisitos

• Biblioteca jQuery

Funcionalidades

• Pode criar diversos modais (iniciando a classe mais de uma vez)
• Carrega imagens (jpg,jpeg,gif,png) e ajusta o modal no tamanho da imagem
• Carrega elementos de objetos html da página no modal
• Carrega html externo (ajax) no modal
• Gera as funções para todos os links utilizando o atributo "rel"

Bugs conhecidos

• Não redimensiona a altura do modal para um tamanho menor do atual (no IE)

Devem existir mais, pelo que lembro até tinha relatado mais alguns, mas esqueci de anotar e aí... :P

Testei o modal em Firefox, Internet Explorer 8, Internet Explorer 7 (emulado), Internet Explorer 6 (emulado). Tenho algumas idéias que gostaria de implementar mas nem testei ainda, segue a lista para quem quiser se arriscar:

• Navegação entre os contents ou imagens do modal
• Melhorar o sistema de resize
• Melhorar o layout
• Implementar exibição de vídeos do Youtube diretamente do link

O código

O código estava bem simples até eu começar a fazer alguns ajustes para o IE.. mas enfim, como é típico do jQuery, acredito que o código está bem "legível", segue a classe:

/* ### Modal Class ###
 * Author: Guilherme Serrano
 * Using jQuery
 * 
 * ### How to ###
 * var name = new Modal(name, mask)
 * 
 * # Arguments #
 * name = id único
 * mask (true/false) = using mask
 * 
 * All links with rel="name" will open modal box
 *  
 */
function Modal(modalName,mask){
	//Vars
	maxHeight = 450;
	maxWidth = 650;
	
	thisClass = this;	

	//Initialize modal
	this.initialize = function(){
		//Create elements & vars
		if($("#"+modalName).size() < 1){
			$("body").append("<div id="" + modalName + ""></div>")
		}
		divModal = $("#"+modalName);
		divModal.addClass("modal");
		var content = divModal.html();
		divModal.html("");
		divModal.prepend("<div class="modal_top"><a href="#" title="Fechar esta janela" id="" + modalName +"_close">Fechar</a></div><div class="modal_content"></div>");
		$("#"+modalName +" .modal_content").html(content);
		
		//Mask
		if(mask){
			if ($("#divMask").size() < 1) {
				divMask = "<div id="divMask" style="height:" + $(document).height() + "px;"></div>";
				$(divMask).appendTo("body");
			}
		}
		
		//Close button
		$("#"+modalName +"_close").click(function(){
			thisClass.close();
		});
		divContent = $("#"+modalName +" .modal_content");
		
		//Centralize on resize window
		$(window).bind("resize", function() {
			thisClass.centralize();
		});
		
		//Open buttons
		$("a[rel=""+modalName+""]").click(function(){
			href = $(this).attr("href")
			if(href == null || href == "" || href == "undefined" || href == "#"){
				thisClass.open();
			}else{
				thisClass.open(href)
			}
			return false;
		})
	}
	
	//Open
	this.open = function(content){
		thisClass.setContent(content);
		if (mask) {
			thisClass.showElement("#divMask");
		}
		thisClass.showElement("#"+modalName);
		thisClass.setMeasures();
	}
	
	//Close
	this.close = function(){
		if(mask){
			thisClass.hideElement("#divMask");
		}
		thisClass.hideElement("#"+modalName);
	}

	//Load content
	this.setContent = function(content){
		if(content != undefined && content != null && content != ""){
			if(content.match(/.gif/) || content.match(/.jpg/) || content.match(/.jpeg/) || content.match(/.png/)){
				divContent.html("<img src=""+content+"" />");
			}else if(content.match(/http:///) || content.match(/https:///) || content.match(/file:///)){
				divContent.load(content, null, thisClass.setMeasures);
			}else{
				divContent.html($(content).html());
			}
		}
	}
	
	//Show
	this.showElement = function(e){
		$(e).show();
	}
	
	//Hide
	this.hideElement = function(e){
		$(e).hide();
	}
	
	//Centralize
	this.centralize = function(){
		var posTop = (($(window).height()/2) - (divModal.height()/2))
		var posLeft = (($(window).width()/2) - (divModal.width()/2))
		divModal.css({
			"top" : posTop + "px",
			"left" : posLeft + "px"
		});
	}
	
	this.setMeasures = function(){
		thisClass.setWidth();
		thisClass.setHeight();
		thisClass.centralize();
	}
	
	
	// Set height
	this.setHeight = function(){
		h = divContent.height()
		if(h > maxHeight){
			divContent.css({
				"height": maxHeight+"px"
			})
			divModal.css({
				"height": (maxHeight+50)+"px"
			})
		}else{
			divModal.css({
				"height": "auto"
			})
		}
	}

	this.setWidth = function(){
		w = divContent.width()
		if(w > maxWidth){
			divModal.css({
				"width": (maxWidth+20)+"px"
			})
		}else{
			divModal.css({
				"width": "auto"
			})
			if(divContent.width() > maxWidth){
				//alert("Deixou auto, ficou maior, reduziu!")
				divModal.css({
					"width": (maxWidth+20)+"px"
				})
			}
		}
	}
}

E o CSS

.modal {
	position: absolute;
	z-index: 99999;
	display: none;
	background: #fff;
	border: 2px solid #777;
}
.modal_content{
	border: 1px solid #333;
	margin: 5px;
	padding: 5px;
	overflow: auto;
	_height: expression(this.height > 450 ? 450: true);
	max-height: 450px;
}
.modal_content div{
	border: 2px solid blue;
	height: auto;
}
#divMask {
	background-color:#000;
	width: 100%;
	left:0px;
	margin:0px;
	padding:0px;
	position:absolute;
	top:0px;
	z-index:1000;
	opacity:0.8;
	filter:alpha(opacity=80);
	display: none;
}

Como fiz a classe para estudos não utilizei nenhuma imagem e estou publicando sem formatar bonitinho o header do modal (botão para fechar).

Como utilizar

O uso ficou bastante simples, é só iniciar o modal e criar os links que devem abrir. Segue um exemplo da criação de um modal chamado "modal":

$(document).ready(function(){
	var modal = new Modal("modal",true)
	modal.initialize();
});

O código acima acessa a função "initialize" da classe, o primeiro parâmetro (modal) é o nome do seu modal, que pode ser qualquer um. O segundo parâmetro (true) é um boolean, e define se será utilizado a mask para escurecer o fundo do site e destacar apenas o modal ou não.

Os links devem ter o atributo rel igual ao nome do modal que você iniciou (no exemplo de cima, rel="modal") e o atributo href indica qual o conteúdo será exibido no modal (pode ser link externo, link para imagem ou o id de algum elemnto da página atual.

<a href="#" rel="modal">Open modal</a><br />
<a href="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" rel="modal">Open external image</a><br />
<a href="#content" rel="modal">Open div#content content</a><br />
<a href="http://www.andafter.org/" rel="modal">Open external page</a><br />

Conclusão

Gostei da brincadeira, o tempo de desenvolvimento não fui muito longo, comecei no trabalho e terminei em casa, depois fiz alguns ajustes. A biblioteca jQuery é realmente mágica, o código estava bastante curto, pouquíssimas linhas e um modal funcionando.

O código aumentou na medida que comecei a adiconar funcionalidade (identificar o tipo de conteúdo, criar automaticamente as actions para os links com o atributo rel, redimensionar e reposicionar o modal quando a janela é aberta, etc...)

No IE ainda ficou a pendência de fazer o modal diminuir a altura.

Infelizmente estou estudando PHP bem menos que gostaria (em compensação meu estudo com Javascript e jQuery vai à pampa!*), mas aos poucos estou aprendendo e nada melhor do que acompanhar a galera que manja para isso!

Já peguei algumas aulas com o Chris que também está fazendo testes com o framework Code Igniter (que comecei a utilizar por dica do Furst), mas sei que deveria estudar sintaxe antes de brincar com frameworks. Mas quem desenvolve sabe, a afobação é inevitável e ver as coisas funcionando é muito mais legal! :D

Novidades do PHP 5.3

Apresentação do Felipe Ribeiro no PHP - Paraíba.

Apesar de não saber (ainda) como funcionavam (ou se existiam) algumas coisas nas versões anteriores, fiquei feliz com algumas coisas que li, como os slides "lambdas e closures", que lembraram bastante algumas coisas do javascript.

E aos que desenvolvem em PHP fica minha recomendação do blog do Felipe.

* à pampa - satisfeito, ótimo, bom demais.

Eu conhecia a biblioteca de javascript Prototype apenas por documentação e leitura dos posts que o Chris fez por aqui (um passo a passo bem bacana para iniciar o uso da biblioteca), mas até esta semana nunca utilizado ela de verdade.

Comecei a colocar a mão (ui) em um projeto aqui da MMCafé que utiliza a biblioteca, portanto precisei aprender alguma cois, e resolvi documentar minha experiência inicial.

Primeiras impressões sobre Prototype

A biblioteca é bacana, mas aparentemente bem mais complexa que jQuery. Segundo o Chris jQuery tem muitas "funções mágicas", o que pode levar ele a ser menos performático. Não sei, não posso opinar, mas admito que tais funções mágicas facilitam a vida em muitos casos! :D

Ah, essa complexidade pode ser apenas um medo inicial (sair da zona de conforto, né?), então não quero assustar ninguém. Achei a documentação bem boa, mas senti um pouco de falta de alguns exemplos na documentação - nada que uma googleada e alguns blogs não resolvessem.

Seletores

Não vou explicar o funcionamento dos seletores, o post é para expor minha opinião apenas. Para quem conhece jQuery, os seletores funcionam de forma parecida com o jQuery , então achei bastante fácil.

Elements, observe, objects

Sofri! Demorei bem mais tempo do que eu esperava para fazer algumas coisas simples, como setar ações onclick em elementos de determinada classe.

Nesta curta experiência o que me fez sofrer mesmo foi a forma como o Prototype trabalha com os eventos. Aos leitores desenvolvedores (ou apenas curiosos e entusiastas) tenho um post saindodo forno que explica e exemplifica meu problema e minha solução para setar a ação em uma classe inteira de links.

Resumo da obra

Ainda sou mais jQuery pois já estou familiarizado com seus seletores, manipulação de elementos, etc. Também gosto pelo fato da documentação e os diversos blogs com plugins e exemplos de códigos (mas isso não posso comparar pois não procurei blogs específicos sobre Prototype, eles devem existir).

A Prototype não é o bixo de sete cabeças que eu temia, achei a documentação boa, e acredito que a produtividade poder ser equivalente a do jQuery - para quem já conhece o funcionamento da biblioteca e não precisa ficar consultando a documentação a cada 5 minutos, claro.

Continuo achando jQuery mais interessante, mas depois dessa curta experiência estou vendo a Prototype com melhores olhos. :)

Recomendo a leitura

Aí vai uma seleção de posts sobre Prototype já publicados por aqui, quase todos do Chris:

Comparação entre a jQuery e a Prototype

Usando a Prototype - passo 4 - upload de arquivo sem post na tela

Usando a prototype - passo 8 - seletores CSS

Usando a Prototype - passo 3 - arrays e a classe Enumerable

Criar classes em javascript - usando a Prototype

E você, o que prefere?
Prototype, jQuery ou outra biblioteca? Quais os motivos?

Compartilhe sua opinião nos comentários ;)

Por exemplo, imagine o seguinte html:

<select id="meu_select">
   <option value="SP">São Paulo</option>
   <option value="RJ">Rio de Janeiro</option>
   <option value="RS">Rio Grande do Sul</option>
</select>

Com a seguinte implementação javascript (usando jQuery):

$("select#meu_select").change(function() {
   //faz alguma coisa aqui, como uma requisição assíncrona por exemplo
});

Simples, não? Sempre que houver uma mudança no select, será chamadop o bloco de código dentro do change()
Agora, e se você quiser a qualquer ponto do fluxo chamar esse change(), ou simular que o usuário fez uma seleção? Por exemplo, quando a página carrega, você já quer chamar esse bloco para que algo aconteça.
Existe um método no jQuery, trigger, com o qual você pode resolver isso. Simples assim:

$("select#meu_select").trigger("change");

Nesse caso, o método change do elemento select#meu_select é disparado, sem precisar de outras interferências.

Para mais detalhessobre o método e outras formas de usá-lo, visite a documentação oficial.

O que é QR Code?

Se você já sabe o que é QR Code pule essa parte, é apenas uma explicação simples para entender o conceito:

O QR Code (ou Código de Barras em 2D), é uma matriz ou código de barras bi-dimensional, criado pela empresa Japonesa Denso-Wave, em 1994. O QR vem de Quick Response, pois o código pode ser interpretado rapidamente, mesmo com imagens de baixa resolução, feitas por cameras digitais em formato VGA, como as de celulares. O QR Code é muito usado no Japão.

Wikipedia pt

O QR Code permite que você fotografe com um celular um código e acesse automaticamente uma URL, por exemplo. O funcionamento é idêntico ao do código de barras, mas até onde sei código de barras é traduzido apenbas em números, enquanto o QR Code permite passar urls completas :D

Como gerar QR Code com javascript?

Na verdade não vamos codificar uma URL em imagem QR Code, vamos utilizar geradores prontos e utilizar o javascript como ferramenta para solicitar a geração do QR Code e exibir essa imagem em nosso site ou aplicativo web.

$(document).ready(function(){

        // Vamos criar um plugin do jquery chamado qrcode

        (function ($) { 

          $.fn.qrcode = function(url,size) { 

                return "http://chart.apis.google.com/chart?cht=qr&chl=" + urk +"&chs=" + size +"x" + size

          }

        })(jQuery);

        $("body").append("<img src=""+$().qrcode("http://www.andafter.org", "100")+"">");

});

No exemplo acima utilizamos o google para criar o QR Code e é possível escolher o tamanho da imagem (variável size da função).

Mais serviços que criam QR Codes e podem ser utilizados no plugin:

http://go.bath.ac.uk/qr/download?DATA=http://www.andafter.org

http://qrcode.kaywa.com/img.php?s=100&d=http://www.andafter.org

É isso, espero ter ajudado! :)

Leia mais

• QR Code - Wikipédia
• Custom drupal
  

Quando li o post não entendi patavinas, hoje trabalhando com o Chris aqui na MMCafé estou um pouco mais familiarizado com o Velocity, por isso resolvi publicar aqui algumas soluções que estão facilitando minha vida! :D

Como fazer um loop no velocity com array

Primeiro o básico, listar os itens de um array:

#set ($arr= ["flush", "straight", "full house"])
#foreach($item in $arr)
  Mão no poker: $item
#end

Como fazer um loop no velocity com limite numérico

Agora o que achei que seria mais simples, mas demorei um pouco mais para encontrar em posts e documentações pela interwebs, como fazer um loop de N até 3N por exemplo:

#foreach($i in [3..9])
   <li>$i</li>
#end

Pronto, simples assim! Espero ter ajudado quem está começando com o Velocity!

Em tempo, vejam essa programação mágica (POG de primeira) que o Chris publicou lá no blog dele.

Ai, resolvi aproveitar o gancho e mostrar como pode ser feito isso sem o uso de qualquer biblioteca javascript - ou seja, na mão. O código, claro, é mais extenso do que se tivesse sido feito com alguma biblioteca, mas acho que vale no mínimo como referência!

Segue, abaixo, a implementação com os devidos comentários!

<html>
<head>
<title>Manipulação de checkboxes</title>
<script type="text/javascript">
    window.onload = function() {
        //listener para click do checkbox que marca/desmarca todos
        document.getElementById("checkAll").onclick = function() {
            var form = document.getElementById("myForm"); //formulário
            //percorre todos os checkboxes e seta se está ou não checado, conforme o valor do check mandatório
            var checks = form.getElementsByTagName("input");
            for(var i=0; i<checks.length; i++) {
                var chk = checks[i];
                if(chk.name == "dados[]")
                    chk.checked = this.checked;
            }
        }    
    }
</script>
</head>
<body>
<h1>Meu form</h1>
<form action="#" id="myForm">
    <fieldset>
    <input type="checkbox" name="dados[]" />check 1<br />
    <input type="checkbox" name="dados[]" />check 2<br />
    <input type="checkbox" name="dados[]" />check 3<br />
    <input type="checkbox" name="dados[]" />check 4<br />
    <input type="checkbox" name="dados[]" />check 5<br />
    </fieldset>
    marcar todos: <input type="checkbox" id="checkAll" />
</form>
</body>
</html>

Exemplo de uso

Tenho um site com diversos links para a wikipedia e gostaria de aplicar uma classe nos links específicos para a wikipedia. Eu posso colocar a classe para cada link criado, mas vamos supor que eu quero automatizar isso (para aplicar a aregra também em links antigos, por exemplo).

A idéia é eu criar um seletor tipo:

$("a:wikipedia").addClass("wikipedia")

Este seletor não existe no jQuery, então vamos ao objetivo do post: criar um seletor customizado. Para extender (não sei se esta seria a palavra correta) e jQuery e criar um seletor customizado o comando á:

$.expr[":"].nomedoseletor = function(obj){
   //Aqui vão as regras
   //return true inclui o elemento no seletor
   //return false
};

No meu caso, a regra é simples: quero que o seletor procure links que contenham em alguma parte de sua href o link "wikipedia.org". Para a regra resolvi utilizar expressões regulares (ER), e o nome do meu seletor é wikipedia.

Seletor customizado com jquery

Eis o código:

$.expr[":"].wikipedia = function(obj){
   return obj.href.match(/wikipedia.org/);
};

E para chamar o seletor:

$("a:wikipedia").addClass("wikipedia")

O Chris já alertou que isso não deve ser muito performático, mas tenho que dizer: pode ser bastante útil. Neste exemplo fiz um seletor simples, mas as regras podem ser mais complexas: selecionar links internos, links para áreas específicas do seu site para aplicar ícones nos links, selecionar imagens pelo tamanho, elementos com ou sem atributos específicos...

Ainda sobre a performance, recomendo utilizar seletores específicos preferencialmente dentro de ID´s, poe exemplo: $("#content a:wikipedia") e não "globalizar" os apenas quando necessário não deve causar TANTOS problemas, né?

Não realizei nenhum teste de performance com os seletores customizados, testei apenas o códido de exemplo, funcionou certinho. Hoje a noite quando eu estiver em casa publico o exemplo* no diretório de exemplos do O Desenvolvedor! :)

Referência: jQuery howto (recomendo a leitura, vários posts interessantes)

* resolvi postar mesmo sem o exemplo devido a simplicidade do código ;)

Mas, para isso, há a propriedade (sempre digo isso: não confundam com a biblioteca Prototype) prototype do javascript, que possibilita a manipulação de objetos do javascript em runtime, adicionando métodos, por exemplo.

Não vou me dedicar ao funcionamento dessa propriedade, pois já expliquei aqui, então vamos a alguns métodos adicionados a classe Array que podem ser muito úteis:

Bubble Sorte

Array.prototype.sort=function()
  {
      var tmp;
      for(var i=0;i<this.length;i++)
      {
          for(var j=0;j<this.length;j++)
          {
              if(this[i]<this[j])
              {
                  tmp = this[i];
                  this[i] = this[j];
                  this[j] = tmp;
              }
          }
      }
  };

Clear

Array.prototype.clear=function()
  {
      this.length = 0;
  };

Contains

Array.prototype.contains = function (element) 
  {
          for (var i = 0; i < this.length; i++) 
       {
              if (this[i] == element) 
          {
                      return true;
              }
          }
          return false;
  };

Você pode adicionar os métodos que você precisar; tenha certeza que sua produtividade aumentará!

Hoje precisei de uma solução para colocar background intercalados em uma lista criada por javascript (com jQuery), a famosa "lista coloridinha" que auxilia na visualização dos dados. Existem seletores avançados de CSS (even e odd) mas nos meus testes aqui eles não funcionaram no Internet Explorer (6, 7 e 8) e também os seletores (2n) ou :first que funcionam no Firefox porém nada acontece em nenhuma das versões do Internet Explorer.

Resolvi então aplicar uma classe de forma intercaladas nas linhas quando o javascript criava a lista. Para fazer eu tinha alguma ções:
 

1. Ficar setando uma variável para 1 e 0 e fazendo um IF dentro do loop que gera as linhas para conferir se é um ou zero
2. Conferir se o número é 1, 3, 5, 7 (POG, eu sei...)
3. Verificar se o contador (o i do loop) é par ou ímpar

Optei pela última, pois a variável já existia e eu só precisava de um if else para conferir se o número daquela linha era par ou ímpar.

Alex Kid, o rei do par ou ímpar!

Lembra?

Como verificar se um número é par ou ímpar no Javascript?

A lógica simples é: se o resto da divisão por dois for 0, é par. A lógica complicada é: se a unidade final do número for 0,2,4,6 ou 8 é par.

if (i % 2 == 0) {

alert("O número i é par, pois o resto da divisão por dois é igual a zero")

}else{

 alert("Existe resto na divisão por dois, portando o número i é ímpar")

}

Simples, a função "n % 2" retorna o valor do resto da divisão por dois! :D

O erro confirmou: é o 6, né.

E o erro se repetiu a cada vez que eu ia ver a versão dele... o IE estava sendo rodando usando o aplicativo de browsers do Spoon.

Beleza, IE!

Talvez alguns de vocês que me acompanham no twitter (@gserrano) ou acompanham o Chris (@chrisloki) já saibam, mas não moro mais no Rio Grande do Sul (Tchê!) e estou morando a uma semana em São Paulo, trabalhando na MM Café na equipe de interface, trabalhando na equipe do Chris :D

E em uma tarde da semana passada estava eu sugando informações do Chris, que me mandou alguns links sobre Javascript Orientado a Objetos.

Lembrei de um post dele aqui no O Desenvolvedor, que vale a leitura: utilizando Prototype para criar classes em Javascript.

Li os exemplos que o Chris me passou e resolvi colocar em prática, criei um mini-game de jogo de dados. Bom, chamar de "mini-game" é um exagero, criei apenas uma interface e tres "objetos".

Joguinho de dados

O funcionamento é bastante simples, não explicarei a teoria da orientação a objetos, apenas a prática e o código.

Clique para jogar

Utilizei 3 objetos e algumas poucas funções, os objetos são:

• Dado
• Cash
• Fichas

O dado tem uma única função, que se chama jogar. Eis o código dele:

function dado(){

this.lados = 6;

this.valor = 1;

this.joga = function(){

this.valor = getrand(this.lados);

return this.valor;

}

}

Cada dado tem dois valores: número de lados (o padrão é 6) e o valor, utilizado cada vez que ele é jogado. A função "jogar" gera um número randômico de 1 até o número de lados, neste caso de um a seis, retornando o valor jogando e alterando o valor do objeto dado.

Os objetos chips e cash são muito parecidos, apenas armazenam o valor de "dinheiro" ou de "fichas" do jogador, e possuem funções em comum (repeti elas no código, talvez esta não seja a melhor opção), vamos aos códigos:

function chips(){

this.valor = 0;

this.soma = function(x){

this.valor = this.valor + x;

$("#chips").html(this.valor);

}

this.subtrai = function(x){

if(this.valor<x){

$("#feedback").html("<h1>Warning!</h1><br />Você não tem fichas para isso, malandro!")

}else{

this.valor = this.valor - x;

$("#chips").html(this.valor);

}

}

}

function cash(){

this.valor = 0;

this.soma = function(x){

this.valor = this.valor + x;

$("#cash").html(this.valor);

}

this.subtrai = function(x){

if(this.valor<x){

$("#feedback").html("<h1>Warning!</h1><br />Você não tem dinheiro para isso, malandro!")

}else{

this.valor = this.valor - x;

$("#cash").html(this.valor);

}

}

}

A função "subtrai" verifica se o número que será subtraído (das fichas ou do dinheiro) não é maior do que o existente, evitando criar jogadores endividados! :D

Estas poucas linhas são a base de funcionamento do "jogo". Com dois botões e algumas mensagens de feedback, podemos fazer o usuário jogar o dado e apostar e comprr mais fichas, eis o código "onload" da página:

$(document).ready(function(){

//Inicializa, cria dado e cash

var dado1 = new dado();

var u_chips = new chips();

u_chips.soma(100);

var u_cash = new cash();

u_cash.soma(50);

//Quando joga

$("#acao").click(function(){

$("#valor").html("Você jogou " + dado1.joga());

if(dado1.valor <= dado1.lados/2){

u_chips.subtrai(4);

$("#feedback").html("<h2>Perdeu!</h2><br />Você pagou 4 chips para a banca.")

}else{

u_chips.soma(3);

$("#feedback").html("<h2>Ganhou!</h2><br />Você recebeu 3 chips da banca.")

}

});

$("#buy_chips").click(function(){

if(u_cash.valor >= 25){

u_cash.subtrai(25);

u_chips.soma(50);

}else{

$("#feedback").html("<h1 class="red">Warning!</h1><br />Você não tem dinheiro para isso, malandro!")

}

});

});

Quando a página é inicializada, crio um objeto para cada classe (dado, cash, chips) e adiciono as chips e cash (isso vai atualizar a interface automaticamente, devido as funções soma e subtrai).

Quando o usuário clica em jogar, através da função jogar do dado criado, verifico se o númeor é maior ou menor que a metade do valor máximo do dado (o número de lados) e novamente com as funções soma e subtrai, retiro ou adiciono fichas pro usuário.

A função "buy" subtrai do cash e adiciona nas chips.

Simples, prático e fácil de entender!

Veja o exemplo funcionando

Curiosidades

• Demorei mais para explicar o código do que para desenvolver a brincadeira.
• O layout do joguinho foi feito em 15 minutos, com uma busca no SXC e bom uso do CSS.
• O Internet Explorer foi completamente ignorado durante todo o processo
• As expectativas de vitórias são negativas: a banca ganha no longo prazo.

O joguinho está simples, não armazena naada em banco e pode se tornar divertido com "desafios" a outros jogadores, armazenar fichas e cash, integração com o twitter... eu só queria mesmo iniciar a brincadeira, utilizem os códigos a vontade. :)

Quer saber mais sobre javascript orientado a objetos, por quem entende de verdade do que tá falando? Acessa aí:

• Leandro Mercês
• Rogrigo Lazoti
• Julio Greff

Agradecimento ao Chris pelas explicações e referências que me passou :)

No caso, incrivelmente as questões bobas não me atrapalharam, mas quebrei a cabeça quando tinha uma tabela com uma estrutura mais ou menos semelhante a essa (vou suprimir as colunas que não interessam para o problema):

• id: id primário, auto-incremente
• f_id: é uma relação de cada registro com registros de outra tabela. Não é único
• adddate: data do registro
• nome: nome do registro

Minha necessidade era agrupar os registros por esse f_id e retornar a data mais recente de cada grupo.
À princípio estava tentando fazer um SELECT e agrupar por GROUP BY, dando um ORDER BY depois, mas percebi que uma vez usado o GROUP BY nada garante qual é o registro que ele vai usar quando der um ORDER BY.
Vi então que a coisa seria mais séria, e que teria que usar SUBSELECTS... estava quebrando a cabeça e o Alexandre (@kurko) me ajudou após um pedido de SOS pelo twitter, e a seguinte query abaixo me salvou!

SELECT u.f_id, u.nome, ( SELECT adddate FROM usuario AS t WHERE t.f_id=u.f_id ORDER BY t.adddate DESC LIMIT 1) as data FROM usuario AS u GROUP BY u.f_id ORDER BY u.f_id

Espero que seja de utilidade!

Como utilizei apenas o plugin pronto, fiz as alterações necessárias mas não havia realmente trabalhando com o framework. Em um projeto recente em que estou trabalhando, fui procurar uma nova forma de fazer uma navegação com accordion (já havia utilizado um plugin eficiente de jQuery anteriormente) e encontrei novamente com o jQuery UI.

Deixei a preguiça de lado e fui verificar como funcionava o jQuery UI, gostei bastante! Apesar de estar apenas iniciando os estudos pareceu bem fácil de utilizar. 

jQuery UI CSS Framework

Essa foi a única parte que até o momento eu realmente utilize, um completo framework CSS que permite personalização fácil e vem com muitas, MUITAS classes prontas.

No site do jQuery UI existe um gerador de tema, que permite configurar o seu framework de CSS de forma rápida:

Theme Generator (clique para ampliar)

O gerador de temas gera um framework CSS, que facilita no desenvolvimento com o restante dos utilitários.

Existem diversas classes prontas, para:

• Bordas arredondadas
• Overlay ("cobrir" parte da página para destacar determinado conteúdo)
• Interação (hover, focus, etc.)
• Exibição de erro
• Highlight
• Elemento desabilitado

E mais algumas, que ainda não explorei... :)

Falar de CSS me embrou de uma idéia interessante, que instiga algumas boas práticas no desenvlvimento das folhas de estilos: CSS orientado a objetos

 Ah, a parte de 

Interação

Além das facilidades na parte do CSS o framework facilita muito a criação de efeitos de interação.

• Draggable
• Droppable
• Resizable
• Selectable
• Sortable

O melhor de tudo é a simplicidade com a qual funciona tudo, por exemplo para criar um elemento que possa ser arrastado, com apenas uma linha isto é feito:

$("#draggable").draggable();

Para os outros comandos a facilidade é a mesma. Isso associado aos diversos estilos dos temas pode acelerar muito o desenvolvimento de interfaces amigáveis!

Widgets

Mais facilidades com pouco código, existem algumas ferramentas prontas como:

• Accordion
• Datepicker
• Dialog
• Progressbar
• Slider
• Tabs

Testei o accordion, as personalizações possíveis são bacanas! Nos testes que fiz do accordion o funcionamento foi bom em IE (inclusive o 6 - exceto com listas de conteúdo), FF (perfeito) e Chrome (perfeito).

Animação

Os comando apra animação com o jQuery são bastante evoluídos e permitem fazer muita coisa, mas para efeitos padrão de interface o framework de user interface facilita com alguns efeitos prontos e bastante customizaveis:

• Effect
• Show
• Hide
• Toggle
• Color animation
• Add class
• Remove class

Escrevi o post como uma introdução e estímulo aos usuários da biblioteca jQuery para estudar e utilizar a jQuery UI e facilitar ainda mais a vida!

É simples, e a própria explicação do que vamos fazer hjá demonstra o que vamos manipular: a borda do elemento CSS.

Como você faria para criar uma marcação html dessa forma?

Poderia ser criada uma imagem, mas e se você precisar alterar a imagem e o texto várias vezes?

Com o código abaixo, fica fácil; basicamente, deve-se colocar a imagem como background de uma div, e essa div com borda tracejada. O valor ali de cima, fica dentro de um <p>

<div class="stamp">
 <p>99&cent;</p>
</div>

.stamp {
    width: 500px;
    height: 414px;
    background: #fff url(george.jpg) no-repeat;
    border: 12px dashed #1b1a19; }
.stamp p {
    color: #fff;
    margin: 10px 10px 0 0;
    font: bold 60px Georgia, "Times New Roman", Times, serif;
    text-align: right; }

Pronto!

Na semana passada estava conversando sobre CSS aqui no serviço, debatendo o que era melhor:

Opção 1 - Uma classe por elemento

Ao meu ver, este é o modo mais simples de "pensar" CSS. Você pensa na estrutura html do seu site a para cada elemento cria uma classe, quando o elemento se repete você usa a mesma classe.

Por exemplo, você tem um quadro (div) com o topo azul, bordas cinza e área para conteúdo com background branco.

Seu CSS seria:

.quadro_azul{
border: 1px solid #ccc;
background: #fff;
padding: 6px;
}

.quadro_azul h6{
display: block;
background: blue;
}

Para criar um quadro com o header vermelho você precisar duplicar o código do CSS, facilita a vida para atualizar um elemento específico porém dificulta para fazer alterações gerais, como mudar o layout.

Esse método também torna o código mais sujo (e o html levemente mais limpo).

Opção 2 - Classes comuns para diversos objetos

Para mim ainda é um pouco complicado pensar desta forma, uma coisa que temos que ter na cabeça antes de pensar nisso é: um elemento do html pode ter várias classes. Repitam isso.

No mesmo exemplo anterior, você teria um estilo para delimitar TODOS os quadros, por exemplo:

.quadro {
border: 1px solid #ccc;
background: #fff;
padding: 6px;
}
 

 E para setar as outras propriedades, como a cr do cabeçalho definiria classes para isso.

h6 .azul{
display:block;
background:blue;
}

Ou ainda mais amplo:

.azul{background:blue;}

.block{display:block;}

Claro que neste caso não faz muito sentido, porque estamos criando classe para setar uma única propriedade, um "desperdício" de classe por assim dizer.

Mas neste caso utilizamos na div a classe "quadro e no cabeçalho (h6) as classes azul e block.

<h6 class="azul block">Header do quadro</h6>

O que é melhor?

Eu ainda não tenho uma opinião formada sobre qual o melhor caminho a seguir, mas neste momento eu recomendaria o budismo: "siga o caminho do meio".

Ter centenas de classes definindo propriedades vai só complicar a vida do desenvovledor em possíveis manutenções. O CSS vai dicar extenso, montar o html também pois você terá que chamar diversas classes para cada objeto.

Ter uma classe para cada objeto também pode não ser benéfico, a cada nova página você provavelmente vai ter que criar uma nova classe, aumentnado seu CSS sem um bom reaproveitamento de código.

Em ambos, lá se vai a facilidade para alterar layout de um modo REALMENTE rápido.

Graças ao Twitter (saiba o que é o Twitter e como usá-lo) visitei um link que me chamou a atenção, com uma possível buzzword: CSS Orientado a Objetos.

Apesar do nome mimimi, a idéia é realmente interessante. A herança poderia ser bem útil no CSS, mas como o nome diz a "cascata" existe, pensando direito dá para aproveitá-la bem.

Bom, veja a apresentação em slides do conceito, abaixo continuo meus pitacos sobre essas práticas!

Uma coisa que não costumo fazer e tenho certeza que é muito útil é a separação no CSS da estrutura (posicionamento de colunas, menu, header, footer, ad, etc...) da visualização (backgrounds, fontes, bordas, etc.).

Isso facilita a alteração de layout (visual e estrutural) e somado com o reaproveitamento de classes para diversos elementos, a redução do número de classes para elementos bastante similares e outras boas técnicas pode reduzir bastante seu CSS e facilitar o trabalho em equipe!

O que vocês acham da idéia, do nome e da apresentação?

$_POST["nome_do_campo1"], $_POST["nome_do_campo2"], etc...

para retornar os valores dos campos.

Mas, e se você quizer automatizar isso? Por exemplo, se você tem um formulário muito grande, ou esse mesmo formulário é montado dinamicamente dependendo de uma tabela específica de um banco de dados... como fazer?

Simples: $_POST é um array que contém uma série de pares chave/valor com o nome do campo e seu valor, passados por POST no request HTTP. Então, é só percorrer o mesmo com o foreach (como se faz num array normal). Segue um exemplo abaixo, onde se printa a lista de chaves/valores:

<?php
$query_string = "";
if ($_POST) {
  $kv = array();
  foreach ($_POST as $key => $value) {
    $kv[] = "$key=$value";
  }
  $query_string = join("&", $kv);
}
else {
  $query_string = $_SERVER["QUERY_STRING"];
}
echo $query_string;
?>

Como parâmetros, podem ser passadas algumas condições, e uma delas é o nome da categoria em questão. Então, o código seria o seguinte:

get_posts("category_name=nome_da_categoria");

Troque nome_da_categoria pelo nome da categoria em questão.

Um código completo poderia ser:

<?php $postslist = get_posts("category_name=portfolio");

foreach ($postslist as $post) :

   echo $post->post_title;

endforeach;

?>

Este é um post para apresentar algumas novidades que, de certa forma, guiarão minhas publicações por aqui. A primeira é que não vou dar continuidade aos meus estudos com .NET, e estou reduzindo meu trabalho com o ASP clássico. Isso não quer dizer que encerrarei meus posts sobre a linguagem, mas como estou me dedicando a estudar outras, possívelmente me focarei nelas.

Ah, preciso agradecer ao Leo Caseiro, que me disponibilizou um material excelente sobre .NET quando comecei a estudar!

Espero que este artigo ajude a orientar de alguma forma as pessoas que procuram pela manjada questão: "que linguagem é melhor estudar?"

Vamos aos motivos das minhas mudanças...

Porque "desistir" o ASP clássico?

Já fazia algum tempo que eu procurava evoluir, trocar de linguagem de programação, e por isso iniciei meus estudos em .NET. Vamos aos 3 4 motivos que me levaram a "pular fora":

Para aprender alguma coisa nova. E não estou dizendo que sei tudo do ASP, não mesmo. Mas mudar é bom, gosto de mudanças, aprender uma linguagem de programação nova é como começar a estudar um novo idioma, estimula o cérebro, tira noites de sono de uma forma positiva, anima!

Queria mudar porque o ASP está se tornando obsoleto (para muitos, já é) devido a migração para o .NET, que apresenta mais possibilidades e melhor desempenho (dizem, nunca testei realmente).

Comunidade de desenvolvedores muito pequena. Tudo bem que existe o Google, existem fóruns e até uma documentação razoável, mas nada comparado a PHP, por exemplo. Muitas vezes eu quebrava a cabeça para desenvolver determinada funcionalidade, sabendo que em outras linguagens uma centena de desenvolvedores já haviam desenvolvido isso e disponibilizado o código para uso, estudo e alterações.

Dinheiro. Grana. Eu pago licença para utilizar o Windows Server no meu servidor. Eu não consigo bons dll´s gratuitos para manipulação de imagem ou arquivos (pdf´s, planilhas, etc...). Quase tudo é pago, seguindo o "padrão" da tecnologia ASP.

Porque não o .NET?

Alguns dos motivos que me fizeram querer mudar do ASP continuam presentes na linguagem .NET, como por exemplo o custo.

A comunidade de desenvolvedores não ser muito grande (ou não gostar de colaborar com o mundo, indo contra a poderosa e adorada "interwebs").

Motivos pessoais: como eu comentei, estou de emprego novo, e por aqui o .Net não é utilizado (pelo menos até onde eu sei).

Porque escolhi o PHP?

Pra ser cool.

O primeiro motivo, obviamente, a linguagem aberta, gratuita. Vou economizar um dinheiro considerável por mês pelo simples fato de não precisar pagar licença do Windows no servidor. Isso será a longo prazo, somente depois que eu migrar meu sistema todo de Intranet para o PHP, que vai levar possivelmente mais do que seis meses...

Para ficar do lado negro da força!*

Comunidade gigantesca de desenvovledores e melhor, que adoram compartilhar conhecimentos. A documentação é maravilhosa.

Linguagem ainda em desenvolvimento (agora o PHP 5, estou certo?), sem a necessidade de "extensões" como os dll´s que já me perturbaram no ASP.

Já tinha um conhecimento superficial sobre a linguagem, foi com ela me inseri no mundo do desenvolvimento criando meu primeiro blog e CMS, lá no meu tempo de guri...

Comecei a estudar loucamente MVC, nunca vi um framework gratuito e funcional para ASP, já me indicaram diversos (e aparentemente muito bons) para o PHP!

É isso... a partir de agora não se assustem se surgir por aqui alguns posts "PHP for dummies", e aceito sugestões de artigos também, viu?

* o título deste artigo é graças ao tweet do @cleiverrr, quando anunciei meus estudos com o PHP: "lol @gserrano está vindo pro lado negro da força! =D"

• faça um select na tabela de usuários, retornando todos os ids
• percorra a lista de ids, retornando cada usuário relativo a esse id
• faz um if para checar o user_level. É ele que define o perfil do usuário

O código seria:

<?php
            $aUsersID = $wpdb->get_col( $wpdb->prepare("SELECT $wpdb->users.ID FROM $wpdb->users ORDER BY %s ASC", ""));
            foreach ( $aUsersID as $iUserID ) :
                $user = get_userdata( $iUserID );
                if($user->user_level==2) { //2 é o user_level para contribuidor
                    //faz o que for necessário com o objeto $user
                }
            endforeach;
?>



Pelo que pude ver da estrutura da base do Wordpress, que eu ainda estou conhecendo, há uma tabela wp_users que tem os usuários e uma outra, wp_usermeta, de metadados. Não entendi porque user_level não faz parte da wp_users pois está ligado diretamente ao usuário (será que nas primeiras versões não existia esse campo e depois criaram como um metadado?), mas certamente um inner join poderia resolver mais elegantemente essa questão.

function ValidarCPF(Objcpf){
    var cpf = Objcpf.value;
    exp = /.|-/g
    cpf = cpf.toString().replace( exp, "" );
    var digitoDigitado = eval(cpf.charAt(9)+cpf.charAt(10));
    var soma1=0, soma2=0;
    var vlr =11;
    for(i=0;i<9;i++){
        soma1+=eval(cpf.charAt(i)*(vlr-1));
        soma2+=eval(cpf.charAt(i)*vlr);
        vlr--;
    }   
    soma1 = (((soma1*10)%11)==10 ? 0:((soma1*10)%11));
    soma2 = (((soma2+(2*soma1))*10)%11);
   
    if(cpf == "11111111111" || cpf == "22222222222" || cpf ==
"33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf ==
"66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf ==
"99999999999" || cpf == "00000000000" ){
        var digitoGerado = null;
    }else{
        var digitoGerado = (soma1*10) + soma2;
    }

    if(digitoGerado != digitoDigitado){
       return false;
    }
    return true;
}

O código é simples:

<ul>
<?php
/**/
$years = $wpdb->get_col("SELECT DISTINCT YEAR(post_date) FROM $wpdb->posts WHERE post_status = "publish" AND post_type = "post" ORDER BY post_date DESC");
foreach($years as $year) :
?>
	<li><a href="<?php echo get_year_link($year); ?> "><?php echo $year; ?></a>

		<ul>
		<?	$months = $wpdb->get_col("SELECT DISTINCT MONTH(post_date) FROM $wpdb->posts WHERE post_status = "publish" AND post_type = "post" AND YEAR(post_date) = "".$year."" ORDER BY post_date DESC");
			foreach($months as $month) :
			?>
			<li><a href="<?php echo get_month_link($year, $month); ?>"><?php echo date( "F", mktime(0, 0, 0, $month) );?></a></li>
			<?php endforeach;?>
		</ul>
	</li>
<?php endforeach; ?>
</ul>

Com isso, será exibido um menu mais ou menos assim

2009

• Maio
• Abril
• Março
• Fevereiro
• Janeiro

2008

• Dezembro
• Novembro

Uma das funcionalidades mais necessárias no PHP é criar uma thumbnail (miniatura) de uma imagem - e certamente é uma das primeiras coisas que alguém que começa a programar em PHP e precisa fazer com imagens, tem a necessidade.

Segue abaixo a função que eu uso - há anos. Não foi desenvovida por mim, achei ela no Google anos atrás, e sei que ela se popularizou!

<?php
   //imagem original
    $source_image = "spork.jpg";

   //altura máxima
    $thumb_height = 40;

    //prefixo da miniatura
    $thumb_prefix = "thumb_";

   //qualidade - vai de 0 a 100
    $quality = 100;

   //checa se imagem existe
   if(!file_exists($source_image)) {
      echo "Imagem não encontrada";
   } else {
       //tipos suportados (jpg, png, gif, etc...)
        $supported_types = array(1, 2, 3, 7);

        //retorna informações da imagem
        list($width_orig, $height_orig, $image_type) = getimagesize($source_image);

        //checa se é um tipo suportado
        if(!in_array($image_type, $supported_types)) {
            echo "Tipo não suportado de imagem: " . $image_type;
        }
        else
        {

           //nome da imagem
            $path_parts = pathinfo($source_image);
            $filename = $path_parts["filename"];

            //calcula as proporções
            $aspect_ratio = (float) $width_orig / $height_orig;

            //calcula a largura da thumb baseada na altura
            $thumb_width = round($thumb_height * $aspect_ratio);
 
            //detecta o tipo de arquivo
            $source = imagecreatefromstring(file_get_contents($source_image));

            //cria canvas
            $thumb = imagecreatetruecolor($thumb_width, $thumb_height);

            imagecopyresampled($thumb, $source, 0, 0, 0, 0, $thumb_width, $thumb_height, $width_orig, $height_orig);
           //destrói, para liberar memória
            imagedestroy($source);
 
            //cria thumb baseada no tipo da imagem
            switch ( $image_type )
            {
                case 1:
                    imagegif($im, $fileName);
                    $thumbnail = $thumb_prefix.$filename . ".gif";
                    break;

                case 2:
                    $thumbnail = $thumb_prefix.$filename . ".jpg";
                    imagejpeg($thumb, $thumbnail, $quality);
                    break;

                case 3:
                    imagepng($im, $fileName);
                    $thumbnail = $thumb_prefix.$filename . ".png";
                    break;

                case 7:
                    imagewbmp($im, $fileName);
                    $thumbnail = $thumb_prefix.$filename . ".bmp";
                    break;
            }
        }
    }
?>

Uma verdadeira mão na roda!

O que é possível fazer com a API do Analytics?

Com a API significa que você pode ter acesso a TODOS os dados disponíveis no Analytics de um aplicativo terceirizado ou desenvolvido por você, ou em sites de terceiros. Para o meu caso pensei em duas aplicações.

1. Exibir relatórios para os clientes em interface própria

Atualmente eu trabalho com aplicativos web e com CMS próprio (GS Intra), porém nunca desenvolvi um sistema de estatísticas para ele por dois motivos principais relacionadas ao Analytics:

• Gratuito
• Não utiliza recursos do meu servidor
• Superioridade técnica ao que eu poderia desenvoler

Com o uso da API será possível que eu centralize em um só aplicativo o gerenciamento do conteúdo, dos clientes e estatísticas do site de meus clientes. Não preciso mandar o cliente para um site externo para que ele visualize as estatísticas. Facilita para o cliente, é obviamente é melhor para o desenvolvedor, que agrega mais funcionalidade e valor ao sistema.

2. Acompanhar impacto de mudanças no site

Eu tenho sérios problemas para acompanhar o impacto das alterações realizadas no And After. Por exemplo, adiciono um elemento de navegação visando aumentar o tempo médio de visita dentro do site no dia 27 de abril.

Preciso de um log, onde eu adicione nesta data todas as alterações feitas para que posteriormente eu colete informações do "antes e depois". Utilizei por algum tempo o Excel para fazer isso, mas era praticamente no CTRL+C e CTRL+V para mesclar dados do Buscapé, AdSense e Analytics em uma mesma tabela, além das datas das modificações.

Agora é possível eu tem um banco de dados com todas as alterações realizadas em no site (como o exemplo do elemento de navegação) e mesclar com os dados que serão importados da API, facilitando a criação do "antes e depois" das alterações de forma automática. 

Quando (e se) a API do AdSense for liberada então, ficará show. Em um único aplicativo será possível medir o impacto de mudanças nas visitas e rendimentos de um site. 

Ta aí a dica para um aplicativo que eu utilizaria. haha :)

Saiba mais sobre a API do Analytics em

Blog oficial do Google Analytics

Google Code Analytics

Javascript

Java

O que já existe desenvolvido?

Polaris

Até o momento testei um aplicativo desktop, o Polaris. Ele utiliza a plataforma (plataforma?) Adobe Air, e a versão free é extremamente simples de usar.

Apresenta diversas informações em uma pequena janela com uma interface bastante intuitiva. 

Confira algumas telas do Polaris , o  analytics desktop:

Recomendo! 

Mobile

Não testei, mas no blog oficial do Analytics recomendaram uma aplicação Android do Analytics.

Assim que eu fizer testes com a ferramenta publicarei os resultados e programações aqui no O desenvolvedor, se você já desenvolveu alguma coisa ou quer compartilhas suas idéias pode publicar um artigo ou comentar. :)

Por padrão ela já vem instalada desde a versão 4.3 do PHP, e com ela é possível desde criar imagens do 0, escrevendo textos, usando filtros de opacidade, até criar miniaturas de outras imagens ou, ainda mesclar as mesmas, criando mosaicos e afins, com saídas em formato jpg, png, e por aí vai. As possibilidades são infinitas, e ficam a disposição e necessidade de quem for implementar.

Abaixo segue o exemplo clássico de uso mais simples da biblioteca: criar uma imagem com largura e altura definida, com um texto no miolo dela.

<?php

function createImageWithText($width, $height, $txt) {

       //cria uma imagem com largura x altura definida pelo usuário
        $im = imagecreatetruecolor($width, $height);
        //aloca as cores para imagem
        $text_color = imagecolorallocate($im, 233, 14, 91);
        //escreve o texto na imagem
        imagestring($im, 1, 5, 5,  $txt, $text_color);
       
        //inicia buffer
        ob_start();
        // cria imagem de saída, formato jpeg, bom 85% de qualidade
        imagejpeg($im, NULL, 85);
        //captura saída para string
        $contents = ob_get_contents();
        //finaliza captura
        ob_end_clean();
        //libera memória
        imagedestroy($im);
        //escreve arquivo em disco, usando os comando básicos do PHP
        $fh = fopen("temp/img2.jpg", "w+" );
            fwrite( $fh, $contents );
        fclose( $fh );

   
    }

   createImageWithText(400, 200, "meu texto");

?>

Em breve farei outros posts a respeito!

Com ele você pode parar o fluxo que está acontecendo exibindo uma caixa de diálogo - na qual a mensagem exibida é passada como parâmetro para esse comando - na qual o usuário tem a opção de escolher entre Sim e Não (ou Ok e Cancelar, dependendo do browser). Quando o usuário faz a seleção, o comando retorna true ou false, o que possibilita que o fluxo seja alterado.

Um exemplo de uso:

if(confirm("Deseja realmente fazer isso?")) {
  //faz algo, como chamar uma função que apaga dados
} else {
  alert("Ok, você não quer mesmo fazer isso...");
}

Simples e prático!

Com poucos arquivos a distribuição acontece tranquilamente, os arquivos são movidos para a pasta de cada usuário, cada usuário recebe uma notificação por e-mail com o link para a área de login do sistema com acesso aos arquivos. Porém todo o servidor tem um limite para execução de scripts e muitas vezes simplesmente aumentar esse limite de tempo de execução não é recomendável, pois se alguma coisa der errado (como um loop infinito) vai ficar sobrecarregndo o servidor.

Isso sim é organizar os documentos em pastas

Começaram a acontecer problemas quando existiam muitos arquivos para mover, pois além da listagem de todos os arquivos o sistema segue uma lógica para identificar de qual usuário é cada arquivo para que a distribução seja feita de forma correta.

A solução para não retornar o erro de limite de tempo excedido e não aumentar loucamente este limite (o usuário certamente vai achar que deu erro quando uma página demorar demais para carregar) foi limitar o número de arquivos movimentados por vez, isso permite dar um feedback entre a "paginação" evitando que o usuário pense que o aplicativo travou ou deu erro e clique repetidamente em botões da interface. Eles gostam disso.

Segue uma parte da solução que adotei.

Como contar quantos arquivos tem em uma pasta utilizando o FSO?

Quando procurei informações de como contar quantos arquivos existiam em uma pasta a maioria envolvia um loop por todos os arquivos, e isso me lembrou minha experiência com POG: Não programe isso!

Twittei para ver se alguém conhecia uma solução melhor do que um loop, @chrisloki, @cleiverrr e @alinedecampos responderam com idéias/sugestões, não achei nenhuma documentação completa do FSO (ok, só dei uma googleada básica) mas resolvi testar algumas coisas como UBound (para pegar o índica mais alto de uma array) e depois um count.

O UBound não funciona, o array de arquivos não pode ser tratado como um normal, mas existe o comando COUNT no FSO, segue abaixo o script para contar quantos arquivos existem em uma pasta:

dirtowalk = "../web_users/gssolutions/arquivos/"

Set fs = CreateObject("Scripting.FileSystemObject")

Set f = fs.GetFolder(server.mappath(dirtowalk))

Set fc = f.Files

total = fc.count

response.write "Total de arquivos na pasta " & dirtowalk & ": " & total

É isso aí, um simples .count no "array" de arquivos retorna o número de arquivos dentro da pasta. Caso existam subpastas, você teria que criar um loop para ir navegando e somando os arquivos dentro de cada subpasta...

Mais funcional e elegante do que um "For Each arquivo In fc"!

Obrigado a todos os que ajudaram e responderam meus pedidos de socorro no twitter, espero ter ajdado também! :)

Um caso que acontece muito pode ser simulado nesse exemplo que segue: um formulário com dois campos e uma rotina que executa a soma dos valores dos dois campos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exemplo de soma</title>
<script type="application/javascript">
    window.onload = function() {
        document.getElementById("calcular").onclick = function() {
            var val1 = document.getElementById("campo1").value;
            var val2 = document.getElementById("campo2").value;
            alert(val1 + val2);
        }
    }
</script>
</head>
<body>
<h1>Soma - exemplo</h1>
<form action="#" method="post">
    <label for="campo1">campo 1:</label><input type="text" id="campo1" />
    <label for="campo1">campo 2:</label><input type="text" id="campo2" />
    <input type="button" id="calcular" value="calcular" />
</form>
</body>
</html>

Faça um teste preenchendo os inputs com valores numéricos, e clique no botão de calcular. Se você preencher com, por exemplo, 5 e 3, ao clicar no botão terá um alert() com o valor 53.
O que aconteceu? O interpretador do javascript entende que são strings (textos), e a soma que ele faz é, na verdade, uma concatenação das strings.

Como resolver isso?

Existe um comando nativo do javascript, eval(param), que recebe um parâmetro e o interpreta. Mude a linha que faz a soma para

alert(eval(val1) + eval(val2));

E você verá que a soma, que antes era uma concatenação, vai ser feita da forma esperada: somando realmente os valores.

Mas, fica o alerta: usar o comando eval() deve sempre ser muito bem analisado se vale a pena. Uma vez que ele interpreta qualquer comando que está em uma string, você acaba abrindo o seu código para ser executado por terceiros.

Num próximo post mostro como fazer essa soma de uma forma mais elegante!

Muito bem, voltando ao assunto vou explicar o contexto do meu problema, eu tinha um link que era impresso em Javascript, e precisava adicionar o atributo onClick nele, que ficaria no resultado final assim:

onClick="funcao(´var1´,´var2´)"

Mas no Javascript, se eu fosse usar um document.write ou qualquer outro método de alguma biblioteca (jQuery, no meu caso) quando eu utilizasse a aspa simples automaticamente estaria fechando a string (não sei se string é o correto para o que eu quero definir, sorry) do Javascript, ou seja, estaria "cortando" a minha linha que seria exibida no código pela metade.

Uma pesquisa rápida em fóruns e encontrei a solução: você precisa utilizar uma barra invertida (lembrouexpressões regulares, utiliza a barra para transformar o próximo caracter em "normal"), então ficaria assim no Javascript:

document.write("onClick="funcao(´var1´,´var2´)" ")

Antes das duas aspas VERMELHAS você deve inserir uma barra invertida, não consegui exibir ela aqui pois o sistema de publicação "engole" as barras (depois irei verificar).

Utilizei o document.write apenas como exemplo da possibilidade de uso, no meu caso utilizei as barras invertidas em um $("#link123").html("onClick....") sem problema nenhum.

Uma dica simples que para quem trabalha com Javascript não deve ser novidade, mas lembro de ter tido problemas com isso em um passado distante, como tive o mesmo problema agora resolvi fazer o post para ajudar quem pode precisar (e evitar ter que googlear novamente este mesmo problema).

Dúvidas, dicas e críticas nos comentários :)