Sito web della Provincia di Udine Guida pratica per pubblicatori

Sito web della Provincia di Udine Guida pratica per pubblicatori

Indice Premessa... 3 1. Redazione del sito web... 4 2. Inserire un file/documento in un sito... 5 3. Edit delle pagine web... 8 3.1 Regole di editing... 10 3.2 Implementazione sezione Page Content... 11 3.3 Implementazione sezione Page Image... 15 4. Creazione nuova pagina web... 16 5. Creazione di una nuova Web Part ( boxini )... 19 2

Premessa Questa guida pratica ha lo scopo di presentare le procedure di base e le regole di editing per la gestione del portale istituzionale della Provincia, in modo da rendere più semplice ed immediato il lavoro di pubblicazione ed implementazione del sito stesso svolto dai redattori decentrati. Al portale è possibile accedere attraverso l indirizzo www.provincia.udine.it. 3

1. Redazione del sito web Verranno qui di seguito spiegate le modalità di redazione delle pagine web all interno del sito. Per accedere con il proprio account e password alla redazione si deve comporre questo indirizzo: redazione.provincia.udine.it In questo modo comparirà il portale della Provincia; in aggiunta, in alto a sinistra nella schermata, l indicazione Welcome Cognome Nome. La comparsa di questo elemento aggiuntivo indica l avvenuta autenticazione dell utente che sarà abilitato a effettuare la redazione all interno del sito. Ogni redattore decentrato è abilitato ad operare solo su alcune parti del sito, in particolare quelle in cui vengono mostrate e gestite le informazioni riguardanti il settore in cui lavora. Quindi, è necessario navigare nel sito nella modalità usuale, utilizzando i menù orizzontali e verticali, fino a giungere alla pagina che si vuole modificare. Quando il redattore giunge ad una pagina su cui ha i diritti a operare, compaiono delle opzioni aggiuntive (menù Site Actions, bottone Edit page ecc.) come nella figura di seguito riportata. Fig. 1.1 4

2. Inserire un file/documento in un sito Per pubblicare un documento all interno delle pagine di propria competenza nel sito, è necessario per prima cosa caricarlo spostandolo dal proprio computer all interno del sito, affinchè poi sia disponibile al momento della costruzione della pagina web. A questo scopo, una volta autenticati, si cliccherà su Site Actions e dal menù a tendina si selezionerà View all site content. Comparirà questa schermata, che assomiglia alla struttura a cartelle che si trova sul proprio pc: Fig. 2.1 I file sono caricabili nelle cartelle Documents e Images. Le Images sono fotografie ed immagini mentre i Documents possono essere di vari tipi, ma il formato deve essere aperto cioè non deve essere necessario per l utenza disporre di programmi particolari per poter aprire il file. Si consiglia a questo scopo di utilizzare il formato PDF; quindi trasformare il proprio documento in questo formato prima di procedere al caricamento. Si raccomanda inoltre di utilizzare nomi di files senza spazi (eventualmente utilizzare il carattere _ per separare le parole). Per procedere al caricamento del documento, agire come di seguito descritto (analogamente si opera anche per le immagini): 5

- cliccare sulla cartella Documents (se sto caricando immagine: cartella Images); - si accede all interno della lista di documenti già caricati e presenti all interno del sito (ove non ve ne fosse alcuno, la lista apparirà vuota) dove si andrà a caricare anche quello da inserire nella pagina col tasto Upload (fig. 2.2); Fig. 2.2 - si apre a questo punto una finestra tramite la quale è possibile cercare e selezionare il file all interno del proprio pc (il pulsante Sfoglia, come quando per esempio si deve selezionare un file per aprirlo con Word); selezionare il documento voluto e cliccare ok Nota: si consiglia di non attivare il check Add a new version to existing files Fig. 2.3 6

- a questo punto apparirà una scheda, in cui è già scritto il nome del file nella prima riga; inserire un titolo nell apposita posizione e confermare on OK Fig. 2.4 A questo punto il file risulterà caricato, quindi visibile nella cartella Documents; sarà identificato dalla scritta!new ; nella schermata relativa ai documenti viene anche indicato chi ha effettuato l operazione, e la data con l ora in cui è stata effettuata. Il file ora è caricato all interno del programma, per renderlo visibile agli utenti del sito sarà necessario inserirlo in una pagina web, secondo le modalità che andremo a spiegare di seguito. 7

