MANUALE PER L AGGIORNAMENTO DELLE PAGINE WEB

Transcript

1 MANUALE PER L AGGIORNAMENTO DELLE PAGINE WEB Indirizzo a cui andare per l amministrazione:

2 LOGIN Dalla maschera di ingresso (Figura 1) inserendo il nome utente Username e la propria password si accede al proprio spazio di amministrazione, o pagina di gestione articoli, che, al primo ingresso, quando ancora niente è stato inserito, apparirà come in Figura 2. Figura 1 maschera di ingresso/login LOGOUT Per uscire da sistema in qualsiasi momento e da qualsiasi punto cliccare sulla voce logoff che compare in alto a destra o sul tasto posto all estremo angolo superiore destro. N.B. Se si è entrati nel sistema e non si è compiuta alcuna azione da più di 10 minuti si verrà automaticamente disconnessi e sarà necessario effettuare nuovamente le operazioni di Login. CREAZIONE DI UN ARTICOLO Dalla maschera di gestione articoli ( Article Editor, Figura 2) Per creare ex-novo un articolo è necessario cliccare sulla voce Create Article in alto a sinistra ovvero sul pulsante Create New in alto a destra. Il significato delle altre voci e/o pulsanti è il seguente: - la voce logoff disconnette l utente, si torna così alla pagina di Login (o pagina iniziale di ingresso fig. 1), stesso risultato cliccando sul piccolo tasto con X posto nell angolo alto a destra; - il pulsante refresh ricarica la pagina attuale; - i Figura 2 - maschera di gestione degli articoli campi moduli posizionati nella parte alta (Keyword, Category, Status, Per Page) impostano i 2

3 parametri per la ricerca di articoli scritti precedentemente. Una volta impostati i suddetti campi la ricerca viene avviata dal pulsante Search. l pulsante List All elenca tutti gli articoli presenti. Se ad esempio si volessero ricercare gli articoli che contengono la parola programma occorrerebbe inserire tale parola come Keyword e cliccare Search ; il sistema per default visualizza 10 articoli per pagina, e permette di sfogliare le pagine (presenti qualora gli articoli fossero più di 10) cliccando sui simboli << (indietro) e >> (avanti) che appaiono a destra; tuttavia è possibile visualizzare più di 10 articoli per volta selezionando un numero diverso da 10 nel campo PerPage ; E chiaro che al primo ingresso gli strumenti di ricerca risultano superflui poiché nessun articolo è presente. - la voce Article Editor riporta alla videata attuale, che è appunto quella di gestione degli articoli. Supponendo di voler scrivere un articolo occorre, come detto, cliccare la voce Create Article o il tasto Create New. Questa azione farà apparire la pagina di creazione/modifica di un articolo, Figura 3 Nella schermata di creazione/modifica di un articolo si trovano innanzitutto, una serie di campi che impostano la data e l ora di creazione/ultima modifica dell articolo, tali valori compariranno nel sito, cosi che l utente a modo di valutare l aggiornamento o meno delle informazioni. Per default il sistema imposta i valori sulla data e l ora correnti ma è possibile cambiarli a proprio piacimento. Dopo data e ora vi è il capo Title nel quale va inserito il titolo dell articolo che si sta scrivendo. Dalla voce Category è possibile selezionare la categoria di appartenenza dell articolo, tale scelta è obbligatoria. La voce Status presenta tre opzioni: pending, visible, hidden. La prima modalità pending inserisce l articolo e lo pone in attesa di approvazione, e serve solo nel caso in cui chi sta scrivendo non abbia l autorità per pubblicare direttamente ciò che scrive. La modalità visible implica l immediata visibilità dell articolo sul sito web. Se lo status viene impostato su hidden quanto scritto verrà salvato e reso disponibile all autore per successive modifiche ma non verrà visualizzato nel sito. In pratica quest ultima modalità può essere utilizzata nel caso in cui si sia lasciato in sospeso il lavoro e lo si voglia riprendere successivamente. Le successive opzioni del modulo riguardano la scelta del tipo di articolo ( Article Type ). Sono possibili 4 opzioni: Full Article, è la modalità standard che permette di creare un articolo completo, che avrà alcune righe di riassunto (il testo inserito nel campo Summary ) ed il vero e proprio testo dell articolo (il testo inserito nel campo Content ). Nella pagina web di visualizzazione compariranno il titolo ed l sommario, al testo vero e proprio si accede cliccando sul titolo dell articolo. 3

