Introduzione... 3 Accesso riservato area utente... 3 Gestione utenti... 4 Gestione pagine dinamiche... 6 Aggiungere una pagina... 7 Ipulsantidell editor... 9 Comporre una pagina... 9 Pubblicazione della pagina...23 Vai a home page...24 Logout...24 Esempio di inserimento proposta...25 Visualizzazione delle pagine da parte degli utenti...45 2
Introduzione Il nuovo sito www.etsicisl.it è un vero e proprio portale di tutto il mondo etsi ed è stato pensato per migliorare la visibilità delle realtà regionali etsi e per pubblicare a livello nazionale le proposte e le iniziative regionali, le proposte verranno inserite e pubblicate direttamente dalle etsi regionali. Accesso riservato area utente Per accedere all area riservata si deve aprire il proprio brow ser w eb (Internet Explorer, Mozilla, ecc.) e digitare nella casella degli indirizzi il seguente indirizzo internet: http://www.etsicisl.it/admin (Consigliamo di inserire questo indirizzo tra i preferiti, dopo averlo aperto la prima volta, per evitare di digitarlo ogni volta) Premere invio per visualizzare la seguente pagina: Per proseguire si devono inserire nei due campi User Name e Password i dati di accesso fornitidall etsinazionale ad ognisede regionale. U na volta inseritiidue daticliccare su entra per accedere all area e visualizzare la seguente scherm ata: 3
Nel pannello di controllo per i regionali si hanno le seguenti opzioni: gestione pagine dinamiche gestione utenti vai a home page logout Gestione utenti In questa sezione si possono modificare i propri dati: nome utente (user name), password, nome visualizzato: il nome che sarà visualizzato come autore alla fine delle pagine inserite recapiti Cliccando sul link gestione utenti si accederà alla seguente schermata: 4
La scherm ata riporta idatiassociati all utenza con la quale è stato effettuato l accesso alla piattaforma. Per visualizzare o modificare i propri dati di accesso si deve cliccare sul link Modifica/Visualizza per aprire la seguente schermata: 5
In questa schermata è possibile modificare nome utente, password, nome visualizzato e recapiti (telefono, fax, email, sito internet, ecc). Il livello dell utenza è già preimpostato a regionale e non è modificabile. Una volta apportate le modifiche ai propri dati, basta cliccare sul pulsante modifica per renderle effettive. Gestione pagine dinamiche In questa sezione vengono elencate tutte le pagine inserite con la propria utenza ed è possibile modificare o visualizzare le pagine inserite (link modifica/visualizza) o inserirne di nuove (link aggiungi pagina) come si può vedere nella schermata: 6
Aggiungere una pagina Per inserire una nuova pagina sul sito etsicisl.it nella sezione proposte delle etsi regionali è necessario cliccare sul link aggiungi pagina per visualizzare il modulo per l inserimento dei dati e la composizione della pagina come mostra la schermata: 7
È possibile scegliere titolo e sottotitolo per la pagina in elaborazione ed è NECESSARIO selezionare la propria regione dal menu proposta da etsi regione: in questo modo la pagina sarà collegata alla regione proponente e quando gli utenti del sito etsicisl.it cliccheranno la regione di interesse appariranno tutte le proposte inserite da quella regione. Per la creazione dei contenuti della pagina (descrizione) è disponibile un editor molto simile a quello presente in word con vari pulsanti ed opzioni disponibili: Come destinazione pagina è preimpostato proposte dalle etsi regionali perché è in quella sezione che verrà salvata la pagina e non è modificabile come anche il campo autore che riporta l utenza con cui si è collegati alla piattaforma e il nome che comparirà come autore della pagina. Una volta compilati tutti i campi e composti i contenuti con l editor è possibile cliccare su anteprima per avere un anteprima di come verrà la pagina, su invia per pubblicare la pagina sul sito, oppure cancella per annullare tutta l operazione e cancellare tutti i dati inseriti. 8
I pulsanti dell editor : stampare il contenuto dell area di composizione dell editor : annullare o ripristinare le ultime operazioni fatte : inserire un collegamento ipertesuale : allegare un file alla pagina : inserire e caricare un immagine : inserire una tabella : inserire caratteri speciali : creare elenchi numerati o puntati : rientri e tabulazioni per il testo : inserire una linea orizzontale : allineamenti (sinistra, centrato, destra, giustificato) : stile del testo, carattere, dimensione pedice e apice : per formattare il testo in grassetto, corsivo, sottolineato, barrato, : colore del testo e dello sfondo del testo Comporre una pagina Una volta inseriti titolo, sottotitolo (opzionale) e selezionato la propria regione (obbligatorio), si può procedere alla composizione di contenuti tramite l editor e si dovrebbe avere una schermata simile a questa: 9
Per inserire il testo basta cliccare nell area ed iniziare a digitare, oppure incollare delle porzioni di testo per esempio da un documento word, in questo secondo caso il testo incollato nell area manterrà la formattazione (carattere, dimensione, ecc) che aveva nel documento di origine. Per modificare il carattere del testo all interno dell area si deve selezionare il testo, cliccare per aprire il menu a tendina identificato come font e selezionare uno dei caratteri disponibili con un clic de mouse per modificare il carattere come nella schermata: 10
Lo stesso procedimento vale per la dimensione del carattere con il menu a tendina identificato come size e per l applicazione degli stili predefiniti con il menu a tendina chiamato format. Per allineare il testo basta selezionare la porzione di testo (o altro elemento: immagini, link, ecc.) che si vuole allineare e cliccare sugli appositi pulsanti. Allo stesso modo per applicare grassetto, corsivo, sottolineato, ecc. Per applicare un colore al testo si deve selezionare la porzione di testo alla quale si vuole applicare il colore e cliccare sul pulsante apposito per poter selezionare il colore desiderato con un clic del mouse come in figura: 11
Con la stessa procedura si può applicare un colore di sfondo al testo selezionato con il pulsante appropriato. Per creare un elenco numerato o puntato si devono selezionare le voci che faranno parte dell elenco e poi cliccare sul pulsante apposito per la creazione dell elenco numerato o puntato come nella schermata: 12
La procedura vale sia per gli elenchi numerati sia per quelli puntati. Per inserire un collegamento ipertestuale all interno del testo della pagina si deve selezionare il testo e cliccare sul pulsante per la creazione dei collegamenti ipertestuali per aprire la schermata delle proprietà collegamento: 13
Per inserire un collegamento ipertestuale ad un indirizzo internet le impostazioni da selezionare sono le seguenti: 14
Dove alla voce window si seleziona new window per aprire il collegamento in una nuova pagina web, se si vuole far aprire il collegamento nella stessa pagina basta selezionare same window. Cliccando sul pulsante preview si può avere un anteprima dell indirizzo internet inserito per avere per esempio la conferma di averlo scritto correttamente. Se si vuole inserire un indirizzo email cliccabile le opzioni da selezionare nella schermata delle proprietà del collegamento sono le seguenti: Dove si deve inserire l indirizzo e mail ed eventualmente un soggetto che comparirà come oggetto della mail ricevuta (ma questa opzione non è compatibile con tutti i programmi di posta elettronica). Per rendere il collegamento ipertestuale definitivo all interno del testo della pagina che si sta componendo cliccare su OK per applicare le impostazioni assegnate. Per allegare un file all interno della pagina che si sta costruendo si deve selezionare il testo o l immagine che, quando sarà cliccata dall utente, farà partire il download o l apertura del file che si sta allegando, una volta selezionato l elemento per il collegamento cliccare sul pulsante apposito per aprire la schermata in cui si potranno selezionare le proprietà ed allegare il file come nella schermata: 15
Se il file che si vuole far scaricare o comunque collegare alla frase selezionata è presente nell elenco di sinistra (dove sono riportati tutti i file presenti sul sito) basta selezionare il documento con un clic del mouse e nel campo window selezionare new window per far aprire il file in una pagina nuova oppure same window per far aprire il file nella stessa pagina. Cliccando su uno dei file in elenco e premendo il pulsante preview si ha un anteprima del file selezionato. Una volta impostati tutti i parametri cliccare su OK per applicare il collegamento al file come nella schermata: 16
Se il file non è già presente in elenco e lo si deve caricare sul sito, si deve cliccare sul pulsante sfoglia e cercare il file che si vuole caricare all interno del proprio computer, una volta selezionato fare clic sul pulsante upload come nella schermata: 17
Una volta cliccato sul pulsante upload apparirà un avviso di attesa di caricamento per i file troppo grandi a cui si dovrà rispondere OK: Se il file appena caricato non compare in elenco, premere F5 per aggiornare l elenco dei file caricati come suggerito nella schermata e poi procedere al collegamento del file alla frase selezionata come spiegato precedentemente. Per inserire un immagine all interno della pagina che si sta creando posizionarsi con il cursore nel punto in cui si vuole inserire l immagine e cliccare sul pulsante apposito per aprire la schermata in cui si dovranno impostare i parametri e si potrà caricare l immagine che si vuole inserire: Se l immagine che si vuole inserire è presente nell elenco delle immagini caricate sul sito basta selezionarla con un clic del mouse e dare OK al messaggio di avviso che ricorda di attendere per le immagini troppo grandi. Una volta caricata, l immagine comparirà all interno dell area di anteprima (utile per verificare di aver selezionato l immagine corretta). Nella schermata è stato selezionato ad esempio il file cat08.jpg: 18
Si può inoltre selezionare la distanza dell immagine dagli elementi circostanti con i due parametri horizontal e vertical, l allineamento dell immagine rispetto al testo presente nella pagina con il parametro alignment che nell esempio è stato impostato come right (destra) quindi l immagine si posizionerà a destra del testo presente nella pagina (il testo presente nell anteprima serve appunto per avere un idea di come si disporranno testo ed immagine secondo i parametri selezionati), nell esempio è stato impostato anche il bordo dell immagine a 3, m a il colore del bordo non è modificabile. Una volta selezionati tutti i parametri, cliccare su OK per rendere definitivo l inserimento dell immagine nella pagina. L esempio è riportato nella seguente schermata: 19
Per inserire una tabella all interno della pagina, cliccare sul pulsante predisposto per aprire la schermata dove si dovranno scegliere i parametri per la creazione della tabella: Rows è il parametro per scegliere il numero di righe, mentre columns è per indicare il numero di colonne. Il parametro widht permette di indicare la dimensione in larghezza della tabella in percentuale rispetto alla dimensione della pagina (100% la tabella in larghezza occuperà tutto lo spazio disponibile). Alignment come già visto permette di indicare l allineam ento della tabella (destra, centrato, sinistra). Cell pad e cell space sono parametri per la distanza dai bordi degli elementi all interno delle celle. 20
Se per esempio si vuole creare una tabella con 3 righe e 3 colonne allineata al centro e larga l 80% dello spazio disponibile nella pagina con bordo invisibile, le impostazioni da inserire saranno le seguenti: Il risultato sarà il seguente: 21
Il bordo della tabella risulterà tratteggiato per facilitare la compilazione della pagina e l inserimento degli elementi nella tabella, cliccando su anteprima si noterà che i bordi della tabella sono invisibili: Per inserire caratteri speciali basta cliccare sul pulsante apposito nella barra degli strumenti per aprire la mappa dei caratteri speciali disponibile e selezionare quello fra quelli proposti che interessa ed inserirlo all interno della pagina con il clic del mouse: 22
Pubblicazione della pagina Una volta compilata la pagina in ogni sua parte ed inserito i contenuti: si può cliccare su anteprima per avere un idea molto vicina a come la pagina sarà visualizzata dagli utenti: 23
Si può chiudere la finestra dell anteprima ed apportare le modifiche se sono necessarie, quando la pagina sarà definitiva, per pubblicarla in maniera definitiva si dovrà cliccare sul pulsante invia. Una volta cliccato il sistema farà tornare l utente alla pagina con l elenco delle proposte inserite che comprenderà anche l ultima pagina appena inserita: Che potrà essere visualizzata o modificata ulteriormente con l apposito link modifica/visualizza. Vai a home page Cliccando questo link si visualizza direttamente l homepage del sito w w w.etsicisl.it. Logout È buona norma, una volta terminate le modifiche e le proprie operazioni nell area riservata, cliccare sul link logout prima di uscire dalla piattaforma (chiudendo la finestra 24
o andando su un altro sito internet) per permettere al sistema di ripristinare le impostazioni iniziali per il prossimo ingresso. Così facendo si possono evitare molti malfunzionamenti dovuti dalle troppe connessioni simultanee alla piattaforma e si evita di sovraccaricare il sistema. Esempio di inserimento proposta Come esempio di inserimento pagina ipotizzeremo che l etsi Abruzzo organizzi visite guidate al Parco N azionale dell Abruzzo, quindi inseriremo all interno della pagina tutte le informazioni necessarie a pubblicizzare questa iniziativa. Digitare l indirizzo http://www.etsicisl.it/admin nella barra degli indirizzi del browser e poi premere invio per visualizzare la pagina in cui andranno inseriti username e password forniti dall ETSI nazionale all ETSI Abruzzo. Una volta inseriti i dati corretti cliccare sul pulsante entra per accedere al pannello: 25
Per creare la pagina della proposta si deve accedere alla gestione pagine dinamiche, quindi cliccare sul link per aprire la pagina che riporta l elenco delle proposte già inserite dall ETSI Abruzzo e la possibilità di aggiungerne di nuove: 26
In questa sezione è possibile modificare o visualizzare la pagine inserite dall etsi Abruzzo già presenti sul sito oppure aggiungerne una nuova cliccando sul link aggiungi pagina per accedere al modulo per la compilazione dei contenuti della proposta che si sta inserendo: 27
Come si può vedere a fine pagina, la destinazione della pagina è reimpostata alla sezione proposte delle etsi regionali come è anche già impostato e non modificabile l autore della pagina (nome visualizzato). Inseriamo come titolo della proposta Visita guidata al Parco Nazionale dell Abruzzo, come sottotitolo lasciamo il campo vuoto (infatti questa voce è opzionale possiamo anche evitare di compilarla) e selezioniamo Abruzzo dall elenco delle regioni (è importantissimo selezionare la propria regione in questo menu altrimenti la nostra proposta verrà visualizzata nella pagina di un altra etsi regionale o addirittura non visualizzata affatto!): 28
A questo punto possiamo passare alla compilazione dei contenuti. Se si è in possesso di una versione in documento word (o altro) della proposta che si vuole inserire, è possibile copiare e incollare i testi direttamente da questi formati e proseguire con la compilazione della pagina. Nel caso in cui caso non si disponga di un documento dal quale si possano copiare ed incollare le informazioni, si deve procedere alla compilazione della proposta digitando i testi che dovranno essere visualizzati. Ipotizziamo che il testo della proposta della visita guidata sia: Tre giorni alla scoperta del Parco Questo programma si può svolgere durante tutto l'arco dell'anno ed ha lo scopo di educare i partecipanti alla conservazione della natura attraverso l'impegno quotidiano e l'acquisizione di nuove abitudini e comportamenti. Le Guide e le Guardie del parco, in collaborazione con i responsabili dei gruppi, elaborano un programma di attività che comprende la conoscenza e l'informazione attraverso escursioni guidate di diversa difficoltà e durata, proiezioni e visite alle strutture informative ed educative del Versante Laziale del Parco. Prima giornata Incontro con le Guide-Interpreti, accoglienza ed introduzione al Parco, consegna della documentazione, visita guidata di un centro (Campoli Appennino oppure Alvito) e visione di un filmato sul parco. Seconda giornata Tranquilla passeggiata con attività di educazione ed interpretazione della Natura. Pranzo al sacco. Terza giornata 29
Breve escursione sulle tracce degli animali del parco. Pranzo al sacco. Conclusioni e partenza. Digitare il testo all interno dell area di compilazione: Possiamo procedere ora alla formattazione del testo. È possibile cambiare il carattere del testo, i colori di alcune porzioni di testo come i titoli Tre giorni alla scoperta del Parco, Prima giornata, ecc. Per modificare il carattere, si deve selezionare il testo al quale si vuole modificare il carattere e cliccare sul menu a tendina Font e selezionarne fra i caratteri disponibili. Nel nostro caso vogliamo che tutto il testo sia di carattere verdana, quindi selezionare tutto il testo, individuare nel menu a tendina il carattere verdana ed applicarlo con il clic del mouse sul nome del carattere: 30
A questo punto possiamo applicare il grassetto ai titoli: selezionare il titolo Tre giorni alla scoperta del Parco e cliccare sul pulsante per applicare il grassetto (Bold) al titolo selezionato: 31
Fare lo stesso procedimento per tutti i titoli a cui vogliamo applicare il grassetto: 32
Ora applichiamo dei colori ai titoli, per fare ciò si deve selezionare il testo al quale si vuole applicare un colore, poi cliccare sul pulsante : 33
Selezionare un colore fra quelli proposti ed applicarlo con un clic del mouse: 34
Applicare il colore anche agli altri titoli all interno del testo per ottenere: 35
A questo punto potremmo voler inserire un immagine del parco per rendere più allegra la presentazione con una foto. Per inserire un immagine si deve cliccare nel punto in cui la si vuole inserire e cliccare sul pulsante per aprire la schermata da utilizzare per caricare l immagine: 36
La schermata per l inserimento dell immagine è la seguente: 37
L immagine che vogliamo inserire si trova sul nostro computer, quindi per caricarla sul sito si deve cliccare sul pulsante sfoglia e cercarla all interno del nostro computer (il file di esempio raffigurante una volpe in questo caso si chiama D2_0925_Volpe.jpg): Cliccare su apri e poi sul pulsante upload. Al messaggio di attesa per le immagini più pesanti dare O K. Una volta caricata l immagine comparirà nell elenco di quelle disponibili, quindi si deve individuarla: 38
Cliccare sul nome e dare O K al messaggio di attesa per il caricamento di file pesanti. Finito il caricamento, l immagine verrà caricata nell anteprima: 39
Per inserire l immagine all interno della pagina cliccare su O K A questo punto possiamo inserire una tabella con le tariffe del biglietto di partecipazione. Nel nostro esempio potremmo inserire la seguente tabella: Scuole Elementari Medie Superiori Prezzo a bambino 4 euro 5 euro 6 euro Per inserire una tabella posizionarsi nel punto dove la si vuole creare e cliccare sul pulsante per aprire la finestra in cui si dovranno indicare i parametri per la realizzazione della tabella: 40
La tabella che si deve inserire è composta da 4 righe (rows) e 2 colonne (columns), lasciamo le altre impostazioni come sono: Una volta terminato di impostare i parametri cliccare su O K per inserire la tabella all interno della pagina che si sta creando: 41
Cliccare all interno delle singole celle per inserire il testo: 42
A questo punto la compilazione dei contenuti è terminata ed è possibile cliccare sul pulsante anteprima per visualizzare l aspetto della pagina: 43
Se si ritiene che ci siano ancora modifiche da fare o informazioni da aggiungere, chiudere questa finestra e continuare ad effettuare le modifiche nella pagina precedente, se invece l aspetto della pagina ci soddisfa possiamo cliccare sul pulsante invia per pubblicare la pagina sul sito: 44
Una volta cliccato invia la pagina viene caricata sul sito e viene elencata nella pagina gestione pagina utente. A questo punto la pagina è presente e visualizzabile sul sito etsicisl.it. Visualizzazione delle pagine da parte degli utenti Sul sito www.etsicisl.it le proposte pubblicate dalle sedi regionali sono raccolte all interno della sezione Proposte delle ETSI Regionali, quindi per visualizzare la pagina fare clic con il mouse sul link: 45
A questo punto si può cliccare sia sul nome della regione presente in elenco, sia sulla regione nella cartina dell Italia per accedere all elenco delle proposte pubblicate dall ETSI regionale di nostro interesse. Nell esempio era stata indicata la regione Abruzzo, quindi cliccando su Abruzzo (o sulla regione nella cartina), si visualizzerà l elenco delle proposte pubblicate da questa etsi regionale: 46
Le informazioni visualizzabili in elenco per ogni pagina inserita saranno: titolo e autore (il nome visualizzato che si può modificare nella pagina utenti). Nell esempio Visita guidata al Parco Nazionale dell Abruzzo è il titolo della proposta e ETSI Abruzzo è il nome visualizzato dell account con cui è stato creato l esempio. Cliccando sul link leggi >> si aprirà una nuova pagina contenente tutti i dettagli della proposta (creata e inserita sul sito dall etsi regionale), l autore della proposta e i recapiti: 47
48