Blog do Cleber

IDs dos status do Twitter irão mudar

cleber — Mon, 20 Sep 2010 13:38:44 +0000

Conforme anunciado por Matt Harris (evangelista de desenvolvedores no Twitter) no grupo de desenvolvedores do Twitter, a partir das 14 horas (horário de Brasília) do dia 23 (terça-feira), as IDs dos status dos tweets não serão mais sequenciais. Irá entrar em ação um novo serviço de geração de IDs chamado Snowflake.

Para a maioria dos desenvolvedores essas mudanças não serão percebidas e não serão necessárias mudanças nos aplicativos que fazem uso da API do Twitter. Parâmetros com max_id e since_id continuarão funcionando como esperado. No entanto, não será mais possível contar o número de tweets subtraindo um ID do outro.

Alguns pontos-chaves sobre a mudança:

Os IDs dos status serão únicos;
Os IDs dos status serão sempre incrementados. Tweets criados a tarde terão ID maior do que aqueles criados de manhã;
A ordem dos IDs será mantida, permitindo a ordenação por IDs. A precisão da ordenação será de cerca de 1 segundo, o que significa que tweets criados no mesmo segundo não terão nenhuma ordem;
Todos os métodos existentes na API continuarão funcionando do mesmo jeito de antes;
Os IDs dos status anteriores permanecerão inalterados;
Haverá um salto notável no valor numérico dos IDs dos status quando as mudanças ocorrerem.

Snowflake

O serviço Snowflake usa números inteiros de 64 bits sem sinal, que serão gerados com base no tempo. Eles são compostos de um carimbo de tempo, um número de trabalho e um número de sequencia.

Um dos motivos da criação do Snowflake foi que, conforme o Twitter se afasta do banco de dados MySQL em direção ao banco de dados Cassandra, é preciso uma nova maneira para gerar IDs. Isso por que o Cassandra não gera IDs sequencias, e nem deveria.

Alguns dos requisitos do Snowflake são:

Geração mínima de 10.000 IDs por segundo por processo;
Taxa de resposta de 2 ms (mais latência da rede);
Por se tratar de um serviço de alta disponibilidade, as máquinas que geram os IDs não devem ser coordenadas umas com as outras;
Os IDs devem ter um tamanho de 64 bits.

A solução para atender esses requisitos foi:

Servidor Thrift (framework para o desenvolvimento de serviços escaláveis em várias linguagens) escrito na linguagem Scala
IDs compostos de:
- tempo: 41 bits
- ID configurado da máquina: 10 bits (permite o uso de 1024 máquinas)
- número de sequencia: 12 bits (muda a cada 4096 por máquina)

Deve-se usar o protocolo NTP (Network Time Protocol) para manter os relógios das máquinas precisos. Se o relógio da máquina atrasar, por exemplo, o Snowflake irá se recusar a gerar novos IDs enquanto o horário da máquina não for maior que o horário da última vez que um ID foi gerado.

O Snowflake é um software livre sob a Licença Apache, por isso qualquer desenvolvedor pode usá-lo. O código-fonte está disponível no GitHub.

Twitpocalypse

Há algum tempo atrás o Twitter mudou o tamanho dos IDs dos status de inteiros de 32 bits (sem sinal) para inteiros de 64 bits (sem sinal). Isso por que estava próximo o temido Twitpocalypse, que aconteceria quando os IDs dos status atingissem o limite máximo de um número inteiro de 32 bits: 4.294.967.295.

Mas, por enquanto, o Twitpocalypse está longe de acontecer. Isso por que um inteiro de 64 bits (sem sinal) tem um valor máximo de 18.446.744.073.709.551.615. Grande não?

Links relacionados:

Post do Twitter sobre o Snowflake

Site do IBGE possui falha de segurança

cleber — Mon, 06 Sep 2010 23:08:46 +0000

O IBGE colocou no ar uma página onde podem ser acompanhados os resultados do Censo 2010. Os resultados podem ser vistos por estado e por cidade.

Veja por exemplo os resultados do estado do Paraná. Agora clique no nome de um município. Abrirá uma pop-up com os detalhes referentes ao município. Veja os resultados da cidade de Medianeira (PR), por exemplo. Muito louvável a iniciativa, é claro. Mas, nem tudo são flores. Existe um perigo oculto.

