O que vai mudar?

Durante todo o tempo de existência desse blog foi complicado, pra mim, criar os vídeo tutoriais, então a primeira atitude mais forte é uma diminuição considerável de tutoriais em vídeo. Mas há males que vem para o bem, tutoriais em vídeo não podem ser tão elaborados quanto tutoriais escritos, porque vídeos muito longos tendem a ser cansativos, e separar em várias partes não é necessariamente uma boa ideia, já que não é muito legal ficar alternando entre vários vídeos pra ver só aquela parte que você queria tirar uma dúvida por exemplo.

Tutoriais escritos tem a vantagem de poder passar links externos no decorrer da leitura, facilitando o acesso à outras informações pelo usuário. Se eu mencionar um artigo de outro site, o leitor pode, instantaneamente, acessa-lo e revisar o conteúdo.

O visual

Não sou expert em design, aliás, estou bem longe disso, mas usei alguns conceitos que conheço pra tornar o site mais agradável para os usuários. Minimialismo foi a palavra chave pra criação desse tema, focando puramente nos tutoriais, e deixando o resto em segundo plano.

A primeira grande mudança foi no esquema de cores. O tema antigo era bastante escuro, o que não é lá tão ruim pra um site que tem muitos vídeos, mas não é nada bom pra um site que tem muito texto (como este terá daqui por diante). Agora está tudo mais limpo e fácil de ler.

Usei a técnica do baseline, pra leitura se tornar ainda mais suave. A fonte não está tão grande como antes, fazendo que a leitura fique menos cansativa. Também uso extensivamente cabeçalhos pra separar o conteúdo em partes lógicas e informar ao leitor o que está sendo feito em cada momento.

A estrutura está toda baseada em grids. Grids conduzem o visitante na leitura do conteúdo, e facilita seu entendimento, por estar bem estruturado. No caso específico desse blog usei o framework Blueprint, porque acho mais fácil e simples de usar.

Novidades

Não há muitas novidades além das que já foram citadas anteriormente, mas gostaria de apontar algumas pequenas mudanças que tive todo cuidado pra que ficasse bem feitas.

Comentários Agrupados

A primeira que gostaria de falar é a possibilidade de responder diretamente aos comentários, sem a necessidade do antigo @nome_do_usuario, que na minha opinião é algo horroroso, pois um comentário feito meses mais tarde pode responder a um comentário muito antigo e ficar bastante distante um do outro, sem muita relação visual. Com o novo sistema é possível responder diretamente, basta clicar em responder e pronto, a resposta ficará diretamente abaixo do comentário.

Comentários em AJAX

Agora os comentários são enviados em AJAX, o que é de grande comodidade caso você esteja assistindo a um vídeo e queira enviar um comentário sem precisar recarregar a página. O mesmo serve pra responder aos comentários, quando o botão de resposta é clicado, o formulário pula instantaneamente para o local onde o comentário se encontra, além de colocar o cursor do mouse diretamente no formulário, para que o usuário não precise usar o mouse para esta tarefa.

Validação de comentários

Outro cuidado que tomei foi validar os comentários antes do envio. Isso é bom para o usuário comum, porque mostra quando o email digitado não é válido ou quando ele esquecer de escrever um conteúdo por exemplo.

Detalhes do tutorial

Como última novidade gostaria de apontar os detalhes no início de cada tutorial. Agora antes de ler o conteúdo é possível saber o nível do tutorial e o tempo estimado para finalização. Os links pra download de arquivos, download do vídeo e preview online também se encontram neste local, unificando todos os dados sobre o tutorial.

Velocidade

Fiz questão de tornar esse blog o mais rápido possível em questão de tempo de carregamento. Usei praticamente todas as boas práticas recomendadas pelo time do Yahoo. O YSlow deu rank A para este site, provando que cumpre muito bem as diretrizes do YSlow. No Page Speed ganhei uma pontuação de 85/100, o que é um valor bastante expressivo.

Conclusão

