Presentació

Lorem.cat és un conjunt d'eines web per a dissenyadors fetes a mida pensades per alleugerir alguna de les tasques diàries a que porto a terme a Estudi FGH.net: omplir maquetes amb textos i imatges, extreure els colors d'un logotip, crear gammes cromàtiques o comprovar com es veuen les pàgines webs en diferents dispositius.



En els darrers anys he utilitzat moltes de les eines existents, amb els seus punts forts i també les seves mancances. Finalment he decidit desenvolupar a la meva mida tot aquest seguit d'eines per unificar-les en un sol lloc. Actualment hi ha disponibles quatre categories amb diferents eines a l'abast de qualsevol dissenyador, maquetador, escriptor, programador, xafarder o netejapiscines que les vulgui emprar:



Textos

Necessites textos per anar Tirant?
Genera un text aleatori per farcir les teves maquetes.

Obrir Instruccions


Imatges

Busques imatges per omplir?
Selecciona les opcions per demanar imatges sobre la marxa.

Obrir Instruccions


Colors

Vols posar color a la teva vida?
Crea gammes cromàtiques i extreu paletes a partir d'imatges.

Obrir Instruccions


Mides

Com veuen la teva web?
Comprova la teva web en tot tipus de dispositius.

Obrir Instruccions


Consideracions del Projecte

Lorem.cat no reinventa la roda, simplement unifica i personalitza tot un seguit de llibreries ja conegudes per utilitzar-les amb més comoditat i rapidesa. Tant en el disseny com en la programació s'ha prioritzat fer que les eines siguin pràctiques en el dia a dia, a més d'agradables a la vista i en el seu ús.

Són eines nascudes de la necessitat de millorar i aprendre, però amb un objectiu concret: que siguin prou bones com per utilitzar-les en la feina de l'Estudi, ja sigui maquetant llibres, programant pàgines web o dissenyant imatges corporatives:

  • Immediatesa en la generació dels resultats.
  • Rapidesa en copiar el resultat per poder-lo utilitzar.
  • Personalització. Fet a mida.
  • Agradable. Ús intuïtiu. Fotos maques.

Usuaris de Safari

El copiat automàtic representat amb Copiar no funciona en aquest navegador per problemes de compatibilitat amb les llibreries utilitzades. De moment només ho podem solucionar aconsellant Ctrl+C i Ctrl+V. Jo sóc de Chrome.


Textos Obrir eina

Generador de textos per farcir maquetes dels dissenys i pàgines web.

Selecciona les diferents opcions per generar un text aleatori a la teva mida:

  1. Tipus de text permet escollir el text d'origen, entre Tirant lo Blanc (novel·la cavalleresca de Joanot Martorell publicada el 1490 a València) i el típic Lorem Ipsum de tota la vida.
  2. Quantitat de text permet escollir el número de paràgrafs, frases o paraules generats.
  3. Format HTML afegeix etiquetes <p> i </p> al text de sortida per a maquetacions en format web.

A la part superior dreta es comptabilitzen el número de paraules i caràcters generats en el text final. Modificant qualsevol de les opcions es genera automàticament un nou text i s'actualitza el comptador.


Regenera un nou text aleatori amb les opcions seleccionades actuals.

copiar Copia al porta-retalls tot el text generat.


Avantatges de l'eina

  • Rapidesa. Només entrar estàs a un sol clic de tenir dos paràgrafs de Tirant lo Blanc aleatoris copiats al porta-retalls. Cada canvi en les opcions genera de forma immediata un nou text i pot crear grans quantitats de paràgrafs al moment.
  • Aleatorietat. De veritat. Els textos generats es formen a partir de paraules, i no de frases o paràgrafs predefinits. Ajuntem paraules i tenim frases. Ajuntem frases i tenim paràgrafs. D'aquesta manera els textos són sempre diferents i evitem repeticions excessives en les nostres maquetes o haver de generar més paràgrafs del compte per esborrar-ne els primers. Perden sentit, ho sabem, però son de farciment, i aquesta és la seva funció.
  • Tirant lo Blanc. Perquè fa cultura, compleix com a text de farciment, ens agrada com queda a les maquetes i el Lorem Ipsum ja està molt vist. Tot i que també hi ha l'opció.

