iMasters InterCon 2007

Embora com quase uma semana de atraso, preciso postar a respeito do maior evento de internet do Brasil. O qual estive presente nos dias 26 e 27 de outubro.

Eventos da magnitude do iMasters InterCon 2007 é uma ótima oportunidade de estarmos em contato com os melhores profissionais da área, com aquelas pessoas que até então só conhecíamos via internet, diante de novas idéias e de conteúdo relevante.

Por falar em novas idéias, essa edição do iMasters InterCon foi inovadora; o evento utilizou-se do poder dos blogs, microblogs – a febre do momento, da cobertura de blogueiros, e de um excepcional apresetador: Luli Radifahrer, o qual dispensa comentários a respeito.

No evento ainda foi realizado o sorteio da promoção que criei para vocês. E abaixo estão as fotos dos sortudos. Parabéns a vocês.

iMasters InterCon 2007 - Giuliano Saito

iMasters InterCon 2007 -Kleber Villa

O primeiro sortudo, Giuliano Saito, ganho três cursos de minha autoria: Dreamweaver + PHP + MySQL; Web Sits com Ajax e o lançamento Curso Interativo Adobe Dreamweaver CS3. Já o segundo, Cleber Villa, ganhou R$ 100,00 em compras na TI Shop e levou pra casa dois livros: Desenvolvendo Websites com PHP e XHTML 1.0 – Guia de referência para desenvolvimento na web.

Adorei o iMasters InterCon 2007, foi excelente. Fico no aguardo da edição de 2008. E você compareceu ao evento? Comente aí.

Disponível a versão 0.1.1 da classe PHP W3_Image

Hoje, ao escrever um post sobre como utilizar a classe PHP W3_Image encontrei um bug no método filter da referida classe.

Caso fosse utilizado o método filter sem utilizar o método set_image_name encadeado a ele, gerava um erro, uma vez que o método filter não tinha um nome para aplicar a imagem que recebeu o filtro. Mas isso foi corrigido, e agora você pode utilizar o método filter em conjunto ou não ao método set_image_name.

Baixe a versão 0.1.1 da classe PHP W3_Image.

Como utilizar a classe W3_Image

Em um artigo anterior apresentei a vocês a classe PHP W3_Image. Neste post, iremos conhecê-la com mais detalhes, descobrindo todo seu potencial. Vamos lá.

Em todos os métodos da W3_Image é preciso informar a imagem que será utilizada. Afinal, ela precisa saber com quem vai lidar. Porém, podemos simplificar este processo, evitando a necessidade de se informar a imagem toda vez que um método for utilizado.

Há duas formas de fazermos isto: através do construtor da classe ou do método set_image. Vejamos:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image('fotos/planeta.jpg');
$objImg->set_image('http://static.php.net/www.php.net/images/php.gif');
?>

No exemplo acima, instanciamos a classe W3_Image e em seguida utilizamos o método set_image. Em ambos os casos, estamos informando uma imagem, e distintas uma da outra. Porém a imagem informada através do método set_image irá sobrepor a imagem informada pelo construtor da classe. Note que em ambos os casos, posso informar à classe a imagem que será utilizada.

Veremos agora como obter informações básicas de uma determinada imagem.

Como obter o mime-type de uma imagem

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image('fotos/planeta.jpg');
$objImg->set_image('http://static.php.net/www.php.net/images/php.gif');
echo $objImg->get_mime_type(); // Irá exibir image/gif
?>

Podemos simplificar; assim:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image;
echo $objImg->get_mime_type('http://static.php.net/www.php.net/images/php.gif'); // Irá exibir image/gif
?>

Como obter a extensão de uma imagem

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image('http://static.php.net/www.php.net/images/php.gif');
echo $objImg->get_extension(); // Irá exibir gif
?>

Embora seja necessário informar uma imagem, este processo é muito flexível, fique atento a esse detalhe nos exemplos de uso demonstrados.

Como obter a largura e altura de uma imagem

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image('http://static.php.net/www.php.net/images/php.gif');
$arrSizes = $objImg->get_sizes(); // Irá retornar um Array
print_r($arrSizes); // Irá imprimir Array ( [0] => 120 [1] => 67 [width] => 120 [height] => 67 )
?>

O método get_sizes da W3_Image retorna um Array super flexivo com a largura e altura da imagem. Tal Array pode ser acessado através dos índices 0 e 1 que retornam a largura e altura, respectivamente. Ou através de associações: width e height. Falei flexível?

Como obter somente a largura ou altura de uma imagem

Enquanto o método get_sizes retorna um Array com a largura e altura, o método get_sizex retorna a largura e o get_sizey retorna a altura. Intuitivo?

