Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Creando fácilmente imágenes de relleno para tus prototipos
#1
Ladrillo 
Aquí le straigo un pequeño tutorial que eme ncontree en mi biblioteca presonal, espero no estar quebrantando ninguna regla del foro con ello.

saludos
Creando fácilmente imágenes de relleno para tus prototipos
Al crear prototipos o wireframes de sitios y aplicaciones web, es habitual incluir contenidos de relleno por no disponer de los contenidos definitivos. Rellenar texto es muy sencillo con el famoso Lorem Ipsum. Sin embargo, incluir imágenes de relleno no es tan fácil, ya que requiere mucho tiempo preparar imágenes con diferentes tamaños.
La librería holder.js, creada por el diseñador y programador Ivan Malopinsky, soluciona este problema creando las imágenes de relleno directamente en el navegador. Las imágenes se crean mediante el elemento <canvas> y otras técnicas similares, por lo que funciona bien en todos los navegadores móviles y de escritorio, incluyendo Internet Explorer.
Generando imágenes de relleno
Antes de generar las imágenes, descarga holder.js y enlaza la librería en tus páginas (también puedes instalarla mediante Composer, Bower, etc.):
<!DOCTYPE html>
<html>
    <head>
        ...
        <script src="/js/holder.js"></script>
    </head>
    <body> ... </body>
</html>
A continuación, genera la primera imagen de relleno utilizando la siguiente sintaxis:
<img src="holder.js/250x250">
El truco consiste en utilizar un valor especial para el atributo src de la imagen. Este valor está formado por el texto holder.js seguido de las dimensiones en píxeles de la imagen que se quiere generar (con el formato anchura x altura).
La siguiente imagen muestra el resultado del ejemplo anterior (ten en cuenta que la imagen no existe físicamente y está siendo generada en tiempo real por tu navegador):
 
Como el valor del atributo src no corresponde a ninguna imagen que exista físicamente, es posible que en Firebug y en herramientas similares veas un montón de errores. Para evitarlo, puedes utilizar el atributo data-src de HTML5 en vez del tradicional atributo src:
<img src="holder.js/250x250">
 
<img data-src="holder.js/250x250">
Personalizando las imágenes de relleno
Por defecto, holder.js añade a cada imagen un texto mostrando sus dimensiones. Si quieres utilizar un texto propio, añade la propiedad text. Esto puede ser útil por ejemplo para indicar que una imagen de relleno representa en realidad a un anuncio:
<img data-src="holder.js/728x90/text:ANUNCIO">
Y este es el resultado de generar la imagen de relleno tal y como la muestra tu navegador:
 
El color de las imágenes generadas por defecto es gris claro. Para hacer que las imágenes se integren mejor con tu diseño, holder.js define seis temas: sky (azul), vine (verde), lava (naranja), gray (el gris claro por defecto), industrial (gris muy oscuro) y social (azul Facebook). Cambia el tema de cada imagen indicando su nombre después de sus dimensiones:
<img data-src="holder.js/200x200/sky">
<img data-src="holder.js/200x200/vine">
<img data-src="holder.js/200x200/lava">
<img data-src="holder.js/200x200/gray">
<img data-src="holder.js/200x200/industrial">
<img data-src="holder.js/200x200/social">
Y así se ve este ejemplo en tu navegador:
 
