RSS Feed

Posts Tagged ‘inteface’

  1. Novo lançamento da Google, confira o portal Google Chrome Experiments

    March 19, 2009 by admin

    O Google anunciou o lançamento de um portal chamado “Chrome Experiments” que compila uma série de games e visualizações experimentais desenvolvidos em JavaScript por profissionais em várias partes do mundo.
    Vale apena ver, tem muitas coisas legais.
    Site: http://www.chromeexperiments.com

    Category JavaScript | Tags: ,,,, | No Comments

  2. Como se posicionar nas primeiras páginas dos sites de busca como Google, Yahoo, RadarUol, IG e outros.

    March 18, 2009 by admin

    omo se posicionar nas primeiras páginas dos sites de busca?

    Google, Yahoo, RadarUol, IG…

    Introdução

    Existem técnicas para aumentar as chances dos buscadores tais como Google, Cade, Altavista, etc… localizar seu site entre as 10 primeiras páginas sugeridas. Estas técnicas são um pouca complicadas e precisam de muita dedicação para obter resultados satisfatórios.

    Resumindo o que vou passar para vocês, para seu site ser um dos primeiros nos sites de buscas é preciso o seguinte:

    - Conteúdo em quantidade e de qualidade a respeito de um assunto;
    - Atualização;
    - Distribuição de links para o maximo de sites possiveis;
    - Meta tag bem organizada;
    - Honestidade. Não adinda tentar “subornar” os sistemas de busca.

    Imagine você: Um webmaster querendo que seu site seja o primeiro nas pesquisas sobre “noticias” se ele não tem um site “forte” o suficiente para tal? Até porque existem dezenas de sites com um conteúdo respeitalvel (por exemplo o Portal Terra, Uol, Folho on-line..) que merecem ser o primeiro mas, não é possível colocar todos os sites na primeira página.

    Então, nunca pense “o meu site está bom”, porque existem outros que estão crescendo e você precisa ser sempre o melhor para que possa ficar entre os primeiros.

    + Conteudo

    - Atenção ao campo “descrição”
    - Procure trocar links, fazer parcerias.
    - Evitando punições por parte dos sites de busca.
    - Page rank – Como funcionam os sistemas de busca da Internet.

    Atenção ao campo “descrição”.

    No cadastro de seu site em mecanismos de busca, o campo “descrição” é responsável por nada mais, nada menos que apresentar um resumo sobre o conteúdo do seu site ou serviços de sua empresa.

    Procure não utilizar muita acentuação, isto pode provocar alguma incompatibilidade para a visualização, procure também evitar descrições TOTALMENTE EM MAIÚSCULO, ou com muitas exclamações ( !!!! ) e interrogações ( ???? ).

    Fique atento também ao tamanho da sua descrição, afinal, nem os mecanismos de busca aceitam descrições muito grandes e nem os internautas gostam de ficar lendo descrições muito extensas. O ideal é fazer descrições com no máximo 255 caracteres.

    Seguir condutas que ferem estas dicas pode resultar em exclusão por parte dos buscadores, ou seja, seu site não será cadastrado.

    Procure trocar links, fazer parcerias.

    Alguns mecanismos como o Google.com e Alltheweb.com classificam sites de acordo com o número de links que apontam para estes sites.

    É o famoso “Q.I”, quem indica… se um site é muito comentado, ou seja, se há muitos links apontando para ele, significa que seu conteúdo é realmente interessante, desta forma, o buscador exibirá este site entre as primeiras posições.

    Evitando punições por parte dos sites de busca

    Os mecanismos de busca costumam obedecer algumas regras básicas para garantir a saúde de seus resultados.

    Entre as regras, constam medidas tomadas para se evitar que sites inundem os resultados da busca, são normas criadas em prol de resultados limpos e sem trapaças.

    Por isto, se seu site estiver utilizando um dos recursos abaixo, tome cuidado! Ele poderá ser punido ou até mesmo excluído da base de dados de alguns buscadores:

    Texto escondido:

    Colocar palavras-chaves (keywords) escondidas no conteúdo da página com a intenção de melhorar posicionamentos, utilizando técnicas primárias como cor de fundo igual a cor do texto, ou reduzir a fonte ao máximo para que a lista de palavras-chave não atrapalhem a visualização do site pode render certamente uma boa penalidade por parte dos buscadores.

    Redirecionamento via Javascript:

    Também chamado de Cloaking, consiste em, criar uma página X, com conteúdo voltado exclusivamente para os mecanismos de busca (conteúdo otimizado) e no entanto, ao ser acessada por um internauta, esta página redireciona para outra página Y, com conteúdo diferente.

    Fazer SPAM de urls:

    Alguns mecanismos de busca com o Google (www.google.com) e o All The Web (www.alltheweb.com) já excluem de seus bancos de dados URLS presentes em emails considerados SPAM.

    Cadastrar diversas páginas em um mesmo período:

    A submissão de páginas em excesso (páginas internas ao site) pode garantir penalidades ao seu site. O ideal é fazer a divulgação da index (página de entrada), dos diretórios, e do domínio do site. Desta forma, sites de busca como o Google poderão dar continuidade a indexação apenas seguindo os links presentes na própria página.

    Excesso de links:

    Alguns mecanismos desconfiam de páginas que possuem um número excessivo de links, isto pode indicar que esta página pode estar querendo melhorar seu PageRank de forma forçada. O ideal é manter páginas com no máximo 50 links. Outra forma de punição é ter sua página classificada como uma “FFA” (Free-for-all links page).

    Domínios apontando para um mesmo site:

    O Google indexa domínios múltiplos, desde que estes sejam redirecionados a subdiretórios, seguindo esta regra provavelmente seu site não terá problemas. Mas criar centenas de domínios visando as palavras-chave presentes no endereço pode garantir a exclusão de todos estes domínios e também a subvalorização dos mesmos com diminuição da popularidade e do Page Rank.

    Diversas páginas com mesmo conteúdo:

    Criar diversas páginas idênticas não fará com que seu site melhore sua posição. Existem ferramentas capazes de analisar conteúdos e, conforme a porcentagem de semelhança, somente uma das páginas será considerada.

    FFAs:

    São scripts criados para a rápida adição de páginas, por serem abundantes e de fácil acesso, são desvalorizadas pelos mecanismos de busca, ou seja, se seu site estiver presente com um link em um site FFA, não terá grande incremento em sua popularidade.

    Página inicial:

    Não abuse do tamanho, manter páginas iniciais com vasto conteúdo e sempre atualizadas é muito importante, no entanto, evite construir páginas iniciais “do tamanho do mundo”, seja moderado, procure criar páginas iniciais de tamanho legível, assim como as páginas dos portais UOL (www.uol.com.br) e Terra (www.terra.com.br).

    Page rank – Como funcionam os sistemas de busca da Internet

    Existe uma técnica para aumentar as chances dos buscadores tais como Google, Cade, Altavista, etc… localizar seu site entre as 10 primeiras páginas sugeridas.

    É um pouco complicada e pode mudar de repente… principalmente no Google, ali o site de um “Colaborador Xoops” era o quarto na busca por certa palavra…depois desapareceu do mecanismo e voltou a reaparecer em 16°.

    Para exemplificar vamos discorrer sobre o Google, que é o principal sistema de busca da Internet.

    O Google utiliza um mecanismo matemático para classificar seu site no resultados das buscas. esta fórmula é mantida em segredo e ajustada conforme o interesse deles em fornecer dados confiáveis.

    Entre os fatores que influenciam no Google está:

    -Presença da palavra chave no Título do site;

    -Presença dela no texto do site em negrito, H1, H2 e H3 ( exagero será punido com expulsão do site) …importante situar a palavra chave nos links;

    -Densidade da palavra chave em relação ao texto (se a palavra aparecer mais de 20% no texto será considerado trapaça e a classificação cai muito) 5% é considerado por muitos especialistas como bom;

    -Quantidade de sites que tem link para o site objeto, e qualidade destes sites em relação a mesma palavra chave (esta é considerada por muitos a melhor forma de ser #1);

    -Para incluir palavras chave nas meta-tags, faz-se uma lista de palavras que descrevem o assunto, coloca-se na meta-tag keywords e sem repetir mais de 3 vezes a mesma palavra. Plural e singular considera-se igual em muitos buscadores;

    São muitos fatores…mas basicamente a melhor dica é ter muiiitas páginas no site com conteúdo útil. Um site com 200 paginas de artigos sobre um certo assunto tem futuro garantido no Google !

    CADA PÁGINA LINKANDO UMA OUTRA PÁGINA DO SITE E NO LINK O TEXTO DEVE SER A PALAVRA CHAVE.

    Outro procedimento de futuro garantido: trocar links com sites de mesmo tema, mas não concorrentes.

    Por exemplo: para um site de criação de codornas é uma boa idéia trocar link com outro site sobre aves, rações para aves, ou ainda, receitas com carne de codorna.

    Aqueles sistemas de FFA ou lista de links onde nos estimulam a divulgar um site de forma aleatória apenas irão derrubar a posição no Google.

    O site com o qual é efetuada troca links é importante também. Faça o download da barra de navegador do Google, ela mostra o PageRank (um numero de 0 a 10 que classifica o site por importância) e devemos trocar links com sites que tenham um PageRank maior.

    São muitas as técnicas para melhorar a posição no Google, tantas que existem até livros sobre este assunto. Especialistas chegam a cobrar até U$500, apenas para auxiliar na melhoria das posições.

    O altavista segue mesmo esquema, Cade e Yahoo são na verdade “diretórios” e não sistemas de busca, classificam sites por ordem alfabética.

    Mediante remuneração, nesses sistemas classificados como “diretórios”, um site pode burlar a ordem.

    Quando um “diretório” não gera resultado para pesquisas, eles utilizam os resultados do Google.

    Basicamente devemos construir um site com muito conteúdo útil, isso estimulará as pessoas a linkarem no endereço. E uma coisa puxa a outra.

    Curiosidade:

    -A um tempo atrás se colocássemos no Google a palavra “anti-cristo” em inglês o site que aparecia no primeiro lugar nas buscas era o da Microsoft ?

    Tratou-se de um golpe de amantes do Linux, eles fizeram o seguinte: cada um deles criou um link em seus sites com o texto “anti-cristo” e o link apontava para o site da Microsoft. Depois de alguns meses existiam milhões de links anti-cristo apontando para a Microsoft.

    Como o Google faz rastreamento em todos os sites da internet e lê todo texto do site e segue os links. A fórmula matemática acabou resultando que “anti-cristo” era palavra chave para microsoft.com

    Após o fato divulgado, o pessoal do Google apressou-se em corrigir o sistema.

    Não deixa de ser engraçado !

    Algumas informações particulares sobre o Google é o PageRank:

    -Deve apenas cadastrar a página principal do site no Google e deixar ele navegar pelas outras páginas.

    -O mais importante para o Google e outros sites de busca é a meta-tag robots, ela deve estar com um index, follow para permitir que o mecanismo visite o site por conta própria.

    Category SEO | Tags: ,,,,,,,,,,,,, | 5 Comments

  3. Memory Leak

    March 17, 2009 by admin

    Contents


    Identificação do problema

    Quando desenvolvemos aplicativos com DHTML (Javascript, DOM e CSS) encontramos problemas para controlar a performance e os memory leaks. Uma vez identificados os padrões de códigos que causam esses problemas, começaremos a trabalhar de forma homogênea e sem a necessidade de retrabalho.

    O problema não atinge só o Internet Explorer 6.0 (IE6). Ele pode acontecer com o Mozilla, Netscape e Opera. Apesar do IE6 ser o browser mais problemático hoje em dia. Muitos aplicativos, com determinado tempo de uso, começam a consumir uma quantidade impressionante de memória causando lentidão na máquina do usuário e refletindo na experiência que ele tem ao acessar o site. Muitas vezes a memória só é devolvida ao sistema operacional depois de fechar o browser.

    Então o que acontece para existir o memory leak? Como é muito comum supor, o problema não está no garbage colector (GC) dos browsers. Pelo contrário. Eles funcionam muito bem se você tomar determinados cuidados na hora de programar. Considere o seguinte código:

    function GCTest() {
	var x = new Array(1000).join(new Array(2000).join('XXXXX'));
}

    Após esta função ser executada, toda a memória utilizada pela variável x é devolvida para o sistema operacional pelo GC do Javascript (COM). O mesmo acontece quando trabalhamos com elementos do DOM. Quando criamos uma tabela com HTML, não precisamos nos preocupar em remover essa tabela da memória após a execução da página.

    <table>

	<tr><td>Lorem</td><td>Ipsum</td></tr>

</table>

    Quando trabalhamos com os “dois mundos”, o COM guarda uma referência para cada elemento. Se existe referência para um elemento no COM, a memória usada pela por ele não é liberada. O problema acontece quando temos uma referência cruzada, onde um objeto Javascript aponta para um objeto DOM e o DOM aponta de volta para o Javascript, e assim a memória usada nunca será liberada.

     

    Padrões de memory leak

    Inline script

    Na declaração inline de um script na criação de um elemento HTML a referência que é criada para a função foo() não é eliminada depois que o código é executado. Isso cria uma referência circular e causa o memory leak.

    function LeakMemory() {
	for (var i = 0; i < 5000; i++) {

    var parentDiv = document.createElement(‘

    ‘);
    	}
}

    Nesse código criamos um novo elemento div sem a declaração do evento. O evento deve ser adicionado depois que o elemento já existe no DOM para evitar o memory leak. Note que nesse exemplo o número de iterações passa de 5.000 para 50.000, e mesmo assim a memória é liberada após a execução do escopo da função.

    function LeakMemory() {
	for (var i = 0; i < 50000; i++) {
		var parentDiv = document.createElement('div');
	}
}

    Closures

    Closures é um pattern muito utilizado em Javascript que permite o encapsulamento de funções. Leia mais sobre o assunto em Referências. Neste caso, adicionamos o evento onclick após a criação do elemento HTML.

    function LeakMemory() {
	var parentDiv = document.createElement('div');
	parentDiv.onclick = function() {
		foo();
	};
}

    Quando criamos o elemento parentDiv e adicionamos o evento onclick dentro da função principal, criamos um closure. Ele guarda uma referência no elemento DOM (parentDiv) e o Javascript (função anônima).

    Expando property

    No código a seguir, criamos uma referência circular guardando a referência da variável global do Javascript que aponta para um elemento DOM dentro de uma propriedade do elemento DOM. O objeto Javascript myGlobalObject aponta para o objeto DOM (div) LeakDiv que tem a propriedade expandoProperty que aponta de volta para o elemento Javascript myGlobalObject.

    var myGlobalObject;
function SetupLeak() {
	myGlobalObject = document.getElementById('LeakedDiv');
	document.getElementById('LeakedDiv').expandoProperty = myGlobalObject;
}

     

     

    Encapsulator pattern

    Esse caso é muito semelhante ao anterior só que a referência circular é feita guardando a referência do DOM dentro da função Javascript e a referência Javascript dentro da propriedade do objeto DOM. O objeto Javascript this.elementReference aponta para o objeto DOM (div) element que tem a propriedade expandoProperty que aponta de volta para o elemento Javascript.

    function Encapsulator(element) {
	this.elementReference = element;
	element.expandoProperty = this;
}
function SetupLeak() {
	new Encapsulator(document.getElementById('LeakedDiv'));
}

     

     

    Event listener

    Esse é o caso mais comum de memory leak com closures, onde o evento onclick faz a referência circular por usar uma função anônima dentro do mesmo escopo da criação do listener.

    window.onload = function() {
	var obj = document.getElementById('LeakedDiv');
	obj.onclick = function(e) {
		  ... lógica ...
	};
}

     

    Cross Page Leak

    Aqui temos um caso que é muito difícil de identificar. Nesse caso, a ordem de inserção dos novos elementos na árvore do DOM influencia. Na criação do parentDiv e do childDiv foi usado inline script e quando adicionamos os elementos na página ele perde a referência porque os elementos apontam para funções anônimas.

    function LeakMemory() {
	var hostElement = document.getElementById('hostElement');
	for (i = 0; i < 5000; i++) {

    var parentDiv = document.createElement(‘

    ‘);
    var childDiv = document.createElement(‘
    ‘);
    		parentDiv.appendChild(childDiv);
		hostElement.appendChild(parentDiv);
		hostElement.removeChild(parentDiv);
		parentDiv.removeChild(childDiv);
		parentDiv = null;
		childDiv = null;
	}
	hostElement = null;
}

    Novamente, a melhor opção é trabalharmos com funções fora do escopo da criação dos elementos e, se necessário, ao inserir no DOM sempre fazermos a inserção do elemento pai e depois o elemento filho como é mostrado no exemplo seguinte.

     

    function LeakMemory() {
	var hostElement = document.getElementById('hostElement');
	for (i = 0; i < 5000; i++) {

    var parentDiv = document.createElement(‘

    ‘);
    var childDiv = document.createElement(‘
    ‘);
    		hostElement.appendChild(parentDiv);
		parentDiv.appendChild(childDiv);
		parentDiv.removeChild(childDiv);
		hostElement.removeChild(parentDiv);
		parentDiv = null;
		childDiv = null;
	}
	hostElement = null;
}

    Boas práticas

    Referências ao DOM

    É recomendável que ao criar uma variável Javascript que aponte para um elemento DOM ela seja desalocada logo que deixar de ser usada. Para isso atribuímos null à variável. Essa regra se aplica tanto para variáveis privadas como para as privilegiadas.

    function domRefecente() {
	var header = document.getElementById('headerDiv');
	var footer = document.getElementById('footerDiv');
	this.div = document.createElement('div');
	... lógica ...
	header = null, footer = null, this.div = null;
}

    Quando é necessário guardar um objeto DOM no Javascript para utilização futura, SEMPRE guarde o id do objeto ao invés de uma referência para ele.

    function domRefecente() {
	var div = document.createElement('div');
	div.id = 'meuDiv';
	var divId = div.id;
	div = null;
}

    Eventos

    Não usar funções anônimas para os eventos. Exemplo da correta declaração de um evento.

    function addListener() {
	var elm = document.getElementById('myDiv');
	elm.onclick = handleClick;
	elm = null;
}
    function handleClick(e) {
	... lógica ...
}

    Ao atribuir um novo evento a um elemento, ele já deve existir na árvore do DOM. Exemplo da correta atribuição de evento a um novo elemento que está sendo criado via Javascript.

    function newElement() {
var elm = document.createElement('div');
	document.appendChild(elm);
	elm.onclick = handleClick;
	elm = null;
}
    function handleClick() {
	... lógica ...
}

    Quando um elemento é removido do DOM via Javascript, todos os eventos cadastrados nele devem ser removidos para evitar o memory leak.

    function createElements() {
	var ul = document.getElementById('menu');
	for (var i = 0; i < 5000; i++) {
		var li = document.createElement('li');
		li.id = 'menu' + i;
		ul.appendChild(li);
		li = null;
	}
	addListener();
	ul = null;
}
    function addListener() {
	for (var i = 0; i < 5000; i++) {
		var li = document.getElementById('menu' + i);
		li.onclick = handleClick;
		li = null;
	}
}

    function handleClick(e) {

     ... lógica ...

    }

    function removeElements() {
	for (var i = 0; i < 5000; i++) {
		var li = document.getElementById('menu' + i);
		li.onclick = null;
		li.parentChild.removeChild(li);
		li = null;
	}
}

    Criando elementos no DOM

    A ordem com que os elementos são inseridos no DOM via Javascript influencia na performance e na criação de memory leaks. O ideal é termos uma outra função fora do escopo da função usada para a criação dos elementos onde serão atribuídos os eventos a esses elementos.

    Quando estamos inserindo uma série de elementos no DOM, a cada appendChild o browser renderiza esse elemento juntamento com todos os filhos do elemento (elemento pai) aonde estamos inserindo ele. O que isso significa? Quando temos um div com vários div’s dentro dele, ao inserir um novo div, todos os anteriores serão renderizados novamente, consumindo uma quantidade enorme de tempo proporcional a quantidade de elementos no div pai.

    Nesse caso usamos a técnica de criar um elemento temporário, adicionar todos os div’s filhos dentro dele e só então adicioná-los ao div pai.

    function addDiv() {
	var divPai = document.getElementById('divPai');
	var divTmp;
	for (var i = 0; i < 5000; i++) {
		var divFilho = document.createElement('div');
		divTmp.appendChild(divFilho);
		divFilho = null;
	}
	divPai.appendChild(divTmp);
	divPai = null, divTmp = null;
}

    Existe o caso em que precisamos adicionar o evento nos elementos na hora da sua criação. Para tornar isso possível, podemos inverter a ordem da inclusão dos elementos como mostrado no item Cross Page Leak.

    Conclusão

    Com um pouco de atenção e conhecimento podemos evitar muita dor de cabeça no futuro. Facilitando a manutenção do código e o acesso dos usuários aos nossos sites. O memory leak é apenas um dos problemas que temos de nos preocupar na hora de criar um aplicativo web. Por isso que um pouco de planejamento antes de começar a codificar evita muitas horas de depuração de código e retrabalho.

    Programas

    Veja no item específico da lista de Softwares para Interface #Memory Leak.

    Referências

    • Javascript memory leaks

     


    Category JavaScript | Tags: ,,, | 1 Comment