Placeholders – Uma infinidade de imagens

São muitos os recursos e sites úteis na Internet, que facilitam nossa vida (tanto de quem desenvolve quanto de quem usa). Tantos que é meio difícil listar, sem antes ser chato.

Enquanto eu passeava pelas Internets, um dos que eu encontrei e que certamente quebram vários recordes de utilidades são os placeholders. Placeholders são basicamente imagens estáticas que servem para ocupar um espaço em seu site, em quantidade de pixels que você mesmo define na imagem.
Ou seja, é possível utilizar desses sites que fornecem placeholders para montar imagens de layouts, por exemplo, em seu próprio site ou projeto. Um exemplo é esta imagem abaixo:

Placehold.it

Note que a imagem não possui nada, mas ela é gerada automaticamente por um site, e é especificada dessa forma: http://placehold.it/420×240/

Se você acessar este link, você consegue visualizar esta mesma imagem. Mas você vê logo que o link não possui extensão de imagem .jpg, ou .png. Ela é gerada de forma automática pela URL da imagem, o 420×240.

O site de placeholder desta imagem acima é o Placehold.it, um site que realiza exatamente isso a partir da URL. Você consegue utilizar novas imagens direto do placehold.it assim:

 <img src="http://placehold.it/420x240" alt="" />

Também existem outros sites, o Dynamic Dummy Image Generator, feito por Russell Heimlich, também faz bem basicamente a mesma coisa, mas ele é… um tanto mais intuitivo.

Dummy
Colocar textos na imagem facilita a criação de um layout, e definição de seus espaços! Além disso, a sintaxe é bastante parecida. Existe mais uma infinidade destes, com variedades únicas, e sinceramente, talvez nenhum objetivo (a não ser mera curtição):

1. Placekittens

placekitten

Não se sabe ao certo o porquê de um site que gera imagens de gatinhos, mas ele é real, e aliás, inspirado no placehold.it. Afinal, por que não? A sintaxe é parecida:

 <img src="http://placekitten.com/500/300" alt="" />

Então, modificando a URL em /500/300 por /1280/720 ou /1920/1080 você ganha um wallpaper. Não minto; utilizo deste, e se você chegou até aqui, você provavelmente já viu.

Se você, por qualquer motivo, achar que o gerador de imagens de gatinhos é algo um tanto irrelevante, me fale mais sobre o gerador de imagens do Nicolas Cage ou do Charlie Sheen. Clique por própria conta e risco!

2. LoremPixel

lorempixel

Para imagens mais variadas, existe o LoremPixel, um site que faz a mesma coisa, mas para imagens mais aleatórias. Os resultados são realmente bem variados, e existem várias formas de configuração:

<img src="http://lorempixel.com/400/200/nature/" alt="" />

A palavra ‘nature’ na URL da imagem gera uma imagem com o tema ‘natureza’, ‘sports’ gera uma imagem de esportes. Claro, não existe todo e qualquer tema imaginável, então vale a pena acessar o site e verificar.

Vale lembrar que o objetivo do placeholder é sempre facilitar o uso de imagens ou espaçamento de layout de forma rápida. Você também consegue fazer isso via código, sempre. Mas para todo o caso, esses geradores não vão deixar a desejar. Menos o do Nicolas Cage, esse certamente vai.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s