Código do arquivo config.php

Código do arquivo create.php

Código do arquivo update.php

Código do arquivo delete.php

Código do arquivo read.php

O primeiro passo é criar um arquivo javascript. Uma sugestão de nome é jquery.{nome do plugin}.js, então no meu caso vou nomear o arquivo jquery.watermark.js.

Várias bibliotecas/frameworks de javascript dão ao símbolo $ uma função especial, e isotp não é diferente para jQuery, então o primeiro passo é evitar que este conflito ocorra. Para isso devemos iniciar nosso plugin com uma função anônima autoexecutável, passando o parâmetro jQuery e transformando-o em $, como no código abaixo.

(function($){
//Todo o código que compõe o plugin deve ficar aqui.
})(jQuery);

Em seguida devemos mencionar que estamos iniciando um plugin, então escrevemos o seguinte

(function($){

	$.fn.watermark = function(){
		//Aqui vem os parâmetros e as funções que compõem o plugin.
	}

})(jQuery);

Agora devemos decidir se nosso plugin terá parâmetros ou não. Neste caso eu adicionarei alguns parâmetros, são eles:

1. corMarcaDagua
2. estiloMarcaDagua
3. corTexto
4. estiloTexto
5. valorPadrao

estes parâmetros me darão a cor e o estilo da marca d’água, a cor e o estilo do texto que é digitado, e o valor padrão do input ou textarea que não tiver valor especificado.

(function($){

	$.fn.watermark = function(parametros){
		//Aqui vem os parâmetros e a funções que compõem o plugin.
	}

})(jQuery);

A variável parâmetros será um objeto passado para o plugin. Caso o usuário não passe nenhum valor o plugin deve estar preparado para usar valores padrões, por isso crio um objeto que será usado para este fim.

(function($){

	$.fn.watermark = function(parametros){
		var padroes = {
				 corMarcaDagua    : '#bbbbbb'
				,estiloMarcaDagua : 'italic'
				,corTexto         : '#000000'
				,estiloTexto      : 'normal'
				,valorPadrao      : 'pesquisar...'
			}

			//O plugin continua aqui...
	}

})(jQuery);

O plugin deve usar os valores padrões caso o usuário não passe nenhum valor, mas caso seja passado o plugin deve usar os valores do usuário. Para isto acontecer devemos estender os valores padrões e mescla-los com os valores do usuário. Abaixo vê-se como criar chegar a este fim

function($){

	$.fn.watermark = function(parametros){
		var  padroes = {
				 corMarcaDagua    : '#bbbbbb'
				,estiloMarcaDagua : 'italic'
				,corTexto         : '#000000'
				,estiloTexto      : 'normal'
				,valorPadrao      : 'pesquisar...'
			}

		padrao = $.extend({},padroes,parametros);

		//O plugin continua aqui...
	}

})(jQuery);

A função $.extend() tem 3 parâmetros. O primeiro é um objeto vazio, o segundo é a variável com os padrões do plugin, e o terceiro é o objeto passado pelo usuário. Repare como a variável padrao agora se torna os parâmetros que o usuário passar, ou assume os valores padrões que criamos, caso o usuário não passe nada.

O próximo passo é criar a(s) função(s) que deve ser executada para CADA(each) elemento que for atingido com o seletor de jQuery.

(function($){

	$.fn.watermark = function(parametros){
		var padroes = {
				 corMarcaDagua    : '#bbbbbb'
				,estiloMarcaDagua : 'italic'
				,corTexto         : '#000000'
				,estiloTexto      : 'normal'
				,valorPadrao      : 'pesquisar...'
			}

		padrao = $.extend({},padroes,parametros);

		return this.each(function(){
			//Todos os elementos que forem atingidos com
			//o seletor do jQuery sofrerão com o que vier
			//aqui dentro.
		});

	}

})(jQuery);

Repare que usei return antes de this.each(). Isto não é estritamente necessário, mas é altamente recomendável, para que nosso plugin permita chaining no jQuery.

No começo eu disse que o plugin seria limitado a inputs do tipo texto e textarea, porém o plugin ainda não sabe da minha intenção, então tenho que dizer explicitamente que quero isso. em jQuery usamos o método is() para descobrir com qual elementos estamos trabalhando.

(function($){

	$.fn.watermark = function(parametros){
		var padroes = {
				 corMarcaDagua    : '#bbbbbb'
				,estiloMarcaDagua : 'italic'
				,corTexto         : '#000000'
				,estiloTexto      : 'normal'
				,valorPadrao      : 'pesquisar...'
			}

		padrao = $.extend({},padroes,parametros);

		return this.each(function(){

			if($(this).is('input:text') || $(this).is('textarea') ){
				//Aqui ficarão as ações que serão executadas
				//em todos os input's e textarea's que forem
				//atingidos com nosso seletor de jQuery
			}

		});

	}

})(jQuery);

Repare que filtrei os inputs do tipo texto somente escrevendo ‘:text’, mas eu poderia alternativamente usar a sintaxe de CSS input[type=text].

até este momento usei o elemento $(this) mais de uma vez, então é uma boa ideia usar uma variável que tenha o mesmo valor dele, para armazena-lo em cache e tornar nosso script mais rápido. Vou chamar a variável de $elemento, para ficar claro que ele representará cada elemento. Também coloco um cifrão no começo, para que fique claro que estou mexendo com um objeto do jQuery.

(function($){

	$.fn.watermark = function(parametros){
		var padroes = {
				 corMarcaDagua    : '#bbbbbb'
				,estiloMarcaDagua : 'italic'
				,corTexto         : '#000000'
				,estiloTexto      : 'normal'
				,valorPadrao      : 'pesquisar...'
			}

		padrao = $.extend({},padroes,parametros);

		return this.each(function(){

			$elemento = $(this);

			if($elemento.is('input:text') || $elemento.is('textarea') ){
				//Aqui ficarão as ações que serão executadas
				//em todos os input's e textarea's que forem
				//atinigidos com nosso seletor de jQuery
			}

		});

	}

})(jQuery);

