Aggiungere pagine
facile

 Video: Aggiungere pagine 

Video: L'editor visuale 

Per aggiungere una pagina, utilizzate il menù Aggiungi un nuovo elemento nell'ambito di una cartella:

I campi Titolo e Descrizione sono posizionati nella parte superiore del pannello. È presente, in basso, anche il campo Commento alle modifiche, da utilizzare per inserire appunti e descrizioni delle modifiche apportate al documento man mano che le realizzate: molto comodo se state creando il contenuto in collaborazione con altre persone.

Al centro del pannello è posizionato il campo Testo del documento, in cui si inserisce il contenuto testuale principale della pagina. Il software utilizzato nell'ambito di Plone per creare il contenuto delle pagine, chiamato genericamente visual editor, e nello specifico costituito da uno strumento chiamato Kupu, rappresenta la possibilità di scrivere del testo in modalità WYSIWYG (da What You See Is What You Get, "ciò che vedi è come apparirà il tuo documento"). Tale modalità descrive come lavorano i moderni software per l'elaborazione di testi: per esempio, nel momento in cui associate il grassetto a un carattere, vedete immediatamente applicate tali modifiche all'interno del documento; è Plone che si occupa di agire adeguatamente sul codice HTML.

Se fate parte di coloro che amano creare del testo utilizzando i cosiddetti linguaggi di mark-up, allora potete disabilitare il visual editor dalle vostre preferenze personali, in modo tale da passare da Kupu a un editor testuale puro. I linguaggi di mark-up correntemente supportati da Plone sono:

• Markdown
• Textile
• Structured Text
• reStructured Text

Ognuno di essi si basa sull'inclusione di speciale codice di formattazione all'interno del testo. Per esempio, utilizzando Structured Text, circondare una frase con doppi asterischi la renderà in grassetto, dunque **Questa frase sarà in grassetto**. La conoscenza di questi formati di mark-up è consigliata per velocizzare l'immissione di testo qualora abbiate a che fare con un numero considerevole di pagine, oppure siate capaci di fare uso di un approccio un po' più tecnico nella scrittura del testo. Molte persone preferiscono questi formati non solo per la loro velocità intrinseca, ma anche per la fluidità delle loro espressioni. Vi sono numerosi codici speciali da imparare per la maggior parte di questi linguaggi di mark-up, dunque utilizzarne uno non implicherà grossi sforzi.

Molte persone si trovano però più a loro agio con il sistema WYSIWYG.

Continueremo quindi ad analizzare questo approccio più comune : come usare il visual editor (Kupu).

Guarda il video Plone 2 su usare il visual editor per creare il testo del documento.

Assumiamo di conoscere già come utilizzare un software di elaborazione di testi. Ci sono un paio di elementi specifici per il web nel menù di base, ma la maggior parte di essi sono immediatamente riconoscibili:

Grassetto & Corsivo (Bold, Italics)

Devi solo selezionare con il mouse il testo che intendi rendere grassetto o corsivo e cliccare la "B" per il grassetto o la "I" per il corsivo.

Allineamento

Per modificare l'allineamento, seleziona il testo che ti interessa e clicca l'apposita icona per l'allineamento a sinistra, centrato, a destra o giustificato. Puoi anche selezionare diversi paragrafi per applicare l'allineamento desiderato a parti più consistenti del tuo documento.

Elenchi numerati e puntati

Si può inserire un elenco puntato o numerato selezionando il paragrafo interessato e cliccando una delle due icone corrispondenti a questa funzione. All'interno dell'elenco puoi naturalmente applicare il grassetto o il corsivo a parti del testo, opzioni che verranno mantenute anche se le avevi inserite prima di creare l'elenco.

Elenco definizioni (Definition Lists)

Le liste di definizioni sono ideali quando si devono gestire elementi (parole o frasi) che si riferiscono a un paragrafo, come nell'esempio,la lista di gruppi di farfalle con relativa breve descrizione.

Una lista di definizioni ha il seguente aspetto:

Swallowtails

Famiglia delle Papilionidae - Le farfalle Swallowtails prendono il loro nome dalla lunga coda divisa in più parti. Sono tra le più grandi e le più leggiadre. 

Skippers

Famiglia delle Hesperiidae - Le farfalle Skippers prendono il nome dal loro volo rapido e scattante.

Le fasi necessarie per creare una lista di definizioni sono leggermente più complicate:

1. Posizionati in una riga vuota del tuo documento, nel punto in cui vuoi creare la lista.
2. Clicca l'icona relativa alle liste di definizioni.
3. Digita la prima parola o frase. Questa verrà automaticamente mostrata in grassetto e allineata a sinistra.
4. Ora premi Invio per spostarti su una nuova riga.
5. Componi la definizione. Noterai che il testo ora è normale, non in grassetto, ed è rientrato rispetto al titolo della definizione.
6. Premi nuovamente Invio per spostarti su una nuova riga.
7. Ripeti i passaggi da 3 a 6 per aggiungere nuove parole o frasi e le loro rispettive definizioni.

Importante: Quando hai terminato la lista, devi premere il tasto Invio due volte per ritornare alla normale formattazione del paragrafo.

Quotatura (Blockquotes)

Le Blockquotes sono uno speciale stile per creare rientri e gerarchie in un paragrafo, facendo in modo che questo si distingua a prima vista dal normale testo del documento. Questa formattazione è utile per citazioni, riferimenti, ma può anche essere utile per altri contenuti; ecco un esempio di come appare:

rientro livello uno

rientro livello due

rientro livello due

rientro livello due

rientro livello uno

rientro livello due

rientro livello tre

rientro livello tre

rientro livello due

rientro livello uno

Per creare questo tipo di formattazione, spostati sul paragrafo interessato e clicca l'icona relativa a questa opzione. Puoi anche agire su diversi paragrafi alla volta. Per creare livelli di rientro più profondi basta cliccare più volte sull'icona.

Immagini

Il visual editor di Plone ti permette di inserire delle immagini nella pagina. Per far ciò, posiziona il cursore nel punto in cui vuoi aggiungere l'immagine e clicca l'icona Inserisci immagine . Comparirà il seguente pannello:

Il pannello Inserisci immagine presenta alcuni link nella colonna di sinistra, che ti aiuteranno a trovare le immagini che sono già state caricate nel sito web Plone. Portale (Home) è la "base" di tutto il sito web (non molto diverso dal "c: drive" in un PC Windows o "MacIntosh HD" in un Mac). Current folder è la cartella in cui ti trovi, in cui stai aggiungendo la nuova pagina. My recent items e Recent items mostano le immagini che sono già state caricate sul sito, indipendentemente da dove sono inserite.

Normalmente, si seleziona semplicemente Current folder per caricare l'immagine da inserire nella pagina. In questo caso, questo è ciò che apparirà:

Compare il link Upload che ti serve per inserire l'immagine. Cliccandolo comparirà un box familiare in cui selezionare i file del tuo computer; ecco un esempio di un box su un Mac:

Nell'esempio è stata selezionata la cartella "family" contenuta nella memoria del computer che si sta utilizzando. Si può selezionare qualsiasi immagine, questa verrà trasferita e caricata nel sito web Plone e mostrata poi nella pagina che si stava creando, automaticamente immagazzinata nella maniera corretta. Questa è un'operazione che imparerete presto ad apprezzare per la sua semplicità e la sua importanza.

Guarda il video Plone 2 su aggiungere immagini a una pagina.

Link interni

Seleziona una parola o frase e clicca l'icona Internal link (link interno), apparirà il pannello Insert Link:

Puoi usare le cartelle Home or Current folder per navigare all'interno del sito e cercare cartelle, pagine o immagini con le quali poi creare il link. Nell'esempio seguente è stata scelta la pagina "Long-tailed Skippers". Una volta chiuso questo pannello, sarà creato un link dalla parola o frase inizialmente selezionata a questa pagina.

Link esterni

Seleziona una parola o frase e clicca l'icona External link (link esterno), e comparirà il pannello External Link:

Digita l'indirizzo internet del sito col quale vuoi creare il link, iniziando con http://. Cliccando Anteprima (Preview) può controllare la pagina a cui corrisponde l'indirizzo che hai inserito. Se incolli l'indirizzo che ti interessa, stai attento a non inserire due volte http:// all'inizio della riga. Infine clicca Ok. Il link esterno è stato creato.

Ancore (Anchors)

Le Ancore sono una sorta di sommario o indice basato su intestazioni, sottotitoli o altri stili all'interno di un documento. Per fare un esempio, in una pagina chiamata "Eastern Tiger Swallowtail" con i sottotitoli "Description", "Habitat", "Behavior", "Conservation Status" e "Literature" può essere facilmente creato un sistema di link da un elenco di questi sottotitoli alle posizioni in cui questi sono sviluppati, utilizzando le Anchors.

