¿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.
Ojo, no confundir con el atributo placeholder de HTML, que es una cosa distinta. En este post encontrarás más información sobre este punto en particular.
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:
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 ❤️).
El atributo Placeholder en HTML: qué es y cómo se utiliza
.
¡Espero que este post te sea útil para tus proyectos!
.
