Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards

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?

Como criar um botão customizado de Share no Facebook

Pedro Rogério — Mon, 19 Sep 2011 08:56:37 +0000

Nesse tutorial vou ensinar aqui a criar um botão customizado para compartilhar o que você quiser no Facebook. Sua função é bem parecida com a do botão Send, com a diferença que o Send não é customizável.

Antes de tudo, você deve ter uma conta de desenvolvedor no Facebook, pois será necessário criar uma APP. Basta ir então ao Facebook Developers, clicar em Aplicativos, e tentar criar uma nova APP, caso sua conta não seja de desenvolvedor, ele lhe dará um aviso de verificação de conta, basta seguir os passos e pronto, sua conta a partir de agora é de desenvolvedor.

Estando tudo ok, vamos criar a APP para o nosso botão customizado. Em aplicativos clique em Create New App. Será abeeto um modal semelhante ao abaixo, basta preencher com o nome da sua APP e concordar com os termos do Facebook:

Se tudo ocorreu bem, sua APP foi criada, e agora vamos preencher algumas informações na APP, como na imagem abaixo:

Em Informações básicas > App Domain, coloque o domínio do site onde o botão deverá funcionar, sem o http e www. Mas atenção, esse deve ser o domínio de onde você quer que o botão funcione, se você testar o botão fora desse domínio, ele não funionará.

Logo abaixo, na seção Website, coloque novamente o domínio, agora você pode colocar o http e o www, como mostrados na imagem. Pronto, sua APP já está ok, bastando só salvar as alterações.

Vamos agora criar um arquivo HTML para testar o botão, e após basta adicionar esse código JavaScript a sua página, pode ser dentro do body mesmo:

Atente-se a colocar o ID da sua aplicação onde está marcado ‘YOUR APP ID’, ele fica localizado no topo da sua aplicação. Vamos agora criar a função que irá abrir o pop-up para compartilhar o conteúdo. No meu HTML eu adicionei um botão que ao ser clicado ele abre o pop-up:

Basta então agora, o JavaScript:

var el = document.getElementById('share-button');

el.onclick = function (e) {
	e.preventDefault();
	FB.ui({
		method: 'feed',
		name: 'Conteúdo do campo nome',
		link: ' sua_url_aqui',
		picture: 'url_da_imagem_aqui',
		caption: 'Conteúdo do campo caption',
		description: 'Conteúdo do campo description'
	});
}

Como podem ver, utilizei JavaScript puro para fazer o click no botão, mas você pode fazer o mesmo com jQuery, basta utilizar o seguinte código:

$('#share-button').click(function (e){
	e.preventDefault();
	FB.ui({
		method: 'feed',
		name: 'Conteúdo do campo nome',
		link: ' sua_url_aqui',
		picture: 'url_da_imagem_aqui',
		caption: 'Conteúdo do campo caption',
		description: 'Conteúdo do campo description'
	});
});

Vamos a explicação do significado de cada campo:

method: O nome do método, configure como feed para abrir a caixa de diálogo para divulgar conteúdo.
name: Texto da primeira linha da nossa caixa de diálogo. Pode conter no máximo 99 caracteres.
link: A URL que deseja compartilhar.
picture: A URL da imagem que deseja mostrar com a mensagem no seu perfil. Recomenda-se utlizar uma imagem com 90×90 pixels.
caption: A legenda do link. Máximo de 100 caracteres.
description: A descrição do link. Máximo de 270 caracteres.

Agora, ao clicar no botão, será aberta uma caixa de diálogo semelhante a essa:

Vocês podem testar a funcionalidade do botão nesse exemplo que criei. E não se esqueçam de dar uma passada no meu perfil no Facebook.

Como criar um botão customizado de Share no Facebook

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?

Hot Shop SLA – 20 anos de história

Pedro Rogério — Thu, 15 Sep 2011 09:37:48 +0000

No mercado de publicidade e propaganda, a maturidade de uma empresa está na sua capacidade de se manter jovem, de falar a língua de seu cliente e tratá-lo com intimidade de quem o conhece de perto.

Essa é a SLA, uma das maiores, senão a maior agência de publicidade da Bahia, que atua no ramo desde 1991, e agora completa 20 anos, está chamando todos os profissionais de publicidade e propaganda para um projeto ousado.

Batizado de “Ação Hot Shop SLA 20 anos“, o projeto tem como parceiros a Unijorge e a Rede Bahia, e abre espaço para que estudantes desenvolvam uma campanha publicitária para uma empresa local. Serão formadas 3 equipes com 6 estudantes cada, onde terão 50 horas para elaborar um trabalho a partir dos briefings. Todo esse processo será acompanhado pela SLA juntamente com as empresas que serão objeto das peças da campanha.

A ação tem início no próximo dia 22/9 (quinta-feira), no Centro Universitário Jorge Amado, na Paralela, com o sorteio das equipes e entrega de briefings. As equipes contarão com estudantes em funções que os profissionais desenvolvem dentro das agências, como: atendimento, planejamento, mídia, produção, redação e direção de arte.

Tudo isso acontece até o dia 06/10, quando serão divulgados os vencedores do concurso, na noite de cerimônia de comemoração dos 20 anos da SLA.

Dependendo do desempenho dos participantes, a campanha vencedora poderá ser veiculada em mídia local, e, além disso, os seis integrantes da equipe vencedora farão um estágio de seis meses na SLA e recebem assinatura anual da Revista Meio&Mensagem.

A equipe que ficar em segundo lugar recebe assinatura anual do Jornal Propaganda e Marketing, e a terceira colocada garante sua inscrição no Workshop Vendendo e Aprendendo – Marketing Promocional.

Fique por dentro de tudo acessando a página da SLA no Facebook.

Hot Shop SLA – 20 anos de história

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?