Não Esqueça .com

jQuery plugin para rolagem suave de âncoras

Anderson Solano — Mon, 08 Aug 2011 14:39:52 +0000

Fala galera esperta, blz?

Essa semana estava precisando fazer com que uma âncoras. Mas perae, o que são âncoras?

Segundo o Wikipedia:

A predefinição {{âncora}} insere uma âncora em HTML numa página, permitindo que se criem ligações para essa parte da página.

http://pt.wikipedia.org/wiki/Predefinição:Âncora

Precisei fazer com que essas âncoras não fosse uma mudança brusca na página, mas que tivessem uma rolagem suave, ou seja, frescura de designer.

Vamos ao código:

$('.anchorList a').smoothScroll();

jQuery.fn.smoothScroll = function(){
	$(this).each(function(){
		var node = $(this);
		$(node).click(function(e){
			var anchor = $(this).attr('href');
			anchor = anchor.split("#");
			anchor = anchor[1];
			var t = 0;
			var found = false;
			var tName = 'a[name='+anchor+']';
			var tId = '#'+anchor;
			if (!!$(tName).length){
				t = $(tName).offset().top;
				if ($(tName).text() == ""){
					t = $(tName).parent().offset().top;
				}
				found = true;
			} else if(!!$(tId).length){
				t = $(tId).offset().top;
				found = true;
			}
			if (found){
				$("body, html").animate({scrollTop: t}, 500);
			}
			//e.preventDefault();
		});
	});
	var lAnchor = location.hash;
	if (lAnchor.length > 0){
		lAnchor = lAnchor.split("#");
		lAnchor = lAnchor[1];
		if (lAnchor.length > 0){
			$("body, html").scrollTop(0);
			var lt = 0;
			var lfound = false;
			var ltName = 'a[name='+lAnchor+']';
			var ltId = '#'+lAnchor;
			if (!!$(ltName).length){
				lt = $(ltName).offset().top;
				if ($(ltName).text() == ""){
					lt = $(ltName).parent().offset().top;
				}
				lfound = true;
			} else if(!!$(ltId).length){
				lt = $(ltId).offset().top;
				lfound = true;
			}
			if (lfound){
				$("body, html").animate({scrollTop: lt}, 500);
			}
		}
	}
}

O que nós fazemos?

Pegamos todos os links, que nesse caso, são filhos de “.anchorList”, você pode mudar para o que quiser, só um id ou todos os links da página.

Ao clicar no link, explodo o href para pegar só o que tiver depois do tralha, para poder buscar se é a ancora é feita com name em um link, ou se é por id.

Ao verificar qual o gancho da âncora, pego a distancia do topo da página até o elemento, mas caso a âncora seja com name no link e nao tenha conteudo, html ou texto, tenho o cuidado de pegar a medida do elemento pai da âncora, pois no chrome tive uns problemas por não ter conteudo dentro dela.

Feito isso, faço uma verificação para saber se realmente existe a ancora e fazer a rolagem suave.

Olha lá o exemplo do plugin de jQuery para rolagem suave de âncoras.

E como sempre, gostou? não gostou? comentae.

Abraços.

Bug no IE, limite de regras por arquivo css

Anderson Solano — Wed, 20 Jul 2011 18:28:14 +0000

Fala Galera, beleza?

Antes de mais nada, não me orgulho dessa “descoberta”, mas reconheço, que indiretamente, tive minha parcela de culpa no processo de descobrimento do bug, poderia usar a “desculpa” de 99% já estava assim, mas não o farei pois, como disse, tenho minha parcela de culpa por também ter mexido no arquivo e ficar jogando culpa nos outros não é algo que eu faça, lógico, sem ter um bom motivo.

E pelo bem geral da nação eu compartilho mais este conhecimento adquirido.

Mas vamos ao que interessa, há algum tempo atrás, descobri um bug, mais um, bizarro no IE, tinha que ser nele ne?, que se você tem um arquivo css muito grande tipo mais de 5000 (cinco mil) regras aplicadas por página, é isso mesmo, não vou entrar em detalhes pois não vem ao caso. O IE simplesmente passa a ignorar as declarações que são feitas depois da regra quatro milésimo nonagésimo quinto, ou 4095 para quem não entendeu

