Personal tools

Skip to content. | Skip to navigation

Sections

Blog

You are here: Home Blog Érico Andrei

Érico Andrei

Posts do blog publicados pelo Cleber

Showing blog entries tagged as: Google

Python: Google and April Fool's Day

Posted by Cleber J Santos at 09/04/2012 01:16
Filed under: Python, Google

Como bem sabemos o dia da mentira é comemorado por todos e por muitas empresas, até mesmo o Google entrou nessa, e este ano não foi diferente, porém o que venho postar não é sobre o dia da mentira ou sobre as brincadeiras que o Google tem feito, apesar de serem muito divertidas.

O que me chamou a atenção foi o tal do Elegantizr que foi divulgado como um framework que promete deixar o site até 3 vezes mais rápido, e pior, muita gente mesmo caiu nessa!

Risadas a parte, a brincadeira foi tão legal que logo eu quis saber como foi feita. É bem provável que muitos venham a dizer que é algo super simples e etc, porém vale ainda assim blogar.

A brincadeira.

 Trata-se de um arquivo de CSS (http://www.google.com/landing/elegantizr/elegantizr.css) que deve ser incorporado no site:
 
<link rel="stylesheet" href="http://www.google.com/landing/elegantizr/elegantizr.css" />
Analisando o conteúdo do arquivo teremos o seguinte código:
 
:before {
  content: '\41\50\52\49\4C\20\46\4F\4F\4C\20\F4\BF\F4';
}
 
Não entendo muito das mágicas do CSS, e tive que recorrer a pessoas mais confiáveis no assunto como o @agnogueira, @Tamosauskas e o @google, no qual me informaram que  trata-se de pseudo-elementos e que neste caso temos vários, dentre eles temos o before e after que são usados para gerar conteúdos antes e depois do conteúdo de um elemento.
 
A seguir uma exemplo de como :before e :after podem ser usados para inserir a URL logo após o texto de um link ou antes de um texto de um link:
 
Antes do texto de um link.
a:link:before {
  content: " (" attr(href) ") ";
}

Depois do texto de um link.

a:link:after {
   content: " (" attr(href) ") ";
}
Agora não quero me focar em CSS, então espero que os amigos @agnogueira@Tamosauskas possam blogar algo sobre os pseudo-elementos de CSS :D
 

Como fazer.

Agora entramos na parte que gosto, notem que destaquei o trecho do código que é:
 
'\41\50\52\49\4C\20\46\4F\4F\4C\20\F4\BF\F4'
Aqui é onde a brincadeira acontece, este código ai acima trata-se de um texto (string) convertido em hexadecimal, vamos para um exemplo rápido:
 
 
>>> text = 'APRIL FOOL ô¿ô'
>>> text.encode('hex').upper()
'415052494C20464F4F4C20C3B4C2BFC3B4'
 
Note que no meu exemplo o código aparece diferente, isso por que o meu Python está usando encode utf8 como padrão, vejamos agora usando iso-8859-1.
 
>>> text = 'APRIL FOOL ô¿ô'
>>> text.encode('iso-8859-1').encode('hex').upper()
'415052494C20464F4F4C20F4BFF4'
 
Agora o que nos falta é adicionar a cada dois objetos uma barra invertida '\', e teremos:
 
'\41\50\52\49\4C\20\46\4F\4F\4C\20\F4\BF\F4'
A idéia não é mostrar exatamente como foi feito claro, ou seja, fica por conta colocar as barras a cada duas strings como feito acima, porém isso pode ser feito também com Python.
 
Para finalizar fiz este abaixo que irá imprimir a frase Python antes de cada item, note que o procedimento é o mesmo.
 
A conversão.
>>> text = 'Python'
>>> text.encode('iso-8859-1').encode('hex').upper()
'507974686F6E'

O Css.
:before {
  content: '\50\79\74\68\6F\6E';
}


Até a próxima.

| Comentários
Document Actions
Spinner