En la documentación de holder.js se explica cómo crear tus propios temas. No obstante, si lo que quieres es modificar rápidamente el color de una imagen de relleno, lo puedes hacer indicando el color de fondo y el color del texto después de sus dimensiones.
<img data-src="holder.js/400x200/text:LIBROSWEB/#CC1414:#FFF">

 
Imágenes de relleno responsive
Aunque el concepto de imágenes responsive todavía no está tan desarrollado como debería, la librería holder.js sí que permite generar imágenes con tamaños relativos que se adaptan a los dispositivos o a la anchura de otros elementos de la página. Para ello, indica el tamaño en porcentaje en vez de en píxeles:
<img data-src="holder.js/100%x90">
<img data-src="holder.js/728x20%">
El único problema de las imágenes de relleno responsive es que muestran su tamaño en píxeles. Si quieres que muestren su tamaño en porcentaje, añade la propiedad textmode:literal:
<img data-src="holder.js/100%x90/textmode:literal">
<img data-src="holder.js/728x20%/textmode:literal">
Imágenes de relleno de fondo
Las imágenes de relleno también se pueden generar como imagen de fondo de cualquier elemento. Para ello, aplica en primer lugar la clase holderjs (todo junto y sin punto) a cualquier elemento:
<div id="imagen" class="holderjs"></div>
<div id="anuncio" class="holderjs"></div>
Después, aplica la propiedad background: url(...) utilizando la misma sintaxis que en los ejemplos mostrados anteriormente. La única diferencia es que tienes que añadir el carácter ? por delante de la URL:
#imagen  { background: url("?holder.js/250x250") no-repeat; }
#anuncio { background: url("?holder.js/300x250/text:ANUNCIO") no-repeat; }

Documentación Holder
#2
Muy útil. Lo pondré a prueba.Guiño
Metas En Skylium:
-Llegar a 30 mensajes []
-Llegar a 100 mensajes []
-Llegar a 250 mensajes []
-Conseguir 25 de reputación []

#3
Extremadamente útil, hay que ponerlo a prueba para que pueda servir. Lo haré en mi próximo proyecto web...
#4
Excelente, puede ser útil a la hora de enfrentar un proyecto web, creo que lo utilizaré...
#5
Ya me imaginaba que debía existir alguna manera de hacer esto, muchísimas gracias por el aporte Sonrisa
I'm a happy person
WWW
#6
Muy bien explicado y el enlace al que haces referencia esta excelente... Gracias por compartir...




SI TE LLAMA LA ATENCION UNA ESTRELLA... SIGUELA,
SI TE CONDUCE AL PANTANO... YA SALDRAS DE EL.
PERO SI NO LA SIGUES... TODA LA VIDA,
PENSARAS QUE ESA ERA TU ESTRELLA.




WWW
#7
Muy buena, tiol, yo antes solo ponia el fondo de un unico color. Gracias le echare un vistazo a ver que tal.
#8
Que bueno que les funciono gracias por tomarse el tiempo de leer y agradecer.
#9
Se ve muy interesante y útil a la hora de ir avanzando en un proyecto web pero que aún no tienes las imagenes definitivas, puedes poner imagenes de relleno más fácilmente e invirtiendo menos tiempo, gracias por compartir amigo, saludos.
WWW
#10
Excelente muy rapido yo lo hacia con css solo de fondo unicolor


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Webs de editores de imágenes Sprystate 3 56 08-08-2018, 02:06 PM
Último mensaje: fercho alb
  Optimizadores y Redimensionadores de imágenes Sprystate 7 143 06-08-2018, 11:00 PM
Último mensaje: ReyNexo23
Arcoiris Editor de imagenes - Pixlr WMasterT 4 160 31-07-2018, 07:09 PM
Último mensaje: ivanloga
  Sitio recomendado para descargar imagenes libres para uso comercial yuma2009 0 49 09-07-2018, 07:38 PM
Último mensaje: yuma2009
  SUPER COMPRESOR DE IMAGENES alieninc 9 352 25-12-2017, 11:00 PM
Último mensaje: betiko2424
  [upload]Excelente web para subir imagenes yuma2009 20 978 03-01-2017, 08:21 PM
Último mensaje: gassip
  ALINEACIÓN DE IMAGENES luisalvare22 12 968 04-10-2016, 05:48 AM
Último mensaje: garcon
  Lector de RSS deslizante y con imágenes olegario 3 584 04-02-2016, 08:13 PM
Último mensaje: zapikero
  Optimizacion de Imagenes metalfuck 15 994 06-10-2015, 11:17 PM
Último mensaje: uzumakysan
  Imagenes de tu pantalla con Lightshot canpios 0 310 26-08-2015, 08:55 PM
Último mensaje: canpios



Usuarios navegando en este tema: 1 invitado(s)