Ou seja, se vc tem um css gigantesco, como o que eu tenho e estou matando aos poucos, com muitas regras, lixo e outras coisas mais, o IE simplesmente pára de ler as regras a partir de uma determinada linha, que é a 4095, qualquer coisa depois disso é ignorado, para nossa “sorte”, tem solução, é só criar outro arquivo css e fazer a chamada normalmente, vc terá mais 4095 regras por página para ter que voltar a se preocupar denovo.

Testei em diversos browser e só nos IEs, até o IE9 estava acontecendo o problema.

Fiz várias buscas na época para tentar achar alguma solução para isso, não achei nada nem parecido, sugestão ou alguém com o mesmo problema. É algum incomum, já que ter um arquivo com tantas regras não é normal, nem sadio pro projeto e nem pra quem mexe nele.

Link para testar o bug de quantidade máxima de regras no IE por arquivo CSS, role os scrolls para entender o problema.

Resumindo: se seu css é muito grande e em alguma determinada página, tem que ser aplicadas mais de 4095 regras do arquivo CSS, no IE o que estiver abaixo da regra 4095 aplicada na página irá ser ignorado.

Só para ter certeza que ficou entendido, você pode ter 10000 (dez mil) regras no css, mas não terá problemas até ter 4095 regras do css sendo aplicada em uma página, a partir da regra 4096 você precisará de outro arquivo.

Isso é tudo pessoal, até a próxima.

Ah, já ia esquecendo, comentae!

Verdades estão aí para serem ditas.

dpaola — Wed, 29 Jun 2011 13:33:47 +0000

Há quase 1 ano não estou mais em agência trabalhando com diversos públicos. Venho trabalhando em dois portais de conteúdo e público mais específico, o que me agrada bastante e to curtindo muito até agora.

Tá certo que o público não é tão específico quanto de um hotsite ou campanha, mas acredito ser muito mais específico e selecionado do que muitos possam imaginar. Por exemplo, é um público que compra na internet, que usa cartão de crédito, que viaja a turismo ou trabalho constantemente. Logo não é um público de pouca renda ou com baixo nível de conhecimento de internet, acredito eu apesar de alguns estudos e dados não confirmarem tanto.

Constantemente debato com meus colegas se nosso público é básico, se temos usuários com idades superiores a 60 anos (logo com dificuldade de leitura e coordenação montora – salvo raras excessões), se temos usuários com dificuldade de visão e por não ter uma resposta concreta ou a maioria deles achar que sim, acabo me frustando ao desenhar nossas interfaces.

Não acredito que isso seja verdade. Acredito que o nosso público seja de usuários médios pra avançados, que já tenham uma experiência de compra online e que não tenham mais medos e dúvidas sobre tal experiência. Assim como ter que manter um site/projeto pra IE6 e 1024×768 de resolução de tela. Se a pessoa não possui um computador atualizado, vai ter dinheiro pra gastar comprando online? Comprando objetos, livros, passagens aéreas, fazendo transações bancárias e etc, duvido.

Estudos dizem que brasileiros gastam boa parte do tempo pra fazer transações, compras e usar redes sociais durante o dia e no horário de trabalho. Se o cara trabalha numa empresa que mantém os computadores desatualizados, essa mesma empresa deve vetar o uso de alguns sites no horário do expediente, logo, essas pessoas devem realizar essas transações no conforto do lar no seu laptop, smartphone (alguns em suas tablets) ou desktop. É raro hoje em dia encontrar computadores a venda com monitores menor que 17″ e com isso resoluções menores que 1024×768 vão ficando cada vez menos comuns.

Claro que não posso ignorar os novos usuários que estão chegando, a famosa inclusão digital (como eu odeio esse termo). Esses novos usuários que ainda estão aprendendo a usar as coisas, aprendendo a comprar e que tem um poder de compra alto. Ou seja, não dá mesmo pra tirá-los da base. Porém a cada ano a curva de aprendizado ao uso de novas interfaces e mídias é mais curta e rápida, logo, não é motivo. E esses novos usuários já compram computadores melhores, do que disse no parágrafo anterior, graças as facilidades de carnês e cartões de crédito.

