INSERIMENTO DI IMMAGINI.

Per prima cosa, portiamoci nella pagina dove vogliamo caricare un’immagine a corredo dei nostri testi.

Una volta all’interno, diamo invio sul link “Admin Modifica” presente accanto all’intestazione della pagina per accedere all’area di modifica della nostra pagina da modificare.

Si aprirà la schermata di modifica della pagina corrente, infatti noteremo che è apparso un Titolo in grande dopo i soliti link, che riporta la scritta “Edita la pagina” e il nome della pagina.

Immediatamente sotto questo titolo, raggruppati su alcune file disposte in orizzontale sullo schermo, sono apparsi dei link, nominati ognuno come i più comuni tag dell’HTML e che possiamo selezionare con le frecce o con il tasto tab. Non sono altro che i comandi dell'editor e servono per formattare, quindi per attribuire uno stile personalizzato alle nostre pagine. Si possono usare questi link per impostare tipo e dimensione del carattere, allineamento e altre formattazioni del testo, ma anche inserire oggetti grafici come immagini, presentazioni multimediali, suoni di sottofondo eccetera.

Nota bene: la funzione d’inserimento automatico dei tag, ovvero l’editor di tag HTML, è prevista anche nei più comuni editor web. (Vedi Frontpage, di Microsoft, o DreamWeaver di Adobe). L'unica differenza è che in questo CMS, l'editor è accessibile anche ad un cieco assoluto.

Ecco un elenco dei tag presenti:

• “B” di BOLD.
• “U” di UNDERLINE.
• “I” di ITALIC.
• “L” di Left.
• “C” di CENTER.
• “J” di GIUSTIFY.

Con questi link si potranno ottenere molti effetti che arricchiranno le nostre pagine inserendo i tag adatti che daranno un migliore impatto visivo e rendendo più piacevole la lettura del contenuto delle pagine.

L'uso è molto semplice, come spiegato anche in accenni precedenti, quindi, per l'uso dell'editor non abbiamo nessuna difficoltà nemmeno come ciechi assoluti. Infatti, per formattare un testo con uno di questi comandi, basta che durante la digitazione o dopo la digitazione usiamo questi link. Faremo come segue:

1. Prima della digitazione di un testo che vogliamo formattare, mettiamo in elenco i link con insert più F7, scegliamo uno dei link suddetti premendo la lettera corrispondente, e premiamo invio. Sul testo che stavamo scrivendo, appaiono i due tag per la formattazione. Basta scrivere il testo tra i due tag e tale testo sarà formattato come da noi desiderato. Ripetiamo questa operazione mentre continuiamo a digitare testo sulla pagina.
2. Formattazione dopo aver digitato del testo. Se abbiamo già digitato il testo e lo vogliamo formattare in un certo modo con i comandi suddetti, lo dobbiamo selezionare con i soliti comandi. Una volta selezionato il testo, mettiamo in elenco i link con insert più F7, scegliamo il comando con la lettera corrispondente e premiamo invio. Prima e dopo il testo da noi preventivamente selezionato, vengono inseriti i due tag per la formattazione, come si può constatare rileggendo il testo.

Non ci soffermeremo molto sull’utilizzo di questi tag di formattazione, in quanto il loro utilizzo è molto intuitivo e se si sa come si deve formattare il testo per abbellire le pagine, si useranno facilmente i comandi per inserirli, quindi, di seguito ci soffermeremo un po' di più sui tag relativi all’inserimento di immagini ed oggetti multimediali che sono:

• "IMG", inserimento di una immagine già presente sul sito nella cartella delle immagini.
• "GEST_IMG", gestione dell'inserimento di una immagine, prelevandola dal computer, se il provider del sito lo consente, oppure inserire una immagine già presente sul sito nella cartella delle immagini.
• "GEST_IMG", inserimento di presentazioni multimediali, file SWF.
• "GEST_IMG", inserimento di file musicali come gli MP3.
• "GEST_IMG", inserimento filmati compressi quali per esempio i DVX.
• "GEST_IMG", inserimento di file di testo compressi quali zip, rar, eccetera.

