Questo intero documento è una libera traduzione del tutorial in lingua inglese "Content Creation with Kupu and Other WYSIWYG Editors".

In Plone possono essere usati vari editor WYSIWYG, inclusi Kupu, Epoz, e FCK editor. Tuttavia, alcuni editor potrebbero non essere compatibili con la versione di Plone che si è scelto di usare.

Possono essere installati in una singola istanza Plone editor WYSIWYG multipli, in modo da permettere ai membri di un sito di scegliere il loro editor favorito, attraverso il menù Preferenze personali, nel campo Editor del contenuto (Content editor), come mostrato qui di seguito:

 
La maggior parte degli editor WYSIWYG sono basati su principi molto simili, con interfacce che imitano quelle delle più comuni  applicazioni di elaborazione testi. Le familiari barre degli strumenti ed icone aiutano l'utilizzatore non esperto che non conosce bene il codice HTML a creare contenuti in Plone.

Quali sono le differenze tra gli editor WYSIWYG?

• Il codice HTML creato.
• L'interfaccia per l'inserimento delle immagini e le relative funzioni.
• Il clean-up del codice può essere effettuato attraverso icone speciali sulla barra degli strumenti, oppure dopo aver cliccato il pulsante Conferma le modifiche.
• Le configurazioni di default dell'editor WYSIWYG possono comprendere o meno funzioni per cambiare il colore del testo e di altri elementi.

Qual è lo scopo di questo tutorial?

Questo tutorial è dedicato alla gestione dei contenuti con Kupu. Introduce la sua interfaccia e spiega come inserire immagini, come creare pagine di FAQs, e perché è utile usare ResolveUID. Il suo scopo è aiutare i gestori di contenuti a prendere confidenza con gli editor visuali di tipo WYSIWYG in Plone.

Questo tutorial è una libera traduzione di una parte del Plone Book for Content Managers - un tutorial costruito sulle questioni più recenti riguardo alla gestione dei contenuti con Plone. Questa documentazione è in continua espansione, per monitorare da vicino le nuove aggiunte si può consultare il mio blog.

Cos'è Kupu?

Kupu è un editor open source e client-side per Firefox, Netscape ed Internet Explorer. Ispirato all'editor Epoz di Maik Jablonski, è stato scritto da Paul Everitt, Guido Wesdorp e Philipp von Weitershausen per migliorare il codice e l'architettura JavaScript, oltre al suo supporto standard, il supporto per webservers diversi da Zope (la piattaforma obiettivo originale di Epoz), la sua customizzazione e altre questioni.

Le caratteristiche di Kupu:

• Kupu è facile da integrare in una vasta gamma di CMS.
• Kupu può essere facilmente personalizzato ed espanso.
• La tecnologia avanzata e sempre aggionata di Kupu usa CSS a favore dell'HTML per il layout e la presentazione all'utente.

Una normale barra degli strumenti di Kupu appare così:

È costituita da questi pulsanti, ognuno dei quali copre una diversa funzione. I vari pulsanti sono descritti nella sezione Le icone della barra degli strumenti di Kupu.

Nel caso alcune delle icone non vengano utilizzate, non c'è alcun motivo per cui debbano rimanere sulla barra degli strumenti.  Si possono escludere dalla barra in modo che non interferiscano con il proprio lavoro.

Le opzioni presenti permettono di customizzare la barra degli strumenti di Kupu a seconda delle proprie esigenze. Si può scegliere Visibilità globale (Global button visibility) che permette di inserire un'espressione per controllare la visibilità di tutti i  pulsanti in una volta. Più in basso si trova Visibilità dei pulsanti (Button visibility):

Qui si possono selezionare gli elementi che si desidera vengano mostrati nella barra degli strumenti di Kupu. Oppure si possono deselezionare quelli che non si vuole compaiano.

Proviamo ora, per esempio, a deselezionare i seguenti elementi:

• diminuire il livello di rientro
• aumentare il livello di rientro
• inserisci ancore
• pedice
• apice
• colore del testo
• sfondo carattere
• inserisci tabella
• elenco definizioni

Una volta salvate le modifiche, ciò che si ottiene è una barra degli strumenti personalizzata senza i pulsanti che abbiamo escluso:

Nel caso servano solo pochi pulsanti per svolgere il proprio lavoro, si potrebbero ridurre a: grassetto, corsivo, html e zoom, non c'è motivo di avere una barra degli strumenti complessa con molte funzioni. Una volta deselezionati tutti i pulsanti che non si desiderano, ecco come apparirà la barra degli strumenti: 

Attenzione:

• ci sono alcuni pulsanti che fanno parte di un unico gruppo, come il gruppo Grassetto/Corsivo, il gruppo Pedice/Apice, bisogna quindi selezionare il gruppo e anche i singoli elementi, altrimenti i pulsanti non saranno visibili nella barra degli strumenti.
• Il box che contiene il menù del Formato paragrafo (Styles pulldown) deve sempre rimanere selezionato, altrimenti comparirà un errore di Kupu.

L'editor Kupu permette di inserire file di immagini immagazzinate in Plone nel proprio documento, usando l'icona presente nella barra degli strumenti:

Cliccando su questo pulsante, appare il pannello Inserisci immagine (Insert Image):

Le tre colonne del pannello mostrano:

• Nella prima colonna a sinistra - una lista di navigazione tra cartelle.
• Nella seconda colonna - una lista di navigazione tra oggetti, da cui si può scegliere il file immagine desiderato.
• Nella terza colonna - un'anteprima dell'immagine, opzioni per il suo allineamento, per le dimensioni e la didascalia.