Outro grande problema que encontro é a famosa quebra de paradigmas. Pessoas que trabalham com internet, porém, são conservadoras demais e acabam não se atualizando com a mesma velocidade e frequência da rede (Brasil só levou um cyber, prata, em Cannes por exemplo). E não me venham falar de verba, porque o brasileiro é reconhecido mundialmente como um po(l?)vo criativo que dá nó em pingo d’água.

Não me falem que não tem tempo ou a equipe não pode ser parada para melhorar um projeto ou começar um novo do zero. Medinho é uma coisa que me deixa puto. Se você tem uma equipe de 1 front, 1 developer e 1 designer, realmente você não pode fazer muita coisa num projeto que já está todo errado. Mas se você pode dividir a equipe em duas, uma (re)constrói de forma certa o que está errado e a outra fica mantendo (por hora) o que está no ar, qual problema disso sr. 06? Quer passar o comando pra quem tenha colhão suficiente? Então passa.

Se grandes empresas seguem investindo em novas ideias, novas interfaces, empresas que tem um público variado e milhões de acessos por mês, tentam e fazem a coisa funcionar, por que você que tem alguns milhares e um público semelhante também não pode? Brasileiro é assim mesmo, preguiçoso e com uma zona de conforto grande. Segundo minha grande amiga Ana Erthal: “O problema todo é que as agências ainda pensam, em pleno século XXI e no meio dessa turbulência de informações e mobilidade social e cultural, como se pensava há 40 anos. Elas pensam como veículos de massa. E não é mais assim. A comunicação se fragmentou juntamente com a identidade dos sujeitos e da cultura… e não tem mais volta. Desde a invenção do controle remoto a comunicação se tornou individualizada e promíscua na ultilização de meios e ferramentas. E as agências, em vez de perceberem esse movimento natural evolutivo, elas continuam olhando para trás, usando modelos ultrapassadíssimos para tentar entender o sujeito contemporâneo e sua pluralidade. É triste. E é esse o motivo que não as deixa caminhar pra frente: daqui não sairá nenhum cyber“. Aí se você vem com ideias e ideais que batem de frente e que forçem as pessoas a pensar e a inovar, você é de outro planeta ou tá tentando pensar muito na frente dando um passo maior que a perna e não vai alcançar a outra margem do rio.

Já ouvi pessoas dizendo que ainda não acreditam em mobile apps mesmo depois do sucesso astrnômico do iPhone e Android, mesmo com tudo se convergindo e mostrando o contrário. E não foi estagiário que falou isso não hein. No twitter mesmo, canso de ver pessoas que se dizem responsáveis por mídias sociais ou que tenham foco nelas, postarem coisas com 1 semana, 1 mês e as vezes mais tempo de atraso achando que é novidade com a desculpa que estava muito ocupado com o job do cliente e nāo teve tempo de ler ou ver o que aconteceu na semana. Me desculpe, mas esse job desse cliente aí vai ser antigo quando ele for lançado então, viu capitão?

Felizmente em alguns casos não é assim, mas vejo muitos projetos, agências, empresas que ficam pensando muito no hoje e no ontem e não no amanhã.

É por isso que tem tanta gente boa saindo do país pra “fazer internet” lá fora. Agências dos EUA e da Europa estão anos luz a frente das tupiniquins em termos de planejamento, estrutura e principalmente condições de trabalho. Se você dá liberdade pro seu profissional criar, seja ele de criação ou não – porque boas ideias vem de qualquer um e de qualquer lugar – tenho certeza que os projetos vão ficar cada vez melhores.

Um exemplo disso são os hackdays e hackathons da vida como fazem o Facebook, o Google e o Linkedin. Boas, não, excelentes ideias surgiram desses exemplos: Orkut, Gmail, GoogleDocs no Google, vídeo, like, face tag no Facebook, exportar seu currículo, grupos no Linkedin. Os profissionais são incentivados a estar sempre buscando novas soluções por puro prazer e não porque é o trabalho deles.