Con il link “Img”, è possibile inserire un’immagine, sia essa JPG, JPEG o GIF.

Attenzione: Utilizzando questo link si potranno caricare nella pagina solo le immagini già presenti sul server. Ovvero le immagini che abbiamo già copiato in precedenza nella cartella “Img” nella rooth del sito quando l’abbiamo installato per la prima volta sia in locale, sia su uno spazio web. Infatti noteremo che appare il messaggio”Inserisci url immagine”.

Possiamo verificare le immagini già presenti nella cartella sul server, in quanto vengono visualizzate come link. Tali link, servono per inserire il codice corrispondente a quella immagine nella pagina che stiamo costruendo, semplificando moltissimo il nostro lavoro.

Se l’immagine non fosse presente nella cartella principale, e per accertarcene potremmo fare un’ulteriore verifica aprendo il sito web dall’indirizzo FTP, dovremo inserirla nella pagina caricandola direttamente dal nostro computer.

Però, utilizzando i tag successivi, ammesso che il provider di gestione dello spazio web ce lo consente, possiamo caricare direttamente le foto e altri elementi multimediali con i comandi che l'editor ci consente e che vediamo di seguito. Essi sono, come visto nella lista suddetta, cinque link "GEST_IMG".

Il primo link fa aprire una finestra di dialogo “Inserisci immagine”. Dando invio sul pulsante “Sfoglia”, è possibile selezionare il file immagine che si vuole inserire, cercandolo tra quelli presenti sull'hard-disk del nostro computer. Una volta identificato il file ed inserito il relativo percorso nell'apposito campo editazione, spostandoci con TAB, scorreremo gli altri comandi presenti che sono:

• “Testo alternativo”,: è un campo editazione dove potremo inserire il testo descrittivo per la nostra immagine.
• “upload”, casella di controllo sulla quale premeremo SPAZIO per attivarla.
• “sovrascrivi”, è una casella di controllo che dovremo attivare solo se l’immagine da noi inserita dovrà sostituire una immagine già presente nella cartella immagini.
• “allinea immagine”, la casella combinata con la quale possiamo scegliere l'allineamento dell'immagine. Le scelte disponibili sono: “NONE”, “Left” e “Right”.

Attenzione:

• Il parametro relativo alla posizione è ovviamente un attributo di stile che verrà scritto sulla pagina, prelevandolo dal nostro CSS. Pertanto, impostando LEFT, le foto si allineano a sinistra del testo e il testo scorre attorno alle foto, dando un buon impatto visivo. La stessa cosa avviene per l'allineamento a destra.
• Aver cura di inserire un doppio ritorno a capo "<br />" dopo il testo che precede l'immagine.
• Per fare una cosa perfetta, bisogna aggiungere al tag di style i margini, al fine di lasciare uno spazio tra il testo e l'immagine, per non creare problemi di lettura.
• Per una immagine allineata a sinistra, occorre inserire di seguito allo style "float:left;" i margini adatti, per cui il testo sarà modificato in questo modo: "float: left; margin-right: 1em; margin-bottom: 1em;".
• Se l'allineamento è stato scelto a destra, "float: right;" la modifica sarà: "float: right; margin-left: 1em; margin-bottom: 1em;".
• Nel caso si scegliesse none, lo stile non viene applicato e l'immagine viene impaginata secondo le impostazioni automatiche del CMS e secondo lo stile indicato per la pagina nel CSS.

Nel campo successivo “Seleziona directory”, si possono scorrere i file già presenti sul server nella cartella IMG prevista per il corretto funzionamento del sito stesso . Sempre con tab, scorriamo tutti i controlli restanti:

• “Uploada e carica immagine”, è un pulsante sul quale premeremo INVIO per caricare l'immagine sul server.
• “seleziona directory”, è una casella di controllo con la quale possiamo scegliere in quale cartella del server contenuta nella cartella "IMG" delle immagini, caricare il file. E' selezionata la cartella upload, quindi, non dobbiamo cambiare nulla in quanto è proprio quella la cartella nella quale il CMS colloca le immagini, una volta caricata sul server. Questo è anche l’ultimo controllo presente nella finestra. Infatti muovendoci sempre con TAB esploreremo le immagini già presenti sullo spazio web, quindi quelle già caricate nella cartella upload.
• Infine troveremo il link INSERISCI. Premendo invio su questo link, termina la procedura, l'immagine viene caricata nella cartella scelta e si chiude la finestra di dialogo, ritornando sulla pagina che stiamo costruendo.

Per essere certi che tutto sia stato eseguito correttamente, verifichiamo che, nella finestra dove stiamo scrivendo il codice della pagina, appare il tag “<img” con tutta la stringa relativa allo style, al percorso del file immagine e l'attributo “Alt”, all’interno del quale dovrà apparire il testo alternativo da noi scritto.

La prima cosa, notiamo che qualora si voglia inserire un oggetto, esso viene collocato infondo alla pagina, precisamente subito dopo l'ultimo testo scritto.

Se volessimo, ad Esempio, spostare l'immagine in un altro punto della pagina, basta selezionare la stringa di codice relativa all'immagine, che in genere inizia con l’apertura del tag “<img” e si conclude con il nome del file tra virgolette ed il simbolo di maggiore, selezionare tale testo, tagliarlo ed incollarlo dove desideriamo, con i consueti comandi TAGLIA e INCOLLA.

Nota bene: prima del simbolo maggiore di chiusura del tag "IMG" occorre inserire uno spazio e una barra, per completare e rendere conforme il tag per l'XHTML. La barra è quella che sta sul sette della tastiera estesa.

INSERIMENTO DI FILE AUDIO, PRESENTAZIONI E OGGETTI MULTIMEDIALI

Procedendo nell’esplorazione dei tag, notiamo che il tag "GEST_IMG" è replicato per altre volte. Per i neofiti di questa avventura, vorrei segnalare che questi tag, legati all’inserimento di file audio, piuttosto che presentazioni o file compressi, sono una novità davvero innovativa, introdotta con la versione 1.9 di questo CMS.

Se premiamo invio sul secondo tag "GEST_IMG", appare una finestra di dialogo simile alla precedente, con la differenza che ora è relativa all’inserimento di presentazioni Flath. Infatti, il titolo della finestra riporta la dicitura “Inserisci presentazione SWF”. Anche i pulsanti che incontriamo sono gli stessi della precedente schermata, quindi, inutile ripeterli. La procedura di inserimento dell’oggetto è analoga alla precedente.

Se premiamo invio sul terzo link "GEST_IMG", apparirà la finestra con la dicitura “Inserisci file MP3”. Con questo link è possibile inserire un file audio che verrà mandato in esecuzione ogni volta che accederemo a questa pagina.

Come per le immagini e le presentazioni, anche per il file audio, per poterlo scegliere dal nostro hard disk e caricarlo sul server dovremo premere invio sul pulsante SFOGLIA ed attivare il pulsante “Upload” che aprirà la solita finestra seleziona file”. Una volta identificato il file sul nostro hard-disk ed aver inserito un testo alternativo nell’apposito campo che descriva il file multimediale inserito, premeremo come di consueto il pulsante “uploada e carica mp3”.

Attenzione: prima di premere invio sul pulsante upload, come già visto per l’immagine, è bene inserire un testo alternativo che riporti ad esempio il nome del file audio inserito.

Una volta conclusa l’operazione, possiamo verificare che tutto sia andato a buon fine verificando il codice della pagina come abbiamo già fatto con l’immagine. Nella finestra di codice che appare, spostandoci come di consueto infondo al file, troviamo la stringa di codice con degli script che servono a lanciare in esecuzione il file audio.

Sembrerebbe tutto corretto, ma in realtà, il lavoro non è concluso. Infatti, se proviamo ad accedere al link come se stessimo compiendo una normale navigazione all’interno del sito, notiamo che il file audio non parte come programmato. Questo perché dobbiamo modificare, facendo attenzione, il codice che l'editor di ItCMS ha inserito nella pagina.