Quando iniciamos o plugin queremos que o valor padrão que aparece nos input’s e textarea’s esteja na forma de marca d’água, então devemos dar a ele a cor de marca d’água e o estilo de marca d’água. Para isso usamos o método css() em todos os elementos usando a variável $elemento.

(function($){

	$.fn.watermark = function(parametros){
		var  padroes = {
				 corMarcaDagua    : '#bbbbbb'
				,estiloMarcaDagua : 'italic'
				,corTexto         : '#000000'
				,estiloTexto      : 'normal'
				,valorPadrao      : 'pesquisar...'
			}

		padrao = $.extend({},padroes,parametros);

		return this.each(function(){

			$elemento = $(this);

			if($elemento.is('input:text') || $elemento.is('textarea') ){

				$elemento.css({
					 color     : padrao.corMarcaDagua
					,fontStyle: padrao.estiloMarcaDagua
				});

			}

		});

	}

})(jQuery);

Em seguida temos de descobrir uma maneira de guardar os valores padrões dos input’s e textarea’s. Escolhi guarda-lo no atributo rel, que será criado dinamicamente com o script.
Caso o input tenha um valor no HTML, o usaremos, caso contrário usaremos o que será passado ao plugin pelo usuário, se nada for passado usaremos o padrão do plugin(‘pesquisar…’).

(function($){

	$.fn.watermark = function(parametros){
		var  padroes = {
				 corMarcaDagua    : '#bbbbbb'
				,estiloMarcaDagua : 'italic'
				,corTexto         : '#000000'
				,estiloTexto      : 'normal'
				,valorPadrao      : 'pesquisar...'
			}

		padrao = $.extend({},padroes,parametros);

		return this.each(function(){

			$elemento = $(this);

			if($elemento.is('input:text') || $elemento.is('textarea') ){

				$elemento.css({
					 color     : padrao.corMarcaDagua
					,fontStyle : padrao.estiloMarcaDagua
				});

				vall = ($elemento.val() != '')?$elemento.val():padrao.valorPadrao;

				$elemento.val(vall).attr('rel',vall); 

				//O plugin continua aqui...

			}

		});

	}

})(jQuery);

Repare que o que vem após vall =(linha 25) nada mais é do que um if/else no modo compacto. O que vem antes da interrogação é a condição. o que vem entre os dois pontos e a interrogação é o valor retornado se a condição for verdadeira, e o que q vem depois dos dois pontos é o valor retornado se a condição for falsa. Nesse caso vall vai ser igual ao valor do elemento que está no HTML caso haja algum valor ($element.val() é diferente de vazio), e vall será igual ao valor passado pelo usuário ou o valor padrão do plugin, caso nenhum valor seja passado direto no HTML. Na linha 27 esse valor é passado para o elemento, e em seguida para o atributo rel.

Agora devemos criar a parte onde indicamos o que deve ocorrer quando o usuário entra ou sai do input/textarea. Primeiro vou criar a parte que indica o que deve ocorrer quando o usuário ENTRA no input/textarea.

Para não ficar reescrevendo todo o script, vou mostrar somente a parte onde há a interação com os elementos. Para indicar a ação de entrada no input/textarea usamos o evento focus, e nesta entrada executamos uma função.

$elemento.focus(function(){

});

Quando estamos dentro do focus o $(this) indica o elemento quando está entrando em foco, então não podemos confundir com o $(this) usado anteriormente. Para facilitar o entendimento vou criar uma variável chamada $elementoEmFoco e direciona-la ao $(this).

$elemento.focus(function(){
	$elementoEmFoco = $(this);
});

Quando entramos no input/textarea sempre haverá um valor assinalado (no tutorial em vídeo não me atentei a este detalhe, e acabei escrevendo uma parte redundante no código), e estamos seguros disto pois quando escrevermos o código para quando o cursor sair do input/textarea colocaremos um valor no mesmo. Então quando entramos queremos ter a cor e o estilo do texto do usuário, o que é criado nas linhas 3-6

$elemento.focus(function(){
	$elementoEmFoco = $(this);
	$elementoEmFoco.css({
		 color:padrao.corTexto
		,fontStyle:padrao.estiloTexto
	});
});

Por fim, se quando entrarmos no elemento ele tenha o valor igual ao que foi guardado no atributo rel, queremos que esse valor desapareça e que o input/textarea fique vazio, para que o usuário possa digitar seu texto.

$elemento.focus(function(){
	$elementoEmFoco = $(this);
	$elementoEmFoco.css({
		 color:padrao.corTexto
		,fontStyle:padrao.estiloTexto
	});

	if($elementoEmFoco.val() == $elementoEmFoco.attr('rel')){
		$elementoEmFoco.val('');
	}

});

Terminada a ação executada quando entramos no input/textarea temos de criar a ação que será executada quando sairmos do mesmo. Para isso usamos o método blur(). Inicialmente faremos o mesmo que fizemos anteriormente, executaremos uma função assim que sairmos do input/textarea, e criaremos uma variável que será igual ao $(this), que neste caso indica o elemento quando está saindo de foco.

$elemento.blur(function(){
	$elementoForaDeFoco = $(this);
});

Se quando sairmos do input/textarea seu valor seja igual a vazio ou seu valor seja igual ao valor do atributo rel, queremos que ele seja tratado como uma marca d’água, então ele deve ter a cor e o estilo da marca d’água.

