Andrey Pedro Lefkum

Domingo, Maio 28, 2006

Milhões de pessoas usam o Google a cada hora para encontrar as informações das quais
precisam. E ele sempre acerta. Como isso pode ser possível? Usamos o Google,

mas como ele funciona? O que está por trás do melhor buscador do mundo?

Esse artigo é resultado de uma pesquisa detalhada sobre o algorítimo
PageRank. Evitamos ao máximo a matemática para que todos possam entender.

1. Os artigos acadêmicos

Ao defender uma idéia, você precisa de argumentos. Caso contrário, sua idéia
terá pouco valor ou será pouco aceita. Esses argumentos são, em sua maioria,
outras idéias, já comprovadas.

Da mesma forma, outras pessoas poderão utilizar a sua criação como base. É
assim o tempo todo na ciência. Os artigos contém citações de outros
trabalhos, usados como argumentos. E também são citados por outros

pesquisadores. É como se fosse uma teia. E você pode saber o quão popular é
seu trabalho através do número de pessoas que se refere a ele. Com os sites
acontece a mesma coisa.

2. As páginas da web

Larry e Sergey, fundadores da Google, perceberam que é relativamente fácil
saber para onde sua página (ou artigo) aponta. Basta lê-la! O desafio é
saber quem aponta pra você.

O problema é praticamente impossível de ser resolvido no mundo real dos

artigos acadêmicos. Mas na Internet a coisa muda, pois os sites estão
repletos de links .
Bastaria “ler” uma página automaticamente e sair seguindo esses links, como
um robô. E eles levariam a outras páginas, que levariam a outras, e

outras… Em pouco tempo você poderia ter a Internet inteira em casa e
poderia saber quem andou citando aquele seu site sobre ovelhas.

Juntos, os dois amigos criaram um utilitário, de nome Backrub.A
função dele era vasculhar a rede mundial procurando links. Ainda não

havia busca.

Devido � falta de recursos, o Backrub foi obrigado a rodar em computadores
de todo o tipo, por isso se tornou extremamente estável. O hardware de baixo
custo acabou se tornando uma vantagem, pois muitos computadores “fracos”

unidos em clusterse mostraram mais eficientes do que as supermáquinas das
“concorrentes”.
E mais baratos.

3. A Busca

Satisfeitos com seu “monstrinho” (que consumia quase toda banda de internet

da universidade), os amigos viram que ele poderia ir além. Larry Page criou
um pequeno algorítimo, que buscava por palavras apenas nos endereços das
páginas. Na época, quem dominava o mercado de busca era o AltaVista.

Ele procurava por termos em toda página. Surpreendentemente, os resultados
do BackRub quase sempre eram mais relevantes!

O Algorítimo evoluiu, e se tornou o que hoje é conhecido por PageRank. E uma
curiosidade: ao contrário do que muitos pensam, a patente do PageRank

pertence � Stanford , não � Google.

4. O ataque dos spammers

A medida que o Google crescia e ganhava popularidade, aumentava a disputa
por boas posições nos resultados de busca. O spam de links - nome dado �

prática de obter links para ganhar destaque em buscadores - crescia � medida
que sites falsos eram criados se aproveitando de uma falha crucial no
PageRank, que dava o mesmo valor a todos os links. Na prática, isso

significava que ter seu site em destaque no www.google.com e tê-lo em uma
home-page desconhecida correspondiam � mesma coisa.

O PageRank também falhava por precisar de um banco de dados completo, com

todas as páginas da web, para funcionar. De tempos em tempos era preciso
atualizar os servidores da Google para só então calcular a nova pontuação
(ou o novo PageRank) de cada site. Uma clara desvantagem em uma Internet que

muda a cada segundo.

5. O Google contra-ataca

Pouco a pouco, a sabotagem estava acabando com a qualidade dos resultados. A
resposta veio em dois nomes: Freshbot e Hilltop.

O Freshbot foi uma nova versão do robô responsável por percorrer a web. Com

a inovação, os sites passaram a ser adicionados � busca de forma
ininterrupta. Inicialmente, os freshbots trabalharam em conjunto com os
antigos robôs, mas mais tarde acabaram os substituindo. A velocidade com que

as páginas eram atualizadas aumentou. E aumentou muito. Agora era quase
impossível prever se “aquele” link do www.algumacoisa.com.br ajudou a
melhorar a colocação de sua página.

Hilltop foi uma mudança radical no PageRank, introduzida por Krishna
Bharat.
Como principal alteração, cada link passou a ter seu próprio “valor”. Esse
número é basicamente da semelhança de conteúdo entre os sites e da

importância (PageRank) de cada site. Assim, um link do www.adobe.com passou
a valer muito mais do que um link do www.algumacoisa.com.br
, pois existem
mais links apontando para a Adobe (PageRank 10) do que para o AlgumaCoisa.
Da mesma forma, um link no adobe.com terá mais valor ao apontar para um site
de informática do que para um site de músicas. Produzir resultados

