Us expliquem com funciona el programa de disseny web de programari lliure i col·laboratiu.
Penpot és el primer 'software' en línia per dissenyar webs i fer prototips de programari lliure desenvolupat a l'Estat. El programa, intuïtiu i amb moltes possibilitats, pot ser útil per a entitats que treballin amb la tecnologia tant a nivell corporatiu com amb grups de participants per dissenyar, per exemple, aplicacions.
El fet que sigui de programari lliure i codi obert contribueix a una tecnologia col·laborativa al servei de les persones allunyada del control de monopolis tecnològics, facilita la participació i permet l'actualització constant millorant així la seguretat de l'eina. La plataforma que, a més, és gratuïta, està pensada per treballar en equip i compartir coneixement a través de les biblioteques i del comentaris.
Us expliquem les funcionalitats bàsiques per fer-lo servir:
Ús i interfície
Per utilitzar Penpot, només cal que entreu a penpot.app i hi a accediu creant un compte o amb un compte de Gmail.
Un cop a dins, hi trobareu el panell amb els vostres projectes, esborranys i biblioteques compartides. Des d'aquí podreu crear equips de treball il·limitats per compartir les vostres creacions.
La interfície s'estructura de la següent manera:
- Al mig, hi ha la secció de canva, on fem el disseny.
- A la secció de l'esquerra, hi trobem la barra d'eines.
- A la secció de la dreta, hi trobem les opcions que s'actualitzen en funció dels elements que seleccionem. Si seleccionem un gràfic, hi apareixen opcions del gràfic com les mides, el traç, l'emplenat o l'ombra, i si seleccionem un text, les de mida i de tipografia, per exemple. En una segona pestanya, hi ha la secció Prototip, on farem les relacions entre les pàgines del lloc.
- Per sobre d'aquest menú, tenim les opcions de previsualització per ampliar o reduir el zoom o per previsualitzar la navegació del disseny. Des de la pàgina de previsualització, podrem generar enllaços per compartir-lo i veure el codi de programació i copiar-lo per poder-lo desenvolupar.
Eines principals
Ens centrem en les eines bàsiques que trobem a la secció de l'esquerra. Són les següents:
- Mou, per seleccionar i arrossegar elements.
- Taula de treball, per crear els espais de treball. Un cop creats, es pot seleccionar des de les opcions de la dreta si es vol que tinguin una mica predeterminada, per exemple, per crear una web per a escriptori o per a mòbil, o adaptada a iPhone, iPad o Android.
- Rectangle, el·lipse, corba i camí, per dissenyar les formes. Per opcions de fusió com agrupar o utilitzar màscares, podeu seleccionar les diverses formes i clicar el botó dret.
- Text, per escriure.
- Comentaris, per fer apunts que puguin llegir la resta de persones que hi tenen accés.
A la part inferior de la secció esquerra, també trobem una sèrie de menús fonamentals:
- La secció Capes, per veure les pàgines i capes que hem fet, ocultar-les o bloquejar-les.
- La Biblioteca de Recursos, on podem anar guardant i compartint recursos amb l'equip com ara tipografies, imatges, gràfics i colors, i tenir accés a llibreries amb elements prefabricats, que podem utilitzar i modificar.
- Historial, per veure les últimes accions i retrocedir.
- Paleta de colors, per guardar i gestionar els colors utilitzats prèviament o que han guardat altres membres de l'equip.
Com fer un prototip
Per fer un prototip de disseny web o d'aplicació d'una forma senzilla, haurem de seguir els següents passos:
- Crear tantes taules de treball com pantalles volem que tingui.
- Dissenyar-les amb les formes, colors i imatges que vulguem.
- Crear la navegació entre les diferents pàgines des de la secció Prototip arrossegant les fletxes d'un espai de treball a un altre.
Exportació
Per exportar, haurem de seleccionar la pàgina, les capes o els components agrupats que vulguem extreure.
Des del menú d'opcions, a la dreta de la interfície, triem Exportar i definim les opcions d'exportació, que pot ser en format SVG, PNG o JPG.
El programa permet exportacions simultànies de diferents formats i dona opcions per reduir la mida de la imatge, que correspon als píxels de l'espai de treball marcats en les regles que abasten la pàgina i que arriben fins als 400.000 d'amplada.
