Notícias

AJAX CrossDomain - 23 de março de 2010

Por questões de segurança, não se é possível fazer requisições AJAX para outros domínios que não sejam onde seu script está hospedado.Graças ao YQL isto é possível, confira no vídeo abaixo:

O script:

// Accepts a url and a callback function to run.
function requestCrossDomain( site, callback ) {

	// If no url was passed, exit.
	if ( !site ) {
		alert('No site was passed.');
		return false;
	}

	// Take the provided url, and add it to a YQL query. Make sure you encode it!
	var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';

	// Request that YSQL string, and run a callback function.
	// Pass a defined function to prevent cache-busting.
	$.getJSON( yql, cbFunc );

	function cbFunc(data) {
	// If we have something to work with...
	if ( data.results[0] ) {
		// Strip out all script tags, for security reasons.
		// BE VERY CAREFUL. This helps, but we should do more.
		data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');

		// If the user passed a callback, and it
		// is a function, call it, and send through the data var.
		if ( typeof callback === 'function') {
			callback(data);
		}
	}
	// Else, Maybe we requested a site that doesn't exist, and nothing returned.
	else throw new Error('Nothing returned from getJSON.');
	}
}

Chamando a função:

requestCrossDomain('http://www.hiveweb.com.br', function(results) {
   $('#container').html(results);
});

Para saber mais a respeito:

Conhecendo o YQL

The Script

// Accepts a url and a callback function to run.
function requestCrossDomain( site, callback ) {

	// If no url was passed, exit.
	if ( !site ) {
		alert('No site was passed.');
		return false;
	}

	// Take the provided url, and add it to a YQL query. Make sure you encode it!
	var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=?';

	// Request that YSQL string, and run a callback function.
	// Pass a defined function to prevent cache-busting.
	$.getJSON( yql, cbFunc );

	function cbFunc(data) {
	// If we have something to work with...
	if ( data.results[0] ) {
		// Strip out all script tags, for security reasons.
		// BE VERY CAREFUL. This helps, but we should do more.
		data = data.results[0].replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');

		// If the user passed a callback, and it
		// is a function, call it, and send through the data var.
		if ( typeof callback === 'function') {
			callback(data);
		}
	}
	// Else, Maybe we requested a site that doesn't exist, and nothing returned.
	else throw new Error('Nothing returned from getJSON.');
	}
}

Call the Function

requestCrossDomain('http://www.cnn.com', function(results) {
   $('#container').html(results);
});

Stripping Out the Script Tags

I had to progress rather quickly in the video, so perhaps the regular expression that strips out the <script> tags require further detail.

.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');

When we load our desired page, it’s also going to load scripts! You must be very careful when making cross domain request. It definitely helps to strip out the <script> tags, but you should do more in an actual project.

Let’s take the regular expression step by step.

<script[^>]*>

Find all open script tags; however, they could come in many forms: <script type=”text/javascript” src=”bla.js”></script> , or <script type=”text/javascript”>lots of code here…</script> . For this reason, we add a character class ( [^>]* ), which mean, “Find zero or more of anything that IS NOT a closing bracket. This will take care of the attributes and values.

[\s\S]*?

Next, we want to strip out all code, as well as any spacing. \s refers to a space. \S refers to anything that IS NOT a space. Once again, we add a * after the character class to designate that we want zero or more occurrences.

<\/script>

Finally, find the closing script tags.


Further Reading

This is only meant to provide a glimpse of how we can achieve this functionality. Only so much can be covered in a five minute video. Feel free to discuss in the comments, and you’re always encouraged to fork the source codeto improve upon it!


Categoria: javascript Tags: ,

IE9 pode ser um browser fantástico! -

Na mix10, conferencia de web designers e desenvolvedores, foram apresentados alguns avanços na criação do Internet Explorer 9.  A equipe do IE estão implementando novas funcionalidades tais como, suporte a HTML 5, CSS3, SVG e uma nova engine mais rápida de javascript, Chakra. Configra

Faça um test drive do novo IE 9.

BenchMark da nova engine, chakra, da Microsoft no Acid3:

benchmark ie 9

Saiba a nota que o seu navegador receberá pelo Acid3 em relação as concordâncias dos padrões web hoje existentes.

Categoria: Sem categoria Tags:

Google, me encontre! - 22 de março de 2010

No último fim de semana aconteceu o evento UaiSEO e o blog MestreSEO separou 74 dicas de como melhorar seu posicionamento no ranking dos buscadores e facilitar que seu site seja encontrado.

Seguem algumas delas.

Gustavo Guanabara