$elemento.blur(function(){
	$elementoForaDeFoco = $(this);
	if($elementoForaDeFoco.val() == '' || $elementoForaDeFoco.val() == $elementoForaDeFoco.attr('rel')){
		$elementoForaDeFoco.css({
	 		 color     : padrao.corMarcaDagua
			,fontStyle : padrao.estiloMarcaDagua
		});
	}
});

Além disso queremos que o valor volte a ser o valor padrão do input/textarea caso o mesmo esteja vazio ou tenha o valor igual ao valor do atributo rel, então incluimos uma linha de código dentro do if.

$elemento.blur(function(){
	$elementoForaDeFoco = $(this);
	if($elementoForaDeFoco.val() == '' || $elementoForaDeFoco.val() == $elementoForaDeFoco.attr('rel')){
		$elementoForaDeFoco.css({
	 		 color     : padrao.corMarcaDagua
			,fontStyle : padrao.estiloMarcaDagua
		});

	$elementoForaDeFoco.val($elementoForaDeFoco.attr('rel'));

	}
});

O plugin termina aqui. Farei somente uma modificação no código, que é inicializar todas as variáveis no início do documento. Esta prática não é estritamente necessária, porém particularmente eu gosto de fazer assim. A seguir está todo o plugin, incluindo essas modificações que fiz.

(function($){

	$.fn.watermark = function(parametros){
		var  padrao
			,vall
			,$elemento
			,$elementoEmFoco
			,$elementoForaDeFoco
			,padroes = {
				 corMarcaDagua    : '#bbbbbb'
				,estiloMarcaDagua : 'italic'
				,corTexto         : '#000000'
				,estiloTexto      : 'normal'
				,valorPadrao      : 'pesquisar...'
			}

		padrao = $.extend({},padroes,parametros);

		return this.each(function(){

			$elemento = $(this);

			if($elemento.is('input:text') || $elemento.is('textarea') ){

				$elemento.css({
					 color     : padrao.corMarcaDagua
					,fontStyle: padrao.estiloMarcaDagua
				});

				vall = ($elemento.val() != '')?$elemento.val():padrao.valorPadrao;
				$elemento.val(vall).attr('rel',vall); 

				$elemento.focus(function(){
					$elementoEmFoco = $(this);
					$elementoEmFoco.css({
						 color:padrao.corTexto
						,fontStyle:padrao.estiloTexto
					});

					if($elementoEmFoco.val() == $elementoEmFoco.attr('rel')){
						$elementoEmFoco.val('');
					}

				});

				$elemento.blur(function(){
					$elementoForaDeFoco = $(this);
					if($elementoForaDeFoco.val() == '' || $elementoForaDeFoco.val() == $elementoForaDeFoco.attr('rel')){
						$elementoForaDeFoco.css({
					 		 color     : padrao.corMarcaDagua
							,fontStyle : padrao.estiloMarcaDagua
						});

					$elementoForaDeFoco.val($elementoForaDeFoco.attr('rel'));

					}
				});

			}

		});

	}

})(jQuery);

O plugin ,do jeito que está, tem 1565 bytes de tamanho, o que em princípio é considerado pequeno, porém é sempre uma boa ideia diminuir o máximo possível o tamanho dos arquivos que serão incluídos nas páginas. O próprio framework jQuery apresenta uma versão minimizada.

Para criar essa versão usarei um compressor chamado YUI Compressor. Este compressor comprimi arquivos de javascript e CSS. O primeiro passo é baixar o compressor, e para isso você deve ir à página de download e baixa-lo. Baixei a única versão disponível na data de criação deste tutorial 2.4.2.
Primeiro você deve extrair a pasta zipada para uma pasta de sua escolha, eu escolhi a pasta que meu plugin está. Em seguida você deve jogar o plugin pra dentro da pasta build, que está dentro da pasta yuicompressor-x.y.z(no meu caso x=2, y=4 e z=2). Eu não gosto de jogar meu arquivo diretamente, eu faço uma cópia e coloco a mesma lá dentro, para evitar que, por qualquer motivo, meu arquivo seja danificado.

Para executar o compressor você deve acessar a pasta onde os arquivos estão localizados, o modo mais simples é copiando o endereço (no meu caso é o destacado na imagem acima). Agora você deve abrir o prompt de comando, caso você esteja usando Windows vá em Iniciar>Executar(start>Run) , digite cmd e pressione ok.

Um prompt de comando surgirá na tela. digite cd “{endereço do arquivo em java e plugin}”, incluindo as aspas e pressione Enter. no meu caso digitarei:

cd "C:\Users\Eduardo\My Documents\Aptana Studio Workspace\watermark\yuicompressor-2.4.2\build"

Neste momento você deve estar na pasta onde seus arquivos estão. para criar o arquivo comprimido do plugin executamos o seguinte comando: java -jar {nome do arquivo em java da pasta}.jar {nome do arquivo a ser comprimido}.js -o {nome do arquivo de saída}.js. No meu caso ficou da seguinte maneira

java -jar yuicompressor-2.4.2.jar jquery.watermark.js -o jquery.watermark.min.js

Em poucos instantes um arquivo é criado na pasta, chamado jquery.watermark.min. O tamanho dele é 679 bytes, 56,6% menor que o arquivo original. Mas tome CUIDADO para não descartar o arquivo original! Sempre que você quiser modificar seu plugin, é nele que você vai mexer, e no fim você comprimi dinovo.

Para testar o seu plugin crie uma página em HTML como a seguinte

<!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>
		<style type="text/css">
			input,textarea{display:block;}
		</style>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Watermark Plugin</title>
	</head>
	<body>
		<input type="text" />
		<input type="text" value="nome"/>
		<input type="text" value="email"/>
		<textarea rows="7" cols="25">Digite sua mensagem</textarea>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.watermark.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('input,textarea').watermark();
		});
	</script>
	</body>
</html>

