 Grazie mille e ciao a tutti, mi auguro che questo incontro riesca un pochino anche a tirare le file di argomenti che abbiamo visto oggi in altri interventi. Prima abbiamo parlato di ricerca di mercato alla base dei contenuti, non esiste content design senza un'attività di ricerca a monte, ma ovviamente servono anche gli strumenti e quindi Gutenberg, Block Editor, Full Site Editing, parole chiave devo dire tra le principali dell'incontro della conferenza di oggi. In questa mezz'oretta parliamo in particolare di come progettare e impaginare anche contenuti affrontando una sfida che tante volte ci troviamo a dover sostenere in agenzia, cioè riformulare, tradurre, trasformare contenuti realizzati per altri media, oggi lavoreremo con un comunicato stampa e trasformarli in contenuti web, in una landing page in particolare. In generale il tema è quello dei contenuti strutturati e della progettazione dei contenuti per fare in modo che la loro fruibilità sia chiaramente efficiente e produttiva per l'utente. Questa è un'attività che nei CMS è tradizionalmente sempre stata un po' ostica, un po' complicata, anche in WordPress. In WordPress fino a poco, anzi, scusa, quanti di voi usano ancora o hanno tra le mani dei siti web che utilizzano il classic editor? Non c'è da vergognarsi, quindi alzate pure. Vergogna, non dovete più usare il classic editor. No, si colpisce il fatto che i classic editor sia ancora aggiornato e sia molto scaricato. Chiaramente ci sono delle esigenze di retrocompatibilità dietro a questo. Però noi, e se siete qua oggi, a maggior ragione dobbiamo guardare avanti. Quindi l'introduzione che c'è stata con Gutenberg di una nuova esperienza di editing negli ultimi anni e che proprio negli ultimi mesi e con la versione ultima, la 6.1, devo dire che finalmente ha raggiunto un grado di maturità, a mio avviso, sufficiente. Noi possiamo veramente guardare un orizzonte nuovo. Io vengo da anni in cui, ad esempio, per poter realizzare delle strutture custom e, diciamo, secondo un modello di contenuti che rispettasse e raggiungesse gli obiettivi, ad esempio, ho progettato, non so quanti siti, con Advanced Custom Fields che probabilmente voi conoscete, un plug-in straordinario che mi ha consentito di diventare ricchissimo in questi anni, ma oggi probabilmente quegli insieme di competenze che abbiamo sviluppati in questi anni, io come molto probabilmente anche diversi di voi, secondo me ce le dobbiamo impacchettare e mettere in un cassetto perché sta arrivando una nuova era, assolutamente. Nella prima parte vediamo, fissiamo giusto un paio di concetti per affrontare il tema del content design in maniera efficace. Nella seconda parte invece andremo a fare un piccolo esperimento proprio direttamente dentro WordPress. Il concetto di base, la metodologia di base del content design è quella che viene chiamata Information Chunking, cioè lo spezzettare l'informazione, articolarla in unità più facilmente digeribili per l'utente da un punto di vista, appunto di elaborazione dell'informazione da un punto di vista cognitivo. Noi dobbiamo passare da una logica di muro di testo che vedete qui a sinistra, a una logica se qualcuno di voi come me è un po' esperto, diciamo così, ha un po' di ansianità di servizio sul web, ricorda insomma, no? Le layout di qualche anno fa che erano molto simili appunto a questa illustrazione, andare più verso una logica di questo tipo, a contenuti strutturati. Quattro regole, proviamo a sintetizzare le quattro regole di base, chiaramente stiamo molto semplificando però ho l'obiettivo anche di darvi delle indicazioni che siano molto operative e senza troppe sovrastrutture. Per esempio la regola 80-20 che è stata diciamo cognata con questo nome da Sara Winters nel suo libro che si chiama appunto Content Design, ma dice in realtà una cosa abbastanza banale a dirsi, meno a farsi e soprattutto non è così semplice trovarla poi messa in pratica nei siti web, cioè dobbiamo mettere, mostrare subito immediatamente l'informazione fondamentale per l'80% dei nostri utenti. Come facciamo a sapere qual è? Facciamo la teglietà di ricerca, ok? Dobbiamo conoscere i nostri utenti, ma se l'utente arriva e nella nostra pagina vuole conoscere, vado proprio terra a terra, un numero di telefono, il numero di telefono deve esserci subito, ok? Quante volte dobbiamo andarne il footer, specie da mobile, no? Etcetera, etc. Quindi la cosa che serve, lo scopo dell'80% dei nostri utenti va messa subito in alto. Contenuti granulari, tutte quelle informazioni che noi possiamo trasformare in elenchi, titoli, sottotitoli, occhielli, piccole unità di contenuto, dobbiamo smembrarle e tradurle appunto in questa formula qua. Ovviamente va da sé che noi dobbiamo ragionare con analogica mobile first, questo lo diamo per scontato, ma questo significa fare attenzione a molti aspetti di dettaglio, anche nella stesura dei contenuti, il fatto che gli elementi siano distribuiti secondo un ordine logico, che nell'adattamento mobile il fatto di svilupparsi in verticale segue un ordine di scroll logico e così via. Utilizzare il più possibile senza eccedere con gli orpelli, ovviamente, ma usare il più possibile degli ancoraggi visivi, cioè degli elementi che aiutino l'utente a scansionare i contenuti in maniera più fluida, più rapida, quindi punti elenco, icone, tutto ciò che può fungere da rinforzo nella scansione dei contenuti. In WordPress, noi oggi abbiamo due strade, ve l'ho detto, ne abbiamo anche altre, abbiamo appunto ACF, eccetera, eccetera, però oggi noi abbiamo davanti due situazioni. L'approccio del bloccaio di tornativo, che ovviamente si approggia a Gutenberg, ma può essere potenziato con altri add-on, qui ne abbiamo elencato qualcuno e ne vedremo uno di questi, Spectra. Questi sono tutti gratuiti, quelli che vedete qua, gratuiti of premium e in questo modo riusciamo a lavorare all'interno del ambiente, appunto, di editing nativo di WordPress. E poi abbiamo tutto il mondo dei page builders che conosciamo molto bene, no? Elementor e compagnia cantante. Qual è la differenza di fondo? La differenza di fondo è che i page builders sono probabilmente ancora oggi più maturi, più evoluti da un punto di vista soprattutto grafico rispetto ai plugin, ai block plugins. Chiaramente però parliamo di andare a mettere un motore sopra un altro motore. Un tempo WordPress aveva solo il classic editor, quindi aveva un motorino ad Inamo, non aveva un vero e proprio motore che rompava come oggi. Andare a mettere una sovrastruttura come può essere Elementor significa avere, per esempio, i contenuti codificati con una struttura a database che non è quella nativa, ma è una sovrastruttura che viene aggiunta. Quindi spegniamo Elementor o Elementor decino di mettere solamente a pagamento e a un prezzo non sostenibile. Noi siamo legati, dobbiamo esportare o addirittura copiare in collare. Ok, quindi questo è l'importanza di utilizzare il block editor oggi. Lavoriamo dentro alla struttura dati nativa di WordPress per come è stata concepita da WordPress, dal team di sviluppo di WordPress. Quindi in questo senso, adesso proviamo a vedere, facciamo una piccola demo e proviamo a cucinare una landing page a partire da una materia prima che è molto lontana della destinazione che dobbiamo raggiungere che è un comunicato stampa. Comunicato stampa di un evento vero. Questa è una manifestazione che è organizzato con una mia associazione. Si tratta di teatro itinerante nei boschi, si chiama alberi in cammino e questo è il comunicato stampa che l'ufficio stampa ha prodotto per il nostro evento. Quindi vedete, non andiamo a ovviamente a leggerlo tutto, però vedete che è un documento WordPress superclassico da cui noi adesso dobbiamo andare a tirare fuori le informazioni fondamentali e tradurle in un layout da pagina web moderna. Ok, io faccio sempre questa analogia, quando mi confronto con grafici, etc. Progettare una pagina web è molto più simile a progettare un manifesto 6x3 che ha un giornale, un volantino, ok? Perché il grado di attenzione dell'utente è più o meno paragonabile a quello del pilota, dell'automobile che passa di fianco e ha solo qualche millisecondo per capire e fare proprio il messaggio. E quindi appunto il lavorare in un'ottica visuale è fondamentale. Come facciamo a trasformare questa cosa qua? In una pagina, in una landing analoga, vi faccio vedere un esempio, diciamo, di pagina che state effettivamente creata, no? A partire da quei contenuti. Non importa la grafica per ragioni di tempo, ovviamente, non entriamo nei dettagli della grafica o altro, mi piace, non mi piace. Solo, diciamo, come facciamo a passare da qui a qui? Io qui ho già impostato all'interno di un Wordpress una pagina vuota che si chiama alberi in cammino e noi andiamo a lavorarci utilizzando, la vedete qua, partiamo da questa situazione. Quindi voi vedete che abbiamo 2023, tema di default dell'ultime versione di Wordpress e utilizziamo Gutenberg arricchito da un blog plugin che si chiama Spectra, era uno di quelli elencati prima. Spectra è gratuito, è prodotto da gli stessi sviluppatori di Astra, per esempio un tema che probabilmente conoscete. E ho scelto questo perché mi sembra particolarmente interessante in passato utilizzato Genesis Blocks, per esempio, altrettanto bene. Prima a vedere come lavorare in questo senso. La pagina è vuota, come vedete, ok? Spectra, ovviamente, l'ho già installato, ho fatto tutto quello che dovevo fare, partiamo da qua. Devo fare una landing page. Allora, la prima cosa che faccio è andare a modificare il template di pagina perché 2023, di default mi applica il template di pagina che però ha header, menù, footer, eccetera e li voglio tirare via. Quindi modifico e dal template predefinito va dal template vuoto e in questo modo mi spariscono questi due elementi, lavoro sul foglio bianco. Cominciamo ad aggiungere un po' di elementi. Spectra mi mette a disposizione questo pulsante qui in alto che è il template kits e mi apre una serie di strutture pre confezionate proprio impostate da da spectra. Esiste una repository di pattern già fatti su warp, insomma, abbiamo una marea già di strumenti da cui partire. Questo è, diciamo, quello che ci ritroviamo già in pancia con spectra gratis, ok? Abbiamo pagine già fatte, abbiamo dei pattern e abbiamo dei wireframe che sono strutture, diciamo, un po' più semplificate, ma già con un po' di blocchi articolati tra di loro. Parto facendo la hero area in alto. Io seleziono filtro per mostrare solamente quelli con uno schema di colori chiaro. Vado dentro a hero, ce ne sono tre, ne scelgo una, importa. E mi trovo questa struttura già impostata e allora comincio a scrivere qual è l'informazione da mettere in alto. A mio avviso è il nome della manifestazione e che cos'è, ok? Il comunicato stampa parte come una notizia, torna alberi in cammino, il sabato quattro... no, questo non è la prima cosa da dire. La prima cosa da dire è di che cosa stiamo parlando. Coppio per rapidità dalla pagina già fatta, quella che è la descrizione di questa iniziativa, cioè percorsi di, eccola qua, percorsi di teatro e danza all'ombra agli alberi sicurali dell'appennine miliano. Care con immagine, l'ho già caricata nella libreria per rapidità. E per esempio, vedete che io qua posso modificare il layout su una serie di preset. Posso dire, non mi interessa quale col tu action, quindi qui in basso gli dico type none e mi sparisce il pulsante. Oppure se voglio metterla, metto button e poi qui posso cambiare il testo, posso dire di aggiungere un'icona, per esempio una freccia, ok? E così via. Non vado ovviamente a modificare i colori, niente, tutto questo per rapidità, usiamo i colori di default di 2023, ma se vado nel site editor, io posso impostare tutti le palette colori, font, eccetera, eccetera, globali per il sito, molto, molto velocemente. Togliamo la cta perché non ci interessa in questa sede. Poi cominciamo ad aggiungere altri contenuti, per esempio andiamo ad aggiungere un altro blocco che vedete quelli di spectra sono raggruppati, qui hanno anche un colore azzurrino che ci aiuta, spectra ha un elemento che è molto interessante che è il container. Il container è un contenitore ovviamente di altri blocchi che consente di creare sezioni e di gestire l'impaginazione responsiva. Allora io trascino un container qui sotto, vedete che posso scegliere un layout, facciamo tre colonne, noi abbiamo le date, e mettiamo le date. Quindi scelgo il layout a tre colonne, no, me ne ha messi due, e all'interno di ciascuna colonna andiamo a mettere un info box. L'info box è uno strumento molto che io uso tantissimo, proprio perché riesco con le sue diverse configurazioni a definire, a impaginare come meglio ritengo. Vedete che abbiamo, immaginiamo quindi di avere tre riquadri, uno di fianco all'altro, vedete, icona, titolo e testo. Andiamo a mettere come titolo le date, la prima era sabato 4 giugno, e sotto gli andiamo a dire, lo copio sempre da qua per rapidità, eravamo a bagna cavallo e lo metto qui. L'icona, come dicevamo prima, è un ancoraggio visivo che ci aiuta a scansionare i contenuti. Forse riusciamo a trovare qualcosa di meglio rispetto alla spunta, no, per esempio andiamo qui dentro la sezione icon, posso dire mostramela oppure no, dove mostrarla e soprattutto che tipo di icona voglio scegliamo un icona di calendario, per esempio c'è questa che ha sempre la spunta però è dentro a una silhouette di calendario e poi abbiamo la seconda data, le coppio sempre da qua per rapidità, non le andiamo a mettere tutte, solo per sabato 3 luglio non ricordo ma non importa e qui andiamo a mettere l'altra data, andiamo a mettere la sua icona sempre di calendario. Ok, proviamo a vedere cosa sta uscendo, vedete che cominciamo a vedere i contenuti che sono articolati. Io nel fare questo ho fatto delle scelte, quali scelte ho fatto, per esempio nell'Airo ho scelto un layout in cui non c'è il testo sovrapposto all'immagine, è una mia scelta, io tendenzialmente preferisco soluzioni di questo tipo per favorire la legibilità, quindi il testo tendenzialmente mai sopra l'immagine, l'immagine vive da sola, respira, la vediamo bene, ok? Poi siamo andati a prendere, siamo partiti dalle date e che esercizi abbiamo fatto. Siamo andati dentro al comunicato stampa e abbiamo cominciato a scorporarlo. La prima cosa da scorporare sono le date, appunto, perché parliamo di un evento itinerante con un calendario, quindi la prima cosa da mettere è quando c'è e dov'è, ok? E quindi siamo andati a ricostruire che la prima date è il 4 giugno, poi c'è il 2 luglio, i vari luoghi, eccetera eccetera. E questo è un primo elenco, ok? Poi, sempre con questa logica, quali altri elenchi andiamo a individuare qui? Per esempio, gli artisti, li visualizzeremo anche qui con dei box che decideremo come fare, però anche questo è un elenco. Poi ci sono le istruzioni, le istruzioni su come partecipare, la sicurezza, le prenotazioni, eccetera eccetera. Questi sono informazioni che noi andiamo a estrapolare dal comunicato e ovviamente le arricchiamo anche con altre fonti perché il comunicato non entra così nel dettaglio. Però anche in questo caso vi faccio vedere come è stato fatto in questa pagina, anche in questo caso noi abbiamo realizzato di fatto degli info box, ok? Con un layout diverso, ma il concetto è sempre quello, ancoraggio visivo, titolo, titoletto e testo descrittivo non troppo lungo e possibilmente anche di lunghezza abbastanza coerente tra di loro, tra i vari blovi, vedete che i primi due hanno una lunghezza omogenea e i quelli della seconda riga sono un po' più lunghi ma anche loro più o meno analoghi. Un elemento molto importante è il contrasto che noi andiamo a utilizzare all'interno della pagina. In questo momento la nostra pagina è, vedete che è tutta su sfondo bianco, sicuramente dovremmo andare a inserire per esempio un titolo perché questo cos'è? Sono gli appuntamenti, dobbiamo far capire, dobbiamo guidare l'utente nella lettura, no? Quindi mettiamo un titolo, allora andiamo a mettere un altro blocco di tipo container, questo lo facciamo a tutta larghezza, al suo interno gli andiamo a mettere un titolo, vedete che c'è il titolo di default, ma abbiamo anche, si chiama heading, eccolo qua, abbiamo anche heading di spectra e quindi lo chiamiamo gli appuntamenti, lo centriamo, ok? Sarebbe bello questa, questa area farla uscire, no? Come abbiamo fatto nella pagina definitiva, cioè dargli un colore di sfondo per esempio, staccarla un attimo, questo aiuta a scansionare ancora meglio i contenuti all'interno della pagina, altrimenti sembrano tutti un po' impastati, un po' omogenei. Come facciamo? Qui entra in gioco la potenza tra virgolette del container come elemento, perché il container cosa fa? Può comportarsi in maniera diversa, ad esempio possiamo dire che è a tutta larghezza e nel dire che è a tutta larghezza, poi andiamo dentro allo stile e dentro al colore, no, il background eccolo qua, andiamo a scegliere un colore di sfondo, scegliamo un grigino molto, molto minimal, la stessa cosa lo facciamo in quello sotto, quindi anche qua container full width, full width vuol dire che si estende per tutta larghezza della finestra, boxed vuol dire che è centrato in mezzo, quindi lascia gli spazi vuoti ai lati e anche qua andiamo a mettere il nostro grigino, aggiorniamo e vedete che cominciamo ad avere anche il colore di sfondo, però c'è questo spazietto bianco che non va bene, vediamo nei dettagli, però ve lo faccio vedere questo come si può gestire, ogni elemento ha una propria spaziatura, quindi selezionando il container andiamo dentro a spacing e gli diciamo che il margine è zero, lo diciamo sia quello qui, sia quello sopra che a quello sotto, gli diciamo a giorda, dovrebbe avercelo preso, queste cose qua c'è sempre da fare un pochino di prove ed errore, ve lo dico metto le mani avanti, Gutenberg tutta la vita e allora, questo è stato tutto il layout, non male, non male, no sei impallato qua visto, se vedi che sono collegato, ok, troiamo a vedere, vi siete collegati tutti a questo sito in questo momento, no sono quelli di Elementor che sono venuti, vediamo se adesso me lo prendo, ok, vedete che adesso gli ha uniti, chiaramente posso, anzi devo agire sulla spaziatura interna perché la scritta di appuntamenti è troppo incollata al bordo alto, eccetera eccetera, questo è un lavoro di fino ovviamente che adesso si apre e su cui noi dobbiamo andare a lavorare facendo un po' di esperimenti, facendo un po' di analisi, è chiaro che è chiudo, se noi andiamo a vedere questa pagina in modalità responsive ovviamente l'adattamento è automatico, dobbiamo lavorare sulle spaziature, evidente, ma il motivo per cui ho introdotto questo tema è anche per farvi vedere come uno degli elementi che denotano appunto la maturità di questi strumenti è il fatto che ad esempio possiamo gestire nelle impostazioni avanzate le cosiddette responsive conditions, che è una cosa che i page builders hanno già, cioè un singolo elemento posso decidere, lo faccio vedere solo su desktop, lo faccio vedere solo su mobile, ok, quindi andare a anche a realizzare delle versioni alternative dei singoli elementi che vengono attivati o disattivati in base al dispositivo che l'utente sta utilizzando. Questa è solo la superficie ovviamente, Spectra ha una quantità enorme di blocchi ma non voglio fare lo spot di Spectra, è solo un elemento che vi ha voluto portare, ce ne sono tantissimi altri e questo ci deve far capire appunto che oggi abbiamo veramente una tavolozza a disposizione che è già oggi finalmente molto potente e via via lo sarà sempre di più. Quindi questo era un po' il messaggio in chiusura che volevo darvi, ecco, ovviamente abbiamo solo visto un approccio di base però con questi strumenti, con questi ragionamenti noi riusciamo a arrivare a realizzare anche prodotti molto più evoluti, molto più articolati. Ok, a voi. Grazie. Abbiamo il tempo di due domande, due brevi, chi la vuole fare? Aspetta, aspetta, no, senza microfono. Come lo chiamiamo, scusa, come lo vuole chiamare? Un page builder, un plugin, cioè Gutenberg nativo non fa queste cose qua, giusto? Gutenberg nativo fa cose del genere però questi strumenti aggiuntivi, questi bloc plugins vengono chiamati, lo potenziano, quindi il mio consiglio oggi è quello di sperimentare questi bloc plugins in aggiunta al Gutenberg base che già ripeto, già è potente e queste cose te le fa fare però esistono dei prodotti che sono oggi più evoluti, sono più evoluti e quindi il mio consiglio è di provare a sperimentare questi.