7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. PHP

Contenido de relleno: Herramientas, consejos y un ejemplo dinámico

Scroll to top
Read Time: 18 mins

Spanish (Español) translation by Manuel (you can also view the original English article)

A medida que el diseño en el navegador se hace más popular (y cómodo), aumenta la necesidad de herramientas de diseño útiles. Un conjunto de herramientas que se está volviendo bastante útil gira en torno al contenido de relleno. En la actualidad, existen diversos recursos para ayudar a los diseñadores que necesitan contenido de relleno, ya sea texto o imágenes.

Debido a que gran parte del diseño de sitios web solía realizarse en Photoshop, copiar/pegar manualmente el texto de la web era el mejor método para "rellenar" un diseño con contenido ficticio. Sin embargo, ahora que gran parte del diseño de sitios web se realiza en el navegador, ¿por qué no dejar que el ordenador haga todo el trabajo de "relleno" por ti?

En este tutorial cubriremos las opciones para el contenido de relleno. Todo, desde copiar/pegar texto e imágenes estáticas hasta generarlas dinámicamente.


Unas palabras sobre el contenido de relleno

Hay puristas que recomiendan evitar a toda costa los contenidos de relleno. Uno de los argumentos es que el contenido de relleno te abstrae de la experiencia "real" del sitio web que estás construyendo:

El objetivo es acercarse lo más posible a la experiencia real del cliente. No te abstraigas de la experiencia real. Cada capa que se elimina te aleja más y más de la experiencia real del cliente.

El hecho es que a veces no se puede imitar la experiencia real del cliente. Si tienes sitios web de marketing sencillos con contenido estático elaborado por un estratega de contenidos, entonces, por supuesto, utiliza ese contenido para construir el diseño del sitio web. El contenido debe informar el diseño. Pero si estás diseñando una aplicación web llena de contenido generado por el usuario, a menudo es imposible diseñar en torno al contenido real porque tú mismo no puedes generarlo; eso lo hacen tus usuarios. Además, desde el punto de vista de la privacidad, es probable que no se permita utilizar datos reales de los clientes para rellenar las maquetas. Por lo tanto, estás impedido a acercarte lo más posible a la experiencia del usuario por cuestiones legales o de privacidad.

Sin embargo, hay medidas que puedes tomar para acercarte a la experiencia real del cliente:

Si tu sitio o aplicación requiere la introducción de datos, introduce palabras reales y relevantes y escribe el texto, no lo pegues de otra fuente. Si se trata de un nombre, escribe un nombre real. Si se trata de una ciudad, escribe una ciudad real.

Si utilizas el tipo de contenido de relleno adecuado, es posible que se asemeje mucho a la experiencia final del usuario. Digamos, por ejemplo, que tu diseño requiere una lista de nombres. En lugar de utilizar:

  • Lorem Ipsum
  • Sit Amet
  • Faucibus Eros
  • Carin Pulvinar

Puedes usar nombres reales:

  • John Stalewood
  • Jessica Alley
  • Stan Norwood
  • Trevor Singley

Una vez más, el objetivo es acercarse lo más posible a la experiencia real del cliente. Y si puedes hacerlo utilizando contenido de relleno, ¡hazlo!

Porque nos importa nuestro oficio, nuestras discusiones sobre herramientas y técnicas suelen basarse en las mejores prácticas y soluciones perfectas. Porque nos importa, nuestro flujo de trabajo y nuestra experiencia mejoran con cada proyecto. Sin embargo, las soluciones perfectas no suelen existir en el mundo real. Por eso, las alternativas pragmáticas (como el contenido de relleno) ayudan a terminar los proyectos a tiempo. Creo que esto está perfectamente bien, siempre que no comprometamos nuestros principios.

Mockups

