Desenvolvedor FrontEnd - wbruno

window.history.pushState javascript – trocando a URL usando api html5 em páginas carregadas com ajax

admin — Wed, 22 Feb 2012 23:29:46 +0000

Bem simples, só editei o trecho que era necessário para enviar um history.pushState, no final da requisição ajax, que carrega a página em uma div, sem dar refresh no restante do site.

http://wbruno.com.br/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2

			$.ajax({
				url: href,
				success: function( response ){
					//forçando o parser
					var response = $( ''+response+'' );

					var data = response.find('#content').html();

					//apenas atrasando a troca, para mostrarmos o loading
					window.setTimeout( function(){
						content.fadeOut('slow', function(){
							content.html( data ).fadeIn();

							var title = response.find('title').text();
							window.history.pushState( href, title, href );
							document.title = title;
						});
					}, 500 );
				}
			});

Notem a linha:

window.history.pushState( href, response.find('title'), href );

É essa nova função que veio junto com o HTML5, que faz toda a mágica.
Browsers antigos não implementam esse método.

Agora podemos parar de forçar a barra usando o document.location.hash, como nessa implementação aqui:
http://wbruno.com.br/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/

Flash chamando função javascript, e javascript chamando função do flash – ExternalInterface

admin — Wed, 22 Feb 2012 15:37:05 +0000

Boas galera!

Precisei disso recentemente, e como não trabalho muito com flash, e nunca programei nada de verdade em ActionScript, pedi socorro ao mestre do flash: Thiago Cruz.

No blog dele, ele já postou ótimos exemplos, de utilizar a class externalinterface, então deixo por aqui também, o exemplo do código fonte que ele fez para mim.

O javascript fica assim:

function onFlashReady() {
    sendToAS("another test message");
}

function callJS(value) {
    onFlashReady();
    return "Hi Flash.";
}

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName];
    } else {
        return document[movieName];
    }
}

function sendToAS(value) {
    thisMovie("externalclass").callAS(value);
}

e o action script:

import flash.external.*;

play();

System.security.allowDomain("*");

ExternalInterface.addCallback("callAS", this, func);
ExternalInterface.call("callJS", 1);

function func(n:Number) {
    gotoAndStop(n);
}

Adicionando widget de Últimos Posts com data no WordPress

admin — Tue, 14 Feb 2012 23:02:27 +0000

Registrando um widget do WordPress, para listar ultimos posts, com data.
O widget padrão, não tem essa opção, então criei um novo bem simples.

function ultimos_posts_display() {
	// print some HTML for the widget to display here
	echo 'Últimos posts
	';

	$recent_posts = wp_get_recent_posts();
	foreach( $recent_posts as $recent ){
		echo ''.preg_replace( '/([0-9]{4})-([0-9]{2})-([0-9]{2})([\s0-9:]+)?/', '$3-$2-$1', $recent['post_date'] ).'
		' .   $recent["post_title"].' ';
	}

	echo '';
}

wp_register_sidebar_widget(
	'ultimos_posts_1',        // your unique widget id
	'Ultimos posts',          // widget name
	'ultimos_posts_display',  // callback function
	array(                  // options
		'description' => 'Widget dos ultimos posts com data'
	)
);

Album de fotos com javascript – simples aplicação de esconde mostra

admin — Thu, 02 Feb 2012 19:50:50 +0000

Boas!!
apenas para deixar registrado mesmo..

Album de fotos, baseado em um escode/mostra, com a propriedade display.
Fiz em javascript puro, em poucos minutos. Foi mais dificil achar as imagens, e mais trabalhoso redimensionar elas, do que fazer o código js.. hehe

Enfim, online:

Demonstração

script usado:

Reescrevendo uma função nativa do javascript – apenas para não esquecermos que é possível.

admin — Wed, 01 Feb 2012 21:21:54 +0000

Princípio de carousel de imagens com jQuery – Criando um plugin simples

admin — Thu, 26 Jan 2012 09:00:06 +0000

Nos últimos meses, tenho usado bastante o efeito de carousel.
Como todo programador, me incomodo de ter que ‘me repetir’. Ou ter que repensar uma lógica que já resolvi uma vez.

Nem sempre ‘temos tempo’ de parar, analisar e otimizar oque estamos fazendo.
Porém, devemos fazer isso.

Fiz vários tipos de carouseis, porém por serem diferentes um dos outros, e alguns possuirem algumas peculiaridades, configurações extras, estilizações fora dos padrões, acabei fazendo os meus próprios códigos, e não usando nenhum plugin pronto.