A página que exibe os resultados de um município aceita 5 parâmetros pela URL (como pode ser visto aqui): Nome, CODMUN, ESTPOP, ESTDOM e NomeUE. O problema está justamente no primeiro parâmetro: Nome. Nele é passado o nome do município que estamos visualizando. Mas o estagiário que criou essa página usando a linguagem de programação PHP esqueceu de um detalhe: deve-se sempre tratar os parâmetros passados para um script antes de usá-los. Mas nessa página do IBGE isso não é feito, o estagiário simplesmente colocou esse código na página:

echo $_GET["Nome"];

Ou seja, qualquer valor que for passado para o parâmetro Nome será incorporado a página. Esse tipo de vulnerabilidade é conhecido como cross-site scripting (XSS), que segundo a Wikipédia:

É um tipo de vulnerabilidade do sistema de segurança de um computador, encontrado normalmente em aplicações web que ativam ataques maliciosos ao injetarem client-side script dentro das páginas web vistas por outros usuários. Um script de exploração de vulnerabilidade cross-site pode ser usado pelos atacantes para escapar aos controles de acesso que usam a mesma política de origem.

O cross-site scripting afeta muitos sites, como aconteceu recentemente com o Twitter (veja mais detalhes). Veja o que é possível fazer na página do IBGE afetada pela falha:

Site do Censo 2010 após injeção de HTML

Tentei usar também o temido iframe mas felizmente não foi possível. Bom, e como resolver esse furo de segurança? Simplesmente substituir o código PHP mostrado anteriormente por esse aqui:

echo filter_var($_GET["Nome"], FILTER_SANITIZE_STRING);

A função filter_var irá filtrar o parâmetro usando o filtro FILTER_SANITIZE_STRING, que irá remover tags que estiverem presentes no parâmetros. Existem também outras maneiras de se tratar um parâmetro (veja nos Links relacionados). Enviei um e-mail para o IBGE alertando da falha.

Não é incomum sites do governo possuírem brechas de segurança. Já aconteceu com o site da Receita Federal e do Ministério da Defesa e muitos outros. A pergunta que fica no ar é: como um projeto com orçamento de R$ 1,7 bilhão (sendo R$ 200 milhões em tecnologia) pode ter esse tipo de falha?

Links relacionados:

Principais falhas de segurança no PHP

Escapando strings

How to sanitize your php input

Sanitize and Validate Data with PHP Filters

Mudanças visuais no orkut

cleber — Wed, 30 Jun 2010 00:31:10 +0000

Embora alguns conservadores ainda tenham resistência a nova interface do orkut, novidades deverão ser em breve disponibilizadas para todos os usuários. Quem tem acesso ao sandbox do orkut (versão para desenvolvedores) já pode perceber algumas diferenças em relação ao orkut normal.

A primeira diferença visível é uma tela de carregamento a la Gmail, como pode ser visto na imagem abaixo.

Tela de carregamento do sandbox do orkut

Outra diferença significativa é quanto ao botão para excluir as atividades. Ele sumiu e deu lugar a um menu, que além da opção para excluir a atividade, provavelmente possuirá outras opções.

Botão de excluir atividade na versão normal (em cima) e no sandbox

Os links exibidos no topo também possuem uma ligeira diferença: sumiu o link para o próprio orkut e foi adicionado um link para a pesquisa de blogs.

Links do topo na versão normal (em cima) e no sandbox

Pode-se observar também uma ligeira diferença na tipografia das fontes de algumas caixas de texto. Na versão normal a fonte é Verdana e no sandbox é Arial.

Pelo visto o sandbox do orkut não é usado apenas para os desenvolvedores testarem seus aplicativos, mas para a própria equipe de desenvolvimento do orkut fazer os seus testes.

Se você notou também alguma diferença, deixe um comentário ou entre em contato.

Recortar uma imagem no formato 16:9 no Photoshop

cleber — Sun, 09 May 2010 01:02:02 +0000

Até o século passado, o formato mais comum das fotografias era na proporção 3:2 (1,5), que eram geralmente reveladas em papel no tamanho 10 x 15 cm. Mas eis que surgem as câmeras digitais, popularizando o formato 4:3 (1,3), o mesmo formato da maioria das televisões e dos monitores de computador. E mais recentemente surgiram os monitores LCD, trazendo o formato 16:9 (1,77).

