<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2portuguesefull.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0" xml:base="http://cleber.net.br">
<channel>
 <title>Blog do Cleber</title>
 <link>http://cleber.net.br</link>
 <description />
 <language>pt-br</language>
<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/BlogDoCleber" /><feedburner:info uri="blogdocleber" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:feedFlare href="http://add.my.yahoo.com/rss?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif">Subscribe with My Yahoo!</feedburner:feedFlare><feedburner:feedFlare href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.newsgator.com/images/ngsub1.gif">Subscribe with NewsGator</feedburner:feedFlare><feedburner:feedFlare href="http://feeds.my.aol.com/add.jsp?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://o.aolcdn.com/favorites.my.aol.com/webmaster/ffclient/webroot/locale/en-US/images/myAOLButtonSmall.gif">Subscribe with My AOL</feedburner:feedFlare><feedburner:feedFlare href="http://www.bloglines.com/sub/http://feeds.feedburner.com/BlogDoCleber" src="http://www.bloglines.com/images/sub_modern11.gif">Subscribe with Bloglines</feedburner:feedFlare><feedburner:feedFlare href="http://www.netvibes.com/subscribe.php?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.netvibes.com/img/add2netvibes.gif">Subscribe with Netvibes</feedburner:feedFlare><feedburner:feedFlare href="http://fusion.google.com/add?feedurl=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://buttons.googlesyndication.com/fusion/add.gif">Subscribe with Google</feedburner:feedFlare><feedburner:feedFlare href="http://www.pageflakes.com/subscribe.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.pageflakes.com/ImageFile.ashx?instanceId=Static_4&amp;fileName=ATP_blu_91x17.gif">Subscribe with Pageflakes</feedburner:feedFlare><feedburner:feedFlare href="http://www.plusmo.com/add?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://plusmo.com/res/graphics/fbplusmo.gif">Subscribe with Plusmo</feedburner:feedFlare><feedburner:feedFlare href="http://www.thefreedictionary.com/_/hp/AddRSS.aspx?http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://img.tfd.com/hp/addToTheFreeDictionary.gif">Subscribe with The Free Dictionary</feedburner:feedFlare><feedburner:feedFlare href="http://www.bitty.com/manual/?contenttype=rssfeed&amp;contentvalue=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.bitty.com/img/bittychicklet_91x17.gif">Subscribe with Bitty Browser</feedburner:feedFlare><feedburner:feedFlare href="http://www.newsalloy.com/?rss=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.newsalloy.com/subrss3.gif">Subscribe with NewsAlloy</feedburner:feedFlare><feedburner:feedFlare href="http://www.live.com/?add=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://tkfiles.storage.msn.com/x1piYkpqHC_35nIp1gLE68-wvzLZO8iXl_JMledmJQXP-XTBOLfmQv4zhj4MhcWEJh_GtoBIiAl1Mjh-ndp9k47If7hTaFno0mxW9_i3p_5qQw">Subscribe with Live.com</feedburner:feedFlare><feedburner:feedFlare href="http://mix.excite.eu/add?feedurl=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://image.excite.co.uk/mix/addtomix.gif">Subscribe with Excite MIX</feedburner:feedFlare><feedburner:feedFlare href="http://download.attensa.com/app/get_attensa.html?feedurl=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.attensa.com/blogs/attensa/WindowsLiveWriter/BadgeredintoBadges_10C02/attensa_feed_button5.gif">Subscribe with Attensa for Outlook</feedburner:feedFlare><feedburner:feedFlare href="http://www.webwag.com/wwgthis.php?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.webwag.com/images/wwgthis.gif">Subscribe with Webwag</feedburner:feedFlare><feedburner:feedFlare href="http://www.podcastready.com/oneclick_bookmark.php?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.podcastready.com/images/podcastready_button.gif">Subscribe with Podcast Ready</feedburner:feedFlare><feedburner:feedFlare href="http://www.flurry.com/pushRssFeed.do?r=fb&amp;url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.flurry.com/images/flurry_rss_logo2.gif">Subscribe with Flurry</feedburner:feedFlare><feedburner:feedFlare href="http://www.wikio.com/subscribe?url=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.wikio.com/shared/img/add2wikio.gif">Subscribe with Wikio</feedburner:feedFlare><feedburner:feedFlare href="http://www.dailyrotation.com/index.php?feed=http%3A%2F%2Ffeeds.feedburner.com%2FBlogDoCleber" src="http://www.dailyrotation.com/rss-dr2.gif">Subscribe with Daily Rotation</feedburner:feedFlare><item>
 <title>Formate um documento do Google Docs nas normas</title>
 <link>http://feedproxy.google.com/~r/BlogDoCleber/~3/HMJ1KrQLggk/formate-um-documento-do-google-docs-nas-normas</link>
 <description>&lt;p&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/google-docs-logo.png" alt="Logo do Google Docs" title="Logo do Google Docs" width="75" height="71" style="float: right;" class="mceItem"&gt;Muitas pessoas ainda torcem o nariz para o &lt;a href="http://docs.google.com/?hl=pt-BR" title="Google Docs"&gt;Google Docs&lt;/a&gt; e preferem continuar usando o &lt;a href="http://office.microsoft.com/pt-br/word/default.aspx" title="Microsoft Office"&gt;Microsoft Word&lt;/a&gt;. É claro que o Word tem centenas de funções que o Google Docs não tem. Mas quem usa todas elas?&lt;/p&gt;