É aí que está toda a diferença cultural da coisa.

desabilitar plugin do skype na página

Anderson Solano — Tue, 28 Jun 2011 19:00:56 +0000

Fala Galera, quem nunca ouviu uma reclamação ou teve uma dor de cabeça para explicar que o plugin do skype é quem detona a página quando tem algum telefone no meio do conteúdo?

Imagino que a dica seja velha, mas vale o post, para remover aquele “link” do telenone ao invés de tentar explicar que a culpa não é sua, adicione a meta tag no head da página e seja feliz.

Gostou?, comenta ae…

Palestra Engenharia de frontend de alta performance

Anderson Solano — Mon, 20 Jun 2011 18:48:37 +0000

Minha palestra sobre frontend de alta performance no frontinrio, que aconteceu dia 18/06/2011

Engenharia de front end de alta performance

View more presentations from Anderson Solano

Url friendly sem htaccess, baseado no wordpress

Anderson Solano — Fri, 29 Apr 2011 20:28:37 +0000

Olá, depois de algum tempo sem postar volto com a solução de um velho problema, url amigáveis!

Semana passada perguntei para os dois caras que, conheço que, são os mais entendidos de wordpress, onde eu poderia encontrar alguma documentação sobre o funcionamento do permalink, apesar de achar que já sabia qual seria a resposta.

O Gustavo Bordoni me respondeu o seguinte “@andersonsolano Cara essa é a parte mais obscura do WP, é bem complicado… Mas o que mais ou menos você quer fazer?”.

E o Guga Alves respondeu o seguinte “@andersonsolano Quem come funções de WP no almoço é o @webord , ele que sabe quase todas de cabeça rsrsrs”.

Voilà, como eu imaginava, não existe ou é desconhecida, qualquer documentação sobre o assunto.

Eu queria estudar como as urls sao montadas no wordpress, para poder fazer algo que fosse bem aplicável em qualquer situação, desde um site com meia dúzia de páginas ou um com 500 páginas e urls dinâmicas.

Mas como não tem documentação, então pensei que devia ter algum jeito de fazer as urls amigáveis sem ser pelo tradicional método do htaccess com expressões regulares ou usando forcetype também pelo htaccess.

Parei para pensar e fui olhar o funcionamento do htaccess do wordpress e percebi que as urls sempre chamavam o index.php, logo entendi o porque de ter a url salva no banco de dados na tabela dos posts.

Então parti para a parte legal da história, pensar as funcionalidades que são necessárias para o funcionamento.

Não vou explicar tudo o que foi feito para não alongar demais esse texto, listei abaixo as principais funções explicarei para que elas foram feitas, mas você não precisa se preocupar em utilizá-las pois fiz funcionamento para ser o mais simples possível.

Para utilizar, você precisará configurar três linhas de código, duas no htaccess e uma no index.php.

Bom vamos as funções:

is_home()

Verifica se é a página inicial e adiciona o arquivo home.php.

eval(RURI)

RURI é uma constante em que a url solicitada foi transformada em array, como constantes não podem ser arrays, o valor dela é transformado em texto com a formatação de array, quando precisar utilizar faz-se o eval para ser um array novamente.

$requestURI = eval(RURI);

variavel que ja tem a consfante RURItransformada em array.

addSlash()
verifica se o último caractere é uma barra (/) se não for, adiciona a barra ao final da url e faz um redirect 301.

redir301($newurl)
função para fazer o redirect 301.

r404()
função para retornar o header 404 e adiciona o arquivo 404.php avisando do erro. Esse arquivo poder ser altefado para o seu layout a vontade.

configUrls.php

Aqui começa a brincadeira para você: se você precisar de muitas urls ou urls com subdiretórios você precisa configurar quais são essas urls e qual arquivo vai ser chamado.
Ex.

sem configUrls.php

primeiraPasta.php
Se forem poucas páginas vc pode apagar o configUrls e usar o nome do arquivo como sendo o texto da primeira pasta da url.

index.php