O formato 16:9, também conhecido como widescreen (tela larga), é o formato do momento e deve permanecer assim por muito tempo. Mas isso trouxe um problema: temos milhares de fotos digitais no formato 4:3, e a sensação de assistir uma apresentação de fotos 4:3 em uma tela 16:9 é a mesma sensação de assistir um filme widescreen em uma TV comum. A diferença é que na tela 16:9 vão aparecer duas faixas pretas de cada lado enquanto na TV vão aparecer aquelas faixas pretas em cima e em baixo.

As câmeras digitais mais modernas já possuem opção para registrar as imagens na proporção 16:9, mas o que fazer com as câmeras que não possuem essa opção? E pior ainda, o que fazer com as milhares de fotos no formato 4:3? A solução é simples: recortar as imagens.

Photoshop neles

A imagem abaixo no formato 4:3 será usada como exemplo.

Para transformar uma imagem em qualquer proporção para o formato 16:9 (widescreen), abra a imagem no Photoshop, e selecione a ferramenta Letreiro Retangular (ou aperte a tecla M).

Em seguida, na barra de configuração da ferramenta, escolha o estilo Proporção Fixa e no campo Largura coloque 16 e em Altura coloque 9.

Agora é só selecionar a área com a ferramenta e ir no menu Imagem -> Cortar.

Voilá! Agora é só salvar a imagem e desfrutá-la no modo tela cheia no seu monitor. Confira a imagem final abaixo.

Atenção!

Nem todas as fotos poderão ser recortadas nessa proporção, pois partes importantes da imagem poderão ficar de fora. Nesse caso não há o que fazer.

Para quem não tem o formato 16:9 em um câmera, o jeito é tirar a foto prevendo que uma parte de cima e outra de baixo da imagem será apagada. Ou vale até mesmo desenhar no próprio visor da máquina uma linha simulando a proporção 16:9.

Não importa a técnica que for usada, o importante é saber que uma imagem 16:9 é muito mais agradável de ser visualizada em tela cheia do que as antigas 4:3.

Links relacionados:

Artigo da Wikipédia sobre proporção de tela

Formatar um documento do Google Docs nas normas

cleber — Sun, 21 Feb 2010 21:05:32 +0000

Muitas pessoas ainda torcem o nariz para o Google Docs e preferem continuar usando o Microsoft Word. É claro que o Word tem centenas de funções que o Google Docs não tem. Mas quem usa todas elas?

Estou usando o Google Docs para criar o meu TCC sobre o OpenSocial. Entre os motivos que me levaram a usar estão:

Posso acessar o meu TCC de qualquer lugar, precisando apenas de uma conexão com a internet. Está sem internet? Com o Google Docs offline posso continuar editando o documento, e quando a conexão com a internet voltar, ele sincroniza automaticamente com a versão online.
Compartilhei o meu TCC com o meu orientador, assim ele pode ver o andamento do trabalho e até mesmo editá-lo.
O Google Docs armazena revisões dos documentos, ou seja, a cada modificação uma revisão é criada. Com isso posso ver, por exemplo, como estava o meu TCC a duas semanas atrás, quais alterações foram feitas e por quem.
Sei que o meu TCC estará protegido na nuvem do Google. Mas é claro, sempre é bom fazer um backup frequente do documento para o seu PC ou outro local.

O Google Docs apresenta algumas complicações a mais para os mais leigos:

As páginas não têm largura fixa, diferente de um documento do Word, por exemplo. Para resolver isso é fácil: vá no menu "Visualizar" e clique em "Página com largura fixa". Com isso você terá uma visão semelhante a um documento do Word. E essa configuração será lembrada toda vez que você abrir o documento.
Não existem separações de páginas, tudo é apresentado em um texto único. No entanto, você pode inserir quebras de páginas, que serão usadas na impressão ou quando você exportar o documento. Para isso, posicione o cursor do mouse no lugar onde deseja inserir a quebra de página, clique no menu "Inserir" e clique em "Quebra de página (para impressão)".
Só é possível inserir numeração de páginas na versão de impressão do documento.

Formatação

O que aumenta a resistência das pessoas ao Google Docs é a questão da formatação do documento, pois um trabalho acadêmico deve seguir as normas da instituição de ensino, que geralmente são baseadas nas normas da ABNT. No Word é fácil formatar margens, parágrafos, fontes, espaçamentos etc. Para fazer isso no Google Docs, é necessário um conhecimento um pouco mais avançado.

Atenção! Conforme escrito nesta página de ajuda do Google Docs, o recurso de edição de CSS não estará mais disponível na nova versão do Google Docs. Por isso, você deve usar a versão antiga para fazer o que vai ser mostrado. De acordo com Jeff Harris, gerente de produtos do Google Docs, futuramente será implementado algo similar ao editor de CSS na nova versão. Para saber mais, acompanhe este tópico (em inglês) do fórum de ajuda do Google Docs.

