Abrir links externos em nova janela com jQuery

Postado por: Pedro Rogério em

Recentemente, Trevor Davis postou em seu site uma solução para abrir links externos em uma nova janela com jQuery, que consiste no seguinte:


$(document).ready(function(){
	$("a[@href^='http']“).attr(’target’,'_blank’);
});

O que esse script faz é pegar todos os links da página que iniciem com http e com isso o JavaScript adiciona o atributo target com valor _blank. É uma solução muito interessante, mas a meu ver, eu utilizaria uma solução mais semântica:


$(document).ready(function(){
	$("a[@rel=external]").attr('target','_blank');
});

Minha solução pega todos os links da página que contenham o atributo rel=”external” e faça com que os mesmos abram em uma outra aba/janela. A meu ver, bem mais semântico. E você, tem alguma sugestão?

Update: A partir da versão 1.3 do jQuery, deve ser eliminado o @ do código, ficando dessa forma:


$(document).ready(function(){
	$("a[rel=external]").attr('target','_blank');
});

DOM Tool – Aprenda a gerar HTML a partir de JavaScript de forma fácil

Postado por: Pedro Rogério em
Dom Tool

Já vi pessoas utilizarem document.write para gerar uma página inteira, e sinceramente, isso é ridículo, sendo que existem opções mais limpas e cômodas. Utilizar JavaScript para fazer uma página inteira é uma coisa ridícula, mas caso seja necessário, aconselho a utilizar a DOM Tool.

DOM Tool se encarrefa de converter qualquer porção de HTML nas correspondentes chamadas JavaScript. Dessa forma, a criação de pequenas porções de HTML a partir de JavaScript serão mais rápidas de implementar.

Via: Anieto2K – DOM Tool, genera HTML mediante JS de forma fácil.

DOM como alternativa ao innerHTML

Postado por: Pedro Rogério em

innerHTML com certeza foi uma mão na roda para os desenvolvedores durante muito tempo, e ainda hoje existe muita gente que o utiliza seja por não conhecer outras alternativas ou por pura preguiça.

Quais os problemas de utilizar innerHTML?

  • innerHTML não é um padrão standard, é uma propriedade da Microsoft, e por isso já não é de se confiar muito.
  • As aplicações baseadas no MIME Type application/xhtml+xml não suportam essa propriedade.
  • A propriedade funciona como uma String, deixando de fora qualquer interação com o DOM que tentarmos introduzir.
  • Ao tratar-se de uma cadeia de texto, teremos alguns problemas com acentuação, fechamento de tags, comentários na página.

Criando múltiplos elementos

A partir de um Array, vamos criar uma lista de elementos uitlizando innerHTML e depois usando DOM.

innerHTML:


data = new Array("one","two","three");
mHTML = "<ul>";
for(i=0;i<data.length;i++) {
	mHTML+="<li>" + data[i] + "</li>";
}
mHTML+="</ul>";
document.getElementById("mContainer").innerHTML = mHTML;

Dessa forma definimos todo o HTML necessário para construírmos nossa lista, usando DOM seria dessa forma:

DOM:


data = new Array("one","two","three");
 // create the UL element that our LI elements will descend from
eUL = document.createElement(”ul”);
// loop over the length of the “data” array
for(i=0;i<data.length;i++) {
	// create an LI
	eLI = document.createElement(”li”);
	// append the value of data[i] to the LI as a text node
	eLI.appendChild(document.createTextNode(data[i]));
	// append the LI to the UL
	eUL.appendChild(eLI);
}
// append the UL to the “mContainer” element.
document.getElementById(”mContainer”).appendChild(eUL);

Referências

AxsJax – Ajax Acessível

Postado por: Pedro Rogério em
AxsJax

AxsJax é o novo companheiro dos desenvolvedores no mundo do Ajax. Se trata de um Framework que permite adicionar acessibilidade aos projetos web que fazem o uso de Ajax. Assim, usuários que fazem o uso de tecnologias assistivas ou similares podem desfrutar de todas as características das aplicações.

Exemplos de aplicações que fazem o uso de AxsJax: Google Web Search, Google Reader, Google Scholar e o jogo Jawbreaker. Detalhes sobre o uso e implementação, você pode encontrar em seu showcase.

Referências

Google Maps sem o uso de JavaScript

Postado por: Pedro Rogério em

Google Maps é uma ferramenta do Google que revolcucionou a Internet. Graças a geolocalização foram possíveis o desenvolvimento de aplicações como Panoramio. Mas se você achava que era impossível fazer o uso de Mapas do Google com imagens estáticas, estava muito errado.

Static Google Maps

Para fazer o uso de imagens desse tipo, você deve utilizar uma chave, que você obterá ao cadastrar seu site no Google Maps API. Uma vez com essa chave, podemos obter a imagem estática.


<img src="http://maps.google.com/staticmap?center=47.238336,8.827171&zoom=12&markers=40.416741,-3.70325,red&size=512×512&key=MAPS_API_KEY“>

Analisando a URL, veremos os parâmetros que intervêem e as quais podemos personalizar nosso mapa:

  • center: //Centro da imagen (ej: 0.0000,0.0000)
  • zoom: //Zoom que se aplica a imagen, de 0 a 19 (0 para longe, 19 para perto)
  • size: //Tamanho da imagem em pixels (máximo 512×512)
  • maptype: //Tipo de mapa (roadmap => Mapa para páginas web, mobile => Mapa para baixas resoluções)
  • markers: //Marcadores dentro do mapa. (ex: markers=40.702147,-74.015794,blues|40.711614,-74.012318,green)

Referências

Extensões do Dreamweaver para Frameworks JavaScript

Postado por: Pedro Rogério em

Se você utiliza o dreamweaver no seu dia-a-dia agora pode ficar feliz, pois demorou mais chegou, e agora o suporte do dreamweaver as livrarias JavaScript vieram em forma de extensões.

Vídeo (Objeto multimídia)

Todos os créditos do vídeo são do site Xtnd.us

Você pode encontrar extensões para:

  • jQuery API para Dreamweaver MX-CS3
  • Prototype API para Dreamweaver MX-CS3
  • Mochikit API para Dreamweaver MX-CS3
  • MooTools API para Dreamweaver MX-CS3
  • YUI API para Dreamweaver MX-CS3
  • Ext API para Dreamweaver MX-CS3

Para utilizá-las, basta ter o Extension Manager instalado no micro.

Referências