Minha expectativa é que o Tutorial City tenha se tornado mais simples e rápido de usar. O conteúdo será o rei daqui por diante, com tutoriais de alto nível e bem detalhados. Espero que goste dessa nova fase e que sempre retorne para acompanhar os tutoriais. Um abraço e até a próxima!

O que é RSS?

RSS nada mais é que um formato de distribuição de conteúdo baseado em XML, o que é ótimo, pois não exige que o desenvolvedor tenha que aprender uma nova linguagem para cria-lo.

Existem basicamente dois formatos principais de distribuição, que são Atom e RSS, que apresentam algumas diferenças entre si, mas o objetivo de ambos é o mesmo. O formato RSS tem duas ramificações, uma delas o RSS 1.0 e outra RSS 2.0 . Não vou abordar a diferença entre os dois neste tutorial, e usarei o ramo da versão 2.0, já que é bem mais simples e cumpre muito bem com seu dever.

Criando RSS

Neste tutorial usarei XMLWriter com PHP para escrever os arquivos de XML, mas você também pode usar a extensão SimpleXML para gerar XML . Minha decisão pela extensão XMLWriter se deu pelo fato de eu acha-la bem mais simples e intuitiva para geração desse arquivo.

Sem mais delongas, vamos partir para a prática e ver como podemos gerar nosso próprio RSS.

Estrutura

A primeira coisa que temos que ter em mente é a estrutura do nosso RSS. Algumas tags são obrigatórias, mas a maioria é opcional, nos dando maior flexibilidade de criação. Conforme descrito nas especificações, devemos iniciar nosso documento com uma tag chamada rss e dentro dessa tag devemos ter outra tag, chamada channel. Dentro da tag channel virão todas as informações sobre nosso RSS. Existem três tags obrigatórias dentro do channel, que são title, link e description. Abaixo você vê a estrutura mais básica possível de um RSS.

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
	<channel>
		<title>TC - Feeds</title>
		<link>http://localhost/tc/rss.xml</link>
		<description>Blog que traz as novidades de desenvolvimento web</description>
	</channel>
</rss>

Tomei a liberdade de inserir um conteúdo qualquer, para que fique mais fácil identificar como é usado na prática. Neste momento o RSS já pode ser visualizado no navegador (alguns navegadores tem suporte de exibição e inscrição de feeds, mas isso não é uma regra. neste tutorial usei o Firefox para isso, mas existem vários interpretadores de RSS disponíveis, como o Google Reader ou Microsoft Outlook por exemplo), apesar de não ter nenhum conteúdo. O resultado é mostrado abaixo.

Conteúdo

Todo conteúdo do nosso RSS fica dentro da tag item, e podemos tem quantos itens nós quisermos, mas é comum que esse valor esteja entre cinco e vinte (normalmente 10).

A tag item não é obrigatória, mas dada a necessidade de distribuir conteúdo ela acaba se tornando mandatória. Não existe nenhuma tag exigida dentro da tag item, mas pelo menos uma deve existir.

No caso específico desse tutorial irei usar as tags title, link, description, guid e pubDate. Em geral os nomes das tags se auto-explicam, mas de qualquer maneira deixo uma descrição simples a seguir:

title

Título do conteúdo

link

link do conteúdo

description

Conteúdo em si. particularmente acho interessante colocar somente uma introdução.

guid

Uma identificação única do conteúdo. Pode ter qualquer valor, desde que seja único.

pubDate

Data de publicação, no formato RFC-822. Existe uma constante que nos ajuda nessa situação, que é DATE_RSS.

com as informações acima já podemos iniciar a inserção de conteúdo no nosso XML.

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
	<channel>
		<title>TC - Feeds</title>
		<link>http://localhost/tc</link>
		<description>Blog que traz as novidades de desenvolvimento web</description>
		<item>
			<title>Primeiro Post</title>
			<link>http://localhost/post/1</link>
			<description>Este post fala sobre RSS</description>
			<guid>http://localhost/post/1</guid>
			<pubDate>Sat, 27 Feb 2010 15:13:53 +0000</pubDate>
		</item>
	</channel>