&lt;p&gt;Estou usando o Google Docs para criar o meu &lt;acronym title="Trabalho de Conclusão de Curso"&gt;TCC&lt;/acronym&gt; sobre o &lt;a href="/opensocial" title="OpenSocial"&gt;OpenSocial&lt;/a&gt;. Entre os motivos que me levaram a usar estão:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Posso acessar o meu TCC de qualquer lugar, precisando apenas de uma conexão com a internet. Está sem internet? Com o Google Docs &lt;em&gt;&lt;a href="http://docs.google.com/support/bin/answer.py?hl=br&amp;amp;answer=92247" title="Como funciona o Google Docs offline"&gt;offline&lt;/a&gt;&lt;/em&gt; posso continuar editando o documento, e quando a conexão com a internet voltar, ele sincroniza automaticamente com a versão &lt;em&gt;online&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;&lt;a href="http://docs.google.com/support/bin/topic.py?hl=br&amp;amp;topic=15129" title="Compartilhamento no Google Docs"&gt;Compartilhei&lt;/a&gt; o meu TCC com o meu orientador, assim ele pode ver o andamento do trabalho e até mesmo editá-lo.&lt;/li&gt;
&lt;li&gt;O Google Docs armazena &lt;a href="http://docs.google.com/support/bin/answer.py?answer=92199&amp;amp;query=revis%C3%B5es&amp;amp;type=" title="Revisões no Google Docs"&gt;revisões&lt;/a&gt; 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.&lt;/li&gt;
&lt;li&gt;Sei que o meu TCC estará protegido na &lt;a href="http://www.wired.com/images_blogs/epicenter/2010/01/google_cloud.jpg" title="Nuvem do Google"&gt;nuvem do Google&lt;/a&gt;. Mas é claro, sempre é bom fazer um &lt;em&gt;backup &lt;/em&gt;frequente do documento para o seu PC ou outro local.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;O Google Docs apresenta algumas complicações a mais para os mais leigos:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Não existem separações de páginas, tudo é apresentado em um texto único. No entanto, você pode &lt;a href="http://docs.google.com/support/bin/answer.py?answer=92199&amp;amp;query=revis%C3%B5es&amp;amp;type=" title="Inserindo quebras de páginas no Google Docs"&gt;inserir quebras de páginas&lt;/a&gt;, 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,&amp;nbsp;clique no menu "Inserir" e clique em "Quebra de página (para impressão)".&lt;/li&gt;
&lt;li&gt;Só é possível &lt;a href="http://docs.google.com/support/bin/answer.py?hl=pt_BR&amp;amp;answer=83321" title="Como inserir numeração de páginas no Google Docs"&gt;inserir numeração de páginas&lt;/a&gt; na versão de impressão do documento.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Formatação&lt;/h3&gt;
&lt;p&gt;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 &lt;acronym title="Associação Brasileira de Normas Técnicas" lang="pt_BR"&gt;&lt;a href="http://www.abnt.org.br/m3.asp?cod_pagina=931" title="Associação Brasileira de Normas Técnicas"&gt;ABNT&lt;/a&gt;&lt;/acronym&gt;. No Word é fácil formatar&amp;nbsp;margens, parágrafos, fontes, espaçamentos etc. Para fazer isso no Google Docs, é necessário um conhecimento um pouco mais avançado.&lt;/p&gt;
&lt;p&gt;Para formatar um documento do Google Docs de acordo com as &lt;a href="http://docs.google.com/viewer?url=http://www.utfpr.edu.br/documentos/normas_trabalhos_utfpr.pdf" title="Normas da UTFPR"&gt;normas da &lt;/a&gt;&lt;a href="http://docs.google.com/viewer?url=http://www.utfpr.edu.br/documentos/normas_trabalhos_utfpr.pdf" title="Normas da UTFPR"&gt;&lt;acronym title="Universidade Tecnológica Federal do Paraná"&gt;UTFPR&lt;/acronym&gt;&lt;/a&gt;, criei algumas declarações &lt;acronym title="Cascading Style Sheets" lang="en"&gt;&lt;a href="http://pt.wikipedia.org/wiki/Cascading_Style_Sheets" title="Artigo na Wikipédia sobre CSS"&gt;CSS&lt;/a&gt;&lt;/acronym&gt; 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:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;*, html, body {&lt;br&gt;&amp;nbsp;&amp;nbsp;margin: 0;&lt;br&gt;&amp;nbsp;&amp;nbsp;padding: 0;&lt;br&gt;}&lt;br&gt;html {&lt;br&gt;&amp;nbsp;&amp;nbsp;color: #000;&lt;br&gt;&amp;nbsp;&amp;nbsp;padding: 3cm 2cm 2cm 3cm;&lt;br&gt;}&lt;br&gt;body {&lt;br&gt;&amp;nbsp;&amp;nbsp;font-family: Arial;&lt;br&gt;&amp;nbsp;&amp;nbsp;font-size: 12pt;&lt;br&gt;}&lt;br&gt;h1, h2, h3, h4, h5, h6 {&lt;br&gt;&amp;nbsp;&amp;nbsp;font-family: Arial;&lt;br&gt;&amp;nbsp;&amp;nbsp;font-style: normal;&lt;br&gt;&amp;nbsp;&amp;nbsp;margin: 3pt 0 3pt 0;&lt;br&gt;}&lt;br&gt;h1 {&lt;br&gt;&amp;nbsp;&amp;nbsp;font-size: 14pt;&lt;br&gt;}&lt;br&gt;h2, h3, h4, h5, h6 {&lt;br&gt;&amp;nbsp;&amp;nbsp;font-size: 12pt;&lt;br&gt;&amp;nbsp;&amp;nbsp;font-weight: normal;&lt;br&gt;}&lt;br&gt;p {&lt;br&gt;&amp;nbsp;&amp;nbsp;margin: 0;&lt;br&gt;&amp;nbsp;&amp;nbsp;text-indent: 1.5cm;&lt;br&gt;}&lt;br&gt;ul {&lt;br&gt;&amp;nbsp;&amp;nbsp;margin-left: 1.5cm;&lt;br&gt;}&lt;br&gt;p, ul {&lt;br&gt;&amp;nbsp;&amp;nbsp;font-family: Arial;&lt;br&gt;&amp;nbsp;&amp;nbsp;font-size: 12pt;&lt;br&gt;&amp;nbsp;&amp;nbsp;line-height: 150%;&lt;br&gt;&amp;nbsp;&amp;nbsp;text-align: justify;&lt;br&gt;}&lt;br&gt;blockquote {&lt;br&gt;&amp;nbsp;&amp;nbsp;border: none;&lt;br&gt;&amp;nbsp;&amp;nbsp;font-size: 10pt;&lt;br&gt;&amp;nbsp;&amp;nbsp;line-height: 100%;&lt;br&gt;&amp;nbsp;&amp;nbsp;margin-left: 4cm;&lt;br&gt;&amp;nbsp;&amp;nbsp;text-align: justify;&lt;br&gt;}&lt;br&gt;#WritelyTableOfContents { /* Formata o sumario gerado pelo Google Docs - Menu Inserir -&amp;gt; Sumario */&lt;br&gt;&amp;nbsp;&amp;nbsp;background: none;&lt;br&gt;&amp;nbsp;&amp;nbsp;border: none;&lt;br&gt;&amp;nbsp;&amp;nbsp;font-family: Arial;&lt;br&gt;&amp;nbsp;&amp;nbsp;font-size: 12pt;&lt;br&gt;}&lt;br&gt;#WritelyTableOfContents a {&lt;br&gt;&amp;nbsp;&amp;nbsp;color: #000;&lt;br&gt;&amp;nbsp;&amp;nbsp;line-height: 100%;&lt;br&gt;&amp;nbsp;&amp;nbsp;text-decoration: none;&lt;br&gt;}&lt;br&gt;#WritelyTableOfContents ol {&lt;br&gt;&amp;nbsp;&amp;nbsp;margin-left: 25px;&lt;br&gt;&amp;nbsp;&amp;nbsp;padding-left: 0;&lt;br&gt;}&lt;/p&gt;
&lt;p&gt;As seguintes declarações CSS formatam o documento da seguinte maneira:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Margens esquerda e superior com &lt;strong&gt;3 cm&lt;/strong&gt; e margens direita e inferior com &lt;strong&gt;2 cm&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Fonte &lt;strong&gt;Arial &lt;/strong&gt;com tamanho &lt;strong&gt;12&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Títulos primários com tamanho &lt;strong&gt;14&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Cor do texto em &lt;strong&gt;preto&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Parágrafos com alinhamento &lt;strong&gt;justificado&lt;/strong&gt;, recuo de primeira linha de &lt;strong&gt;1,5 cm&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Citações com fonte tamanho &lt;strong&gt;10&lt;/strong&gt;, espaçamento simples e margem esquerda de &lt;strong&gt;4 cm&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Atenção:&lt;/strong&gt; em nenhum momento você irá apenas exportar o documento no formato Word, &lt;acronym title="OpenDocument Text" lang="en"&gt;&lt;a href="http://pt.wikipedia.org/wiki/OpenDocument" title="Artigo na Wikipédia sobre o ODF"&gt;ODT&lt;/a&gt;&lt;/acronym&gt; ou &lt;acronym title="Portable Document Format" lang="en"&gt;PDF&lt;/acronym&gt; 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.&lt;/p&gt;
&lt;p&gt;Após exportar o documento final, algumas formatações deverão ser feitas:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Crie a capa e a folha de rosto.&lt;/li&gt;
&lt;li&gt;Ajuste as margens se necessário.&lt;/li&gt;
&lt;li&gt;Insira a numeração das páginas de acordo com as normas.&lt;/li&gt;
&lt;li&gt;Insira a numeração nos títulos e subtítulos.&lt;/li&gt;
&lt;li&gt;Gere o sumário automático.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/microsoft-word.jpg" alt="Logo do Microsoft Word" title="Logo do Microsoft Word" width="39" height="39" style="float: right;" class="mceItem"&gt;A Microsoft já conta também com o &lt;a href="http://workspace.officelive.com/pt-BR/" title="Microsoft Office Live Workspace"&gt;Microsoft Office Live Workspace&lt;/a&gt;, um serviço semelhante ao Google Docs.&lt;/p&gt;
&lt;p&gt;Veja abaixo uma comparação entre o mesmo documento no Google Docs e no Microsoft Word:&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/google-docs-vs-microsoft-word.png" alt="Google Docs x Microsoft Word" title="Google Docs x Microsoft Word" class="mceItem"&gt;&lt;/p&gt;&lt;div class="feedflare"&gt;
&lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=HMJ1KrQLggk:jMuN6JznChE:yIl2AUoC8zA"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=yIl2AUoC8zA" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=HMJ1KrQLggk:jMuN6JznChE:qj6IDK7rITs"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=qj6IDK7rITs" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=HMJ1KrQLggk:jMuN6JznChE:V_sGLiPBpWU"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=HMJ1KrQLggk:jMuN6JznChE:V_sGLiPBpWU" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=HMJ1KrQLggk:jMuN6JznChE:F7zBnMyn0Lo"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=HMJ1KrQLggk:jMuN6JznChE:F7zBnMyn0Lo" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=HMJ1KrQLggk:jMuN6JznChE:gIN9vFwOqvQ"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=HMJ1KrQLggk:jMuN6JznChE:gIN9vFwOqvQ" border="0"&gt;&lt;/img&gt;&lt;/a&gt;
&lt;/div&gt;&lt;img src="http://feeds.feedburner.com/~r/BlogDoCleber/~4/HMJ1KrQLggk" height="1" width="1"/&gt;</description>
 <comments>http://cleber.net.br/formate-um-documento-do-google-docs-nas-normas#comments</comments>
 <category domain="http://cleber.net.br/tags/abnt">ABNT</category>
 <category domain="http://cleber.net.br/tags/css">CSS</category>
 <category domain="http://cleber.net.br/tags/dica">dica</category>
 <category domain="http://cleber.net.br/tags/formata%C3%A7%C3%A3o">formatação</category>
 <category domain="http://cleber.net.br/tags/google">Google</category>
 <category domain="http://cleber.net.br/tags/google-docs">Google Docs</category>
 <category domain="http://cleber.net.br/tags/normas">normas</category>
 <category domain="http://cleber.net.br/tags/opensocial">opensocial</category>
 <category domain="http://cleber.net.br/tags/tcc">TCC</category>
 <category domain="http://cleber.net.br/tags/utfpr">UTFPR</category>
 <pubDate>Sun, 21 Feb 2010 21:05:32 +0000</pubDate>
 <dc:creator>cleber</dc:creator>
 <guid isPermaLink="false">24 at http://cleber.net.br</guid>
<feedburner:origLink>http://cleber.net.br/formate-um-documento-do-google-docs-nas-normas</feedburner:origLink></item>
<item>
 <title>Dissecando o Gmail</title>
 <link>http://feedproxy.google.com/~r/BlogDoCleber/~3/N7xdWKY8m-I/dissecando-o-gmail</link>
 <description>&lt;p&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/gmail/Gmail_Delivery.jpg" alt="Gmail Delivery" title="Gmail Delivery" align="left" width="120" height="88" class="mceItem"&gt;O &lt;em&gt;webmail&lt;/em&gt; do Google, o &lt;a href="http://mail.google.com" title="Gmail"&gt;Gmail&lt;/a&gt; (&lt;a href="http://googlemail.com" title="Google Mail"&gt;Google Mail&lt;/a&gt; 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 &lt;abbr title="Asynchronous Javascript And XML" lang="en"&gt;&lt;a href="http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)" title="Programação AJAX"&gt;Ajax&lt;/a&gt;&lt;/abbr&gt;, 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.&lt;/p&gt;
&lt;h3&gt;Especificações Técnicas&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;A interface do Gmail é construída sob a plataforma&amp;nbsp;&lt;a href="http://code.google.com/intl/pt-BR/webtoolkit/" title="Site do Google Web Toolkit"&gt;Google Web Toolkit&lt;/a&gt;&amp;nbsp;(GWT) e tudo isso roda no&amp;nbsp;&lt;a href="http://code.google.com/p/opengse/" title="OpenGSE TestSuite"&gt;Google Servlet Engine&lt;/a&gt;&amp;nbsp;(GSE) e Google GFE/2.0 (Google Front-End), que por sua vez &lt;a href="http://toolbar.netcraft.com/site_report?url=http://mail.google.com" title="Relatório do site mail.google.com"&gt;rodam em Linux&lt;/a&gt;. O Google Servlet Engine - nome oficial:&amp;nbsp;Open Google Servlet Engine (OpenGSE) - &lt;a href="http://google-opensource.blogspot.com/2009/01/opengse-released.html" title="Anúncio do lançamento do OpenGSE"&gt;foi desenvolvido&lt;/a&gt; por um time de engenheiros do Google e é usado em muitos produtos do Google - internamente e publicamente.&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;O &lt;a href="http://en.wikipedia.org/wiki/Google_Web_Server" title="Artigo da Wikipédia sobre o Google Web Server"&gt;Google Web Server&lt;/a&gt; (GWS) é&amp;nbsp;o nome do servidor &lt;em&gt;web &lt;/em&gt;que o Google utiliza para a sua infraestrutura. Especula-se que se trata de uma compilação do &lt;a href="http://httpd.apache.org/" title="Site do servidor web Apache"&gt;Apache Web Server&lt;/a&gt; com mudanças nos cabeçalhos.&lt;/p&gt;
&lt;h3&gt;Carregando...&lt;/h3&gt;
&lt;p&gt;A cada vez que uma sessão do Gmail é iniciada, uma página contendo um documento vazio é carregada. &lt;a name="inicio_gmail"&gt;&lt;/a&gt;O único elemento visível é a mensagem com o status do carregamento da página&amp;nbsp;(&lt;span class="codigo-fonte"&gt;div id="loading"&lt;/span&gt;), além da mensagem que é exibida caso o carregamento estiver demorando muito. O tamanho aproximado desta página é de 7 KB.&lt;/p&gt;
&lt;p&gt;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 &lt;em&gt;tag &lt;/em&gt;do HTML chamada &lt;span class="codigo-fonte"&gt;&lt;a href="http://www.tibumweb.com.br/html/tags/noscript.php" title="Referência sobre a tag &amp;quot;noscript&amp;quot;"&gt;noscript&lt;/a&gt;&lt;/span&gt;. O que estiver escrito dentro desta &lt;em&gt;tag &lt;/em&gt;será exibido no navegador caso o JavaScript não estiver presente ou estiver desabilitado. No caso do Gmail, será exibida a mensagem:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;
&lt;font face="arial"&gt; 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 &lt;a&gt;tente novamente&lt;/a&gt;. &lt;/font&gt;&lt;/p&gt;
&lt;p&gt;&lt;font face="arial"&gt;&lt;/font&gt;&lt;/p&gt;
&lt;p&gt;&lt;font face="arial"&gt;&lt;/font&gt;&lt;/p&gt;
&lt;p&gt;&lt;font face="arial"&gt;
&lt;p&gt;Para usar o modo de exibição em HTML básico do Gmail, que não requer JavaScript, &lt;a href="?ui=html&amp;amp;zy=c"&gt;clique aqui&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;/font&gt;
&lt;p&gt;&lt;span style="font-family: arial;"&gt;Se quiser visualizar o Gmail em um celular ou dispositivo semelhante, &lt;a href="?ui=mobile&amp;amp;zyp=c"&gt;clique aqui&lt;/a&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;Essa mensagem que se encontra dentro da &lt;em&gt;tag &lt;/em&gt;&lt;span class="codigo-fonte"&gt;noscript&lt;/span&gt; está inserida no cabeçalho (&lt;span class="codigo-fonte"&gt;head&lt;/span&gt;) da página do Gmail! Não deveria estar no corpo (&lt;span class="codigo-fonte"&gt;body&lt;/span&gt;)? 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".&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3&gt;Cabeçalho&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;Na figura abaixo você vê uma imagem mostrando o cabeçalho (&lt;span class="codigo-fonte"&gt;head&lt;/span&gt;) da página do Gmail.&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/gmail/cabecalho_gmail.png" alt="Cabeçalho do Gmail" title="Cabeçalho do Gmail" width="604" height="553" class="mceItem"&gt;&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;A página usa o &lt;a href="http://www.w3.org/International/O-charset.pt-br.php" title="Informações sobre charset"&gt;charset&lt;/a&gt; (codificação de caracteres) &lt;a href="http://pt.wikipedia.org/wiki/UTF-8" title="Artigo da Wikipédia sobre o UTF-8"&gt;UTF-8&lt;/a&gt;. Isso permite que uma infinidade de caracteres possam &lt;a href="http://www.tableless.com.br/charsets-e-encodes-tabelas-de-caracteres" title="Artigo com informações sobre Charsets e Encodes – Tabelas de caracteres"&gt;ser representados&lt;/a&gt;, como os do alfabeto árabe, chinês, japonês etc. É muito comum vermos sites utilizando o&amp;nbsp;&lt;a href="http://pt.wikipedia.org/wiki/ISO_8859-1" title="Página da Wikipédia sobre oISO 8859-1"&gt;ISO-8859-1&lt;/a&gt; (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 &lt;em&gt;web &lt;/em&gt;a uma região apenas. &lt;/p&gt;
&lt;p&gt;A única vantagem do ISO-8859-1 sobre o UTF-8 é a questão dos acentos, pois para o UTF-8 a palavra &lt;em&gt;acentuação&lt;/em&gt; é diferente de &lt;em&gt;acentuacao&lt;/em&gt;. 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, &lt;strong&gt;utilize UTF-8&lt;/strong&gt; nos seus sites e sistemas. O Google é esperto e usa.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/gmail/logo-gmail.png" alt="Logo do Gmail" title="Logo do Gmail" width="150" height="111" style="float: right;" class="mceItem"&gt;&lt;/p&gt;
&lt;div&gt;
&lt;p&gt;No cabeçalho do Gmail também notamos alguns códigos JavaScript &lt;a href="http://www.milfont.org/tech/2008/02/10/javascript-inline-e-external/" title="Artigo explicando o que é JavaScript inline e externo"&gt;&lt;em&gt;inline&lt;/em&gt;&lt;/a&gt;. 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 &lt;em&gt;inline &lt;/em&gt;vistos acima fazem três operações:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;Define o horário do carregamento da aplicação em uma variável global:&amp;nbsp;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span class="codigo-fonte" style="font-weight: normal;"&gt;var startTime=(new Date).getTime();&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;Define, na variável global &lt;span class="codigo-fonte"&gt;BrowserSupport_&lt;/span&gt;, se o navegador é suportado;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;Faz verificação dos &lt;a href="http://pt.wikipedia.org/wiki/Cookie" title="Artigo da Wikipédia sobre cookies"&gt;cookies&lt;/a&gt;.&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;É ó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.&lt;/p&gt;
&lt;p&gt;Finalmente no cabeçalho da página principal também encontramos códigos CSS &lt;em&gt;inline&lt;/em&gt;. 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 &lt;a href="#inicio_gmail"&gt;início &lt;/a&gt;deste post, possui poucos elementos. Na verdade tudo o que vemos quando carregamos o Gmail está em um...&amp;nbsp;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;span class="codigo-fonte" style="background-color: #eeeeee; color: black; font-family: sans-serif; font-size: 12px; border: 1px solid #dddddd;"&gt;&lt;a href="http://www.criarsites.com/iframe-o-que-e-como-usar/" title="Artigo sobre iframes" style="color: #027ac6; text-decoration: none;"&gt;iframe&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;, que é um recurso do HTML que permite inserir uma página HTML dentro de outra.&lt;/p&gt;
&lt;h3&gt;&lt;span style="font-weight: normal;"&gt;&lt;span style="font-weight: normal;"&gt;&lt;span style="font-weight: normal;"&gt;Os Iframes do Gmail&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;&lt;strong&gt;&lt;span style="font-weight: normal;"&gt;O coração do Gmail é composto por 4 &lt;span class="codigo-fonte"&gt;iframes&lt;/span&gt;:&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;div&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;js_frame&lt;/span&gt;: contém a maioria do código JavaScript da aplicação.&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;hist_frame&lt;/span&gt;: responsável por manter o histórico da navegação, isto é, permitir o uso dos botões Voltar e Avançar do navegador.&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;sound_frame&lt;/span&gt;: possui um &lt;a href="http://mail.google.com/mail/im/chatsound.swf" title="Objeto flash do Gmail"&gt;objeto flash&lt;/a&gt; reponsável por emitir os sons do bate-papo.&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;&lt;strong&gt;canvas_frame&lt;/strong&gt;&lt;/span&gt;: é o único &lt;span class="codigo-fonte"&gt;iframe&lt;/span&gt;&amp;nbsp;que é visível pelo usuário. É nele que fica tudo o que se vê na tela.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Na figura abaixo podem ser observados os 4 elementos &lt;span class="codigo-fonte"&gt;iframe&lt;/span&gt; do Gmail no corpo da página:&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/gmail/iframes_gmail.png" alt="Iframes do Gmail" title="Iframes do Gmail" class="mceItem"&gt;&lt;/p&gt;
&lt;p&gt;Para cada operação feita no Gmail (pesquisa, paginação etc), o atributo &lt;span class="codigo-fonte"&gt;src&lt;/span&gt; do &lt;span class="codigo-fonte"&gt;iframe&lt;/span&gt; é modificado. Esse atributo indica a página carregada no &lt;span class="codigo-fonte"&gt;iframe&lt;/span&gt;. A modificação desse valor faz com que um novo código seja carregado no &lt;span class="codigo-fonte"&gt;iframe&lt;/span&gt;. 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.&lt;/p&gt;
&lt;p&gt;Na figura acima também pode ser vista a &lt;span class="codigo-fonte"&gt;div "loading"&lt;/span&gt;, 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 &lt;em&gt;&lt;a href="http://www.tableless.com.br/" title="Desenvolvimento Web com XHTML e CSS"&gt;tableless&lt;/a&gt;&lt;/em&gt;?) 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:&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/gmail/codigo-fonte-gmail.png" alt="Código-fonte do Gmail" title="Código-fonte do Gmail" width="600" height="369" class="mceItem"&gt;&lt;/p&gt;
&lt;p&gt;Bonito não? Mas o que importa é a saúde, ou seja, se funciona bem, o que no caso do Gmail é verdadeiro.&lt;/p&gt;
&lt;p&gt;O Gmail utiliza diversas outras técnicas para otimizar o desempenho, como fazer o "&lt;a href="http://www.ataraxia.com.br/posts/otimizacao-em-php-parte-1-minify" title="Artigo sobre otimização em PHP"&gt;minify&lt;/a&gt;" 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 &lt;a href="http://developer.yahoo.com/performance/rules.html" title="Best Practices for Speeding Up Your Web Site"&gt;Yahoo &lt;/a&gt;e do próprio &lt;a href="http://code.google.com/speed" title="Let's make the web faster"&gt;Google&lt;/a&gt; para deixar a aplicação mais rápida.&lt;/p&gt;
&lt;p&gt;Para saber mais sobre o funcionamento do Gmail "por baixo dos panos", há um &lt;a href="http://stanford.wikia.com/wiki/Project_1:_Gmail" title="Artigo sobre o Gmail no wiki da Universidade de Stanford"&gt;excelente artigo&lt;/a&gt; sobre isso no wiki da Universidade de Stanford.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="feedflare"&gt;
&lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=N7xdWKY8m-I:3o-60SLOEoo:yIl2AUoC8zA"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=yIl2AUoC8zA" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=N7xdWKY8m-I:3o-60SLOEoo:qj6IDK7rITs"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=qj6IDK7rITs" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=N7xdWKY8m-I:3o-60SLOEoo:V_sGLiPBpWU"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=N7xdWKY8m-I:3o-60SLOEoo:V_sGLiPBpWU" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=N7xdWKY8m-I:3o-60SLOEoo:F7zBnMyn0Lo"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=N7xdWKY8m-I:3o-60SLOEoo:F7zBnMyn0Lo" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=N7xdWKY8m-I:3o-60SLOEoo:gIN9vFwOqvQ"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=N7xdWKY8m-I:3o-60SLOEoo:gIN9vFwOqvQ" border="0"&gt;&lt;/img&gt;&lt;/a&gt;
&lt;/div&gt;&lt;img src="http://feeds.feedburner.com/~r/BlogDoCleber/~4/N7xdWKY8m-I" height="1" width="1"/&gt;</description>
 <comments>http://cleber.net.br/dissecando-o-gmail#comments</comments>
 <category domain="http://cleber.net.br/tags/css">CSS</category>
 <category domain="http://cleber.net.br/tags/disseca%C3%A7%C3%A3o">dissecação</category>
 <category domain="http://cleber.net.br/tags/e-mail">e-mail</category>
 <category domain="http://cleber.net.br/tags/gmail">Gmail</category>
 <category domain="http://cleber.net.br/tags/google">Google</category>
 <category domain="http://cleber.net.br/tags/html">HTML</category>
 <category domain="http://cleber.net.br/tags/javascript">JavaScript</category>
 <category domain="http://cleber.net.br/tags/programa%C3%A7%C3%A3o">programação</category>
 <category domain="http://cleber.net.br/tags/sites">sites</category>
 <pubDate>Wed, 17 Feb 2010 05:23:10 +0000</pubDate>
 <dc:creator>cleber</dc:creator>
 <guid isPermaLink="false">21 at http://cleber.net.br</guid>
<feedburner:origLink>http://cleber.net.br/dissecando-o-gmail</feedburner:origLink></item>
<item>
 <title>Bookmarklet para pegar um texto selecionado</title>
 <link>http://feedproxy.google.com/~r/BlogDoCleber/~3/k1QDagqVDqw/bookmarklet-para-pegar-um-texto-selecionado</link>
 <description>&lt;h3&gt;&lt;img src="/sites/default/files/images/posts/computer-animal.jpg" alt="Usuário de computador" title="Usuário de computador" style="float: right;" class="mceItem"&gt;O que é um &lt;a href="http://pt.wikipedia.org/wiki/Bookmarklet" title="Artigo na Wikipédia sobre bookmarklet"&gt;bookmarklet&lt;/a&gt;?&lt;/h3&gt;
&lt;p&gt;É um pequeno programa em JavaScript que é armazenado como uma &lt;acronym title="Uniform Resource Locator" lang="en"&gt;URL&lt;/acronym&gt; nos favoritos do navegador. Entre os usos de um &lt;em&gt;bookmarklet&lt;/em&gt; (também chamado de &lt;em&gt;favlet&lt;/em&gt; ou &lt;em&gt;favelet&lt;/em&gt;) estão:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;modificar a aparência de uma página;&lt;/li&gt;
&lt;li&gt;extrair dados de uma página;&lt;/li&gt;
&lt;li&gt;submeter um página para um serviço de validação ou tradução ou qualquer outro serviço;&lt;/li&gt;
&lt;li&gt;submeter um texto selecionado em uma página para um serviço de busca ou para qualquer outro serviço.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Para você criar um &lt;em&gt;bookmarklet &lt;/em&gt;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 &lt;em&gt;bookmarklet &lt;/em&gt;criado, é só você clicar no favorito que foi criado para executar o código, assim como você clica em qualquer outro favorito.&lt;/p&gt;
&lt;h3&gt;Exemplos&lt;/h3&gt;
&lt;p&gt;O Google disponibiliza vários bookmarks em seus serviços (para usá-los arraste o link para os seus favoritos):&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='javascript:(function(){var a=window,b=document;if(b.body){var c=a.screenLeft||a.screenX;if(c&gt;340)c-=349;else{var d=a.screen.availWidth,e=c+a.outerWidth;c=e&gt;d-331&amp;amp;&amp;c&gt;d-e-9?0:e}a.open("","__SWBM__","location=1,resizable=1,menubar=0,scrollbars=1,status=0,toolbar=0,width=340,height="+((a.outerHeight||768)-58)+",top="+(a.screenTop||a.screenY)+",left="+Math.max(1,c));var f=b.createElement("script");f.src="http://www.google.com/sidewiki/bookmarklet.js?hl=en";b.body.appendChild(f)};})()' title="Bookmarklet do Sidewiki"&gt;Sidewiki&lt;/a&gt;: abre o Sidewiki da página atual. (&lt;a href="http://www.google.com/support/toolbar/bin/answer.py?hl=pt&amp;amp;answer=164493" title="Ajuda do Bookmarklet do Sidewiki"&gt;saiba mais&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;&lt;a href="javascript:(function(){var%20d=document,l=d.location,e=encodeURIComponent,u='http://promote.orkut.com/preview?src=bkmrklt&amp;amp;v=1&amp;amp;nt=orkut.com&amp;amp;du='+e(l.href)+'&amp;amp;tt='+e(d.title),s='&amp;amp;rdrinl=1';if(!window.open(u,'','height=575,width=700,directories=0,location=1,menubar=0,resizable=0,scrollbars=1,status=1,toolbar=0'))l.href=u+s;})();" title="Botão de 'compartilhar no orkut'"&gt;Orkut&lt;/a&gt;: compartilha conteúdo pelo orkut. (&lt;a href="http://www.google.com/support/orkut/bin/answer.py?hl=pt-br&amp;amp;answer=168105" title="Ajuda do botão de 'compartilhar no orkut'"&gt;saiba mais&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;&lt;a href='javascript:(function(){var a=window,b=document,c=encodeURIComponent,d=a.open("http://www.google.com/bookmarks/mark?op=edit&amp;amp;output=popup&amp;amp;bkmk="+c(b.location)+"&amp;amp;title="+c(b.title),"bkmk_popup","left="+((a.screenX||a.screenLeft)+10)+",top="+((a.screenY||a.screenTop)+10)+",height=420px,width=550px,resizable=1,alwaysRaised=1");a.setTimeout(function(){d.focus()},300)})();' title="Favoritos do Google"&gt;Favoritos do Google&lt;/a&gt;: adiciona a página atual no serviço de &lt;a href="http://www.google.com/bookmarks/?hl=pt_BR" title="Favoritos do Google"&gt;favoritos&lt;/a&gt; do Google. (&lt;a href="http://www.google.com/support/chrome/bin/answer.py?hl=pt_BR&amp;amp;answer=100215" title="Ajuda do bookmarklet dos Favoritos do Google"&gt;saiba mais&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;&lt;a href="javascript:popw='';Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) {Q=y.getSelection();} else if (x.getSelection) {Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&amp;amp;u=' + escape(location.href) + '&amp;amp;n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes');if (!document.all) T = setTimeout('popw.focus()',50);void(0);" title="Bookmarklet BlogThis!"&gt;BlogThis!&lt;/a&gt;: cria uma postagem no &lt;a href="http://www.blogger.com/" title="Blogger"&gt;Blogger&lt;/a&gt; com um link da página atual. (&lt;a href="http://www.google.com/support/blogger/bin/answer.py?hl=pt_BR&amp;amp;answer=41469" title="Ajuda do BlogThis!"&gt;saiba mais&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;&lt;a href="javascript:var t=((window.getSelection&amp;amp;&amp;window.getSelection())||(document.getSelection&amp;amp;&amp;document.getSelection())||(document.selection&amp;amp;&amp;document.selection.createRange&amp;amp;&amp;document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com.br/?text='+t+'&amp;amp;hl=pt-BR&amp;amp;langpair=auto|pt&amp;amp;tbb=1&amp;amp;ie='+e;}else{location.href='http://translate.google.com.br/translate?u='+escape(location.href)+'&amp;amp;hl=pt-BR&amp;amp;langpair=auto|pt&amp;amp;tbb=1&amp;amp;ie='+e;};&amp;quot; onclick=&amp;quot;alert(document.getElementById('instructions').firstChild.nodeValue);return false;" title="Bookmarklet para traduzir para o português"&gt;Traduzir&lt;/a&gt;: traduz o texto selecionado ou uma página inteira para o português. (&lt;a href="http://translate.google.com/translate_buttons" title="Bookmarklets de tradução do Google"&gt;saiba mais&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Vou usar o exemplo do &lt;em&gt;bookmarklet&lt;/em&gt; de tradução do Google para criar um &lt;em&gt;bookmarklet&lt;/em&gt; que faça uma busca neste &lt;a href="http://cleber.net.br" title="Blog do Cleber"&gt;blog&lt;/a&gt; com o texto selecionado em uma página.&lt;/p&gt;
&lt;p&gt;O código JavaScript do &lt;em&gt;bookmarklet&lt;/em&gt; que faz a tradução usando o serviço do Google é o seguinte:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;var t = ((window.getSelection &amp;amp;&amp;amp; window.getSelection()) || (document.getSelection &amp;amp;&amp;amp; document.getSelection()) || (document.selection &amp;amp;&amp;amp; document.selection.createRange &amp;amp;&amp;amp; document.selection.createRange().text));&lt;br&gt;var e = (document.charset || document.characterSet);&lt;br&gt;if (t != '') {&lt;br&gt;&lt;span style="white-space: pre;"&gt;	&lt;/span&gt;location.href = 'http://translate.google.com.br/translate_t?text=' + t + '&amp;amp;hl=pt-BR&amp;amp;langpair=auto|pt&amp;amp;tbb=1&amp;amp;ie=' + e;&lt;br&gt;} else {&lt;br&gt;&lt;span style="white-space: pre;"&gt;	&lt;/span&gt;location.href = 'http://translate.google.com.br/translate?u=' + escape(location.href) + '&amp;amp;hl=pt-BR&amp;amp;langpair=auto|pt&amp;amp;tbb=1&amp;amp;ie=' + e;&lt;br&gt;};&lt;/p&gt;
&lt;p&gt;Em primeiro lugar, o programa tenta pegar o texto que está selecionado e armazená-lo na variável &lt;span class="codigo-fonte"&gt;t&lt;/span&gt;:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;var t = ((window.getSelection &amp;amp;&amp;amp; window.getSelection()) || (document.getSelection &amp;amp;&amp;amp; document.getSelection()) || (document.selection &amp;amp;&amp;amp; document.selection.createRange &amp;amp;&amp;amp; document.selection.createRange().text));&lt;/p&gt;
&lt;p&gt;Em seguida, ele armazena o &lt;em&gt;&lt;a href="http://pt.wikipedia.org/wiki/Codifica%C3%A7%C3%A3o" title="Artigo na Wikipédia sobre codificação"&gt;encoding&lt;/a&gt;&lt;/em&gt; de caracteres da página na variável &lt;span class="codigo-fonte"&gt;e&lt;/span&gt;:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;var e = (document.charset || document.characterSet);&lt;/p&gt;
&lt;p&gt;E por último ele faz uma verificação: se algum texto foi selecionado, o valor das variáveis &lt;span class="codigo-fonte"&gt;t&lt;/span&gt; e &lt;span class="codigo-fonte"&gt;e&lt;/span&gt; são passados com parâmetros na URL de tradução que será carregada.&amp;nbsp;Se nenhum texto foi selecionado, a URL da página atual (&lt;span class="codigo-fonte"&gt;location.href&lt;/span&gt;) será passada como parâmetro:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;if (t != '') {&lt;br&gt;&lt;span style="color: #000000; font-size: 12px;"&gt;&lt;span style="font-size: 13px; color: #494949; white-space: pre;"&gt;	&lt;/span&gt;location.href = 'http://translate.google.com.br/translate_t?text=' + t + '&amp;amp;hl=pt-BR&amp;amp;langpair=auto|pt&amp;amp;tbb=1&amp;amp;ie=' + e;&lt;br&gt;} else {&lt;br&gt;&lt;span style="font-size: 13px; color: #494949; white-space: pre;"&gt;	&lt;/span&gt;location.href = 'http://translate.google.com.br/translate?u=' + escape(location.href) + '&amp;amp;hl=pt-BR&amp;amp;langpair=auto|pt&amp;amp;tbb=1&amp;amp;ie=' + e;&lt;br&gt;};&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;As URLs do serviço de tradução do Google são:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;http://translate.google.com.br/translate_t&lt;/span&gt;: para traduzir textos&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;http://translate.google.com.br/translate&lt;/span&gt;: para traduzir páginas inteiras&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;E os parâmetros que devem ser passados são:&lt;/div&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;text&lt;/span&gt;: o texto a ser traduzido;&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;u&lt;/span&gt;: a URL a ser traduzida;&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;hl&lt;/span&gt;: o idioma da interface (&lt;em&gt;host language&lt;/em&gt;);&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;langpair&lt;/span&gt;: o par de linguagens que será usado para a tradução. No exemplo é usado &lt;span class="codigo-fonte"&gt;auto|pt&lt;/span&gt;, ou seja detecta o idioma de origem automaticamente e traduz para o português;&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;ie&lt;/span&gt;: encoding da página.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;p&gt;Vamos criar agora o &lt;em&gt;bookmarklet &lt;/em&gt;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á:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;http://cleber.net.br/search/node/&lt;strong&gt;[parametro]&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;E no caso de nenhum texto estar selecionado, será exibido uma caixa de diálogo pedindo algum texto:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;var t = ((window.getSelection &amp;amp;&amp;amp; window.getSelection()) || (document.getSelection &amp;amp;&amp;amp; document.getSelection()) || (document.selection &amp;amp;&amp;amp; document.selection.createRange &amp;amp;&amp;amp; document.selection.createRange().text));&lt;br&gt;if (t != '') {&lt;br&gt;&lt;span style="white-space: pre;"&gt;	&lt;/span&gt;location.href = 'http://cleber.net.br/search/node/' + t;&lt;br&gt;} else {&lt;br&gt;&lt;span style="white-space: pre;"&gt;	&lt;/span&gt;t = prompt('Era para você selecionar um texto errr! Agora digite um abaixo:', '');&lt;br&gt;&lt;span style="white-space: pre;"&gt;	&lt;/span&gt;if (t &amp;amp;&amp;amp; t != '') {&lt;br&gt;&lt;span style="white-space: pre;"&gt;		&lt;/span&gt;location.href = 'http://cleber.net.br/search/node/' + t;&lt;br&gt;&lt;span style="white-space: pre;"&gt;	&lt;/span&gt;} else {&lt;br&gt;&lt;span style="white-space: pre;"&gt;		&lt;/span&gt;alert('Desisto!');&lt;br&gt;&lt;span style="white-space: pre;"&gt;	&lt;/span&gt;}&lt;br&gt;};&lt;/p&gt;
&lt;p&gt;Para utilizar este &lt;em&gt;bookmarklet&lt;/em&gt;, arraste o botão abaixo para a sua barra de favoritos. Depois em qualquer página que você estiver é só clicar nele.&lt;/p&gt;
&lt;p&gt;&lt;a href="javascript:var t = ((window.getSelection &amp;amp;&amp; window.getSelection()) || (document.getSelection &amp;amp;&amp; document.getSelection()) || (document.selection &amp;amp;&amp; document.selection.createRange &amp;amp;&amp; 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 &amp;amp;&amp; t != '') { 		location.href = 'http://cleber.net.br/search/node/' + t; 	} else { 		alert('Desisto!'); 	} };" title="Bookmarklet para pesquisa em cleber.net.br" style="font-size: 14px; font-weight: bold; color: #3366cc; text-decoration: none; background-color: #e5ecf9; display: block; width: 190px; height: 17px; border: 1px solid #3366cc; padding: 3px; margin: auto;"&gt;Buscar em cleber.net.br&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Abaixo alguns links com diretórios de &lt;em&gt;bookmarklets&lt;/em&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="http://www.marklets.com/bookmarklets/"&gt;http://www.marklets.com/bookmarklets/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.bookmarklets.com/tools/categor.html"&gt;http://www.bookmarklets.com/tools/categor.html&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.squarefree.com/bookmarklets/"&gt;https://www.squarefree.com/bookmarklets/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;div class="feedflare"&gt;
&lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=k1QDagqVDqw:DS1-tF3oJfE:yIl2AUoC8zA"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=yIl2AUoC8zA" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=k1QDagqVDqw:DS1-tF3oJfE:qj6IDK7rITs"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=qj6IDK7rITs" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=k1QDagqVDqw:DS1-tF3oJfE:V_sGLiPBpWU"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=k1QDagqVDqw:DS1-tF3oJfE:V_sGLiPBpWU" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=k1QDagqVDqw:DS1-tF3oJfE:F7zBnMyn0Lo"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=k1QDagqVDqw:DS1-tF3oJfE:F7zBnMyn0Lo" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=k1QDagqVDqw:DS1-tF3oJfE:gIN9vFwOqvQ"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=k1QDagqVDqw:DS1-tF3oJfE:gIN9vFwOqvQ" border="0"&gt;&lt;/img&gt;&lt;/a&gt;
&lt;/div&gt;&lt;img src="http://feeds.feedburner.com/~r/BlogDoCleber/~4/k1QDagqVDqw" height="1" width="1"/&gt;</description>
 <comments>http://cleber.net.br/bookmarklet-para-pegar-um-texto-selecionado#comments</comments>
 <category domain="http://cleber.net.br/tags/bookmarklet">bookmarklet</category>
 <category domain="http://cleber.net.br/tags/c%C3%B3digo-fonte">código-fonte</category>
 <category domain="http://cleber.net.br/tags/dica">dica</category>
 <category domain="http://cleber.net.br/tags/javascript">JavaScript</category>
 <category domain="http://cleber.net.br/tags/programa%C3%A7%C3%A3o">programação</category>
 <pubDate>Fri, 25 Dec 2009 15:59:17 +0000</pubDate>
 <dc:creator>cleber</dc:creator>
 <guid isPermaLink="false">17 at http://cleber.net.br</guid>
<feedburner:origLink>http://cleber.net.br/bookmarklet-para-pegar-um-texto-selecionado</feedburner:origLink></item>
<item>
 <title>Exibir o favicon de qualquer site</title>
 <link>http://feedproxy.google.com/~r/BlogDoCleber/~3/MS_tksNMHAM/exibir-o-favicon-de-qualquer-site</link>
 <description>&lt;p&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/favicons.jpg" alt="Favicons" title="Favicons" width="150" height="96" style="float: left;" class="mceItem"&gt;Qualquer site que se preze possui um &lt;em&gt;favicon&lt;/em&gt;, abreviação do inglês &lt;em&gt;favorites icon&lt;/em&gt;, ou ícone dos favoritos, que nada mais é do que uma imagem (ou ícone) associada a um site. &lt;a href="http://www.google.com.br/search?q=favicon+generator" title="Serviços para geração de favicon"&gt;Criar um &lt;/a&gt;&lt;em&gt;&lt;a href="http://www.google.com.br/search?q=favicon+generator" title="Serviços para geração de favicon"&gt;favicon&lt;/a&gt;&lt;/em&gt;&amp;nbsp;é fácil. Por isso é interessante colocar o &lt;em&gt;favicon&lt;/em&gt; de um site junto com o seu link. Muitos serviços já fazem isso, como o &lt;a href="http://www.google.com.br/profiles/clrech" title="Meu perfil no Google Profile"&gt;Google Profile&lt;/a&gt;, que exibe os &lt;em&gt;favicons&lt;/em&gt; dos links associados ao perfil.&lt;/p&gt;
&lt;h3&gt;&lt;a name="metodos_favicon" class="mceItem"&gt;&lt;/a&gt;Métodos para inserir um favicon&lt;/h3&gt;
&lt;p&gt;O significado original da definição de um &lt;em&gt;favicon &lt;/em&gt;surgiu com o &lt;a href="http://desciclo.pedia.ws/wiki/Microsoft_Internet_Explorer" title="Informações sobre o Internet Explorer"&gt;Internet Explorer 4&lt;/a&gt; e consistia em colocar um arquivo chamado &lt;span class="codigo-fonte"&gt;favicon.ico&lt;/span&gt; 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 &lt;a href="http://en.wikipedia.org/wiki/ICO_(file_format)" title="Informações sobre o formato ICO"&gt;ICO&lt;/a&gt; do Windows.&lt;/p&gt;
&lt;p&gt;Como não existe um método padrão para incluir uma imagem em uma página como um &lt;em&gt;favicon&lt;/em&gt;, muitos programadores utilizam mais de um método ao mesmo tempo. São basicamente três maneiras:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Usar a &lt;em&gt;meta tag&lt;/em&gt; &lt;span class="codigo-fonte"&gt;&amp;lt;link rel="icon" type="image/png" href="http://exemplo.com.br/icone.png"&amp;gt;&lt;/span&gt; no cabeçalho da página. Esse é o &lt;a href="http://www.w3.org/2005/10/howto-favicon" title="Site da W3C com os métodos para adicionar um favicon"&gt;método&lt;/a&gt;&amp;nbsp;recomendado pela &lt;abbr title="World Wide Web Consortium" lang="en"&gt;W3C&lt;/abbr&gt;.&lt;/li&gt;
&lt;li&gt;Usar a &lt;em&gt;meta tag&lt;/em&gt; &lt;span class="codigo-fonte"&gt;&amp;lt;link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /&amp;gt;&lt;/span&gt; no cabeçalho da página. Esse é o método mais usado e é reconhecido pela maioria dos navegadores.&lt;/li&gt;
&lt;li&gt;Colocar o &lt;em&gt;favicon&lt;/em&gt; como um arquivo chamado &lt;span class="codigo-fonte"&gt;favicon.ico&lt;/span&gt;&amp;nbsp;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.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Jeito Google de ser&lt;/h3&gt;
&lt;p&gt;Por falta de um padrão, não existe uma forma fácil de se exibir o &lt;em&gt;favicon &lt;/em&gt;de qualquer site. O &lt;a href="http://googlediscovery.com/2009/02/25/google-shared-stuff-sera-descontinuado/" title="Notícia sobre a morte do Google Shared Stuff"&gt;falecido&lt;/a&gt; serviço &lt;a href="http://www.google.com/s2/sharing/stuff" title="Antigo link do Google Shared Stuff"&gt;Google Shared Stuff&lt;/a&gt; (S2) não existe mais, mas deixou uma herança: uma &lt;acronym title="Uniform Resource Locator" lang="en"&gt;URL&lt;/acronym&gt; que permite recuperar o &lt;em&gt;favicon &lt;/em&gt;dos sites. A URL retorna uma imagem no formato &lt;acronym title="Portable Network Graphics"&gt;PNG&lt;/acronym&gt; com tamanho 16x16 e que pode ser exibida via &lt;acronym title="HyperText Markup Language" lang="en"&gt;HTML&lt;/acronym&gt; usando a &lt;em&gt;tag&lt;/em&gt; &lt;span class="codigo-fonte"&gt;img&lt;/span&gt;, no seguinte formato:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;http://www.google.com/s2/favicons?domain=[url]&lt;/p&gt;
&lt;p&gt;Onde&amp;nbsp;&lt;span class="codigo-fonte"&gt;[url]&lt;/span&gt;&amp;nbsp;deve ser substituído pela URL do site do qual se deseja pegar o &lt;em&gt;favicon&lt;/em&gt;. Por exemplo, veja o seguinte código HTML:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;&amp;lt;img src="&lt;a href="http://www.google.com/s2/favicons?domain=g1.com.br" title="Favicon do g1.com.br"&gt;http://www.google.com/s2/favicons?domain=g1.com.br&lt;/a&gt;" height="16" width="16" /&amp;gt;&lt;/p&gt;
&lt;p&gt;O resultado visto no navegador será a seguinte imagem: &lt;img src="http://www.google.com/s2/favicons?domain=g1.com.br" alt="Favicon" title="Favicon do site g1.com.br" width="16" height="16" class="mceItem inline"&gt;&lt;/p&gt;
&lt;p&gt;Mas existe um problema&amp;nbsp;&lt;em&gt;(&lt;/em&gt;&lt;em&gt;Google fail&lt;/em&gt;)&amp;nbsp;nessa URL do Google: ela só funciona quando o nome do arquivo for &lt;span class="codigo-fonte"&gt;favicon.ico&lt;/span&gt;.&amp;nbsp;Mas muitos sites utilizam outros métodos para inserir o &lt;em&gt;favicon&lt;/em&gt;. Então, quando a URL do Google não acha o arquivo &lt;span class="codigo-fonte"&gt;favicon.ico&lt;/span&gt;, ela exibe uma imagem &lt;acronym title="Graphics Interchange Format" lang="en"&gt;GIF&lt;/acronym&gt; do &lt;a href="http://pt.wikipedia.org/wiki/Terra" title="Saiba mais sobre o nosso planeta"&gt;planeta Terra&lt;/a&gt;. Por exemplo, o site &lt;a href="http://www.md.utfpr.edu.br/" title="Universidade Tecnológica Federal do Paraná - Campus Medianeira"&gt;www.md.utfpr.edu.br&lt;/a&gt; não possui um arquivo chamado &lt;span class="codigo-fonte"&gt;favicon.ico&lt;/span&gt; na sua raíz, então a seguinte imagem será exibida:&amp;nbsp;&lt;img src="http://www.google.com/s2/favicons?domain=www.md.utfpr.edu.br" alt="Favicon" title="Favicon do site cleber.net.br" width="16" height="16" class="mceItem inline"&gt;. Passando o parâmetro &lt;span class="codigo-fonte"&gt;&amp;amp;alt=feed&lt;/span&gt; junto com a URL, será exibida a imagem padrão dos &lt;em&gt;feeds &lt;/em&gt;RSS caso não seja encontrado o &lt;em&gt;favicon&lt;/em&gt;. Por exemplo, a URL&amp;nbsp;&lt;a href="http://s2.googleusercontent.com/s2/favicons?domain=www.md.utfpr.edu.br&amp;amp;alt=feed" title="Favicon de www.md.utfpr.edu.br"&gt;http://s2.googleusercontent.com/s2/favicons?domain=www.md.utfpr.edu.br&amp;amp;alt=feed&lt;/a&gt;&amp;nbsp;retorna a seguinte imagem: &lt;img src="http://s2.googleusercontent.com/s2/favicons?domain=www.md.utfpr.edu.br&amp;amp;alt=feed" alt="Favicon" title="Favicon de www.md.utfpr.edu.br" width="16" height="16" class="inline mceItem"&gt;&lt;/p&gt;
&lt;p&gt;Apesar de não ser o melhor, &lt;a href="http://www.google.com/codesearch?q=%22s2/favicons%3Fdomain%22&amp;amp;hl=pt-BR&amp;amp;btnG=Pesquisar+c%C3%B3digo" title="Projetos utilizando a URL do Google"&gt;muitos projetos&lt;/a&gt; utilizam essa URL.&amp;nbsp;Você pode testar o serviço aqui, colocando a URL de um site (ex.: cleber.net.br)&lt;/p&gt;
&lt;form action="http://www.google.com/s2/favicons" enctype="text/plain" method="get"&gt;&lt;input name="domain" size="50" type="text"&gt;&amp;nbsp;&lt;input type="submit" value="Pegar o favicon"&gt;&lt;/form&gt;
&lt;h3&gt;getfavicon.org&lt;/h3&gt;
&lt;p&gt;O site &lt;a href="http://www.getfavicon.org/" title="getfavicon.org"&gt;getfavicon.org&lt;/a&gt;&amp;nbsp;possui um serviço melhorado.&amp;nbsp;Ele&amp;nbsp;&lt;a href="http://www.getfavicon.org/results.php?url=cleber.net.br" title="Lista de métodos usado para inserir o favicon no site cleber.net.br"&gt;lista&lt;/a&gt; todos os métodos usados em um site para inserir um&amp;nbsp;&lt;em&gt;favicon&lt;/em&gt;&amp;nbsp;e permite várias configurações de exibição, usando a seguinte URL:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;http://www.getfavicon.org/?url=[url]/[nome].[extensao]&lt;/p&gt;
&lt;p&gt;Onde:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;[url]&lt;/span&gt;: a URL do site&amp;nbsp;do site do qual se deseja pegar o &lt;em&gt;favicon&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;[nome]&lt;/span&gt;: um nome qualquer para o arquivo&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte"&gt;[extensao]&lt;/span&gt;: formato da imagem que será gerada. Pode ser &lt;span class="codigo-fonte"&gt;png&lt;/span&gt;, &lt;span class="codigo-fonte"&gt;gif&lt;/span&gt;, &lt;span class="codigo-fonte"&gt;jpg&lt;/span&gt; ou &lt;span class="codigo-fonte"&gt;ico&lt;/span&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;A imagem gerada possui resolução padrão de 16x16. É possível definir uma resolução para a imagem, usando a URL&amp;nbsp;&lt;span class="codigo-fonte"&gt;http://www.getfavicon.org/?url=[url]/[nome].[resolucao].[extensao]&lt;/span&gt;, onde &lt;span class="codigo-fonte"&gt;[resolução]&lt;/span&gt; deve ser substituído pelo valor (no máximo 128).&lt;/p&gt;
&lt;p&gt;Você pode testar o serviço aqui, colocando a URL de um site (ex.: cleber.net.br).
&lt;/p&gt;
&lt;form action="http://www.getfavicon.org/submit.php" enctype="text/plain" method="get"&gt;
&lt;input name="url" size="50" type="text"&gt;&amp;nbsp;&lt;input type="submit" value="Pegar o favicon"&gt;&lt;br /&gt;
&lt;/form&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Veja alguns exemplos:&lt;/p&gt;
&lt;table border="0" summary="Exemplos de favicons gerados"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img src="http://www.getfavicon.org/?url=cleber.net.br/favicon.png" alt="Favicon" title="PNG 16x16" width="16" height="16" style="border: 0px none initial;" class="mceItem"&gt;&lt;/td&gt;
&lt;td&gt;PNG:&amp;nbsp;&lt;a href="http://www.getfavicon.org/?url=cleber.net.br/favicon.png" style="color: #027ac6; text-decoration: none;"&gt;http://www.getfavicon.org/?url=cleber.net.br/favicon.png&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img src="http://www.getfavicon.org/?url=cleber.net.br/favicon.jpg" alt="Favicon" title="JPG 16x16" width="16" height="16" style="border: 0px none initial;" class="mceItem"&gt;&lt;/td&gt;
&lt;td&gt;JPG:&amp;nbsp;&lt;a href="http://www.getfavicon.org/?url=cleber.net.br/favicon.jpg" style="color: #027ac6; text-decoration: none;"&gt;http://www.getfavicon.org/?url=cleber.net.br/favicon.jpg&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img src="http://www.getfavicon.org/?url=cleber.net.br/favicon.25.gif" alt="Favicon" title="GIF 25x25" width="25" height="25" style="border: 0px none initial;" class="mceItem"&gt;&lt;/td&gt;
&lt;td&gt;GIF 25x25:&amp;nbsp;&lt;a href="http://www.getfavicon.org/?url=cleber.net.br/favicon.25.gif" style="color: #027ac6; text-decoration: none;"&gt;http://www.getfavicon.org/?url=cleber.net.br/favicon.25.gif&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img src="http://www.getfavicon.org/?url=cleber.net.br/favicon.32.png" alt="Favicon" title="PNG 32x32" width="32" height="32" style="border: 0px none initial;" class="mceItem"&gt;&lt;/td&gt;
&lt;td&gt;PNG 32x32:&amp;nbsp;&lt;a href="http://www.getfavicon.org/?url=cleber.net.br/favicon.32.png" style="color: #027ac6; text-decoration: none;"&gt;http://www.getfavicon.org/?url=cleber.net.br/favicon.32.png&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p style="text-align: center;"&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/favicons-cleber-net-br.png" alt="Lista de favicons" title="Lista de favicons para do site cleber.net.br" width="450" height="437" class="mceItem"&gt;&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;em&gt;Lista de favicons para do site cleber.net.br&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;getfavicon.appspot.com&lt;/h3&gt;
&lt;p&gt;Esse &lt;a href="http://getfavicon.appspot.com/" title="getfavicon.appspot.com"&gt;site&lt;/a&gt;, construído usando o &lt;a href="http://code.google.com/intl/pt-BR/appengine/" title="Site do Google App Engine"&gt;Google App Engine&lt;/a&gt;, é o mais inteligente. Ele recupera o &lt;em&gt;favicon &lt;/em&gt;fazendo uma busca também na &lt;em&gt;tag &lt;/em&gt;&lt;span class="codigo-fonte"&gt;link&lt;/span&gt; do cabeçalho. A URL deve ser usada no seguinte formato:&lt;/p&gt;
&lt;p class="codigo-fonte"&gt;http://getfavicon.appspot.com/[url]&lt;/p&gt;
&lt;p&gt;Onde &lt;span class="codigo-fonte"&gt;[url]&lt;/span&gt; é a URL completa do site, incluindo os protocolos &lt;acronym title="HyperText Transfer Protocol" lang="en"&gt;HTTP&lt;/acronym&gt; ou &lt;acronym title="HyperText Transfer Protocol Secure"&gt;HTTPS&lt;/acronym&gt;. Por exemplo, o &lt;em&gt;favicon&lt;/em&gt; do site&amp;nbsp;&lt;a href="http://www.md.utfpr.edu.br/" title="Universidade Tecnológica Federal do Paraná - Campus Medianeira"&gt;www.md.utfpr.edu.br&lt;/a&gt;, que nos serviços anteriores não era encontrado, pode ser exibido usando a URL&amp;nbsp;&lt;a href="http://getfavicon.appspot.com/http://www.md.utfpr.edu.br" title="Favicon de www.md.utfpr.edu.br"&gt;http://getfavicon.appspot.com/http://www.md.utfpr.edu.br&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Veja o favicon: &lt;img src="http://getfavicon.appspot.com/http://www.md.utfpr.edu.br" alt="Favicon" title="Favicon de www.md.utfpr.edu.br" width="48" height="48" class="inline mceItem"&gt;&lt;/p&gt;
&lt;p&gt;Você pode testar o serviço aqui, colocando a URL completa de um site (ex.: &lt;a href="http://cleber.net.br" title="http://cleber.net.br"&gt;http://cleber.net.br&lt;/a&gt;).&lt;/p&gt;
&lt;form action="http://getfavicon.appspot.com/_do" method="get"&gt;
&lt;input name="url" size="50" type="text"&gt;&amp;nbsp;&lt;input type="submit" value="Pegar o favicon"&gt;&lt;br /&gt;
&lt;/form&gt;&lt;div class="feedflare"&gt;
&lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=MS_tksNMHAM:gPTQN0-M3sU:yIl2AUoC8zA"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=yIl2AUoC8zA" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=MS_tksNMHAM:gPTQN0-M3sU:qj6IDK7rITs"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=qj6IDK7rITs" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=MS_tksNMHAM:gPTQN0-M3sU:V_sGLiPBpWU"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=MS_tksNMHAM:gPTQN0-M3sU:V_sGLiPBpWU" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=MS_tksNMHAM:gPTQN0-M3sU:F7zBnMyn0Lo"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=MS_tksNMHAM:gPTQN0-M3sU:F7zBnMyn0Lo" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=MS_tksNMHAM:gPTQN0-M3sU:gIN9vFwOqvQ"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=MS_tksNMHAM:gPTQN0-M3sU:gIN9vFwOqvQ" border="0"&gt;&lt;/img&gt;&lt;/a&gt;
&lt;/div&gt;&lt;img src="http://feeds.feedburner.com/~r/BlogDoCleber/~4/MS_tksNMHAM" height="1" width="1"/&gt;</description>
 <comments>http://cleber.net.br/exibir-o-favicon-de-qualquer-site#comments</comments>
 <category domain="http://cleber.net.br/tags/c%C3%B3digo-fonte">código-fonte</category>
 <category domain="http://cleber.net.br/tags/dica">dica</category>
 <category domain="http://cleber.net.br/tags/favicon">favicon</category>
 <category domain="http://cleber.net.br/tags/ferramenta">ferramenta</category>
 <category domain="http://cleber.net.br/tags/website">website</category>
 <pubDate>Wed, 25 Nov 2009 18:08:25 +0000</pubDate>
 <dc:creator>cleber</dc:creator>
 <guid isPermaLink="false">11 at http://cleber.net.br</guid>
<feedburner:origLink>http://cleber.net.br/exibir-o-favicon-de-qualquer-site</feedburner:origLink></item>
<item>
 <title>CSS Sprite</title>
 <link>http://feedproxy.google.com/~r/BlogDoCleber/~3/-a8Xy0yHwz8/css-sprite</link>
 <description>&lt;p&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/sprite.jpg" alt="Sprite" title="Sprite" width="100" height="190" style="float: right;" class="mceItem"&gt;Uma técnica muito utilizada em  websites e sistemas web para diminuir o tráfego de banda e  otimizar o desempenho é o &lt;em&gt;CSS Sprite&lt;/em&gt;. A técnica consiste em juntar  várias imagens em uma imagem só e utilizar os recursos do &lt;acronym title="Cascading Style Sheets"&gt;CSS&lt;/acronym&gt; 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.&lt;/p&gt;
&lt;p&gt;As propriedades do CSS responsáveis pela mágica são  basicamente as seguintes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span class="codigo-fonte" style="color: #000000; font-family: sans-serif;"&gt;background-image&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span class="codigo-fonte" style="color: #000000; font-family: sans-serif;"&gt;background-position&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Com &lt;span class="codigo-fonte"&gt;background-image&lt;/span&gt; você define a imagem e com o &lt;span class="codigo-fonte"&gt;background-position&lt;/span&gt; você indica qual parte da imagem deve aparecer.&amp;nbsp;&lt;a href="http://www.google.com.br/search?hl=pt-BR&amp;amp;q=css+sprite&amp;amp;meta=lr%3Dlang_pt&amp;amp;aq=f&amp;amp;oq="&gt;Vários tutoriais&lt;/a&gt; explicam melhor como utilizar a técnica e existem até &lt;a href="http://www.google.com.br/search?hl=pt-BR&amp;amp;q=css+sprite+generator"&gt;geradores&lt;/a&gt; de imagem e classes CSS.&lt;/p&gt;
&lt;p&gt;No seu site de busca, o Google utiliza uma imagem  no formato PNG chamada de &lt;span class="codigo-fonte"&gt;nav_logo.png&lt;/span&gt; (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 &lt;span class="codigo-fonte"&gt;www.google.com.br/images&lt;/span&gt;. Confira todas as versões:&lt;/p&gt;
&lt;table style="width: 100%;" border="0"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo2.png"&gt;nav_logo2.png&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo3.png"&gt;nav_logo3.png&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo4.png"&gt;nav_logo4.png&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo2.png"&gt;&lt;img src="http://www.google.com.br/images/nav_logo2.png" alt="nav_logo2.png" title="nav_logo2.png" class="mceItem"&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo.png"&gt;&lt;img src="http://www.google.com.br/images/nav_logo3.png" alt="nav_logo3.png" title="nav_logo3.png" class="mceItem"&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo4.png"&gt;&lt;img src="http://www.google.com.br/images/nav_logo4.png" alt="nav_logo4.png" title="nav_logo4.png" class="mceItem"&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo5.png"&gt;nav_logo5.png&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo6.png"&gt;nav_logo6.png&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo7.png"&gt;nav_logo7.png&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo5.png"&gt;&lt;img src="http://www.google.com.br/images/nav_logo5.png" alt="nav_logo5.png" title="nav_logo5.png" class="mceItem"&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo6.png"&gt;&lt;img src="http://www.google.com.br/images/nav_logo6.png" alt="nav_logo6.png" title="nav_logo6.png" class="mceItem"&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="http://www.google.com.br/images/nav_logo7.png"&gt;&lt;img src="http://www.google.com.br/images/nav_logo7.png" alt="nav_logo7.png" title="nav_logo7.png" class="mceItem"&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Um detalhe é que todas as imagens trazem o botão do &lt;a href="http://checkout.google.com"&gt;Google Checkout&lt;/a&gt;,  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&amp;nbsp;5,27 KB, aproximadamente &lt;a href="http://cleber.net.br/sites/default/files/images/posts/nav_logo7_google_checkout.png" title="Logo do Google Checkout que faz parte do arquivo nav_logo7.png"&gt;4,45 KB&lt;/a&gt; são utilizados pela imagem do  botão. O tempo de vida da imagem no cache do navegador (&lt;em&gt;max-age&lt;/em&gt;) é de  um ano (3153600 segundos). O Brasil tem &lt;a href="http://idgnow.uol.com.br/internet/2009/08/20/numero-de-internautas-no-brasil-cresce-10-em-um-mes-aponta-ibope/" title="Número de internautas no Brasil cresce 10% em um mês, aponta Ibope"&gt;33 milhões de internautas&lt;/a&gt;&lt;a href="http://idgnow.uol.com.br/internet/2009/08/20/numero-de-internautas-no-brasil-cresce-10-em-um-mes-aponta-ibope/"&gt;&lt;/a&gt; e a maioria usa o Google como ferramenta de busca. Conclusão: o Google desperdiça por ano &lt;a href="http://www.google.com.br/search?hl=pt-BR&amp;amp;rlz=1B3GGGL_pt-BRBR256BR256&amp;amp;q=%284%2C45+*+33000000+kilobytes%29+in+gigabytes&amp;amp;btnG=Pesquisar&amp;amp;meta=&amp;amp;aq=f&amp;amp;oq="&gt;&lt;strong&gt;140 GB&lt;/strong&gt;&lt;/a&gt; em  tráfego de banda por causa de apenas uma imagem! Para o Google, isso não é nada. Afinal, o YouTube  &lt;a href="http://www.adnews.com.br/internet.php?id=86633" title="Google perde US$ 470 milhões por causa do YouTube"&gt;gasta US$ 399 milhões&lt;/a&gt; com tráfego de banda e os seus lucros não conseguem cobrir esse valor.&lt;/p&gt;&lt;div class="feedflare"&gt;
&lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=-a8Xy0yHwz8:mXBNV5fGuII:yIl2AUoC8zA"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=yIl2AUoC8zA" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=-a8Xy0yHwz8:mXBNV5fGuII:qj6IDK7rITs"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=qj6IDK7rITs" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=-a8Xy0yHwz8:mXBNV5fGuII:V_sGLiPBpWU"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=-a8Xy0yHwz8:mXBNV5fGuII:V_sGLiPBpWU" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=-a8Xy0yHwz8:mXBNV5fGuII:F7zBnMyn0Lo"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=-a8Xy0yHwz8:mXBNV5fGuII:F7zBnMyn0Lo" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=-a8Xy0yHwz8:mXBNV5fGuII:gIN9vFwOqvQ"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=-a8Xy0yHwz8:mXBNV5fGuII:gIN9vFwOqvQ" border="0"&gt;&lt;/img&gt;&lt;/a&gt;
&lt;/div&gt;&lt;img src="http://feeds.feedburner.com/~r/BlogDoCleber/~4/-a8Xy0yHwz8" height="1" width="1"/&gt;</description>
 <comments>http://cleber.net.br/css-sprite#comments</comments>
 <category domain="http://cleber.net.br/tags/an%C3%A1lise">análise</category>
 <category domain="http://cleber.net.br/tags/css">CSS</category>
 <category domain="http://cleber.net.br/tags/google">Google</category>
 <category domain="http://cleber.net.br/tags/tecnologia">tecnologia</category>
 <pubDate>Sat, 31 Oct 2009 01:30:01 +0000</pubDate>
 <dc:creator>cleber</dc:creator>
 <guid isPermaLink="false">10 at http://cleber.net.br</guid>
<feedburner:origLink>http://cleber.net.br/css-sprite</feedburner:origLink></item>
<item>
 <title>Site da Casa Branca utilizando o Drupal</title>
 <link>http://feedproxy.google.com/~r/BlogDoCleber/~3/mddNDy4SD70/site-da-casa-branca-utilizando-o-drupal</link>
 <description>&lt;p&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/casa-branca.jpg" alt="Casa Branca" title="Casa Branca" width="200" height="160" style="float: right;" class="mceItem"&gt;Durante o governo de George Bush, o &lt;a href="http://whitehouse.gov/"&gt;site oficial&lt;/a&gt; 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 &lt;a href="http://www.gdit.com/"&gt;GDIT (General Dynamics Information Technology)&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;A transição foi feita por quatro empresas, entre elas a&amp;nbsp;&lt;a href="http://acquia.com/"&gt;Acquia&lt;/a&gt;, fundada por &lt;a href="http://buytaert.net/"&gt;Dries Buytaert&lt;/a&gt;, 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 &lt;a href="http://lucene.apache.org/solr/"&gt;Apache Solr&lt;/a&gt;, que é baseado na biblioteca Java &lt;a href="http://lucene.apache.org/java/"&gt;Lucene&lt;/a&gt;.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/site-casa-branca.jpg" alt="Site da Casa Branca" title="Site da Casa Branca" class="mceItem"&gt;&lt;/p&gt;&lt;div class="feedflare"&gt;
&lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=mddNDy4SD70:ByI1Z-wQdcw:yIl2AUoC8zA"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=yIl2AUoC8zA" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=mddNDy4SD70:ByI1Z-wQdcw:qj6IDK7rITs"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=qj6IDK7rITs" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=mddNDy4SD70:ByI1Z-wQdcw:V_sGLiPBpWU"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=mddNDy4SD70:ByI1Z-wQdcw:V_sGLiPBpWU" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=mddNDy4SD70:ByI1Z-wQdcw:F7zBnMyn0Lo"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=mddNDy4SD70:ByI1Z-wQdcw:F7zBnMyn0Lo" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=mddNDy4SD70:ByI1Z-wQdcw:gIN9vFwOqvQ"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=mddNDy4SD70:ByI1Z-wQdcw:gIN9vFwOqvQ" border="0"&gt;&lt;/img&gt;&lt;/a&gt;
&lt;/div&gt;&lt;img src="http://feeds.feedburner.com/~r/BlogDoCleber/~4/mddNDy4SD70" height="1" width="1"/&gt;</description>
 <comments>http://cleber.net.br/site-da-casa-branca-utilizando-o-drupal#comments</comments>
 <category domain="http://cleber.net.br/tags/casa-branca">Casa Branca</category>
 <category domain="http://cleber.net.br/tags/drupal">Drupal</category>
 <category domain="http://cleber.net.br/tags/website">website</category>
 <pubDate>Wed, 28 Oct 2009 18:10:30 +0000</pubDate>
 <dc:creator>cleber</dc:creator>
 <guid isPermaLink="false">9 at http://cleber.net.br</guid>
<feedburner:origLink>http://cleber.net.br/site-da-casa-branca-utilizando-o-drupal</feedburner:origLink></item>
<item>
 <title>GoTwitr - Site de automatização do Twitter construído com Drupal</title>
 <link>http://feedproxy.google.com/~r/BlogDoCleber/~3/kJ3LAWpd91E/gotwitr-site-de-automatizacao-do-twitter-construido-com-drupal</link>
 <description>&lt;p&gt;Acaba de ser lançado o &lt;a href="http://www.gotwitr.com/"&gt;GoTwitr&lt;/a&gt;, mais um site voltado ao &lt;a href="http://twitter.com/"&gt;Twitter&lt;/a&gt;. O mais interessante dessa vez é que ele foi criado utilizando o &lt;a href="http://drupal.org/"&gt;Drupal&lt;/a&gt;, o mesmo &lt;acronym title="Content Management System"&gt;CMS&lt;/acronym&gt; que é utilizado neste blog. O site funciona como uma ferramenta para que os usuários do Twitter tenham mais facilidade em expandir e gerenciar suas comunidades no Twitter.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/gotwitr.jpg" alt="GoTwitr" title="GoTwitr" class="mceItem"&gt;&lt;/p&gt;
&lt;h3&gt;A tecnologia do GoTwitr&lt;/h3&gt;
&lt;div&gt;
&lt;p&gt;O site utiliza a &lt;a href="http://apiwiki.twitter.com/Authentication"&gt;API Oauth&lt;/a&gt; do Twitter para automatizar o registro de usuários no Drupal. O protocolo &lt;a href="http://widgy.net/2008/06/23/o-que-e-oauth/"&gt;Oauth&lt;/a&gt; permite essa automação sem que seja necessário que o usuário compartilhe sua senha com o site, o que poderia ser inseguro. É o mesmo protocolo utilizado pelos serviços do Google.&lt;/p&gt;
&lt;p&gt;Para o site foram testados vários módulos do Drupal para o Twitter, mas acabaram usando a biblioteca PHP&amp;nbsp;&lt;a href="http://wiki.github.com/jmathai/twitter-async"&gt;EpiTwitter e EpiOauth&lt;/a&gt; para desenvolver um módulo customizado.&lt;/p&gt;
&lt;/div&gt;
&lt;h3&gt;SEO&lt;/h3&gt;
&lt;div&gt;
&lt;p&gt;Foram utilizado também outros módulos do Drupal para ajudar na otimização para as ferramentas de busca (&lt;acronym title="Search Engine Optimization"&gt;SEO&lt;/acronym&gt;). Entre os módulos estão &lt;a href="http://drupal.org/project/xmlsitemap"&gt;XML Sitemap&lt;/a&gt;, &lt;a href="http://drupal.org/project/globalredirect"&gt;Global Redirect&lt;/a&gt;, &lt;a href="http://drupal.org/project/pathauto"&gt;Pathauto&lt;/a&gt;, &lt;a href="http://drupal.org/project/page_title"&gt;Page Title&lt;/a&gt; e o &lt;a href="http://drupal.org/project/site_map"&gt;Sitemap&lt;/a&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;h3&gt;Necessidada por Velocidade&lt;/h3&gt;
&lt;p&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/fail_whale.jpg" alt="Fail whale" title="Fail whale" width="150" height="190" style="float: right;" class="mceItem"&gt;&lt;/p&gt;
&lt;div&gt;
&lt;p&gt;Como tudo relacionado ao Twitter consome muita banda, foram feitas algumas otimizações, como, por exemplo, instalar apenas as bibliotecas do Drupal que fossem absolutamente necessárias. Foi instalado também o &lt;a href="http://php.net/manual/pt_BR/intro.apc.php"&gt;Cache Alternativo do PHP&lt;/a&gt; (&lt;acronym title="Alternative PHP Cache"&gt;APC&lt;/acronym&gt;), assim o PHP poderia executar mais rápido. Em seguida foi instalado o &lt;a href="http://www.danga.com/memcached/"&gt;Memcache&lt;/a&gt;, um sistema de cache para o PHP, e o módulo do Drupal &lt;a href="http://drupal.org/project/memcache"&gt;Memcache&lt;/a&gt; para fazer a integração. Resultado: APC + Memcached = ~300% de aumento de velocidade.&lt;/p&gt;
&lt;/div&gt;
&lt;h3&gt;Outras considerações&lt;/h3&gt;
&lt;p&gt;O site também faz uso da tecnologia &lt;acronym title="Asynchronous HTML and HTTP"&gt;AHAH&lt;/acronym&gt;, técnica similar ao &lt;abbr title="Asynchronous JavaScript and XML"&gt;Ajax&lt;/abbr&gt; (&lt;a href="http://labnet.cc.isel.ipl.pt/blogs/web/archive/2008/04/09/ahah.aspx" title="Artigo explicando o que é o AHAH"&gt;saiba mais&lt;/a&gt;) e que já vem junto ao Drupal, além de fazer proveito da &lt;acronym title="Application Programming Interface"&gt;API&lt;/acronym&gt; para construção de formulários.&lt;/p&gt;
&lt;p&gt;O GoTwitr possui, além de outras ferramentas, o "Smart Follow", que permite que você veja todos os usuários que estão seguindo você mas que você não está seguindo de volta.&lt;/p&gt;
&lt;p&gt;Fonte: &lt;a href="http://drupal.org/node/599506" title="Artigo original sobre o GoTwitr"&gt;drupal.org&lt;/a&gt;&lt;/p&gt;&lt;div class="feedflare"&gt;
&lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=kJ3LAWpd91E:9mvKHPSPKNY:yIl2AUoC8zA"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=yIl2AUoC8zA" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=kJ3LAWpd91E:9mvKHPSPKNY:qj6IDK7rITs"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=qj6IDK7rITs" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=kJ3LAWpd91E:9mvKHPSPKNY:V_sGLiPBpWU"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=kJ3LAWpd91E:9mvKHPSPKNY:V_sGLiPBpWU" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=kJ3LAWpd91E:9mvKHPSPKNY:F7zBnMyn0Lo"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=kJ3LAWpd91E:9mvKHPSPKNY:F7zBnMyn0Lo" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=kJ3LAWpd91E:9mvKHPSPKNY:gIN9vFwOqvQ"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=kJ3LAWpd91E:9mvKHPSPKNY:gIN9vFwOqvQ" border="0"&gt;&lt;/img&gt;&lt;/a&gt;
&lt;/div&gt;&lt;img src="http://feeds.feedburner.com/~r/BlogDoCleber/~4/kJ3LAWpd91E" height="1" width="1"/&gt;</description>
 <comments>http://cleber.net.br/gotwitr-site-de-automatizacao-do-twitter-construido-com-drupal#comments</comments>
 <category domain="http://cleber.net.br/tags/cms">CMS</category>
 <category domain="http://cleber.net.br/tags/drupal">Drupal</category>
 <category domain="http://cleber.net.br/tags/php">PHP</category>
 <category domain="http://cleber.net.br/tags/tecnologia">tecnologia</category>
 <category domain="http://cleber.net.br/tags/twitter">Twitter</category>
 <pubDate>Sat, 24 Oct 2009 02:29:04 +0000</pubDate>
 <dc:creator>cleber</dc:creator>
 <guid isPermaLink="false">7 at http://cleber.net.br</guid>
<feedburner:origLink>http://cleber.net.br/gotwitr-site-de-automatizacao-do-twitter-construido-com-drupal</feedburner:origLink></item>
<item>
 <title>O que se fala sobre o Brasil nos seriados estrangeiros</title>
 <link>http://feedproxy.google.com/~r/BlogDoCleber/~3/Uth2GQEn3wE/o-que-se-fala-sobre-o-brasil-nos-seriados-estrangeiros</link>
 <description>&lt;p&gt;Uma boa forma de se saber qual imagem os estrangeiros têm do nosso país é verificando o que é dito sobre ele nos filmes e seriados, principalmente os estadunidenses. Claro que na maioria dos casos existe uma visão estereotipada do Brasil. O caso mais recente de "destaque" do Brasil foi no espisódio &lt;a href="http://www.southparkstudios.com/guide/1306/"&gt;Pinewood Derb&lt;/a&gt;, do South Park, em que por alguns segundos o presidente Lula aparece falando ao telefone. Existe também o famoso caso do episódio &lt;a href="http://videolog.uol.com.br/video.php?id=283426"&gt;O Feitiço de Lisa&lt;/a&gt;, dos Simpsons, e do filme &lt;a href="http://www.imdb.com/title/tt0454970/"&gt;Turistas&lt;/a&gt;, de 2006 (filme tão ruim que chega a ser engraçado).&lt;/p&gt;
&lt;div style="text-align: center;"&gt;&lt;img src="http://cleber.net.br/sites/default/files/images/posts/lula_south_park.jpg" alt="Lula no South Park" title="Lula no South Park" width="500" height="264" class="mceItem"&gt;&lt;/div&gt;
&lt;div style="text-align: center;"&gt;&lt;em&gt;"Alô, Obama? Aqui quem fala é o companheiro Lula."&lt;/em&gt;&lt;/div&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Fazendo uma pesquisa no site &lt;a href="http://www.imdb.com/"&gt;IMDb&lt;/a&gt;, que possui uma seção só com diálogos de filmes e seriados, é possível encontrar várias referências ao Brasil. Neste post serão mostradas as citações apenas em seriados. Em outro post será a vez dos filmes.&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;div&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0508664"&gt;Alias (2001) {A Profecia  (#1.16)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Arvin Sloane&lt;/strong&gt;: Com os recursos disponíveis finalmente localizamos o inimigo, que não teremos mais que nos referir como “O Homem”. Graças às fotos de vigilância obtidas no &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;, confirmamos  sua identidade. Ele é Alexander Khasinau.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0285333"&gt;Alias (2001)&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Agente Marshall Flinkman&lt;/strong&gt;: [&lt;em&gt;em uma reunião, discutindo  onde será a troca das armas de destruição em massa&lt;/em&gt;] Parece terrível! &lt;br&gt;&lt;br /&gt;
      [&lt;em&gt;todo mundo fica olhando para ele&lt;/em&gt;] &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Agente Marshall  Flinkman&lt;/strong&gt;: O quê? &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;... Não é lá que eles têm  aquelas… fitas… não biquinis… como vocês chamam? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Agente Jack  Bristow&lt;/strong&gt;: Tangas?&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0307716"&gt;Andy Richter Controls the  Universe (2002)&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;[&lt;em&gt;Freddy está levando Andy e seus amigos para o Rio de Janeiro&lt;/em&gt;] &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Keith&lt;/strong&gt;: Acabei de falar com o piloto. Não estamos voando  para o Rio. Estamos voando para o Mississippi. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Wendy&lt;/strong&gt;:  Mississippi, &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Freddy Pickering&lt;/strong&gt;:  Deve ter havido um mal-entendido. Eu vou falar com ele. &lt;br&gt;&lt;br /&gt;
      [&lt;em&gt;Ele vai até a  saída de emergência&lt;/em&gt;] &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Jessica&lt;/strong&gt;: Uh, o cockpit é assim. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Freddy Pickering&lt;/strong&gt;: [&lt;em&gt;assim que ele abre a porta&lt;/em&gt;] Vou  dizer pra ele!&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0522819"&gt;Barrados no Baile (1990)  {Hazardous to Your Health (#5.18)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Dylan McKay&lt;/strong&gt;: [&lt;em&gt;espionando Kevin e Suzanne&lt;/em&gt;] Sim,  esses são eles. Aqui estão Kevin e Suzanne. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;J. Jay Jones&lt;/strong&gt;: Não, não. Agora eles se chamam Karl e Kitty Cavendish. Uma gracinha não? Erica ainda é Erica até onde eu posso dizer. Quero dizer, ele não tem um apelido. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dylan McKay&lt;/strong&gt;: Então, o que eles estão fazendo aqui? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;J. Jay Jones&lt;/strong&gt;: Oportunidades de negócios. Eles chegaram a  algumas semanas de Santos, &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;, cara. Eles têm uma companhia  de importação lá em baixo, mas você pode apostar que é uma fachada para  contrabando. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dylan McKay&lt;/strong&gt;: Drogas? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;J. Jay  Jones&lt;/strong&gt;: Por que não? Da maneira que eu acho, ficou muito quente ou muito  seco, e eles apenas foram a procura de pastos mais verdes. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dylan  McKay&lt;/strong&gt;: Falando de verde, cadê meu dinheiro? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;J. Jay  Jones&lt;/strong&gt;: Há 50 mil em um banco local, mas os enormes lucros estão escondidos em outro banco, com um número de conta secreta em algum lugar. Isso é o que vai nos enriquecer.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0533458"&gt;"Buffy the Vampire Slayer"  (1997) {Lovers Walk (#3.8)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;[&lt;em&gt;Spike fala sobre seu rompimento com Drusilla&lt;/em&gt;] &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Spike&lt;/strong&gt;: Ela não ia mesmo me matar. Ela apenas partiu. Ela não se importa o suficiente para cortar a minha cabeça ou colocar fogo em mim. Quero dizer, isso é pedir muito? Você sabe, algum sinal de que ela se importava? Foi essa trégua com Buffy que fez isso. Dru disse que teria sido mais fácil. E eu disse a ela que não significava nada o que eu estava pensando sobre ela o tempo todo, mas ela não se importou. Assim, chegamos ao &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt; e ela estava... ela era diferente. Eu dei-lhe tudo. Belas jóias, vestidos com belas garotas neles, mas nada a fazia feliz. E ela ia flertar. Eu peguei ela em um banco do parque saindo com um Demônio do Caos. Você já viu um Demônio do Caos? Estão todos de chifres, eles são nojentos. Ela só fez isso para me ferir. Então eu disse: "Eu não estou aguentando mais isso." E ela disse: "Ótimo." E eu disse: "Sim, eu tenho uma não-vida, você sabe." E então ela disse... Ela disse que ainda podemos ser amigos. Deus, eu sou tão infeliz. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Willow&lt;/strong&gt;: Lá, lá. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Spike&lt;/strong&gt;: Quero dizer,  "Amigos." Como ela pode ser tão cruel?&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0397138"&gt;Corner Gas (2004)&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Brent LeRoy&lt;/strong&gt;: O que vocês estão assistindo rapazes? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Hank Yarbo&lt;/strong&gt;: Futebol, quer se juntar? Eu tenho um bom  pressentimento sobre o &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Brent  LeRoy&lt;/strong&gt;: Não, eu não sei nada sobre futebol. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Hank  Yarbo&lt;/strong&gt;: É um esporte complexo. Levei bastante tempo antes de compreender  as regras do jogo. &lt;br&gt;&lt;br /&gt;
      [&lt;em&gt;tiros&lt;/em&gt;] &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Hank Yarbo&lt;/strong&gt;: Hey o  que você está fazendo? Você não pode pegar a bola e correr com ela seu imbecil! &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Paul Kinistino&lt;/strong&gt;: Uh... isso é rugby.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?1094383"&gt;Dançando com as Estrelas  (2005/I) {Round 7 (#5.14)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Len Goodman&lt;/strong&gt;: [&lt;em&gt;para Hélio Castroneves e Julianne Hough,  que acabaram de dançar samba&lt;/em&gt;] Só por que você veio do &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt; não quer dizer necessariamente que você é bom no sama, da mesma maneira que você vir do Texas não significa que você será um bom presidente...&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0554545"&gt;Daria (1997) {This Year's Model  (#1.6)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Quinn&lt;/strong&gt;: Você tem que me deixar fazer isso, vocês sempre dizem  que eu posso ser qualquer coisa que eu quiser! &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Helen&lt;/strong&gt;: Sim.  Nós dizemos isso. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Daria&lt;/strong&gt;: Isso me lembra: Posso tornar-se  rainha do &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;?&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0882305"&gt;Frisky Dingo (2006) {Meet  Awesome-X (#1.2)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Xander Crews&lt;/strong&gt;: Olha, eu não me importo que tipo de coisa  "Meninos do &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;" você fez lá dentro, mas eu ainda sou o chefe aqui. E nós estamos fazendo bonecos Awesome X e eles vão te dar um pé na bunda tão grande que provavelmente você vai ficar cego.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?1123416"&gt;Dr. House (2004) {O Que for  Preciso (#4.6)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Dr. Gregory House&lt;/strong&gt;: Seu idiota. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dr. Samira  Terzi&lt;/strong&gt;: Quem você está chamando de idiota? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dr. Gregory  House&lt;/strong&gt;: Quem sabia que John estava de passagem no &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;, não na Bolívia. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dr. Samira Terzi&lt;/strong&gt;: &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dr. Gregory House&lt;/strong&gt;: [&lt;em&gt;House se  vira e encara o Agente Smith&lt;/em&gt;] Bem, então, eu acho, estou falando com você,  idiota. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;CIA Agent Smith&lt;/strong&gt;: É a mesma região. É o mesmo  parasita, as mesmas doenças. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dr. Gregory House&lt;/strong&gt;: Mas não a  mesma língua. Na bolívia, castanha são castanhas. No &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;, por outro lado, tem as castanhas-do-pará, literalmente, "Castanhas do Pará." Porque seria estúpido para as pessoas do Brasil chamá-las de Castanhas do &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;CIA Agent Smith&lt;/strong&gt;: Então ele comeu  castanhas do &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;. Grande coisa. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Dr. Gregory  House&lt;/strong&gt;: Não, ele comeu um monte de castanhas do &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;, o que é uma grande coisa, por que elas contém selenium. Que, em altas doses, causa fadiga, vômito, irritação da pele, descamação das unhas e perda de cabelo. Isso soa familiar?&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0617906"&gt;Just Shoot Me! (1997) {Guess  Who's Coming to Blush (#7.1)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Maya Gallo&lt;/strong&gt;: Você pode pegar o Equal &lt;em&gt;[adoçante]&lt;/em&gt;. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Jack Gallo&lt;/strong&gt;: Maya, eu posso pegar o Equal, posso ter o mel e  o melado, eu posso ir para o &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;, pegar um facão e cortar um  talo de cana pura, mas tudo que eu quero é o Sweet and Low &lt;em&gt;[adoçante]&lt;/em&gt;!  Mas, aparentemente, o que eu quero é irrelevante! &lt;br&gt;&lt;br /&gt;
      [&lt;em&gt;vai para o seu  escritório&lt;/em&gt;] &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Elliot DiMauro&lt;/strong&gt;: O que ele tem? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Nina Van Horn&lt;/strong&gt;: Leia as entrelinhas! O homem realmente gosta  do Sweet and Low!&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0284722"&gt;Reba (2001)&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Reba&lt;/strong&gt;: Hey, Jake. O que você está assistindo? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Jake Hart&lt;/strong&gt;: O &lt;em&gt;Weather Channel&lt;/em&gt;. Mais chuva no &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0706385"&gt;Spaced (1999) {Beginnings  (#1.1)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Daisy Steiner&lt;/strong&gt;: Você tem uma alergia potencialmente fatal a  castanhas do &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;... &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Tim Bisley&lt;/strong&gt;: Sim. Eu  não tenho lembranças do Natal de 1979. Se interessa, eu não tenho lembranças do  Natal de 1994 também. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Daisy Steiner&lt;/strong&gt;: Oh, por que não? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Tim Bisley&lt;/strong&gt;: Eu não sei.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0650710"&gt;The Monkees (1966) {The Spy Who  Came in from the Cool (#1.5)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Boris&lt;/strong&gt;: Madame, depois que entregarmos o microfilme,  poderemos ir embora juntos como você prometeu? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Madame  Olinsky&lt;/strong&gt;: Sim, Boris, nós vamos para o &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Boris&lt;/strong&gt;: Achei que você tinha dito Argentina? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Madame Olinsky&lt;/strong&gt;: Tudo bem, Argentina. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Boris&lt;/strong&gt;: &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt; é legal!&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?1154817"&gt;Os Pinguins de Madagascar (2008)  {Eclipsado (#1.18)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Kowalski&lt;/strong&gt;: Skipper, eu acho que eu tenho o que você está  procurando. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Skipper&lt;/strong&gt;: Bilhante, Kowalski! Então quando é o  próximo grande eclipse? &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Kowalski&lt;/strong&gt;: A partir de hoje, 27  anos, no &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Private&lt;/strong&gt;: Ooh, eu sempre  quis ir no Carnaval.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0763028"&gt;Os Simpsons (1989) {O Feitiço de  Lisa (#13.15)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Homer Simpson&lt;/strong&gt;: Você não sabia que os meninos do &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt; são pequenos Hitlers? Eu vi isso em um filme cujo nome  eu não me lembro.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0701101"&gt;Os Simpsons (1989) {Grift of the  Magi (#11.9)}&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Kent Brockman&lt;/strong&gt;: [&lt;em&gt;do canal de TV&lt;/em&gt;] Nossa manchete é  que o buraco na camada de ozônio que devastou o &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt; no  último verão aparentemente atingirá Springfield no inverno. &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Bart  Simpson&lt;/strong&gt;: Wooh! Springfield detona! &lt;br&gt;&lt;br /&gt;
      &lt;strong&gt;Kent Brockman&lt;/strong&gt;:  [&lt;em&gt;do canal de TV&lt;/em&gt;] Os habitantes estão sendo aconselhados a se recolher ao menos que você use óculos escuros ou seja muito, muito cabeludo. Experts recomendam classe nove, ou nível Robin Williams de cobertura de cabelo.&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="http://www.imdb.com/Quotes?0106172"&gt;Carmen Sandiego (1991)&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;The Chief&lt;/strong&gt;: Aqui está uma lista dos lugares aonde Carmem pode ter viajado: Quito, Equador... Lima, Peru... Bogotá, Colômbia... Santiago, Chile... Caracas, Venezuela... La Paz, Bolívia... Buenos Aires, Argentina... Georgetown, Guiana... Brasília, &lt;span style="text-decoration: underline;"&gt;&lt;strong&gt;Brasil&lt;/strong&gt;&lt;/span&gt;... Assunción,  Paraguai... Paramaribo, Suriname... Montevideo, Uruguai... Cayenne, Guiana  Francesa. Greg... Vamos para o mapa!&lt;/p&gt;
&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Fonte: &lt;a href="http://www.imdb.com/Find?select=Quotes&amp;amp;for=brazil" title="IMDb"&gt;IMDb&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;div class="feedflare"&gt;
&lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=Uth2GQEn3wE:nO2BAB4fsFc:yIl2AUoC8zA"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=yIl2AUoC8zA" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=Uth2GQEn3wE:nO2BAB4fsFc:qj6IDK7rITs"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?d=qj6IDK7rITs" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=Uth2GQEn3wE:nO2BAB4fsFc:V_sGLiPBpWU"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=Uth2GQEn3wE:nO2BAB4fsFc:V_sGLiPBpWU" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=Uth2GQEn3wE:nO2BAB4fsFc:F7zBnMyn0Lo"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=Uth2GQEn3wE:nO2BAB4fsFc:F7zBnMyn0Lo" border="0"&gt;&lt;/img&gt;&lt;/a&gt; &lt;a href="http://feeds.feedburner.com/~ff/BlogDoCleber?a=Uth2GQEn3wE:nO2BAB4fsFc:gIN9vFwOqvQ"&gt;&lt;img src="http://feeds.feedburner.com/~ff/BlogDoCleber?i=Uth2GQEn3wE:nO2BAB4fsFc:gIN9vFwOqvQ" border="0"&gt;&lt;/img&gt;&lt;/a&gt;
&lt;/div&gt;&lt;img src="http://feeds.feedburner.com/~r/BlogDoCleber/~4/Uth2GQEn3wE" height="1" width="1"/&gt;</description>
 <comments>http://cleber.net.br/o-que-se-fala-sobre-o-brasil-nos-seriados-estrangeiros#comments</comments>
 <category domain="http://cleber.net.br/tags/brasil">Brasil</category>
 <category domain="http://cleber.net.br/tags/citacoes">citações</category>
 <category domain="http://cleber.net.br/tags/entretenimento">entretenimento</category>
 <category domain="http://cleber.net.br/tags/seriados">seriados</category>
 <pubDate>Tue, 20 Oct 2009 03:48:24 +0000</pubDate>
 <dc:creator>cleber</dc:creator>
 <guid isPermaLink="false">5 at http://cleber.net.br</guid>
<feedburner:origLink>http://cleber.net.br/o-que-se-fala-sobre-o-brasil-nos-seriados-estrangeiros</feedburner:origLink></item>
</channel>
</rss>
