Mas não poderia deixar de postar aqui uma nota sobre um evento muito bom que vai acontecer no vale.

Comunicavale - Comunicação colaborativa no Vale do Paraíba

Organizado por @armindoferreira (Cruz e Ferreira) e @robsoncriative (Criative Comunicação) o Comunicavale vai discutir durante dois dias (7 e 8 de Julho/2010) o setor de comunicação do Vale do Paraíba, com nomes de peso.

Uma ótima oportunidade para estudantes e profissionais da área de comunicação. Afinal nossa região ainda é carente de eventos desse nível.

Veja aqui todas as informações sobre data, local e inscrições.

Já que chegou até aqui, que tal ler isto?

• Guerra dos browsers. Morte ao IE6 e vem aí o RockMelt

Este é o primeiro alpha release e, segundo o John Resig, o código é estável e passou nos testes em todos os browser suportados pelo framework.

Dentre as novidades da nova versão. A que mais me animou foi o extensão do “evento” live para suportar submit, change, mouseenter, mouseleave, focus, e blur

John Resig falou sobre a nova versão na conferência jQuery realizada em Boston, EUA, em Setembro passado. Vejam os slides da apresentação abaixo.

Agora é só aguardar a versão final em Janeiro!

Já que chegou até aqui, que tal ler isto?

• Este post não tem posts relacionados

Encontrar conteúdo sobre o que está acontecendo neste exato momento, em tempo real! Esta era a meta dos grandes players de busca.

Google e Bing anunciaram ontem, que irão incorporar os “tuítes” aos seus resultados. O Bing anunciou a novidade que você pode testar aqui (somente para usuários com localização nos Estados Unidos). Ainda não achei nada no google para testar, mas você pode ver o anúncio feito no blog deles clicando aqui.

Não sou – ainda – especialista em SEO, mas espero pra ver o resultado desta novidade. No twitter, o conteúdo tende a ser menos formal. Cheio de gírias, abreviações e conteúdo fora de contexto. Como será a indexação de todo este mundo de informação? É esperar pra ver.

Já que chegou até aqui, que tal ler isto?

• Este post não tem posts relacionados

Achei interessante criar uma resumo em português com estas 10 dicas. A maioria delas eu passei a utilizar em meus projetos!

1. Use sempre o $(document).ready()

Coloque todo seu código dentro desta função. Isto irá fazer com que seu código jQuery seja executado assim que o DOM for carregado mas antes do conteúdo (veja a dica 2). Isto permite que você atribua funções aos eventos dos elementos. Evitando o uso de onload, onclick entre outros. Ou seja, você não irá interferir na marcação HTML com o javascript.

2. Use o $(window).load ()

Embora a maioria dos exemplos sejam colocados dentro de $(document).ready() é melhor evitar colocar tudo dentro dele.

$(document).ready() é muito útil. Mas ele ocorre durante a renderização do documento. Funcionalidades supérfluas como scrolling e drag and drop, etc podem ser colocadas dentro de $(window).load() que é executada após o download completo da página.

A sintaxe é a mesma do $(document).ready()

3. Carregue somente o que precisa

Nós programadores somos tentados a escrever todo o código javascript em um mesmo local e usá-lo em todas as páginas, seja em forma de arquivo, ou repetindo o código no velho Ctrl C + Ctrl V. O jQuery leva tempo para vasculhar todo o documento em busca dos elementos. Isto pode causar uma queda no rendimento da aplicação.

1
2
3
4
5
6
7
8

$(document).ready (function () {
   if ('body').hasClass ('home') {
      // Código usado na home
   }
   else if ('body').hasClass ('blog') {
      // Código usado no blog
   }
});

4. Saiba o que é o método data() e use-o

Para guardar e utilizar alguns dados você pode utilizar o método data da jQuery.

1
2
3
4

   // Define o valor
   $('.myselector').data ('myfavcolor', 'orange');
   // E então. Retorna o valor
   $('myselector').data ('myfavcolor');

Eu escrevi um artigo sobre o método data que você pode ver clicando aqui

5. Seletores internos da jQuery

Conhecer os seletores CSS ajuda muito na hora de escrever código jQuery. Mas os seletores internos também ajudam bastante. Veja os seletores aqui http://docs.jquery.com/Selectors.
Por exemplo

1

   $("div:contains('hello')").css ('background-color', '#cc0000');

O código acima deixa vermelha a cor de background de todos os elementos div que contenham a palavra “hello”. Você também pode usar

1

   $('input:password')

para selecionar todos os campos do tipo password

6. Crie flags com classes

Você pode usar “flags” para monitorar o que o usuário está fazendo, ou então para verificar quando determinada ação foi feita ou não. A função addClass serve para adicionar uma classe em um elemento. Desta forma você pode verificar posteriormente a existência da classe com a função hasClass

7. Não chame o mesmo seletor várias vezes

Ao invés de fazer isto

1
2
3
4

   $('p.hello').css ('color', '#000000');
   $('p.hello').text ('hello');
   $('p.hello').addClass ('paragraph');
   $('p.hello').fadeTo (1000, 1);

Faça isto