Exemplo de uso:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image('http://static.php.net/www.php.net/images/php.gif');
echo $objImg->get_sizex(); // Irá exibir 120
echo $objImg->get_sizey(); // Irá exibir 67
?>

Como obter a largura e altura de uma imagem formatados para serem utilizados em uma tag IMG do HTML

É simples, veja só:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image('http://static.php.net/www.php.net/images/php.gif');
echo $objImg->get_attr(); // Irá exibir width="120" height="67"
?>

Como exibir uma imagem no browser

Através do método show da W3_Image é possível exibir uma imagem no navegador com seu mime-type correto. Este método ainda finaliza a execução do script. Veja um exemplo de uso:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image('http://static.php.net/www.php.net/images/php.gif');
$objImg->show(); // Irá exibir a imagem; logo do PHP
?>

Como forçar o download de uma imagem

Muitas pessoas tem dúvidas de como exibir a janela do navegador para que seja possível fazer o download de uma imagem. Utilizando a W3_Image é super simples. Observe:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image('http://static.php.net/www.php.net/images/php.gif');
$objImg->download(); // Irá forçar o download da imagem; logo do PHP
?>

Como salvar uma imagem ou como fazer upload de uma imagem

Fazer upload de uma imagem ou salvá-la é muito, mas muito simples. Através do método save da W3_Image você pode salvar a imagem onde e como desejar. Observe:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image;
$imgTmp = $_FILES['image']['tmp_name'];
$objImg->save($imgTmp); // Irá salvar a imagem no diretório atual.
$objImg->save($imgTmp,'fotos/mamae.jpg'); // Irá salvar a imagem no diretório fotos como o nome mame.jpg
?>

Eu disse que é simples?

Como excluir uma imagem

Para excluir, deletar, remover uma imagem de um diretório, use o método delete. E pronto.

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image;
$objImg->delete('fotos-familia/sogra.jpg'); // Irá excluir a imagem da sogra. Coitada?
?>

Como criar uma imagem

É possível criar uma imagem a partir de uma outra já existente. Para isso, utilizamos o método create da W3_Image.

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image;
$imgTmp = $_FILES['image']['tmp_name'];
$objImg->create($imgTmp,400,300,'upload/foto.jpg',85); // Irá criar uma imagem...
?>

No exemplo acima, fizemos o seguinte: informarmos ao método create que iremos utilizar a imagem armazenada na variável $imgTmp para criarmos uma nova a partir dela; sendo que a imagem a ser criada terá no máximo 400 pixels de largura, 300 de altura, será salva no diretório upload, como o nome foto.jpg e terá 85% de qualidade aplicada sobre ela. Se esse último parâmetro não for informado, o valor padrão 75% é levado em consideração.

Como rotacionar uma imagem

Informe a imagem e a quantidade de graus a girá-la, que o método rotate da W3_Image faz o restante. Veja:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image;
$objImg->rotate('fotos-familia/sogra.jpg',180); // Irá girar a foto da sogra a 180 graus.
?>

Como aplicar filtros, efeitos em uma imagem

Através do método filter da W3_Image, podemos aplicar diversos tipos de efeitos em uma imagem, como por exemplo: negativo, tons de cinza, detectar bordas dentro da imagem, “emboss”, “gaussianblur”, “selectiveblur”, brilho, contraste, tons de sépia, entre outros.

Alguns efeitos não necessitam de informações adicionais para serem aplicados, apenas diga qual efeito e pronto. Outros precisam de informações para saberem como irão trabalhar. Vejamos alguns exemplos:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image;
$objImg->filter('foto.jpg','negate'); // Aplicar um filtro negativo
$objImg->filter('foto.jpg','grayscale'); // Aplicar um filtro de tons de cinza
$objImg->filter('foto.jpg','sepia'); // Aplicar um filtro de tom de sepia
$objImg->filter('foto.jpg','brightness',30); // Aplicar 30 de brilho sobre a imagem
?>

Observe os demais tipos de filtros na documentação da W3_Image.

Como utilizar e qual a vantagem do método set_image_name da W3_Image

O método set_image_name da W3_Image é muito útil ao se trabalhar com os métodos rotate e filter, uma vez que ao utilizá-lo a imagem original é mantida e uma nova é criada com o efeito aplicado. Exemplo:

<?php
require_once 'class/W3_Image.class.php';
$objImg = new W3_Image;
$objImg->set_image_name('foto-negativa.jpg')->filter('foto.jpg','negate'); // Exemplo de uso do método set_image_name
?>

Ao utilizar o método set_image_name observe que utilizamos um encademanto de métodos, ou chaining (recurso conhecido entre aqueles quem utilizam a jQuery).