Esse arquivo deve ter somente essa linha, qualquer modificação para seu site deve ser feita nos arquivos que você irá listar no array $configUrls.
Aqui comecam as configurações, na variavel baseUrl você deve colocar a pasta, ou as pastas, que in ddi cam onde é a raiz do projeto, por exemplo se o site vai ficar em http://dominio.com/site/ vc deve colocar /site/ na variavel, caso a raiz seja o proprio dominio deixe em branco.

.htaccess

Abaixo segue como o .htaccess deve ficar, sim ele é igual ao que ok wordpress gera.


RewriteEngine On RewriteBase /
# mesma coisa na linha acima caso tenha a pasta site, adicione apos a barra site/
RewriteRule ^index\.php$ -[L] RewriteCond
%{REQUEST_FILENAME} !-f RewriteCond
%{REQUEST_FILENAME} !-d RewriteRule . /index.php [L]
# idem na linha acima, que você deve indicar onde fica o arquivo index.php
# então o final da linha fica ./site/index.php

Feito isso o seu site está pronto para utilizar as urls amigáveis.

Não esqueca de manter a pasta _uf, caso mova, ou remova, ajuste o caminho do include do funcs.php no index.php

Então é isso, você pode testar script de urls amigáveis ou baixar e usar urls amigáveis no seu próximo projeto.

Gostou, não gostou, achou um bug? comenta ai!

Plugin jQuery para highlight em células de tabelas

Anderson Solano — Wed, 30 Mar 2011 02:07:06 +0000

Um dia desses estava no trabalho quando o AI (arquiteto de informação) me apresentou uma tabela cheia de efeitos no hover, você pode ver uma imagem dessa tabela ai embaixo.

Ele me explicou que quando o usuário passasse o mouse pela tabela as células anteriores, das respectivas linha e coluna, seriam marcadas por um background e quando clicasse a célula clicada ficaria marcada.

Como não era urgente e eu nunca tinha visto isso sendo feito com HTML logo fiz cara feia e que não saberia se seria possível fazer de uma forma que tivesse uma boa performance, para não deixar a página lenta por causa de um background bobo.

Logo pedi pra ele me mostrar um exemplo disso funcionando, o primeiro que não era exatamente o que ele queria não era uma tabela, na verdade era, mas feita com divs, ou seja, POG das brabas, eu imediatamente soltei um “rá eu te disse”, mas ele me mostrou outro exemplo que realmente era uma tabela, mas também não era exatamente o que ele queria.

Só para sacanear disse que iria tentar fazer, mas p ele ficar sabendo que o resultado seria horrível.

Alguns dias passaram e lembrei-me da tabela e por algum motivo, junto da lembrança da tabela veio a solução do problema, parei o que estava fazendo para testar a solução abaixo. Lembrando que estamos trabalhando com jQuery.

$(document).ready(function(){
	$('table.tab td').click(function(){
		$(this).parents('table').eq(0).find('td,th').each(function(){ $(this).removeClass('on'); });
		$(this).addClass('on');
		$(this).prevAll().addClass('on');
		var x  = $(this).prevAll().length;
		$(this).parent().prevAll().each(function(){
			$(this).find('>*').eq(x).addClass('on');
		});
		$(this).parents('table').eq(0).find('tr:first-child th').eq(x).addClass('on');
	}).hover(function(e){
		$(this).parents('table').eq(0).find('td,th').each(function(){ $(this).removeClass('on2'); });
		$(this).addClass('on2');
		$(this).parent().find('>:first-child').addClass('on2');
		var x  = $(this).prevAll().length;
		$(this).parents('table').eq(0).find('tr:first-child th').eq(x).addClass('on2');
	});
});

Agora vamos entender o que fiz, ah o HTML pra tabela que fiz foi esse aqui.

	DOM 24/12	SEG 25/12	TER 26/12	QUA 27/12	QUI 28/12	SEX 29/12	SAB 30/12
DOM 24/12	1	2	3	4	5	6	7
SEG 25/12	1	2	3	4	5	6	7
TER 26/12	1	2	3	4	5	6	7
QUA 27/12	1	2	3	4	5	6	7
QUI 28/12	1	2	3	4	5	6	7
SEX 29/12	1	2	3	4	5	6	7
SAB 30/12	1	2	3	4	5	6	7