Una maqueta preliminar, como todos sabemos, no se acerca en absoluto a la experiencia final del cliente. Es probable que tu diseño cambie drásticamente entre la primera y la última iteración. El contenido de relleno puede seguir siendo una herramienta valiosa para ver cómo fluye el texto por la página, alrededor de las imágenes y a través de los puntos de ruptura. Puede ayudarte a hacerte una idea de la ubicación de los elementos de diseño, el equilibrio de la página y el uso del espacio negativo.

Suprimirlo por completo no tiene sentido. El contenido de relleno puede ser una herramienta fundamental en la fase inicial de diseño para la creación rápida de prototipos y la iteración de conceptos de diseño. Una vez superadas las primeras fases del diseño, sería muy útil utilizar un contenido que se asemeje más a lo que el usuario acabará viendo.

Conclusión

El límite de la utilización de contenidos de relleno depende de ti. No hay un "sí, úsalo" o "no, es una desgracia". La respuesta a "¿debo utilizar contenido de relleno?" Es, como siempre parece ser, "depende". A veces, hablar de no utilizar contenidos de relleno se refiere más a un mundo ideal y no al mundo real. Tú eres un profesional, tú decides. Al final, aprenderás si tomaste o no la decisión correcta y la próxima vez que te enfrentes a la pregunta "¿debo usar contenido de relleno?", sabrás mejor cómo responder a esa pregunta.


Imágenes de relleno

Existen varias soluciones alojadas para insertar imágenes en tu documento HTML, que te permiten especificar varios atributos de la imagen a través de una URL. Por ejemplo, para usar placekitten simplemente pon el tamaño de la imagen que necesitas después de su URL. Luego, usa esa URL como el src de tu elemento <img>:

Si no te gustan los gatitos (¿por qué estás en Internet?), aquí tienes algunos servicios similares que ofrecen diferentes personalizaciones (consulta este resumen para ver más opciones):


Texto de relleno

Hay varias razones por las que necesitarías generar texto de relleno. Tal vez necesites generar párrafos enteros para conceptualizar el diseño de un blog. O tal vez necesites generar categorías de texto, como correos electrónicos y nombres para estilizar el diseño de una tabla. Sea cual sea tu necesidad, hay una gran variedad de soluciones para generar texto en tus diseños.

Copiar/pegar texto

Existen numerosos generadores de texto de relleno en la web. Como el diseño web a menudo trata de listas, tablas y otras estructuras de datos, muchos generadores ofrecen algo más que el relleno de párrafos Lorem Ipsum. A continuación se presenta una (pequeña) lista de generadores de texto de relleno. Cada uno de ellos ofrece una variedad de configuraciones de texto, como la generación de diferentes idiomas, la inclusión de texto en etiquetas HTML, el encadenamiento de texto con títulos/subtítulos, el ajuste de la longitud del texto y la negrita o cursiva de las palabras.

Para obtener una lista más completa de sitios web de generación de textos, aquí hay algunos resúmenes:

Generar texto de forma dinámica

Puedes generar dinámicamente contenido de relleno en tus documentos HTML utilizando una biblioteca JavaScript como:

A medida que se populariza el diseño en el navegador, la vieja técnica de copiar y pegar para rellenar contenidos puede resultar ineficaz. ¿Por qué no dejar que el ordenador se encargue de ese trabajo? Vamos a profundizar en esta técnica.


Ponerlo todo junto, dinámicamente

Intentemos poner en práctica algo de lo que hemos visto hasta ahora creando una maqueta de diseño. Para simplificar, imaginemos que se nos encarga la creación de un diseño de sitio web básico que muestre extractos de los artículos favoritos de alguien dispersos por toda la web. Llamaremos a esta persona Franky y llamaremos al diseño "Franky's Fav Five".

Este pequeño ejemplo debería ayudar a mostrar la utilidad del contenido generado dinámicamente al diseñar una maqueta en el navegador.


Paso 1: HTML y CSS básicos

En primer lugar, vamos a esbozar nuestro HTML básico.