4 4

5 Figura 3 - maschera di creazione/modifica articolo esempio di Full Article: Il titolo è: Il linguaggio HTML cliccando sul quale si viene rediretti al testo dell articolo; le righe che compaiono sotto il titolo sono quelle inserite nel campo Summary Figura 4 - esempio del tipo "Full ARticle" La modalità Summary Only consente di creare un articolo con il solo testo di riassunto (quello inserito nel campo Summary ). esempio di tipologia Summary Only : In questo caso il titolo non è cliccabile non essendoci altro testo da mostrare. Le righe che compaiono sotto il titolo sono quelle inserite nel campo Summary Figura 5 - esempio del tipo "Summary Only" N.B. Con la tipologia Summary Only anche se venisse inserito del testo nel campo Content esso non verrà mostrato nel sito web. Se si seleziona la tipologia Internet URL e si inserisce un indirizzo internet nell apposito campo verrà creato un articolo che riporta il solo riassunto (il testo inserito nel campo Summary ) seguito dal link all indirizzo internet inserito: esempio di tipologia Internet URL : In questo caso il titolo non è cliccabile non essendoci altro testo da mostrare. Le righe che compaiono sotto il titolo sono quelle inserite nel campo Summary. Al termine del testo vi è il link ( visita il sito ) all indirizzo Url inserito nel modulo Figura 6 - esempio del tipo "Internet URL" N.B. Con la tipologia Internet URL anche se venisse inserito del testo nel campo Content esso non verrà mostrato nel sito web. L ultima tipologia Uploaded File consente di rendere scaricabile dal sito un proprio file. In pratica cliccando sul tasto Sfoglia si accede al disco rigido del proprio computer ed è possibile selezionare il file locale che si vuol trasferire sul sito per renderlo disponibile. Una volta scelto il file è possibile inserire del testo nel campo Summary (riassunto) che comparirà prima del link di collegamento al file messo a disposizione. esempio di tipologia Uploaded File : In questo caso il titolo non è cliccabile non essendoci altro testo da mostrare. Le righe che compaiono sotto il titolo sono quelle inserite nel campo Summary. Al termine del testo vi è il link al file che si vuole distribuire Figura 7 - esempio del tipo "Uploaded File" N.B. Con la tipologia Uploaded File anche se venisse inserito del testo nel campo Content esso non verrà mostrato nel sito web. 5

6 Continuando nell esame della pagina di creazione/modifica di un articolo (Figura 3) troviamo i campi Autore ed ciò che viene inserito in questi campi apparirà subito sotto il titolo dell Articolo nella pagina in cui appare il testo dell articolo stesso. Al di sotto dei due campi appena ricordati appaiono i già citati campi Summary, per il riassunto dell articolo, e Content per il testo vero e proprio dell articolo. Particolare attenzione va posta al campo Auto Format posto sulla destra di ciascun box di inserimento testo. Se spuntato (opzione di default) l auto formatting assicura che il testo inserito (sia come riassunto sia come corpo dell articolo) comparirà nella pagina web così come immesso, cioè verranno rispettate le interruzioni di riga e/o le righe bianche lasciate attraverso ritorni a capo (Figura 8). Eventuali codici di formattazione del testo in HTL verranno comunque interpretati. Solo gli utenti che abbiamo qualche conoscenza del linguaggio HTML potrebbero aver bisogno di disattivare l auto formatting poiché in questo caso per andare a capo o lasciare righe vuote è necessario inserire gli appositi tag HTML TESTO INSERITO CIÒ CHE VIENE VISUALIZZATO CON L AUTO FORMATTING CIÒ CHE VIENE VISUALIZZATO SENZA L AUTO FORMATTING Figura 8 Auto formatting Nnotare come non siano rispettate le interruzioni di riga e tutto sia scritto di seguito quando l auto formatting è disattivato Il tasto Preview without publishing consente di vedere come verrà l articolo prima di pubblicarlo. Al termine del modulo di creazione/modifica articolo vi è una sezione per la gestione delle immagini (riprodotta in Figura 9)che si desidera appaiano all interno dell articolo (o nel sommario). 6