1
2
3
4

   $p.css ('color', '#000000');
   $p.text ('hello');
   $p.addClass ('paragraph');
   $p.fadeTo (1000, 1);

Desta forma se armazena o objeto retornado pelo seletor em uma variável para posterior reuso.

8. Encadeie (quase) tudo

O encadeamento é muito útil. O mesmo código do exemplo anterior por ser escrito assim

1

   $('p.hello').css ('color', '#000000').text ('hello').addClass ('paragraph').fadeTo (1000, 1);

Tenha cuidado ao utilizar o encadeamento pois pode causar certa lentidão.

9. Utilize o toggleClass

Você pode alternar classes de elementos para selecionar seu comportamento. Se sua classe .hidden não mostra nenhum item você pode os tornar visíveis com

1

   $('p.hidden').toggleClass ();

10. Guarde os resultados

Quando estiver lidando com funções, você pode querer guardar alguns resultados para uso posterior. Uma solução possível é guardar os resultados em objetos com escopo global.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

   // use the window object for instance
   window.$results = {
   one : 0,
   two : 0
   };
 
   // this is the function, perhaps ran more than once
   function getResults (first, second)
   {
   $results.one = first;
   $results.two = second;
   }
 
   // run function
   getResults ($('li.blue'), $('a.red));
   $results.one.hasClass ('blue'); // true
   $results.two.hasClass ('blue'); // false
 
   // run again
   getResults ($('li.red'), $('a.blue));
   $results.one.hasClass ('blue'); // false
   $results.two.hasClass ('blue'); // true

Já que chegou até aqui, que tal ler isto?

• Método data() da jQuery
• Função live() da jQuery
• Função closest() da jQuery
• Saiba se uma requisição foi feita via AJAX no PHP
• Corrigir PNG transparente no IE 6 com jQuery

Basta adicionar os seguintes headers HTTP e disponibilizar o nome do arquivo que será sugerido no diálogo de downloads do navegador do usuário.

Exemplo:

1
2
3

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="' . $nome_do_arquivo . '"');
echo "etc etc etc";

Tudo que você escrever via echo será o conteúdo do arquivo gerado.

Já que chegou até aqui, que tal ler isto?

• Saiba se uma requisição foi feita via AJAX no PHP
• Função closest() da jQuery

Basicamente, esta técnica consiste em dar aos usuários o acesso básico ao conteúdo. Com ênfase na acessibilidade.

A técnica ajax hoje é largamente utilizada. Por proporcionar uma ótima experiência de uso e aumentar a velocidade de páginas e aplicações web.

Mas ajax utiliza javascript, mais precisamente o XMLHttpRequest para acessar conteúdo de forma assíncrona. Com ajax você pode, por exemplo, criar um formulário de cadastro que não dá refresh na página no ato do submit. Ótimo né? Também acho!

Mas e se o usuário estiver navegando com o javascript desabilitado? Ele não vai poder se cadastrar no seu site?

Para os programadores PHP, existe uma técnica para que definir se a requisição foi feita via ajax ou não. Desta forma, você pode dar aos usuários que estão utilizando javascript toda experiência de uso proporcionada pelo ajax. Sem deixar de lado os usuários que não contam com esta possibilidade.

Basta utilizar a variável HTTP chamada HTTP_X_REQUESTED_WITH.

Exemplo:

1
2
3
4
5
6

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    ... É uma requisição AJAX ...
}
else {
    ... Não é uma requisição AJAX ...
}

Este artigo foi baseado no original, em inglês, http://www.electrictoolbox.com/how-to-tell-ajax-request-php/

Já que chegou até aqui, que tal ler isto?

• 10 dicas para escrever um bom código jQuery
• Método data() da jQuery
• Função live() da jQuery
• Função closest() da jQuery
• Gerar download de conteúdo no PHP

Com ele você pode armazenar informações no formato chave/valor nos elementos do DOM.

Veja a sintaxe:

Define um valor para a chave name
data( name, value)

Retorna o valor da chave name
data( name)

Exemplo:

Digamos que eu queira controlar a exibição de um elemento. Neste caso um div com uma mensagem.

Veja o seguinte código:

$(document).ready(function(){
	$("div#message").data("visible", true);
	$("#link").click(function(){
		if ($("div#message").data("visible")) {
			$("div#message").fadeOut();
		} else {
			$("div#message").fadeIn();
		}
		$("div#message").data("visible", !$("div#message").data("visible"));
		return false;
	});
});

Veja um exemplo aqui

É claro que existem maneiras mais elegantes de verificar se um elemento está visível ou não. Você pode usar a função is() em conjunto com o seletor :visible por exemplo. Mas este não é o foco deste post e este exemplo serve somente para mostrar o funcionamento do método data().

Já que chegou até aqui, que tal ler isto?

• Função live() da jQuery
• Função closest() da jQuery
• 10 dicas para escrever um bom código jQuery
• Saiba se uma requisição foi feita via AJAX no PHP
• Estilizando links com seletores CSS

$("td a").click(function(){
	$(this).closest("tr").children("td").toggleClass("highlight");
	return false;
});

Este código vai executar a função passada como parâmetro ao se clicar nos links que estiverem dentro de colunas (veja um exemplo da função closest(), usada no exemplo, clicando aqui).

É bom lembrar que o comando return false é usado para que não seja executado o evento padrão do browser que é o direcionamento para o arquivo que esteja no atributo href do link.

Eventos e Manipulação do DOM

Até aqui tudo tranquilo. Mas se sua aplicação manipula o DOM, criando ou excluindo elementos do documento, a manipulação de eventos pode dar trabalho.

Neste exemplo clique no link para criar uma nova linha na tabela e depois clique no link Comprar da nova linha. O evento não irá funcionar. Segue o código:

$(document).ready(function(){
	$("td a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		return false;
	});
});

O código que citei acima, criará o evento click nos elementos que estiverem no DOM no momento do carregamento da página. E não irá funcionar para elementos criados de forma dinâmica por sua aplicação.

Até a versão 1.2 da jQuery, tínhamos que usar alternativas para contornar o problema. Eu uso/usava o seguinte código:

$(document).ready(function(){
	$("td a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		$("td a").unbind("click").bind("click",function(){
			$(this).closest("tr").children("td").toggleClass("highlight");
			return false;
		});
		return false;
	});
});

