Como baixar fotos dos álbuns da UOL

Se você não é nerd, não tem tempo, não tem coração e não tem curiosidade, recomendo que ignore todo o texto e leia somente o item 3.

Por causa da forma como os álbuns de fotos do UOL são feitas, copiar suas fotos é uma tarefa difícil para a maioria dos usuários. Não acho que a UOL faça assim de propósito, mas por uma questão de usabilidade mesmo: há dois botões enormes em cima das fotos para você avançar para a próxima foto ou voltar para a anterior, e é por causa deles que você não consegue ver o “Copiar endereço da imagem” quando clica com a tecla direita na área da imagem (porque você não está realmente clicando na imagem, mas num botão transparente).

No entanto, há várias formas de copiar fotos dos álbuns da UOL. Neste post apresento algumas. Para testar, você pode tentar aplicar essas ideias neste álbum.

0. Soluções toscas

Como eu disse no início, os webmasters do UOL aparentemente não fazem os álbuns se comportarem assim de propósito, mas por causa de botões gigantes. A maneira mais fácil de copiar uma foto de um álbum do UOL é clicar bem na coluna exatamente no meio dela, evitando as duas setas. Você pode passar o mouse devagar pelo meio da foto até que o seu cursor deixe de ser uma mãozinha e seja uma seta. Pra saber se você deve ir pra esquerda ou pra direita é só ir na direção da seta que você não está vendo.

Clicando com a tecla direita no meio da foto

Outra solução também tosca é simplesmente tirar um screenshot da tela em que você está (apertar a tecla PrintScreen na maioria dos computadores deve funcionar) e recortar a imagem. Eu imagino que essa seja a solução mais usada, mas pessoalmente acho ela terrível.

Não pare de ler! Prometo que as próximas soluções vão ser mais legais.

1. Somente para o Firefox: desativar estilos

Desativar o CSS da página é uma forma fácil de acabar com todo seu leiaute e dessa forma copiar a imagem sem se preocupar com perfumarias. Você provavelmente pode fazer isso em qualquer navegador usando plugins (e nos navegadores que não suportam CSS é até mais fácil: você nem precisa fazer nada!) e no Firefox em particular há um botão no menu (Exibir » Estilos » Sem estilos).

Página do álbum de fotos com estilos desativados no Firefox

2. JavaScript na barra de endereço

Em geral, você pode escrever um script na barra de endereço para executá-lo na página em que você está. Há um tempo atrás todos os navegadores aceitavam isso, mas aparentemente muitos têm desativado esse recurso por questões de segurança, inclusive o Firefox. De qualquer maneira, se seu navegador suportar, você pode simplesmente digitar:

javascript: document.getElementById(
  "setaEsq"
).style.width = document.getElementById("setaDir").style.width = "50px";
void 0;

na barra de endereço quando estiver na página do álbum do qual quer baixar fotos.

Digitando JavaScript no campo da URL do navegador

Isso vai reduzir o tamanho dos botões, fazendo com que a área clicável seja bem maior.

Exercício para quem souber ou quiser aprender JavaScript: Escreva um script que abra a foto numa nova aba em vez de simplesmente deixá-la clicável. Transforme-o num bookmarlet (veja o próximo item).

3. Bookmarlet

A solução anterior nos incentiva a criar um botão que execute esse script para não termos que decorá-lo nem copiá-lo sempre. Eis aqui esse botão para você: Aumentar área clicável das fotos dos álbuns da UOL. Clique com a tecla direita nesse link e adicione-o aos seus favoritos. Quando você estiver num álbum, clique nesse favorito e a imagem vai se tornar magicamente clicável :)

4. Firefox e GreaseMonkey

Se você usa Firefox e tem instalada a extensão GreaseMonkey, instale o seguinte user script (que executa o mesmo código que colei no item 2) e sempre que você abrir um álbum as fotos serão clicáveis: Download do userscript

// ==UserScript==
// @name Copiador de fotos UOL
// @description Torna mais fácil copiar fotos de álbuns da UOL
// @author  Tiago Madeira <contato@tiagomadeira.com>
// @include http*://*.uol.com.br/album/*
// @version 0.9
// ==/UserScript==

(function () {
  window.onload = function () {
    document.getElementById("setaEsq").style.width = "50px";
    document.getElementById("setaDir").style.width = "50px";
  };
})();

Mas estou lendo este post em 2020 e o UOL mudou! Ou eu quero baixar fotos do site X, não do UOL!

A solução 1 (desativar estilos) funciona em 99% dos casos. Não quer ver sites sem estilo? Continue lendo.

5. Se você não quiser utilizá-la e se você estiver usando Firefox, pode clicar no ícone ao lado do endereço do site na barra de endereço e aí no botão “Mais informações”. Isso vai abrir uma tela com uma seção “Mídia” onde é possível ver e salvar imagens, ícones e vídeos que seu navegador baixou para mostrar a página. Esse método funciona também para copiar vídeos HTML5, inclusive do YouTube:

Mídias da página (Firefox)