7 Figura 9 gestione delle immagini - Con il tasto Upload Images è possibile trasferire immagini dal proprio computer al sito e, di conseguenza, all articolo. Cliccando tale tasto si apre una finestra che consente trasferire fino a 10 immagini (Figura 10) Figura 10 maschera per il trasferimento delle immagini - In pratica nella finestra troviamo dei tasti Sfoglia che consentono di esplorare il proprio computer alla ricerca delle immagini da trasferire. Una volta scelta l immagine con il tasto Save si salva l immagine e si apre l interfaccia di amministrazione delle immagini ( Manage Images ) vedi Figura 11 7

8 Figura 11 maschera per l amministrazione delle immagini N.B. La maschera di amministrazione delle immagini è la stessa che sarebbe apparsa se dal modulo di gestione delle immagini riportato in Figura 9 si fosse cliccato sul tasto Manage Images. Il contenuto della maschera in esame è piuttosto semplice, innanzitutto riporta una versione rimpicciolita dell immagine che stiamo trasferendo, quindi, sulla destra indica il nome del file che stiamo trasferendo Filename. Il campo Name serve per attribuire un nome all immagine (per default riporta il nome del file) che può agevolare il riconoscimento in momenti successivi. E inoltre possibile inserire una didascalia per l immagine inserendola nel campo Caption essa apparirà in caratteri piccoli sotto l immagine. Qualora si decidesse di rimuovere l immagine occorre spuntare il box Remove this image. Le operazioni hanno termine cliccando il tasto Save. Cliccando sul tasto Cancel si esce dalla schermata di gestione immagini e si torna alla maschera di creazione/modifica articoli. Si ritorna così alla maschera di creazione/modifica degli articoli ma, ora, la sezione di gestione delle immagini indicherà la presenza di un immagine, Figura 12. Figura 12 gestione delle immagini con indicazione dell immagine trasferita come si vede dalla Figura 12 la sezione di gestione delle immagini indica la presenza di un immagine dal nome logo_universita.gif, che, volendo, è possibile visualizzare cliccando sulla voce view, posta nell ultima colonna sulla destra. Nella colonna Placeholder è riportato il segnaposto dell immagine: in pratica ciò che occorrerà inserire nel testo per richiamare l immagine. Il segnaposto ( placeholders ) consente infatti di specificare come e dove dovrà apparire all interno dell articolo l immagine caricata sul server. Per ogni immagine che si trasferisce verrà mostrato un segnaposto nella colonna Placeholder (esempio: ***image1***). Copiando questo segnaposto all interno del testo dell articolo (o del sommario) l immagine collegata al suddetto segnaposto verrà mostrata nella pagina web che riporta l articolo. E possibile deciderne anche la disposizione: se si vuole che l immagine risulti allineata a destra occorrerà inserire l indicazione ***image1:right*** (Figura 13), se si vuole che l immagine risulti 8

9 allineata a sinistra occorrerà inserire l indicazione ***image1:left*** (Figura 14), se si vuole che l immagine risulti allineata al centro occorrerà inserire l indicazione ***image1:center*** (Figura 15), se non si specifica niente e si inserisce solo l indicazione ***image1*** (Figura 13), l immagine prenderà l allineamento di default che è a destra. Inserendo invece l indicazione ***image1:url*** l immagine non verrà mostra ed al suo posto verrà riportato il solo Url (l indirizzo internet) dell immagine. Figura 13- Inserimento di un immagine allineata a destra. La prima figura mostra il segnaposto inserito nel testo, la seconda il risultato finale 9