Nesse post, vou deixar o start de um plugin de jQuery, que rapidamente fiz aqui.
Muitas melhorias precisam ser feitas, como:
-> possibilitar scroll vertical
-> não limitar a marcação a ser usada
-> permitir uso do easing..

e por ai vai.. nisso, eu acabaria recriando o cycle(ou chegando perto do efeito Hz dele). Não é essa a intenção.
Até agora é para ser simples mesmo, e muito mais simples de usar também.

Como todos os meus efeitos, esse não foge do meu padrão: resolvi as partes mais complicadas no css.
O js é simples. O instanciamento ainda mais.

É isso, sem mais, segue o código, e logo abaixo a demonstração.
A grande ‘sacada’, é deixar o plugin se virar com a animação, (setas prev e next), e termos uma chamada simples e limpa assim:

/* fim plugin carousel */
jQuery(document).ready(function(){
	jQuery('#slide').carousel();
	jQuery('#slide2').carousel();
});

Demonstração

=) Vejam como fiz:

Alterar dimensões de embed do youtube com javascript

admin — Wed, 25 Jan 2012 15:23:24 +0000

Repositório, para deixar arquivado aqui.
Veja que ao clicar em cada botão, o tamanho do vídeo se altera.

É isso. Me diga se vc usar.

Exibir restante de conteúdo, que já estava sendo mostrado pela “metade”- jQuery exibe-esconde

admin — Wed, 25 Jan 2012 09:00:07 +0000

Boas,

A idéia aqui, foi chegar próximo do efeito de “Exibir mais” do youtube:
Escondido:

A mostra:

Ok ?
Uma parte do conteúdo fica a mostra, e clicando no botão aparece o restante.

O primeiro passo é resolver o efeito no css. Todos os efeitos são apenas css. O javascript manipulando css. jQuery só entra para facilitar essa manipulação, porém é importante ressaltar, que toda a lógica e o efeito em si, ficou no css.

Depois de conseguir resolver tanto o estado aberto, qnto o fechado, usando apenas css e html, sem nenhuma linha de js, fazer o comportamento fica super simples.








	
		
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed gravida dolor. Fusce aliquam, urna sit amet
            luctus adipiscing, massa sem venenatis dui, quis accumsan mi orci eu orci. Mauris nec massa non mi iaculis tincidunt
            eget a lectus. Curabitur suscipit, magna vel laoreet volutpat, sem mauris placerat risus, nec pretium mauris orci non dui.

			Cras in massa dapibus leo tincidunt molestie nec ut sem. Aenean sit amet ipsum risus. Class aptent taciti sociosqu
            ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vitae erat at magna volutpat consequat ut a justo.
            Mauris dapibus dolor at orci placerat congue. Praesent facilisis sodales molestie. Quisque eget lacus eget justo aliquet
             sagittis. Duis sed elit id dui semper feugiat. Vivamus risus magna, facilisis at hendrerit sit amet, accumsan nec felis.

			Nunc massa tellus, fringilla ut tincidunt consequat, ultricies eget nunc. 
         

	

	toggle

Demonstração

Sobre o livro “Design Emocional”

admin — Tue, 24 Jan 2012 09:00:16 +0000

Bom, eu já tinha lido O Design do Dia a Dia, e quase sem querer acabei tendo em mãos pedindo uma indicação sobre oque ler, o “próximo” livro do Donald A. Norman.

Muito bom esse livro também. Podemos lê-lo como um complemento do outro.

Uma decisão tem que dar a sensacão de que é boa.
O pensamento vai sendo construido ao longo do livro.
Emoções norteiam as nossas escolhas. Primeiro inconscientemente, e muito depois de forma lógica, decidimos oque queremos, e oque vamos fazer.

Olhar o Design das coisas sob essa perspectiva, te faz refletir, como que algo além de ser bonito, usável, tb pode ser agradável.
Ou então como temos coisas que nos agradam, nos fazem sentir bem, mas não as usamos.

Realmente um mundo se abre, qndo vc nota que por mais que algo seja prático, não usamos se for feio, se não nos fizer sentir bem. E se algo for realmente bonito, e nos transmitir boas sensações, usaremos, apesar dos defeitos.

Norman nos apresenta nesse livro, 3 tipos de Design: Viceral, Comportamental e Reflexivo.
Vale muito a pena. Eu indico.

Exemplo de uso jQuery.Deferred – simples

admin — Mon, 23 Jan 2012 09:00:54 +0000