Ufa, finalizamos vários exemplos de uso de como utilizar a classe PHP W3_Image. Faça testes, envie-me seu feedback, consulte a documentação e até breve.

Um abraço.

W3_Image PHP class

W3_Image é uma classe em PHP que utilizo para realizar diversas operações com imagens via PHP. A partir de hoje, ela será pública, e poderemos discutir a respeito de suas funcionalidades.

Embora ela esteja imatura, em sua versão 0.1, julgo um momento adequado para apresentá-la. Uma vez que quanto mais pessoas a utilizam, novas possibilidades de uso surgem, bugs são encontrados, recursos são questionados e com isso ela vai amadurecer e definir sua personalidade.

O principal objetivo é que ela seja simples, com uma linha de aprendizagem super baixa e que seus métodos sejam intuitivos. Quando eu programo, gosto de conversar com os códigos, por isso julgo que todos scripts, classes e afins devem ser intuitivos, para que o nosso bate-papo não seja unilateral.

Por exemplo, com os métodos da W3_Image o que se deve ter em mente ao utilizar seus métodos é o seguinte: o quê (neste contexto, qual recurso a ser aplicado); quem/qual (neste contexto, qual imagem); como (neste contexto, quais os parâmetros).
Como disse que ela ainda está imatura, não significa que ela não dispõe de recursos interessantes. Com a W3_Image é possível:

  • Obter o mime-type de uma imagem;
  • Obter a extensão de uma imagem;
  • Obter suas dimensões, ou uma dimensão específica: largura ou altura;
  • Exibir uma imagem;
  • Força o download de uma imagem;
  • Salvar uma imagem;
  • Renomear uma imagem;
  • Excluir uma imagem;
  • Criar imagem;
  • Rotacionar uma imagem;
  • Aplicar filtros numa imagem;

Em versões futuras virão novos recursos, como: marca d’água, corte, desenhos, legendas, “flip”, redimensionar, log de erros, entre outros.

Faça o download da versão 0.1 da W3_Image, consulte sua documentação e aguarde por novos posts abordando seus métodos.

Lançado versão 0.3 do jQuery lightBox plugin

A versão 0.3 do jQuery lightBox plugin ganhou melhorias, novas opções de configuração, suporte a vários idiomas e correção de bugs.

Nesta versão, reestruturei todo o código visando melhoria de performance e tornando possível a utilização do jQuery lightBox plugin em páginas que utilizam outras bibliotecas JavaScript, se não a jQuery.

O suporte a vários idiomas era esperado e nesta versão tal suporte se concretizou. Os textos utilizados no jQuery lightBox plugin, até o momento, aparem na contagem das imagens a serem exibidas. Por exemplo: Image 3 of 21. Ou seja, exibindo a terceira imagem de 21 no total. Agora, você pode utilizar os textos em português, por exemplo. Utilizando para isso os parâmetros relacionados a essa configuração. Observe:

$(function() {

 $('#galeria_de_fotos a').lightBox({

 	txtImage: 'Imagem',

 	txtOf:	'de'

 });

});

O resultado será: Imagem 3 de 21.

Outros opções de configuração foram disponibilizadas e todas elas podem ser consultadas na página do jQuery lightBox plugin. Consulte também o changelog e verifique o “release” completo desta versão.

Validar radio buttons com jQuery

Existem por aí diversos plugins para a jQuery com a finalidade de validar formulários. Porém, hoje precisei apenas validar um grupo de radio buttons, e vi que não havia necessidade de tantos kbytes para este propósito.

Recorri ao Google, como de praxe, a procura de alternativas de como validar radio buttons com jQuery. Encontrei soluções complexas e muitas delas não exploravam todo o poder da jQuery. O que me levou a criar uma forma simples e prática de validar radio buttons com jQuery. Veja:

var boolValid = false;
$('#frm-forma-pg input:radio').each(function() {
	if ( $(this).is(':checked') ) {
		boolValid = true;
	}
});

A solução é simples. Criei uma variável, boolValid, e defini seu valor como falso. Em seguida, selecionei todos os campos input do tipo radio, input:radio, que estão dentro de um determinado formulário. Utilizei o each para fazer um loop entre eles; dentro do loop utilizei o método is da jQuery para verificar se o campo foi selecionado (checked), se tiver sido, a variável boolValid ganha o valor verdadeiro.

O restante eu deixo com vocês, que preciso voltar ao trabalho. Lembre-se que esta solução pode ser modificada para tornar-se mais dinâmica e genérica. Como não precisei no momento, não me preocupei em criar algo do gênero.