Não se esqueça que o arquivo minimizado deve estar na mesma página do documento em HTML para que o endereço do atributo src, e também não esqueça que o framework jQuery deve ser adicionado antes de todos os arquivos que contenham jQuery. Nesse caso em específico adicionei os scripts no fim da página(imediatamente antes do término do body), mas poderia ter sido no head.

Para executar o plugin selecionei todos os input’s e textarea’s da página (poderia selecionar somente uma parte) e executei o comando watermark(). Você pode modificar os valores padrões, e para isso basta escrever o objeto como parâmetro, da seguinte maneira

$(document).ready(function(){
	$('input,textarea').watermark({
		 corMarcaDagua:'#abc'
		,estiloMarcaDagua:'normal'
		,corTexto:'green'
		,estiloTexto:'italic'
		,valorPadrao:'digite seu texto...'
	});
});

Abra a página novamente e teste. Você verá que os estilos foram mudados, além do texto marca d’água que aparece nos input’s/textarea’s que não tem valor. Você não é obrigado a passar todos os valores, mas somente aqueles que interessam ser mudados.

Você pode testar o resultado final, ou baixar os arquivos, nos links abaixo:

Preview Online
Baixar Arquivos

Preview Online
Baixar Arquivos

Em primeiro lugar devemos criar a estrutura necessária para que nosso aplicativo possa viver. Para isso criei um arquivo chamado expand.html, que será responsável pela estruturação do código, um arquivo chamando expand.css, que será responsável pelo visual de uma maneira geral, e um arquivo chamado expand.js, que será responsável pelos efeitos, além da pasta com as imagens que serão usadas no menu.

Começando pelo começo, nada é mais importante que o arquivo HTML, então vamos à ele.
a estrutura básica para iniciar o projeto é vista a seguir (repare como o framework jQuery já está carregado através da tag script):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>expandindo menu com jQuery</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	</head>
	<body>

	</body>
</html>

Em seguida precisaremos de uma lista, onde cada item representará um item do menu.
dentro de cada item teremos uma imagem, um título e uma descrição.

		<ul id="expand">
			<li>
				<img src="drupal.jpg" alt="" width="80" height="80" />
				<h2>Drupal</h2>
				<p>Drupal is a free and open source[1] Content Management System (CMS) written in PHP. It is used as a back-end system for many different types of websites, ranging from small personal blogs to large corporate and political sites. It is distributed under the GNU GPL.</p>
			</li>
			<li>
				<img src="expressionengine.jpg" alt="" width="80" height="80" />
				<h2>Expression Engine</h2>
				<p>EllisLab is a software developer based in Bend, Oregon which develops applications written in PHP. The company is privately owned and has to date accepted no venture capital funding of any kind. Since the company's founding in January 2002.</p>
			</li>
			<li>
				<img src="frog.jpg" alt="" width="80" height="80" />
				<h2>Frog CMS</h2>
				<p>Frog CMS is an open source content management system originally developed by the company Philippe Archambault. The design decision taken from its start was to use PHP5 as the language for the software, along with a MySQL database backend, although it also has support for SQLite (version 3). It is a port of the Ruby on Rails CMS known as Radiant, although Frog has begun to take its own development direction.</p>
			</li>
			<li>
				<img src="joomla.jpg" alt="" width="80" height="80" />
				<h2>Joomla!</h2>
				<p>Joomla! is a content management system platform for publishing content on the World Wide Web and intranets as well as a Model-view-controller (MVC) Web Application Development framework. The system includes features such as page caching to improve performance, RSS feeds, printable versions of pages, news flashes, blogs, polls, website searching, and language internationalization. It is written in the PHP programming language and uses the MySQL database system to store information. Joomla is the result of a fork of Mambo. Released under the terms of the GNU General Public License, Joomla is free software.</p>
			</li>
			<li>
				<img src="magento.jpg" alt="" width="80" height="80" />
				<h2>Magento</h2>
				<p>Magento is an Open Source ecommerce web application launched on March 31, 2008. It was created by Varien, building on components of the Zend Framework. Magento is available under the Open Software License version 3.0. Since version 1.1.7 some parts are licensed under the Academic Free License version 3.0. Magento Enterprise Edition, a paid for version of Magento aimed at larger companies, was launched on April 15, 2009.</p>
			</li>
			<li>
				<img src="modx.jpg" alt="" width="80" height="80" />
				<h2>MODx</h2>
				<p>MODx is a free, open source content management system and web application framework for publishing content on the world wide web and intranets. MODx is licensed under the GPL. MODx is written in the PHP programming language and uses the MySQL database.</p>
			</li>
		</ul>

Feito isso devemos estilizar nosso trabalho, então é hora de visitar o arquivo expand.css.
as instruções linha a linha são a seguinte:

1. Zerar margin e padding de todos os elementos, além das bolinhas padrão que vem nas listas
2. Dar um tamanho à div que será usada mais afrente.
3. Dar uma cor de fundo à página
4. Mostrar o menu na horizontal e dimensioná-lo, a fim de mostrar todo o conteúdo de todos os itens, além de dar um visual legal pra cada item.
5. Estilizar a imagem e flutua-la para a esquerda, assim o título e a descrição podem fluir em volta dela.
6. Estilizar a descrição. Repare que a propriedade margin-left é igual à distância do texto à extrema esquerda de seu pai, e isso serve para que o mesmo não flua para baixo da imagem.
7. Estilizar o título.
8. Dar background rosa aos itens pares da lista.
9. Dar background verde aos itens impares da leta.