Talvez esteja faltando algo “simples”, situações “cotidianas”, ou sei lá oque.

Estou vendo muitas pessoas no fórum com a mesma dúvida: “usar o objeto Deferred do jQuery”, “pegar o retorno de uma requisição ajax”, e coisas relacionadas.

Eu sempre indico o ótimo tutorial do Maujor:
http://www.maujor.com/blog/2011/02/01/o-objeto-deferred-da-jquery-1-5, porém talvez por ser tão completo, e ter tantas informações, alguns iniciantes podem não estar “entendendo”.

Vou deixar alguns exemplos práticos(todos com o mesmo resultado), de algumas formas de usar o Deferred:



	
	


	Exemplo do que "não funciona"(retorna undefined)
	
		
		Nome: 
		Email: 

		
	

	Recebendo com done
	
		
		Nome: 
		Email: 

		
	

	Recebendo com then
	
		
		Nome: 
		Email: 

		
	

	Recebendo com success
	
		
		Nome: 
		Email:

Demonstração online

Convém lembrar que “precisamos” do deferred por causa do assincronismo das requisições, ou seja, o objeto ajax, envia para o servidor, o servidor processa, e o objeto ajax trás o retorno, sem refresh, porém também, sem que o restante do script aguarde esse retorno.

É essa diferença entre “sincrono” e “assincrono”. Note que enviando em modo sincrono async: false,, eu consigo “pegar o retorno” do ajax.

	jQuery(document).ready(function(){
		/* retorna undefined */
		jQuery('#ajax_form_sincrono').submit(function(){
			var form = jQuery( this );
			var ret = envia_form_sincrono( form );
			alert( ret );
			return false;
		});

	});
	function envia_form_sincrono( form )
	{
		var ret = '';
		jQuery.ajax({
			type: form.attr('method'),
			url: form.attr('action'),
			data: form.serialize(),
			async: false,
			success: function( dados ){
				ret = dados;
			}
		});
		return ret;
	}

E ai ? qual dos dois usar ? sincrono ? ou assincrono com o deffered ?
Não sei, isso depende da sua aplicação, e é assunto para um próximo post talvez.

Usou ? comente.. este é o “meu pagamento” pelo que escrevo: o teu comentário.

Enviar formulário para o php sem refresh – jQuery.ajax

admin — Fri, 20 Jan 2012 09:00:31 +0000

Eu havia postado, como enviar um formulário com ajax, aproveitando o callback submitHandler do jQuery.validate.

Porém, se vc não estiver usando esse plugin, e quiser apenas usar o ajax do jQuery, o seguinte basta:



	
	


	
		
		Nome: 
		Email: 
		Telefone:

Primeiro eu importo a lib jQuery:

Nada de novo até aqui.

Faço corretamente, e disparo a minha função no evento onsubmit do formulário:

		jQuery('#ajax_form').submit(function(){

Vi alguns tutoriais( de blogs, fóruns e video aulas ), usando o evento onclick do botão submit(ou button), “fingem”, que isso funciona, e depois várias pessoas vão aos fóruns, por causa dos problemas gerados por esses códigos mal escritos e incorretos.

O correto é usar no onsubmit do form, e “desativar” ele, com aquele return false; que envio na linha 19

			return false;

Daí em diante, não tem segredo, é o mesmo miolo que usei para enviar com o jQuery.validate.
De graça, o método .serialize(), cria a query string com os dados do formulário, e usamos essa variavel para enviar a função ajax.

Ali no success: function( data ) (linha 13), é o callback que será disparado, assim que a requisição retornar(status 200 e tal).

Bom, é isso =)
Comentem, compartilhem. Sei que é um assunto já bastante “batido”, porém não me custava deixar um código bem escrito, até para tentar minimizar os efeitos dos maus tutoriais.

Setar combo pelo .text() do option – jQuery

admin — Thu, 19 Jan 2012 12:58:27 +0000

Apenas repositório mesmo:

Galerias de imagens com jQuery.lightBox do Leandro Vieira

admin — Thu, 19 Jan 2012 04:14:32 +0000

Muito bom o plugin jQuery de lightbox do brasileiro Leandro Vieira:
leandrovieira.com/projects/jquery/lightbox/

é verdade que o projeto está ‘sem atualizações’, mas também nem precisa.
O plugin cumpre o papel dele, funciona perfeitamente e para um simples modal de imagens funciona muito bem, obrigado.

Precisei ontem, de uma galeria, onde várias classes seriam as disparadoras. Este html:


	
		Primeira Diretoria Eleita da ABTF
		
			
				
			
				
			
				
		

	
	
		Presidentes da ABTF
		
			
				
			
				
		

	
	
		Diretoria Atual

Não achei nenhuma configuração de galeria no plugin.
Então ao disparar da maneira básica:

	jQuery(document).ready(function(){
		jQuery('.lightbox a').lightBox({
			txtImage: 'Imagem',
			txtOf: 'de'
		});
	});

O que o plugin fez, foi juntar todas as imagens numa única galeria de 9 imagens no total.
Mas na verdade, eu queria que cada LI, fosse um album separado dos demais.
Sendo a primeira galeria, com 4 imagens, a segunda com 3, e a ultima com 2 imagens.

Bom, eu poderia muito bem trocar de plugin, usar um fancybox, ou sei lá.. porém apenas pelo desafio, resolvi de uma maneira bem simples essa situação de: criar galerias diferentes para uma mesma classe html, com o plugin jQuery.lightBox:

	jQuery(document).ready(function(){
		jQuery('.lightbox').each(function(){
			$( this ).find('a').lightBox({
				txtImage: 'Imagem',
				txtOf: 'de'
			});
		});
	});

Dessa forma, o plugin vai rodar um grupo(cada li), um de cada vez, e vai separou como eu queria.

é isso. =)