Prima di tutto, crea il documento con i vari contenuti preceduti da un sottotitolo, e riscrivi poi solo i sottotitoli in una lista in cima alla pagina:

Poi seleziona ad uno ad uno i sottotitoli dell'elenco iniziale e clicca l'icona simboleggiata da un'ancora:

Comparirà un pannello in cui poter selezionare a quale sottotitolo collegare ciò che hai selezionato:

Apparirà il tab (l'etichetta) Link to anchor. La parte a sinistra mostra una lista degli stili che possono essere applicati ai titoli del documento. Nell'esempio viene utilizzato lo stile Sottotitolo (Subheadings), il più comunemente usato. La parte a destra del pannello mostra i sottotitoli che sono stati creati nel documento. Nell'esempio era stata selezionata la prima voce, Description, e quindi è stato scelto nel pannello il sottotitolo Description, la parte del testo a cui verrà legato il link.

Puoi essere creativo con questa opzione, tessendo una rete di link anche all'interno di un testo narrativo, impostando anchors con stili diversi, e inventando mix di link intelligenti e funzionali. Questa opzione è particolarmente importante e utile per documenti di grandi dimensioni.

Tabelle

Le tabelle sono comode per dati e liste. Per aggiungere una tabella, posizionati nel punto in cui vuoi inserirla e clicca l'icona Aggiungi Tabella. Comparirà il pannello corrispondente:

Ti verrà chiesto di impostare il numero di righe e colonne desiderate. Se selezioni l'opzione Crea intestazioni si formerà automaticamente una cella in cui inserire un titolo per ogni colonna. Classe tabella ti permette invece di selezionare lo stile desiderato. Le scelte sono le seguenti:

Ecco un esempio delle due scelte principali:

Lista (listing):

Thoroughbred Champions	Quarter Horse Champions
Man O' War	First Down Dash
Secretariat	Dashing Folly
Citation	Special Leader
Kelso	Gold Coast Express
Count Fleet	Easy Jet

Dopo aver creato la tabella, basta cliccare su una cella per far apparire  le linee che permettono di cambiare le dimensioni e le icone per aggiungere/eliminare righe e colonne:

Nella tabella mostrata sopra, il cursore è stato posizionato sulla cella "Special Leader", in modo da attivare i sottili riquadri attorno ai bordi che servono per ridimensionare l'intera tabella. Si attivano anche le icone aggiungi/elimina per la cella selezionata. Cliccando la piccola X nel cerchio si eliminerà l'intera righa o colonna che contiene quella cella. Cliccando invece la piccola icona a punta di freccia verrà aggiunta una riga sopra o sotto la cella selezionata, o una colonna a sinistra o a destra di questa.

L'editor HTML

L'editor HTML è un'opzione dedicata a chi vuole utilizzare il codice HyperText Markup Language, che i web browser usano per descrivere le pagine di un sito web. Conoscere i fondamenti del linguaggio HTML permette di compiere operazioni speciali, ma non è indispensabile per un utilizzo normale. Cliccando l'icona HTML comparirà un pannello con il codice, che puoi scrivere a piacimento, potendo sempre ritornare alla visualizzazione WYSIWYG, chiudendo il pannello.

Stili

Il menù Applica modello (Styles) ti permette di impostare lo stile di una parte di testo selezionata. Queste sono le tipiche scelte possibili:

Normal (Normale) si usa per testo semplice. Heading (Titolo) corrisponde ad un carattere grassetto e di dimensioni leggermente maggiori, allineato a sinistra e con una linea orizzontale che attraversa l'intera pagina. Subheading (Sottotitolo) è ancora grassetto e allineato a sinistra, ma di dimensioni intermedie. Literal è utile per citazioni e per allineare in modo preciso il testo, presenta una spaziatura singola ed è inserito in un riquadro; si usa soprattutto per inserire il codice del linguaggio di programmazione:

class SortAdvectionVelocities
     ___init__(self, advectionVelocities):
          this.advectionVelocities = advectionVelocities

     sortVelocities():
          this.advectionVelocities.sort()

o colonne di numeri:

   location        velocity
   --------        --------
   vector a        21.7
   vector b        15.4
   vector c        48.3
   vector d        38.2

Puoi anche utilizzare una semplice tabella per dati composti da numeri.

Zoom

L'icona dello Zoom espande il pannello in cui si inserisce il testo, in modo da fargli occupare l'intero schermo. Basta cliccare nuovamente l'icona per ritornare alla modalità precedente.

Next: Aggiungere file Previous: Aggiungere immagini