*{margin:0;padding:0;list-style:none;}
div{overflow:hidden; width:450px;}
html{background:#ccc;}
#expand li{float:left;width:390px;height:170px;margin:2px;overflow:hidden;border:1px solid #555;-moz-border-radius:10px;-webkit-border-radius:10px;}
#expand img{border:3px solid #686;background: #aaa;padding:3px;float:left;margin:3px 5px;}
#expand p{font:normal normal normal 11px/1.4 arial,sans-serif;float:none;padding:3px 12px 0 5px;margin:5px 0 0 102px;}
#expand h2{font:bold italic normal 15px/1 georgia,serif;margin:3px 0 0 108px;}
#expand li:nth-child(even){background: #dff;}
#expand li:nth-child(odd){background: #fdf;}

Repare que as duas últimas linhas são formadas por propriedades presentes somente em CSS3, mas são reconhecidas em todos os navegadores modernos (ou seja, Firefox, Safari, Chrome e Opera). Por último devemos criar o efeito usando jQuery. Abrindo arquivo expand.js, o primeiro que devemos fazer é iniciar o jQuery.

$(document).ready(function(){

});

O segundo passo é criar uma div que vai envolver todo o conteúdo dos itens. Esta parte é importante para que o texto não flua quando o item expandir e retrair.

$('#expand li').wrapInner('<div>');

Em seguida usamos jQuery para diminuir todos os itens, e mostrar somente a imagem.

$('#expand li').css({
		 width:  '102px'
		,height: '100px'
	});

Cada item tem uma altura diferente, e para podermos expandir uma altura suficiente para mostrar todo o conteúdo devemos primeiro conhecer a altura do maior deles, então um loop é criado para rodar todos as divs e pegar a maior altura encontrada

	var alturaMax = 100;

	$('#expand li div').each(function(){
		alturaDiv = $(this).height();
		if(alturaDiv > alturaMax){
			alturaMax = alturaDiv;
		}
	});

A seguir vem a animação em si

$('#expand li').hover(/*mouse em cima*/,/*mouse saindo*/);

Quando o mouse estiver em cima, queremos expandir o item para 450px de largura e para a altura do maior dos itens, mas somente depois de parar o que estava fazendo.

$('#expand li').hover(function(){
		$(this).stop().animate({
			 width:  '450px'
			,height: alturaMax + 5 + 'px'
		});
	},/*mouse saindo*/);

Quando o mouse deixa o item, queremos que o mesmo pare o que estiver fazendo e volte a animar retornando à posição inicial

$('#expand li').hover(function(){
		$(this).stop().animate({
			 width:  '450px'
			,height: alturaMax + 5 + 'px'
		});
	},function(){
		$(this).stop().animate({
			 width:  '102px'
			,height: '100px'
		});
	});

Nesse ponto o script já funciona e faz exatamente o que queremos, mas bons programadores sempre retornam ao seu código e tentam o tornar melhor. O arquivo criado, apesar de funcionar, apresentam um monte de más práticas quando se diz respeito a javascript, e a seguir tentaremos contornar esses problemas.

A primeira parte que devemos notar é que o seguinte fragmento do código é chamada inúmeras vezes

$('#expand li')

Chamadas por elementos do DOM são demasiadamente penosas em javascript, e como fazemos estas chamadas várias vezes usando jQuery, nosso script acaba se tornando bastante lento. Para solucionar este problema devemos armazenar todos as chamadas em cache, mas só faz sentido fazer isso caso esta chamada seja feita mais de uma vez. O mesmo deve ser feito com a variável $(this), porém nesse caso elas são chamadas somente uma vez em cada loop, então não se deve tocar nelas. Corrigindo este problema, nosso código fica da seguinte maneira

$(document).ready(function(){

	var $item = $('#expand li');

	$item.wrapInner('<div>');

	$item.css({
		 width:  '102px'
		,height: '100px'
	});

	var alturaMax = 100;

	$item.children('div').each(function(){
		alturaDiv = $(this).height();
		if(alturaDiv > alturaMax){
			alturaMax = alturaDiv;
		}
	});

	$item.hover(function(){
		$(this).stop().animate({
			 width:  '450px'
			,height: alturaMax + 5 + 'px'
		});
	},function(){
		$(this).stop().animate({
			 width:  '102px'
			,height: '100px'
		});
	});
});

Um passo adicional que podemos tomar é usar o que é conhecido em javascript como chaining. Isto significa aplicar seguidas funções sem sair de um contexto. Talvez fique mais claro no código abaixo

$(document).ready(function(){

	var $item = $('#expand li');
	var alturaMax = 100;

	$item.wrapInner('<div>')
		 .css({
		 width:  '102px'
		,height: '100px'
	  })//não se usa ';' aqui, para que os métodos possam ser acorrentados
	  	.children('div').each(function(){
		alturaDiv = $(this).height();
		if(alturaDiv > alturaMax){
			alturaMax = alturaDiv;
		}
	 })//não se usa ';' aqui, para que os métodos possam ser acorrentados
		.hover(function(){
		$(this).stop().animate({
			 width:  '450px'
			,height: alturaMax + 5 + 'px'
		});
	},function(){
		$(this).stop().animate({
			 width:  '102px'
			,height: '100px'
		});
	});
});

Neste momento o script já está bem mais rápido, e agora podemos criar mais um efeito onde a altura do item será animado o suficiente para mostrar todo o seu conteúdo, então se o item tiver pouco conteúdo a sua altura expandirá pouco ou não expandirá, e caso o item tenha bastante conteúdo a sua altura expandirá o necessário para que mostre todo o texto.

Para este efeito devemos descobrir a altura da div quando passamos o mouse por cima do item (repare que comentei o código que não será mais usado e modifiquei a variável que dá a altura do item da lista) .

$(document).ready(function(){

	var $item = $('#expand li');
	var alturaMax = 100,altura;

	$item.wrapInner('<div>')
		 .css({
		 width:  '102px'
		,height: '100px'
	  })//não se usa ';' aqui, para que os métodos possam ser acorrentados
//	  	.children('div').each(function(){
//		alturaDiv = $(this).height();
//		if(alturaDiv > alturaMax){
//			alturaMax = alturaDiv;
//		}
//	 })
		.hover(function(){
		altura = $(this).children('div').height();
		$(this).stop().animate({
			 width:  '450px'
			,height: altura + 5 + 'px'
		});
	},function(){
		$(this).stop().animate({
			 width:  '102px'
			,height: '100px'
		});
	});
});

Abaixo está o conteúdo de todos os arquivos criados.

xHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>sem t&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;iacute;tulo</title>
		<link type="text/css" href="expand.css" rel="stylesheet"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="expand.js"></script>
	</head>
	<body>
		<ul id="expand">
			<li>
				<img src="imagens/drupal.jpg" alt="" width="80" height="80" />
				<h2>Drupal</h2>
				<p>Drupal is a free and open source[1] Content Management System (CMS) written in PHP. It is used as a back-end system for many different types of websites, ranging from small personal blogs to large corporate and political sites. It is distributed under the GNU GPL.</p>
			</li>
			<li>
				<img src="imagens/expressionengine.jpg" alt="" width="80" height="80" />
				<h2>Expression Engine</h2>
				<p>EllisLab is a software developer based in Bend, Oregon which develops applications written in PHP. The company is privately owned and has to date accepted no venture capital funding of any kind. Since the company's founding in January 2002.</p>
			</li>
			<li>
				<img src="imagens/frog.jpg" alt="" width="80" height="80" />
				<h2>Frog CMS</h2>
				<p>Frog CMS is an open source content management system originally developed by the company Philippe Archambault. The design decision taken from its start was to use PHP5 as the language for the software, along with a MySQL database backend, although it also has support for SQLite (version 3). It is a port of the Ruby on Rails CMS known as Radiant, although Frog has begun to take its own development direction.</p>
			</li>
			<li>
				<img src="imagens/joomla.jpg" alt="" width="80" height="80" />
				<h2>Joomla!</h2>
				<p>Joomla! is a content management system platform for publishing content on the World Wide Web and intranets as well as a Model-view-controller (MVC) Web Application Development framework. The system includes features such as page caching to improve performance, RSS feeds, printable versions of pages, news flashes, blogs, polls, website searching, and language internationalization. It is written in the PHP programming language and uses the MySQL database system to store information. Joomla is the result of a fork of Mambo. Released under the terms of the GNU General Public License, Joomla is free software.</p>
			</li>
			<li>
				<img src="imagens/magento.jpg" alt="" width="80" height="80" />
				<h2>Magento</h2>
				<p>Magento is an Open Source ecommerce web application launched on March 31, 2008. It was created by Varien, building on components of the Zend Framework. Magento is available under the Open Software License version 3.0. Since version 1.1.7 some parts are licensed under the Academic Free License version 3.0. Magento Enterprise Edition, a paid for version of Magento aimed at larger companies, was launched on April 15, 2009.</p>
			</li>
			<li>
				<img src="imagens/modx.jpg" alt="" width="80" height="80" />
				<h2>MODx</h2>
				<p>MODx is a free, open source content management system and web application framework for publishing content on the world wide web and intranets.</p>
			</li>
		</ul>
	</body>
</html>

CSS

*{margin:0;padding:0;list-style:none;}
div{overflow:hidden; width:450px;}
html{background:#ccc;}
#expand li{float:left;width:390px;height:220px;margin:2px;overflow:hidden;border:1px solid #555;-moz-border-radius:10px;-webkit-border-radius:10px;}
#expand img{border:3px solid #686;background: #aaa;padding:3px;float:left;margin:3px 5px;}
#expand p{font: normal normal normal 11px/1.4 arial,sans-serif;padding:3px 12px 0 5px;margin:5px 0 0 102px;}
#expand h2{font:bold italic normal 15px/1 georgia,serif;margin:3px 0 0 108px;}
#expand li:nth-child(even){background: #dff;}
#expand li:nth-child(odd){background: #fdf;}

jQuery

/**
 * @author http://tutorial-city.net/
 */

$(document).ready(function(){

	var $item = $('#expand li');
	var alturaMax = 100;

	$item.wrapInner('<div>')
		 .css({
		 width:  '102px'
		,height: '100px'
	  })
	  	.hover(function(){
		altura = $(this).children('div').height();
		$(this).stop().animate({
			 width:  '450px'
			,height: altura + 5 + 'px'
		});
	},function(){
		$(this).stop().animate({
			 width:  '102px'
			,height: '100px'
		});
	});
});

O resultado final pode ser visualizado no link abaixo.

Preview Online
Baixar Arquivos

Espero que tenha aprendido bastante com este tutorial, e sinta-se à vontade para comentar e acrescentar ao que foi passado. Abraços e até a próxima!

]]> http://tutorial-city.net/web/criando-menu-expansivel-com-jquery/feed/ 18 noNeste tutorial você vai aprender a criar um menu que se expande usando jQuery. Preview Online Baixar Arquivos Em primeiro lugar devemos criar a estrutura necessária para que nosso aplicativo possa viver. Para isso criei um arquivo chamado expand.html, queNeste tutorial você vai aprender a criar um menu que se expande usando jQuery. Preview Online Baixar Arquivos Em primeiro lugar devemos criar a estrutura necessária para que nosso aplicativo possa viver. Para isso criei um arquivo chamado expand.html, que será responsável pela estruturação do código, um arquivo chamando expand.css, que será responsável pelo visual de uma [...]web, css, javascript, jquery, xhtmlhttp://tutorial-city.net/web/criando-menu-expansivel-com-jquery/ http://feedproxy.google.com/~r/tutorial-city/XDvR/~3/AdUT14GwXC8/ http://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtmlcss-parte-3/#comments Sat, 22 Aug 2009 14:58:55 +0000 Tutorial City http://tutorial-city.net/?p=405 Nesta terceira, e última, parte mostro como corrigir os bugs do internet explorer, para que o site possa ser visto “igualmente” em todos os navegadores. Felizmente dentro de alguns anos esse processo não será mais necessário, mas enquanto isso não acontece nós ainda devemos compensar para os navegadores mais antigos e fora dos padrões.