Primeiramente defini o hook para a tabela com o seletor (‘table.tab td’), e adiciono o evento de hover em todos os TDs.

	$('table.tab td').hover(function(){
		//hover
	});

Feito isso passo a adicionar a classe on2 no TD com hover

		$(this).addClass('on2');

Mas antes de adicionar a classe do hover preciso remover qualquer outra classe on2 que possa ter em um TD, já que quando tirar o mouse de cima do TD tem que voltar ao estado sem background.

		$(this).parents('table').eq(0).find('td,th').each(function(){ $(this).removeClass('on2'); });

Após isso é que começa a brincadeira, primeiro pego todos os TDs, da mesma TR (linha), antes do TD com hover e adiciono a classe on2 também.

		$(this).prevAll().addClass('on2');

Agora veio a parte “mais chatinha” de ser feita. Dentro dessa tabela e dentro desse TR, pegar qual o índice do TD com hover, para poder colocar a classe on2 nos TDs da coluna.

		var x  = $(this).prevAll().length;
		$(this).parent().prevAll().each(function(){
			$(this).find('>*').eq(x).addClass('on2');
		});

Feito tudo isso a parte do hover estava pronta e devidamente testada, parti pra parte do click, que vai marcar a célula (TD) da tabela, então adiciono o evento de click adicionando a classe on para marcar.

	$('table.tab td').click(function(){
		$(this).addClass('on');
	});

Mas perae, tem que remover o estilo dos outros TDs que já foram clicados.

		$(this).parents('table').eq(0).find('td,th').each(function(){ $(this).removeClass('on'); });

Agora vamos transformar isso tudo em plugin, para não ter que repetir o código várias vezes, caso alguém ache motivos para fazer isso, ou colocar vários seletores, ou qualquer outro motivo que não seja somente a chamada do plugin.

( function( jQuery ) {
	jQuery.fn.highlightTable = function() {
		this.click(function(){
			jQuery(this).parents('table').eq(0).find('td,th').each(function(){ jQuery(this).removeClass('on'); });
			jQuery(this).addClass('on');
			jQuery(this).prevAll().addClass('on');
			var x  = jQuery(this).prevAll().length;
			jQuery(this).parent().prevAll().each(function(){
				jQuery(this).find('>*').eq(x).addClass('on');
			});
			jQuery(this).parents('table').eq(0).find('tr:first-child th').eq(x).addClass('on');
		}).hover(function(e){
			jQuery(this).parents('table').eq(0).find('td,th').each(function(){ jQuery(this).removeClass('on2'); });
			jQuery(this).addClass('on2');
			jQuery(this).parent().find('>:first-child').addClass('on2');
			var x  = jQuery(this).prevAll().length;
			jQuery(this).parents('table').eq(0).find('tr:first-child th').eq(x).addClass('on2');
		},function(){
			jQuery(this).parents('table').eq(0).find('td,th').each(function(){ jQuery(this).removeClass('on2'); });
		});
	};
} )( jQuery );

$(document).ready(function() {
    $("table.tab td").highlightTable();
});

Ah, mais uma coisinha de última hora, quando der o “blur”,entre aspas que o evento está mais para hover out mas não lembro de um nome para esse evento, da tabela remover a classe on2 para não ter nenhuma marcação de hover

,function(){
	jQuery(this).parents('table').eq(0).find('td,th').each(function(){ jQuery(this).removeClass('on2'); });
}

Bom, é isso espero que seja útil para muitas pessoas, gostou, não gostou, achou um bug ou simplesmente que falar alguma coisa comenta ai embaixo.

Ate a próxima.

Ah, já ia esquecendo o link para o exemplo funcional do plugin de highlight de hover e click em células de tabelas.

SEO black hat, ilegal ou marginalizado?

Anderson Solano — Fri, 24 Sep 2010 21:41:08 +0000

Esse texto não tratará de técnicas de SEO black hat, mas sim da forma que, creio que, a maioria das pessoas, no cenário brasileiro, enxergam o SEO black hat.