1. Trabalhe princípios de persuasão com os seus usuários, tais como amizade, reciprocidade, consistência, autoridade, validação social, raridade, para assim conseguir fidelização;
2. Consiga engajamento através de conteúdo de qualidade, canais de comunicação, discussões, eventos;
3. Se os seus leitores querem colaborar com o seu projeto, aproveite;
4. Promova os usuários que tem maior ou melhor participação;
5. Monitore o seu sucesso nas redes sociais: whoistalkin.com, tweetbeep.com, socialmention.com, klout.com, trendistic;
6. Saiba para quem você está fazendo sites, reforce sua relação com o cliente;
7. Uso das redes sociais é comprovadamente uma boa tática, afinal, já são mais de 55 milhões de usuários agregados a elas;
8. Dê importância ao Twitter, ele cresceu 1382% em 2009 e a tendência é aumentar cada vez mais;
9. O ensino gratuito tem um poder muito grande – blog, podcast, etc – ensine o usuário a fazer;
10. Saiba lidar com críticas – fortalecer o relacionamento com o usuário e visualizar novas oportunidades;
11. Monte uma equipe, ninguém cresce sozinho;
12. Alguns plugins para wordpress: top commentators, podpress, thread comment, link within, buddypress;
13. Observar páginas com alto bounce rate;
14. Acompanhar o crescimento das visitas;

Frank Marcel

1. O trabalho de SEO precisa ser monitorado;
2. Faça um resumo das suas atividades de SEO de todo o mês;
3. Monte uma tabela de palavra-chave, rankings, visitas e conversão;
4. Meça visitas;
5. Meça conversão;
6. Meça sites de referência (tanto quantidade de sites, quanto visitas por estes sites);
7. Acompanhe posicionamento de keywords;
8. Acompanhe distribuição de keywords em SERPs;
9. Acompanhe a quantidade de páginas que recebem visitas de busca orgânica;
10. Compare a quantidade de páginas que recebem visitas com a quantidade de palavras de entrada;
11. Analise os sites de referência, veja as conversões que eles estão lhe proporcionando e interaja mais com estes websites;
12. Se você possui um ecommerce, monitore ele com o Google Analytics;
13. Monitore as palavras-chave com e sem a sua marca, elas podem lhe indicar comportamentos diferentes dos usuários;
14. Monitore o ROI do website que você trabalhe e mostre o retorno que as visitas orgânicas têm produzido;
15. Analise as páginas com alta taxa de abandono;
16. Mantenha o controle sobre o seu trabalho de linkbuilding, listando toda a sua atividade do mês;

As outras dicas podem ser encontradas no artigo: 74 Dicas do Uai SEO

Categoria: seo Tags: , ,

Qualquer tipo de fonte em seu site - 18 de março de 2010

Com a evolução da tecnologia começam a surgir formas de tipografar na web sem que o usuário visite sua página tenha determinada fonte instalada em sua máquina. Essa nova ferramenta, ainda em imersão na área, possibilita aos designer criarem interfaces mais ousadas e chamativas.

Primeiramente, precisamos entender como funciona o processo de renderização do browser. O browser solicita uma página web que contém um código HTML. Esse código é convertido para elementos DOM para que o browser consiga interpretá-los conforme as tags escritas no código. Após feita essa renderização dos elementos HTML na tela, aplicam-se as folhas de estilo (css) e os scripts (js) sobre os elementos contidos na pagina.

Entendido a forma de renderização iremos “instalar” em nosso site o facelift, que consegue renderizar fontes que não estejam na máquina cliente, e o jQuery, framework javascript. Baixe as útlimas versões de ambos e descompacte na mesma pasta.

Inserindo o facelift na página:

<script type="text/javascript" src="http://www.seu.site.com.br/js/facelift/flir.js"></script>
<script type="text/javascript" src="http://www.seu.site.com.br/js/jquery.js"></script>

Com o código inserido na página, abra o arquivo config-flir.php e altere o que for necessário. Não se preocupe o arquivo é bem comentado. Feito isso voltamos para o HTML e inserimos o último trecho de código para que o facelift funcione que é o de identificar os elementos DOM que serão renderizados com a nova fonte.


<script type="text/javascript">
#Iniciamos o facelift e dizemos a ele onde buscar os scripts
FLIR.init({path:"http://www.seu.site.com.br/js/facelift/"});

#Dizemos quais elementos o facelift deve renderizar usando jQuery
$("#sidebar h2").each( function() { FLIR.replace(this); } );
</script>

Em caso de dúvida sobre como usar o jQuery acesse o docs na área de seletores.

Atenção! Não renderize textos muito extensos para não afetar o desempenho do seu site.

Categoria: javascript Tags: , , ,