Pagina standard ("Page")
La "Page" o pagina standard è la struttura di base per la pubblicazione dei contenuti. Presenta una serie di campi predefiniti e può essere strutturata con "Content container" e "Content item".
Contiene un gruppo di campi predefiniti quali il titolo, la voce nel menu, il sottotitolo, l’introduzione, la descrizione, un’area per poter creare e collegare moduli aggiuntivi, impostazioni relative al menu principale e secondario, l’area delle sottopagine collegate, l’immagine di “contenuto” e i metadati (informazioni che non si vedono sulla pagina online ma sono necessarie per SEO, accessibilità, ecc.).
Sezione "Content item name"
Il campo Content item name ci permette di identificare uno specifico item all’interno del nostro progetto gestito con Kontent.ai nonché di trovarlo più facilmente quando seguiamo una ricerca nella sezione “Content & assets” al di là della lingua utilizzata.
Pertanto, il Content item name non è il titolo (Title) della pagina né quello che poi risulta online.
Nei progetti con più lingue, ogni elemento di contenuto (Content item) include varianti per ogni lingua. Il nome dell'elemento (Content item name) è condiviso in tutte le varianti, mentre il contenuto è diverso a seconda della variante linguistica.
Poiché il Content item name ci serve per gestire internamente i vari item, ti suggeriamo di compilare questo campo utilizzando i titoli (Title) utilizzati nelle varianti linguistiche presenti.
Per esempio: Präsidium / Ufficio di presidenza / Ufize de presidënza.
Ti consigliamo inoltre di staccare i singoli nomi con uno slash o barra trasversale.
Sezione "Allgemein/Generale"
Nella sezione “Generale” inseriamo i contenuti testuali nonché eventuali moduli speciali.
La sezione “Generale” è strutturata in varie sottosezioni modulari che presentano campi editabili o aree compilabili.
Per facilitarti nell’inserimento die testi e die contenuti, in alcuni casi trovi brevi spiegazioni o informazioni relative ai singoli campi nonché sulle caratteristiche del content type.
I campi da compilare obbligatoriamente sono contrassegnati dall’asterisco.
Campo "Title"
”Title” è uno dei campi obbligatori da compilare e non può essere lasciato vuoto.
Nel campo “Title“ devi inserire il titolo della pagina, così come si presenterà online. Una volta inserito, Kontent.ai genera automaticamente l’URL della pagina, basandosi proprio sul titolo inserito.
Importante: ricordati che l’URL deve essere univoca e che non ci possono essere pagine con URL identica, altrimenti nasce un conflitto tra le pagine e non funziona correttamente la navigazione del sito.
Attenzione: ricordati che se cambi il titolo della pagina, automaticamente Kontent.ai cambierà anche l'URL. Questo perché è fondamentale che tra titolo della pagina e URL ci sia piena corrispondenza. Pertanto, se apporti modifiche al titolo, controlla l'URL e ricordati che puoi sempre modificarla manualmente.
Il nostro consiglio è di scegliere in maniera accurata titolo e URL della pagina in modo che contengano la "parola chiave" (link a linee guida "Web Writing").
Ti consigliamo di non scegliere un titolo troppo lungo o eventualmente di modificare manualmente il nome dell’URL nel campo dedicato in fondo alla pagina.
Quest’ultima pratica è necessaria per le parole tedesche che contengono una UMLAUT, in quanto al momento Kontent.ai non corregge in automatico le parole.
Guarda un esempio di correzione manuale dell’URL nello screenshot sottostante:
Campo "Navigation title"
Il campo "Navigation title" non è obbligatorio. Serve per l’eventuale voce di menu che compare nel menù di navigazione. Se lasciato vuoto, viene utilizzato in automatico il testo inserito nel campo Title.
Infatti, il campo "Navigation title" è utile solo per comprimere il titolo della pagina da inserire in un menù.
Campo "Subtitle"
Puoi utilizzare il campo "Subtitle" per inserire un eventuale sottotitolo. Non è un campo obbligatorio.
Campo "Introduction"
Nel campo "Introduction" puoi inserire un eventuale testo introduttivo. Non è un campo obbligatorio.
Campo "Text"
Il campo "Text" serve per inserire il contenuto testuale della pagina.
Poiché la parte più importante di una pagina è il suo contenuto testuale, cioè il testo informativo, i testi ben scritti e strutturati fanno la differenza.
Per aiutarti a creare testi di qualità per il web, abbiamo pensato di condividere alcune brevi regole fondamentali.
- Usa un linguaggio rivolto all'utente, non all’organizzazione proprietaria del sito. Pertanto, cerca di usare parole che l'utente possa comprendere facilmente.
- Fai attenzione alla coerenza logica del testo. Per fare ciò, puoi utilizzare la tecnica della “piramide rovesciata”: inizia sempre con le informazioni più importanti.
- Evita di scrivere testi ridondanti. Inoltre, non ripetere gli stessi elementi o gli stessi link: in questo modo non enfatizzerai la loro importanza, ma otterrai l'effetto contrario.
- Struttura i testi. Per la scelta dei sottotitoli, seleziona i titoli dell’editor seguendo possibilmente l’ordine numerico crescente. (H3, H4, H5 etc.). Evita titoli poco concreti, ambigui o criptici. Vanno meglio quelli semplici e informativi.
- Usa l'imperativo per far eseguire delle istruzioni (call to action) e cerca di evitare l’utilizzo dei punti esclamativi;
- Sciogli gli acronimi la prima volta che li usi in una pagina (tranne quelli entrati a far parte del linguaggio comune ad esempio CD o DVD) e comunque non usarli come link di navigazione.
- Evita la scrittura di parole TUTTO MAIUSCOLE.
- Presta particolare attenzione all'uso della punteggiatura e degli spazi: questi non andrebbero mai usati per dare enfasi (web writing, non W E B W R I T I N G o W.E.B.W.R.I.T.I.N.G.)
- Usa il grassetto e non il corsivo. Infatti, anche se tradizionalmente il corsivo serve a distinguere e a dare enfasi, sullo schermo si legge meglio il grassetto che tuttavia non va utilizzato per interi paragrafi, quanto più per una serie di parole chiave all’interno del testo.
- Non usare testo sottolineato a meno che non si tratti di un link.
- Non inserire spazi vuoti per creare distacchi maggiori fra le parti di contenuto. Il layout definito nei minimi dettagli e non può essere modificato in questo modo.
- Ricordati che i testi non vanno allineati: lo standard è di tenerli a sinistra. In caso di testo accompagnato da un’immagine, allinea l’immagine al testo.
Nel caso in cui avessi bisogno di aiuto per la redazione e strutturazione dei contenuti, ricordati che puoi chiedere supporto alla redazione centrale e al Technical Content Team di Informatica Alto Adige.
In kontent.ai puoi scrivere direttamente i testi negli appositi campi oppure copiarli da altri programmi come ad es. Word. Quando si copia un testo la formattazione viene automaticamente cancellata dall’editor.
Tra gli strumenti per la strutturazione del testo, hai disposizione le funzioni principali quali grassetto, corsivo, liste ordinate e non ordinate, sottotitoli (H1, H2, H3, H4).
I sottotitoli
Ricordati che l'assegnazione dei sottotitoli è molto importante.
Il titolo principale di una pagina corrisponde a “H1” e quindi non può essere riutilizzato, ma si prosegue con “H2”. Se segue un sottotitolo dello stesso livello, si assegna sempre “H2”, altrimenti si passa a “H3” e via discorrendo. Va seguito sempre un ordine logico in modo che anche il codice che verrà generato abbia la semantica giusta.
Inoltre, anche i programmi di lettura per i diversamente abili (screenreader) potranno riconoscere un testo come titolo e dare la giusta enfasi ad esso (accessibilità).
Per assegnare un sottotitolo, prima sottolinea la porzione di testo; quindi, scegli il tipo di sottotitolo corretto (H2, H3 ecc.). È preferibile avere un testo suddiviso in parti brevi con sottotitoli, perché risulta più facile da leggere.
NOTA: non è possibile intervenire sul codice HTML!
Le liste
Le liste andrebbero sempre rappresentate come tali, scegliendo l’apposita icona nel menu dell’editor. Trovi sia l'icona per la lista puntata, sia quella per le liste numerate. Basta evidenziare il testo per trasformarlo in lista e poi provvedere a strutturarlo correttamente.
I collegamenti: "Web URL", "Content item", "Email" e "Asset link"
Per creare un collegamento ipertestuale (link), selezioniamo la parola o il testo corrispondente: comparirà il simbolo del collegamento.
A questo punto, possiamo decidere se creare:
- un collegamento interno, cioè verso un'altra pagina del nostro sito web;
- un collegamento esterno, cioè verso un sito web esterno o un indirizzo Internet specifico;
- un collegamento a un documento (download), a un indirizzo e-mail oppure a un numero telefonico (phone).
"Web URL": Permette di inserire un link esterno. Bisogna inserire il link completo del sito esterno nel campo ”Link URL” e compilare l’ultimo campo ”Link Title”. Quest’ultimo è obbligatorio e serve per rispettare le regole legate all’accessibilità. I programmi di screenreader leggono questa descrizione all’utente diversamente abile.
Un esempio di frase da poter inserire: (Link esterno) - Sito internet XXX: ”Link al sito web ”xxx”
Content item: permette di inserire un link interno. Appena si clicca su “Content item” si apre una nuova finestra dove bisogna selezionare la pagina da collegare.
Nota: fare attenzione a collegare un content item di tipo “Page” (in caso fare uso dei filtri)
Asset link: ti permette di inserire un link ad un documento. Appena si clicca su questa voce appare la seguente finestra che permette di selezionare il documento desiderato. Si può scegliere un documento già presente sotto la sezione “Assets” del progetto o caricare un nuovo documento tramite “Drop assets to upload, or browse”.
E-mail: ti permette di inserire un indirizzo e-mail. Va inserito direttamente l’indirizzo e-mail completo nel campo “Email" e anche il soggetto previsto.
Phone: l'opzione ci consente di creare un collegamento a un numero di telefono.
In questo caso, il collegamento permette di chiamare direttamente il numero tramite lo smartphone.
Per utilizzare quest'ultima funzionalità, nel campo "Numero di telefono" dobbiamo inserire il numero telefonico completo di prefisso, del tipo: +390471555555.
Quindi, andrebbe scritto tutto attaccato, con il prefisso nazionale davanti al numero di telefono, senza barra trasversale (slash) né spazi.
Il numero di telefono visualizzato sul sito web deve essere reso leggibile utilizzando la spaziatura.
Esempio: 0471 55 55 55
Per un team c’è la possibilità di inserire dei commenti e suggerimenti tramite le 2 icone presenti:
Nota: per quanto riguarda le tabelle in linea generale non vanno inserite. Bisogna confrontarsi con il capoprogetto e i tecnici, visto che devono essere in ogni caso accessibili e ove possibile si cercano soluzioni alternative, ad es. l'inserimento di una tabella in forma di documento scaricabile (pdf).
Sezione “Container”
Questa sezione serve per integrare moduli speciali di vario genere, ad es. un gruppo di downloads, dei banner, box, pubblicazioni, testo con immagine, ecc.
Tutti i moduli che possono essere integrati in questa sezione sono elencati nella descrizione.
É possibile integrare un modulo già esistente nel progetto tramite ”Add existing item” o la creazione di un modulo nuovo tramite ”Create new item”.
“Add existing item”: Si apre una nuova finestra. Bisogna selezionare l’item di interesse.
“Create new item”: Si apre una nuova finestra. Bisogna selezionare il content type desiderato dalla lista presente.
Sezione "Show in navigation"
Attraverso questa sezione puoi decidere se visualizzare o nascondere la pagina in questione dalla navigazione. Nessuna selezione significa che la pagina viene mostrata nella navigazione del sito.
Sezione "Show Second Navbar"
Se una pagina contiene delle sottopagine, è possibile decidere se visualizzare o nascondere la seconda navigazione che porta alle sottopagine e che si trova a fine pagina. Nessuna selezione significa che la seconda navigazione viene visualizzata.
Sezione "Show Local Anchor Nav"
Se attivi questa opzione, all'inizio della pagina apparirà un indice. Questo mostrerà i titoli degli elementi "Image and Text" (Immagine e testo) e "ServiceEditor" inseriti nella pagina. Puoi saltare direttamente a questi contenuti cliccando sul titolo corrispondente nell'indice.
Sezione "Subpages"
In questa sezione è possibile aggiungere o creare sottopagine (solo item di tipo “PAGE”).
Sezione "Bilder/Immagini"
In questa sezione può essere inserita una sola immagine per la parte di contenuto.
Viene indicata la dimensione massima che può avere un’immagine, cioè non più di 3 MB.
L’immagine può essere caricata direttamente dalla sezione asset di Kontent.ai tramite il bottone “Pick from assets”.
Se si tratta invece di un’immagine nuova, ancora non presente sotto la sezione asset, si carica tramite “Browse” o si trascina direttamente in questo spazio con la funziona di “drag & drop”.
Seguono varie impostazioni, possiamo ad es. Decidere l’allineamento dell’immagine, a destra o a sinistra. Il testo segue l’immagine e quindi si adegua all’orientamento della foto.
Inoltre è possibile definire lo spazio da occupare in larghezza. Un’immagine può occupare l’intera larghezza (full) del contenuto disponibile, solo metà (half) o infine solo un terzo (single).
Con la versione a piena larghezza (full) compare prima l’immagine e a seguire poi il testo.
La qualità delle immagini dovrebbe sempre essere buona e la risoluzione di 72 dpi.
Inoltre vanno rispettate le misure standard previste dal webdesigner, questo per garantire un aspetto ottimale su ogni tipo di dispositivo (responsive design).
Di seguito le misure standard da rispettare:
- "full": 1170 pixel x 780 pixel
- "half": 562 pixel x 300 pixel
- "single": 562 pixel x 300 pixel
L’ultima impostazione riguarda la definizione dell’altezza dell’immagine, si può lasciare quella predefinita ("fixed") o invece ottenere l’altezza piena dell’immagine ("full").
Nota: Tutte le immagini utilizzate devono essere libere da copyright (royality-free) o in possesso della tua ripartizione/ufficio. Non è permesso per legge ri/prendere delle immagini da internet senza autorizzazione.
Tutte le immagini necessitano di un testo descrittivo chiamato „alt-text“. Questo testo deve descrivere l’immagine stessa e serve per essere conformi agli obblighi di accessibilità. I programmi di screenreader leggono questo testo all'utente diversamente abile. Nel caso di loghi o testi contenuti nell’immagine stessa, ad es. dei banner, è buona norma inserire gli stessi testi nel campo descrittivo per fare in modo che tutti gli utenti giungano all'informazione completa.
Nel caso in cui l’immagine sia più complessa, ad es. un diagramma, bisogna inserire una descrizione più approfondita in formato testo per dare un'alternativa accessibile.
Una volta inserita l’immagine bisogna inserire la descrizione (alt-text) nel campo dedicato o se presa dall’archivio del progetto (sezione asset) controllare che sia compilato.
Cliccando sull’immagine inserita si raggiunge il campo descrittivo obbligatorio:
Esempio anteprima con immagine inserita (versione online):
Sezione "Metadaten/Metadati"
Questa sezione serve per inserire i metadati.
Per approfondimenti vedasi la sezione dedicata "Metadati".
Videotutorial "Elaborazione di una pagina"
Guarda su YouTube il videotutorial "CMS Kontent.ai: Elaborazione di una pagina"
Ultimo aggiornamento: 26/03/2025