Questo articolo è la dodicesima chiamata per il test all’interno del Full Site Editing Outreach Program. Per sapere di più su questo programma sperimentale, dai un’occhiata a queste FAQ con utili dettagli. Per entrare nel vivo, vai su #fse-outreach-experiment in Make Slack per futuri annunci su nuovi test, articoli e molto altro ancora.

Panoramica

Con il rilascio di WordPress 5.9, è ora di iniziare a riesaminare alcuni comuni flussi di lavoro di cui abbiamo testato versioni precedenti e che ora hanno nuovi strumenti, opzioni ed altro ancora da esplorare. Nel caso di questo test, personalizzeremo un header usando tutto, dal blocco navigazione alla modalità in risalto per la parte del template, per poi riutilizzare questo header personalizzato in un template diverso. Strada facendo, esploreremo il modo in cui i pattern sono integrati all’interno dell’esperienza, le nuove opzioni di controllo delle dimensioni e la UX migliorata per il blocco navigazione. Mentre ti occupi di questa esperienza d’uso, pensa a cosa potrebbe renderla ancora più semplice e più intuitiva, dato che il nostro obiettivo è proprio questo!

Ambiente di prova

Di seguito troverai maggiori informazioni per avere la certezza di impostare tutto correttamente, ecco comunque gli aspetti chiave da impostare sul tuo ambiente di prova: 

• Utilizza un sito di prova. Non usare un sito di produzione o live. Puoi seguire queste istruzioni per creare un’installazione locale o utilizzare uno strumento come questo per impostare un sito di sviluppo. 
• Usa WordPress 5.9.1 (che puoi scaricare qui).
• Usa il tema Twenty Twenty-Two. Se vuoi ripetere il test o mischiare un po’ le carte, puoi sempre utilizzare un tema a blocchi diverso.
• Usa Gutenberg 12.6.1 (versione più recente). 

Istruzioni per il test

Istruzioni per la configurazione: 

1. Imposta un sito di prova utilizzando la versione più recente di WordPress (5.9.1). È importante che questo non sia un sito live o di produzione. 
2. Installa ed attiva il tema Twenty Twenty-Two andando su Aspetto > Temi. Se scegli di utilizzare un diverso tema a blocchi, installalo ed attivalo andando su Aspetto > Temi > Aggiungi nuovo, cercandone uno che abbia Full Site Editing tra le caratteristiche elencate. 
3. Andando sotto Pagine > Aggiungi pagina crea quattro pagine diverse, con titoli differenti, da aggiungere al menu. Non serve che queste pagine abbiano dei contenuti. 
4. Installa ed attiva il plugin Gutenberg da Plugin > Aggiungi nuovo. Nel caso fosse già installato, accertati di usare come minimo la versione 12.6 di Gutenberg.
5. Alla fine di questi passi, dovresti vedere una voce di navigazione dal titolo “Editor (beta)” sotto Aspetto. Se non lo vedi, non stai usando un tema a blocchi e serve che tu cambi tema. 

Istruzioni per il tema:

Suggerimento utile: Man mano che ti occupi di questo test, potresti trovare la vista elenco molto utile mentre navighi tra il contenuto.

Queste istruzioni sono volutamente più generali per aiutarti a rendere davvero tuo l’Header che creerai, trovare più punti di attrito, così come nel caso stessi utilizzando un diverso tema a blocchi. In generale, dovresti esplorare alcune cose con questo test, perciò se i passi non si allineano con quello che vedi, passa al tema Twenty Twenty-Two per rendere le cose più semplici nel caso non lo stessi già usando, oppure accertati di coprire ognuna delle funzioni elencate nella sezione Panoramica. 

1. Naviga su Aspetto > Editor (beta). Questo aprirà automaticamente l’editor del sito sul template che fa funzionare la tua homepage. 
2. Usando la Vista elenco, seleziona l’Header generale fornito dal tuo tema. Se stai utilizzando il tema Twenty Twenty-Two, noterai che fornisce diverse opzioni per l’header quando selezioni l’opzione “Sostituisci” nella barra degli strumenti del blocco. Seleziona qualunque header vorresti modificare. Ecco uno screenshot che illustra ciò che dovresti aspettarti se hai questa opzione.
3. Da qui, entra nella modalità di modifica di quella sola parte di template per concentrarti solo sulla modifica dell’Header in particolare. Per trovare questa modalità seleziona l’elemento principale della parte del template Header > Apri il menu con i tre puntini > Seleziona “Modifica Header”. Puoi avere più informazioni riguardo questa modalità ed i vari i modi in cui puoi trovarla in questo articolo. 
4. Una volta che sei lì, costruisci e personalizza il tuo blocco navigazione aggiungendo le quattro pagine che hai creato in precedenza. Ricorda che puoi creare bozze di pagine che dovrai comunque pubblicare successivamente in modo che siano visibili sul frontend del tuo sito.
5. Continua a personalizzare il tuo header in base ai tuoi gusti, ad esempio utilizzando i controlli di dimensione presenti nei blocchi Gruppo o Riga (a seconda di quello che offre il tuo tema), aggiungendo blocchi aggiuntivi a piacimento (Motto del sito, Logo del sito, ecc.), o esplorando ulteriori opzioni all’interno del blocco navigazione.
6. Una volta finito, seleziona “Indietro” per ritornare al template della tua homepage e fare qualsiasi altra modifica ora che vedi nuovamente la parte del template nel contesto del template generale.
7. A questo punto, seleziona Salva ed esamina il riepilogo delle modifiche per salvare tutte le modifiche che hai fatto. 
8. Dopo aver salvato, apri il menu W > Template e seleziona un altro template che vuoi esaminare per assicurarti che usi l’Header che hai appena personalizzato (ad esempio, il template Vuoto). Apri quel template e, se l’Header non è al suo posto, aggiungilo secondo il modo che ritieni più corretto prima di salvare. 

Cosa notare:

Se ti va, ricorda di condividere uno screenshot di quello che hai creato!

• L’esperienza si è bloccata in qualche punto?
• L’esperienza di salvataggio ha funzionato correttamente?
• Hai trovato delle funzionalità mancanti durante la creazione o il riutilizzo dell’Header?
• Cosa hai trovato particolarmente confuso o frustrante riguardo l’esperienza?
• Cosa ti è piaciuto o hai apprezzato in modo particolare riguardo l’esperienza?
• Cosa avrebbe reso questa esperienza più facile ed intuitiva?
• Credi che quanto hai creato nell’Editor del sito corrisponda a quello che vedi sulla tua homepage?
• Ha funzionato usando solo la tastiera?
• Ha funzionato usando uno screen reader?

Lascia il tuo feedback entro il 16 marzo 2022

#fse-outreach-program, #fse-testing-call, #full-site-editing

Articolo originale: FSE Program Testing Call #12: Hyping Headers

Dopo il rilascio della versione 5.9, i componenti più importanti di full site editing sono disponibili a tutti e pronti a ricevere feedback. Per il momento, anziché addentrarci ancora una volta in questi componenti, abbiamo deciso di lasciare che il pubblico ci prenda confidenza e passare ad un aspetto della creazione di un sito che può determinare il successo o il fallimento di un progetto: il ruolo dei media. Che si tratti di impostare un’immagine in evidenza o aggiungere un’immagine ad un header, ci sono parecchi modi in cui i media sono in contatto con tutte le parti della creazione di un buon sito. 

Come l’ultima volta, in questa esplorazione ci concentriamo sul pensare più a lungo termine, con una prospettiva più da “sarebbe bello se”, in modo da raccogliere spunti utili che contribuiranno a far evolvere il design delle esperienze relative ai media nel corso dello sviluppo futuro. Per fare questo, ti guideremo attraverso alcune operazioni comuni della costruzione di un sito che coinvolgono i media, e chiederemo ad ognuno di voi di pensare in modo creativo a ciò che vi piacerebbe succedesse. Dato che questa non è proprio una chiamata per il test a causa della mancanza di procedure da seguire, ci concentriamo meno sul trovare dei bug (anche se sono sempre ben accette delle segnalazioni) e più sul ragionare su cose che vorresti succedessero. 

Man mano che esamini l’articolo, ricorda che puoi occuparti di tutti questi spunti o anche di uno solo! In ogni caso, è tutto utile.

Una breve panoramica

Parte del motivo per cui stiamo facendo questa chiamata è la presenza di alcuni nuovi progetti e strumenti che ruotano sui media all’interno del progetto WordPress, che potrebbero esserti sfuggiti: la Directory delle Foto di WordPress ed Openverse. 

La WordPress Photo directory è attualmente in beta, ed ha lo scopo di offrire una fonte curata di immagini di alta qualità. Aggiungendo qui le tue foto, le foto appariranno automaticamente in Openverse, un motore di ricerca per media con licenza aperta composto da oltre 600 milioni di elementi da usare gratuitamente. In questo momento, questi sono strumenti a sé stanti, ma nel futuro ci saranno grandi opportunità per integrarli direttamente all’interno dell’esperienza di WordPress. Questa esplorazione contribuirà a guidare la fase iniziale di questo lavoro che è anche in linea con vari obiettivi per il 2022.

