Este post fue visto: 162

¿Qué es un Placeholder? Sí, qué palabra rara, ¿no? Si estás empezando en el desarrollo y programación web, saber qué es y cómo se usa este elemento te va a facilitar un montón la tarea de maquetar un sitio web o aplicación. Pero además, te dejo ejemplos que yo misma utilizo para mis maquetas.

Ahora sí, vamos a ello:

.

Hola Dummy

Un Placeholder es, ni más ni menos, que un elemento provisorio, también llamado dummy. Su función es «rellenar» un espacio que más adelante se reemplazará por la imagen o video definitivos.

Cuando armamos mockups de diseño, solemos colocar un recuadro de color gris, o una imagen libre de derechos (royalty-free) que tenga relación con el contenido. Al maquetar, generalmente usamos esa misma imagen. Aquí hay que tomarse previamente el trabajo de recortar y hostear.

Ok pero, ¿qué pasa cuando creamos, o utilizamos/reutilizamos una plantilla, sin pasar por la instancia previa del mockup?

Bien, es ahí donde entra en escena nuestro amigo Placeholder.

Aplicarlo es muy sencillo: en el tag IMG de nuestro código vamos a pegar la URL del placeholder elegido. Nos quedaría algo así <img src=»url_del_placeholder» alt=»dummy»> sin olvidar definir el width y el height de la imagen.

Y listo, eso es todo.

A continuación te muestro sitios web que proveen Placeholders totalmente gratuitos, de donde podrás obtener estas URL e incluso elegir temática y/o tamaño de la imagen.

.

1- Lorem Picsum

Esta es una de mis favoritas y la que más utilizo. Las imágenes cambian de forma aleatoria cada vez que recargas el sitio, a menos que hayas elegido una en particular. Hay diferentes temáticas: paisajes, personas, objetos, ciudad, alimentos, abstracto, etc. Podés también elegir que las imágenes aparezcan en un tamaño determinado, tanto en ancho como en alto. La ventaja adicional es que también podés usarlas como background para recuadros, formularios, secciones, etc., aplicando la URL en la hoja de estilo CSS.

La imagen de abajo por ejemplo, tiene 800px de ancho por 250px de alto:

Picsum imagen

Link: https://picsum.photos/

.

2- Placeholder.com

Es otro sitio muy conocido, es más, creo que uno de los pioneros. No usa una imagen bonita como el anterior, pero tiene otras ventajas. Una es que coloca en formato de texto el tamaño de la imagen en px. Y también nos permite customizar el tamaño, el color de fondo y el texto que queremos que se vea. Así por ejemplo:

Link: https://placeholder.com/

.

3- Divertidos

Y porque tampoco hay que tomarse todo tan en serio 😁, existen Placeholders divertidos, con imágenes para todos los gustos: con gatitos, con ositos, con bacon, con Bill Murray, con Nicholas Cage (incluye GIFs animados), y señores con barba.

.

Y el extra del post, es un Placeholder en video, hecho por mí:

Podés utilizarlo libremente, desde la opción Compartir / Insertar del video que está en mi canal de Youtube (se agradece dejar un ❤️).

¡Espero que este post te sea útil para tus proyectos!

.
Post inspirado por este hilo de Twitter.

.

Avatar

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicación Digital.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Cerrar

Sobre mí

¡Bienvenidos a mi blog! Mi nombre es Alejandra y soy diseñadora gráfica y web, también programadora, community manager, redactora e ilustradora.

Fundadora de aleare design estudio de diseño y comunicación digital, desde el 2008 brindando servicios a empresas y agencias digitales en varias ciudades de Argentina y también en México, España, Francia y Noruega.

Mi Filosofía

“Tienen que encontrar eso que aman […]. Su trabajo va a llenar gran parte de sus vidas […] y la única forma de hacer un gran trabajo es amando lo que hacen. Si todavía no lo han encontrado, sigan buscando. No se detengan […]. Sean curiosos. Sean inquietos.”

Steve Jobs
Discurso de apertura, Universidad de Stanford, 2005