La stringa di codice script, che è racchiusa in un contenitore tag “<div”, deve essere modificata come segue:

nel mio caso la stringa riporta:

<div align=”center”

<embed type=”application/x-mplayer2”

Pliginspage=http://www.microsoft.com/windows/MediaPlayer/

Name=”mediaPlayer1” width=”320” height=”24” autostart=”1”

Ci sarebbero altre due righe relative all’impostazione volume e all’impostazione di alcuni controlli che per i nostri scopi non è indispensabile approfondire, comunque per far sì che il file audio o lo sfondo musicale che abbiamo impostato parta all’apertura del link o del menu, dobbiamo controllare che nella quarta riga di codice, e precisamente nella riga dove è riportato il nome del programma player predefinito sul nostro PC, in questo caso Windows Media Player, “ dove è riportata la stringa: Name=”mediaPlayer1” width=”320” height=”24” autostart=”1”, nel parametro autostart vi sia un valore numerico, ad es. 1.

Infatti, di default è riportato il valore “0”, che dobbiamo avere la cura di verificare e di cambiare. Con la modifica suddetta, lo sfondo musicale si ascolterà ogni qualvolta accederemo alla pagina con il link apposito. Lo sfondo musicale si può gestire anche con l’attributo “loop” che consente di gestirne le eventuali ripetizioni.

CARICAMENTO DI FILE COMPRESSI

Dando invio sul quarto link “GEST_IMG”, è possibile caricare documenti Word o PDF compressi. Leggendo attentamente la finestra di dialogo che appare, noteremo che sono riportati anche i tipi di formati di compressione supportati. Essi sono:

• “ZIP”.
• “RAR”.
• “TAR”.
• “GIZ”.

Anche in questa finestra, sono presenti gli stessi comandi presenti nelle altre che abbiamo descritto sin qui.

Notiamo il primo controllo, che è un campo editazione dove potremo inserire il nome che verrà visualizzato per il nostro documento. C'è il pulsante “Sfoglia” che utilizzeremo per indicare il file da caricare. La casella di controllo per eseguire l'upload, che è necessario attivare. Inoltre, ci sono i pulsanti “upload”, “sovrascrivi”, la casella “allinea immagine”, per allineare nella pagina l’icona del file, ed infine il pulsante “Seleziona directory”.

Sia i pulsanti suddetti, sia la procedura d’inserimento dell’oggetto, sono identici ai casi descritti in precedenza ed inoltre molto intuitivi.

INSERIMENTO DI OGGETTI VIDEO

Dando invio sul quinto tag “GEST_IMG”, noteremo dal titolo della finestra, che è relativo all’inserimento di oggetti video. I formati supportati sono:

• “VIDEO”.
• “AVI”.
• “DVX”.

La procedura di inserimento dell’oggetto è identica ai precedenti. Infatti, selezionando il file desiderato, attivando la casella di controllo “upload”, inserendo una didascalia per l’oggetto multimediale inserito, è possibile, come per gli altri casi, impostare l’allineamento dell’oggetto che verrà visualizzato nella pagina, grazie al testo alternativo inserito.

Abbiamo concluso l’esplorazione delle possibilità di gestione delle immagini e degli oggetti multimediali offerte da questo CMS, quindi, non ci resta che dire che se si vuole gestire al meglio questo tipo di pagine, è indispensabile conoscere almeno i rudimenti dell'HTML, per non commettere errori, soprattutto quando si spostano i codici che il CMS genera in automatico.

Avete sicuramente notato la maneggevolezza di questo strumento che consente di poter dare un certo style grafico e multimediale al sito, abbattendo il preconcetto errato che un sito, costruito da un disabile visivo, debba per forza essere scarno di contenuti multimediali.

Ringrazio Nunziante per tutte le integrazioni che ha giustamente inserito nel testo che ho scritto.

**************

Per eventuali chiarimenti, scrivere a: Massimo Corti.