Para formatar um documento do Google Docs de acordo com as normas da UTFPR, criei algumas declarações CSS para serem aplicadas a um documento. Para isso, vá no menu "Editar" e clique em "Editar CSS". Então copie e cole lá o trecho abaixo:

*, html, body {
  margin: 0;
  padding: 0;
}
html {
  color: #000;
  padding: 3cm 2cm 2cm 3cm;
}
body {
  font-family: Arial;
  font-size: 12pt;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Arial;
  font-style: normal;
  margin: 3pt 0 3pt 0;
}
h1 {
  font-size: 14pt;
}
h2, h3, h4, h5, h6 {
  font-size: 12pt;
  font-weight: normal;
}
p {
  margin: 0;
  text-indent: 1.5cm;
}
ul {
  margin-left: 1.5cm;
}
p, ul {
  font-family: Arial;
  font-size: 12pt;
  line-height: 150%;
  text-align: justify;
}
blockquote {
  border: none;
  font-size: 10pt;
  line-height: 100%;
  margin-left: 4cm;
  text-align: justify;
}
#WritelyTableOfContents { /* Formata o sumario gerado pelo Google Docs - Menu Inserir -> Sumario */
  background: none;
  border: none;
  font-family: Arial;
  font-size: 12pt;
}
#WritelyTableOfContents a {
  color: #000;
  line-height: 100%;
  text-decoration: none;
}
#WritelyTableOfContents ol {
  margin-left: 25px;
  padding-left: 0;
}

As seguintes declarações CSS formatam o documento da seguinte maneira:

Margens esquerda e superior com 3 cm e margens direita e inferior com 2 cm
Fonte Arial com tamanho 12
Títulos primários com tamanho 14
Cor do texto em preto
Parágrafos com alinhamento justificado, recuo de primeira linha de 1,5 cm
Citações com fonte tamanho 10, espaçamento simples e margem esquerda de 4 cm

Atenção: em nenhum momento você irá apenas exportar o documento no formato Word, ODT ou PDF e ele estará pronto. Você irá utilizar o Google Docs apenas para a elaboração do texto. Os estilos passados acima ajudam a manter algumas formatações na hora que você exportar o documento, facilitanto o seu trabalho.

Após exportar o documento final, algumas formatações deverão ser feitas:

Crie a capa e a folha de rosto.
Ajuste as margens se necessário.
Insira a numeração das páginas de acordo com as normas.
Insira a numeração nos títulos e subtítulos.
Gere o sumário automático.

A Microsoft já conta também com o Microsoft Office Live Workspace, um serviço semelhante ao Google Docs.

Veja abaixo uma comparação entre o mesmo documento no Google Docs e no Microsoft Word:

Dissecando o Gmail

cleber — Wed, 17 Feb 2010 05:23:10 +0000

O webmail do Google, o Gmail (Google Mail na Alemanha e Reino Unido), que faz aniversário no dia 1º de abril (sério), deixou te ter o status beta no dia 7 de julho do ano passado (2009). É reconhecido pelo seu pioneirismo no uso da técnica Ajax, e é referência também quanto a usabilidade, performance e interação com o usuário. Por isso, nada melhor do que estudá-lo e usá-lo como inspiração.

Especificações Técnicas

A interface do Gmail é construída sob a plataforma Google Web Toolkit (GWT) e tudo isso roda no Google Servlet Engine (GSE) e Google GFE/2.0 (Google Front-End), que por sua vez rodam em Linux. O Google Servlet Engine - nome oficial: Open Google Servlet Engine (OpenGSE) - foi desenvolvido por um time de engenheiros do Google e é usado em muitos produtos do Google - internamente e publicamente.

O Google Web Server (GWS) é o nome do servidor web que o Google utiliza para a sua infraestrutura. Especula-se que se trata de uma compilação do Apache Web Server com mudanças nos cabeçalhos.

Carregando...

A cada vez que uma sessão do Gmail é iniciada, uma página contendo um documento vazio é carregada. O único elemento visível é a mensagem com o status do carregamento da página (div id="loading"), além da mensagem que é exibida caso o carregamento estiver demorando muito. O tamanho aproximado desta página é de 7 KB.