Eu mesmo via black hat com maus olhos, mas, no estilo Hannibal Lecter ou Dexter Morgan, personagens “acima de qualquer suspeita” mas que “a noite” saem matando meio mundo, bom eu não saio matando ninguém por ai, nem fazendo black hat adoidado, mas sempre tive interesse no assunto e muita vontade de colocar em prática as técnicas do “lado negro da força”, mas como sempre houveram “repreensões” nunca fiz nada na prática.

Mas a cada dia essa idéia, de ser algo imoral, sempre ia diminuindo e a idéia que black hat não iria me causar alguma punição divina aumentava na mesma proporção. E antes que alguém pergunte, não faço nada que não seja “permitido” em sites de clientes, nem mesmo que seja a vontade do cliente, primeiro que direta ou indiretamente meu nome vai pra vala de quebra o da agência que trabalho também. Para que não fique mal entendido, não estou mandando ninguém sair por ai fazendo black hat.

Há pouco tempo atrás fui até BH e conheci dois caras muito bons no que fazem, Rafael Damasceno do marketing contextual e Alberto André do uaiSEO, dois caras que em qualquer conversa mostraram ser pessoas que entende muito de SEM e SEO e que, com uma frase cada um, me fizeram abandonar a idéia de como eu enchergava SEO black hat.

Rafael Damasceno deixou o seguinte questionamento no post “Nem Chapeuzinho, Nem Lobo Mau – Considerações Sobre Black Hat SEO”:
“Eu faria isso se os mecanismos de busca não existissem?”

E em uma palestra Alberto André, ele disse algo mais ou menos assim:

“Sabendo técnicas black hat você pode modificá-la para que seja white hat ou aproveitada de forma que não seja passível de punição.”

Eu vejo a frase do Rafael da seguinte forma, se buscadores não existissem não existiria otimização, mas já que existem, qualquer otimização já tem um pé no lado negro da força. A diferença entre o black e o white é que o black é passível de punição e o white é aceitável por parte do buscador. Você não usa nenhuma malandragem que não é permitida para ficar na frente de ninguém. Mas que você já é 50% mais malandro que o afilhado do vizinho que só faz site com tabela e não sabe o que é semântica, ah meu camarada isso você já é. E é por isso que no inicio era muito fácil colocar um site nas primeiras posições sem muito esforço, os que perceberam como o jogo funcionava saíram na frente e começaram o uso indiscriminado das malandragens para ficar na frente. A partir dessas malandragens é que foram criadas “regras” de otimização.

Hoje o jogo é o mesmo, com a diferença que a quantidade de gente que pode jogar no mesmo nível aumentou e muito, existem muitas regras, punições e não é mais simplesmente colocar meia duzia de tags e keywords que você vai ficar na frente do concorrente. Em toda esquina existe alguém que “entende de Google” e vai colocar o cliente na frente mais barato que você.

Baseado no que o Alberto André disse, vou comentar 2 casos do mundo real que se utilizaram da mesma “técnica de SEO black hat”, depois explico o que essa técnica “repugnante” faz.

Era uma vez, uma montadora de carros muito grande que vende carros muito caros chamada BMW, no site da BMW Alemã foi utilizada uma técnica chamada de cloaking, logo que foi descoberta a BMW alemã foi punida pelo Google por fazer uso de cloaking.

Era uma vez, um jornal online muito conhecido chamado The New York Times, adivinha o que ele fez o seguinte com suas noticias para assinantes? o The New York Times fez cloaking, para os buscadores exibe a noticia completa, para usuários ele exibe a tela de login. e o que o NYT ganhou? muitas páginas indexadas de forma “licita”.

Viu o que os dois fizeram? a mesma coisa, só que o que o alemão malandro fez foi para ganhar posições no google de forma “ilícita” e o novaiorquino malandro fez foi exibir o conteúdo para os buscadores e para os usuários assinantes, antes do conteúdo ele mostra a pagina de login, e para quem não é assinante tem a opção de pagar uma merreca por mês para poder ver as notícias.

Viu dois caras extremamente malandros?, só que um (o alemão) só escutou a primeira parte da mensagem do Alberto André, enquanto o outro (o novaiorquino) ouviu a mensagem toda.