Como puedes ver, estamos incluyendo tres recursos adicionales en nuestra página: un restablecimiento de CSS, una hoja de estilos CSS personalizada (que escribiremos más adelante) y un enlace a la versión alojada de Google de jQuery. Ahora, en nuestro archivo styles.css, vamos a incluir algunas reglas básicas de estilo para nuestra maqueta:


Paso 2: Crear y estilizar la cabecera

Ahora vamos a crear una cabecera sencilla para nuestra página. De nuevo, nada demasiado sofisticado ya que esto es solo un ejemplo de maqueta.

Ahora vamos a añadir un poco de estilo simple a nuestra cabecera

Ahora tenemos una página sencilla con una cabecera, así:


Paso 3: Artículo principal

Ahora vamos a crear el marcado para el extracto de nuestro artículo. El objetivo de este artículo no es mostrar técnicas de codificación CSS y HTML, sino cómo trabajar con contenido de relleno. Por lo tanto, cubriremos estos pasos muy rápidamente con un simple copiar y pegar. Primero configuraremos una sección contenedora y un artículo principal.

Nota: Entiendo que un nombre de clase "artículo" en un elemento de article puede parecer un poco absurdo, recuerda que esto es puramente una demo.

Imagen del artículo

Utilizaremos el servicio de marcadores de posición de imágenes de lorempixel para colocar imágenes en nuestro marcado. Como nuestros contenedores de artículos tienen un ancho máximo de 600px, ese es el tamaño de imagen que tomaremos de lorempixel.

Texto del artículo

Ahora colocaremos todo el texto de nuestro artículo en un div. Nuestra maqueta simple utilizará las siguientes piezas repetidas de contenido:

  • Título del artículo
  • Meta información sobre el artículo
    • Nombre del autor
    • Fuente del artículo
  • Extracto del artículo
  • Enlace leer más

Esencialmente, esta es nuestra plantilla para mostrar extractos de las lecturas favoritas de Franky. ¡Ahora vamos a darle estilo!

Estilizar el artículo

Tenemos nuestro marcado básico, así que empezaremos por estilizar el contenido.

Ahora tendrás una plantilla bastante simple para mostrar extractos de artículos que se parece a esto:


Paso 4: Introducir un poco de PHP

Hasta ahora tenemos un extracto del artículo (de cinco, ya que se trata de "Franky's Fav Five"). En lugar de copiar/pegar el marcado cuatro veces más, utilizaremos un bucle for en PHP. Haciendo esto se mantendrá una sola plantilla de nuestro extracto de artículo mientras se edita, pero múltiples extractos de artículo cuando se ve en el navegador. Esto facilita el mantenimiento; si alguna vez queremos modificar nuestra plantilla de extractos de artículos, no tendremos que hacerlo varias veces.

Envolvamos nuestro elemento article en el siguiente código:

Observa que nuestro bucle for comienza con la variable $i siendo igual a uno y se ejecutará hasta que sea menor que 6 (por lo que se ejecuta 5 veces).

NOTA: Asegúrate de renombrar tu archivo con la extensión .php si aún no lo has hecho.

Ahora deberías tener algo así:

¿Notas que nuestra imagen de lorempixel es la misma en cada artículo? Para conseguir una maqueta más realista, modificaremos ligeramente el src de la imagen para obtener una imagen diferente para cada extracto del artículo.

Obtención de diferentes imágenes con LoremPixel

LoremPixel permite personalizar ligeramente el tipo de imagen que se recupera. Aquí están las personalizaciones que permiten en su estructura de URL:

  • http://lorempixel.com/400/200
    • Solicita una imagen aleatoria de 400 x 200 píxeles
  • http://lorempixel.com/400/200/sports
    • Solicita una foto al azar de la categoría de deportes
  • http://lorempixel.com/400/200/sports/1
    • Solicita la foto núm. 1/10 de la categoría de deportes

Actualmente estamos usando la URL http://lorempixel.com/600/200. Lo que haremos es elegir una categoría, como deportes, y luego usar nuestra variable de conteo PHP $i para modificar la URL de manera que cada extracto de artículo solicite una imagen separada de la categoría de deportes.

