desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web

Para aqueles que precisam ter a imagem de um web site inteiro, existem algumas possibilidades de se fazer isso. Aprenda como ter a imagem de um site por completo.

Quando é preciso tirar um screenshot de um site inteiro, mesmo das partes que estrapolam a “dobra superior” (parte visíveil antes de se rolar o barra de rolagem), às vezes pode ser chato… Existem diversas maneiras de se fazer isso:

• Fazer várias screenshots de diferentes partes e depois juntar tudo em um programa de editoração de imagens;
• Utilizar um daqueles monitores que giram e ficam mais altos que largos (dependendo do tamanho do site, não funciona);
• Utilizar os serviços do site Super Screenshot;
• Usar o plugin para Firefox Screengrab!

Fazer várias screenshots de diferentes partes e depois juntar tudo em um programa de editoração de imagens

Essa é a maneira mais demorada e chata. Deve-se tirar uma screenshot da página “acima da dobra”, abrir seu programa de editoração de imagens preferido e colar a imagem. Depois, rolar a tela até o limite inferior da última, tirar outra foto e colar novamente no programa de editoração de imagens; e assim por diante, até chegar ao fim da página ou ao ponto que se deseja capturar.

Posteriormente, cria-se um novo documento com a largura do site e, para altura, coloca-se um valor bem alto, exagerado, mesmo. Então, pega a primeira screenshot para copiar e colar neste novo documento; pega-se a segunda, e coloca-se logo abaixo da primeira, e assim vai, até completar.

Bem “sacal”, hã…?

Utilizar um daqueles monitores que giram e ficam mais altos que largos

Estes monitores, apesar de nada baratos, costumam ser excelentes! A maioria é widescreen (bom para um filminho!) e tem uma definiçao muito boa. Quando se tem a oportunidade de se ter e/ou usar uma dessas belezas, basta girar a tela para que ela “fique maior” no sentido vertical, configurar a resolução para tal, entrar no site que se quer e tirar uma foto dele.

Agora, dependendo do site que se entre (especialmente blogs), até mesmo este monitor não conseguirá captar toda a extensão. Portanto, este ainda não é o melhor método.

Utilizar os serviços do site Super Screenshot

O site Super Screenshot oferece o serviço de tirar uma foto completa de web sites (gratuitamente). Entretanto, algumas vezes acontecem coisas estranhas com a imagem gerada, com elementos fora do lugar e outras coisas. Veja-se o exemplo no artigo sobre o princípio Gestalt de alinhamento aplicado ao web design.

Essa foi quase, mas usar o Super Screenshot ainda não é a melhor opção.

Usar o plugin para Firefox Screengrab!

Recentemente descobri esta extensão para Firefox, a Screengrab!, que serve justamente para tirar uma screenshot completa de sites!

Depois que você o instala e reinicia o Firefox para seu ativamento acontecer, um ícone indicativo aparece na barra de status, à direita. Quando se clica nele, aparecem 2 menus principais, “Save…” e “Copy…”, onde é possível escolher se se quer salvar a imagem diretamente ou copiar para a área de transferência para uso posterior.

Em cada um dos menus, as mesmas subopções:

• “Complete Page/Frame…”: Serve para tirar uma screenshot de todo o web site (ou frame…);
• “Visible Portion…”: Para capturar somente a parte visível, qualquer que seja;
• “Selection“: que permite selecionar em tempo real um trecho qualquer da tela para gerar uma imagem.

Conclusão

Enfim, pessoal, segundo o que eu pude pensar (pelo menos por agora), a maneira mais fácil, econômica, rápida e prática para se obter uma imagem de um web site completo é, sem sombra de dúvidas, utilizar a extensão do Firefox Screengrab! Com ela, é possível capturar porções de web sites ou toda sua extensão, de forma automática, salvando o arquivo diretamente (.png) ou copiando para a área de transferência para uso posterior.

<update>
O leitor Richardson (Vix) indicou que no navegador Maxthon tem o recurso nativo de tirar screenshots: captura a tela inteira, uma região, uma aba ou todas, além de outras opções. Para quem usa este browser, a facilidade para tirar fotos de sites completos é ainda maior, já que não é preciso instalar extensões.
</update>

Se alguém souber mais algum jeito para ter uma screenshot completo de um web site, comente, por favor!

Quando vi esse artigo no LifeDev, imediatamente lembrei do artigo que escrevi no blog da Alanna sobre as vantagens em se usar Firefox.

Trata-se de uma fabulosa lista com 25 extensões para Firefox que tem o objetivo de aumentar a produtividade pessoal na web!

Vão desde complementos para Google, GMail e Google Reader, passando por bloqueadores de banners de anúncios e backups das configurações e complementos do Firefox, até contadores para saber quanto tempo você realmente passa na web.

Vale mesmo à pena conferir a lista de plugins para Firefox para aumentar a produtividade no dia-a-dia!

E para os aficcionados em produtividade, desenvolvimento pessoal e assuntos correlatos, não deixem de conferir o blog do Walmar (agora com “équio” de madeira… rsrs)!

No quinto artigo da série, apresento alguns exemplos web do princípio da boa continuidade ou, como prefiro, princípio do alinhamento.

Como apresentado no artigo anterior, o princípio do alinhamento é muito importante! Quando utilizado correta e conscientemente, podemos fazer layouts mais organizados, mais consistentes e profissionais, já que, utilizando este princípio de Gestalt, podemos insinuar que elementos visuais têm interelações entre si (e outras coisas mais).

Em qualquer web design feito por alguém que estudou o mínimo, é possível encontrar aplicações do princípio do alinhamento. Lembrem-se: nada é por acaso (tanto no desenvolvimento web, quanto na vida)!

Este artigo contém imagens com tamanho significativo. Em função disso, há um link, logo abaixo, para continuar ler o restante da matéria.

Leia o restante desta entrada »

Para quem sempre procura fazer download de ícones de alta qualidade e definição, certamente a lista compilada pelo pessoal da Smashing Magazine veio a calhar!

Vi no feed do Profissionais da Web a indicação de uma ótima lista de ícones para baixar! Os “garotos da web” não exageraram quando disseram que é sem dúvida alguma a seleção dos ícones mais bonitos disponíveis na internet! Aliás, a Smashing Magazine freqüentemente compila listas de recursos web, como, por exemplo, aquela de 70 tutoriais para Photoshop.

<update>
Saiu no site do Everaldo a nova fornada de belos ícones da série Crystal Project para baixar!

E mais uma leva com quase 6000 ícones de alta definição e qualidade!
</update>

Aproveitemos!

Alexis Kauffmann, do blog Como aparecer na primeira página do Google e aumentar a audiência de seu site, fez um artigo indicando cada etapa para otimizar um site para os mecanismos de busca.

Vale à pena conferir essa “visão do todo” do processo de SEO!