TidBits

Dec 2

Market Share Novembro 2008 - Firefox e safari sobem, internet explorer cai

A Net Aplications disponibiliza mensalmente relatórios com estatísticas (ou curiosidades) para todos nós, desenvolvedores ou até mesmo clientes.

Os relatórios são muitos, sempre em participação, sendo assim. Qual a participação de cada navegador, de cada sistema operacional, cada buscador, resoluções de tela, etc.

Confira os gráficos referente a novembro de 2008:

Navegadores

Seguindo o exemplo do mês passado, Firefox sobe e ultrapassa a barreira dos 20%, safari sobe pra mais de 7% e o Internet Explorer cai 1,5%.
Compare com o mês de outubro.

Navegadores por versão

Internet Explorer 6 cai praticamente mais 2% nesse mês. Podia continuar assim pra podermos eliminar ele logo.
Compare com o mês de outubro.

Sistemas Operacionais

Com os preços mais populares, Mac conquista mais meio porcento do mercado. Enquanto o uso do Windows tem maior queda entre internautas em dois anos.
Compare com o mês de outubro.

Buscadores

Google aumentando a sua hegemonia pelo mundo enquanto AOL, Live Search e MSN mais uma vez terminam o mês em queda.
Compare com o mês de outubro.

Resoluções de Tela

Resolução de 1024 começa a cair, e resoluções maiores estão subindo. Logo logo teremos sites com layout de 1280.
Compare com o mês de outubro.

Todos os dados são referentes ao último mês (Novembro de 2008). Veja os dados de Outubro de 2008 e de Setembro de 2008 para comparar as diferenças no último mês.

Dec 1

Quiz sobre CSS - Teste seu conhecimento

Gostei da idéia de quiz, resolvi fazer um sobre css. Todas as perguntas e respostas estão em português. Segunda feira que vem eu vejo se faço outro, sobre html ou jQuery.

Suguestões?

Deixem comentários dizendo quantos pontos fizeram.

E pra quem ainda não fez, também tem o Quiz de Javascript , o Quiz de XHTML e o Quiz de jQuery .

[]s

Nov 28

myParallax - Parallax com javascript com jQuery

Ultimamente tenho visto scrips interessantes em javascript simulando aquele efeito muito comum no flash o qual chamamos de parallax.

No dhteumeuleu, no CSSLab e no Stephband tem exemplos bem legais e bem complexos dessa técnica.

E essa semana, fazendo um freela, precisei criar algo nesse estilo. E acabei criando um script BEM SIMPLES que simula core do efeito.

Veja o exemplo abaixo e passe o mouse em cima:

Vou explicar como fiz:

O HTML:


<div id="container">
	<div id="conteudo">
		<img src="_images/parallax.jpg" alt="Parallax"/>
	</div>
</div>

O CSS:


	#container { width: 460px; height: 304px; position: relative; overflow:hidden; }
	#conteudo { position: absolute; left:0; top:0; }

E o javascript (usando jQuery):


$(document).ready(function(){
	if($('#conteudo').width()>$('#container').width()){
		var pos_x = $('#conteudo').offset().left;
		var container = $('#container').width();
		var conteudo = $('#conteudo').width();
		var diferenca = conteudo - container;
		var metade = - parseInt(diferenca / 2);
		$('#container').mousemove(function(e){
			x = e.pageX - pos_x;
			porcentagemX = parseInt(x / container * 100);
			left = parseInt(0 - (diferenca  / 100 * porcentagemX ));
			$('#conteudo').css('left',left);
		});
		$('#conteudo').animate({ 'left':metade },1000);
	}
});

Vou explicar basicamente o que o script faz, linha a linha.

1 - Faz com que a função seja executada quando terminar de carregar a página;

2 - Verifica se a área do conteúdo é maior do que a do container pra poder aplicar o efeito;

4 a 8 - Declara variáveis com os valores dos elementos;

10 - Escreve uma função que será executada toda que passar o mouse em cima do elemento “container”;

11 e 12 - Obtem a posicao do mouse (em porcentagem) em relação a div “container”, elemplo, se o mouse tiver bem no meio do container, a posicao é de 50%, mas se o mouse tiver bem na direita do container então a posição será próxima a 100%;

13 e 14 - Com a porcentagem obtida, é só posicionar o left do conteudo. O conteúdo não precisa ser uma imagem, pode ter quaisquer elementos dentro.

17 copy - Para o usuário perceber o efeito, é legal centralizar o conteúdo, usando o animate do jQuery já mostra o movimento.

Apesar do exemplo bobo aqui nesse post, esse script da liberdade pra fazer efeitos mais complexos. È mais facil trabalhar em cima dessa base do que usar um plugin de jQuery com mil opções.

Pra quem achou legal, pode fazer o download do exemplo completo.

Nov 27

Criando um mecanismo de busca no seu site com o Google Custom Search Engine

Recentemente a Yahoo! lanço o BOSS (Build your Own Search Service), para concorrer diretamente com o Google Custom Search Engine. Ambos são mecanismos de buscas que procuram dentro de páginas ou domínios configurado por você. Aqui eu vou falar do Google Custom Search Engine que parece ser mais simples.

Me apresentaram o Google Custom Search Engine lá no Google Search Masters 2008 e deram bons motivos para nos pensar em utilizá-lo, como:

Fazer uma busca em todo o seu site, pode ser complexo, gastar horas e horas de programação, no mecanismo deles eu fiz em 5 minutos.
O algoritmo de buscas é o mesmo que o google usa, então, ele consegue definir níveis de príoridade (ranking), por exemplo se nós procurarmos javascript, o algorítimo procura qual a relevância da keyword javascript dentro de cada página. E depois ele apresenta qual tem o resultado mais relevante. O que seria é mais complicado ainda.
Os usuários estão acostumados a interface do google.
É possível mesclar o conteúdo com links patrocinados e, quem sabe, ganhar dinheiro com isso.

Faça o teste aqui com o nosso mecanismo de busca que eu acabei de criar.

Procure por modal, javascipt, jQuery, ou o que quiser.

É lógico que tem desvantagens, acaba com o layout do seu site, e pra quem usa CMS como wordpress, joomla, drupal, etc.. etc… não dá trabalho nenhum criar uma busca. Mas pra quem não usa, ou se seu cliente quer um projeto “bom, rápido e barato”, vale a pena experimentar, até a w3c schools usa.

Nov 25

Quiz sobre JavaScript - Teste seu conhecimento

Teste seus conhecimentos em JavaScript respondendo o quiz. Todas as perguntas e respostas estão em português.

Não deixe de comentar quantos pontos você fez e o que achou das perguntas.

E pra quem ainda não fez, também tem o Quiz de CSS , o Quiz de XHTML e o Quiz de jQuery .

[]s

Nov 22

Animação de texto em javascript

Eu sempre fico impressionado com as scripts do dhteumeuleu . Tanto pelo bom trabalho, quanto pela criatividade. E recentemente ele fez (ou eles fizeram?) mais um projeto bem legal, trata-se de uma animação de texto em javascript chamada de “mistakes”. Deem uma olhada abaixo:

No exemplo original, o texto fica dentro de um textarea, mas facilmente dá pra alterar isso, deixar do jeito que você quiser, dentro de um <h1> por exemplo, assim o código fica acessível pra search engines e pra quem não tem javascript.

Quem gostou, pode fazer o download do exemplo original ou então acessar o site do dhteumeuleu . Quem puder contribuir com paypal no site dele, o cara merece. =)

« Pr�ximo 1 234 5 6 7 8 9 10 11 12 13...16 17 Anterior »