10 Figura 14- Inserimento di un immagine allineata a sinistra. La prima figura mostra il segnaposto inserito nel testo, la seconda il risultato finale Figura 15- Inserimento di un immagine centrata. La prima figura mostra il segnaposto inserito nel testo, la seconda il risultato finale 10

11 Inseriti i testi e le immagini l articolo può essere salvato cliccando sul tasto Save che si trova sia in alto sia in basso della maschera di creazione/modifica articolo, Figura 3. Come già detto qualora non si fosse terminato l articolo e si volesse lasciare in sospeso il lavoro per riprenderlo in un secondo tempo sarà sufficiente impostare lo Status dell articolo alla modalità hidden anziche visible, così facendo il sistema conserverà il lavoro nello stato in cui lo si è lasciato consentendo di riprenderlo per finirlo. MODIFICA (CANCELLAZIONE) DI UN ARTICOLO PRECEDENTEMENTE SCRITTO Dopo essere entrati nel sistema con Username e password la maschera che verrà mostrata, come già ricordato precedentemente, è quella di gestione degli articoli. Solo che, rispetto a quanto detto sopra (Figura 2), la maschera in questione mostrerà tutti gli articoli presenti nella propria area di lavoro (Figura 16). Ognuno di essi comparirà in una tabella che mostra la data, il titolo e lo status, accanto a questi dati vi sono due voci: modify, consente di modificare l articolo corrispondente facendo accedere alla maschera di creazione/modifica articolo descritta in precedenza; erase, indica al sistema di cancellare l articolo corrispondente, verrà chiesta una ulteriore conferma della volontà di cancellare, che, se confermata, eliminerà definitivamente l articolo dal sistema. N.B. Per non visualizzare un articolo nelle pagine web, qualora non lo si voglia cancellare, è necessario entrare nella maschera di modifica, cliccando su modify, ed impostare il campo Status al valore hidden (come riportato in figura per i primi due articoli). Figura 16- Maschera di gestione degli articoli Gli articoli precedentemente scritti compaiono nell apposita tabella. Per default la maschera di gestione degli articoli mostra gli ultimi 10 articoli scritti o modificati (ordine cronologico), qualora il numero degli articoli inseriti fosse superiore a 10 per visualizzarli si può: - impostare il campo PerPage ad un numero superiore a 10 e cliccare sul tasto Search o Refresh ; 11

12 - andare alla pagina successiva muovendosi con i simboli << e >> che compaiono subito sopra la tabella a destra. - impostare i parametri della ricerca (es. un parola del titolo, lo Status, ecc.) e cliccando il tasto Search o Refresh. REALIZZAZIONE DI UN ARTICOLO CHE CONSENTA DI SCARICARE MOLTI FILES Spesso si è nella situazione di voler mettere a disposizione degli utenti piu di un files. Tale circostanza ricorre ad esempio nel caso cui si decida di rendere disponibili i materiali utilizzati nelle lezioni frontali. In virtù di quanto detto sinora, l unico modo per raggiungere quest obiettivo sarebbe quello di realizzare tanti articoli del tipo Uploaded file, per quanti sono i materiali o le lezioni effettuate. Sebbene tale soluzione sia ineccepibile dal punto di vista tecnico, risulterebbe molto scomoda per gli utenti poiché avremmo un numero elevato di files. Esiste una via d uscita, piuttosto semplice che consente di inserire i materiali in un solo file in modo da avere una pagina web come quella di Figura 17, nella quale il testo sottolineato rappresenta link a files da scaricare Figura 17 - Un solo articolo molti link a files da scaricare. Per realizzare tale risultato è necessario procedere come si è visto sopra in merito alla scrittura di un articolo del tipo Full artiche, con la variante che occorre caricare i files che si vogliono mettere a disposizione degli utenti come immagini. 12

