LOREM.cat
Eines per a dissenyadors digitals i analògics en català.
Versió 2.1 | Puig d'Arques
Eines per a dissenyadors digitals i analògics en català.
Versió 2.1 | Puig d'Arques
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:
Necessites textos per anar Tirant?
Genera un text aleatori per farcir les teves maquetes.
Busques imatges per omplir?
Selecciona les opcions per demanar imatges sobre la marxa.
Vols posar color a la teva vida?
Crea gammes cromàtiques i extreu paletes a partir d'imatges.
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:
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.
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:
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.Quantitat de text
permet escollir el número de paràgrafs, frases o paraules generats.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.
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:
Mides:
Amplada i alçada en píxels de la imatge generada.Colors:
Permet escollir el color de fons i del text de la imatge per adaptar-la al teu disseny.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.
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.
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.
&text=Un text profund
al final de la cadena.Amb els exemples a continuació quedarà més clar el funcionament:
<img src="https://lorem.cat/300" />
<img src="https://lorem.cat/450x220" />
<img src="https://lorem.cat/385x305/900" />
<img src="https://lorem.cat/650x105/E/3" />
<img src="https://lorem.cat/580x425/9/F&text=Lorem.cat" />
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
.
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
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:
Adreça web
de la pàgina que vulguis analitzar. Prem entrar per carregar-la.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.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.
lorem.cat/disseny-adaptatiu.html
repetidament per crear un petit bucle espai-temporal com les nines ruses.
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.