</rss>

visualizando no navegador, obtemos o seguinte resultado:

Como pode-se ver, o navegador já percebeu que temos um item, e nos mostra na tela. A seguir vou criar outros dois itens para ver como ele se comporta. Repare como os itens se apresentam de forma decrescente, isso é importante por que sempre se deseja mostrar os mais recentes primeiro.

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
	<channel>
		<title>TC - Feeds</title>
		<link>http://localhost/tc/rss.xml</link>
		<description>Blog que traz as novidades de desenvolvimento web</description>
		<item>
			<title>Primeiro Post</title>
			<link>http://localhost/post/3</link>
			<description>Este post fala ainda mais sobre RSS</description>
			<guid>http://localhost/post/3</guid>
			<pubDate>Mon, 01 Mar 2010 15:13:53 +0000</pubDate>
		</item>
		<item>
			<title>Segundo Post</title>
			<link>http://localhost/post/2</link>
			<description>Este post fala mais sobre RSS</description>
			<guid>http://localhost/post/2</guid>
			<pubDate>Sun, 28 Feb 2010 15:13:53 +0000</pubDate>
		</item>
		<item>
			<title>Primeiro Post</title>
			<link>http://localhost/post/1</link>
			<description>Este post fala sobre RSS</description>
			<guid>http://localhost/post/1</guid>
			<pubDate>Sat, 27 Feb 2010 15:13:53 +0000</pubDate>
		</item>
	</channel>
</rss>

Com exceção da tag item, todos as tags que usei dentro de channel são obrigatórias. Agora vou inserir outras opcionais, que eu gosto de usar.

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
	<channel>
		<title>TC - Feeds</title>
		<link>http://localhost/tc/rss.xml</link>
		<description>Blog que traz as novidades de desenvolvimento web</description>
		<language>pt</language>
		<pubDate>Tue, 02 Mar 2010 14:43:32 +0000</pubDate>
        <image>
            <title>TC - Feeds</title>
            <link>http://www.localhost/tc</link>
            <url>http://www.localhost/tc/tc.jpg</url>
            <width>120</width>
            <height>60</height>
        </image>
		<item>
			<title>Terceiro Post</title>
			<link>http://localhost/post/3</link>
			<description>Este post fala ainda mais sobre RSS</description>
			<guid>http://localhost/post/3</guid>
			<pubDate>Mon, 01 Mar 2010 15:13:53 +0000</pubDate>
		</item>
		<item>
			<title>Segundo Post</title>
			<link>http://localhost/post/2</link>
			<description>Este post fala mais sobre RSS</description>
			<guid>http://localhost/post/2</guid>
			<pubDate>Sun, 28 Feb 2010 15:13:53 +0000</pubDate>
		</item>
		<item>
			<title>Primeiro Post</title>
			<link>http://localhost/post/1</link>
			<description>Este post fala sobre RSS</description>
			<guid>http://localhost/post/1</guid>
			<pubDate>Sat, 27 Feb 2010 15:13:53 +0000</pubDate>
		</item>
	</channel>
</rss>

As linhas destacadas foram inseridas. A descrição de cada um dos nós pode ser encontrada na especificação RSS.

Neste momento o RSS já foi criado, porém não faz muito sentido cria-lo manualmente, e é aí que entra o poder do XMLWriter no PHP.

Conhecendo o XMLWriter

Usaremos somente alguns métodos do XMLWriter, e todos estão, brevemente, descritos a seguir. Para uma lista completa visite a documentação oficial do XMLWriter

XMLWriter::openURI

Abre o arquivo que será usado para salvar o conteúdo do XML. Caso o arquivo não exista ele é criado. Se php://output for passado como parâmetro, o XML será jogado na tela

XMLWriter::startDocument

Inicia um documento

XMLWriter::endDocument

Finaliza um documento

XMLWriter::startElement

Inicia um elemento

XMLWriter::endElement

Finaliza um elemento

XMLWriter::writeElement

Escreve um elemento diretamente, sem a necessidade de fecha-lo posteriormente

