TidBits

Como o último post sobre a Microsoft foi muitíssimo polêmico, vou colocar um pouco mais de lenha na fogueira: apresento a vocês um plugin de Jquery para convencer os usuários a abandonarem o IE. Quem desenvolveu o plugin foi o pessoal do CSS Lab, o que justifica o nome “KillIE”, já que a esse navegador faz pior a vida de todos os htmlers e css’ers.

Indo um pouco na onda do que a Microsoft fez no Hotmail para o Chrome, o plugin exibe uma mensagem no alto da página, recomendando o uso de um outro navegador.

A versão original do plugin traz o texto “You’re using Internet Explorer 6, which is a terrible browser. Why don’t you try Firefox?”, mas você pode configurar outro texto, e se quer que ele apareça para o IE6 ou o IE7, e o navegador que deseja recomendar.

Utilizar o plugin, é ainda mais fácil do que falar mal do IE, basta invocar o Jquery e o plugin:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.killIE.js" type="text/javascript"></script>

Baixe aqui o Jquery e o KillIE

Depois, invoque o código do KillIE:

$(document).ready(function(){
$().killIE();
});

Para ver funcionando, entre aqui com o IE6.

Mas agora, depois que você já aprendeu a instalar o plugin, um lembrete: (deixando um pouco meu lado “interfacer” (amador) de lado, e falando como defensora do usuário que preciso ser) esse tipo de medida é arbitrária, e desaconselhável na maioria das vezes. Obrigar o usuário a conviver com uma mensagem amarela horrorosa, falando que o navegador dele é “terrível”, é uma atitude tão ruim quanto as que a Microsoft costuma tomar. Na verdade, parte do nosso trabalho é fazer as coisas boas para todo mundo, mesmo pra quem usa o famigerado IE6

Boa sexta-feira pra todo mundo!

Mais um comando básico pra quem usa ubiquity. Esse conta quantos caracteres tem um texto. Pode digitar um texto ou selecionar e usar o this do ubiquity. O Fabricio Teixeira do blog arquitetura de informação que pediu e não foi trabalho nenhum fazer.
=)

O resultado foi esse:

Para adicionar o commando, considerando que já tenha o ubiquity instalado, é claro, é só clicar no botão “Subscribe” a direita dessa barrinha que apareceu no canto superior do seu firefox :

Em seguida é só confirmar na tela abaixo:

E pronto, reinicie o firefox, aperte ctrl + espaço e digite chars para chamar a função.

Acabei de voltar do evento, vou tentar postar aqui o que achei de melhor do Google Search Masters.

O evento tinha umas 1200 pessoas, de diversos lugares (conheci até um fulano de Teresina).
As palestras foram muito boas, aprendi bastante pra um dia. Vou citar 4 tópicos que achei bem interessante.

Google Search Appliance ou Google Enterprise
Em todas as empresas (pelo menos as em que trabalhei), achar qualquer informação é um processo bem dificil. O Google Search Appliance funciona com crawlers que lêem informações e diretórios de arquivos em um ambiente corporativo e tornam possível uma busca igual ao do Google.

Isso merece até um post só pra essa ferramenta. Faço em breve, prometo.

Futuro da busca
Questões como busca semânticas foram levantadas, mas o que mais me chamou atenção, é o que já está sendo produzido.
Reconhecimento de face já está sendo aplicado no Picasa, e em breve será possível mandar selecionar uma foto da Belinha por exemplo
e mandar procurar por outras fotos que aparece ela no meio de um álbum. Outro ponto legal foi o Google Áudio.
Um algoritmo eficiente que interpreta áudio (em inglês) e torna disponível busca por termos encontrados em áudio / vídeo.
Entrem no google áudio e façam uma pesquisa de algum termo ou palavra em inglês para testar (no evento, usaram “Brazil”).

Google Custom Engine
É uma busca do Google dentro do seu site. Ao invés de se preocupar com palavras chaves, termos de busca, busca pelo conteúdo, etc.
Pode valer a pena usar o GCE (Google Custom Engine). Além da praticidade, é possível colocar links patrocinados nos resultados das buscas, o que se torna uma alternativa interessante para monetização de blogs.

Usuários do GTalk que funcionam como tradutores online.
Acreditem, foi o que mais gostei, algo bem simples:
adicionem pt2en@bot.talk.google.com e Diga “Olá, como vai você?” e o bot te responde na hora em inglês.

O processo contrário é feito pelo bot en2pt@bot.talk.google.com . Outros 46 bots desses que traduzem diversas linguas.

Além desses tópicos, falaram bastante de ferramentas para webmasters (como analisar robots.txt, a importância do sitemap), falaram sobre o Knol (que basicamente é uma Wikipedia do Google) entre outras coisas.

PS:Os organizadores informaram que as palestras do evento serão disponibilizadas no Youtube, que eu recomendo para quem não foi.

Esse pequeno framework tem uma característica muito interessante, ele incorpora novas funcionalidades no CSS.

Entre suas principais vantanges, estão:

* Não é necessário aprender sintaxe já que utiliza a mesma sintaxe de CSS.
* Não é necessário habilidades com programação.
* É leve, tem apenas 6kbs e não depende de nenhum outro framework (como jQuery ou prototype).
* Cross-broser (compatível com IE6+, Firefox 2+, Opera 9+, Safari 2+ entre outros).
* CSS validado pela w3c.

Entre as 25 opções disponíveis estão: opacity, tooltip, popup, marquee (sim, ele mesmo), fadeOut / fadeIn, Roll In / Roll Out, hyphenation e preload-image.

Como instalar

Coloque dentro da sua taghead.

	<script type="text/javascript" src="MoreCSS.js"></script>
	<link rel="morecss" href="MoreCSS.css" />
	<!-- detalhe no rel="morecss" !-->

E dentro do MoreCSS.css você coloca os “comandos do plugin”.
O download do arquivo MoreCSS.js pode ser feito aqui.

Veja os exemplos na página do plugin. A documentação e todos os exemplos podem ser vistos aqui .

No meu próximo post eu ensino a fazer um Tooltip com o MoreCss.

Este post começa com uma história (se você não gosta de história pode pular direto à explicação): há muitos e muitos anos atrás, quando a web ainda era uma selva de gif animados, o caos predominava. Alguém tentou colocar um pouco de ordem nesse caos, e surgiram os diretórios de sites. Eles até que funcionaram por um tempo, enquanto a web não era tão grande, e enquanto as pessoas não eram tão dependentes dela.

Mas aí a coisa começou a crescer e crescer, e surgiu a necessidade de uma busca mais abrangente. Criaram os spyders, crawlers, bots (- ou qualquer outro apelido carinhoso que se queiram dar pra essas criaturinhas), que a partir de um link inicial, começaram a vasculhar todas as páginas da web, e as páginas que estavam interligadas à elas, e as páginas que estavam interligadas às páginas interligadas, e as páginas interligadas à páginas… (ok, acho que deu pra entender né?).

Enfim, o problema foi que, ao contrário dos diretórios, que podiam ser categorizados pelos humanos, em ordem alfabética, e em categorias distintas, as páginas encontradas pelos crawlers não tinha uma organização lógica. Por isso, dois caras muito espertos que tinham um plano pra conquistar o mundo, o Pink Sergey Brin e o Cérebro Larry Page criaram um algoritmo de rankeamento de páginas chamado PageRank (nome criativo, não?).

Mas, afinal, como funciona o PageRank?

Bom, o PageRank nada mais é que um sistema de votos, e como toda democracia, tenta ser o mais justo possível (embora nem sempre consiga). A idéia do PageRank é colocar os bilhões de páginas indexadas pelos seus crawlers em ordem de importância.

Para fazer isso, o Google registra os “votos” de cada página, e esses votos dão os valores desssa página, em relação à todas outras. Esses votos, são, a grosso modo, os links que referenciam esta página. O Google tenta “não ser malvado”, por isso ele entendeu que os votos não poderiam ter um peso igual, já que a importância das páginas que “votam” não é igual. Por isso, cada página votante, tem também um PageRank, que confere valor ao seu voto.

Quando uma página referencia outras, seu PageRank é trasmitido dividido entre as páginas linkadas. Em um modelo mais ou menos assim:

Além disso, é importante lembrar que o PageRank não atribui valor ao site, e sim a cada página individualmente. Então links internos são de extrema importância. Por isso, para atingir boas posições nos resultados de busca, fala-se tanto a importância do “Link Building”, ou seja, construir uma (boa) rede de links que refereciem seu site.

Para saber o valor do PageRank de sua página, site ou blog, recomendo a Calculadora de Pagerank, uma excelente ferramenta, desenvolvida pelo Paulo Teixeira, do blog Marketing de Busca (e um dos maiores especialistas em SEM e SEO no Brasil).

