Manuale d uso Editor WYSIWYG

Transcript

1 Manuale d uso Editor WYSIWYG 1

2 1. L EDITOR FCKEDITOR L editor utilizzato nel sistema di content managment system è fckeditor. Questo strumento permette di creare e modificare la pagina in maniera visuale in modo simile all utilizzo di un normale programma di videoscrittura come Word, senza che siano necessarie conoscenze di Html. Per utilizzare alcune funzioni avanzate, è comunque consigliabile una conoscenza almeno sommaria del linguaggio html. Fig. 1.1 Vista di tutti i pulsanti dell editor Codice Sorgente Visualizza il codice html creato dall editor e permette di modificarlo. Con Explorer il codice sorgente viene visualizzato al posto della pagina, mentre con Firefox viene aperta una nuova finestra contenente l html. Ogni modifica nel codice html si riflette sul contenuto della pagina. L editor sistema automaticamente il codice html, chiudendo opportunamente tutti i tag e trasformandoli in XHTML valido (ad esempio chiudendo anche i tag singoli quali <br> e inserendo l attributo alt per le immagini). Taglia (attivo solo se è stato selezionato del testo). Elimina dalla pagina il testo selezionato e lo mette negli appunti. Copia (attivo solo se è stato selezionato del testo). Copia negli appunti il testo selezionato. Particolare attenzione va prestata alla serie dei tre bottoni che seguono, tutti dedicati a incollare il contenuto degli appunti all interno della finestra dell editor, ma con alcune differenze. Siccome questa è probabilmente l operazione più frequente che si fa nell editor, e nello stesso tempo la più delicata e a cui va prestata una certa attenzione, essa merita una spiegazione approfondita. Esigenze Le esigenze, in ordine di importanza per il pubblicatore sono le seguenti: 1) deve essere facile e immediato copiare informazioni dal file di Word al sito web; 2) la copia di contenuti nel sito Web non deve perdere la formattazione dei testi già impostata in Word; 3) tutte le pagine del sito devono avere uno stile grafico uniforme; 2

3 4) la pagina deve essere leggera, in modo da venir scaricata velocemente. Le esigenze, in ordine di importanza per i visitatori, sono le seguenti: 1) la pagina deve essere leggera, in modo da venir scaricata velocemente; 2) tutte le pagine del sito devono avere uno stile grafico uniforme; 3) la copia di contenuti nel sito Web non deve perdere la formattazione dei testi già impostata in Word; 4) deve essere facile e immediato copiare informazioni dal file di Word al sito web. Come si vede, esigenze importanti per il pubblicatore non lo sono affatto per il visitatore finale del sito, e viceversa. Il problema Copiando testo o immagini da un programma ad un altro, il sistema operativo, in maniera trasparente all utente, effettua una conversione dei dati. Il modo in cui viene fatta questa conversione ha effetto sia sulla resa grafica dei dati incollati sia sul modo in cui vengono rappresentati. Nel caso frequente di copia di testi da Word a un editor html, il sistema per mantenere il più fedelmente possibile la formattazione impostata in Word, incolla come codice html il codice generato da Word, che è pieno di attributi html proprietari Microsoft (che quindi non avranno alcun effetto grafico nella visualizzazione), di tag ridondanti (che appesantiscono inutilmente la pagina) e di stili impostati in Word (che non vanno d accordo con il layout del sito Web). A titolo di esempio, questa semplice tabella di Word Nello Polesello incollata con un semplice Incolla (Ctrl-V) nell editor e utilizzando Internet Explorer genera questo codice html: <table class="msotablegrid" style="border-right: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-alt: solid windowtext.5pt; mso-yftitbllook: 480; mso-border-insideh:.5pt solid windowtext; msoborderinsidev:.5pt solid windowtext" cellspacing="0" cellpadding="0" border="1"> <tbody> <tr style="mso-yfti-irow: 0; mso-yfti-lastrow: yes"> <td style="border-right: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 1pt solid; PADDINGLEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: windowtext 1pt solid; WIDTH: 97.75pt; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext.5pt" valign="top" width="130"> <p class="msonormal" style="margin: 0cm 0cm 0pt"><span style="font-family: Arial"><font size="3">nello <p> </p> </font></span></p> </td> <td style="border-right: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 1pt solid; PADDINGLEFT: 3