Veja o exemplo

Este código exclui o evento click, através da função unbind, e recria o evento através da função bind. Desta forma evitamos a duplicação do evento para os elementos que já estavam presentes no DOM e recriamos para todos os elementos novamente. Este código gera um processamento desnecessário e possivelmente queda na performance da aplicação.

A função live(type, fn)

Adicionada na versão 1.3 da jQuery, a função live permite que o evento vinculado aos elementos esteja disponível também para os elementos criados no futuro.

A função aceita os seguintes eventos: click, dblclick,  mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress e keyup.

Já os eventos blur, focus, mouseenter, mouseleave, change e submit não são suportados. Para mais informações consulte a documentação da função http://docs.jquery.com/Events/live#typefn.

Seu uso é simples, veja o código:

$(document).ready(function(){
	$("td a").live("click", function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		return false;
	});
});

Agora veja o exemplo em funcionamento.

Já que chegou até aqui, que tal ler isto?

• Método data() da jQuery
• Função closest() da jQuery
• 10 dicas para escrever um bom código jQuery
• Saiba se uma requisição foi feita via AJAX no PHP
• Estilizando links com seletores CSS

Mas agora a briga é outra. Novos competidores entraram na disputa com a antes solitária vencedora Microsoft e seu odiado – ao menos pela comunidade de desenvolvedores e usuários mais antenados – Internet Explorer.

Entre 1995 e 1999, durante a primeira guerra dos browsers, não existia o Firefox nem o Chrome, do gigante Google. W3C e Padrões Web também não tinham tanta presença na rede, Opera e Safari? Nada disso. A Microsoft reinou absoluta e impôs com sua força de mercado o uso do IE.

Mas um movimento recente vem chamando atenção. Se trata da postura de grandes empresas perante à presença no mercado do arcaico IE6. O Google com o Youtube e o Orkut já deu o aviso de que não dará mais suporte ao IE6. O mesmo fizeram outros grandes sites.

É claro que não é tão simples assim. Decretar a morte de um browser obsoleto é apenas o ínicio do trabalho.

Rockmelt.

E como já não bastasse todo este barulho no mercado de browsers, vem aí mais um nome de peso. E que nome. Trata-se de Marc Andreessen, criador da Netscape. O mesmo que protagonizou a briga com a Microsoft.

Ao que tudo indica, ele está de volta com o Rockmelt, um novo browser que, segundo palavras do próprio Andreesen, está sendo criado do zero. Para uma nova web que passou de páginas estáticas para complexos sites, serviços e aplicativos.

É esperar pra ver!

Já que chegou até aqui, que tal ler isto?

• Comunicavale – Comunicação corporativa no Vale do Paraíba

jQuery

Digamos que ao clicar em um link em determinada linha de uma tabela você queira alterar a cor de fundo de toda a linha.

Segue o código:

$(document).ready(function(){
	$("a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
});

Na linha 2 atribuímos uma função ao evento click dos elementos a (links).

Na linha 3 usamos a função closest() com o seletor tr. Ou seja, buscamos o elemento tr mais próximo ao link que foi clicado que é retornado através do objeto this.

Na mesma linha 3 usamos a função toggleClass para atribuir à linha a class highlight. A função toggleClass alterna o atributo class de modo que caso o elemento tenha a classe, a mesma é retirada. E vice-versa.

Reparem que fizemos as chamadas as funções closest() e toggleClass() de forma encadeada. Ou seja, em sequencia.
Caso tenham dúvidas sobre o encadeamento de funções ou sobre a função toggleClass, podem perguntar através dos comentários.

Na linha 4 usamos return false para que o evento do clique no link seja cancelado no browser.

Simples assim! Clique aqui para ver o exemplo em funcionamento.

Já que chegou até aqui, que tal ler isto?

• Método data() da jQuery
• Função live() da jQuery
• 10 dicas para escrever um bom código jQuery
• Saiba se uma requisição foi feita via AJAX no PHP
• Gerar download de conteúdo no PHP