Capturar lista de email dos comentários do seu WordPress e outras queries úteis

admin — Wed, 11 Jan 2012 09:00:12 +0000

Boas galera,

resolvi colocar algumas queries úteis aqui. Coisa bem simples mesmo.

Capturar lista de email dos comentários do seu WordPress

SELECT DISTINCT(comment_author_email), comment_author
FROM `wp_comments`
WHERE comment_author_email<>''

Nessa query eu peço apenas o nome e o email do autor do comentário.

O WHERE ali, é para excluir os trackback, pois eles são inseridos nessa tabela também, mas não enviam um email válido.
o DISTINCT serve para limpar um pouco o mailing, e não trazer nenhum email repetido. Eu poderia ter feito o mesmo usando um GROUP BY.

Remover revisões de posts

Dificilmente eu uso esse recurso(para recuperar algo), mas como ele é automático, vários e vários registros são criados no banco por causa dele.

SELECT * FROM wp_posts WHERE post_type = 'revision';

Basta trocar o SELECT * por um DELETE, e teremos excluido as revisões. Aqui, contabilizou quase 500 revisões.

Remover rascunhos automáticos

Um pouco menos “problemático”, que as revisões, mas mesmo assim, não deixam de ser “sujeiras” no banco.

SELECT * FROM `wp_posts` WHERE `post_status` = 'auto-draft'

No instante em que rodei essa query, só peguei um único registro.

O número de registros no banco, não bate com meu número de posts

Calma, é assim mesmo. “Estranhamente”, do ponto de vista de modelagem SQL, o WordPress usa a tabela wp_posts, para também guardar o path dos arquivos que subimos no meio do post(imagens, videos..)

SELECT * FROM `wp_posts` WHERE `post_type` <> 'post';

Não delete! a menos que vc saiba oque está fazendo. (Excluir aqui, não apaga o arquivo real, portanto não quebra o seu post).
É apartir dessa tabela que o WP faz a listagem que vemos em Media -> Library
(note que temos post_type como inhreit, e post_parent como o ID do post, no qual subimos aquela imagem).

Bom, acho que é isso.
Se tiverem mais idéias de queries ou alguma outra forma de conseguir esses dados(resultados), me digam. =)
E se vc usou, comente por aqui também.

Todas essas operações são por sua própria conta e risco

Salve um backup antes de brincar com o seu banco, e eu não me responsabilizo por absolutamente nada. Nem tenho como. =)

Acessando o mysql apartir do terminal no MAC

admin — Tue, 10 Jan 2012 12:34:36 +0000

Mac:~ william$ alias mysql=/usr/local/mysql/bin/mysql
Mac:~ william$ alias mysqladmin=/usr/local/mysql/bin/mysqladmin
Mac:~ william$ mysql -u root -p wordpress
Enter password:
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 62
Server version: 5.5.17 MySQL Community Server (GPL)

Copyright (c) 2000, 2011, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show tables;
+-----------------------+
| Tables_in_wordpress   |
+-----------------------+
| wp_commentmeta        |
| wp_comments           |
| wp_links              |
| wp_options            |
| wp_postmeta           |
| wp_posts              |
| wp_term_relationships |
| wp_term_taxonomy      |
| wp_terms              |
| wp_usermeta           |
| wp_users              |
+-----------------------+
11 rows in set (0.00 sec)

