Morton 12 de mayo de 2011 a las 12.21
   Imprimir artículo
elWebmaster.com

Los mejores placeholders para el diseño de tu sitio web


placeholder-wideCuando en un espacio de determinado tamaño, allí donde el día de mañana habrá publicidad o una nueva sección del sitio web, en su lugar colocas, por ejemplo, la simpática imagen de un gatito, eso tiene un nombre: se llama placeholder. Y qué mejores placeholders que…

…algunos divertidos y alegres que nos arranquen una sonrisa, u otros prácticos que nos indiquen sus propias medidas de ancho y alto. Vamos a presentarte un pequeño listado de placeholders recomendados que seguro te serán de utilidad:

Placekitten

Nada más reconfortante que, mientras avanza tu diseño, disfrutar de tiernas fotos de gatitos.

Para utilizarlo, pon este código en tu HTML:

  1. <img src="http://placekitten.com/x/y" />

…reemplazando X e Y por el ancho y alto deseados, en ese orden.

O si prefieres blanco y negro:

  1. <img src="http://placekitten.com/g/200/300" />

Haz clic aquí para visitar Placekitten >>

Placehold.it

Aquí puedes generar placeholders sencillos, que tan sólo indican el ancho y alto que poseen.

Tan sólo debes colocar este código:

  1. <img src="http://placehold.it/350x150">

…reemplazando los números por el ancho y alto deseados.

Si quieres indicar el color:

  1. <img src="http://placehold.it/350x150/292929/e3e3e3">

Si quieres añadirle un texto:

  1. <img src="http://placehold.it/350x150&text=Hola mundo">

Haz clic aquí para visitar Placehold.it >>

FlickHoldr

¿Y si utilizas fotos aleatorias de Flickr? Además, puedes indicar tags para que las fotos conserven una determinada temática:

  1. <img src="http://flickholdr.com/200/300" />

…reemplazando los números por la medida deseada.

Para aplicar tags…

  1. <img src="http://flickholdr.com/200/300/sea,sun" alt="" />

…y finalmente, en blanco y negro:

  1. <img src="http://flickholdr.com/200/300/sea,sun/bw" alt="" />

Haz clic aquí para visitar FLickholdr >>

Esto fue todo. Pronto compartiremos más placeholders de diversos motivos originales y prácticos. ¡Esperamos que te sean de utilidad!

Fuente original del artículo: NetTuts+
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder