Carregando imagens de forma sequencial

Vamos carregar as imagens de dentro de uma DIV de forma sequencial:
Primeiro o código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var toload = new Array();
var queueImages = function (id) {
	var counter=0;
	$(id + ' img').each(function () {
		counter++;
		toload.push([counter,$(this).attr('src')]);
		$(this).attr('src','/common/images/loader-30.gif');
		$(this).attr('queueid',counter);
	});
	toload.reverse();
	queueLoad(id);
};
var queueLoad = function (id){
	if(toload.length>0){
		var qitem = toload.pop(),
			qid = qitem[0],
			qsrc = qitem[1],
			dimg = new Image();
		dimg.src = qsrc;
		dimg.onload = function () {
			$(id+' img[queueid="' + qid + '"]').attr('src',qsrc);
			queueLoad(id);
		}
	}
}

OK, agora vamos explicar as funções criadas:

A primeira função queueImages(id) recebe um parametro que é o identificador de um elemento do DOM (um selector). Por exemplo, se temos uma DIV com ID galeria, nós chamariamos a função assim:

queueImages('#galeria');

O script varre essa div, procurando por todas as imagens que estão contidas dentro dela.
Ele pega o src de cada uma das imagens e armazena em um array, substituindo os src por um loader genérico (linha 7) e cria um atributo chamado “queueid” para que possamos identificar a imagem posteriormente.

Uma vez substituidas todas as imagens pelo loader, invertemos o array (para que comecemos o carregamento pela primeira imagem) e chamamos a função queueLoad() (novamente passando o selector em questão).

A função queueLoad() verifica se temos uma fila para carregar, se tivermos, ele cria um novo objeto de imagem no documento. No onload deste objeto (quando a imagem terminou de carregar), novamente substituo o src, agora trocando o loader pela imagem que já foi baixada na maquina do usuário.

Mostrando quantos itens já foram carregados

Seguindo o mesmo princípio, podemos agora, com pequenas modificações no código acima, implementar um demonstrator de quantos itens precisam ser carregados e de quantos faltam.

Vamos ver um exemplo de código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

var toload = new Array(),
	totalItens = 0;
var queueImages = function (id) {
	var counter=0;
	$(id + ' img').each(function () {
		counter++;
		toload.push([counter,$(this).attr('src')]);
		$(this).attr('src','/common/images/loader-30.gif');
		$(this).attr('queueid',counter);
	});
	toload.reverse();
	totalItens = toload.length();
	// colocamos no display um total
	$('#mostraCarregando').html('<span>0</span>/<span>' + totalItens + '</span>');
	queueLoad(id);
};
var queueLoad = function (id){
	if(toload.length>0){
		var qitem = toload.pop(),
			qid = qitem[0],
			qsrc = qitem[1],
			dimg = new Image();
		dimg.src = qsrc;
		dimg.onload = function () {
			$(id+' img[queueid="' + qid + '"]').attr('src',qsrc);
			$('#mostraCarregando').html('<span>' + toload.length() + '</span>/<span>' + totalItens + '</span>');
			queueLoad(id);
		}
	}else{
		// nao temos mais imagens, esconder o display
		$('#mostraCarregando').hide();
	}
}

Se você ver, com simples modificações no codigo, ja implementamos um loading.

Importante:

Essa função não deve ser rodada no document.ready, execute-a depois de inserir o jQuery.

Outra coisa… se você quiser fazer com todas as imagens do seu HTML, basta colocar o id como ‘body’ assim:

queueImages('body');

Bugz

Muitas pessoas deve estar pensando “Eu faço isso com o Notepad++” ou algo do genero…
OK, se você usa Windows, você provavelmente deve estar acostumado a fazer esse tipo de coisa via um software como este. Find and replace in all files pode ser uma mão na roda para o tipo de situação como trocar uma URL em 700 arquivos, não vou discordar, porém, como o JP está devidamente linkado para poder comprovar… esses softwares pouco vão te ajudar quando você precisa fazer um find e repalce em um arquivo .sql de 1.4Gb…

E aí? O que você faz?

Bom sai GUI bonitinho, entra linha de commando…

Se você está num Windows da vida, instale um CygWin, ou, se você for um dos poucos bons… abra um terminal do seu linux e arregace a mangas…

SED – Seu melhor amigo

