En muchas ocasiones cuando diseñamos un website o aplicación web carecemos de los contenidos finales que tiene que aportar el cliente y normalmente suelen llegar siempre a última hora. Por esta razón a la hora de montar la maqueta del diseño gráfico necesitamos textos e imágenes que nos sirvan momentáneamente para ilustrar nuestro diseño. Incluso nos servirán en nuestras maquetas HTML/CSS.
Para evitar desagradables accidentes (y de estos alguna historieta graciosa os podemos contar aquí en nitsnets) se suelen utilizar textos que no significan nada (lorem ipsum) e imágenes de stock (placeholders). Además evita que en la presentación del diseño el cliente se distraiga leyendo textos falsos, haciendo correcciones absurdas o fijándose en el tono de color de una imágenes que después no se utilizará 😛
Lorem ipsum
Es un texto en latín que no significa nada que se utiliza como borrador en las muestras de diseño gráfico. Se utiliza porque tiene una distribución de las letras similar a la del idioma inglés.
Lorem ipsum es un extracto en latín de Finibus Bonorum et Malorum de Cicerón escrito en el año 45 a.C. muy leído durante el Renacimiento, texto al que cuyas palabras se les ha eliminado sílabas o letras y añadido otras sin sentido. Como curiosidad indicar que el extracto empieza: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit… que significa No hay nadie que ame el dolor mismo, que lo busca y lo quiera tener, simplemente por que es el dolor.
Lorem ipsum en minúsculas:
LOREM IPSUM en mayúsculas:
Existen webs que generan párrafos de Lorem ipsum: http://es.lipsum.com/ donde se pueden solicitar cuantos párrafos se necesitan.
Placeholders
Los placeholders son servicios que permiten cargar una imágen al azar (algunos dentro de una temática) con unas dimensiones exactas. Podríamos denominarlo el lorem ipsum de las imágenes 😉
Existen varios placeholders online.
Flickholdr
Utiliza las imágenes de Flickr para las imágenes de tus maquetas. Es el placeholder oficial de Flickr que permite especificar unas dimensiones, mediante tags puedes elegir temática e incluso aplicar efectos.
http://flickholdr.com/539/350/robot
La estructura sería
http://flickholdr.com/width/height/tag1,tag2,…,tag3/effect
- Dimensiones concretas: http://flickholdr.com/539/350
- Etiquetas/tags: http://flickholdr.com/539/350/robot,soccer
- En blanco y negro: http://flickholdr.com/539/350/robot,soccer/bw
- Offsets: http://flickholdr.com/200/300/robot,soccer/1
Lorempixel
Como su nombre indica se basa en el concepto de lorem ipsum 😉 Otro placeholder muy útil con similares características al anterior: dimensiones, etiquetas, blanco y negro e incluso con un texto.
http://lorempixel.com/539/350/sports
La estructura sería http://lorempixel.com/width/height
- Dimensiones: http://lorempixel.com/539/350
- En blanco y negro: http://lorempixel.com/g/539/350
- Con etiquetas (abstract, animals, city, food, nightlife, fashion, people, nature, sports, technics, transport): http://lorempixel.com/539/350/sports
- Con texto: http://lorempixel.com/539/350/sports/los-tiempos-cambian
Placekitten
Este me hace mucha gracia porque es solo de gatitos… pero ¿quién puede resistirse a unos preciosos gatitos? 😉
http://placekitten.com/539/350
La estructura sería http://placekitten.com/width/height
- Dimensiones: http://placekitten.com/539/350
- En blanco y negro: http://placekitten.com/g/539/350
¡Eso sí! Hay que acordarse luego de cambiar los textos e imágenes al pasar a producción porque si no se pueden dar errores que pueden dejar a más de uno de piedra. WTF!
