 Hola a tots, benvinguts a aquest track d'usuaris noveis, em dic Núria Nadal i seré la presentadora de les següents ponències. La primera d'aquesta tarda és l'editor de blogs des del disseny a mida fins a l'entrega al client que ens la farà el David Bayarin-Prunera. El David és enginyer de telecomunicacions i sempre s'ha dedicat al món de l'estic. Fa 12 mesos i anys que es va començar a treballar en Wordpress i amb aquesta pàgina ha fet un munt de pàgines web, botigues online i fins i tot un portal d'intercambi d'endescessibles. I a més de treballar en Wordpress treballa amb altres projectes opensource. David, endavant. Moltes gràcies, Núria, per la presentació i moltes gràcies per estar aquí. Després de dinar suposo que és un mica dur però intentarem no fer-ho gaire avorrit. Us explicaré una experiència pròpia de disseny d'una pàgina web desde zero fins que l'entregues a la persona que farà el manteniment del contingut, amb l'editor de blogs. Això, per exemple, aquesta portada està feta amb l'editor de blogs i quan la vaig fer em va vindre al cap indiana Jons i em busca de l'arca perdida. I jo no estic buscant l'arca perdida però potser si al blog sempre estic buscant a veure quin blog utilitzo per fer això, a veure quin blog utilitzo per fer jo. Suposo que al final crec que ja ho he trobat. Però bueno, comencem des de blanc, amb blanc i anem a fer un disseny des de zero. Llavors, jo el que faig, normalment, presento unes bases tipogràfiques, unes opcions tipogràfiques per veure si el client li agrada d'una manera o d'una altra. Presento una paleta de colors, faig una mica de guia d'estils, després faig un diagrama escamàtic de la pàgina web i a vegades només del home page. Amb això ja tens una gran part. I llavors començo a tenir el cap, el que fa falta. Llavors podries seguir dissenyant el Figma o si vols, si ho tens ja bastant clar pots directament ficar-ho a l'editor de blogs. En aquest cas, estic més o menys utilitzant l'editor de blogs com si fos una eina de disseny. No dic que tothom ho faci o que la gent oblidi les altres eines però sí que es pot utilitzar com eina de disseny. Aleshores, aquí veiem la base tipogràfica, la paleta de colors, una mica d'un full d'estils, un diagrama escamàtic. Llavors comences a fer proves del contingut del client, a veure si les fotos queden bé, amb els botons, el que sigui i al final ho converteixes en una pàgina web adaptable, disseny web adaptable. Aquí hauria pogut utilitzar tot això ho hauria pogut fer amb l'editor de blogs, l'únic que, per exemple, això ho vaig fer amb el Figma, o sigui, tot això ho vaig fer amb una eina que és de disseny, que té patrons per anar col·locant coses a elements de disseny i per veure un diagrama escamàtic del que és la web. Una cosa molt important que té que ser disseny web adaptable. Aquí volia mencionar un senyor que es diu Ethan Marcot, que va fer un llibre molt famós, que es diu Responsive Web Design, Design Web Adaptable, i ell, d'una manera, va donar nom a com haurien de ser dissenyades les webs. Llavors, a les properes transparències, també tornaré a mencionar el Ethan Marcot per un altre llibre que és molt interessant i té a veure amb l'editor de blogs. Jo, aquí, clar, l'editor de blogs té moltes coses, part del que s'ha de saber per utilitzar-lo s'ha explicat aquest dematí, l'Heli Galor ha fet un taller bastant llarg de com utilitzar els blogs i pot ser una eina que, al principi, dius, no trobo on estan les coses, perquè hi ha tantes coses. I el que passa és que t'has de fixar si t'agrada aquesta eina o no, i jo el que vaig fer és dir, bueno, utilitzaré aquesta eina, m'agrada molt perquè és estàndard de WordPress, l'únic que m'he de posar les piles a trobar on estan totes les coses i quin és el comportament de tots els blogs i totes les coses per ser capaç de generar una web a través d'aquesta eina. I, aleshores, aquí, com que no tenim molt temps, no parlarem de com fer plantilles o temes en WordPress, que també es fa amb l'editor de blogs creant les plantilles i tal, sinó les guies bàsiques de l'ordre que jo he seguit i que m'ha semblat el millor per començar les bases d'un disseny amb l'editor de blogs, fer-lo, el disseny, i després entregar-lo a la persona que té que fer el manteniment del contingut. Perquè, al principi, pot ser molt complicat, no podem obrir totes les opcions de l'editor de blogs per poder dissenyar el que sigui, però després, potser, volem simplificar perquè la persona que faci el manteniment no tingui tanta feina o li sigui molt més fàcil. I, aleshores, aquí, jo faig servir tres coses interessants. Per una banda, un plugin que, a poc a poc, el van incorporant a l'editor de blogs. Ara hi ha una de les funcionalitats que ja està a la versió 6.2. I és un plugin, com que l'editor de blogs fa coses. I, inicialment, les graves a les opcions del tema de les baseades, tu, si crees un tema des de zero el que vols, és que es quedi gravat als fitxers de la plantilla per si vols distribuir el tema al repository de WordPress o per el que sigui. I, aleshores, aquest plugin va molt bé per sobreescriure tot el que has modificat des de l'editor de blogs, ho sobrescrius i ho fiques als fitxers. És interessant. Una part d'aquesta funcionalitat ja l'han ficat dins de l'editor de blogs, a la versió 6.5, que és l'exportar a tot. Però l'exportar tu genera en un lloc apart. I jo vull sobrescriure el que estic fent en el tema per anar-lo fent. I, a veure, encara tinc que utilitzar una d'aquestes opcions del plugin. L'altra novetat que a mi em va agradar molt. Quan fa 5 anys vaig mirar l'editor de blogs, encara no hi era. I ara he tornat a utilitzar-lo i veig que ja tenim un lloc per estandaritzar totes les coses del disseny, que és un fitxer que es diu SimJSON. Que en comptes de tenir format actemail o CSS, té un format que es diu json, que serveix per escriure una sèrie de propietats. I aquí s'estandaritzen totes les propietats dels tamanys de la tipografia, els espaiats, els colors, que ho fas des de l'editor de blogs sobre escrius el tema i ho trasllada als fitxers. O, si tens ganes, ho pots escriure directament al SimJSON. No costa gaire perquè només és tenir un editor de texta. I si omples les dues primeres línies que dius quin és l'esquema i quin és la versió, no tens que saber demanar-hi totes les opcions del SimJSON. Si vols tipografia, escrius tipografia, i a dintre et comença a proposar les coses. Si és fluïda, totes les opcions i propietats que es poden fer, te les va proposant. Jo ho faig servir a vegades així o a vegades des de l'editor de blogs i exportant tot el que vaig fent perquè em quedi gravat els fitxers del tema. I l'últim que faig servir és un Git, que és un sistema de control de versions. El sistema de control de versions el que fa és com una màquina del temps. Es pot negraven com estan els fitxers en un moment donat i, si vols, pots tirar enrere. I l'altra cosa que et fa, el Git, és que és com un Xivato. Si es canvien coses, t'avisa. Ara tens tantes modificacions als fitxers. Si tu fas la modificació, ja ho saps que les tens. Però si tu fas l'editor de blogs, és molt interessant saber el que et està fent, perquè així ho veus. Jo així vaig descobrir que si dius que vols la tipografia fluïda, ell, si la tipografia fluïda vol dir que per pantalles petites serà més petit. Per pantalles grans, veuràs els textes més grans. Llavors, si tu li dius si vull la tipografia fluïda, per només li dones un tall, ell et genera una funció que et dona un altament petit, el gran, i un intermetge. Tot el que fan aquestes eines, normalment, si estàs en fase de disseny, si no t'interessa, ho reescrius i ho fas com tu vols. Però si et serveix aquella fórmula, i jo, en concret, aquesta fórmula de tipografia fluïda la vaig fer servir i em va estalviar temps per provo que funciona. Doncs ja la deixo així, que no funciona, doncs la canvio. Però descobreixo que totes les coses que m'està fent l'editor de blogs veient els fitxers. Llavors, això és la base. Tens un tema des de zero. Bueno, amb aquest plugin pots crear un tema des de zero. I et crea tot els fitxers que necessites, inclús et posa la licència GPL i tal, el fitxer ritmi.txt et fa les plantilles que necessita un tema de blogs per funcionar. I no t'has de preocupar, a partir d'aquí allà ja pots començar a modificar. Amb el qual això ja tens la base per crear un tema. Llavors... No, no ho he dit, perdona. El plugin es diu crear un tema de blogs, en català, però si el busques en anglès és crear-te blog sim. El busques està fet per la mateixa gent de WordPress i, bueno, poc a poc el van incorporant a l'eina, en standards. Aquesta part que us he dit potser no la fan servir, no la van incorporar perquè només ho faran servir els que creïn un tema des de zero, els que comprin un tema i arrenquin a partir d'aquell tema base, potser no ho faran servir. Però si és molt interessant, aquest plugin el va explicar el Matt Muhlenberg en un dels vídeos State of 2023, si mires a WordPress TV, en aquell vídeo ho explica i està molt bé. I al principi em deia, hòstia, tu, et posa amb aquest plugin, va més ràpid. Després, al final de les transparències, he posat tota informació de referències per si dic alguna cosa i no queda... i algú no té temps d'apuntar-la o podeu veure la última transparència. Ho compartiré un enllaç perquè, amb un QR o l'URL, perquè us pugui descarregar el PDF. Aleshores, ja tenim les bases, comencem a crear un disseny, llavors ja estem a la segona fase. O perquè estem implementant un disseny que ja el teníem fet al Figma o en Sigui, o perquè el fem sobre la marxa, és interessant anar a mordre. Llavors, el primer que faig és la tipografia, perquè la tipografia quasi és el 90% d'una web. Si tu li treus la tipografia a una web, quasi no tens missatge. Pots tenir un vídeo, que no és sostenible, segons el Noai Badiolo, o pots entrar a imatges que prisin molt, o una imatge que comuniqui, però no comunicarà tant com un titular ben escrit i un pàrregraf i una crida a l'acció, que totes les crides a l'acció necessiten un text. Llavors, el 90% de la web d'una web és tipografia, llavors començo una tipografia. I una altra vegada agafo el tema, el fitxar aquest Sim Jason, i aquí em vaig escrivint els tamanys de tots els tamanys petits, grans, mitjans, tots els diferents tamanys que després necessitaré, els tinc estanderitzats amb una sèrie de tamanys. Llavors, bueno, especifico la tipografia, i després els espaiats també són molt importants. A vegades, si seguiu un ritme vertical, un ritme, o sigui, us quadreu les coses amb una graella original de tant pixels per fer que l'ull humà no té les coses estranyes, tu tens moltes coses de la mateix tipus, però les separes de forma diferent, l'ull com que és capaç de detectar patrons de coses, si veu que aquell patró està irregular i les diferències són irregular, doncs no és tan maco a l'ull humà, com les coses que segueixen un ritme concret. Llavors, una de les eines que tenim a l'editor de bloc són els espaiats, iguals que els tamanys de la tipografia, doncs pots afini, mira, entre una secció i l'altra, el tamaix mínim seran tants pixels o amb les unitats que vulgueu. Després dels tamanys més grans seran per separar altres coses, així, no? Llavors, és molt important anar l'espaiat, i la paleta de colors. Llavors, no s'ha de fer res abans de canviar les coses bàsiques, perquè si tu comences el detall d'un bloc i després decideixes canviar coses, tot el que hagis canviat amb un detall d'un bloc, si canvies la tipografia, després si canvies la tipografia a nivell global, hauràs d'anar a tots els blocs que has canviat per separat a modificar-los. Llavors, això són les bases, i a partir d'aquí ho ja canvies. El detall del bloc i els patrons. I aquí us volia dir el dels patrons. El Ethan Marcote fa temps va escriure el llibre Responsive Web Design, i una mica més tard va escriure un llibre que es diu Responsive Design, dos punts, Patterns & Principles, o sigui, patrons i principis, i també ell definia com patrons. O sigui, les webs ja no són webs, pagines webs, sinó que el que estem dissenyant són dissenyadors de patrons web, de trossos significatius de la web, que tenen una estructura concreta, i que, al millor, les vols repetir en altres llocs. Llavors, m'agrada molt que el que diuen els llibres de teoria, després, l'editor de blogs, està utilitzant el mateix vocabular i també parla de patrons. I els patrons és una passada. En el editor de blogs pots agafar inspiració buscant afegint patrons del repositori de WordPress de la gent que ha creat patrons, o pots crear torsteus, no? Però és una fonda de inspiració, i a la vegada una metologia de dir, val, en sentem-nos amb patrons. Ara un patró que sigui Testimonis. Vale, doncs cada vegada que crigui un Testimonis nou, faré una instància d'aquest nou patró i posaré el text, la imatge, el que sigui. Llavors, això és superimportant, i estic molt content que ho hagin implementat amb l'editor de blogs, amb la part estándar, no? Aquí veieu una mica de pantallassos. Això és la cerca de patrons, que l'han millorat molt a la darrera versió, que és de 6.2. I això seria una guia d'estils, que inclús sent amb el tema 8, sense posar un text de ni res, pots veure com seran les coses. A mesura que vas modificar la tipografia, els colors i la resta d'estils. Llavors, això és actiu. Per exemple, aquí tens una cita, si fas clic a la cita, te'n vas dins de l'editor de blogs a totes les opcions que tens per customitzar aquell blog. I així, poc a poc, vas modificant els blogs i ho veus instantàniament com han canviat, el seu estil, el seu disseny i tot. I no tindries que crear contingut nou per cada blog, per veure com va quedant, sinó que ja ho tens aquí. És molt interessant. I la darrera... jo heu fet tres coses. Quan ho vaig entregar, o sigui, al principi, quan hem fet les bases, ho obria tot amb el fitxè Thims Jason i posava una sèrie d'opcions, perquè em deixés tocar tot. Hi ha una cosa que és les eines d'aparencia, que això poses des del Thims Jason, li dius tru, però no et donen més opcions a l'editor de blog, perquè tu puguis canviar tot, posar colors customitzats, diferents dimensions de tipografia i tal. Quan ho tens tot i has decidit quins són els dimensions que posaràs, quins són els colors, potser t'interessa tancar totes aquestes opcions per distribuir el tema o entregar-lo a la persona que fa el manteniment. Llavors, el que faig és tornar a tancar aquestes coses des del fitxè Thims Jason o una altra cosa, si no ho he fet abans, converteixo tota la web en patrons. Normalment ho has fet abans, però veus, hi ha una zona de coses destacades marcada a tres columnes, això ha de ser un patró. Si no he generat el patró, el genero abans d'entregar-lo i el categoritjo aquest patró. I no sé, pots tenir totes les crides d'accions, potser tens moltes crides d'accions, totes diferents, però t'interessa categoritzar-ho, a buscar patrons, quan la persona que mantindrà el contingut vol crear una crida d'accions, no té que crear-la des de zero, perquè segur que ho faria diferent i potser trencaria el design o el que fos. Llavors, si li dones una opció, dius, vés a buscar els patrons, vés a totes les crides d'accions i escolta el que més t'agradi, escollirà un que ha estat dins de el que tu has dissenyat i quedarà bé amb tota la web. Una de les coses importants d'una web és que hi ha patrons, si tanta capacitat per modificar li donem a l'usuari que farà el manteniment de contingut, podríem perdre consistència. Per no perdre consistència i tenir flexibilitat, hi ha patrons, utilitzar patrons i tenir-ho tot definit en patrons. Hi ha molts temes que, a través dels quals pots dissenyar, estan fets amb molts patrons. Tens tots tipus, estimonis, destacats, galeria d'imatges, et pots crear com a patró i categoritzar-lo. Llavors, que necessites crear una cosa similar, no tens que crear-lo des de zero, sinó que crees aquest patró. És una forma superràpida d'anar a marcatant pàgines. Hi ha prediseñades una mica, no? I, finalment, si això no fos... Bueno, aquí el que veiem simplement és anècdota. És una anècdota. És un fons que fa falta per categoritzar, per afegir, una categoria de patró. I això es fa amb un fitxer que el típic fitxer de Functions, PHP, és un dels fitxers on està que tocar una mica de codi font. Aquest tema, per exemple, s'ha fet amb molt poc codi, s'ha tocat molt poc codi. Línes de PHP hi ha unes quantes per categories. Després, línies de CCC especials, poquíssimes. Els enllaços, els enllaços, tal. I quasi tot ho porten als blocs. O la configuració dels blocs. Llavors, són plantilles que pesen poc. Són sostenibles. I costen relativament poc de fer-les. Llavors, s'ha de tocar una mica de codi, però res. I aquí també s'ha de tocar, això s'ha de tocar una mica. Quan fas un patró des de l'editor de blocs pots veure'l com visualment o podries veure dins el codi. Llavors tu el mires, com si veguessis el codi intern. Còpies i peges allò dins del subdirector i de patrons. I li fas una operació molt curiosa que li escrius aquí template.loc content only. O sigui, el que estàs fent és que quan insertis un patró no et donarà totes les opcions per fer-lo. Un patró és un conjunt de blocs. No et donarà opcions de redistribuir els blocs o canviar-li el disseny, només de canviar el contingut. Llavors, molt fàcil, tens una crida de l'acció. És un patró amb un text per defecte. La persona que l'inclou només té que preocupar-se de canviar el text o la foto o el que sigui, però tot el disseny queda consistent d'una cosa que no està d'origen. I això li permet consistència del disseny i facilitat d'ús a la persona que té que fer el manteniment del contingut. Llavors, jo faig això a l'entrega preparo aquestes coses. Una altra cosa és que et diguin no, no, i ara fes-me tu el manteniment llavors ho pots tornar a obrir o no ho has tancat mai. Si és un expert el que té que fer el manteniment del contingut ho deixes tot obert. O que vol menys coses possibles a la pantalla millor li fas aquesta operació. I, bueno, això passareu relativament ràpid, que és com com fer patrons, no? Llavors, els patrons estan a la pàgina web de WordPress, estan a la part de temes i a la part de patrons. Pots crear patrons amb el teu usuari posar-te favoritos o veure com estan fets els patrons. I llavors tu els pots copiar i pagar el teu editor de blogs i treure idees. I l'altra manera d'aprendre-ho és tu des de 0 fent els patrons, no? Aquesta quasi no dona temps però, bueno, són dos exemples dos dissenyadors i desenvolupadors a la vegada que són molt famosos, a l'Adam Annawai, que va sortir a la Smashinbook i va fer el refalto mal. I ho dic perquè quasi és una eina per dissenyar, no? Llavors els dissenyadors podrien no necessitar un desenvolupador per fer una pàgina amb aquest editor de blogs o els desenvolupadors els podria agradar o tenir ganes de veure per gràfica i aprendre el disseny també i també ho podrien fer. Els dos camis són més o menys possibles. I, bueno, aquí us deixo les referències i, bueno, res. Això em podeu trobar aquí en aquesta pàgina. Us podeu descarregar el PDF amb, bueno, totes les referències inclòs els llibres de lectura, la documentació de WordPress i, bueno, és qualsevol cosa podeu consultar. Moltes gràcies. Moltíssimes gràcies, David. Un petit detall per tu i recordeu la xerrada ha estat molt interessant però, si teniu ganes de preguntar-li coses, tenim una salabilitat de ponents i allà el trobarem d'aquí una estona que li podreu preguntar tot el que vulgueu sobre l'editor de blogs. Moltíssimes gràcies, David. A tu.