4 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: #ece9d8; WIDTH: 97.75pt; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext.5pt; mso-border-left-alt: solid windowtext.5pt" valign="top" width="130"> <p class="msonormal" style="margin: 0cm 0cm 0pt"><span style="font-family: Arial"><font size="3">polesello <p> </p> </font></span></p> </td> </tr> </tbody> </table> Come si vede, l informazione utile per il visitatore (Nello Polesello = 15 caratteri) è una percentuale insignificante rispetto al codice generato (circa 1500 caratteri), cioè circa l 1%. Le cose vanno un po meglio incollando la tabella in Firefox, ma anche qui siamo ben lontani dalla soluzione ottimale. Si può verificare inoltre uno strano comportamento incollando le pagine direttamente da Word: ogni volta che si salva la pagina o si clicca il bottone Codice sorgente vengono inserite righe vuote aggiuntive e indesiderate dopo ogni paragrafo o all interno di ogni cella di tabella. È necessario quindi che l editor sia in grado di eliminare il codice inutile generato da Word. La soluzione Per risolvere il problema è possibile procedere utilizzando gli altri bottoni destinati ad incollare testo presenti nell editor. Incolla come testo semplice (attivo solo se negli appunti è presente qualcosa). Inserisce nel punto in cui c è il cursore il contenuto degli appunti, rimuovendo TUTTA la formattazione dei caratteri e lasciando solo il testo puro; è come incollare i testi nel Blocco Note di Windows (Notepad) o in un editor di testo puro. Vengono comunque mantenuti gli a capo, il testo non viene incollato su un unica riga. Questo è il sistema da preferire quando nella pagina non sono presenti tabelle, cioè nella grande maggioranza delle pagine pubblicate. Effettuando successivamente le formattazioni dei caratteri con i bottoni dell editor (aggiunta di grassetti, corsivi, titoli, liste, ecc.) si avrà la certezza di ottenere un codice html minimale e quindi leggero da scaricare, e di avere un layout coerente con il resto del sito, soddisfacendo così le più importanti esigenze del visitatore. Incolla da Word (attivo solo se negli appunti è presente qualcosa). Apre la seguente finestra di dialogo, in cui incollare con il comando CTRL-V il contenuto degli appunti. 4

5 Fig. 1.2 La finestra per incollare il testo copiato da Word Premendo successivamente OK, il contenuto viene incollato nella finestra dell editor nella posizione del cursore, mantenendo la formattazione dei caratteri impostata in Word, ma rimuovendo gli attributi inutili proprietari Microsoft. Viene automaticamente selezionata la casella ignora le definizioni di Font, in modo da evitare che testi creati in Word con il carattere di default che di solito è il Times New Roman vengano inseriti nel sito Web, dove il carattere standard è il Verdana. Si può anche scegliere di rimuovere gli stili (bordi, sfondi, titoli) selezionando l apposita casella. Note/Bug Con sistemi Macintosh la formattazione dei testi e le eventuali tabelle vengono perse, e il testo viene incollato come testo semplice. Incolla (attivo solo se negli appunti è presente qualcosa) Inserisce nel punto in cui c è il cursore il contenuto degli appunti, senza modificarlo. Per quanto detto precedentemente, utilizzare tale funzione (o l equivalente Ctrl-V) solo come ultima alternativa, nel caso il testo abbia una formattazione così complessa che non è possibile mantenere in maniere soddisfacente con il comando incolla da Word. Un caso in cui è necessario utilizzare questo comando è quando si devono incollare nell editor tabelle complesse redatte in Word. Modelli Cliccando il bottone modelli è possibile creare una nuova pagina sulla base di modelli predefiniti, scegliendo dalla lista dei modelli disponibili. La scelta di uno dei modelli sostituirà l intero contenuto della pagina. 5