6. Se você não quiser procurar uma imagem no meio de um monte de mídias, a última versão do seu navegador deve ter um botão “Inspecionar elemento” no menu de contexto sempre que você clica com a tecla direita em qualquer lugar da página. Usando essa ferramenta é possível ver o código HTML do que você está vendo (ela é diferente e melhor do que simplesmente ver o código-fonte da página porque usando a inspeção de elementos você vê o código do momento atual, depois dos scripts mudarem as coisas). Se você pedir para inspecionar alguma coisa transparente em cima da imagem, em geral não vai ser difícil achar a própria imagem. Este screenshot é do Chrome:

Copiando URL da imagem da inspeção de elementos

Há inúmeras soluções mais nerds, mas quis manter a lista com sugestões fáceis e que não precisam de nada além do seu navegador. Alguma outra ideia simples, criativa e divertida? Blogue por aí ou me conte pra eu aumentar a lista!

Álbum de Fotos

Link para projeto em desenvolvimento…

Meu Flickr tá estourando (depois de 200 fotos, começam a sumir fotos segundo seu FAQ) e por isso resolvi criar um álbum de fotos pessoal. Estou desenvolvendo em PHP, usando um banco de dados MySql e estou criando bastante recursos Ajax para exercitar um pouco e para o negócio ficar bem dinâmico (se estiver ficando muito exagerado, me avisem!). Este projeto que ainda não tem nome, mas que estou pensando em algo como PhotoX (gostou do nome? comente! não gostou? comente também!), deve ter todos os recursos do Flickr (tipo, All Sizes, Notes e Rotate) e o que surgir de idéias legais. Será um software livre, cada um instala em seu servidor (ex.: é um “WordPress“, não um “Blogger“) e por isso ele não tem limites de sets, tags, fotos, tamanhos ou qualquer coisa do tipo. Irá requerer PHP 4.3, está sendo desenvolvido usando classes (estou tentando exercitar programação orientada a objetos), usa a biblioteca GD (para trabalhar com as imagens) e é totalmente Web 2.0 (tableless, padrões HTML 4.01 Strict, Ajax, tagsonomia, simplicidade). Já estou o criando multi-linguagem, ele funciona com alguma coisa parecida com templates e deve sair em no máximo um mês.

Estou convidando programadores sem nada pra fazer pra me dar uma ajuda (claro que gratuita). O Gustavo é uma das pessoas que me deu uma ajuda fazendo um pedaço da classe Foto e da classe Comentario e aqui estendo o convite para qualquer pessoa que lê o meu blog e queira ajudar. O sistema é simples: eu te dou um login e senha no meu FTP e você desenvolve o que você conseguir (postando sempre que você muda uma letra o novo resultado, para que depois outra pessoa pegue e possa continuar).

Atualizado

O Renato deu uma idéia legal aí num comentário que é hospedar o troço em alguns desses sites de projetos de software livre e usar CVS pro desenvolvimento. Acho que realmente faz sentido, eu não tinha pensado nisso… Hehehe… Vou criar algo a respeito e depois eu publico aqui!

Se você for uma dessas pessoas dispostas, gostaria de pedir que você note alguns detalhes na construção dos meus arquivos:

  • Tabulação é feita com “tabs”.
  • As classes não imprimem nada na janela.
  • Mesmo os arquivos não imprimem nada também, eles imprimem para a variável $buf.
  • Não vale mexer nos arquivos config.php, index.php, ajax.php, scripts.js.php e style.css (por favor, deixe toda a parte de client-side, Ajax e configurações globais para mim :D ).
  • Todas as coisas que você passar para a variável bufna~opodemcontertexto.(Sevoce^querescreverqualquercoisaaleˊmdoquefoiretornadodobancodedados,devecriarumavariaˊvelbuf não podem conter texto. (Se você quer escrever qualquer coisa além do que foi retornado do banco de dados, deve criar uma variávelLANG[‘NOMEDAVAR’] no arquivo lang/pt_BR.php e lang/en_US.php
  • Se você não souber programar mas estiver afim de traduzir o projeto para alguma língua, me dê seu nome que quando tiver pronto eu vou querer muito sua ajuda.
  • Se você não quiser traduzir e nem souber programar, colabore com idéias de coisas que você acha legal o projeto ter (o que falta no Flickr que seria legal os programadores colocarem, ou sei lá…)

Espero que todos tenham entendido o espírito. Me mandem e-mail com sugestões e quem puder ajudar, ajude. Quem quiser dar um nome ao projeto, pode me sugerir também! Tenho certeza que um software livre desenvolvido pela comunidade para um fim que ainda não existe algo parecido (alguém conhece algum software livre de álbum de fotos que faça tudo que o Flickr faz?) fará bastante sucesso e será bem aceito ao menos pelos programadores (grande parte deles usa o Flickr mas tem um servidor legal que suporta PHP e GD).


Agora vamos voltar ao blog.

Fiquei um tempo sem postar justamente por causa desse projeto, que estou me esforçando para fazer o mais rápido possível. Também estou lendo “Java – Como Programar”. Tô gostando bastante da didática e gostando também da linguagem Java. No mais, não estou fazendo muita coisa. Estou indo trabalhar todos os dias a tarde, viajei final de semana para Florianópolis e agora que meu primo foi embora, minha casa está bem vazia (o que é ótimo! :) )

© 2005–2020 Tiago Madeira