mysql>

Primeiro Desafio wbruno de PHP

admin — Wed, 04 Jan 2012 18:33:58 +0000

Salve salve !!!

Vou fazer uma tentativa.. desafiozinho simples.. qndo eu tiver umas 3 respostas(certas ou não), eu divulgo a minha solução.(podem continuar enviando as suas contribuições, mesmo que eu já tenha colocado a minha).

Resolva com 2 loops. Se conseguir, resolva com um único loop.

O desafio, é gerar o resultado abaixo(na imagem), usando php(seu php vai gerar algum html).

Podem me enviar o código pelo www.pastebin.com, aqui pelos comentários do blog mesmo.
é isso!

O melhor algorítmo(mais elegante) vence.

Boa Sorte!

.
.
.
.
.
.
.
.
.
.
.
.
.

Minha solução com 2 loops encaixados:


';
		for( $j=1; $j<10; $j++ )
		{
			$class = $i==$j || $i+$j==10 ? ' class="diagonal"' : '';
			$text = $i==5 || $j==5 ? '+' : '-';

			echo ''.$text.'';
		}
		echo '';
	}

?>

Agora, resolvam com um único loop!

Com 2 encaixados é fácil ne?!
Mesma imagem, mesmas regras. Consegue ?

Minha solução com apenas um único loop


'.PHP_EOL.''.PHP_EOL;

		$class = $j==$k || $j+$k==10 ? ' class="diagonal"' : '';
		$text = $j==5 || $k==5 ? '+' : '-'; 

		echo "\t".''.$text.''.PHP_EOL;

		$j = $j>=9 ? 1 : $j+1;
		$k = $j==1 ? $k+1 : $k;
	}
?>

Afinal, o que são funções ?

admin — Mon, 02 Jan 2012 14:18:12 +0000

Função
“Funções descrevem relações matemáticas entre dois objetos, x e f(x) = y”.
“Onde o objeto x é o argumento da função f, e y é o objeto dependente de x”.

“Sejam A e B conjuntos não vazios, qualquer relação de A e B, que associa cada elemento de A a um único elemento de B, chamamos de função de A em B”.

Ops.. blog errado ?

Não não! Aqui eu falo sobre programação, e não por descuido comecei falando matematicamente.
Em programação também temos o conceito de funções.

E nesse nosso mundo também, enviamos argumentos, e obtemos um resultado:

echo ola( 'Bruno' ); // "Olá, Bruno!"
echo ola( 'uiLL' ); // "Olá, uiLL!"

Cada valor que eu envio para a função ola(), me retorna uma saída diferente.

Usamos funções em programação, para “encapsular” rotinas. Seria muito chato se tivéssemos que repensar/reescrever uma certa coisa, cada vez que fossemos querer usá-la.

Por exemplo:


Por menor que seja, qualquer duplicação de código deve nos incomodar.

Em vez de ficar colocando os ifs ternários, um embaixo do outro, para quantas variaveis da query string eu quiser resgatar, eu posso melhorar o script assim:

Ganhamos bastante com isso. Imagine que eu vá aplicar um filtro, em todas as variaveis que receber, até para evitar alguns injections:

Bem limpo ne?!

Só alterei a função getGet(), e adicionei a filter() nela. Bem melhor doque:

ou então:

return ou echo ?
Vou criar uma função para saber quanto é 10% de qualquer valor. (poderia ser algo bem mais complicado).

E então posso usar essa function sempre que eu precisar:
Economize:  na compra da TV
Economize:  na compra desse pen drive

Mas e se eu precisar desse mesmo resultado em “varios locais” ?
TV: de 1000 por apenas: 

o “echo” que coloquei no meio da função, já me impediria de fazer essa conta. Pois já fiz a saída do dado. E não tenho mais como “reutilizar”.
O correto seria:

Dessa forma sim, consigo fazer a conta.

Note que, em vias de regra, sempre use return em suas funções.(salvos alguns casos especiais)
Funções nos ajudam a organizar o código, a reutilizar rotinas(evitam duplicação), a subdividir problemas(podemos usar várias funções para resolver um problema grande, qnto menor cada função, mais reutilizável ela será).