XMLWriter::writeAttribute

Escreve um atributo no elemento mais recente.

XMLWriter::writeCData

Escreve um conteúdo escapado por CData (necessário quando se quer inserir HTML dentro de um arquivo XML)

XMLWriter::writeText

Escreve um texto dentro da tag mais recente

XMLWriter::flush

Salva o arquivo ou o joga na tela, dependendo do parâmetro passado para XMLWriter::openURI

Organização das pastas e arquivos

Organizarei minhas pastas da seguinte maneira

Banco de dados

Para que tenhamos conteúdo para trabalhar, vou criar um banco de dados chamado Blog, e dentro desse banco de dados criarei uma tabela chamada posts. Esta tabela terá quatro campos, id, titulo, conteudo e data_criacao.

CREATE DATABASE Blog;

CREATE TABLE posts (
  id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  titulo VARCHAR(200) NOT NULL ,
  conteudo LONGTEXT NOT NULL ,
  data_criacao DATETIME NOT NULL
);

Agora basta inserir algum conteúdo

INSERT INTO posts VALUES
(NULL,'Primeiro Post','Conteúdo do primeiro post','2010-08-01 00:00:00'),
(NULL,'Segundo Post' ,'Conteúdo do segundo post' ,'2010-08-02 00:00:00'),
(NULL,'Terceiro Post','Conteúdo do terceiro post','2010-08-03 00:00:00'),
(NULL,'Quarto Post'  ,'Conteúdo do quarto post'  ,'2010-08-04 00:00:00'),
(NULL,'Quinto Post'  ,'Conteúdo do quinto post'  ,'2010-08-05 00:00:00')

Conexão com banco de dados

Primeiro vou criar o arquivo de conexão com o banco de dados, pois este será usado em algumas outras páginas. No arquivo conexao.php a conexão é criada. Usarei a extensão PDO para a interação com o banco de dados, caso você não saiba usa-la, pode aprender todo o CRUD com prepared statements usando PDO neste tutorial aqui do Tutorial City.

$host    = 'localhost';
$db_name = 'Blog';
$user    = 'root';
$pass    = '';

$dsn = 'mysql:host='.$host.';dbname='.$db_name;
try {
	$db = new PDO($dsn,$user,$pass);
	$db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
	unset($host);unset($db_name);unset($user);unset($pass);
} catch (PDOException $e) {
	echo $e->getMessage();
}

Páginas

Página Inicial

No arquivo index.php, localizado na raiz da nossa estrutura, vai ficar a lógica que mostrará todos os posts

<?php
require_once 'conexao.php';

//ordenar por data de criação de modo decrescente, para mostrar os mais recentes primeiro
$sql = 'SELECT id, titulo, conteudo, data_criacao FROM posts ORDER BY data_criacao DESC';
$query = $db->prepare($sql);
$query->execute();
$query->bindColumn('id'          ,$id			);
$query->bindColumn('titulo'      ,$titulo		);
$query->bindColumn('conteudo'    ,$conteudo		);
$query->bindColumn('data_criacao',$data_criacao );
$query->setFetchMode(PDO::FETCH_BOUND);
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta charset="utf-8">
	<title>TC Blog</title>
</head>
<body>
	<?php while($query->fetch()):?>
	<h1><?php echo utf8_encode($titulo)?></h1>
	<p><em><?php echo date('d/m/Y',strtotime($data_criacao))?></em></p>
	<p><?php echo utf8_encode($conteudo)?></p>
	<p><a href="http://localhost/tc/post.php?id=<?php echo $id?>">Veja Mais</a></p>
	<hr />
	<?php endwhile;?>
</body>
</html>

Repare que usei a função utf8_encode no título e no conteúdo. Ela é necessária pois os caracteres acentuados não retornavam da maneira desejada. Visitando a página inicial temos o seguinte resultado:

Post único

Agora vou criar a página do post único, que é bastante parecida com a página inicial, porém só pega um post.

<?php
require_once 'conexao.php';