6 Annulla / Ripristina Questi bottoni permettono di annullare e ripristinare le ultime operazioni effettuate. Attualmente il meccanismo funziona meglio su Firefox rispetto a Explorer, dove spesso il ripristina non funziona e non è possibile utilizzare le scorciatoie Ctrl-Z e Ctrl-Y. Trova / Sostituisci Hanno lo stesso effetto dei corrispondenti comandi che si trovano in Word o altri programmi di videoscrittura. Seleziona tutto Seleziona tutto il testo della pagina. Per cancellare l intera pagina è consigliabile usare questo comando e poi premere Canc, anziché (tentare di) selezionare l intera pagina con il mouse, poiché potrebbero rimanere dei residui di codice html inutile all inizio o alla fine della pagina. La differenza è che con il mouse si riesce a selezionare solo il testo visibile, mentre questo comando seleziona tutto il codice html. Elimina formattazione Questo comando dovrebbe eliminare tutti i tag di formattazione dal testo selezionato. In realtà l effetto non è sempre determinabile e potrebbe anche essere nullo. Grassetto, Corsivo, Pedice, Apice Analogo funzionamento dei corrispondenti bottoni in Word. Elenchi numerati, Elenchi puntati Anche questi bottoni hanno lo stesso funzionamento che si presenta in Word. Si consiglia di definire le liste in questo modo piuttosto che a mano usando lettere o numeri o trattini. Può essere a volte problematico utilizzare e modificare le liste, in quanto si verificano spesso problemi del tipo la lista è finita e mi aggiunge un altro punto elenco, devo inserire una lista nel punto del cursore e invece la lista è cominciata dal paragrafo precedente e simili. È meglio quindi inserire alcune righe vuote prima e dopo il punto in cui si inserisce la lista, prima di inserirla, così da non modificare o rovinare la formattazione del testo che precede o segue. Si possono modificare le proprietà di una lista già create utilizzando il menu contestuale accessibile tramite il tasto destro del mouse. Riduci rientro, Aumenta rientro, Allinea a sinistra, Centra, Allinea a destra, Giustifica Analogo funzionamento dei corrispondenti bottoni in Word. Di questi bottoni, l unico importante è quello per centrare il testo, anche se è consigliabile usare il testo centrato solo per qualche titolo di una o due righe, mai per lunghe righe di testo, magari con l intento di renderlo subito visibile e che catturi l attenzione del lettore. Il testo centrato è più 6

7 difficile da leggere rispetto a quello allineato a sinistra o giustificato. Non è mai necessario impostare esplicitamente il testo come giustificato, tramite il bottone dell editor, poiché è automaticamente visualizzato in questo modo tramite gli appositi template di visualizzazione. L uso di testo allineato a destra è invece piuttosto raro. Inserisci/Modifica collegamento Questo bottone serve per creare o modificare link ipertestuali all interno della pagina. Va premesso che quando si desidera inserire direttamente nel testo il link al sito non è necessario usare questo comando, in quanto l editor si accorge automaticamente che il testo inserito è un indirizzo Web non appena si digita uno spazio dopo l indirizzo Internet; questo sistema funziona anche quando si inserisce un indirizzo di posta elettronica, l editor inserisce un link del tipo mailto: che fa aprire il client di posta del visitatore. Quindi i link vengono inseriti automaticamente se ti tratta di inserire la frase: Visita il sito del oppure manda una mail a assistenza@asernet.it mentre sarà necessario inserire manualmente il link in questo caso: Visita il sito della Asernet srl oppure manda una mail a assistenza Selezionando il testo sul quale far agire il collegamento e premendo il bottone, si presenta una finestra di dialogo simile a questa: Fig. 1.3 Finestra per inserire collegamenti ipertestuali Nel caso più comune, per inserire un link ad un sito esterno è sufficiente inserire l indirizzo nella casella URL e premere OK. È possibile inserire in questo modo anche link a indirizzi scegliendo Tipo di collegamento: e inserendo l indirizzo del destinatario (obbligatorio) e il titolo e il corpo della mail (facoltativo). Si possono inserire anche link all interno della pagina inserendo come Tipo di collegamento: Ancora nella pagina e selezionando dalla lista delle ancore precedentemente inserite. 7