Downlaod dos arquivos criados

]]> http://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtmlcss-parte-3/feed/ 16 noNesta terceira, e última, parte mostro como corrigir os bugs do internet explorer, para que o site possa ser visto “igualmente” em todos os navegadores. Felizmente dentro de alguns anos esse processo não será mais necessário, mas enquanto issoNesta terceira, e última, parte mostro como corrigir os bugs do internet explorer, para que o site possa ser visto “igualmente” em todos os navegadores. Felizmente dentro de alguns anos esse processo não será mais necessário, mas enquanto isso não acontece nós ainda devemos compensar para os navegadores mais antigos e fora dos padrões. Downlaod dos [...]web, css, desenvolvimento, tableless, xhtmlhttp://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtmlcss-parte-3/ http://feedproxy.google.com/~r/tutorial-city/XDvR/~3/hYMpCl1zE_U/ http://tutorial-city.net/web/meu-tema-do-aptana/#comments Fri, 21 Aug 2009 01:17:26 +0000 Tutorial City http://tutorial-city.net/?p=391 Não lembro ao certo quando comecei a usar o Aptana Studio, mas desde que comecei eu gostei muito dessa IDE, não só pelo fato de ser gratuita, mas também pelo fato de ser super poderosa e altamente customizável.

Várias pessoas já me perguntaram onde eu peguei meu tema atual, um tema escuro. A verdade é que eu peguei um tema escuro (dark theme) e fiz algumas modificações que me agradavam.

