Questa è la nona chiamata per il test all’interno del Full Site Editing Outreach Program! Per sapere di più su questo programma di divulgazione, dai un’occhiata a queste FAQ con utili dettagli. Per entrare nel vivo, vai su #fse-outreach-experiment in Make Slack per futuri annunci di test, articoli utili ed altro ancora.
Rispetto alle precedenti chiamate per il test, questa è ancora più orientata alla comunità, dopo il suggerimento di @blake di fare una chiamata che avesse come tema l’Università. Se vuoi suggerire un’idea per una chiamata per il test, sappi che è più che benvenuta e che tutte le idee saranno considerate in relazione alle attuali priorità del progetto, in modo da stabilire quali abbia più senso intraprendere. Puoi condividere idee direttamente nel canale slack o tramite DM ad @annezazu.
Panoramica delle funzioni
Per basare questo test su un esempio della vita di tutti i giorni, torneremo a scuola come amministratori e creeremo un header personalizzato per dare il benvenuto a studenti, genitori ed insegnanti alla nostra ipotetica università. Come ispirazione, dai un’occhiata al campione di siti universitari di seguito o cercane qualcuno vicino a te! Dato che questo test si concentra sul costruire la porzione dell’header, l’attenzione è puntata su questo aspetto e sul prendere nota di cosa è stato fatto su ogni sito:
https://www.kyoto-u.ac.jp/en
https://www.ni.ac.rs/en/student-info
https://engineering.asu.edu/
Come puoi immaginare, questo test ci consentirà di esplorare più in profondità il blocco Navigazione. Per rinfrescare la memoria, è un nuovo, potente blocco che fornisce l’abilità di modificare il menu di navigazione di un sito, sia in termini di struttura che di design. Per aiutarci a prepararlo per l’inclusione in una futura versione di WordPress, il test ha lo scopo di esplorare i limiti di cosa può fare questo blocco.
In modo simile ai test precedenti, se scegli di sbizzarrirti con la creatività, condividi uno screenshot nei tuoi commenti, in modo che possiamo complimentarci per quello che hai creato. Come ispirazione, ecco il mio esempio di seguito, con più livelli di elementi sottomenu visualizzati:
Ambiente di test
Anche se più avanti troverai maggiori informazioni per assicurarti di impostare tutto nel modo corretto, ecco gli aspetti chiave necessari per il tuo ambiente di test:
In generale, assicurati di usare la versione più recente di ogni parte del setup e tieni presente che le versioni potrebbero essere cambiate da quando questo articolo è stato condiviso.
Problemi noti
Durante la preparazione di questa call per il test, sono saltati fuori alcuni problemi in cui potresti imbatterti durante la prova. Sappi che sono già stati segnalati. Ecco una lista non esaustiva di quelli più importanti:
Passi del test per principianti
Questa sezione è indirizzata a chi vuole seguire dei passi specifici per creare un header e potrebbe non avere molto altro tempo per spingersi un po’ oltre con questo test.
Anche se questa call per il test è focalizzata sulla prova di una funzionalità specifica, è probabile che troverai degli altri bug mentre utilizzi una funzione beta come questa! La segnalazione di tutti i bug che troverai è ben accetta nel rapporto che invierai riguardo il tuo test, anche se non sono direttamente riconducibili alla funzionalità di cui hai fatto il test.
Crea la struttura (parte del template, colonne, etc.)
- Naviga fino alla vista “Site Editor (beta)”. Questo aprirà automaticamente l’editor del template che fa funzionare la tua home page.
- Dopo aver aperto la tua home page, rimuovi il blocco Navigazione che trovi all’interno della parte del template Header. Questo serve a reimpostare l’header in modo da poter aggiungerci dei contenuti più avanti.
- Seleziona il blocco Colonne genitore e, usando le impostazioni del blocco nella barra laterale, cambia il numero di colonne da 2 a 3.
- Torna al blocco colonne e, usando le impostazioni del blocco nella barra degli strumenti, assicurati che sia impostato su larghezza piena.
Costruisci il branding del sito
- Nella prima colonna, inserisci il blocco Logo del sito e carica/usa un logo per il sito. Puoi usare questo logo gratuito di logodust.com se vuoi.
- Ora personalizza i blocchi titolo del sito, motto del sito e logo del sito in base ai tuoi gusti (cambia font, colore, allineamento, ecc.)
- Nella seconda colonna, inserisci un blocco Pulsanti per aggiungere un avviso a proposito di COVID, collegandolo all’articolo sull’aggiornamento COVID di agosto. Puoi fare questo cercando il titolo dell’articolo. Se non hai ancora importato il contenuto demo necessario, fallo usando questo file di esportazione (apri il link e fai clic sulla voce “Download”).
Crea un semplice menu per gli elementi principali
- Nella terza colonna, inserisci un blocco navigazione e seleziona l’opzione “inizia vuoto”.
- A questo punto, usa il blocco Link pagina per aggiungere le seguenti pagine dal contenuto importato: Contact, Directions, Make a Donation. Per fare questo, basta iniziare a scrivere il titolo di ogni pagina. A questo punto, noterai probabilmente il bug relativo alla spaziatura che prevediamo di risolvere nella versione 11.3 di Gutenberg.
- Rinomina la voce di menu Make a Donation in Donate per renderla più breve, semplicemente modificando il testo del blocco Link pagina.
- Per completare il menu, inserisci il blocco Ricerca e, usando le impostazioni nella barra laterale, personalizzalo in base ai tuoi gusti (scegli colore di sfondo, colore del test, larghezza, ecc.).
- Una volta che le voci del menu sono impostate, seleziona tutto il blocco Navigazione ancora una volta e, nelle impostazioni della barra laterale, sotto “Impostazioni di visualizzazione” attiva l’opzione Abilita il menu responsive. A questo punto puoi, se vuoi puoi anche personalizzare gli stili del blocco.
Creare un menu più complesso per voci specifiche
- Seleziona tutto il blocco Colonne che contiene le tue tre colonne (questo è uno dei casi in cui potresti trovare utile la Visualizzazione in modalità elenco). Usando le opzioni aggiuntive all’interno del menu, seleziona “Inserisci prima” per aggiungere un altro blocco.
- Aggiungi un altro blocco Colonne e seleziona l’opzione 30/70.
- Da qui, seleziona tutto il blocco Colonne ancora una volta e, usando le impostazioni nella barra degli strumenti del blocco, assicurati che sia impostato su Larghezza piena.
- Aggiungi un blocco Navigazione alla colonna più ampia, con larghezza 70%, e seleziona l’opzione “Inizia vuoto”.
- A questo punto, utilizza il blocco Link pagina per inserire le seguenti pagine dal contenuto importato: About, Admissions, Student Life, Research, and News. Per fare questo, puoi iniziare a scrivere il titolo di ogni pagina.
- Una volta che gli elementi principali del menu sono sistemati, seleziona tutto il blocco Navigazione ancora una volta e, nelle impostazioni della barra laterale, sotto “Impostazioni di visualizzazione” attiva l’opzione Abilita il menu responsive.
- Da qui, aggiungi le voci dei sottomenu ad About, Admissions, Student Life, e Research. Nel caso ti servisse un aiuto, ecco uno screenshot dell’icona per aggiungere voci sottomenu.
- About dovrebbe avere le seguenti voci come sottomenu: Distinguished Alumni, Diversity and Inclusion, Faculty, History, Leadership.
- Admissions dovrebbe avere le seguenti voci come sottomenu: Career Paths, Undergraduate Graduate Admissions, Scholarship & Financial Aid, Tuition.
- Research dovrebbe avere le seguenti voci come sottomenu: Awards & Honors, Partnerships, Undergraduate Research, Graduate Research.
- Student Life dovrebbe avere le seguenti voci come sottomenu: Athletics, Tutoring Services, FAQs, Study Abroad Opportunities, Tutoring, Services.
- A questo punto, aggiungi voci sottomenu sotto Admissions > Career: Business, Design, Technology.
- Una volta che le voci sottomenu sono state aggiunte, riordina e rinomina le varie voci sottomenu in base alle tue preferenze. Puoi riordinarle usando l’opzione che trovi all’interno del blocco Navigazione quando selezioni tutto il blocco Navigazione, come mostrato in questa GIF.
- Se vuoi aggiungere delle altre pagine che ancora non esistono, puoi farlo scrivendo un titolo che non esiste ancora all’interno del tuo sito. Facendo questo, vedrai un’opzione per creare la bozza di una pagina. Fai questa operazione per almeno una voce di menu. Ricordati di divertirti e creare qualcosa che sia davvero a tema Università!
- A questo punto, personalizza tutto il blocco Navigazione come preferisci (cambia allineamento, colore, dimensione dei font, ecc.). Ricorda che per gli elementi sottomenu puoi usare le impostazioni colore in sovraimpressione per impostare il colore che preferisci.
Salva il tuo lavoro e continua a personalizzare
- Fai clic su “Salva” per salvare le tue modifiche e vedere il tuo sito sul frontend. Nota eventuali differenze tra quello che vedi nell’editor e quello che vedi sul frontend. Se hai pagine che sono ancora bozze, assicurati di pubblicarle in modo che siano visibili nel menu.
- Prova a vedere il tuo sito su un dispositivo mobile e verifica se i menu vengono visualizzati in modo responsive con un menu hamburger.
- A questo punto, continua a personalizzare in base alle tue preferenze, cambiando allineamento, colore, dimensione dei font, eliminando, rinominando, riordinando delle voci ed altro ancora. Puoi anche inserire dei blocchi aggiuntivi sia al blocco Navigazione, incluso i blocchi Spazio vuoto ed Icone social.
Passi del test avanzati
Questa sezione è indirizzata a chi ha il tempo per spingersi oltre con il test ed è a proprio agio nell’avventurarsi nell’editor del sito senza molte indicazioni.
I passi per questa sezione sono semplici: trova l’header di un’università e prova a ricrearlo tutto o in parte. Puoi benissimo continuare ad usare TT1 Blocks o utilizzare il tema a blocchi che preferisci (prendi nota se usi un tema diverso). Puoi usare le università elencate in precedenza o puoi trovarne di tue. Quando lasci un commento, condividi uno screenshot di quello che stavi cercando di replicare ed uno screenshot di quello che è stato possibile creare. È molto utile vedere cosa vorrebbe creare chi partecipa, quindi non esitare a condividere i diversi design che vedi.
Cosa notare:
Se ti va, ricorda di condividere uno screenshot di quello che hai creato!
- L’esperienza si è bloccata in qualche punto?
- L’esperienza del salvataggio ha funzionato correttamente?
- Hai trovato delle funzioni mancanti mentre creavi l’header? Fornisci informazioni più specifiche possibile, specialmente se hai seguiti i passi avanzati
- Cosa hai trovato particolarmente confuso o frustrante riguardo l’esperienza?
- Cosa ti è piaciuto o hai apprezzato in modo particolare riguardo l’esperienza?
- Credi che quanto creato all’interno dell’editor del sito corrisponda a quello che vedi sul tuo sito?
- Come ti è sembrato il funzionamento del blocco Navigazione quando visualizzato su formati di schermi più piccoli?
- Ha funzionato usando solo la tastiera?
- Ha funzionato usando uno screen reader?
- Se vuoi, prova ad analizzare il tuo sito di test con uno strumento tipohttps://wave.webaim.org o https://www.accessify.com per vedere come si comporta.
Lascia un feedback entro il 1 settembre 2021
Lascia un feedback nei commenti di questo articolo. Se preferisci, puoi sempre creare delle issue in questo repo GitHub direttamente per Gutenberg ed in questo repo GitHub per TT1 Blocks. Anche se lasci un feedback in GitHub, commenta comunque di seguito indicando il link. Se vedi che qualcun altro ha già segnalato un problema, lascia comunque una nota qui di seguito riguardo la tua esperienza, sarà utile per fornire a chi sta lavorando per migliorare questa esperienza una panoramica più ampia su ciò che va migliorato.
#fse-outreach-experiment, #fse-outreach-program, #fse-testing-call, #full-site-editing
