Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards

Aplicações dinâmicas com PHP e Ajax

Diogo Cezar — Thu, 16 Feb 2012 16:17:06 +0000

Como seria possível imaginar a vida sem a Internet? Atualmente um profissional que não está familiarizado com a web certamente está com sua carreira em risco. Isso porque inevitavelmente o que estamos acompanhando nos últimos tempos é a convergência dos produtos e serviços para a Internet. A dimensão dessa transformações pode ser exemplificada quando tomamos como exemplo a indústria que distribui matérias audiovisual (emissoras de tv, distribuidoras de cd’s, dvd’s ou blue-rays).

Na década de 90, alugar um filme ou comprar um CD era a única maneira de consumir um entretenimento específico. Com a evolução da Internet criou-se uma nova forma de consumo, que inevitavelmente tomou o lugar dessa indústria. Isso se deve as inúmeras vantagens que a web oferece para seu “consumidor”, as principais são que o conteúdo é na maioria das vezes gratuito, e é possível assistir quando e onde quiser.

Mas a Internet nem sempre foi o que é hoje. Os recursos que acessamos hoje passaram por uma grande evolução. É lógico que com o aumento na velocidade de transmissão de dados, tornou-se viável o consumo de áudio e vídeo, entretanto as tecnologias que envolvem tais recursos também passaram por uma grande evolução.

A evolução da Internet

A Internet não foi concebida para tomar a dimensão que tomou. Sua ideia inicial era promover acessos a dados em uma rede de computadores, e o que temos hoje é muito mais que isso.

Nos testes iniciais da Internet por volta do início da década de 90, cientistas tinham o intuito de compartilhar dados ao redor do mundo, e para isso não precisavam de muito mais que o compartilhamento de texto puro e eventuais gráficos e/ou imagens.

Na internet são trafegados diversos protocolos, entre eles temos o HTTP (HyperText Transfer Protocol). Esse, é um protocolo que transporta uma página em HTML (HyperText Markup Language) que é gerada em um servidor. O cliente, ao receber uma página em HTML invoca um programa (navegador) interpreta o protocolo HTTP e extrai o código HTML para sua exibição.

A linguagem HTML permitia que esses textos e imagens fossem organizados em um documento de texto através da utilização de tags (etiquetas). Essas seriam interpretadas por um programa específico e exibiria informações de uma maneira agradável. A linguagem HTML era suficiente para suprir as necessidades da época, pois cumpriu com eficiência a tarefa a que se propôs.

Nota: Tags em HTML são estruturas da linguagem que consistem em breves instruções, tendo uma marca de início e outra de fim, cada uma dessas instruções tem uma função específica na formatação de um documento web. Por exemplo

Exemplo

marca a palavra “Exemplo” como um título

O grande problema foi que os objetivos da Internet se alteraram mas a linguagem de marcação não acompanhou essas alterações. Entre a versão 1 do HTML e a versão 3 não houveram mudanças consideráveis. O HTML 4.0 foi convencionado em 1997 pela W3C (World Wide Web Consortium). A W3C é consórcio formado por instituições comerciais e educacionais que têm como objetivo definir os padrões para escrita de documentos que trafegam pela web. A grande diferença notada na versão 4.0 do HTML foi a inserção de objetos dinâmicos. Desta forma, tornou-se possível modificar elementos da página HTML sem a necessidade de obter um novo documento. Surge então o DHTML (Dynamic HyperText Markup Language) que foi a junção das tecnologias JavaScript, CSS e DOM (Document Object Model). O DOM é a organização dos elementos de um HTML, ele os mapeia os elementos HTML em formato de árvore, e assim, a linguagem JavaScript pode manipular um nodo nó (uma folha da árvore) independentemente de toda a estrutura.

Em 2000 a W3C propõe uma modificação nos conceitos trabalhos até então. A nova proposta uni a linguagem de marcação HTML com as regras de marcação da linguagem XML, estava então criado o XHTML 1.0. Sua principal proposta era orientar o desenvolvedor a escrever o documento HTML de forma correta, utilizando para isso as regras DTD (Document Type Definition) especificadas no cabeçalho do documento.

A grande questão foi que o XHTML 1.0 precisava de alguma alternativa que suprisse as necessidades dos usuários carentes por algo a mais que textos e imagens. Como a linguagem nativa não era capaz de suprir essas vontades, deu-se início a agregação de plug-ins como alternativa a necessidade audiovisual.

Adobe Flash, Microsoft SilverLight e Sun com JavaFx foram usados como alternativa para suprir essa necessidade. Aparentemente o problema estava resolvido, mas entretanto sua utilização apresentavam algumas desvantagens, como: não seguem um padrão, não são nativos, são particulares e não tem a codificação aberta.

Em 2004, os representantes das empresas Mozilla, Apple e Opera se reuniram e decidiram criar um grupo paralelo a W3C, em que começaram a desenvolver padrões de marcação em paralelo a W3C, estava formado o The Web Hypertext Application Technology Working Group (WHAT-WG). A ideia era tomar como base a evolução e não a revolução (assim como uma tentativa fracassada da W3C em construir o XHTML 2.0). Mudanças drásticas poderiam corromper muito do que já estava funcionando na Internet. Os sites que utilizavam as linguagens especificadas em 1999 e 2000 continuariam funcionando, entretanto novos conceitos seriam implicados. O grupo WHAT-WG deu início ao desenvolvimento do HTML5, que hoje já foi incorporado pelas diretrizes da W3C.

Cada navergador com sua interpretação

Um dos problemas recorrentes na área de desenvolvimento para web é que cada navegador interpreta o código HTML de uma forma diferente. Isso é um grande problema para desenvolvedores que tem que deixar o site o mais compatível possível dentre os navegadores presentes. Mas Sse existe um padrão criado pela W3C por que cada navegador insiste em interpretar o código a sua própria maneira?

Quando o HTML 4.01 foi especificado, tags foram criadas e seus objetivos estipulados, entretanto nada foi documentado com relação a como os navegadores deveriam interpretar essas tags, Isso deu origem a incompatibilidade da mesma codificação em navegadores diferentes; o que acontece é que cada navegador tenta adivinhar como interpretar determinada tag quando ela não está implementada de forma correta.

Outra questão é que existe uma certa aversão por parte de certas empresas em adotar os padrões estabelecidos, mas o que nota-se é uma convergência para tal unificação. Assim a maioria das empresas que desenvolvem navegadores estão adaptando seus produtos para o padrão estabelecido pela W3C que atualmente já aponta para o HTML5.

O início do Ajax

Em 1998, um membro da equipe da Microsoft, ao se deparar com o DHTML (utilização de JavaScript integrado com HTML), implementou uma função que daria vida ao AJAX(Asynchronous Javascript And XML) o XMLHTTP. Essa função permitia uma comunicação entre cliente e servidor de forma assíncrona, descontinuando a necessidade de enviar uma solicitação para receber uma resposta. Essa descoberta foi revolucionária, mas na época não teve destaque, pois não ficou claro para os desenvolvedores como se implementaria a comunicação assíncrona.

Em 2002 a empresa Mozilla percebeu a potencialidade desse recurso e implementou a função XMLHttpRequest, que se tornou o padrão para comunicação assíncrona nos principais navegadores como (FireFox, Opera, Safari, Chrome), mas foi somente em 2004 que essa nova funcionalidade teve destaque, com os recursos inovadores apresentados pelo Google, em sua aplicação Gmail, que construindo o conceito de programação chamado Ajax.