E se o usuário tenta carregar a página do Gmail de um navegador que não tenha suporte a JavaScript? Para isto existe a tag do HTML chamada noscript. O que estiver escrito dentro desta tag será exibido no navegador caso o JavaScript não estiver presente ou estiver desabilitado. No caso do Gmail, será exibida a mensagem:

O JavaScript tem que ser ativado para que você possa usar o Gmail no modo de exibição padrão. Porém, aparentemente, o JavaScript está desativado ou é incompatível com o seu navegador. Para usar o modo de exibição padrão, ative o JavaScript alterando as opções do navegador e tente novamente.

Para usar o modo de exibição em HTML básico do Gmail, que não requer JavaScript, clique aqui

Se quiser visualizar o Gmail em um celular ou dispositivo semelhante, clique aqui.

Essa mensagem que se encontra dentro da tag noscript está inserida no cabeçalho (head) da página do Gmail! Não deveria estar no corpo (body)? Tentei acessar o Gmail em português usando o Firefox 3.6 e com o JavaScript desabilitado mas a mensagem não apareceu, apenas mostra a tela do "carregando".

Esta página HTML inicial é responsável por carregar as toneladas de JavaScript que serão usadas na sessão. A partir daí, qualquer interação com o servidor é feita com o bom e velho Ajax.

Cabeçalho

Na figura abaixo você vê uma imagem mostrando o cabeçalho (head) da página do Gmail.

A página usa o charset (codificação de caracteres) UTF-8. Isso permite que uma infinidade de caracteres possam ser representados, como os do alfabeto árabe, chinês, japonês etc. É muito comum vermos sites utilizando o ISO-8859-1 (Latin1). Com essa codificação é possível usar apenas caracteres do alfabeto latino. Funciona perfeitamente para nós latinos. Mas vivemos em um mundo globalizado, e não podemos limitar um site ou um sistema web a uma região apenas.

A única vantagem do ISO-8859-1 sobre o UTF-8 é a questão dos acentos, pois para o UTF-8 a palavra acentuação é diferente de acentuacao. Já para o ISO-8859-1 elas são equivalentes, e isso facilita em pesquisas e ordenações. Mas isso pode ser contornado. Por tanto, utilize UTF-8 nos seus sites e sistemas. O Google é esperto e usa.

No cabeçalho do Gmail também notamos alguns códigos JavaScript inline. Esse tipo de código torna o carregamento da página mais rápido, já que não é necessária uma requisição HTTP para o carregamento de um arquivo JavaScript externo. No entanto, o código fica mais feio e dificulta a manutenção. Esses JavaScripts inline vistos acima fazem três operações:

Define o horário do carregamento da aplicação em uma variável global: var startTime=(new Date).getTime();
Define, na variável global BrowserSupport_, se o navegador é suportado;
Faz verificação dos cookies.

É óbvio que todo o código JavaScript do Gmail não é apenas aquilo ali em cima. As milhares de linhas de JavaScript que dão vida ao Gmail encontram-se em outro lugar.

Finalmente no cabeçalho da página principal também encontramos códigos CSS inline. Se analisarmos bem, veremos que algumas declarações CSS se repetem. Essas declarações CSS não têm muito valor, pois elas servem apenas para a página inicialmente carregada, que como foi dito no início deste post, possui poucos elementos. Na verdade tudo o que vemos quando carregamos o Gmail está em um... iframe, que é um recurso do HTML que permite inserir uma página HTML dentro de outra.

Os Iframes do Gmail

O coração do Gmail é composto por 4 iframes:

js_frame: contém a maioria do código JavaScript da aplicação.
hist_frame: responsável por manter o histórico da navegação, isto é, permitir o uso dos botões Voltar e Avançar do navegador.
sound_frame: possui um objeto flash reponsável por emitir os sons do bate-papo.
canvas_frame: é o único iframe que é visível pelo usuário. É nele que fica tudo o que se vê na tela.

Na figura abaixo podem ser observados os 4 elementos iframe do Gmail no corpo da página:

Para cada operação feita no Gmail (pesquisa, paginação etc), o atributo src do iframe é modificado. Esse atributo indica a página carregada no iframe. A modificação desse valor faz com que um novo código seja carregado no iframe. Esse novo código então é responsável por atualizar a interface do usuário. Todas as requisições HTTP que acontecem entre a ação do usuário e a atualização da tela são feitas de forma que a latência seja a menor possível.