adulterados ficou quase impossível.

Desde então, a qualidade da busca tem aumentado, mas pouco se sabe a
respeito do PageRank atual. O algorítimo é mantido em segredo pela empresa,
ainda que muitos dos elementos aqui explicados ainda se façam presentes.

Autor: Desconhecido (Via e-mail)

Ae! Não vou explicar a funcionalidade… procurem no Google e se não encontrarem, deixem um post que respondo!

<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Eu sou foda!title>
<link rel=“stylesheet” type=“text/css” media=“screen” href=“css.css” title=“Padrao FL” />
<script type=“text/javaScript”>

var offsetX, offsetY;

function carrega() {
var janelaTop = 200;
var janelaLeft = 350;

moveJanela(janelaTop,janelaLeft);
}

function MouseEvent(e) {
if(e) {
this.e = e;
}
else {
this.e = window.event;
}

if(e.pageX) {
this.x = e.pageX;
}
else {
this.x = e.clientX;
}

if(e.pageY) {
this.y = e.pageY;
}
else {
this.y = e.clientY;
}

if(e.target) {
this.target = e.target;
}
else {
this.target = e.srcElement;
}
}

function addListener(type, callback) {
if(document.addEventListener) {
document.addEventListener(type, callback, false);
}
else if(document.attachEvent) {
document.attachEvent(”on” + type, callback, false);
}
}

function removeListener(type, callback) {
if(document.removeEventListener) {
document.removeEventListener(type, callback, false);
}
else if(document.detachEvent) {
document.detachEvent(”on” + type, callback, false);
}
}

function chamaMoveJanela(e) {
var e = new MouseEvent(e);
addListener(”mousemove”, handleMove);
addListener(”mouseup”, handleUp);
offsetX = e.x - parseInt(document.getElementById(”janela”).style.left);
offsetY = e.y - parseInt(document.getElementById(”janela”).style.top);
}

function handleMove(e) {
var e = new MouseEvent(e);
var x = e.x - offsetX;
e.target.style.left = x + “px”;

var y = e.y - offsetY;
e.target.style.top = y + “px”;
}

function handleUp(e) {
removeListener(”mousemove”, handleMove);
removeListener(”mouseup”, handleUp);
}

function moveJanela(janelaTop,janelaLeft) {
document.getElementById(”janela”).style.top = janelaTop + “px”;
document.getElementById(”janela”).style.left = janelaLeft + “px”;
}


<body onload=“carrega();”>
<div id=“janela” onmousedown=“chamaMoveJanela(event);”>
<h1>Mensagemh1>
<br />
<span>Pode falar! Eu sou foda!span>

Faltou o css…

arquivo: css.css

/*—————————— inicio css ——————————————*/
#janela
{
   width:220px;
   height:140px;
   background-color:#F4F4F4;
   filter:Alpha(Opacity=80);
   -khtml-opacity: .8;
   -moz-opacity: .8;
   opacity: .8;
   border:1px solid #909090;
   position:absolute;
   text-align:center;
}

#janela h1 {
   font-family:Verdana;
   font-size:12px;
   border-bottom:1px solid #909090;
   background-color:#DCDCDC;
   padding:5px;
}

body
{
   font-family:Arial;
   font-size:11px;
   margin:0px;
   background-image:url(imagens/olho.jpg);
   background-repeat:no-repeat;
}
/*—————————— Fim css ——————————————*/

Valeu pessoal!

Deixe seu código mais LIMPO e APRESENTÁVEL… Use Ajax e WebStandards!

Gostei dessa frase… olha a cabeça de um programador… Cada idéia… hehehe

Abraços!

http://www.codeproject.com/Ajax/AJAXWasHere-Part1.asp (in english).

Vale a pena ler, ia escrever algo aqui… mas achei super interessante essa matéria!
E para quem quer fazer aquele efeitnho de carregando… mais show…

Perguntem para o Google sobre:
XmlHttp.readyState

Meu último tópico foi referente a AJAX
Mas não me canso de falar e pesquisar, pois essa revolucionária metodologia merece muita atênção! Está certo que quase todo mundo usa ADSL, e não é simplesmente pelo carregamento que é mais leve, e também pela interação que o sistema tem com os famosos USUÁRIOS.

Então vamos lá:

Encapsulei o Ajax dentro de uma função:
function ajax() {

//Tenta chamar a função XMLHttpRequest… obs… nao vai funcionar no IE…
try {
xmlhttp = new XMLHttpRequest();
}
catch(ee) {
try {
//Tenta no IE…
xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch(e) {
//Tenta no IE… mais uma vez…
try {
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch(E) {
//Se o navegador não tiver suporte… não conseguirá executar nenhum script…
xmlhttp = false;
}
}
}
}

Os navegadores que suportam XMLHttpRequest hoje incluem:

• Opera 8
• Mozilla e Firefox
• Konqueror
• Safari

Agora é o seguinte… o AJAX é revolucionário… mas nem tudo é perfeito… vou deixar essa parte para depois. A parte importante é a do uso dessa metodologia.

Espero que aproveitem a força…

Bom pessoal, como tinha dito a algum tempo já… que colocaria um exemplo de código desenvolvido com metodologia AJAX … e acabei esquecendo… hehehe… mas agora está ai!

Façam bom proveito, e se tiverem dúvidas pode postar nesse tópico que respondo!

<html>
<head>
<title></title>
<script language=”javascript”>
/*
Funcao para funcionar o AJAX
*/
function ajax() {
 try {
      xmlhttp = new XMLHttpRequest();
   }
   catch(ee) {
      try {
         xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
      }
      catch(e) {
         try {
            xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
         }
         catch(E) {
            xmlhttp = false;
         }
      }
   }
}
/*Fim funcao para funcionar AJAX*/

       //Executada quando o navegador obtiver o codigo (terminar de carregar…)
       xmlhttp.onreadystatechange = function() {
        
      if (xmlhttp.readyState == 4){
        
         //Le o texto
         var texto = xmlhttp.responseText;
           
         //Desfaz o urlencode
         texto = texto.replace(/\+/g,” “);
         texto = unescape(texto);
        
         //Envia o texto para a div…
         document.getElementById(”resultado”).innerHTML = texto;
      }
   }
   xmlhttp.send(null);
    }
}
</script>
</head>
<body>
<div id=”conteudo”></div> <input type=”button” value=”Somar 1 + 1″ onclick=”somar();”>
</body>
</html>

Agora vamos fazer aquela página que é requisitada utilizando a metodologia “Ajax”:

teste.php

<?
$resultado = 1 + 1;
echo “1 + 1 = “. $resultado.” —– O valor enviado via GET é “.$_GET['teste'];
?>

Após dois meses desenvolvendo Ajax with Sajax, resolvi programar no braço, já que o Sajax não tem suporte a orientação � objetos, e o PAJAJ que tem O.O. é em PHP 5, não que seja contra, muito pelo contrário, mas onde trabalho temos instalado em nosso servidor o PHP 4, com isso, temos o receio de que se migrarmos para PHP 5, possa não funcionar alguns dos vários softwares. Por esses motivos, resolvi programar no braço.

Conclusão: Programar AJAX no braço pode ser melhor do que usar um Framework, pois você tem maior flexibilidade no desenvolvimento.

Dica: Cuidado no uso de algumas tecnologias, pois após dois meses utilizando o Sajax, vimos que não era mais viável usa-lo, agora tudo que foi desenvolvido com esse framework, ficará para trás, ou totalmente fora de nosso padrão.

Obs.:� Pessoal, coloco amanhã aqui os códigos utilizados no serviço “braçal”!

Att.,
Andrey.

Pessoal, baixei o novo IE 7.0 Beta… Muitos desenvolvedores já tiveram problemas com o input do tipo select que ficam em cima de qualquer div no IE 6…  ou seja, divs  com posição absoluta na tela. Pois é, agora no IE 7.0 beta esse problema não existe mais.

O que achei “bacana” foi que o novo navegador da MS ficou bem parecido, se não dizer “igual” ao Firefox e ao Opera. Agora ele possui abas, zoom das janelas, e outras coisas a mais, que o firefox já possui!

Mas quem tiver a oportunidade, baixa o Opera:
www.opera.com muito show!

valeu.

Bom aqui vai um super site de ajuda CSS…

www.maujor.com

Garanto que muitos desenvolvedores já tiveram problemas com listas (ul & ol) para montar sites tabless. Ai cai algumas dicas.

Sabe aquele espaço ao lado esquerdo que ficam nas listas? Você pode remove-los com:

list-style-position: outside;

E para alterar os pontos das listas?

list-style-image: url(”imagem.gif”);

E caso não queira colocar nem um ponto ou imagem que identifique a lista?

list-style-type: none;

Existem várias formatações para os identificadores de lista:

list-style-type: disc;

list-style-type: circle;

list-style-type: square;

E nas listas de tipo ol, caso queira alterar números por outra identificação… posso?
Sim, pode alterar com números romanos e polo alfabeto. Exemplo:

Para números romanos em caixa baixa:
list-style-type: lower-roman;

Para números romanos em caixa alta:
list-style-type: upper-roman;

Para alfabeto em caixa baixa:
list-style-type: lower-alpha;

Para alfabeto em caixa alta:
list-style-type: upper-alpha;

Bom, é isso…

Ótimo artigo!

Mas concordo com o Henrique em partes…

http://www.revolucao.etc.br/archives/web-20-nao-significa-nada-me-desculpe/

Att.,

Andrey