O endereço do tema base que eu usei é o seguinte: http://gueschla.com/labs/green-chaud/

Caso você queira baixa-lo e fazer suas própria modificações, fique à vontade, mas caso queira usar o mesmo tema que eu estou usando, você pode basta fazer o download no link seguinte: Aptana – Tema Escuro

O arquivo acima está comprimido. Quando descomprimi-lo verá que existe uma pasta, e dentro desta pasta haverá vários arquivos, que são os temas de cada linguagem (como pode-se ver pelo nome). Para instalar você precisa fazer o seguinte: Primeiro abra o Aptana, e em seguida vá até o menu Window e execute o comando Preferences.



Em seguida clique na pequena seta que fica ao lado de Aptana, e depois em editors.



Nesse momento você deverá ver várias opções de linguagens. Começando por CSS, clique na pequena seta que fica ao seu lado, e em seguida clique em Colors.



No painel do lado direito, clique em Import, e importe o arquivo chamado CSS.col (um dos arquivos que estavam comprimidos).



Faça este mesmo procedimento para HTML, Javascript, e XML. Para PHP tem de se tomar cuidado, pois existem duas opções, Colors:PHP e Colors:PHPDoc, a opção a ser escolhida deve ser Colors:PHP, e em seguida o processo é idêntico aos anteriores.



Assim que finalizar você clica em Ok na parte inferior da tela que se abriu, e seus temas já estarão ativos.



Caso queira retornar ao tema padrão, basta clicar em Restore Defaults.
Você também pode brincar modificando as cores a seu bel prazer, então vai ficar exatamente como você quer.

Espero que este tema seja útil para você. Não se esqueça que qualquer dúvida pode ser postada aí em baixo.
Abraços e até a próxima!

]]> http://tutorial-city.net/web/meu-tema-do-aptana/feed/ 10 http://tutorial-city.net/web/meu-tema-do-aptana/ http://feedproxy.google.com/~r/tutorial-city/XDvR/~3/KTS9ZYbsc_A/ http://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtml-css-parte-2/#comments Sat, 15 Aug 2009 12:06:30 +0000 Tutorial City http://tutorial-city.net/?p=356 Nesta parte faço todo o design com CSS, e como bônus ainda mostro algumas técnicas no Photoshop e no Firefox sobre como agilizar o trabalho.
Na parte três farei o layout ficar compatível com o falecido internet explorer 6(e também a versão 7 e 8).

Como passar um layout do Photoshop para xHTML/CSS (parte 2)


Baixar Arquivos

]]> http://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtml-css-parte-2/feed/ 20 noNesta parte faço todo o design com CSS, e como bônus ainda mostro algumas técnicas no Photoshop e no Firefox sobre como agilizar o trabalho. Na parte três farei o layout ficar compatível com o falecido internet explorer 6(e também a versão 7 e 8). Como paNesta parte faço todo o design com CSS, e como bônus ainda mostro algumas técnicas no Photoshop e no Firefox sobre como agilizar o trabalho. Na parte três farei o layout ficar compatível com o falecido internet explorer 6(e também a versão 7 e 8). Como passar um layout do Photoshop para xHTML/CSS (parte 2) Baixar Arquivos web, css, desenvolvimento, tableless, xhtmlhttp://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtml-css-parte-2/ http://feedproxy.google.com/~r/tutorial-city/XDvR/~3/UKoV6VdiXn8/ http://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtml-css-parte-1/#comments Sun, 28 Jun 2009 20:02:30 +0000 Tutorial City http://tutorial-city.net/?p=333 Neste tutorial você os detalhes de como transformar um layout do photoshop (ou qualquer outro programa) para xHTML válido, seguindo os padrões mais atuais da web. Nesta primeira parte abordo somente a parte de xHTML, já na segunda pretendo abordar os detalhes de como fatirar o layout e usar CSS para deixar o visual o mais parecido possível com o proposto.

Como passar um layout do Photoshop para xHTML/CSS (parte 1)

PSD para xHTML/CSS – parte 1 from Tutorial City on Vimeo.


