TidBits

Dec 5

Workshop gratuito de Mobile para desenvolvedores

Tirando as teias de aranha do meu login aqui no TidBits para anunciar esse workshop muito legal que vai acontecer aqui em São Paulo nos dias 16 e 17 de dezembro, totalmente gratuito.

Sem dúvidas, o desenvolvimento de aplicações cross-media é uma tendência de mercado (e consumo, obviamente). Esse novo modelo significa um grande desafio para desenvolvedores, que precisam lidar com vários dispositivos de saída para suas aplicações. Nessa tendência, o desenvolvimento para mobile é uma nova skill a ser desenvolvida.

1º Mobile Expert

No Mobile Expert, evento organizado pela Revista W, os desenvolvedores e interessados em se informar mais sobre o desenvolvimento para esse tipo de mídia vão poder discutir, aprender e descobrir mais sobre este mercado. O evento, que é gratuito, acontece na Livraria Cultura Conjunto Nacional – Av. Paulista, 2073 – São Paulo/SP e conta com palestras, apresentação de cases e demonstrações de desenvolvimento. Temas interessantes com o QR CODE, Desenvolvimento para Iphone, Games e Plataformas mobile serão pautados.

Veja a programação completa do evento e inscreva-se.

Dec 4

CSS Sprites – Aumente o desempenho do seu site

CSS Sprites é uma técnica muito usada em grandes portais que serve para melhorar o desempenho do site diminuindo o número de requisições HTTP. É uma técnica bem simples que serve para unir várias imagens em um só arquivo e posicionar o conteúdo através de CSS.

Ficou tudo muito abstrato né?

Imagine o seguinte menu (onde cada time tem um link próprio):

Exemplo de CSS Sprite

Agora pergunto:

Quantas imagens são necessárias pra fazer essa coleção de escudos de times?

Apenas uma imagem.

Fixando a altura e a largura de cada botão, podemos posicionar o background de cada link com o css position.

É mais trabalhoso, mas tem vantagens:

Carregando uma imagem grande ao invés de várias imagens pequenas, economizamos banda (nesse exemplo eram 31kb agora são 11), porque pra cada imagem tem cabeçalho, paleta de cores usadas na figura, enfim, uma série de dados que se repetiam em todos os times. E quando tempos uma figura só no lugar de 32, esses dados são preenchidos uma vez somente, e assim economizamos banda.

Além disso, o que melhora e muito a velocidade, é fazer uma só conexão HTTP. veja mais tidbits Em arquivos muito pequenos, costuma demorar mais pra estabelecer uma conexão com o servidor do que o próprio download em sí. Então, 31 conexões a menos com o servidor, dão uma boa diferença no tempo total do load da página.

É simples pra fazer, tem duas formas.

Imagine o HTML desse exemplo:


<ul class="escudos">
	<li><a href="/atleticomineiro">Atlético Mineiro</a></li>
	<li><a href="/atleticoparanaense">Atlético Paranaense</a></li>
	<li><a href="/barcelona">Barcelona</a></li>
	...
</u>

A primeira forma, que eu acho mais simples, funciona como um “mapeamento” da imagem:


/*
	Adicionando a única imagem de
	backgrounde e definindo largura na UL
 */
ul.escudos{
	background:url('times.png');
	width: 280px;
}

/*
	Posicionando os LI's com float
	como fazemos normalmente
*/
ul.escudos li{ float:left; }

/*
	Definindo uma largura e altura fixa para
	os links e adicionando text-indent negativo
	para fazer o imagem-replacement
*/
ul.escudos li a{
	width:35px;
	height:35px;
	display:block;
	text-indent:-9999px;
}

A segunda forma é uma coleção de css position


/* Definindo a largura somente */
ul.escudos{	width: 280px;}

*
	Posicionando os LI's com float
	como fazemos normalmente
*/
ul.escudos li{ float:left; }

/*
	Definindo uma largura e altura fixa para
	os links e adicionando text-indent negativo
	para fazer o imagem-replacement
*/
ul.escudos li a{
	width:35px;
	height:35px;
	display:block;
	text-indent:-9999px;
}

/*
	Adicionando o background com todos
	os escudos em todos os li's
*/
ul.escudos li{ background:url('times.png'); }

/*
	Adicionando um background para cada li
	(seria necessario colocar uma classe / id
	para cada elemento). Veja os exemplos:
*/
ul.escudos li.atleticomineiro { background-position: 0 0; }
ul.escudos li.atleticoparanaense { background-position: 35px 0; }
ul.escudos li.barcelona { background-position: 70px 0; }

A mesma técnica pode ser aplicada em menus, principalmente com mouse over:


<ul class="menu">
	<li class="videos"><a href="videos.php">Vídeos</a></li>
	...
</u>

A imagem é uma só para o estado normal e o estado com over.

E no CSS:


#menu li.videos a {
	background: url('/images/video.gif');
	display: block;
	width: 71px;
	height: 19px;
	text-indent: -9999px;
}
#menu li.videos a:hover { background-position: bottom; }

Repare que o height do link é metade do tamanho da imagem, assim, quando passa o mouse por cima do botão, o background é movido pra baixo dando a sensação de duas imagens diferentes.

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):

$(window).load(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.

« Pr�ximo 1 2 3 4 5 6 789 10 11 12 13...21 22 Anterior »