Veja o video do Ubiquity um otimo plugin do firefox, uso ele a quase um ano e gosto muito, é um dos melhores plugins que eu tenho.
Ubiquityhttp://labs.mozilla.com/2008/08/introducing-ubiquity/
Tecnologia semântica em buscas do Google
Nesta terça-feira, 24, o Google anunciou que integrou ao seu sistema de busca uma tecnologia de semântica, o que permitirá ao site associar as palavras buscadas a outras de significado parecido, para melhorar a procura feita pelos usuários.
“Haverá mais perguntas, mais linguagens, e fazemos nossas sugestões do que é mais relevante para a necessidade do internauta atualmente”, escreveram os engenheiros no blog oficial do Google.
Segundo a empresa, chamada “busca semântica” será habilitada em 37 idiomas.
Web 3.0
O interesse pelas “buscas semânticas” tem crescido para criar sistemas mais inteligentes que procuram interpretar e compreender o significado de sentenças ou combinações de palavras.
Em janeiro, durante uma conferência financeira, o CEO do Google, Eric Schmidt, já havia dado indícios da novidade, alegando que a companhia teria uma postura mais séria a respeito da busca semântica. “Não seria legal se o Google entendesse o sentido da sua frase, ao invés de apenas palavras que compõem a frase? Fizemos muitas descobertas nessa área que deveremos lançar logo”, disse ele na ocasião.
E não é só o Google que vem trabalhando nisso. A principal rival do Google em um suposto mercado semântico de busca, a PowerSet, foi adquirida pela Microsoft em julho por 100 milhões de dólares para melhorar os conceitos semânticos por trás do Windows Live Search.
Recentemente a gigante dos softwares confirmou que está testando o seu sistema de buscas Kumo.com.
Novo lançamento da Google, confira o portal Google Chrome Experiments
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
Como se posicionar nas primeiras páginas dos sites de busca como Google, Yahoo, RadarUol, IG e outros.
omo se posicionar nas primeiras páginas dos sites de busca?
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.
SEO = Search Engine Optimization / Otimização de sites para motores de busca
Otimização de Sites é o conjunto de estratégias com o objetivo de potencializar e melhorar o posicionamento de um site nas páginas de resultados naturais (orgânicos) nos sites de busca. O termo SEO (do inglês, Search Engine Optimization, Acrônimo SEO) também se refere a indústria de consultoria, que trabalha na otimização de projetos e websites de seus clientes. Alguns comentaristas, e também alguns profissionais de SEO, dividiram os métodos usados por seus praticantes em categorias como os “SEO de White Hat” (geralmente utilizam métodos aprovados pelos sistemas de busca, como a prática de construção de conteúdo relevante e melhoria da qualidade do site), ou “SEO de Black Hat” (utilizam truques como “cloaking”, que é a camuflagem do conteúdo real da página, e spamdexing). O termo “spamdexing” (originado da fusão de spam e indexing) refere-se a pratica de Spam direcionada aos motores de busca.
Os praticantes de técnicas de White Hat dizem que os Black Hat se valem de métodos que são vistos como tentativas de manipular o posicionamento dos resultados nos Mecanismos de Busca a seu próprio favor. Praticantes do Black Hat dizem que todas as tentativas e técnicas utilizadas para manipular o posicionamento são legítimas e o tipo de técnica utilizada para se alcançar o objetivo de melhorar o page rank é irrelevante.
Os Mecanismos de Busca indicam diferentes tipos de listagens nas páginas de resultados, incluindo: publicidade paga nas páginas de resultados, (SERPs – Search Engine Result Pages), conteúdo de publicidade paga por clique pay-per-click, anúncios, pagamento para inclusões em sistemas de busca e resultados de busca orgânica.
As técnicas utilizadas no SEO são concebidas para alavancar seus objetivos no seu website melhorando o número e a posição de seus resultados nas busca orgânica para uma grande variedade de palavras-chave relevantes ao conteúdo do web site. Estratégias de SEO podem melhorar tanto o número de visitações quanto a qualidade dos visitantes, onde qualidade significa que os visitantes concluem a ação esperada pelo proprietário do site (ex. comprar, assinar, aprender algo). A Otimização para Sistemas de Busca normalmente é oferecida como um serviço profissional autônomo, ou como parte de um projeto de Webmarketing e pode ser muito eficaz quando incorporado no início do desenvolvimento do projeto de um website.
Em termos de competição, um termo de busca palavra-chave com grande volume de resultados dificulta o posicionamento através programação para busca orgânica, podendo ser necessária uma ação de anúncios pagos ou links patrocinados; dependendo do número de resultados o custo de uma estratégia de marketing de internet pode ser bem expressivo. Um bom posicionamento nos resultados orgânicos de busca pode fornecer o mesmo tráfego almejado e ter um custo potencialmente mais baixo. Os proprietários de websites devem optar por otimizar seus sites para a busca orgânica, se o custo do otimização for menor do que o custo da publicidade paga.
Nem todos os sites têm objetivos idênticos para o otimização em sistemas de busca. Alguns querem atingir todo o tipo de tráfego na rede e podem ser otimizados para incrementar a busca de frases comuns. Uma boa estratégia para otimização nos sistemas de busca pode funcionar perfeitamente com sites que tenham interesse em atingir um grande público-alvo, tais como informativos periódicos, serviços de diretórios, guias, ou sites que exibem publicidade com um modelo baseado em CPM (cost per mille). Muitas empresas tentam otimizar seus sites para um grande número de palavras-chave altamente específicas que indicam a disponibilidade para venda. Otimizações deste tipo, tendo em vista um amplo espectro de termos de busca, pode impedir a venda de produtos por gerar um grande volume de requisições com baixa-qualidade, com um custo financeiro alto, resultando em pequeno volume de vendas. Focalizar a qualidade do tráfego gera melhor qualidade nas vendas, permitindo que sua equipe de vendas feche negócios mais rentáveis. A otimização para sistemas de busca pode ser muito eficiente quando usada como parte de uma estratégia de Marketing.
Memory Leak
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(‘
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(‘
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 Closures
- Memory Leakage in Internet Explorer – revisited
- Memory leak patterns in JavaScript
- IE: where’s my memory?
- DHTML Leaks Like a Sieve
- Javascript memory leaks
SmartSprites – Css sprites gerados automaticamente
Este tutorial está bem detalhado, faça um teste seguindo passo-a-passo, e logo estará apto à aplicar em qualquer site!
1) Faça o download (http://smartsprites.osinski.name/download.html) da ferramenta SmartSprites, descompacte em um diretório qualquer (aqui estou usando o meu diretório padrão de projetos, que é c:\gonow\developer).
2) Vamos fazer a marcação do css, necessária para a ferramenta se identificar. Fazemos isso usando comentários.
O sprite é composto por várias imagens, unidas em uma só e exibidas pelo posicionamento do bg de cada elemento;
Para criar um sprite automaticamente devemos criar instruções para o SmartSprites entender que imagem pertence ao sprite x;
Criamos referência ao primeiro Sprite, usando o seguinte código dentro do css:
/**
sprite: mysprite;
sprite-image: url('../img/mysprite.png');
sprite-layout: vertical
*/
ou ainda:
/**sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */
-Explicando esse código temos:
sprite // nome do sprite, será usado futuramente para referenciar cada imagem que compõe o sprite; sprite-image // nome e caminho da imagem que será gerada pelo programa; sprite-layout // orientação da imagem (vertical | horizontal);
Obs: deve vir antes de qualquer referência a este sprite, mas não precisa estar no topo do css.
Existem ainda outras opções, recomendo o acesso ao site, e pesquisas na internet para conhece-las mais a fundo, já existe bastante coisa a respeito na internet, e no fim deste post vou mencionar alguns links.
Após criar a regra do primeiro sprite, já podemos começar a definir que fará parte dele, para isso vamos atribuir na frente da propriedade background-image um outro comentário, como este:
background-image:url(../img/xpto.png); /** sprite-ref: mysprite; repeat; sprite-margin-top: 5px */
Explicando esse código temos:
background-image:url(../img/xpto.png); // propriedade obrigatória, indica qual imagem será incluida no sprite;
e nos comentários:
sprite-ref: mysprite; //Nome usado anteriormente na instancia, diz que essa imagem deve estar no sprite mysprite; repeat; //Avisa que permite repetição, então deve-se estender a imagem na direção da repetição (x = horizontal | y = vertical) sprite-margin-top: 5px // distância em relação a outras imagens;
Esse comentário deve estar presente em todas as regras de css que contenham imagens de bg para o sprite, mas, em nenhum dos casos, a propriedade background poderá ser usada de forma abreviada para funcionar, em um exemplo prático, o código abaixo:
background: transparent url("../img/center_bg.png") no-repeat center top;
irá virar:
background-color: transparent; background-image: url("../img/center_bg.png") ; background-repeat:no-repeat; background-position:center top;
sendo que o background-repeat se tornou descartável e o background-position será gerado pela ferramenta, então podemos reduzir ainda para:
background-color: transparent; background-image: url("../img/center_bg.png") ;
e aplicando as intruções para o smartSprite:
background-color: transparent; background-image: url("../img/center_bg.png") ;/** sprite-ref: mysprite; */
Finalizada esta explicação, segue um exemplo de código real, antes da formatação:
#logo{ background:url("../img/logo.png") no-repeat top left; width:180px; height:57px; left: 28px; position: absolute; top: 40px; } #center { background: transparent url("../img/center_bg.png") no-repeat center top; padding-top: 10px; position: relative; } #left #leftContent { position: relative; overflow: auto; background: transparent url("../img/homeContentBg.png") repeat-x center bottom; width: 284px; }
E agora, após configurado para o smartSprites:
#logo{ background-image:url("../img/logo.png");/** sprite-ref: mysprite; */ width:180px; height:57px; left: 28px; position: absolute; top: 40px; } #center { background-image: transparent url("../img/center_bg.png");/** sprite-ref: mysprite; */ padding-top: 10px; position: relative; } #left #leftContent { position: relative; overflow: auto; background-image: url("../img/homeContentBg.png");/** sprite-ref: mysprite; */ width: 284px; }
Usei a forma mais simples para mostrar como pode se relacionar uma imagem atual à uma imagem de sprite, você pode aplicar diversas outras configurações, como alinhamento, margem, etc;
3) Após concluir a aplicação dos comentários no css temos que fazer com que a ferramenta processe o que foi pedido, para isso, acessamos via prompt de comando o diretório onde descompactamos o smartSprites (C:\gonow\developer\smartsprites) e digitamos a seguinte linha:
smartsprites --root-dir-path c:/example
Onde c:/example é o diretório raiz do projeto, onde o css esteja visível;
4) Se chegou até aqui, o prompt terá exibido uma tela com várias [INFOS], então você ja gerou seus sprites.
Vá até a pasta definida para os sprites no primeiro comentário, veja sua nova imagem, vá até a pasta de css e veja seu novo css ja configurado com as positions do sprite, e altere o html do seu site para chamar o novo css. Faça um preview e tire suas conclusões.
Observações
- O programa já vem com um diretório contendo vários exemplos, é interessante executá-los para ver o resultado final. - Acesse o faq: http://smartsprites.osinski.name/#faq
Links Externos
- http://smartsprites.osinski.name/ - http://framebox.blogspot.com/2009/01/implementando-css-sprites-com.html
6 Diacas para posicionar bem seu site.
1. Pense em acessibilidade. O crawler dos mecanismos do Google, é um robô cego. Por isso, não use flash ou javascript obstrusivo para conteúdo. Coloque todos os scripts e css em arquivos externos, e deixe todo o conteúdo bem definido em html semântico. Isso também ajuda a aumentar o “peso” de seu conteúdo, pois se o crawler indexar
2. Pense em conteúdo. Uma das maiores técnicas de SEO é construir um Link Building (troca de links) de qualidade. Isso só é possível se você fizer um conteúdo que seja realmente bom, do contrário, que motivo alguém teria pra te linkar? Construir isso a princípio é mais difícil, pois as pessoas ainda não conhecem seu site e conteúdo. Por isso é importante oferecer o serviço de assinatura de Feeds, para fidelizar leitores, além de comentar e ler conteúdos de outros blogs (afinal, se seu conteúdo tb não for original, vai ser difícil ele ser relevante para alguém).
3. Use meta description com inteligência. O atributo meta description surgiu com a função de ser uma descrição do site, por isso, não tente usar para outra coisa. Ele irá servir como uma prévia do conteúdo de seu site ou blog, e pode ser responsável por “convencer” o usuário que vem de buscadores a entrar ali. Em média, tente limitar o conteúdo de meta description para até 120 caractéres, que é a média de exibição dos buscadores.
4. Pense no peso das palavras. A máxima de “Quem tudo quer, nada tem” é perfeitamente aplicável nesse caso. Trabalhe com poucas (e boas) palavras-chaves em suas páginas. Muitas palavras-chaves irão tirar o peso de cada uma delas individualmente. Pense que o Google te dá um número, igual a 10 para passar “valor” entre as keywords, se vc tem 10, cada uma vale 1 e aquela página vai competir com outras páginas que tem a mesma palavra-chave que a sua, só que com um peso maior. Pense nas melhores palavras-chaves para cada página especialmente.
5. Crie bons títulos (e use urls amigáveis!). Ok, essa dica é bem óbvia, mas tem gente que esquece. Urls amigáveis são importantíssimas, o valor da palavra-chave no título é uma ótima maneira de conferir mais peso à ela. Os bons títulos, assim como uma boa meta description atraem os usuários na leitura dos posts.
6. Apareça. Todas as dicas de cima são bastante simples, e úteis. Não é preciso ser nenhum especialista para segui-las, mas elas realmente adiantam muito na hora de criar “valor” ao seu site ou blog. Mas não acredite que as visitas vêm tão rápido. Por isso, um pouco de suor tb é necessário: link seu site para amigos, coloque na assinatura de seu e-mail, cadastre-se em diretórios de sites e blogs, como o DMOZ e o Technorati e Blogblogs, divulgue em listas e lugares onde seu conteúdo será útil para as pessoas que acessam.
Dicas para posicionar melhor meu (seu) site no google e outros sistemas de busca.
SEO
-
Meta tags
Para melhor indexação e posicionamento em buscadores com a ajuda de tags use o modelo abaixo
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″>
<meta name=”author” CONTENT=”Gonow”>
<meta name=”reply-to” content=”webmaster@gonow.com.br”>
<meta name=”description” CONTENT=”Gui de classificados de…”>
<meta name=”keywords” CONTENT=”guia, guias, página, páginas, pagina, paginas, classificado, classificados, clasificado, clasificados”>
<meta name=”robots” content=”index,follow”>
<meta name=”googlebot” content=”index,follow”>
<title> Título da Página </title>
-
URLs amigáveis
Ao invéz de usar exemplo.com?m=1 use exemplo.com/materia/titulo da matéria, Assim fica mais fácil do usuários guardar a URL e melhora a indexação por obter palavras chaves na própria URL.
-
Redirects
Quando for necessário fazer algum redirecionamento, usar o redirecionamento 301, para mais informações visite: http://www.bitpt.com/index.php/content/view/33/43/
-
Links externos com frames
Quando houver links para outros domínios procure abri-los dentro de um frame e neste frame se possível deve conter as meta tags citadas acima. Assim indexará mais páginas em buscadores, conseqüentemente aumenta a visitação. Pode-se até mesmo fazer um topo, uma barra de ferramentas com uma busca, com um botão voltar para caso o usuário queira voltar para o site/portal de origem e continuar navegando.
-
Atribultos “alt” e ”title” nas imagens
É importante inserir estes atributos no HTML das imagens, não em todas, somente nas imagens que usuário faz uma ”leitura”, uma interpretação da mesma, assim quando a imagem não carrega ou deficientes visuais acessam o mesmo saberão o conteúdo da imagem.
-
Atribulto ”title” em links
Use este atributo em links descrevendo o nome completo do portal ou informações mais relevantes ao conteúdo, principalmente para links que são siglas ou que são os famosos Clique aqui, é um recurso para melhorar a interação com os usuários, para despertar maior interesse referente ao link.
-
Compartilhe links
Oferecer ao usuário a opção de adicionar os links disponíveis em bookmarks e redes sociais para aumentar a relevância em buscadores e visitação dos mesmos.
-
SITEMAP.xml
Sitemaps em xml ajudam os buscadores a indexar novas páginas, imagens, docs, pdfs mais rapidamente e melhor.
Existe um padrão de sitemaps em XML que o Google, Yahoo e Microsoft usam em comum acordo, para mais informações sobre o protocolo visite: http://www.sitemaps.org
-
ROBOTS.txt
Este arquivo txt deve estar na raiz do portal, a principal função dele é dizer para os buscadores o que não pode indexar. Mesmo quando não precisa impedir nada de indexar nos buscadores é importante colocar este aquivo na raiz do site para que caso o site use algum sistema de métrica Server não gere erro 404.
-
Acesso para deficientes Físicos
Fazer alterações e disponibilizar recursos para que deficientes físicos possam acessar os sites. Pode ser um case de sucesso por fazermos o primeiro guia “Acessível para todos”. Para mais informações assista o video http://videolog.uol.com.br/video.php?id=230205.
-
H1, H2, H3, H4, H5
Para títulos, nomes, subtítulos, palavras e frases consideradas relevantes use as tags h1, h2, h3, h4, h5. Pois elas tem prioridade na indexação de buscadores.
-
Ajax
Atenção no uso de Ajax, implementar de maneira que os buscadores continuem indexando o conteúdo das requests solicitadas, links e etc. Usar javascript não obstrutivo, ou seja, mesmo que o navegador não consiga interpretar ou baixar o .js o conteúdo da página tem que ser exibido mesmo que sem a formatação correta.
-
Diretórios de sites
Para ajudar a aumentar a relevância dos sites mais rapidamente sugerimos cadastrar os sites em diretórios e guias de sites, o dmoz é uma referência para s buscadores por conta da sua popularidade. Logo abaixo encontramos guias de sites, porém menos popular que o dmoz.
Guias de sites