Rápido y fácil: cree maquetas HTML con RoughDraft.js

En el proceso de desarrollo del sitio web del próximo cliente, llega inevitablemente el momento en que tendrá que presentar un diseño que parezca real, aunque casi siempre no tiene ningún contenido real en ese momento. La necesidad urgente de contenido de marcador de posición está en el aire y revisas tus miles de millones de marcadores para encontrar el ajuste adecuado. El futuro lo ve más relajado tan pronto como siga mi consejo y comience a usar RoughDraft.js para crear rápidamente una maqueta adaptada a las necesidades de su proyecto. ¿Mencioné que no necesitas poner mucho esfuerzo en ello?

Borrador en acción

RoughDraft.js: mucho contenido con solo unas pocas líneas de código

RoughDraft.js es una herramienta para la salida automática de contenido basada en parámetros configurados individualmente. Una vez que la biblioteca de JavaScript se ha incrustado y llamado, solo necesita unas pocas líneas de código para crear una gran cantidad de contenido en varios diseños:

<div data-draft-repeat="20">
  <img data-draft-image="200/100" />
  <p data-draft-text="15/w"></p>
</div>

El contenido que se va a generar se marca como cualquier otro contenido. Los atributos de datos contienen información adicional, que RoughDraft.js lee y luego usa para generar la salida correspondiente. En nuestro ejemplo anterior, le pedimos al JavaScript que genere un DIV y repetirlo veinte veces. Luego, los contenedores estarán equipados con una imagen de 200 por 100 píxeles, seguida de un párrafo de texto con una cantidad de 15 palabras cada uno. Si desea poder diseñar el contenido generado usando CSS o proporcionar más funciones, simplemente agregue estos como clases y atributos al HTML.

Incruste algunas imágenes de Ipsum y marcador de posición

Los textos e imágenes ficticios necesarios se pueden extraer de diferentes fuentes. Puede usar el clásico Lorem Ipsum, así como Bacon Ipsum y algunas variantes aún más exóticas. Las imágenes se pueden generar utilizando placehold.it, placekitten.com y varios más. Las fuentes se pueden configurar fácilmente y, por lo tanto, cambiar fácilmente, en caso de que al cliente no le guste el contenido de gatitos para su maqueta:

$(window).roughDraft({
  "author": "bacon",
  "illustrator" : "placehold"
});

Si bien el tamaño de las imágenes siempre se define en píxeles, los textos se pueden configurar de varias maneras. Además de definir una cantidad de palabras („#/w“), también podríamos establecer una cantidad de oraciones („#/s“) o párrafos („#/p“). Los formatos especiales se ocupan de la salida de números o información de perfil de usuario:

<p data-draft-number="100-999"></p>
<p data-draft-user="email"></p>

Para ver un poco de variedad en los números, puede definir un rango del cual se elige un número al azar. Cuando se trata de la información del usuario, puede elegir entre nombre, dirección de correo electrónico y país.

Conclusión: Implementar RoughDraft.js es muy sencillo. Ofrece varias posibilidades y muchas opciones para tener muchos tipos de contenido diferentes generados de forma muy individual. Los cambios en la configuración también son instantáneos. Necesita menos texto y más imágenes o textos más largos e imágenes más pequeñas o… Simplemente cambie dos parámetros y listo. Como afirma el desarrollador, el futuro podría ver incluso una funcionalidad mejorada, como la posibilidad de incrustar videos y otros tipos de contenido. Manténganse al tanto…

enlaces relacionados

• Cree rápidamente y cree prototipos de una maqueta HTML completamente interactiva | Borrador.js

(dpe)