Imatges Obrir eina

Generador d'imatges per omplir sobre la marxa pàgines web amb imatges de mostra.

Aquesta eina està pensada per generar imatges a la nostra mida i color per utilitzar-les durant el disseny i maquetació de pàgines webs, prototips i aplicacions. Selecciona les diferents opcions per generar una imatge personalitzada:

  1. Mides: Amplada i alçada en píxels de la imatge generada.
  2. Colors: Permet escollir el color de fons i del text de la imatge per adaptar-la al teu disseny.
  3. Text personalitzat: Per defecte la imatge mostra les mides de la mateixa, es pot modificar per un text propi.

Modificant qualsevol de les opcions es genera automàticament una nova imatge en format GIF i s'actualitza el codi corresponent per utilitzar-la. Només cal copiar el codi i utilitzar-lo per incloure la imatge al vostre prototip.


Genera una nova imatge amb les opcions per defecte.

copiar Copia al porta-retalls el codi de la imatge generada. També funciona clicant el propi text del codi generat.


Generar imatges dinàmicament

Una de les avantatges d'aquesta eina per maquetar prototips és que les imatges es generen sobre la marxa. No és necessari entrar a la web de Lorem.cat per crear noves imatges o modicar-ne les existents. Només cal conèixer com funciona l'enllaç que crea el generador segons les opcions seleccionades per utilitzar-lo en el teu codi:

<img src="https://lorem.cat/MIDES/COLOR-FONS/COLOR-LLETRES&text=TEXT PERSONALITZAT" />


Només és obligatori declarar com a mínim una mida, que generarà una imatge quadrada. La resta d'opcions són això, opcionals, i si no s'introdueixen es mostrarà per defecte en color gris fosc de fons, lletres blanques i les mides de la imatge.

  • Les mides s'han d'expressar Amplada x Alçada en px. Per exemple: 450x280

  • Els colors en codi hexadecimal. Només cal un dígit perquè funcioni. Per exemple el blanc es pot mostrar com aF i passarà a ser #FFFFFF. Primer el color de fons seguit del color del text.

  • Pel text personalitzat cal afegir &text=Un text profund al final de la cadena.

Amb els exemples a continuació quedarà més clar el funcionament:


Exemples: Codi i Resultat

  • Només una mida (quadrat de 300px):

    <img src="https://lorem.cat/300" />



  • Amplada (450px) i alçada (220px):

    <img src="https://lorem.cat/450x220" />



  • Mides (385 x 305px) i color de fons (#990000):

    <img src="https://lorem.cat/385x305/900" />



  • Mides (650 x 105px) , color de fons (#EEEEEE) i color del text (#333333):

    <img src="https://lorem.cat/650x105/E/3" />



  • Mides (580 x 425px) colors (#999999 i #FFFFFF) i text personalitzat:

    <img src="https://lorem.cat/580x425/9/F&text=Lorem.cat" />


Avantatges de l'eina

  • Versatilitat. Permet crear i modificar imatges per a maquetes sense accedir a la web ni obrir cap editor d'imatges. Només cal afegir el codi i personalitzar les opcions. Podem modificar les mides, colors i text sobre la marxa, només canviant el codi utilitzat. La imatge s'actualitza de forma immediata creant-ne una de nova i estalviant-nos perdre temps obrint Photoshop per crear i modificar imatges de mostra a mides i colors que s'adaptin al nostre disseny.

Colors Obrir eina

Crea gammes cromàtiques segons la seva harmonia i extreu paletes de colors de les teves imatges.

Utilitza la roda de colors per generar gammes cromàtiques pels teus dissenys. Pots modificar el comportament de les mostres canviant el tipus d'harmonia amb el selector superior esquerra. Hi ha disponibles cinc mètodes diferents basats en la teoria del color, a més de l'opció personalitzada que permet el moviment lliure de les mostres per la roda individualment.


Copiar Clicant qualsevol de les mostres es copiarà el seu valor en format hexadecimal, per exemple #990000.



Extreure paleta de colors a partir d'una imatge


A la part superior dreta hi ha l'eina Extractor d'imatges que serveix per analitzar els colors de qualsevol imatge.

El funcionament és molt intuïtiu i només cal arrossegar i deixar anar les imatges de l'ordinador per analitzar-les. Es pot fer amb vàries de cop, sempre que siguin en formats compatibles (JPG, GIF i PNG). També es pot provar amb algunes de les imatges de mostra.

Un cop analitzada la imatge s'extreu el color dominant de la mateixa i una paleta de 10 colors que la formen.


Copiar Clicant qualsevol de les mostres es copiarà el seu valor en format hexadecimal, per exemple #6b3310


Avantatges de l'eina

  • Utilitat. La roda de colors és molt pràctica per crear gammes cromàtiques per tot tipus de dissenys. Permet seleccionar de forma molt visual una mostra de base i buscar colors complementaris, anàlegs, o crear una escala de lluminositat adequada.
  • Practicitat. L'extractor d'imatges permet simplificar els tons de fotografies per crear gammes cromàtiques pròpies a partir de la imatge. Però també es pot utilitzar per extreure els colors d'un logotip, per exemple.

Mides Obrir eina

Comprova com es veuen les pàgines web en dispositius de diferents mides.

Introdueix una adreça web i visualitza com s'adapta en tot tipus de dispositius:

  1. Adreça web de la pàgina que vulguis analitzar. Prem entrar per carregar-la.
  2. Mides permet personalitzar l'amplada i alçada de visualització per unes mides concretes en píxels. També es pot modificar la mida de visualització arrossegant la cantonada inferior dreta de la vista que conté la pàgina.
  3. Dispositius conté una selecció de mòbils, tauletes, portàtils i sobretaula amb les mides ja predefinides.

A la part inferior de la pantalla veuràs la mida en pixels de la teva pantalla per tenir una referència real.


Girar Intercanvia amplada i alçada, simulant el gir automàtic d'un mòbil o tauleta.


Avantatges de l'eina

  • Agilitat. Comprovacions ràpides de com funciona el disseny adaptatiu de les pàgines web realitzades o en desenvolupament en múltiples dispositius. Poder mostrar amb més facilitat en què consisteix el tan sol·licitat comportament responsive.
Si voleu jugar una estona proveu lorem.cat/disseny-adaptatiu.html repetidament per crear un petit bucle espai-temporal com les nines ruses.

Crèdits

Un projecte d'entretemps amb fotografies pròpies
fet a les Gavarres per Estudi FGH.net | Comunicació Audiovisual


La primera versió (Cim delMontigalar) d'aquesta web es va publicar l'octubre del 2011.
Només compta amb el generador de textos, però pels nostàlgics està disponible aquí.

Aquesta segona versió (Puig d'Arques) ha estat desenvolupada al llarg del 2015.
Refeta de zero i afegides les eines Imatges, Colors i Mides.
Està previst incloure properament una cinquena categoria relacionada amb codi web, així com millores de les eines actuals.
Darrera actualització: maig 2017

Accés i ús lliure. Sense registre ni publicitat (sempre que el servidor es pugui mantenir en condicions).
Si vols col·laborar, tens cap dubte o només vols saludar, pots fer-ho a través del Contacte o el correu info@estudifgh.net


Crèdits addicionals
Fotografies d'Estudi FGH.net i del projecte AuP.cat per Alex Ambit.
Icones de Font Awesome i textures de Subtle Patterns.
Funciona amb PHP, Bootstrap 3, AngularJs, jQuery i Mustache
Utilitza codi amb llicència MIT de Lauren Sperber, Nguyen Huu Phuoc i Fatih Kadir Akın, Zeno Rocha, Brian Grinstead, Lokesh Dhakar, Benjamin Knight i Russell Heimlich entre altres. Ha implicat moltes hores a GitHub. Programat amb Brackets.
Inspirat en les sortides de sol pel Puig d'Arques durant l'hivern.
I la necessitat d'una eina feta a mida.