$sql = ' SELECT id, titulo, conteudo, data_criacao ';
$sql.= ' FROM posts';
$sql.= ' WHERE id = ?';
$query = $db->prepare($sql);
$query->bindValue(1,$_GET['id'],PDO::PARAM_INT);
$query->execute();
$query->bindColumn('id'          ,$id			);
$query->bindColumn('titulo'      ,$titulo		);
$query->bindColumn('conteudo'    ,$conteudo		);
$query->bindColumn('data_criacao',$data_criacao  );
$query->setFetchMode(PDO::FETCH_BOUND);
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta charset="utf-8">
	<title>TC Blog</title>
</head>
<body>
	<?php $query->fetch()?>
	<h1><?php echo utf8_encode($titulo)?></h1>
	<p><em><?php echo date('d/m/Y',strtotime($data_criacao))?></em></p>
	<p><?php echo utf8_encode($conteudo)?></p>
</body>
</html>

Gerando XML usando XMLWriter

Toda a base já está pronta nesse momento. Agora basta criar o RSS e inserir na página. Voltando ao arquivo index.php na pasta rss, vou iniciar a criação do XML usando XMLWriter.

date_default_timezone_set('America/Sao_Paulo');
header('Content-type: application/rss+xml');

$rss = new XMLWriter();
$rss->openURI('php://output');
$rss->setIndent(true);
$rss->setIndentString('    ');

$rss->startDocument('1.0','utf-8');
	$rss->startElement('rss');
	$rss->writeAttribute('version','2.0');
		$rss->startElement('channel');
			$rss->writeElement('title','TC - Feeds');
			$rss->writeElement('link','http://localhost/tc');
			$rss->writeElement('description','Blog que traz as novidades de desenvolvimento web');
			$rss->writeElement('language','pt');
			$rss->writeElement('pubDate',date(DATE_RSS));
			$rss->startElement('image');
				$rss->writeElement('title','TC - Feeds');
				$rss->writeElement('link','http://localhost/tc');
				$rss->writeElement('url','http://localhost/tc/rss/tc.jpg');
				$rss->writeElement('width','120');
				$rss->writeElement('height','60');
			$rss->endElement();
		$rss->endElement();// final do channel
	$rss->endElement();// final do rss
$rss->endDocument();

//envia o xml para o endereço do openURI
$rss->flush();

Existem alguns pontos importantes a se destacar sobre o código acima. É uma boa prática usar a função date_default_timezone_set no documento, para que todas as datas sejam exibidas com fuso horário correto. É importante que se envie um cabeçalho dizendo que o conteúdo a seguir é RSS. Na linha cinco usei php://output como parâmetro do método XMLWriter::openURI, o que significa que eu quero que o conteúdo seja jogado na tela, e não em um arquivo. Nas linhas seis e sete digo que quero recuar meu código, e que usarei quatro espaços como recuo. Apesar disso não ser fundamental, é bom para que o código fique mais legível quando completo. O resto é bem simples, só crio tags e escrevo conteúdo conforme explicado no início do tutorial. Sempre tomo o cuidado de recuar meu código, para que eu saiba quem está dentro de quem, e recomendo que você faça o mesmo.

Se dirigindo à URL http://localhost/tc/rss, o resultado é o seguinte:

Gerando itens dinamicamente

Agora basta inserir cada post dentro de um item no RSS. Primeiro inclui-se o arquivo de conexão no início do arquivo index.php, depois pega-se todos os posts, não esquecendo de ordenar de forma decrescente.

<?php 

require '../conexao.php';
$sql  = ' SELECT id, titulo, conteudo, data_criacao FROM posts ';
$sql .= ' ORDER BY data_criacao DESC LIMIT 10';
$query = $db->prepare($sql);
$query->execute();
$query->bindColumn('id'          ,$id			);
$query->bindColumn('titulo'      ,$titulo		);
$query->bindColumn('conteudo'    ,$conteudo		);
$query->bindColumn('data_criacao',$data_criacao  );
$query->setFetchMode(PDO::FETCH_BOUND);