Pegar de iframe, e jogar no documento pai</h1> <p>admin — Thu, 29 Dec 2011 13:33:54 +0000</p> <p>Dúvida que vi no fórum.</p> <p>Pegar o valor da tag title de um iframe, e colocar ele em um titulo do lado de fora, do documento pai.<br /> Não é ‘tão simples’ assim, e notei um probleminha: ‘o iframe precisa ser carregado antes de tentarmos pegar o conteúdo dele’.</p> <p><span id="more-1672"></span><br /> Bom, resolvi dessa forma:</p> <pre name="code" class="html"> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#menu a').click(function( e ){ jQuery('#content').load(function(){ var titulo = jQuery('#content').contents().find('title').text(); jQuery('#titulo').text( titulo ); }); }); }); </script> </head> <body> <ul id="menu"> <li><a href="home.html" target="content">Home</a></li> <li><a href="cadastro.html" target="content">Cadastro</a></li> <li><a href="contato.html" target="content">Contato</a></li> </ul> <h1 id="titulo">Home</h1> </body> </html></pre> <p>Por esse motivo, depois do clique, eu aguardo o evento ‘onload’ do iframe:</p> <pre name="code" class="javascript"> jQuery('#content').load(function(){</pre> <p>Sse vc não quiser incorporar a lib jQuery, e também para provar que jQuery é apenas javascript, segue a mesma funcionalidade, usando apenas js puro:</p> <pre name="code" class="javascript:firstLine[4]"> function id( el ) { return document.getElementById( el ); } window.onload = function() { id('content').onload = function() { var titulo = this.contentWindow.document.getElementsByTagName('title')[0].innerHTML; id('titulo').innerHTML = titulo; }; }</pre> <p>é isso =)<br /> Se for útil, comente e compartilhe. Esse é o único ‘pagamento’ que peço pelos códigos(conhecimento) que disponibilizo.</p> </article> <article> <h1>Carregando sem refresh, várias áreas diferentes de um site – jQuery.ajax</h1> <p>admin — Thu, 29 Dec 2011 12:55:46 +0000</p> <p>Eu já postei aqui no meu blog, como <a href="http://wbruno.com.br/blog/2011/03/30/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/" target="_blank">carregar conteudo com ajax em div</a>, daí, aprimorei aquele código, e mostrei como <a href="http://wbruno.com.br/blog/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/" target="_blank">carregar conteudo com ajax, colocando também um gif de loading</a>.. e também como fazer tudo isso de cima, ainda <a href="http://wbruno.com.br/blog/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/" target="_blank">trocando a URL, e usando um plugin na página interna</a>.</p> <p>Hoje é dia de carregar várias divs ‘separadas’, várias áreas diferentes com ajax.<br /> <span id="more-1663"></span><br /> Já vi no fórum um cara(com dúvida) resolvendo isso, de uma forma ‘natural’ do ponto de vista de pensamento humano, mas terrível para performance e manutenção do site.</p> <p>O código que ele usou era mais ou menos assim:</p> <pre name="code" class="javascript:firstLine[6]"> jQuery(document).ready(function(){ var sidebar = jQuery('#sidebar'); var content = jQuery('#content'); var other = jQuery('#other'); jQuery('#menu a').click(function( e ){ e.preventDefault(); if( jQuery( this ).attr('href')=='home.html' ) { sidebar.load('home_sidebar.html'); content.load('home_content.html'); other.load('home_other.html'); } else if( jQuery( this ).attr('href')=='cadastro.html' ) { sidebar.load('cadastro_sidebar.html'); content.load('cadastro_content.html'); other.load('cadastro_other.html'); } }); }); </pre> <p>Ou seja, a cada clique em um link do menu, ele fazia 3 requests. Um para cada ‘área’ do site.<br /> Tinha que manter 3 arquivos distintos para cada link, e esse jogo de if/else para saber quais arquivos ele deve invocar.</p> <blockquote><p>Isso deve ter um ‘mau cheiro’.</p></blockquote> <p>A cada clique fazer 3 requisições, e ter que manter 3 arquivos separados para cada área.. além de que o site ‘não vai funcionar corretamente’, se o suporte a js estiver desabilitado… muitos motivos para evidenciar que algo está errado.</p> <blockquote><p>Mas então, o que podemos fazer?</p></blockquote> <p>A minha sugestão, é aproveitar o ótimo parser de HTML da lib jQuery, fazer um único request, e então direcionar cada conteúdo para o local específico.</p> <pre name="code" class="html"> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ var sidebar = jQuery('#sidebar'); var content = jQuery('#content'); var other = jQuery('#other'); request( 'home.html' ); function m_load( data ) { var text = jQuery( '<div>'+data+'</div>' );//forçando o parser sidebar.html( text.find('#sidebar').html() ); content.html( text.find('#content').html() ); other.html( text.find('#other').html() ); jQuery(document).attr( 'title', text.find('title').html() ); } function request( file ) { jQuery.ajax({ url: file, success: function( data ) { m_load( data ); } }); } jQuery('#menu a').click(function( e ){ e.preventDefault(); request( jQuery( this ).attr('href') ); }); }); </script> </head> <body> <ul id="menu"> <li><a href="home.html">Home</a></li> <li><a href="cadastro.html">Cadastro</a></li> <li><a href="contato.html">Contato</a></li> </ul> <div id="sidebar"> </div> <div id="content"> </div> <div id="other"> </div> </body> </html> </pre> <p>Note que além de fazer o parser do retorno:</p> <pre name="code" class="javascript:firstLine[14]"> var text = jQuery( '<div>'+data+'</div>' );//forçando o parser sidebar.html( text.find('#sidebar').html() ); content.html( text.find('#content').html() ); other.html( text.find('#other').html() );</pre> <p>eu também faço a troca do title do documento:</p> <pre name="code" class="javascript:firstLine[20]"> jQuery(document).attr( 'title', text.find('title').html() );</pre> <h2><a href="http://wbruno.com.br/scripts/index_3areas.html">Demonstração</a></h2> <p>Se vc tiver o firebug instalado, confira na aba Net|Rede -> xhr que faço apenas uma requisição.</p> </article> <article> <h1>Afinal, oque é Crescer Profissionalmente ?</h1> <p>admin — Wed, 14 Dec 2011 13:00:13 +0000</p> <p>Um post motivacional.</p> <p>Sim, hoje é meu aniversário. Exatamente as 11 horas da manhã de hoje, completo 23 anos de vida. Fazem vinte e três <em>“desde o instante em que nasci”</em>.<br /> Se for contar <em>“apartir de quando eu me lembro”</em>, teria que adiar a contagem, para depois dos 12 anos.. pois realmente antes disso, é tudo muito vago nas minhas memórias.</p> <p>Comecei a trabalhar com 16 anos. Estagiário Técnico na Porto Seguro – Proteção Patrimonial.<br /> Então, se fosse contar apartir daí, a minha <em>“vida profissional”</em>, seria de apenas 7 anos. Não trabalhei direto, desde então.. logo podemos contar algumas “férias”(entre um lugar e outro). Somando, seriam oficialmente:<br /> 1 ano como estagiário +<br /> 6 meses como assistente de manutenção de micros em campo +<br /> 2 anos e meio para uma agência web(sem férias durante esse período) +<br /> quase 1 ano agora, no trabalho atual.<br /> <span id="more-1645"></span><br /> São 5 anos ao todo. Então posso dizer que “a minha carreira”, soma 5 anos. Isso não me parece “tão pouco assim”. É mais que 20% do meu tempo de vida total, e quase 50% da “vida, desde que eu me lembro”.</p> <p><strong>Cresci profissionalmente</strong> neste período. E não me refiro a dizer que “estou ganhando mais”.<br /> Sim, estou, mas não é somente isso que importa. Como estagiário, meu salário era de 2.48 por hora. Com algumas horas extras, eu tirava R$200.00 líquidos no fim de cada mês.<br /> <a href="http://wbruno.com.br/blog/wp-content/uploads/2011/12/29032010dinheiro009.jpg"></a><br /> Mas não é isso que significou “crescer” para mim.</p> <p>Quando digo que quero evoluir, significa que antes eu “imprimia folhas de monitoramento das rotas dos caminhões, fazia cadastros no access, elaborava planilhas e bds para otimizar o trabalho, …”, e agora eu trabalho programando sites. Analisando rotinas lógicas, desenvolvendo scripts, testando, controlando versão com GIT, garantindo semântica da marcação, garantindo uma degração graciosa, e o máximo de compatibilidade crossbrowser possível..</p> <p>Sim, eu cresci. O meu trabalho atual exige muito mais de mim, do que o meu primeiro. Em cada um deles, cada vez que mudei foi assim.</p> <blockquote style="font-size: 14px"><p>O dinheiro é apenas consequência. <br /> Melhor salário vem junto com o seu merecimento por ele. </p></blockquote> <p>Ninguém merece ganhar mais, se continuar fazendo o mesmo de sempre. Se nesses 5 anos, eu ainda estivesse “imprimindo folhas”, eu não teria evoluído como profissional. Teria muito menos experiência e conhecimento sobre “outros assuntos”..</p> <p>Esta é a minha definição de “crescer”. Sucesso profissional para mim, é <strong>não parar de evoluir</strong>. Não estacionar.</p> <blockquote><p>Estar contente com o que faz. Fazer o melhor. Errar. Corrigir. Diminuir os erros. Continuar melhorando progressivamente, e então quebrar todos os paradigmas e recomeçar. Sou movido a desafios. </p></blockquote> <p>Puxe a responsabilidade para ti. E acredite que a situação profissional em que você se encontra, se deve exclusivamente por sua própria culpa. Culpe a si mesmo. E se vanglorie nas suas vitórias. </p> <p>Não queira ser melhor que seu colega. <strong>Seja melhor que você mesmo</strong>. Supere seus limites, as suas barreiras são impostas por você mesmo. Não se limite.</p> <p><a href="http://wbruno.com.br/blog/wp-content/uploads/2011/12/colunista.jpg"></a> Fazer “mais do mesmo” todos os dias é muito fácil e muito cômodo. Porém é o “preguiçoso”, e nada mais que apenas a tua <strong>obrigação mínima</strong>. Aquele que “faz oque mandam”, é o funcionário que justifica o salário. Nem mais e nem menos.<br /> É para isso que ele recebe.</p> <p>Aquele que não faz direito nem oque lhe pedem, não justifica e nem mereceria estar ganhando oque está. O problema, é que os que estão nessa situação, parecem não perceber, pois deveriam voltar um passo.</p> <p>Aquele que cumpre o seu papel com excelência, e sempre procura “o algo a mais”, merece reconhecimento.<br /> Reconhecimento não é apenas “números positivos maiores no extrato depois do dia 5″. Reconhecimento é um “Parabéns !”, é um “foi ele quem fez isso”, é um “essa solução ficou ótima”, é atribuir mais a este funcionário. Exigir mais dele. </p> <p>O dinheiro virá, tem que vir. Se a empresa fizer o reconhecimento “motivacional” e com “mais trabalho”, porém não aumentar os ganhos, então este funcionário deve trocar de trabalho. Tão simples quanto isso.<br /> Não fique em um lugar onde seus esforços não são reconhecidos. Entretanto, tenha certeza de que vc está se esforçando, e merece realmente o que acha que merece.</p> <p>Estou feliz onde estou. Porém aprendi que <strong>nunca</strong> devo ficar satisfeito com o que eu faço, e com o que eu ganho. Quero fazer melhor, e quero ganhar mais. Sempre. </p> <blockquote style="font-size: 18px"><p>E para você ? o que é crescer profissionalmente ?</p></blockquote> </article> </main></body></html>