O sed (stream editor) é um programinha de linha de commando do linux que eu uso para fazer meus finds and replaces em arquivos grandes ou em multiplos arquivos… se você entende alguma coisa de Regular Expressions, então você vai amar de paixão o sed, caso contrário, você vai odiar cada um dos segundos por vir…

Multiplos arquivos na pasta

Vamos supor que você quer substituir “http://www.bugz.com.br” por “http://copia.bugz.com.br” dos arquivos do wordpress (eu fiz isso recentemente para poder rodar meu blog localmente para ajustar algumas coisas).
Eis as linhas de commando:

cd /var/www/bugz/wp-content/themes/bugz
sed "s/http\:\/\/www\.bugz\.com\.br/http\:\/\/copia\.bugz\.com\.br/g" *.php
cd /var/www/bugz/wp-content/themes/bugz/css
sed "s/http\:\/\/www\.bugz\.com\.br/http\:\/\/copia\.bugz\.com\.br/g" *.css

Vamos quebrar essas linhas por partes?
Linha 1 – Eu entro no meu diretório tema
Linha 2 – Primeiro chamamos o programa sed, passando o parametro que é uma regular expression, e finalmente passamos a mascara de arquivos *.php ou seja, todos os PHPs da pasta
Linha 3 – Mudo para a pasta css
Linha 4 – você ja deve entender o que eu estou fazendo aqui…

Obs: o sed não faz buscas recursivas, você precisa usar o find para isso… depois eu coloco um bashzinho para vocês aqui

Um arquivo

sed "s/http\:\/\/www\.bugz\.com\.br/http\:\/\/copia\.bugz\.com\.br/g" nome_do_arquivo.sql

Aqui temos algo bem auto explicativo se você entendeu o primeiro exemplo… Eu faço a mesma substituição em um único arquivo .sql.

Um arquivo

Bom, agora vem a parte mais difícil, entender essas tais regular expressions…

Vamos lá… nossa idéia é trocar: “http://www.bugz.com.br” por “http://copia.bugz.com.br”
Vamos começar mais simples, trocar azul por vermelho.

O comando conteria a seguinte expressão:

s/azul/vermelho

ou seja:

substituir/ESSA_PALAVRA/POR_ESSA

Entendeu?
Simples né?

Agora para complicar o que acabou de ficar simples….

Como as palavras em questão fazem parte de um regular expression, você precisa delimitar determinados tipos de caracteres como o “.” ou o “:” e o “/” usando uma barra invertida…

assim seu

http://www.bugz.com.br

tem esses caracteres especiais:
http://www.bugz.com.br
e precisa ser delimitados com a barra invertida assim:
http\:\/\/www\.bugz\.com\.br

Bom, se você quiser saber mais sobre o SED, basta ler aqui…

Ahh ia me esquecendo… aqui está um bashzinho que facilita um pouco a vida para os recursivos…

Salve o arquivo em algum lugar de facil acesso e não se esqueça de dar um chmod +x nele…

Arquivo gbfr

#!/bin/bash
function helpme {
	echo "GBFR Quick Help"
	echo "USAGE:"
	echo "gbfr regexSearch regexReplace searchPath"
	exit
}
if test -z "$1" then
	helpme
else
	find $3 -type f -exec sed -i "s/$1/$2/g" {} +
fi

Assim você só precisa fazer:

/home/userName/gbfr trocar_esse_texto por_esse_texto /home/bugz/Documents

para trocar “trocar_esse_texto” por “por_esse_texto” em todas as pastas e subpastas do diretório “/home/bugz/Documents” por exemplo…

Bugz

Bugz

Se você acessar diretamente a url da página ou fizer o bookmark dela no seu browser, você acessa os diretamente, sem ter que carregar o dashboard, clicar e esperar carregar.
Eu mantenho uma pasta de bookmarks para todos os blogs que preciso administrar com as principais coisas que faço, como criar novo post, comentários, plugins e estatísticas.
Bobagem, eu sei, mas economiza alguns segundos.

Bugz

Estou usando ele no momento.. até agora ele tem funcionado bem. Vamos ver como ele se comporta.

Links:
Evernote
http://www.evernote.com/
Post Origem
http://www.droider.com.br/linux-2/evernote-ubuntu-sim-nevernote.html
SourceForge NixNote
http://sourceforge.net/projects/nevernote/files/Current/

Bugz

O WordPress armazena suas URLs no banco… aí como procedemos?