Agora vamos imaginar a seguinte situação, você é um cara malandro, e tem um bom conhecimento de SEO black hat e aplica essas técnicas em um site, e em uma semana, o site tem um retorno financeiro razoável, você basicamente teve o trabalho de pagar um host, pagar o domínio, fazer um sitezinho meia boca cheio de malandragens para ficar em primeiro no google e vendeu R$500 pelo sistema de afiliados do seu ecommerce preferido. Vamos as contas R$45 do domínio, mais $20 do host, mais 8 horas de trabalho que custam R$100 (baseado em um salário de R$3000), você gastou no total R$165, ou seja um lucro de R$335 “sem fazer nada”. Gostou de imaginar isso? isso é basicamente o que muitos gringos fazem, só que os valores não são tão baixos, principalmente o do lucro!

Só uma coisa, não vai sair por ai fazendo site com black hat e colocando adsense, vc vai sacanear o trabalho de muita gente que trabalha com adwords. E principalmente, depois não fala que a culpa é minha e nem que fui eu que mandei! Assuma suas atitudes e seus erros!

Continuando, o black hat é visto como algo feio, sujo, que dá pena de morte e punição divina, mas é “justamente ao contrário”, entre outras coisas, ele gera lucro que é o que todo mundo quer. Se bem utilizado como no caso BMW x NYT.

Finalizando, não acho que SEO black hat seja algo quase que comparável com matar uma pessoa, mais uma vez não estou dizendo para você sair fazendo adoidado, só gostaria de expor esse outro lado que raramente é exibido e dizer que é uma “coisa” que gosto de ler e estar sempre atualizado e que sempre que puder colocarei sites no ar para poder testar as técnicas, analisar os resultados e extrair somente o melhor para os meus clientes e se possível ainda ganhar uma graninha com algum sistema de afiliados

Com tudo o que foi exposto acho que SEO black hat tem seu potencial de ser ilegal, mas também é muito marginalizado, se você for malandro o suficiente para extraír somente o melhor de cada técnica creio que você e o mercado poderiam crescer de forma assombrosa, principalmente na questão da qualidade técnica.

e para você? SEO black hat é imoral, ilegal e engorda?, é algo que puseram na sua cabeça?, é um pobre coitado que não teve chance na vida? concorda comigo? discorda de alguma coisa? discorda de tudo? qualquer que seja a resposta comenta ai.

Excel para organizar o trabalho com links patrocinados, keywords, frases e correspondência (ampla, exata e negativa)

Anderson Solano — Thu, 09 Sep 2010 19:40:20 +0000

Recentemente fiz o curso SEM Dúvida, muito bom por sinal, depois faço um post sobre o curso e outro sobre links patrocinados.

Como “preguiçoso” que sou, fui logo pensar uma forma de otimizar o trabalho com as keywords.

Então criei um excelzinho que copia o conteúdo da primeira coluna e coloca com sinal de menos na frente, entre aspas, entre aspas e com sinal de menos na frente e depois entre colchetes.

Divirta-se e não esquece de agradecer

download do excel para keyowrds

geradores de hash

Anderson Solano — Tue, 31 Aug 2010 17:59:19 +0000

Há alguns dias atrás, estava olhando o cakePHP, framework em PHP bem maneiro pensando em usar para começar um projeto pessoal e quando fui configurar vi que precisava de um hash para segurança. Como eu odeio fazer esses hash’s, mesmo sabendo o motivo de serem usados, copiei um do wordpress, quando me veio a idéia de agrupar todos esses geradores de hash em uma única página.

Como disse, de cara lembrei que o wordpress também precisa de alguns hash’s então foi mais um motivo pra criar o gerador, nunca lembro onde eu posso gerar, então, sendo eu que fiz eu não esqueço..

Criei entao os geradores de hash.
Tem gerador de hash para cakePHP e gerador de hash para wordpress, de quebra tem um gerador de senhas.

Se encontrar algum problema me avisa. Ah, se conhecer algum framework ou qualquer coisa que utilize um hash manda um comentário que, vejo as especificações se houver e, adiciono na lista.