Na figura acima também pode ser vista a div "loading", responsável pela primeira tela que é vista quando o Gmail está sendo carregado. O restante do código-fonte do Gmail é composto por intermináveis elementos com IDs e classes CSS de nomes muito estranhos (vY, nH, diLZtc, dJ, pi e coisas assim), muitas tabelas (já ouviu falar de tableless?) e por aí vai. Claro que quem gera tudo isso automaticamente é o Google Web Toolkit. Dê uma olhada na beleza do código-fonte gerado:

Bonito não? Mas o que importa é a saúde, ou seja, se funciona bem, o que no caso do Gmail é verdadeiro.

O Gmail utiliza diversas outras técnicas para otimizar o desempenho, como fazer o "minify" do JavaScript e do CSS, ou seja, remover espaços em branco, diminuir nomes de variáveis, juntar aquivos etc. E também utiliza-se das melhores práticas do Yahoo e do próprio Google para deixar a aplicação mais rápida.

Para saber mais sobre o funcionamento do Gmail "por baixo dos panos", há um excelente artigo sobre isso no wiki da Universidade de Stanford.

Bookmarklet para pegar um texto selecionado

cleber — Fri, 25 Dec 2009 15:59:17 +0000

O bookmarklet é um pequeno programa em JavaScript que é armazenado como uma URL nos favoritos do navegador. Entre os usos de um bookmarklet (também chamado de favlet ou favelet) estão:

modificar a aparência de uma página;
extrair dados de uma página;
submeter um página para um serviço de validação ou tradução ou qualquer outro serviço;
submeter um texto selecionado em uma página para um serviço de busca ou para qualquer outro serviço.

Para você criar um bookmarklet você deve criar um favorito e colocar um trecho de código JavaScript no lugar do endereço (URL) do favorito. Ou, como é mais usado, arrastar um link que tenha o trecho do código para os favoritos do navegador. Estando o bookmarklet criado, é só você clicar no favorito que foi criado para executar o código, assim como você clica em qualquer outro favorito.

Exemplos

O Google disponibiliza vários bookmarks em seus serviços (para usá-los arraste o link para os seus favoritos):

Sidewiki: abre o Sidewiki da página atual. (saiba mais)
Orkut: compartilha conteúdo pelo orkut. (saiba mais)
Favoritos do Google: adiciona a página atual no serviço de favoritos do Google. (saiba mais)
BlogThis!: cria uma postagem no Blogger com um link da página atual. (saiba mais)
Traduzir: traduz o texto selecionado ou uma página inteira para o português. (saiba mais)

Vou usar o exemplo do bookmarklet de tradução do Google para criar um bookmarklet que faça uma busca neste blog com o texto selecionado em uma página.

O código JavaScript do bookmarklet que faz a tradução usando o serviço do Google é o seguinte:

var t = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
var e = (document.charset || document.characterSet);
if (t != '') {
    location.href = 'http://translate.google.com.br/translate_t?text=' + t + '&hl=pt-BR&langpair=auto|pt&tbb=1&ie=' + e;
} else {
    location.href = 'http://translate.google.com.br/translate?u=' + escape(location.href) + '&hl=pt-BR&langpair=auto|pt&tbb=1&ie=' + e;
};

Na linha 1, o programa tenta pegar o texto que está selecionado para armazená-lo na variável t. Na linha 2 ele armazena o encoding de caracteres da página na variável e:

E por último ele faz uma verificação: se algum texto foi selecionado, o valor das variáveis t e e são passados com parâmetros na URL de tradução que será carregada. Se nenhum texto foi selecionado, a URL da página atual (location.href) será passada como parâmetro:

As URLs do serviço de tradução do Google são:

http://translate.google.com.br/translate_t: para traduzir textos
http://translate.google.com.br/translate: para traduzir páginas inteiras

E os parâmetros que devem ser passados são:

text: o texto a ser traduzido;
u: a URL a ser traduzida;
hl: o idioma da interface (host language);
langpair: o par de linguagens que será usado para a tradução. No exemplo é usado auto|pt, ou seja detecta o idioma de origem automaticamente e traduz para o português;
ie: encoding da página.

Vamos criar agora o bookmarklet que fará a busca em nosso blog por qualquer texto selecionado. Ele será idêntico ao exemplo mostrado acima, a única diferença é que a URL para o qual será passado o parâmetro (o texto selecionado) será:

http://cleber.net.br/search/node/[parametro]

E no caso de nenhum texto estar selecionado, será exibido uma caixa de diálogo pedindo algum texto:

var t = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
if (t != '') {
        location.href = 'http://cleber.net.br/search/node/' + t;
} else {
        t = prompt('Era para você selecionar um texto errr! Agora digite um abaixo:', '');
        if (t && t != '') {
                location.href = 'http://cleber.net.br/search/node/' + t;
        } else {
                alert('Desisto!');
        }
};

Para utilizar este bookmarklet, arraste o botão abaixo para a sua barra de favoritos. Depois em qualquer página que você estiver é só clicar nele.

Buscar em cleber.net.br

Abaixo alguns links com diretórios de bookmarklets:

Exibir o favicon de qualquer site

cleber — Wed, 25 Nov 2009 18:08:25 +0000

Qualquer site que se preze possui um favicon, abreviação do inglês favorites icon, ou ícone dos favoritos, que nada mais é do que uma imagem (ou ícone) associada a um site. Criar um favicon é fácil. Por isso é interessante colocar o favicon de um site junto com o seu link. Muitos serviços já fazem isso, como o Google Profile, que exibe os favicons dos links associados ao perfil.

Métodos para inserir um favicon

O significado original da definição de um favicon surgiu com o Internet Explorer 4 e consistia em colocar um arquivo chamado favicon.ico no diretório raíz do servidor web. Assim, automaticamente o navegador pegaria esse ícone e usaria na exibição dos favoritos. Os navegadores atuais suportam qualquer outro formato de imagem além do formato ICO do Windows.

Como não existe um método padrão para incluir uma imagem em uma página como um favicon, muitos programadores utilizam mais de um método ao mesmo tempo. São basicamente três maneiras:

Usar a meta tag <link rel="icon" type="image/png" href="http://exemplo.com.br/icone.png"> no cabeçalho da página. Esse é o método recomendado pela W3C.
Usar a meta tag <link rel="shortcut icon" type="image/x-icon" href="http://cleber.net.br/favicon.ico" /> no cabeçalho da página. Esse é o método mais usado e é reconhecido pela maioria dos navegadores.
Colocar o favicon como um arquivo chamado favicon.ico no diretório raíz da página. Todos os navegadores suportam esse método por razões de compatibilidade, mas é o menos flexível.

Jeito Google de ser

Por falta de um padrão, não existe uma forma fácil de se exibir o favicon de qualquer site. O falecido serviço Google Shared Stuff (S2) não existe mais, mas deixou uma herança: uma URL que permite recuperar o favicon dos sites. A URL retorna uma imagem no formato PNG com tamanho 16x16 e que pode ser exibida via HTML usando a tag img, no seguinte formato:

http://www.google.com/s2/favicons?domain=[url]

Onde [url] deve ser substituído pela URL do site do qual se deseja pegar o favicon. Por exemplo, veja o seguinte código HTML:

1	<img src="http://www.google.com/s2/favicons?domain=g1.com.br" title="Favicon do g1.com.br" height="16" width="16" />

O resultado visto no navegador será a seguinte imagem:

Mas existe um problema (Google fail) nessa URL do Google: ela só funciona quando o nome do arquivo for favicon.ico. Mas muitos sites utilizam outros métodos para inserir o favicon. Então, quando a URL do Google não acha o arquivo favicon.ico, ela exibe uma imagem GIF do planeta Terra. Por exemplo, o site www.md.utfpr.edu.br não possui um arquivo chamado favicon.ico na sua raíz, então a seguinte imagem será exibida: . Passando o parâmetro &alt=feed junto com a URL, será exibida a imagem padrão dos feeds RSS caso não seja encontrado o favicon. Por exemplo, a URL http://s2.googleusercontent.com/s2/favicons?domain=www.md.utfpr.edu.br&alt=feed retorna a seguinte imagem:

Apesar de não ser o melhor, muitos projetos utilizam essa URL. Você pode testar o serviço aqui, colocando a URL de um site (ex.: cleber.net.br)

getfavicon.org

O site getfavicon.org possui um serviço melhorado. Ele lista todos os métodos usados em um site para inserir um favicon e permite várias configurações de exibição, usando a seguinte URL:

http://www.getfavicon.org/?url=[url]/[nome].[extensao]

Onde:

[url]: a URL do site do site do qual se deseja pegar o favicon
[nome]: um nome qualquer para o arquivo
[extensao]: formato da imagem que será gerada. Pode ser png, gif, jpg ou ico.