date_default_timezone_set('America/Sao_Paulo');
header('Content-type: application/rss+xml');

$rss = new XMLWriter();
$rss->openURI('php://output');
$rss->setIndent(true);
$rss->setIndentString('    ');

$rss->startDocument('1.0','utf-8');
	$rss->startElement('rss');
	$rss->writeAttribute('version','2.0');
		$rss->startElement('channel');
			$rss->writeElement('title','TC - Feeds');
			$rss->writeElement('link','http://localhost/tc');
			$rss->writeElement('description','Blog que traz as novidades de desenvolvimento web');
			$rss->writeElement('language','pt');
			$rss->writeElement('pubDate',date(DATE_RSS));
			$rss->startElement('image');
				$rss->writeElement('title','TC - Feeds');
				$rss->writeElement('link','http://localhost/tc');
				$rss->writeElement('url','http://localhost/tc/rss/tc.jpg');
				$rss->writeElement('width','120');
				$rss->writeElement('height','60');
			$rss->endElement();
/***************** ITEM *****************/
			while($query->fetch()):
			$rss->startElement('item');
				$rss->writeElement('title',utf8_encode($titulo));
				$rss->writeElement('link','http://localhost/tc/post.php?id='.$id);
				$rss->startElement('description');
					$rss->writeCData(utf8_encode($conteudo));
				$rss->endElement();
				$rss->writeElement('guid','http://localhost/tc/post.php?id='.$id);
				$rss->writeElement('pubDate',date(DATE_RSS,strtotime($data_criacao)));
			$rss->endElement();
			endwhile;
/***************************************/
		$rss->endElement();// final do channel
	$rss->endElement();//final do rss
$rss->endDocument();

//envia o xml para o endereço do openURI
$rss->flush();

Repare que para escrever o conteúdo eu usei o método XMLWriter::writeCData, pois o conteúdo pode apresentar tags HTML, e estas não podem vir diretamente em um arquivo XML, tendo que ser escapadas usando CData.

Visualizando o código no navegador temos o seguinte:

Para mostrar como pode-se inserir HTML no conteúdo, vou modificar o conteúdo do segundo post

UPDATE posts
SET conteudo = `<h3>conteúdo</h3> do <code>segundo</code> post`
WHERE id = 2;

Agora voltando ao RSS, o resultado é o seguinte:

Criando a referência do RSS no HTML

Neste momento tudo já está pronto, e já podemos assinar nosso RSS. Os navegadores mais recentes exibem um ícone na barra de endereços indicando quando um site tem conteúdo RSS, mas isso não acontece automaticamente, até por que o navegador não sabe se você tem um arquivo pra isso, a menos que você diga a ele que você tem RSS para disponibilizar. Para fazer isso basta adicionar uma linha ao cabeçalho do nosso HTML, como visto a seguir:

<head>
	<meta charset="utf-8">
	<title>TC Blog</title>
	<link rel="alternate" type="application/rss+xml" title="RSS" href="http://localhost/tc/rss" />
</head>

Agora olhando para a barra de endereços vemos um ícone de RSS, indicando que o site apresenta conteúdo no formato RSS.

Validação

O último passo é validar nosso RSS. Para isso basta visitar o site oficial do validador. Como meu conteúdo está offline, no meu servidor local, tenho que selecionar a opção de jogar o RSS diretamente na tela (segunda aba). Para coletar nosso XML basta acessar http://localhost/tc/rss e usar o atalho CTRL + U no Firefox, para ter acesso ao código fonte. Daí basta copiar e colar no validador. o resultado no meu caso foi o seguinte:

O RSS validou, mas o validador recomenda que usemos rel=”self”, que nada mais é que uma referência ao próprio arquivo de RSS. Isto é importante para que os diversos leitores consigam entender melhor nosso feed.

Voltando ao nosso index.php na pasta rss, modifiquei as linhas marcadas, para atender ao pedido do validador