Baixar arquivos

]]> http://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtml-css-parte-1/feed/ 20 noNeste tutorial você os detalhes de como transformar um layout do photoshop (ou qualquer outro programa) para xHTML válido, seguindo os padrões mais atuais da web. Nesta primeira parte abordo somente a parte de xHTML, já na segunda pretendo abordar os detaNeste tutorial você os detalhes de como transformar um layout do photoshop (ou qualquer outro programa) para xHTML válido, seguindo os padrões mais atuais da web. Nesta primeira parte abordo somente a parte de xHTML, já na segunda pretendo abordar os detalhes de como fatirar o layout e usar CSS para deixar o visual o [...]web, css, desenvolvimento, tableless, xhtmlhttp://tutorial-city.net/web/como-passar-um-layout-do-photoshop-para-xhtml-css-parte-1/ http://feedproxy.google.com/~r/tutorial-city/XDvR/~3/1heOuQa32bo/ http://tutorial-city.net/photoshop/lista-completa-de-atalhos-para-varias-versoes-de-photoshop/#comments Sat, 16 May 2009 15:23:34 +0000 Tutorial City http://tutorial-city.net/?p=300 Navegando pela internet, me deparei com um site que oferece uma lista maravilhosa com dezenas de atalhos para várias versões de Photoshop. Você pode baixar um arquivo contendo todos os atalhos (inúmeros deles customizados) e um arquivo em PDF com uma referência a estes atalhos.


Para você ter menos trabalho vou disponibilizar aqui os links pra download destes arquivos assim como as instruções para instalação:

Photoshop CS4

Lista PC
Lista Mac
Baixar atalhos

Instalação

1. Copie o arquivo Trevors CS4 Keyboard Shortcuts.kys para o seguinte local:
   • PC (Windows XP): C:\Documents and Settings\nome do seu usuário\Dados de Aplicativos\Adobe\Adobe Photoshop CS4\Presets\Keyboard Shortcuts\
   • PC (Windows Vista): C:\Users\nome do seu usuário\AppData\Roaming\Adobe\Adobe Photoshop CS4\Presets\Keyboard Shortcuts\
   • Mac: /Users/nome do seu usuário/Library/Application Support/Adobe/Adobe Photoshop CS4/Presets/Keyboard Shortcuts/
2. Reinicie o Photoshop (caso esteja aberto)
3. Vá ao menu Edit > Keyboard Shortcuts
4. Selecione Trevors CS4 Keyboard Shortcuts no menu drop down
5. Clique em Ok para aplicar a mudança

Photoshop CS3

Lista PC
Lista Mac
Baixar atalhos

Instalação

1. Copie este arquivo para o seguinte local: Adobe Photoshop CS3\Presets\Keyboard Shortcuts\
2. Reinicie o Photoshop
3. Vá ao menu Edit > Keyboard Shortcuts e selecione Trevors CS3 Keyboard Shortcuts no menu drop down
4. Clique em Ok para aplicar a mudança

Photoshop CS2

Lista PC
Lista Mac
Baixar atalhos

Instalação

1. Copie este arquivo para o seguinte local: Adobe Photoshop CS2\Presets\Keyboard Shortcuts\
2. Reinicie o Photoshop
3. Vá ao menu Edit > Keyboard Shortcuts e selecione Trevors CS2 Keyboard Shortcuts no menu drop down
4. Clique em Ok para aplicar a mudança

Photoshop CS

Lista PC
Lista Mac
Baixar atalhos

instalação

1. Feche o Photoshop (caso esteja aberto)
2. Copie Trevor’s Keyboard Shortcuts.kys para sua pasta de atalhos de teclado, onde o local padrão de instalação no Windows é: C:\Program Files\Adobe\Photoshop CS\Presets\Keyboard Shortcuts\
3. Inicie o Photoshop
4. Vá em Edit > Keyboard Shortcuts
5. Selecione Trevor’s Keyboard Shortcuts.kys no menu drop down
6. clique em Ok para aplicar as mudanças

Photoshop 7

Lista PC

Para maiores informações você pode acessar o site do Trevor clicando aqui.

Divirta-se

]]> http://tutorial-city.net/photoshop/lista-completa-de-atalhos-para-varias-versoes-de-photoshop/feed/ 4 noNavegando pela internet, me deparei com um site que oferece uma lista maravilhosa com dezenas de atalhos para várias versões de Photoshop. Você pode baixar um arquivo contendo todos os atalhos (inúmeros deles customizados) e um arquivo em PDF com uma refeNavegando pela internet, me deparei com um site que oferece uma lista maravilhosa com dezenas de atalhos para várias versões de Photoshop. Você pode baixar um arquivo contendo todos os atalhos (inúmeros deles customizados) e um arquivo em PDF com uma referência a estes atalhos. Para você ter menos trabalho vou disponibilizar aqui os links pra [...]Photoshop, atalhoshttp://tutorial-city.net/photoshop/lista-completa-de-atalhos-para-varias-versoes-de-photoshop/ http://feedproxy.google.com/~r/tutorial-city/XDvR/~3/ARbw0FZerms/ http://tutorial-city.net/photoshop/photoshop-para-leigos-modulo-2-parte-7/#comments Sat, 09 May 2009 14:05:26 +0000 Tutorial City http://tutorial-city.net/?p=297 Neste tutorial você aprenderá a usar o painel de história

Trabalhando com o painel de história

]]> http://tutorial-city.net/photoshop/photoshop-para-leigos-modulo-2-parte-7/feed/ 6 noNeste tutorial você aprenderá a usar o painel de história Trabalhando com o painel de história Neste tutorial você aprenderá a usar o painel de história Trabalhando com o painel de história Photoshop, básicohttp://tutorial-city.net/photoshop/photoshop-para-leigos-modulo-2-parte-7/ nonadult