A imagem gerada possui resolução padrão de 16x16. É possível definir uma resolução para a imagem, usando a URL http://www.getfavicon.org/?url=[url]/[nome].[resolucao].[extensao], onde [resolução] deve ser substituído pelo valor (no máximo 128).

Você pode testar o serviço aqui, colocando a URL de um site (ex.: cleber.net.br).

Veja alguns exemplos:

	PNG: http://www.getfavicon.org/?url=cleber.net.br/favicon.png
	JPG: http://www.getfavicon.org/?url=cleber.net.br/favicon.jpg
	GIF 25x25: http://www.getfavicon.org/?url=cleber.net.br/favicon.25.gif
	PNG 32x32: http://www.getfavicon.org/?url=cleber.net.br/favicon.32.png

Lista de favicons para do site cleber.net.br

getfavicon.appspot.com

Esse site, construído usando o Google App Engine, é o mais inteligente. Ele recupera o favicon fazendo uma busca também na tag link do cabeçalho. A URL deve ser usada no seguinte formato:

http://getfavicon.appspot.com/[url]

Onde [url] é a URL completa do site, incluindo os protocolos HTTP ou HTTPS. Por exemplo, o favicon do site www.md.utfpr.edu.br, que nos serviços anteriores não era encontrado, pode ser exibido usando a URL http://getfavicon.appspot.com/http://www.md.utfpr.edu.br.

Veja o favicon:

Você pode testar o serviço aqui, colocando a URL completa de um site (ex.: http://cleber.net.br).

CSS Sprite

cleber — Sat, 31 Oct 2009 01:30:01 +0000

Uma técnica muito utilizada em websites e sistemas web para diminuir o tráfego de banda e otimizar o desempenho é o CSS Sprite. A técnica consiste em juntar várias imagens em uma imagem só e utilizar os recursos do CSS para definir qual imagem será exibida. O tráfego de banda é menor por que ao invés de várias requisições para o servidor o navegador faz uma requisição apenas. Além disso, com menos requisições simultâneas, a página carrega mais rápido.

As propriedades do CSS responsáveis pela mágica são basicamente as seguintes:

background-image
background-position

Com background-image você define a imagem e com o background-position você indica qual parte da imagem deve aparecer. Vários tutoriais explicam melhor como utilizar a técnica e existem até geradores de imagem e classes CSS.

No seu site de busca, o Google utiliza uma imagem no formato PNG chamada de nav_logo.png (navegação + logo). Na verdade são várias versões da imagem. Cada nova versão da imagem é identificada com um número no final e colocada no endereço www.google.com.br/images. Confira todas as versões:

nav_logo2.png	nav_logo3.png	nav_logo4.png


nav_logo5.png	nav_logo6.png	nav_logo7.png

Um detalhe é que todas as imagens trazem o botão do Google Checkout, o serviço de compras do Google. No entanto, esse serviço não está disponível no Brasil. Levando em consideração que a imagem possui um tamanho de 5,27 KB, aproximadamente 4,45 KB são utilizados pela imagem do botão. O tempo de vida da imagem no cache do navegador (max-age) é de um ano (3153600 segundos). O Brasil tem 33 milhões de internautas e a maioria usa o Google como ferramenta de busca. Conclusão: o Google desperdiça por ano 140 GB em tráfego de banda por causa de apenas uma imagem! Para o Google, isso não é nada. Afinal, o YouTube gasta US$ 399 milhões com tráfego de banda e os seus lucros não conseguem cobrir esse valor.

Site da Casa Branca utilizando o Drupal

cleber — Wed, 28 Oct 2009 18:10:30 +0000

Durante o governo de George Bush, o site oficial da Casa Branca era gerenciado por um software proprietário. Mas a nova administração de Barak Obama queria uma alternativa mais flexível, e por isso delegou a empresa GDIT (General Dynamics Information Technology) a nova tarefa. A GDIT era a mesma empresa contratada para cuidar do site no governo anterior. Após meses de planejamento, eis que ressurge o novo site utilizando o Drupal como CMS. Visualmente o site continua o mesmo, apenas a sua estrutura que mudou. Os fóruns, blogs, comentários e outros recursos agora são gerenciados pelo Drupal.

A transição foi feita por quatro empresas, entre elas a Acquia, fundada por Dries Buytaert, o criador do Drupal. O site está rodando no sistema operacional Red Hat Linux com o servidor Apache, banco de dados MySQL e como motor de busca o Apache Solr, que é baseado na biblioteca Java Lucene.