A solução é mais simples do que parece:

Adicione isso logo no inicio do seu functions:

1
2

update_option('siteurl','http://'.$_SERVER["HTTP_HOST"]);
update_option('home','http://'.$_SERVER["HTTP_HOST"]);

Pronto, se você programou seu WP direitinho… tudo deveria funcionar.

Acabei dando de encontro com uma segunda opção, talvez melhor ainda que a sugerida.

Ao invés de atualizar as opções do blog (que força uma escrita no banco) tem uma opção mais simples:

1
2

define('WP_HOME','http://'.$_SERVER["HTTP_HOST"]);
define('WP_SITEURL','http://'.$_SERVER["HTTP_HOST"]);

Espero ter ajudado algum mortal.

Bugz

Veja aqui o vídeo explicativo:

Vale a pena brincar.

Bugz

Bugz

Bugz

Você precisaria gerar os seguintes códigos no post final:

<!-- Texto em destaque -->
<p class="textoEmDestaque">
<span>Título do destaque</span>
Texto do post que está em destaque.
</p>
<!-- Botão personalizado -->
<a class="botaoMaisInfo" title="Clique para obter maiores informações">+ Informações</a>

Bom, com o tutorial de ontem, isso deve ser bem fácil para você fazer… criar as duas funções, os dois add_shortcode e boas….

O conteúdo do post ficaria algo assim:

1
2
3
4

bla bla bla
[destaque titulo="Meu texto em destaque"]O texto do que aparece em destaque está aqui dentro[/destaque]
mais bla bla bla
[botaoInfo /]

Só pra refrescar a memória (ou para facilitar a vida dos que são preguiçosos demais para ver meu outro post), nosso PHP ficaria assim:

1
2
3
4
5
6
7
8
9
10
11

function scTextoDestaque($params, $content = null) {
    extract(shortcode_atts(array(
        'titulo' => ''
    ), $params));
    return '<p class="textoEmDestaque"><span>'.$titulo.'</span>'.$content.'</p>';
}
function scBotaoInfo($params, $content = null) {
    return '<a class="botaoMaisInfo" title="Clique para obter maiores informações">+ Informações</a>';
}
add_shortcode('destaque','scTextoDestaque');
add_shortcode('botaoInfo','scBotaoInfo');

Isso tudo funciona lindo e maravilhoso e você pode achar que seus problemas foram finalmente sanados… bom, é aí que entra a entidade chamada usuário.
Inevitavelmente eles vão tentar colocar um botão de +Info dentro do texto em destaque (embora você pode ter especificado que isso não deveria acontecer)… e aí? o que fazemos?

Estamos com um post assim:

1
2
3
4
5
6

bla bla bla
[destaque titulo="Meu texto em destaque"]O texto do que aparece em
destaque está aqui dentro
[botaoInfo /]
[/destaque]
mais bla bla bla

Com isso, todo seu esforço de tentar fazer algo simples e intuitivo foi pro vinagre?
Bom, quase isso…

O WordPress tem uma funcionalidade que resolve esta questão:
Vamos usar a função do_shortcode() do WordPress… vamos alterar nossas funções para resolver esta questão.
Nosso PHP ficaria no final assim:

1
2
3
4
5
6
7
8
9
10
11

function scTextoDestaque($params, $content = null) {
    extract(shortcode_atts(array(
        'titulo' => ''
    ), $params));
    return '<p class="textoEmDestaque"><span>'.do_shortcode($titulo).'</span>'.do_shortcode($content).'</p>';
}
function scBotaoInfo($params, $content = null) {
    return '<a class="botaoMaisInfo" title="Clique para obter maiores informações">+ Informações</a>';
}
add_shortcode('destaque','scTextoDestaque');
add_shortcode('botaoInfo','scBotaoInfo');

Vamos analizar o que eu fiz?
Eu coloquei um do_shortcode() em volta do $content e um em volta do $titulo (embora nunca deveríamos ter um shortcode dentro do título… eu já trabalho com usuários tempo o suficiente para imaginar que eles possam querer fazer isso).
Na função botaoInfo, vocês podem perceber que eu não fiz tratamento nenhum, tendo em vista que sempre retornamos um objeto estático.

Isso garante que o WordPress processe o shortcode dentro de um conteúdo originário de um outro shortcode.

Acho que isso finaliza minha explicação de shortcodes….

Bugz