Per leggere di più riguardo la WordPress Photo Directory e Openverse, dai un’occhiata a questo articolo che condivide tutto quello che c’è da sapere.

Compito 1: Esplorare cosa è possibile in questo momento

Questi compiti hanno volutamente obiettivi aperti dato che ci sono spesso vari modi in cui possono essere completati. Quando rispondi di seguito, condividi quali approcci/procedure hai utilizzato e perché! Condividi nei commenti anche eventuali bug dovessi trovare.

• Applica un filtro Bicromia ad un blocco copertina, con un’immagine o video al suo interno, ed aggiungici sopra del testo, regolando l’opacità quanto necessario. 
• Aggiungi un’immagine come sfondo del tuo header.
• Aggiungi una didascalia ad un’immagine.
• Ritaglia o ruota un’immagine in un blocco galleria.
• Aggiungi un’immagine esterna non coperta da copyright sul tuo articolo come immagine in evidenza. Punti bonus se ci fai sapere dove hai cercato l’immagine e dove fai normalmente queste ricerche. 
• Cambia la dimensione dell’immagine in evidenza per i tuoi articoli, modificando il tuo template dell’articolo.

Per questa esplorazione, sarebbe utile usare un tema basato su blocchi, dato che lo scopo è descrivere l’uso di media nel contesto del full site editing. Come risultato, segui questi passaggi: 

1. Imposta un sito di prova. Puoi seguire queste istruzioni per creare un’installazione locale o utilizzare uno strumento come questo per impostare un sito di sviluppo. 
2. Installa ed attiva un tema basato su blocchi scegliendolo tra le opzioni disponibili nella directory dei temi. 

Compito 2: Descrivi quello che vorresti vedere

Man mano che prosegui tra le esperienze riportate in precedenza, considera le seguenti domande come uno spunto di riflessione su ciò che vorresti vedere in futuro. Questo potrebbe includere qualunque cosa, dalla possibilità di usare un’immagine in evidenza come sfondo di un blocco copertina, ad avere a disposizione più controlli integrati per stilizzare le tue immagini, fino a ripensare le immagini in evidenza in generale. Condividi pure ciò che vuoi e non preoccuparti di quanto possa essere pratica o meno un’idea. Questo serve ad avere un’idea di ciò che chi utilizza WordPress vorrebbe vedere in futuro. Rispondi ad una, a tutte o a nessuna di queste domande! Sono intese proprio per farti ragionare nel giusto ordine di idee, piuttosto che fornire delle caselle da spuntare: 

• Come ti piacerebbe vedere Openverse o la WordPress Photo directory integrate nell’esperienza?
• Cosa ti viene in mente quando pensi a Pattern e media?
• Quali miglioramenti del flusso di lavoro ti vengono in mente? Cosa è stato difficile da ottenere?
• Quali compiti di base devi fare fuori da WordPress per preparare come si deve i tuoi media e come vorresti che questi passi fossero integrati all’interno dell’esperienza?
• Cosa ne diresti di utilizzare un’immagine le cui informazioni di attribuzione non possano essere rimosse? E di un’immagine su cui non puoi fare modifiche significative?
• Qualunque altra cosa? Pensa in grande!

Condividi il tuo feedback entro mercoledì 23 febbraio 2022

Come sempre, grazie per la tua partecipazione a questo esercizio. Se qualcosa ti impedisce di partecipare, faccelo sapere in #fse-outreach-experiment, nei commenti a questo articolo oppure via DM in slack ad @annezazu (l’autrice dell’articolo originale!). Considera che non tutto quello che viene condiviso qui sarà implementato data la natura di questa esplorazione, ma sappi che le tue idee aiuteranno sicuramente a dare forma a ciò che sarà possibile nel futuro.

Unisciti ad una chiacchierata “in piazzetta” il 16 febbraio 2022 @ 5:30PM UTC 

Se vuoi andare ancora un po’ più a fondo in questa esplorazione e chiacchierare di Tutto quello che fa Media, unisciti a @fcoveram ed @annezazu nella nostra prossima chiacchierata estemporanea. Ti ricordiamo che queste sono chiamate informali ed aperte, a cui chiunque può unirsi o lasciare a piacimento, con videocamera accesa/spenta, per parlare o solo per ascoltare! Durerà meno di un’ora è sarà poi riassunta su Make Test. 

Per essere dei nostri, visita #fse-outreach-experiment in Make Slack, su cui condivideremo un link all’ora della diretta. 

#fse-exploration, #fse-outreach-program, #fse-testing-call, #full-site-editing