Convencendo os usuários a esquecer o IE



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.

Exemplo do KillIE em funcionamento no IE6

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!

Contador de caracteres para Firefox Ubiquity

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:

contador de caracteres para firefox ubiquity

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.

Como criar um slideshow usando Jquery e o Plugin Cycle em 3 minutos

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>
Teste de JQueryTeste de JQueryTeste de JQueryTeste de JQueryTeste de JQuery

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>
Teste de JQueryTeste de JQueryTeste de JQueryTeste de JQueryTeste de JQuery

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.

Como fazer um comando ou plugin para o firefox ubiquity

Pra quem instalou o ubiquity, nesse post vou ensinar como se faz um plugin simples de busca num site (no caso nosso blog).

Plugin de Busca no Tidbits para Firefox Ubiquity

E na verdade é bem simples. Abra o ubiquity e digite command-editor.

Copie e colo o código lá. O código todo é esse:

CmdUtils.CreateCommand({
  name: "tidbits",
  author: {name: "Danilo Augusto", email: "[email protected]"},
  description: "Buscar no tidbits.com.br",
  homepage: "http://www.tidbits.com.br/",
  takes: {"Digite o que deseja procurar no www.tidbits.com.br": noun_arb_text},
  preview: function(pblock, q) {
    pblock.style.backgroundColor = '#ff0';
    pblock.style.color = '#000';  
    if(q.text==''){
      pblock.innerHTML = 'Digite o que deseja procurar no www.tidbits.com.br';
	} else {
      pblock.innerHTML = 'Procurar por "'+q.text+'" no www.tidbits.com.br';
    }
  },
  execute: function (q) {
    var url = "http://www.tidbits.com.br/?s=" + q.text;
    Utils.openUrlInBrowser (url);
  }
});

Explicando linha a linha :

1 – Cria o comendo
2 – nome do comando (o que vc vai digitar no ubiquity para chamar a função que você está criando).
3, 4 e 5 – Descrição.
6 – O que aparece no ubiquity explicando como o usuário deve usar o comando.
7 a 15 – Abre o preview. O preview é a caixa roxa do ubiquity (nesse caso amarela) onde é escrito algum comentário. Para alterar ele é simples, funciona como um objeto DOM para o javascript ( pblock ), nele vc pode colocar dhtml comum como
pblock.innerHTML = ‘teste’;
pblock.style.minHeight = ‘400px’
ou como fiz no exemplo :
pblock.style.backgroundColor = ‘#ff0’;
pblock.style.color = ‘#000’;

e o “q” é o objeto que guarda o valor que o usuário digitou (usando q.text).

16 – abre o bloco de execução do comando (o que vai fazer quando o usuário apertar enter).
17 – declarei uma váriavel dizendo a url que desejo abrir.
18 – abre uma url.
19 – encerra bloco de execução.
20 – encerra o comando.

Para exportar o comando para seu site é simples, coloque o código dentro de um arquivo .js

e dentro do head do seu site coloque o seguinte comando:

<link rel="commands" href="ubiquity.js" name="Busca no meu site" />

Fazendo assim, 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 :

Confirmar instalação do comando

Em seguida é só confirmar na tela abaixo:

Tela de concordo com os termos abaixo

Pronto, reinicie o firefox, aperte ctrl + espaço e digite tidbits (o nome do comando ) para chamar a função.

Além desse, eu já tinha feito anteriormente um comando pra gerar Lorem Ipsum.

Mais documentação sobre como criar comandos para o ubiquity pode ser encontrada aqui.