Crea tus maquetas web con Lorem ipsum y Placeholders

elad . martes 6 de noviembre de 2012. a las 11:52

lorem ipsum placeholder maqueta web

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 dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

LOREM IPSUM en mayúsculas:

LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT. UT WISI ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCI TATION ULLAMCORPER SUSCIPIT LOBORTIS NISL UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTEM VEL EUM IRIURE DOLOR IN HENDRERIT IN VULPUTATE VELIT ESSE MOLESTIE CONSEQUAT, VEL ILLUM DOLORE EU FEUGIAT NULLA FACILISIS AT VERO EROS ET ACCUMSAN ET IUSTO ODIO DIGNISSIM QUI BLANDIT PRAESENT LUPTATUM ZZRIL DELENIT AUGUE DUIS DOLORE TE FEUGAIT NULLA FACILISI. NAM LIBER TEMPOR CUM SOLUTA NOBIS ELEIFEND OPTION CONGUE NIHIL IMPERDIET DOMING ID QUOD MAZIM PLACERAT FACER POSSIM ASSUM. TYPI NON HABENT CLARITATEM INSITAM; EST USUS LEGENTIS IN IIS QUI FACIT EORUM CLARITATEM. INVESTIGATIONES DEMONSTRAVERUNT LECTORES LEGERE ME LIUS QUOD II LEGUNT SAEPIUS. CLARITAS EST ETIAM PROCESSUS DYNAMICUS, QUI SEQUITUR MUTATIONEM CONSUETUDIUM LECTORUM. MIRUM EST NOTARE QUAM LITTERA GOTHICA, QUAM NUNC PUTAMUS PARUM CLARAM, ANTEPOSUERIT LITTERARUM FORMAS HUMANITATIS PER SEACULA QUARTA DECIMA ET QUINTA DECIMA. EODEM MODO TYPI, QUI NUNC NOBIS VIDENTUR PARUM CLARI, FIANT SOLLEMNES IN FUTURUM.

lorem ipsum generador

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

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.

placeholder lorempixel
http://lorempixel.com/539/350/sports

La estructura sería http://lorempixel.com/width/height

Placekitten

Este me hace mucha gracia porque es solo de gatitos… pero ¿quién puede resistirse a unos preciosos gatitos? 😉

placeholder gatos placekitten
http://placekitten.com/539/350

La estructura sería http://placekitten.com/width/height

¡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!

monolito lorem ipsum

Etiquetas: , , ,

Enviar comentario