Até então, não era possível ter uma ideia da capacidade do AJAXAjax. Em 2005 que o Google lança o Google Maps, a primeira aplicação web com características de uma aplicação desktop, que contava com conceitos de clicar e arrastar (drag and drop), zoom ao scrool do mouse, uma interface intuitiva e outros recursos das aplicações desktop.

A utilização dessa tecnologia se tornou cada vez mais visada, não tão somente para a construção de sites, mas para a criação de aplicativos que pudessem rodar inteiramente na Internet.

Como funciona o Ajax

A Internet funciona em um modelo de requisição resposta. Em sites, esse protocolo apresenta-se ineficiente. Isso porque é necessário carregar uma página completa a cada requisição e ainda é preciso esperar seu carregamento antes de liberar o usuário para a tomada de qualquer outra ação na página em questão.

O que a tecnologia Ajax permite é uma comunicação assíncrona, dessa forma uma página principal é carregada, e quando um usuário interage em determinada seção doa site uma nova requisição é feita de forma transparente (sem que o usuário precise esperar uma nova página ser carregada) interagindo somente com aquele trecho do site.

Na Figura 1 observa-se uma representação de comunicação síncrona em uma página tradicional. Nota-se que para cada requisição (seta orientada para direita) existe uma resposta (seta orientada para a esquerda).

Na representação da Figura 2 nota-se que a página principal é carregada uma vez e pequenas requisições transparentes ao usuário são feitas ao servidor e devolvem o conteúdo solicitado.

É importante salientar que a tecnologia Ajax é uma tecnologia que vem sido muito utilizada, pois oferece conforto ao usuário, entretanto é necessário ponderar sua utilização. Recomenda-se sua utilização em aplicações web que sofrem com o modelo requisição-resposta, tais como: aplicações com menus, com interatividade em tempo real, com modelos de aplicações gráficas (desktop) entre outros. Entretanto não é necessário sua utilização em casos que a informação desejada será carregada apenas uma vez e não terá alterações, como por exemplo: uma tabela de informações para impressão.

<3>Colocando a mão na massa

Nesse artigo utiliza-se as tecnologias MySQL, PHP, e HTML. Para testar o exemplo é necessário ter instalado em seu computador um servidor web com suporte a PHP e MySQL. Para os iniciantes recomendo a utilização de programas como o XAMPP ou Wamp que proporcionam em poucos cliques um servidor web completo e de fácil configuração.

Para iniciarmos o entendimento básico do funcionamento do Ajax, precisamos de alguma aplicação web. Para isso utiliza-se um exemplo de agenda de contatos. Para armazenar os dados dessa agenda vamos utilizar o banco de dados MySQL em sua versão 5.x.

Os campos a serem armazenados são: id, nome, email e telefone. O seguinte código demonstra a criação da tabela contatos:

CREATE TABLE 'contatos' (
  'id' int(11) NOT NULL AUTO_INCREMENT,
  'nome' varchar(45) DEFAULT NULL,
  'email' varchar(200) DEFAULT NULL,
  'telefone' varchar(45) DEFAULT NULL,
  PRIMARY KEY ('id')
) DEFAULT CHARSET=latin1;

Note que o campo id é um campo que armazena um inteiro e está marcado como um campo que se auto incrementa, dessa forma não precisamos nos preocupar com o gerenciamento das identificações dos registros.

Depois dos campos criados deve-se dar destaque ao arquivo HTML que servirá de interface para o acesso remoto das informações. O seguinte código apresenta já algumas características do HTML5 como a utilização de tags como header ou ainda a construção de um cabeçalho mais simplificado.

< !DOCTYPE html>



Desenvolvimento com Ajax




	
    	Iniciando com o desenvolvimento com ajax
    
	Carregar dados:
    
		Carregar id:
		
		
    
	
	Inserir dados:
	
		Nome:
		
		E-mail:
		
		Telefone:
		
		
	
	
	Registros:

Analisando o código HTML acima podemos notar que logo após definirmos o título do documento, dentro da tagb , invocamos um arquivo JavaScript (func.js) que irá conter funções para manipulação do HTML.

Na construção dos blocos, temos um bloco principal chamado container. Manter esse bloco é importante pois é com ele que conseguimos melhorias estéticas, tais como o tamanho (largura e altura) que a aplicação terá, o espaçamento da borda superior da página, entre outros.

Alguns cabeçalhos (h1, h2) são adicionados para separar e nomear os blocos da página.

Nota: Pretende-se aqui explicar como se dá o funcionamento da tecnologia Ajax, logo explicações de CSS ou estética de construção do HTML estão fora de escopo, e ficam para uma próxima oportunidade.

O arquivo HTML possui três sessões seções básicas:

1. carregar dados: apresenta um input do tipo text um botão ok. Aqui o usuário pode procurar na base de dados um registro, por uma identificação específica, caso nenhuma identificação seja inserida, retorna-se todos os registros da base de dados;
2. inserir dados: estão dispostos três inputs do tipo text referentes aos dados para cadastro de um novo registro. Ao clicar em ok o registro é armazenado e uma resposta de sucesso ou fracasso é retornada para o usuário;
3. registros: Ao procurar por um registro específico, todos os registros ou inserir um novo, sua resposta será exibida nessa sessão, dentro da div result.

Nota-se que os botões ok não são botões do tipo submit e sim botões do tipo button, isso porque cada um deles chama uma função JavaScript específica. Como estamos trabalhando com Ajax não podemos contar com a prática tradicional de enviar um formulário pelo botão submit, agora teremos que tratar cada caso separadamente por funções da linguagem JavaScript.

Depois de escrito, pode-se salvar esse HTML como index.html, assim ele será o arquivo principal a ser acessado por seus usuários.

A Figura 3 mostra um exemplo de como deve ficar seu HTML depois de pronto.

E como ficam os JavaScript?

Agora vamos analisar detalhadamente como toda a mágica acontece. Quando contextualizamos o início da tecnologia Ajax citamos o objeto XMLHttpRequest criado pela empresa Mozilla em 2002. E é exatamente com esse objeto que vamos trabalhar.

A primeira função a ser analisada no arquivo func.js é a função generateXMLHttp(). Essa função tenta exaustivamente criar o objeto XMLHttpRequest. O que acontece é que pela incompatibilidade de alguns navegadores tenta-se criar o objeto padrão, caso não seja possível sua criação, tenta-se uma serie de outras versões semelhantes do próprio objeto, implementada para diferentes navegadores. Todas essas versões estão armazenadas em um vetor nomeado de versions. Depois das tentativas se nenhum objeto conseguir ser criado, retorna-se uma mensagem ao usuário dizendo que seu navegador é incapaz de trabalhar com a tecnologia Ajax.

function generateXMLHttp() {
	if (typeof XMLHttpRequest != "undefined"){
		return new XMLHttpRequest();
	}
	else{
	 	if (window.ActiveXObject){
			var versions = ["MSXML2.XMLHttp.5.0",
		                 "MSXML2.XMLHttp.4.0",
                                 "MSXML2.XMLHttp.3.0",
		                 "MSXML2.XMLHttp",
		                 "Microsoft.XMLHttp"
		               		];
		}
	}
	for (var i=0; i < versions.length; i++){
		try{
			return new ActiveXObject(versions[i]);
		}catch(e){}
	}
	alert('Seu navegador não pode trabalhar com Ajax!');
}

A próxima função a ser analisada é a função getById(). Essa função captura o que foi digitado pelo usuário e armazena em uma variável id. Cria-se o XMLHttp que armazena um objeto do tipo XMLHttpRequest. Algumas propriedades desse objeto devem ser analisadas.

XMLHttp.open: recebe 3 parâmetros:

1. Tipo de requisição: o tipo da requisição é a forma com que será montado o protocolo HTTP, aqui pode-se passar uma das duas strings samblagens ‘get’ ou ‘post’. Em um primeiro momento vamos analisar como se dá o funcionamento do Ajax utilizando as variáveis de get e posteriormente analisar um próximo exemplo com as variáveis do tipo post.
2. URL: aqui devemos inserir o arquivo de destino, ou seja, o arquivo que irá realizar as manipulações do lado do servidor. Como estamos utilizando a linguagem PHP para manipulação do banco de dados, anexa-se aqui um arquivo php que faz a consulta em um banco de dados. Note também que, como nosso tipo de requisição foi setado como get, passamos logo depois do nome do arquivo uma variável de get (id) recuperada pelo JavaScript;
3. Async: Esse parâmetro é o que liga ou desliga a assincronicidade da função, então setamos como ‘true’ pois desejamos que essa chamada seja feita de forma assíncrona;

XMLHttp.onreadystatechange: É um método do objeto XMLHttpRequest que fica monitorando uma propriedade chamada readyState. Assim que essa propriedade é alterada esse método é executado, então no exemplo, atribuímos a ele uma função.

XMLHttp.readyState: é uma lista de estados, definida por:

1. 0 (não iniciado): o objeto já foi criado mas o método open() não foi invocado até o momento;
2. 1 (carregando): o método open() já foi invocado mas a requisição ainda não foi enviada;
3. 2 (carregado): a requisição foi enviada;
4. 3 (incompleto): apenas uma parte da resposta do servidor foi recebida;
5. 4 (completo): todas as informações foram recebidas e a conexão foi encerrada com sucesso.

Note que com tais informações e um pouco de criatividade é fácil montar um aviso de ‘carregando’ para o usuário.

XMLHttp.status: é uma lista de estados proveniente do protocolo HTTP, definida por:

1. 200 (OK): arquivo encontrado com sucesso;
2. 304 (NOT MODIFIED): o arquivo não foi modificado desde o ultimo request;
3. 401 (UNAUTHORIZED): cliente não tem autorização para acessar o arquivo;
4. 403 (FORBIDDEN): cliente falhou na autorização;
5. 404 (NOT FOUND): quando o arquivo não existe na localização informada.

Com essas informações também é possível fazer um tratamento mais refinado para possíveis erros.

XMLHttp.responseText: Esse é o texto proveniente da execução com sucesso do arquivo chamado em open(); É esse retorno que deve ser manipulado para exibir o resultado desejado.

XMLHttp.statusText: Esse é o texto de retorno do status, normalmente utilizado para saber qual foi o erro, quando algo não aconteceu como o esperado.

XMLHttp.send: é o método que envia a requisição propriamente dita, ao utiliza um requisição por GET não precisamos passar nenhum parâmetro, entretanto quando utilizamos POST devemos passar uma lista de variáveis que serão anexadas ao protocolo HTTP, essa lista será melhor explicada quando exemplificarmos a utilização do POST.

function getById() {
	var id      = document.getElementById("id").value;
	var result  = document.getElementById("result");
	var XMLHttp = generateXMLHttp();
	XMLHttp.open("get", "getData.php?id=" + id, true);
	XMLHttp.onreadystatechange = function(){
		if (XMLHttp.readyState == 4)
			if (XMLHttp.status == 200){
				result.innerHTML = XMLHttp.responseText;
			} else {
				result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
			}
	};
	XMLHttp.send(null);
}

Analisando agora todos os métodos e operadores do objeto XMLHttpRequest podemos notar a seguinte sequência de ações:

1. Cria-se um objeto do tipo XMLHttpRequest;
2. Abre-se a conexão com o tipo de operador get apontando para uma página em PHP chamada getData.php?id=%id%, sendo que %id% é uma variável obtida pelo input id em nosso HTML. Ainda marca-se como true uma conexão assíncrona;
3. Atribui-se uma função que é executada a qualquer mudança de estado, e no momento em que obtêm-se os códigos de que as informações foram recebidas com sucesso e a conexão foi fechada (XMLHttp.readyState == 4) e o arquivo foi encontrado com sucesso (XMLHttp.status == 200) então atribui-se ao div com id result a resposta fornecida pela página em questão, caso contrário mostra-se uma mensagem de erro;
4. Envia-se a requisição através do método send, passando null como parâmetro, pois estamos usando uma requisição do tipo GET.

Antes de analisarmos as demais funções do arquivo func.js vamos ver como foi construído o arquivo invocado pela função getById().

< ?php

$id   = $_GET['id'];
$sql  = "";

if(empty($id)){
	$type = "all";
	$sql = "SELECT * FROM contatos";
}
else{
	$type = "id";
	$sql = "SELECT * FROM contatos WHERE id = " . mysql_real_escape_string($id);
}

$user = "root";
$pass = "";
$host = "localhost";
$base = "agenda";
mysql_connect($host, $user, $pass);
mysql_select_db($base);

$result = mysql_query($sql);

if($type == "all"){
	$return = "";
	while($data = mysql_fetch_array($result)){
		$return .= "Nome: " .     $data['nome'] .     "
";
		$return .= "E-mail: " .   $data['email'] .    "
";
		$return .= "Telefone: " . $data['telefone'] . "
";
		$return .= "";
	}
}
else{
	if($data = mysql_fetch_array($result)){
		$return .= "Nome: " .     $data['nome'] .     "
";
		$return .= "E-mail: " .   $data['email'] .    "
";
		$return .= "Telefone: " . $data['telefone'] . "
";
	}
	else{
		$return .= "Não foi possível listar o registro com id: " . $id;
	}
}

echo $return;
?>

Esse arquivo recupera uma variável passada por GET e atribui a uma variável $id. Uma rápida verificação é feita para verificar se a id está vazia. Lembrando que nossa aplicação deve retornar todos os registros caso nenhum registro específico seja selecionado. Então montamos as sentenças SQL e iniciamos uma conexão com o banco de dados. Logo após exibimos através do comando echo as informações obtidas do banco de dados. Note que são exatamente essas informações serão colocadas em nossa página principal.

Vamos agora analisar uma maneira de inserir os dados utilizando uma requisição do tipo POST.

O primeiro passo para construir a inserção de dados por Ajax está relacionado a construção de uma função que irá construir uma string que será passada como parâmeto da função send do objeto XMLHttpRequest. Essa string é semelhante aos parâmetros passados depois passados de uma url quando trabalhamos com variáveis de GET. Sua formatação é dada por variavel1=valor1&variavel2=valor2&…variavelN=valorN. Segue a função que analisa os campos do formulário passado como função e gera essa string.

function generateFieldsValues(formInsert){
	var strReturn = new Array();

	for(var i=0; i < formInsert.elements.length; i++){
		var str = encodeURIComponent(formInsert.elements[i].name);
		str    += "=";
		str    += encodeURIComponent(formInsert.elements[i].value);
		strReturn.push(str);
	}
	return strReturn.join("&");
}

A função simplesmente pega o cada elemento do formulário e gera uma samblagem no formato citado acima.

Agora vamos analisar a função que faz a inserção propriamente dita. Em primeiro lugar gera-se uma string com a função anteriormente descrita. Os próximos passos são semelhantes aos descritos para a utilização da função getById(). A única diferença está na utilização da requisição POST post ao invés de GET, e na passagem das variáveis no método send.

function insertData(){
	var formInsert   = document.forms[0];
	var fieldsValues = generateFieldsValues(formInsert);
	var result       = document.getElementById("result");

	var XMLHttp = generateXMLHttp();
	XMLHttp.open("post", 'insertData.php', true);
	XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

	XMLHttp.onreadystatechange = function (){
		if(XMLHttp.readyState == 4)
			result.innerHTML = XMLHttp.responseText;
		else
			result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
	};
	XMLHttp.send(fieldsValues);
}

O arquivo insertData.php é um arquivo PHP que faz uma simples inserção no banco de dados. Atenção para como se recuperam as informações. Aqui, utilizamos a variável global $_POST ao invés de $_GET.

< ?php

$nome     = $_POST['nome'];
$email    = $_POST['email'];
$telefone = $_POST['telefone'];

$sql = "INSERT INTO contatos (id, nome, email, telefone) VALUES ('', '$nome', '$email', '$telefone')";

$user = "root";
$pass = "";
$host = "localhost";
$base = "agenda";
mysql_connect($host, $user, $pass);
mysql_select_db($base);

if($result = mysql_query($sql)){
	$return = "O registro foi inserido com sucesso!";
}
else{
	$return = "Erro ao inserir o registro no banco de dados.";
}

echo $return;
?>

Nota: A utilização dos arquivos PHP demostram apenas um exemplo de como o Ajax pode funcionar, lembrando que a linguagem pode ser substituída utilizando os mesmos conceitos aqui explicados.

O exemplo da agenda é um exemplo básico, utilizando os conceitos básicos e nativos da tecnologia Ajax. Na prática existem muitas ferramentas ou frameworks que auxiliam em sua utilização. Vamos analisar agora a utilização de Ajax com a ferramenta JQuery.

Ajax com jQuery

jQuery é uma biblioteca escrita em JavaScript desenvolvida com o objetivo de simplificar a interação com os objetos HTML. Com a utilização da biblioteca jQuery os desenvolvedores podem se concentrar na construção lógica de suas aplicações enquanto deixam para a biblioteca a missão de garantir a compatibilidade (discutida anteriormente) entre os navegadores.

Outra grande vantagem em se utilizar JQuery, é que estão disponíveis na web uma infinidade de plug-ins que o utilizam como base e sua infinidade de recursos. Dentre suas principais funcionalidades podemos destacar:

resolução da incompatibilidade entre os navegadores;
redução de código;
reusabilidade do código através de plug-ins;
implementação segura de recursos do CSS1, CSS2 e CSS3;
utilização de uma vasta quantidade de plugins criados por outros desenvolvedores;
trabalha com AJAX e DOM.

A biblioteca jQuery não requer instalação. Por se tratar de um arquivo JavaScript formal, basta que você crie um link para o arquivo, na seção head do documento onde o script irá rodar, tal como faz com qualquer arquivo JavaScript tradicional.

O modo com que se utiliza a biblioteca jQuery acontece de forma diferenciada que as implementações em JavaScript. Como a ideia do jQuery é simplificar, sua utilização é concentrada em um único lugar, evitando que se espalhem diferentes chamadas e funções por todo o código.

Sua estrutura básica é:

$(document).ready(function() {
// faça alguma coisa quando o DOM estiver pronto
});

Assim, logo após o documento estar carregado todas as funcionalidades descritas aqui serão aplicadas aos elementos HTML. Imagine por exemplo que se queira adicionar uma funcionalidade a um botão, então poderíamos utilizar:



Get Text




Digite seu nome:

Note que, o elemento botão não está ligado diretamente a nenhuma ação do JavaScript, isso fica por conta do que foi definido em $(‘#botao’).click(function(){}); O objetivo do artigo não é entrar em detalhes da biblioteca de jQuery, mas focar na utilização de seus recursos para a construção de sites com a tecnologia Ajax.

Existem diferentes formas para se trabalhar com Ajax utilizando a biblioteca jQuery, basicamente todas seguem a mesma lógica, mas sua sintaxe e recursos são diferentes.

A primeira forma de utilizar JQuery com Aajax é através da função load(). Nela observamos 3 parâmetros:

1. url: é o arquivo ao qual será solicitada a requisição;
2. parâmetros: são os parâmetros a serem enviados para a página de destino;
3. callback: qual será a função de retorno a ser utilizada após a execução da página de destino, com os parâmetros passados;

O próximo exemplo demonstra como seria possível utilizar a tecnologia Ajax para criar um sistema CRUD (Create, Retrieve, Update e Delete) em uma aplicação web.

Ajax com jQuery

Note que nesse caso utilizamos a importação da biblioteca jQuery diretamente do servidor onde ela está hospedada, é uma prática interessante caso não se queira deixar uma biblioteca junto de seus arquivos. Nesse exemplo utilizamos a biblioteca JQuery para aplicar uma determinada função a todos os botões da página, isso pois procura-se pelo seletor $(“input[type=button]“). Para cada um desses botões, a função click é alterada e cria-se uma variável chamada acao. Essa variável recebe a string referente ao atributo value do elemento HTML. Depois disso, utiliza-se a propriedade load() em um seletor que busca pelo div de id “box”. É importante destacar que essa função carrega automaticamente o conteúdo retornado ao elemento que a estiver chamando, nesse caso um seletor que aponta para um div. Note que o primeiro parâmetro é o nome do arquivo a ser executado, ‘requisicao.php’ o segundo parâmetro tem uma característica especial utilizada pela biblioteca JQuery, onde formata-se {var:valor}. Dessa forma é possível capturar através de uma variável de POST dentro do arquivo PHP uma variável com o nome ‘var’ com o valor descrito. Ainda temos uma função que é chamada depois que a solicitação terminou, a função ready() foi criada logo abaixo das invocações JQuery, justamente para demonstrar que é possível fazer uma mesclagem com a linguagem JavaScript tradicional.

Abaixo temos o arquivo PHP que apenas filtra a ação passada (de acordo com o botão clicado) e para cada uma delas exibe uma mensagem.

< ?php
$acao = $_POST['acc'];

switch($acao){
	case 'Editar':
		echo 'A ação selecionada é editar';
	break;

	case 'Novo':
		echo 'A ação solicitada é criar';
	break;

	case 'Exibir':
		echo 'A ação solicitada é exibir';
	break;

	case 'Deletar':
		echo 'A ação solicitada é deletar';
	break;
}
?>

A Figura 4 mostra a tela de exemplo da aplicação criada utilizando a biblioteca jQuery.

Uma outra característica interessante do método load() é a capacidade de filtrar o conteúdo a ser exibido. Colocando uma string contendo ‘#nome_da_div’ que será exibida logo após o nome do arquivo escolhido, temos um filtro automático que irá buscar no conteúdo retornado somente a div especificada.

Ajax com jQuery

Nesse exemplo usamos diferentes botões que carregam um conteúdo de acordo com o nome do botão que é acionado.


	Parte 1
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam era



	Parte 2
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam era



	Parte 3
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam era

A Figura 5 mostra o carregamento de uma parte depois que o botão “parte_1” é acionado:

Além do método load() a biblioteca JQuery ainda oferece outras opções para utilização de Ajax, a estrutura é bem semelhante a que vimos do load():

$.post(url, parâmetros, função_retorno(data));
$.get(url, parâmetro, função_retorno(data));

Aqui os parâmetros também são formatados especialmente, com uma lista de {variavel1: valor1, variavel2, valor2, …, variavelN, valor}.

A principal diferença é que ao invés de se colocar o conteúdo diretamente em um div selecionado, temos a opção de implementar uma função que tratará os dados de retorno. Nota-se que a diferença entre o $.post e o $.get está somente na questão de como os dados serão tratados no arquivo que receberá a requisição.

Ajax com jQuery

Note que o terceiro parâmetro da invocação $.post é a declaração de uma nova função, chamada call_back e que apresenta um variável data. Por definição essa variável é o retorno da requisição efetuada.

< ?php
$txt = $_POST['txt'];
if(!empty($txt)){
	echo "Você digitou: " . $txt;
}
else{
	echo "Campo está vazio.";
}
?>

A Figura 6 mostra o exemplo depois da transferência da informação digitada.

Conclusão

A tecnologia Ajax está presente na maioria dos grandes sites: Google, Twitter, Facebook, entre outros. Com a evolução da Internet houve a necessidade de implementar algum recurso que suprisse a a deficiência do modelo requisição-resposta do protocolo HTTP. Por esse motivo, quando se fala em Ajax, têm-se a ideia de algo novo, relacionado com as novidades que compõem a Internet 2.0.

O primeiro exemplo tenta demonstra em baixo nível como realmente funciona uma implementação em Ajax, explorando suas propriedades. Desta forma, conceitua-se como funcionamento do modelo requisição-resposta de forma assíncrona.

O segundo exemplo utiliza a biblioteca JQuery e demonstra a utilização de seus recursos para a implementação utilizando Ajax. Desta forma, fica claro que a primeira implementação funciona bem para pequenos sistemas, entretanto ao se deparar com projetos maiores, têm-se a necessidade de alguma ferramenta que encapsule a camada de Ajax, assim como o JQuery faz.

Existem ainda ferramentas que auxiliam no desenvolvimento com Ajax em um nível mais abstrato, como por exemplo o Sajax para a linguagem PHP. O framework é composto por uma classe e uma série de regras que em resumo transformam uma função escrita na própria linguagem PHP em uma função JavaScript. Uma de suas desvantagens é a quantidade se “sujeira” gerada na página em que o Sajax funciona, para mapear a função ele precisa escrever uma série de outras funções em JavaScript que mascaram toda a camada Ajax.

Por fim, é importante salientar que Ajax é uma tecnologia que pode ser vinculada a qualquer linguagem de programação para web. A parte inicial demonstrada nesse artigo, é bastante parecida para todas as linguagens, mas existem inúmeras ferramentas e frameworks específicos para as linguagens que ajudam em sua utilização.

Faça aqui o download dos arquivos de exemplo utilizados nesse post.

Aplicações dinâmicas com PHP e Ajax

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Sorteio: Livro Smashing HTML5

Pedro Rogério — Tue, 14 Feb 2012 13:56:47 +0000

Em mais uma parceria de sucesso com a Bookman Editora, irei sortear aqui no blog o livro Smashing HTML5, de Bill Sanders, que foi inclusive revisado pelo Diego Eis.

Se você quer aprender mais sobre HTML5 e ficou interessado na promoção, para participar é muito fácil. A partir de hoje, dia 14 de Fevereiro, até o dia 19 de Fevereiro de 2012 o formulário de comentários estará aberto, portanto, basta você deixar um comentário com um e-mail válido e você já está concorrendo. A ferramenta que utilizarei para o sorteio será o Random.org.

Após o sorteio entrarei em contato imediatamente por e-mail com o ganhador, e caso nas próximas 72 horas eu não obtenha nenhuma resposta, farei um novo sorteio.

Mas não fique triste se você não for o feliz ganhador, você pode comprar o livro com 20% de desconto até o dia 29 de Fevereiro de 2012 utilizando o seguinte código no carrinho de compras: pinceladashtml5.

Abaixo você pode ler maiores informações sobre o livro:

“HTML5 está cheia de recursos incríveis, incluindo os novos elementos específicos de conteúdo e controles de formulário, o elemento canvas para desenho, a reprodução de áudio e vídeo e muitos outros. Mas por onde começar? Com Smashing HTML5, você tem tudo o que precisa para fazer a transição para a nova versão da linguagem e começar a trabalhar rapidamente. Fiel à missão do Smashing Magazine (smashingmagazine.com), um dos sites de Web design mais populares do mundo, este é um guia prático para a construção de sites modernos e atraentes que aproveitam todas as vantagens dos recursos oferecidos por HTML5.”

O ganhador da promoção foi o Rafael cardoso

Sorteio: Livro Smashing HTML5

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Webservice – Consulta de CEP diretamente ao site dos correios

Felipe Roberto — Tue, 31 Jan 2012 10:30:32 +0000

Até pouco tempo, tinhamos um site onde podiamos fazer consultas via get, ou até baixar a base de dados utilizada de forma gratuita. Mas seu maior problema para todos que já utilizaram tal base era o fato desta ser muito antiga. Com isso surgia o problema de ruas e bairros com nomes errados ou até mesmo não existentes. O tempo passou, a base ficou ainda mais velha e o site passou a cobrar pelos serviços. Mas não tem problema, os correios que antes tinham um sistema que não permitia se aproveitar dos dados (gerava as respostas em imagens), hoje nos disponibiliza uma versão mobile que facilmente nos permite tratar as respostas.

Para criarmos nosso próprio webservice em PHP vamos simular o comportamento realizado pelo site através de requisições cURL.

Aqui incluimos biblioteca phpQuery (http://code.google.com/p/phpquery/ que permite manipular conteúdo html atrvés de seleções tipo jquery/css):

include('phpQuery-onefile.php');

Após criamos uma função para fazermos requisições via cURL, para depois tratarmos com o phpQuery.

function simple_curl($url,$post=array(),$get=array()){
	$url = explode('?',$url,2);
	if(count($url)===2){
		$temp_get = array();
		parse_str($url[1],$temp_get);
		$get = array_merge($get,$temp_get);
	}

	$ch = curl_init($url[0]."?".http_build_query($get));
	curl_setopt ($ch, CURLOPT_POST, 1);
	curl_setopt ($ch, CURLOPT_POSTFIELDS, http_build_query($post));
	curl_setopt ($ch, CURLOPT_FOLLOWLOCATION, 1);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	return curl_exec ($ch);
}

Depois de ambiente preparado, mãos as teclas. Aqui esta o cep a ser consultado:

$cep = $_GET['cep'];

Fazemos uma chamada POST direta aos correios http://m.correios.com.br/movel/buscaCepConfirma.do. Para entender, acesse a url pelo navegador e faça uma consulta, nosso webservice fará o mesmo, mas atráves do servidor.

Aqui é onde capturamos o HTML através da chamada cURL, enviando os parametros necessários.

$html = simple_curl('http://m.correios.com.br/movel/buscaCepConfirma.do',array(
	'cepEntrada'=>$cep,
	'tipoCep'=>'',
	'cepTemp'=>'',
	'metodo'=>'buscarCep'
));

Fazemos o phpQuery ler o HTML capturado:

phpQuery::newDocumentHTML($html, $charset = 'utf-8');

Aqui tratamos os dados com o phpQuery a função pq(), é equivalente ao $() do jQuery $(#id elemento.classe).html() em jQuery, e em PHP pq(#id elemento.classe)->html(). Então temos nosso logradouro, bairro, cidade/uf e cep:

$dados =
array(
	'logradouro'=> trim(pq('.caixacampobranco .resposta:contains("Logradouro: ") + .respostadestaque:eq(0)')->html()),
	'bairro'=> trim(pq('.caixacampobranco .resposta:contains("Bairro: ") + .respostadestaque:eq(0)')->html()),
	'cidade/uf'=> trim(pq('.caixacampobranco .resposta:contains("Localidade / UF: ") + .respostadestaque:eq(0)')->html()),
	'cep'=> trim(pq('.caixacampobranco .resposta:contains("CEP: ") + .respostadestaque:eq(0)')->html())
);

Como nem tudo é perfeito, temos que tratar as informações de cidade/uf que vem ‘grudadas’:

$dados['cidade/uf'] = explode('/',$dados['cidade/uf']);
$dados['cidade'] = trim($dados['cidade/uf'][0]);
$dados['uf'] = trim($dados['cidade/uf'][1]);
unset($dados['cidade/uf']);

Pronto, basta agora imprimir no formato json e começar a fazer as requisições via ajax:

die(json_encode($dados));

Ao invés do phpQuery, podiamos ter usado o YQL, porém teriamos dobrado o numero de requições, pois chamariamos o servidor do yahoo que por sua vez chamaria o servidor dos correios

Façaa aqui o download dos arquivos de exemplo.

Webservice – Consulta de CEP diretamente ao site dos correios

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

ceplivre – API de CEPs para formulários

Pedro Rogério — Mon, 19 Dec 2011 09:57:46 +0000

Você provavelmente já deve ter passado por um daqueles formulários onde ao colocar o CEP da rua onde você mora, ele automaticamente preenche os outros campos com o seu endereço. Pois bem, por trás disso existe um simples código que busca em um banco de dados seu endereço através do seu CEP.

Até aí tudo bem, mas e para desenvolver uma engenhoca dessa? Manter o seu banco de dados com os CEPs de todo o brasil atualizados não é tarefa fácil, por isso indico a vocês um site que acabei descobrindo esses dias, o ceplivre, onde através do seu sistema provem informações básicas de endereços, códigos do IBGE, códigos DDD (Discagem Direta à Distância), altitude, área e coordenadas (latitude e longitude) de todas as cidades brasileiras.

Para você ter idéia, hoje o ceplivre conta com uma base de mais de 630.000 CEPs cadastrados que são atualizados diariamente. Manter uma base dessas atualizada não é tarefa fácil, por isso eles dispõem de diversos planos, desde o plano Free, onde você pode efetuar até 15 consultas por dia, até o Plano Premium, com pesquisas ilimitadas e acesso a todas as features do sistema.

O webservice do ceplivre é compatível com todas as principais linguagens de programação web, entregando dados em formatos CSV, XML e JSON. Para utilizar o sistema é simples, basta desenvolver uma rotina que faça acessos HTTP ao servidor, onde as URLs de pesquisa seguem a seguinte estrutura:


http://ceplivre.com.br/consultar/$tipo/$key/$busca/$formato

$tipo é o tipo de busca, por CEP (cep) ou por endereço (logradouro).
$key é a chave de autenticação enviada por e-mail na confirmação da assinatura.
$busca é o termo de busca. Se for um CEP, o código (01001-000). Se for um endereço, parte do nome (Paulista).
$formato é o formato do resultado da busca que pode ser XML (xml), CSV (csv) ou JSON (json).

Portanto, para efetuar uma busca em formato JSON, basta utilizar a seguinte URL:


http://ceplivre.com.br/consultar/cep/sua_key_aqui/01001-000/json

Estando tudo Ok, seria retornado o seguinte JSON:

{

    "cep": [
        {
            "tp_logradouro": "Praça",
            "tp_logradouro_id": "8",
            "logradouro": "da Sé",
            "bairro": "Sé",
            "cidade": "São Paulo",
            "uf_sigla": "SP",
            "ufnome": "São Paulo",
            "id_estado_ibge": "35",
            "cep": "01001-000",
            "muncoddv": "3550308",
            "ddd": "11",
            "altitude": "760",
            "latitude": "-23.548",
            "longitude": "-46.636",
            "area": "1522.986",
            "capital": "S"
        }
    ]

}

Agora por exemplo eu poderia manipular esses dados com JavaScript para dar mais interatividade ao meu formulário quando o usuário preencher o campo CEP.

ceplivre – API de CEPs para formulários

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Sorteio – Livro Smashing CSS

Pedro Rogério — Mon, 12 Dec 2011 10:15:31 +0000

Já que o Natal está próximo, eu em conjunto com a Bookman Editora, iremos sortear um exemplar do livro Smashing CSS, sim, aquele famoso livro escrito por Eric Meyer, com a revisão técnica de Diego Eis.

Veja abaixo um breve resumo sobre o livro:

mashing CSS vai muito além do básico, mostrando desde a seleção das ferramentas corretas até os efeitos com CSS, as técnicas CSS3 com jQuery e o futuro com o uso de HTML5 e CSS3. Poucas pessoas na indústria podem mostrar as vantagens e desvantagens da CSS como Eric Meyer, e neste livro o autor fornece técnicas perfeitas, totalmente úteis e universalmente aplicáveis no mundo real.

Fiel à missão do Smashing Magazine (smashingmagazine.com), um dos sites de Web design mais populares do mundo, Smashing CSS é o guia prático para a construção de layouts modernos na Web.

O que você precisa fazer para participar? Basta deixar um comentário nesse post utilizando um e-mail válido, para caso você seja o vencedor eu possa entrar em contato. O formulário de comentários ficará aberto por uma semana a contar da data de publicação desse post. O sorteio será efetuado utilizando o Random.org.

Mas não fique triste, se você não for o feliz ganhador, você ainda pode comprar o livro com 20% de desconto utilizando o seguinte código: pinceladasdaweb. Mas atenção, a validade desse código é somente um mês. Boa sorte a todos os participantes.

O ganhador foi o Marcelo Oliveira.

Sorteio – Livro Smashing CSS

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Ajax Image Gallery

Pedro Rogério — Mon, 28 Nov 2011 09:53:39 +0000

Criar galerias de imagens provavelmente é o que os desenvolvedores mais fazem no dia-a-dia, e pra facilitar isso, vou deixar aqui um exemplo de um código paraa criar uma galeria de imagens com a utilização de Ajax.

O HTML é extremamente simples, crio um elemento para englobar a imagem maior, e os thumbnails são links para as imagens maiores:

...

E depois o resto fica por conta do JavaScript:

        //Flag criada para evitar que 2 imagens sejam abertas ao mesmo tempo
        var working = false;

	$('li a').click(function(e){
		e.preventDefault();
		if($(this).hasClass('active')) return;

		if(working){
	    	    return false;
	        }

		working = true;

		var imgUrl = $(this).attr('href'),
		img = new Image();

		$('li a').removeClass('active');
		$(this).addClass('active');

		$("#current").remove();
		$('#placeholder').addClass('loading');

		$(img).load(function(){
			$(this).css({display: 'none'});
			$('#placeholder').removeClass('loading').append(img);
			$(img).fadeIn();
			working = false;
		}).attr('src',imgUrl).attr('id','current');
	});

Ajax Image Gallery

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Instagr.am API

Pedro Rogério — Mon, 14 Nov 2011 09:50:31 +0000

O Instagram é um serviço de compartilhamento de fotos pelo celular, por enquanto disponível somente para usuários de iPhone (Sorry, Android Users). Através do aplicativo no celular, seus usuários tiram fotos em estilo Polaroid e podem enviá-las para seus amigos, compondo uma espécie de rede social. Assim como o twitter, você pode seguir pessoas e ser seguido, enviando as fotos que retratam o seu cotidiano junto com textos curtos, e vendo fotos de amigos. Dá ainda para dizer, por geolocalização, onde as fotos foram tiradas.

O serviço tem crescido drasticamente nos últimos dias, e hoje tem aproximadamente 12 milhões de usuários. E como qualquer outra aplicação pop, eles possuem uma API, onde você pode por exemplo mostrar suas últimas fotos em seu site, ou algo do tipo.

Antes de tudo, para utilizar a API do Instagr.am, você deve ir até o site e criar um aplicativo para obter um access token e um client id, sem os mesmos você não consegue fazer nada.

Com tudo isso OK, vamos a um exemplo prático, mostrar as últimas 20 fotos de um usuário qualquer do Instagr.am. O código responsável por isso você pode ver abaixo:

var accessToken = 'seu_access_token';
var username= "nome_do_usuario";
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.getUser();
		},
		getUser: function() {
			var getUserURL = 'https://api.instagram.com/v1/users/search?q='+ username +'&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getUserURL,
				success: function(data) {
					var getUserID = data.data[0].id;
					instagram.loadImages(getUserID);
				}
			});
		},
		loadImages: function(userID) {
			var getImagesURL = 'https://api.instagram.com/v1/users/'+ userID +'/media/recent/?access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Você também pode pegar as últimas fotos mais populares, o código responsável por isso está abaixo:

var accessToken = 'seu_access_token';
var limit = 32; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/media/popular?access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Caso você queira buscar por alguma tag, utilize o código abaixo:

var accessToken = 'seu_access_token';
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/tags/html5/media/recent?client_id=be52cb013dda4c47a03cdd5689896c37&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit ; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Eu também posso buscar fotos por geolocalização, basta passar na requisição as coordenadas geográficas e ele busca todas as fotos em um raio máximo de 5 KM, como podem ver no código de exemplo abaixo:

var accessToken = 'seu_access_token';
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/media/search?lat=52.370275&lng=4.886055&distance=5000?client_id=be52cb013dda4c47a03cdd5689896c37&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Instagr.am API

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Grayscale Images Hover com HTML5 Cross Browser

Pedro Rogério — Fri, 11 Nov 2011 20:26:02 +0000

A um tempo atrás o blog Web Designer Wall fez mais um de seus interessantes posts mostrando como é possível criar imagens em escala cinza com JavaScript, mas especificamente com a utilização de HTML5 (Canvas). Só que como todos sabem, o Internet Explorer não tem suporte a esse tipo de feature, mas você pode contornar isso facilmente com um código prorietário da Microsoft.

Basicamente, o código é o seguinte:

element.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';

Com isso basta você fazer uma verificação e se o user agent no momento for o IE, use esse código, caso contrário, use HTML5.

Grayscale Images Hover com HTML5 Cross Browser

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Como instalar o Windows 8 em uma máquina virtual

Pedro Rogério — Thu, 27 Oct 2011 16:24:40 +0000

A idéia da Microsoft com a criação do Windows 8 é de criar um sistema operacional capaz de rodar em tablets, mercado praticamente dominado pela Apple, em telas sensíveis ao toque e em PCs. Recentemente eles disponibilizaram versões de teste do seu mais novo sistema operacional, e é isso que vou mostrar nesse post, a como instalar o Windows 8 em uma máquina virtual.

Antes de tudo, tenha o Virtual Box instalado em seu PC, pois o tutorial foi desenvolvido com base nele. Após, vá até o site da Microsoft e baixe a imagem do Windows 8, nesse tutorial a utilizada é a seguinte: Windows 8 Developer Preview with developer tools English, 64-bit (x64).

Agora vamos aos passos de instalação, primeiro, abra o Virtual Box:

Após clique e Novo para criar uma nova máquina virtual, você verá a seguinte tela, basta então clicar em próximo:

Você irá para a tela onde deverá escolher o nome e tipo do sistema operacional, basta preencher como abaixo e clicar em próximo:

Nesse próximo passo, configure a memória para o quanto julgar necessário:

Basta deixar como na imagem abaixo:

Aqui é onde você configura o quanto de seu HD será alocado para a máquina virtual e onde a mesma será salva, altere conforme necessário:

Agora basta clicar em criar:

Agora basta aguardar sua máquina virtual ser criada:

Basta clicar em criar novamente:

Com a máquina virtual criada, selecione a mesma e clique em configurações:

Depois vá até a aba Sistema > Processador e clique em Habilitar PAE/NX:

Próximo passo vá até a aba Armazenamento, aqui é onde você irá utilizar a ISO que baixou anteriormente, basta clicar no CD localizado ao lado de Drive de CD/DVD e selecionar a ISO do Windows 8:

Como podem ver agora, o drive de CD contém uma ISO, basta clicar em Ok:

Agora você voltará para a tela de gerenciamento das máquinas virtuais, basta clicar em iniciar e aguardar a instalação do Windows 8:

Basta agora seguir os passos de instalação que logo você terá o Windows 8 funcionando:

Como instalar o Windows 8 em uma máquina virtual

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Random Posts

Ler Feeds com o Google JSAPI

Pedro Rogério — Mon, 10 Oct 2011 10:46:00 +0000

O Google JSAPI é uma ferramenta muito poderosa. Ao invés de carregar uma biblioteca separada para cada API do Google você pode simplesmente carregar a JSAPI e através do google.load chamar a biblioteca de que precisa.

Nesse tutorial vou carregar a biblioteca de Feeds para ler um Feed RSS externo. O que você deve simplesmente é incluir a biblioteca do JSAPI na sua página:

Após isso, vamos criar a função responsável por fazer o parser do feed:

//O endereço do Feed que desejo ler
var rss = "http://feeds2.feedburner.com/pinceladasdaweb";
//Número de itens a serem mostrados
var itens = 8;

var Feed = function() {
	return {
		init: function() {
			var blog = new google.feeds.Feed(rss);
			blog.setNumEntries(itens);
			blog.load(function(data) {
				if (!data.error) {
					Feed.parser(data.feed.entries);
				}else{
					$("#feed").empty().html("Ocorreu um erro ao ler o Feed");
				}
			});
		},
		parser: function(entries) {
			var view = [];
			view.push('');
			for (var i = 0; i < entries.length; i+=1) {
				view.push(''+entries[i].title+'
'+entries[i].contentSnippet+'');
			}
			view.push('');
			$("#feed").empty().append(view.join(''));
		}
	}
}();

E no HTML simplesmente adiciono uma div com o id ‘feed’, com uma imagem de loading que a removo assim que o Feed for carregado:

Aqui vocês podem ver um exemplo.

Ler Feeds com o Google JSAPI

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Aprenda mais sobre o console do Firebug

Pedro Rogério — Sat, 08 Oct 2011 14:08:15 +0000

A utilização do Firebug não é voltada somente a inspeção de CSS, existem várias outras coisas que você pode fazer com ele que podem facilitar e muito a vida do desenvolvedor web. Com base nisso, deixa aqui um link com 10 dicas para se tornar um melhor desenvolvedor com o Firebug.

Já para o console do Chrome, deixo aqui um vídeo interessante criado por Paul Irish com algumas dicas legais:

Aprenda mais sobre o console do Firebug

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Ler feed de outros sites com SimplePie

Pedro Rogério — Fri, 07 Oct 2011 10:33:06 +0000

Para aqueles que não conhecem, o SimplePie é uma poderosa ferramenta para leitura de feeds RSS ou Atom escrita em PHP. Algumas pessoas podem estar se perguntando, mas não é possível ler um feed com JavaScript? Sim, é possível, como mostrei aqui com JavaScript + YQL, a desvantagem na utilização de JavaScript é que ele não gera um cache, ou seja, a cada requisição na página, uma nova requisição é feita para a leitura do feed.

Já com o SimplePie isso não acontece, ele cria um arquivo de cache e novas requisições são feitas somente se o conteúdo for atualizado. Para que vocês entendam melhor, vamos a um exemplo. Antes de tudo, vá até o site do SimplePie e faça o download da aplicação.

Descompacte o zip e pegue somente o arquivo simplepie.inc, por enquanto só vamos precisar dele.

Dentro do diretório de sua aplicação, onde você quer mostrar os feeds, cria uma pasta chamada cache, e tenha certeza que é permitida a gravação nessa pasta. Agora vamos ao nosso código PHP:

< ?php
	include("simplepie.inc");
	$feed = new SimplePie('http://endereco_do_feed');
?>

Como podem ver basta dar um include do simplepie na página e depois atribuir a uma variável o feed que eu quero ler.

< ?php
    //5 é o número de itens que eu desejo mostrar
    $items = $feed->get_items(0, 5);
    foreach ($items as $item) :
        $title  = $item->get_title();
        $url 	 = $item->get_permalink();
        $desc = $item->get_description();

    // Pego as 30 primeiras palavras do nó description do Feed
    $desc_array = explode(" ", $desc);
    $desc_excerpt = array_slice($desc_array, 0, 30);
    $desc_output = implode(' ', $desc_excerpt);
?>

< ?php echo $title;?>
< ?php echo $desc_output;?> ...

< ?php endforeach; ?>

Após uso um foreach para percorrer esse XML e mostrar os itens na tela como eu desejo.

Vejam aqui nesse exemplo onde mostro o Feed de 3 blogs. Criei esse layout com base nesse exemplo somente para demonstração, portanto, teste em browsers modernos.

Ler feed de outros sites com SimplePie

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Slideshow com jCarousel

Pedro Rogério — Mon, 03 Oct 2011 10:28:02 +0000

Ao contrário do muitos pensam, o plugin jCarousel não precisa ser utilizado somente no desenvolvimento de um Carousel, ele pode também ser utilzado na criação de um Slideshow, e como vou mostrar, ele também funciona perfeitamente para isso.

A grande sacada do jCarousel é que ele possui suporte a controles externos, com isso basta então criar uma função que gere dinamicamente aqueles bullets que ficam logo abaixo do Slideshow, fazendo com que cada link ao ser clicado vá para sua imagem em questão:

function carouselSlideshow(carousel) {
	carousel.clip.hover(function () {
		carousel.stopAuto();
	}, function () {
		carousel.startAuto();
	});

	$('').insertAfter('.jcarousel-container');

	$('#slideshow li').each(function(index) {
			var number = parseInt(index) + 1;
			$('#bullets').append(''+ number +'');
	});

	$('#slideshow').delegate('#bullets a', 'click', function(){
		carousel.scroll($.jcarousel.intval($(this).text()));
		return false;
	});
};

Com a função pronta, basta chamá-la como um Callback dentro da chamada do jCarousel:

$('#slideshow ul').jcarousel({
	auto: 5,
	scroll: 1,
	wrap: 'last',
	initCallback: carouselSlideshow,
	itemVisibleInCallback: {
		onAfterAnimation: function(c, o, i, s) {
			--i;
			$('#bullets a').removeClass('active');
			$('#bullets a:eq('+i+')').addClass('active');
		}
	}
});

Slideshow com jCarousel

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

PHP Random HTML

Pedro Rogério — Fri, 23 Sep 2011 07:13:59 +0000

Suponho que algum dia você precise de alguma forma mostrar alguns itens de forma randômica em sua página, sejam eles banners ou coisa do tipo, vou deixar aqui um código em PHP que pode resolver isso facilmente para você.

< ?php
	$a = array(
		'Código HTML aqui',
		'Código HTML aqui',
		'Código HTML aqui',
		'Código HTML aqui'
	);
	shuffle($a);
	$na = array_slice($a, 0, 2);
	echo implode('', $na);
?>

Uma rápida explicação para entender a funcionalidade desse código:

Linha 1 – Crio um array com os meus elementos HTML.
Linha 8 – Embaralho os elementos do array.
Linha 9 – Crio uma nova variável onde vou extrair uma parte do array que criei anteriormente, ou seja, vou pegar alí 2 itens.
Linha 10 – Mostro os itens na tela de forma aleatória.

Vejam aqui um exemplo funcionando. Dê alguns refreshs na página e você verá que os itens são mostrados de forma aleatória. Você pode fazer o download do exemplo aqui.

PHP Random HTML

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Introdução ao YQL – Yahoo Query Language

Pedro Rogério — Wed, 21 Sep 2011 08:57:53 +0000

O YQL (Yahoo Query Language) é uma API do Yahoo criada para facilitar a vida dos desenvolvedores, onde ele reune milhares de serviços únicos. Essa API não é relativamente nova, já existe a um bom tempo, mas não vejo ninguém explorar seu potencial, por isso resolvi fazer esse post.

O YQL funciona de maneira similar a um banco de dados, onde os serviços são disponibilizados através de tabelas, onde podemos fazer consultas através de uma sintaxe semelhante a do SQL, sim, você poderá selecionar os dados a partir de uma simples select, ou combinando com subselects, e etc…

Pelo console, quando selecionamos uma tabela, já é mostrado um exemplo de como seria sua consulta, o que facilita para quem não tem conhecimentos sólidos sobre SQL. Por padrão, são exibidas as tabelas referentes aos serviços do Yahoo!, mas qualquer um pode adicionar novos serviços desde que o mesmo seja proprietário das informações ou as mesmas sejam explicitamente de domínio público.

Para ter acesso as tabelas públicas, basta fazer o seguinte, acesse o console, logo a direita você verá o título DATA TABLES, basta clicar em: Show Community Tables

Agora você tem acesso a todas as tabelas comunitárias. A partir daqui você poderia, por exemplo, consultar a tabela do W3C e executar a seguinte query no console.

select * from w3c.check where uri='www.yahoo.com'

Essa query é responsável por verificar e validar o HTML, tudo através do YQL, e o retorno disso tudo é um XML ou JSON, a partir daí eu posso fazer o que quiser com essas informações.

Em um outro exemplo que fiz aqui, efetuo a seguinte consulta no console:

select * from html where url='http://www.cssnolanche.com.br' and xpath='//div[@class="shadow"]//h2'

Essa query é responsável por acessar meu outro blog, ler todo o HTML, e com XPath pegar todo o conteúdo que está dentro da tag h2, que consequentemente está dentro de uma div com a class shadow. Vá até o console, escolha a opção XML ou JSON, clique em test e veja o resultado.

Após, eu posso pegar a REST QUERY gerada e fazer um parser com jQuery.

Em um outro exemplo também poderia pegar meu últimos Tweets, com a seguinte query:

select * from twitter.user.timeline where screen_name='pinceladasdaweb'

E depois fazer o parser do JSON gerado.

Em uma consulta mais complexa, poderia mesclar o feed dos meus 2 blogs e depois filtrar somente pelo título dos posts:

select channel.item.title,channel.item.link, channel.item.pubDate
    from xml where url in(
      'http://feeds.feedburner.com/pinceladasdaweb',
      'http://feeds2.feedburner.com/CssNoLanche'
    )
  | unique(field="channel.item.link")
  | sort(field="channel.item.pubDate", descending="true")

As possibilidades de uso do YQL são infinitas, mostrei aqui 3 exemplos básicos de uso, mas como você pode ver, o Dirceu mostra em seu blog como é possível fazer um Widget com os produtos do Submarino através do YQL e XPath. Ou então o Luis Cipriani que criou um Mash up para saber a localização das feiras livres aos domingos mais próximas de sua casa.

Introdução ao YQL – Yahoo Query Language

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?