Desenvolvedor FrontEnd - wbruno

window.history.pushState javascript – trocando a URL usando api html5 em páginas carregadas com ajax

Demonstração

Flash chamando função javascript, e javascript chamando função do flash – ExternalInterface

Download ExternalClass.zip

Adicionando widget de Últimos Posts com data no WordPress

Album de fotos com javascript – simples aplicação de esconde mostra

Demonstração

Reescrevendo uma função nativa do javascript – apenas para não esquecermos que é possível.

Princípio de carousel de imagens com jQuery – Criando um plugin simples

Demonstração

Alterar dimensões de embed do youtube com javascript

Exibir restante de conteúdo, que já estava sendo mostrado pela “metade”- jQuery exibe-esconde

Demonstração

Sobre o livro “Design Emocional”

Exemplo de uso jQuery.Deferred – simples

Exemplo do que "não funciona"(retorna undefined)

Recebendo com done

Recebendo com then

Recebendo com success

Demonstração online

Enviar formulário para o php sem refresh – jQuery.ajax

Setar combo pelo .text() do option – jQuery

Galerias de imagens com jQuery.lightBox do Leandro Vieira

Capturar lista de email dos comentários do seu WordPress e outras queries úteis

Capturar lista de email dos comentários do seu WordPress

Remover revisões de posts

Remover rascunhos automáticos

O número de registros no banco, não bate com meu número de posts

Todas essas operações são por sua própria conta e risco

Acessando o mysql apartir do terminal no MAC

Primeiro Desafio wbruno de PHP

Minha solução com 2 loops encaixados:

Agora, resolvam com um único loop!

Minha solução com apenas um único loop

Afinal, o que são funções ?

return ou echo ?