13 In sostanza dalla maschera di inserimento delle immagini anziché selezionare nel proprio PC i files delle immagini si selezionano i files che si e deciso di rendere scaricabili (files Word, pdf, excel, ecc.). Dopo aver concluso la fase del caricamento la maschera di gestione/caricamento delle immagini apparirà come mostrato in Figura 18: Figura 18 : Dopo il caricamento dei files Si notino nella colonna Image Name i nomi dei files. A questo punto per inserire nel testo i link ai vari files si procederà sfruttando i segnanomi (Placeholder) ed utilizzando un semplicissimo comando in linguaggio HTML. Per effettuare ul link la sintassi Html è la seguente: <a href= nome_files_da_scaricare target= _blank >Testo che apparirà cliccabile</a> Quindi se vorremo realizzare un link al 3 file dell elenco precedente dovremo scrivere: Da notare l uso del segnalibro ( Placeholder ) ***image3:url*** come destinazione del link, in effetti, così facendo, sarà il sistema che al momento del salvataggio dell articolo sostituirà al segnaposto il nome del file che è stato caricato in 3 posizione (da notare che questo meccanismo rende facile la sostituzione del file. Se ci si trova nella situazione di dover sostituire un file precedentemente caricato e indicato nell articolo, sarà sufficiente, attraverso l interfaccia di amministrazione delle immagini, procedere alla rimozione del vecchio file ed al caricando del nuovo nella stessa posizione, la 3. Non sarà necessario alterare il testo proprio perché si è utilizzato un segnalibro). Ovviamente quanto esemplificato sopra andra scritto per ciascuno dei link (files) che si vogliono inserire, così, limitandoci ai primi quattro avremo il testo seguente: <a href="***image1:url***" target="_blank">lezione n.1 del 30 settembre 2004</a>: Bla bla bla ecc. 13

14 <a href="***image2:url***" target="_blank">lezione n. 2 del 01 ottobre 2004</a>: Bla bla bla ecc. <a href="***image3:url***" target="_blank">lezione n.3 del 05 ottobre 2004</a>: Bla bla bla ecc. <a href="***image4:url***" target="_blank">lezione n.4 del 07 ottobre 2004</a>: Bla bla bla ecc. Dal lato utente quanto scritto apparirà come in Figura 19 Figura 19 Naturalmente sarà sempre possibile aggiungere con lo stesso meccanismo altri links/files in un secondo tempo in fase di Modifca articolo, unico limite è dato dal numero massimo di 25 immagini/files che è possibile allegare. 14

15 ALCUNI COMANDI DI FORMATTAZIONE IN HTML Nel linguaggio HTML la formattazione viene effettuata racchiudendo il testo da formattare all interno di codici, detti Tag. Se ad esempio si vuole che un testo compaia in grassetto occorrerà racchiuderlo fra i codici <b> e </b>, se ci si dimentica di inserire il tag di chiusura </b> tutto il testo che segue il tag di apertura <b> risulterà in grassetto. Analogo discorso per testo sottolineato, racchiuso fra i tag <u> e </u>, e quello in corsivo, racchiuso fra i tag <i> e </i>. Se si volesse dare maggior enfasi ad un titolo, l HTML mette a disposizione 6 livelli di importanza ai quali corrispondono 6 formattazioni diverse. Così per dare la massima evidenza ad un titolo basterà racchiuderlo fra i tag <H1> e </H1>, una minore evidenza si ottiene racchiudendo il titolo fra i tag <H2> e </H2>, e cos via sino al livello <H6>, </H6>. La Figura 20 riporta esempi di formattazione. Figura 20- Esempi di formattazione del testo in HTML. Da notare che la formattazione come titolo, di qualsiasi livello, lascia sempre dello spazio dopo il testo. Come già detto sopra la sintassi per inserire un link ad un file da scaricare in linguaggio html è la seguente: <a href= nome_files_da_scaricare target= _blank >Testo che apparirà cliccabile</a> 15