Com o plugin cycle do jQuery é possível criar diversos tipos de slideshows, sem saber javascript, em 3 apenas minutos. Sem exagero algum, se dúvida disso, leia o post todo, depois deixe um miojo na água fervendo enquanto faz o slideshow e se queimar pode me mandar um email me xingando.

O plugin é bem leve ( 10kb ) e pode ser baixado no aqui ou no site do plugin (lá pode ter versões mais novas).

E vamos aos códigos.

Invoque os scripts dentro da tag head da sua página:

<script type="text/javascript" src="cycle.js" ></script>
<script type="text/javascript" src="jquery.js" ></script>

Você pode baixar o cycle aqui e o jquery aqui.

Para as imagens não serem mostradas antes do load total da página, coloque a seguinte linha de código no seu css:

dv.pics { display: none; }
div.pics img {
    height: 200px; // altura das imagens
    width: 300px; // largura das imagens
    overflow:hidden; // limitando a div
} 

Escreva o html:

<div class="pics" id="galeria1">
	<img src="01.jpg" alt="Teste de JQuery" />
	<img src="02.jpg" alt="Teste de JQuery" />
	<img src="03.jpg" alt="Teste de JQuery" />
	<img src="04.jpg" alt="Teste de JQuery" />
	<img src="05.jpg" alt="Teste de JQuery" />
</div> 

E depois é só brincar com as opções do cycle :
Primeiro exemplo:

<script type="text/javascript">
	$(document).ready(function() {
		$('#galeria1').cycle({
			fx:'scrollLeft',
			speed:    3000
		});
	});
</script>

O Speed é a velocidade de transição, fx o efeito.

Além desse efeito existem mais 27 efeitos:

blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe e zoom

Segundo exemplo, com play e pause:

<script type="text/javascript">
	$(document).ready(function() {
		$('#galeria2').cycle({
			fx:        'growX',
			speed:    3000
		});
		$('#pauseButton').click(function() {
			$('#galeria2').cycle('pause');
		});
		$('#resumeButton').click(function() {
			$('#galeria2').cycle('resume');
		});
	});
</script>

Pausar Continuar

Existem diversas outras opções como botão anterior e próximo, paginação, etc.

Segue abaixo a lista de opções (em inglês).

Opção	Valor	O que faz?
fx	‘fade’	one of: fade, shuffle, zoom, scrollLeft, etc
timeout	4000	milliseconds between slide transitions (0 to disable auto advance)
continuous	0	true to start next transition immediately after current one completes
speed	1000	speed of the transition (any valid fx speed value)
speedIn	null	speed of the ‘in’ transition
speedOut	null	speed of the ‘out’ transition
next	null	id of element to use as click trigger for next slide
prev	null	id of element to use as click trigger for previous slide
prevNextClick	null	callback fn for prev/next clicks : function(isNext, zeroBasedSlideIndex, slideElement)
pager	null	id of element to use as pager container
pagerClick	null	callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)
pagerEvent	‘click’	event which drives the pager navigation
pagerAnchorBuilder	null	callback fn for building anchor links
before	null	transition callback (scope set to element to be shown)
after	null	transition callback (scope set to element that was shown)
end	null	callback invoked when the slideshow terminates (use with autostop or nowrap options)
easing	null	easing method for both in and out transitions
easeIn	null	easing for “in” transition
easeOut	null	easing for “out” transition
shuffle	null	coords for shuffle animation, ex: { top:15, left: 200 }
animIn	null	properties that define how the slide animates in
animOut	null	properties that define how the slide animates out
cssBefore	null	properties that define the initial state of the slide before transitioning in
cssAfter	null	properties that defined the state of the slide after transitioning out
fxFn	null	function used to control the transition
height	‘auto’	container height
startingSlide	0	zero-based index of the first slide to be displayed
sync	1	true if in/out transitions should occur simultaneously
random	0	true for random, false for sequence (not applicable to shuffle fx)
fit	0	force slides to fit container
pause	0	true to enable “pause on hover”
autostop	0	true to end slideshow after X transitions (where X == slide count)
autostopCount	0	number of transitions (optionally used with autostop to define X)
delay	0	additional delay (in ms) for first transition (hint can be negative)
slideExpr	null	expression for selecting slides (if something other than all children is required)
cleartype	0	true if clearType corrections should be applied (for IE)
nowrap	0	true to prevent slideshow from wrapping

Outros exemplos e uma documentação maior pode ser visto no site do plugin.