require '../conexao.php';
$sql  = ' SELECT id, titulo, conteudo, data_criacao FROM posts ';
$sql .= ' ORDER BY data_criacao DESC LIMIT 10';
$query = $db->prepare($sql);
$query->execute();
$query->bindColumn('id'          ,$id			);
$query->bindColumn('titulo'      ,$titulo		);
$query->bindColumn('conteudo'    ,$conteudo		);
$query->bindColumn('data_criacao',$data_criacao );
$query->setFetchMode(PDO::FETCH_BOUND);

date_default_timezone_set('America/Sao_Paulo');
header('Content-type: application/rss+xml');

$rss = new XMLWriter();
$rss->openURI('php://output');
$rss->setIndent(true);
$rss->setIndentString('    ');

$rss->startDocument('1.0','utf-8');
	$rss->startElement('rss');
	$rss->writeAttribute('xmlns:atom','http://www.w3.org/2005/Atom');
	$rss->writeAttribute('version','2.0');
		$rss->startElement('channel');
			$rss->startElement('atom:link');
			$rss->writeAttribute('rel','self');
			$rss->writeAttribute('type','application/rss+xml');
			$rss->writeAttribute('href','http://localhost/tc/rss/');
			$rss->endElement();
			$rss->writeElement('title','TC - Feeds');
			$rss->writeElement('link','http://localhost/tc');
			$rss->writeElement('description','Blog que traz as novidades de desenvolvimento web');
			$rss->writeElement('language','pt');
			$rss->writeElement('pubDate',date(DATE_RSS));
			$rss->startElement('image');
				$rss->writeElement('title','TC - Feeds');
				$rss->writeElement('link','http://localhost/tc');
				$rss->writeElement('url','http://localhost/tc/rss/tc.jpg');
				$rss->writeElement('width','120');
				$rss->writeElement('height','60');
			$rss->endElement();
/***************** ITEM *****************/
			while($query->fetch()):
			$rss->startElement('item');
				$rss->writeElement('title',utf8_encode($titulo));
				$rss->writeElement('link','http://localhost/tc/post.php?id='.$id);
				$rss->startElement('description');
					$rss->writeCData(utf8_encode($conteudo));
				$rss->endElement();
				$rss->writeElement('guid','http://localhost/tc/post.php?id='.$id);
				$rss->writeElement('pubDate',date(DATE_RSS,strtotime($data_criacao)));
			$rss->endElement();
			endwhile;
/***************************************/
		$rss->endElement();// final do channel
	$rss->endElement();//final do rss
$rss->endDocument();

//envia o xml para o endereço do openURI
$rss->flush();

O efeito das mudanças no código fonte é mostrado abaixo:

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
        <atom:link rel="self" type="application/rss+xml" href="http://localhost/tc/rss/"/>
        <title>TC - Feeds</title>
        <link>http://localhost/tc</link>
        <description>Blog que traz as novidades de desenvolvimento web</description>
        <language>pt</language>
        <pubDate>Sat, 14 Aug 2010 19:45:14 -0300</pubDate>

Voltando ao validador e refazendo o teste veremos que outro erro ocorrerá, dizendo que o arquivo não foi encontrado no endereço que passamos. Esse erro só acontece porque o arquivo está offline, e o validador não consegue acessá-lo. Quando o RSS ficar online vai estar 100% validado e pronto pra ser usado.

Conclusão

Neste momento você já é capaz de criar feeds RSS em seus sites, tornando-os muito mais ricos. Existe muito sobre RSS que não foi mencionado nesse tutorial, então te encorajo a pesquisar sobre o assunto. usando XMLWriter é muito fácil criar qualquer arquivo XML, mas existem vários métodos que não usei, e também recomendo que dê uma lida na documentação oficial para se tornar ainda melhor.

Agradeço por ter seguido todo o tutorial, e não se esqueça de fazer perguntas caso tenha alguma dúvida. Até a próxima!

Estabelecendo uma conexão

Inserindo Dados

Atualizando Dados

Deletando Dados

Lendo Dados

Códigos digitados nos vídeos

• 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

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í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'
		});
	});
});

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!

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

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