Para ello, busca el elemento <img> y modifica tu fuente así:

Ahora, como la variable php count $i aumenta con cada bucle for, nuestras URL de imágenes solicitarán una imagen diferente cada vez. La salida de marcado HTML por PHP ahora se verá algo como esto:

Ahora deberíamos tener algo parecido a esto:


Paso 4: Insertar dinámicamente el contenido de relleno

Ahora que tenemos nuestra plantilla básica con una imagen diferente para cada extracto, queremos tener un contenido de relleno diferente para cada artículo. Esto nos ayudará a visualizar mejor el producto final.

Aquí es donde una biblioteca de contenido de relleno como faker.js es muy útil. Usando la API de faker.js junto con un poco de jQuery podemos rellenar dinámicamente nuestra plantilla HTML al cargar la página. Utilizar la API de faker.js es bastante sencillo. Puedes encontrar toda la API en la página de github de faker.js. Aquí está el ejemplo de uso:

Como puedes ver, al incluir faker.js en nuestra página tenemos entonces acceso a su API que puede generar nombres de relleno, correos electrónicos, direcciones, contenido y más. Basta con invocar el objeto Faker con uno de sus métodos correspondientes.

Implementación de Faker.js en nuestra propia página

Primero, vamos a añadir faker.js a nuestra página. Añadiremos el <script> correspondiente al final de la página, después de nuestra llamada a jQuery. Aquí está el enlace de nuevo: faker.js.

Ahora, vamos a intentar generar títulos de contenido falsos usando faker.js y jQuery. Si miras a través de la API de faker.js, notarás que hay métodos para generar frases, párrafos y palabras de contenido Lorem Ipsum. Como queremos algo parecido al título de un artículo, querremos una frase de Lorem Ipsum: Faker.Lorem.sentence(). Esto escupirá una sola frase como "praesentium est alias dolor omnis sequi voluptatibus", que será un buen contenido de relleno para el título de un artículo.

Nota: faker.js no mostrará una frase en mayúsculas. Usando la regla CSS text-transform: capitalize podemos forzar que la frase esté en mayúsculas; acercándonos así a un formato adecuado.

Empezaremos añadiendo una clase de faker-sentence a nuestra plantilla de título de artículo. Esto actuará como un gancho que permitirá a jQuery encontrar todos los elementos que deben tener su contenido reemplazado con frases de lorem ipsum.

Después, utilizando jQuery, recorreremos cada uno de los elementos de faker-sentence emitidos por PHP y sustituiremos nuestro contenido de relleno estático "Título del artículo aquí" por una frase de Lorem Ipsum generada aleatoriamente.

Ahora deberíamos tener algo en lo que cada uno de los títulos de nuestros artículos varíe en contenido y longitud y se asemeje más al contenido dinámico de nuestro sitio.


Paso 5: Rellenar toda la página

Ahora que hemos reemplazado todos los títulos de nuestros artículos. Pensemos en el resto del contenido de la página que queremos reemplazar. Todavía queremos llenar las siguientes piezas de la plantilla:

  • Nombre del autor: como John Williamson
  • Fuente en línea: como nombredeldominio.com
  • Texto de párrafo: como un párrafo lorem ipsum

En lugar de escribir jQuery para todas y cada una de las piezas de la plantilla que queremos reemplazar, abstraeremos la generación y el reemplazo del contenido y luego simplemente pasaremos lo que queremos reemplazar como argumentos.

Determinar qué generará faker.js

Primero, vamos a averiguar qué partes de faker.js vamos a utilizar para generar el contenido de relleno que necesitamos. Como hemos mencionado, necesitamos el nombre de una persona, un nombre de dominio y contenido de relleno de un párrafo. Faker.js tiene los siguientes métodos que podemos utilizar:

  • Faker.Name.findName(): nos da un nombre, como John Williamson
  • Faker.Internet.domainName(): nos da un nombre de dominio, como eldridge.co.uk
  • Faker.Lorem.paragraph(): nos da un párrafo de contenido Lorem ipsum