3. Edit delle pagine web Effettuato l accesso e posizionati sulla pagina o il sottosito da modificare, è possibile procedere alla creazione o apportare modifiche ad una pagina del portale. Per entrare in modalità di modifica di una pagina, si può cliccare il pulsante Edit Page (fig. 3.1) o, in alternativa, aprire il menù a tendina dalla voce Site Actions posta in alto a sinistra e cliccare su Edit Page (fig. 3.2). Fig. 3.1 8

Fig. 3.2 In questo modo si accede alla schermata che permette le modifiche alla pagina (fig. 3.3); vi sono diverse finestre, atte a contenere diversi tipi e formati di informazione: Page Image: serve a inserire nella pagina una o più immagini Page Content: serve a inserire testo, che può comprendere link a file o siti Add Web Part: serve a inserire Web Part cioè dei boxini contenenti varie informazioni, ad esempio elenchi di documenti. Da notare che il tasto Edit Page si è trasformato in Save and stop editing, per consentire il salvataggio delle modifiche apportate alla pagina. Successivamente al salvataggio, andrà cliccato il pulsante Publish affinchè le modifiche siano visibili a tutti. 9

Fig. 3.3 3.1 Regole di editing Quando si edita dei contenuti all interno di una pagina, e perciò all interno dell Edit content, è indispensabile seguire alcune regole redazionali al fine di consentire un uniformità di scrittura in tutto il sito e per evitare che si generino degli errori che compromettano la creazione della pagina. 1. Usare il carattere Verdana; 2. Inserire un titolo ad ogni pagina che andrà selezionato in grossetto, carattere Verdana e dimensione 2; 3. Non inserire tabelle; 10

4. Per dare risalto a dei contenuti all interno del testo è possibile usare il carattere grossetto o il corsivo, non usare invece testo colorato né il carattere sottolineato poiché nella navigazione indica un link a un altro oggetto. 5. Il testo non va allineato 6. Se il testo inserito è stato copiato da un file precedentemente creato, per esempio con Word, per effettuare la procedura utilizzare i comandi Ctrl C (copia) e Ctrl V (incolla) e dopo aver inserito il testo, ricordarsi di selezionare dalla barra strumenti dell Edit content, il comando Styles -> Remove Inline Styles. 3.2 Implementazione sezione Page Content Cliccando sulla dicitura Edit content, o anche semplicemente dentro il riquadro, si entra in modalità di editing, cioè si può scrivere normalmente il testo voluto, seguendo le regole specificate al paragrafo precedente. In alto compare una barra in cui si vedono i pulsanti che dovrebbero risultare familiari in quanto utilizzati ad esempio in Word (fig.3.4); questa, se necessario, è spostabile mediante trascinamento. Fig. 3.4 11

All interno della barra, meritano delle note aggiuntive alcuni pulsanti (vedi fig. 3.5): 2 3 1 Fig. 3.5 1. Dimensionamento e spaziatura font: Per adeguare il testo inserito alla tipologia richiesta dalla necessità di uniformità del sito, dopo averlo selezionato tutto, cliccare sulla dimensione n. 2 del menù a tendina relativo al dimensionamento del carattere (freccia 1 di fig. 3.5; pulsante rappresentante una lettera A con una piccola freccia per indicarne l altezza) 2. Inserimento nel testo di un link Il pulsante indicato con il n. 2 in fig. 3.5 - globo terrestre con catenella - permette il caricamento dei link, ovverosia la possibilità di creare un collegamento tra pagine diverse (sia appartenenti ad altri siti che a pagine del portale provinciale), o un link a un documento (ad esempio un file pdf) a nostra disposizione. Per creare un collegamento (link) procedere nel modo seguente: - scrivere la parola o il testo che si intende far diventare un link (cioè che dovrà essere cliccata dall utente finale per visualizzare il file pdf o la pagina destinazione) ed evidenziarla mediante selezione; 12

- cliccare sul bottone di creazione hyperlink (globo terrestre) e si aprirà la seguente finestra di dialogo: Fig. 3.6 - mediante il tasto Browse si può navigare alla ricerca del documento o della pagina da collegare; si può scegliere di cercare tra i documenti (Current Site Documents) o tra le pagine (Current site Pages) Fig. 3.7 13