8 Di particolare interesse è il bottone Cerca sul server che presenta una comoda interfaccia per inserire un collegamento a qualsiasi altra pagina o file presente sul sito. L interfaccia è intuitiva e presenta a sinistra il menu di navigazione tra le cartelle, al centro la vista dei contenuti della cartella corrente e in basso un form per aggiungere al volo un file. La figura 4.4 mostra un esempio dei contenuti della cartella corrispondente all indirizzo Per gli oggetti di tipo cartella (e anche le Pagine sono oggetti di questo tipo, in quanto possono contenere allegati o immagini) cliccando sul titolo vengono visualizzati i contenuti della cartella, mentre cliccando sull icona della catena (Link the folder) viene inserito un collegamento alla cartella. Fig. 1.4 Selezione dell oggetto al quale far puntare il collegamento È possibile anche inserire un nuovo file direttamente dal form in basso; basta premere Sfoglia, selezionare il file presente sul proprio pc, impostare il titolo (facoltativo ma fortemente consigliato) e premere infine Invia!. Si possono creare anche ulteriori cartelle con il bottone Crea nuova cartella. Tutte le operazioni di invio di nuovi file e di creazione di cartelle sono permesse solo se l utente ha il permesso di modifica sulla cartella che sta visualizzando, mentre è ovviamente possibile inserire un collegamento anche a pagine per le quali non si ha il permesso di modifica. Se si desidera inserire un file come allegato alla pagina corrente (quella che si sta modificando, è più comodo e veloce usare la scheda Carica. 8

9 Fig. 1.5 Finestra per il caricamento del file al quale far puntare il collegamento Tramite questa scheda è possibile sfogliare il file nel proprio computer, assegnarli un titolo e una descrizione e premere Invia al server. Se l operazione ha successo viene visualizzato un messaggio, e premendo OK, nel testo selezionato nell editor sarà inserito un collegamento al file appena inviato. Infine, la scheda Destinazione si utilizza per aprire il link in una nuova finestra, mentre la scheda Avanzate permette di impostare proprietà avanzate relative ai fogli di stile o all accessibilità. Elimina collegamento (attivo solo se il cursore è posizionato sopra un collegamento) Permette di eliminare dal testo selezionato il collegamento ipertestuale. Questa funzione è accessibile anche dal menu contestuale del collegamento. Inserisci/Modifica ancora Permette di inserire un ancora interna alla pagina alla quale inserire un collegamento con il comando Inserisci collegamento, selezionando come tipo di collegamento Ancora nella pagina. Nella finestra dell editor viene mostrata un icona rappresentante un ancora gialla nel punto in cui è stata inserita. Inserisci/Modifica immagine Permette di inserire un immagine all interno del testo. A differenza del campo Foto dell oggetto Pagina, che posiziona la foto in una posizione fissa, in alto a destra della pagina, con questo comando è possibile inserire la foto in qualsiasi posizione. Come nel caso dell inserimento dei link, è possibile procedere in diversi modi. Si può scrivere (o incollare) l url dell immagine direttamente nella casella URL, ad esempio se si vuole inserire un immagine presente in un sito esterno. 9

10 Oppure si può navigare tra le immagini già presenti nel sito tramite il bottone Cerca sul server, e vedere un anteprima delle foto. Infine si può caricare una nuova immagine dalla scheda Carica. Si consiglia di impostare sempre un testo alternativo per le immagini, che verrà visualizzato dagli utenti che utilizzano browser testuali oppure che hanno scelto di disabilitare la visualizzazione delle immagini. L immagine non viene ridimensionata lato server, evitare quindi immagini troppo larghe o alte, che potrebbero rovinare l impaginazione del sito, o troppo pesanti in termini di KB, che rallenterebbero troppo lo scaricamento. I formati supportati sono quelli visualizzabili comunemente nei browser, quindi si possono usare.jpg,.gif e.png. Inserisci/Modifica tabella Questo comando serve per inserire una nuova tabella e definire le proprietà iniziali, come il numero di righe e colonne, con un interfaccia come quella in fig Fig. 1.6 Finestra per l impostazione delle proprietà di una tabella La gestione delle tabelle è l operazione probabilmente più complessa da effettuare nella creazione di una pagina, e in questo manuale non verrà trattato ogni aspetto della personalizzazione della grafica delle tabelle. Si ricorda che la maggior parte dei comandi presenti in Word per aggiungere e togliere righe e colonne e modificare le proprietà di ogni singola cella sono facilmente accessibili dal menu contestuale. Tuttavia, trattandosi di un interfaccia Web soggetta alle limitazioni proprie dell html, può essere che non tutte le funzioni di formattazione presenti in Word abbiano lo stesso effetto. Alcuni consigli generali: - utilizzare le tabelle solo quando serve veramente, ad esempio non per creare tabelle di dieci righe e una sola colonna, in quel caso è molto meglio utilizzare un elenco puntato; - attenzione alla coerenza grafica con il resto del sito. Se la tabella che si desidera inserire proviene da Word e non è troppo grande (ad esempio meno di 20 celle) è meglio crearla dall editor e reinserire i dati, altrimenti incollarla con il bottone Incolla da Word; 10

11 - non impostare la larghezza fissa quando la tabella è troppo grande. Larghezze accettabili sono sotto i 500 pixel, oltre si rischia che la tabella venga coperta dall eventuale colonna destra degli allegati oppure vi finisca sotto. Quando la larghezza non è importante (la maggior parte delle volte) è meglio non impostarla, cancellando il valore di default; - la visualizzazione delle celle vuote è diversa nella finestra di modifica dell editor dalla versione visualizzata all utente. Se la cella non contiene nulla, nemmeno uno spazio, la sua altezza viene compressa e si riduce a pochi pixel, e probabilmente l effetto sarà diverso tra Explorer e Firefox. Se possibile visualizzarne l effetto con entrambi prima di pubblicare la pagina; - sono disponibili due stili specifici per le tabelle dal menu Stile. Gli stili a quadri e a righe creano una tabella con sfondo bianco e con sottili bordi grigi sui quattro lati di ogni cella oppure solo sopra e sotto; per un effetto grafico ancora migliore è possibile impostare il bordo a 0 dalle proprietà della tabella. È possibile che in futuro la lista di stili disponibili per le tabelle aumenti. Inserisci riga orizzontale Inserisce una riga orizzontale. Inserisci carattere speciale Apre una finestra simile alla Mappa caratteri di Windows per inserire caratteri normalmente non presenti sulla tastiera, quali particolari caratteri accentati, segni di punteggiatura più rari, simboli matematici o di valuta. Può essere utile ad esempio per inserire il simbolo dell Euro da vecchie tastiere che ne sono sprovviste, o i caratteri accentati maiuscoli, preferibili al posto della corrispondente vocale non accentata seguita dall apostrofo (ad esempio si scrive UNIVERSITÀ e non UNIVERSITA ). Aggiunta di stili Tramite questa lista a discesa è possibile assegnare stili particolari a titoli o singole frasi in modo che siano coerenti con il resto del layout grafico del sito. Dopo aver selezionato il testo a cui applicare la formattazione, selezionare lo stile da assegnare dalla lista a discesa, che mostra un anteprima di tutti gli stili, come in figura 1.7. Fig. 1.7 Selezione dello stile da applicare al testo La lista mostra con una freccia nera a lato del nome dello stile gli eventuali stili selezionati. 11

12 È possibile assegnare anche più stili contemporaneamente allo stesso testo. Per rimuovere uno stile da un testo è sufficiente selezionarlo nuovamente dalla lista. Gli stili si possono suddividere in block e inline; la differenza è che gli stili block vanno a capo prima e dopo, mentre gli stili inline no. Degli stili attualmente disponibili sono stili block i tre stili per i titoli e box bianco, sono inline gli altri. La conseguenza è che non è possibile ad esempio assegnare lo stile Titolo 2 ad una singola parola all interno di una frase. La lista degli stili è inoltre dinamica su Internet Explorer (non su Firefox), vengono cioè mostrati solo gli stili applicabili all elemento selezionato, il caso tipico è quando si seleziona una tabella (stile a quadri e a righe) oppure un immagine. La formattazione dei testi tramite il menu Stile è l unico modo di modificare lo stile grafico dei testi del sito; come si vede non è possibile assegnare manualmente un determinato tipo di carattere quale Arial o Times o Comic ai testi o impostare il colore del testo o dello sfondo. La scelta non è stata dettata da vincoli tecnici dovuti a limitazioni dell editor, ma da scelte stilistiche, per far sì che le pagine pubblicate siano il più possibile omogenee e coerenti con il layout generale del sito di Ateneo. Creazione di moduli on line Questi comandi servono per la creazione di moduli on line (form) e per l inserimento di tutti i controlli tipici, quali caselle di testo, radio button e checkbox. Queste operazioni dipendono da moduli che devono essere presenti sul server per poter effettuare l operazione voluta. Per esempio, se sul server è installato un modulo che spedisce i dati inseriti nei campi via e sono noti i nomi dei campi da inserire, allora potremmo costruire un modulo come vogliamo ed essere sicuri che il modulo funzioni. Questa funzionalità richiede una forte esperienza nella costruzione di pagine html e di form di inserimento dati, inoltre il modulo a cui deve puntare il form deve essere installato sul server per cui, queste funzionalità sono quasi sempre disattivate di default in fase di configurazione. Informazioni su FCKeditor Questo comando apre una finestra che dà informazioni sull editor, dove il dato più importante è il numero di versione. La versione installata attualmente è la 2.5 beta, quando sul sito ufficiale dell editor saranno disponibili nuove versioni che eliminano bug o aggiungono nuove funzionalità che possono essere importanti, esse verranno installate sul server in modo che tutti i pubblicatori ne possano beneficiare. Note/Bug Se le finestre popup non sono abbastanza grandi da contenere tutta l interfaccia (succede ad esempio con Firefox che i bottoni in fondo non vengano visualizzati) e visto che mancano le scrollbar, è possibile premere il tasto tab in modo da spostare il focus tra tutti i controlli (caselle di testo, bottoni, checkbox ) dell interfaccia in modo da forzarne la visualizzazione. In fase di modifica, il bordo di un form dovrebbe essere indicato da un sottile bordo rosso tratteggiato. In Internet Explorer tale bordo a volte scompare o compare parzialmente. 12

13 Il codice html generato dall editor è diverso per Internet Explorer e Firefox, pertanto è possibile che ci siano delle difficoltà a modificare con Firefox pagine create magari da un altro pubblicatore con Explorer, e viceversa. Quando verranno installate nuove versioni dell editor, bisogna cancellare la cache del proprio browser, altrimenti alcuni file verranno caricati dalla copia cache del proprio browser (cioè la vecchia versione), anziché la versione aggiornata del server. Il risultato è che le nuove funzionalità non saranno disponibili o, peggio, che l editor potrebbe non funzionare del tutto. 13