Nell'esempio mostrato sopra, è stata selezionata l'immagine di una rosa - rose.png (un'immagine piuttosto grande, originariamente di 600*450 pixels).

A seconda dell'opzione di allineamento scelto, l'immagine verrà posizionata nella pagina (e verrà generato il seguente codice HTML):

• a sinistra (<img class="image-left captioned" src="rose.png" alt="rose" />);
• a destra (<img class="image-right captioned" src="rose.png" alt="rose" />);
• centrato/inline (<img class="image-inline captioned" src="rose.png" alt="rose" />).

Si può anche scegliere la dimensione dell'immagine che si desidera. E' una funzione utile soprattutto se si lavora con immagini molto grandi, senza bisogno di ricorrere a Photoshop o altre applicazioni simili per tagliare o ridimensionare la propria immagine. Il menù a tendina riguardante le dimensioni fornisce varie scelte di grandezza e formato:

• Large (<img src="rose.png/image_large" alt="rose" />);
• Preview (<img src="rose.png/image_preview" alt="rose" />);
• Mini (<img src="rose.png/image_mini" alt="rose" />) - the minimum-size image is formed;
• Thumb (<img src="rose.png/image_thumb" alt="rose" />) - a thumb(inch)-size icon is made out of your image (little bigger than 2,5cm); 
• Tile (<img src="rose.png/image_tile" alt="rose" />) - a tile is made out of your image; 
• Icon (<img src="rose.png/image_icon" alt="rose" />) - an icon is made out of your image; 
• Listing (<img src="rose.png/image_listing" alt="rose" />) - a listing icon is made out of your image;

Le seguenti figure mostrano tutti i formati e le dimensioni che possono essere applicate ad un file immagine in Kupu. Si noti che l'immagine di partenza è di 600*450 pixels, quindi la versione più grande non può superare, in questo caso, queste dimensioni:

 icon (32,32)

 tile (64,64)

 


mini (200,200)

preview (400,400)

 large

original (600,450)

Didascalia dell'immagine

È possibile inserire una didascalia sotto l'immagine nella versione 1.4.x di Kupu. La didascalia viene composta in base alla descrizione dell'immagine. L' "Alt text" viene composto in base al titolo dell'immagine. Alt text e descrizione si aggiornano se l'immagine viene aggiornata.

Per abilitare le didascalie, navigare a Configurazione del sito (Site Setup) ->  Editor visuale Kupu (Visual Editor). Assicurarsi che le opzioni Link using UIDs e Allow captioned images siano selezionate in Configurazione di Kupu (Kupu Configuration).

Quando si aggiunge un'immagine nel sito, si può inserire del testo nella descrizione del file in modo che venga poi mostrato come didascalia dell'immagine.

Ora quando si crea una pagina, e si inserisce un'immagine al suo interno, si può selezionare il box Didascalia (Caption):

Salvando la pagina, si vedrà l'immagine seguita dalla sua didascalia inserite in un riquadro:

FAQ è l'abbreviazione di "Frequently Asked Question(s)", ovvero "domande frequenti", diremmo in italiano. Si riferisce in genere a una serie di domande e risposte,  che si suppone siano quelle più frequenti in un dato contesto e intorno ad un dato argomento.

Con l'aiuto di Kupu, è molto semplice creare una sezione FAQ per il tuo sito, funzionale e dal bell'aspetto.

L'incona Inserisci ancore permette di creare collegamenti che legano parti diverse della stessa pagina.

Queste sono le fasi da seguire per creare una pagina di FAQs:

• Supponiamo di voler creare una pagina con questo look: un indice di 9 domande in cima alla pagina, seguite da ogni domanda con relativa risposta. (esempio FAQ).
• Formattare le voci corrispondenti ad ogni domanda come 'subheading', e scrivere la risposta di seguito
• Posizionare il cursore all'inizio della prima voce, cliccare sull'icona Inserisci ancore.
• Nel pannello seguente, scegliere il sottotitolo (subheading) al quale si vuole collegare la domanda. Nel caso si tratti della prima domanda, selezionare la prima scelta disponibile:

• Cliccare su OK. Comparirà un link (composto dal testo della domanda stessa) all'inizio della pagina.
  
• Eseguire gli stessi passi per tutte le domande rimanenti. Si otterrà così in cima alla pagina un elenco delle domande, ogni voce è un link alla domanda/risposta corrispondente.

Oltre a creare semplici collegamenti all'interno di una stessa pagina, il sistema di ancore di Kupu permette anche di creare tabelle di contenuto. Supponiamo di avere un documento con varie informazioni, disposte in questo modo: brevi paragrafi (normal) preceduti da un titolo (subheading):

Per creare una tabella di contenuti che compaia all'inizio del documento, nel pannello di Modifica pagina, posizionare il cursore nel punto in cui si vuole che la tabella venga creata, cliccare sull'icona Inserisci ancore, selezionare il tab 'Table of contents' nel pannello Ancore:

Si può scegliere tra un paio di opzioni riguardo allo stile del paragrafo, sulla cui base verrà generata la tabella dei contenuti.

C'è un box vicino a 'Numbering', che permette di creare una tabella di contenuti composta da una lista numerata (se viene selezionato) oppure una lista normale (se non viene selezionato). Di fianco si può scegliere lo stile della tabella (Table style) - normal, heading, subheading etc..

Selezionando lo stile paragrafo Subheading, nessun altra opzione di stile, selezionando toggle all, e rendendo la tabella come una lista numerata, con stile paragrafo Discreet, in questo modo:

 
Si otterrà:

In quest'esempio il pannello Ancore presenta 3 tab: 'Link to anchor', 'Manage Anchors' and 'Table of contents'. Nel caso uno di questi tab non sia presente nella propria versione di Kupu, si può andare in Configurazione del sito -> Editor Visuale Kupu e selezionare Toolbar tab. Nella lista dei pulsanti della barra degli strumenti di Kupu, selezionare l'icona Ancore:

Selezionare i box corrispondenti alle opzioni desiderate e salvare le modifiche.