- quindi selezionando l elemento voluto e confermando con OK si torna alla finestra di dialogo di fig. 3.6, nella quale può essere utile confermare l opzione Display link with icon che mostrerà accanto al collegamento l icona rapresentante il tipo di file che si sta aprendo; infine confermare cliccando su OK. - Si vedrà la parola o la frase selezionata sottolineata, e cliccandoci sopra si aprirà la pagina o il file voluto. E possibile anche creare un link ad un sito esterno; si procede in modo analogo a quanto già spiegato, con le seguenti differenze: nello spazio Selected URL, digitare direttamente l indirizzo da raggiungere (es: http://www.regione.fvg.it); si consiglia in questo caso di attivare l opzione Open link in new window. 3. Inserimento nel testo di foto e immagini Il pulsante indicato con il n. 3 in fig. 10 montagna con il sole - permette l inserimento di un immagine all interno del testo. Come vedremo, le immagini sono caricabili anche utilizzando la specifica sezione Page Image, tuttavia l inserimento direttamente all interno del testo consente di gestire al meglio l impaginazione e quindi controllare maggiormente il layout della pagina, che altrimenti viene gestito direttamente dal programma di gestione del sito, con risultati non sempre prevedibili. Quindi, per caricare un immagine, procedere nella modalità seguente: - cliccare sul pulsante di inserimento immagine; - mediante il tasto Browse navigare alla ricerca dell immagine voluta e selezionarla confermando con ok ; - viene consentito di inserire delle scelte riguardo Layout per il posizionamento e Size per il dimensionamento dell immagine (fig. 3.8): si consiglia di lasciare quanto preimpostato in automatico e successivamente, quando dopo la conferma si vedrà il risultato, eventualmente riaprire la finestrina per adattare l immagine alle esigenze di impaginazione impostando i parametri in modo opportuno. 14

Va sottolineato il fatto che all atto della creazione di un link ad un documento o dell inserimento di un immagine in una pagina, questi oggetti devono essere presenti sul sito, quindi precedentemente caricati con l operazione di upload già descritta. Durante l operazione di Browse.. può succedere che l elenco degli oggetti tra cui è possibile scegliere sia particolarmente corposo; in questo caso, essi verranno mostrati in schermate successive; per scorrere tra le schermate si vedrà una apposita freccia posta in alto al centro. Fig. 3.8 3.3 Implementazione sezione Page Image In questa sezione è possibile caricare foto o immagini. Cliccando sulla dicitura Edit Picture o, indifferentemente, su Click to add a new picture si apre una finestra di dialogo identica a quella già mostrata al paragrafo precedente (fig. 3.8). Procedere quindi come già descritto. 15

4. Creazione nuova pagina web Fino ad ora si è trattato il caso della modifica di una pagina web già esistente; dovendone invece creare una nuova, si procede nel modo seguente: dal menù Site Actions, si sceglie l opzione Create Page. Si aprirà la seguente finestra di dialogo: Fig. 4.1 in cui vanno inserite le informazioni relative a titolo, descrizione e nome della pagina; una volta scritto il titolo, il nome viene automaticamente impostato allo stesso modo allo stesso valore, togliendo gli spazi; si raccomanda di non utilizzare caratteri speciali quali apostrofi, accenti o altro. 16

Molto importante è la scelta del Page Layout, che condizionerà la modalità di composizione della pagina; a parte casi particolari, in generale scegliere il Welcome Page with summary links. Cliccando il bottone Create, viene creata la pagina vuota, che verrà inserita nella cartella Pages del sottosito su cui si sta lavorando. A questo punto si può procedere con l editing della pagina come descritto al paragrafo precedente. E possibile vedere le caratteristiche della pagina seguendo il percorso: Site Actions -> View all site content -> Pages Posizionandosi con il mouse sulla pagina voluta, appare un menu, dal quale selezionare l opzione Edit Properties : Fig. 4.2 Si aprirà una finestra di dialogo contenente varie informazioni sulla pagina, che all atto della creazione sono state impostate con valori standard, e che qui possono poi essere cambiati. Per esempio troviamo le date di inizio e fine validità (scheduling start date / end date) e altri dati. In generale, queste informazioni vanno bene così come già preimpostate. 17

Fig. 4.3 NOTA BENE: Title è il titolo che appare sul sito, sul menù di navigazione di sinistra. A causa di un malfunzionamento del programma, può accadere che modificando la pagina venga perso il valore del Titolo, quindi sul menù apparirà il nome del file (nome.aspx). Quando questo accade, agire nel modo seguente: SiteActions -> View all site content -> Pages Dal menù a tendina della pagina scegliere Edit Properties e riempire nuovamente il campo Title. 18

5. Creazione di una nuova Web Part ( boxini ) Spesso accade di voler mostrare un elenco, ad esempio di documenti, all interno di una pagina; in questo caso può essere utile inserire un boxino, cioè una finestra in cui vengono elencati tutti insieme ed ordinatamente. Fig. 5.1 E importante ricordare che non è possibile vedere sul sito documenti presenti sul proprio computer, ma è necessario caricare preventivamente tutti i file che vogliamo far apparire nell elenco (tecnicamente: fare l upload). Questa operazione è stata spiegata al precedente paragrafo 2 Inserire un file/documento in un sito. 19

Supponendo di voler creare un boxino che mostri vari documenti, prima dovremo quindi caricarli tutti sul sito e successivamente procederemo alla creazione della Web Part che li visualizzi. Per creare un nuovo boxino, posizionarsi nella pagina sulla quale lo si vuole inserire, e selezionare l opzione Edit Page, mediante l apposito tasto o il menù SiteActions > EditPage. A questo punto ci si trova nella consueta pagina di modifica, in cui si può aggiungere testo, immagini o, appunto, aggiungere un boxino cliccando sulla scritta Add a Web Part evidenziata nell immagine seguente: Fig. 5.2 20

Si aprirà una finestra di dialogo in cui viene chiesto il tipo di Web part da creare, cioè cosa essa dovrà contenere. Supponiamo di voler creare un boxino che faccia vedere un elenco di documenti, quindi selezioniamo la Web Part Lista di Documenti ( Documents in Lists and Libraries ) e poi clicchiamo Add (fig. 5.3). Fig. 5.3 21

A questo punto la Web part è preparata, e si vede già il risultato nella pagina (figura 5.4): un boxino contenente tutti i files presenti nella cartella Documents del corrente sottosito, infatti nella creazione abbiamo selezionato: Web part di lista di Documents. Fig. 5.4 Questo primo risultato va affinato, allo scopo di migliorarne la leggibilità ed eventualmente filtrando i documenti da mostrare. Per prima cosa, miglioriamo il tipo di visualizzazione, modificando le caratteristiche della nostra Web part. Per farlo, selezionare dal menù Page > Modify Web Parts > NomeWebPart (fig. 5.5); 22

nell esempio la Web Part appena creata si chiama Documents come si nota in figura 5.4 nell intestazione blu del boxino. Le possibilità di parametrizzare le Web part sono molteplici; di seguito verranno illustrate le principali. Fig. 5.5 23

La Web Part verrà evidenziata da un contorno tratteggiato giallo, mentre in basso a sinistra apparirà una piccola finestra in cui è possibile modificare i parametri che determinano l aspetto del boxino (fig. 5.6). Fig. 5.6 24

Per prima cosa cliccare sulla dicitura Edit the current view : questa opzione serve per scegliere cosa mostrare ed in che modo; si apre una finestra suddivisa in varie parti: - Columns: è possibile scegliere cosa mostrare, selezionando l attributo mediante la colonna Display e in che ordine ( Position from left ); ad esempio, generalmente, si sceglie di non mostrare il Name del documento ma il Titolo (Title); - Sort: è possibile scegliere l ordine in cui mostrare i documenti, selezionando un ordinamento crescente/decrescente in base ad un attributo degli stessi; - Filter: è possibile filtrare i documenti, per non mostrare tutti quelli presenti nella lista Documents del sottosito corrente; il filtro è attivabile mediante condizione sugli attributi del documento (es: mostra solo quelli il cui nome contiene la parola elenco ); è possibile, su richiesta alla Redazione Web, attivare sulla lista di documenti un ulteriore attributo chiamato Categoria (Category) da utilizzarsi per classificare i documenti e poi filtrarli nelle Web Parts. Dopo aver effettuato tutte le scelte necessarie, confermare cliccando sul bottone OK. A questo punto si può fare ulteriori cambiamenti aprendo le altre parti della finestrina di fig. 5.6 (cliccare sul quadratino con il + ), ed in particolare: - Appearance: dà la possibilità di cambiare il titolo del Boxino: nell esempio, anziché Documents è possibile inserire un'altra dicitura, Elenco Documenti, inserendola nel campo etichettato con Title ; - Layout: è possibile attivare, mediante check, la scelta Hidden al fine di non mostrare la Web part; questo può essere utile ad esempio in fase di predisposizione, quando si sta costruendo il boxino per fare in modo che non appaia fino a che non è stato messo a punto. Nella figura seguente (fig. 5.7) si vede come appare la Web part dell esempio, conseguentemente alle seguenti impostazioni: 1. Edit the current view Columns: deselezionato l attributo Modified e selezionato Title inserendo la posizione 3; 2. Edit the current view Sort: selezionato ordinamento in base a Name ; 3. Appearance: sostituito il titolo documents con elenco documenti. 25

Fig. 5.7 26