Añadir clases de HTML donde estamos poniendo el contenido de relleno

Ahora que sabemos qué contenido estamos generando, necesitamos añadir un elemento y una clase donde pondremos nuestro contenido de relleno. Como hicimos anteriormente, antepondremos a cada clase el prefijo "faker-", de esta forma cuando pasemos de crear un simulacro y dejemos de usar faker.js podremos encontrar y eliminar fácilmente las clases de relleno que no necesitemos.

Nota: asegúrate de que las clases de contenido de relleno coinciden con los nombres de los métodos de faker.js. Entonces, Faker.Name.findName() necesitará la clase HTML faker-findName y Faker.Internet.domainName() necesitará la clase faker-domainName, etc. Esto será útil cuando automaticemos la búsqueda y sustitución del contenido de relleno en jQuery.

Primero, vamos a manejar el autor mediante la adición de un elemento span con la clase apropiada:

Ahora manejaremos la fuente añadiendo una clase apropiada al enlace de la fuente:

Por último, vamos a manejar el extracto del artículo añadiendo un elemento span donde irá nuestro relleno lorem ipsum:

Ahora sólo tenemos que escribir un poco de jQuery que encontrará todos nuestros elementos de contenido de relleno y los llenará con contenido de relleno generado por faker.js.

Vamos a crear una variable llamada args. Aquí será donde definiremos los métodos de la API de faker.js que utilizaremos. Recuerda que nuestras clases HTML se asignan a los métodos de faker.js y simplemente llevan el prefijo faker-.

Nota: estamos añadiendo Faker.Lorem.sentence() a nuestros argumentos, así que puedes eliminar el JavaScript que creamos anteriormente en el paso 4 para encontrar/reemplazar los títulos de los artículos.

Ahora simplemente hacemos un bucle sobre cada uno de nuestros argumentos. La clave en el array se convierte en el objeto faker.js mientras que el valor en el array se convierte en el método faker.js. El valor de la matriz se asigna a la clase HTML para que jQuery sepa qué elemento debe buscar.

Ya está. Ahora deberías tener algo como esto:

Abstraer nuestro proceso de contenido de relleno de esta manera hace que añadir/eliminar nuevos tipos de contenido de relleno sea realmente fácil. Ahora en el futuro, si quieres añadir un nuevo tipo de contenido de relleno desde faker.js, como un correo electrónico Faker.Internet.email() todo lo que tienes que hacer es añadirlo a la variable args y luego crear un elemento HTML con una clase de faker-email donde quieras que se genere un correo electrónico falso.


Conclusión:

Hemos construido una sencilla maqueta en el navegador, mostrando un ejemplo de diseño de cinco extractos de artículos.

Nuestra plantilla para cada extracto de artículo es sólo 13 líneas de PHP/HTML, mientras que el HTML resultante sería mucho más que eso. Esto hace que la creación de prototipos sea rápida y fácil. En este punto, podríamos probar fácilmente la naturaleza responsiva del diseño y ver cómo el contenido y el texto se reflejan. Podríamos ajustar cualquier CSS que lo requiera, o podríamos añadir muy fácilmente más elementos de diseño con su correspondiente contenido de relleno. El contenido de relleno dinámico permite crear rápidamente prototipos de diseños. Tal vez lo necesites en un futuro proyecto.

Otros usos

Como posiblemente hayas visto, este tipo de prototipado podría ser útil para muchas otras tareas de diseño web, especialmente las basadas en datos. Por ejemplo, si necesitaras diseñar una tabla de contactos con nombres, direcciones, correos electrónicos, números de teléfono y más, podrías utilizar faker.js para generar fácilmente cualquier contenido de relleno que necesites. Esto te permite centrarte más fácilmente en el diseño de la tabla en lugar de tener que copiar/pegar toneladas de datos en tu HTML solo para tener una idea de cómo se ve y responde.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.