Progetto Portale di Ateneo

Transcript

1 Alma Mater Studiorum Università di Bologna Progetto Portale di Ateneo Modello per pagine redazionali esterne al Sistema Portale DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it Materiale riservato e strettamente confidenziale

2 Indice dei contenuti 1. Introduzione Obiettivo del documento Struttura di Pagina e Navigazione (Conceptual Model) Gabbia Testata Brand di Ateneo Area di immagine/brand Separatore Menu di Navigazione Area contenuto di pagina Chiusura di pagina (footer)... 6 Appendice: disposizione dei contenuti all interno del codice Xhtml... 7 Introduzione... 7 Testata... 7 Navigazione... 8 Area contenuto di pagina... 9 Chiusura di pagina (footer) DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 2/11

3 1. Introduzione 1.1 Obiettivo del documento Il presente documento ha l obiettivo di definire e di far evolvere in maniera coerente e consistente gli elementi che compongono la struttura di pagine redazionali appartenenti ai siti del Network Unibo ma esterne alla piattaforma MS CMS. Questo documento costituisce una risorsa per tutti coloro che progettano o gestiscono le pagine redazionali esterne al MS CMS; all interno dei diversi paragrafi sono contenuti tutti gli elementi utili a progettare, interpretare e mantenere in maniera coerente e consistente le diverse componenti dell interfaccia grafica. DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 3/11

4 2. Struttura di Pagina e Navigazione 2.1 (Conceptual Model) Gabbia A, B, C Testata D Menu di Navigazione E Area contenuto di pagina F Chiusura di pagina (footer) Questa è la gabbia logica (conceptual model) della pagina. Di seguito vengono descritte le aree che la compongono. 2.2 Testata La testata è l elemento che caratterizza e differenzia i diversi siti dell Università, mantenendo però una forte immagine coordinata e facendoli percepire come un'unica struttura editoriale. Testata: Brand di Ateneo L area in alto a sinistra è utilizzata per visualizzare il brand di Ateneo o di Polo. Il logo contiene un link che porta alla relativa homepage. DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 4/11

5 Lo schema di associazione sito/brand è il seguente: sito di Ateneo brand Ateneo sito di Polo brand di Polo sito di Facoltà di Bologna brand Ateneo sito di Facoltà di Polo brand di Polo sito di Dipartimento di Ateneo brand di Ateneo sito di Dipartimento di Polo brand di Polo Area di immagine/brand Lo spazio centrale della testata visualizza il nome della struttura di appartenenza (nell esempio Discipline Storiche). L immagine di sfondo è la stessa utilizzata nel sito di riferimento della pagina (nell esempio il sito del Dipartimento di Discipline Storiche) Separatore La banda che divide la testata dalla parte sottostante (contenuto, navigazione e footer) si divide in due aree la prima delle quali riporta la cromia primaria che contraddistingue il sito di riferimento (Facoltà, Polo, Dipartimento, ecc). La seconda, che è adiacente al bordo inferiore della testata, è di colore grigio e può ospitare un menu di link orizzontali. DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 5/11

6 2.3 Menu di Navigazione Nella colonna di sinistra è prevista la navigazione persistente. I collegamenti in navigazione non devono ripetere l albero del sito di riferimento ma contenere solo quegli elementi essenziali alla pagina esterna (es. link al sito di riferimento, link a pagine che completino i contenuti della pagina). 2.4 Area contenuto di pagina L area centrale è lo spazio destinato ai contenuti (testi e immagini). Viene compilata con gli strumenti prescelti dal gestore della pagina (editor html, sistemi di pubblicazione non MS CMS). 2.5 Chiusura di pagina (footer) La spazio al fondo della pagina contiene le info legali e di copyright. DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 6/11

7 Appendice: disposizione dei contenuti all interno del codice Xhtml Introduzione Questo paragrafo fornisce le indicazioni necessarie per inserire o modificare i contenuti all interno della pagina esterna. È utile in particolare a coloro che trovandosi a svolgere questa attività non conoscano a fondo il linguaggio di markup che le compone. In particolare verrà descritta la parte del codice preposta a ospitare i contenuti, tralasciando le parti più prettamente strutturali: Testata e Chiusura di pagina (footer). Testata <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="it"> <head> <title>nuovo sito</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" href="main.css" type="text/css" media="screen" /> <link href="print.css" rel="stylesheet" media="print" type="text/css" /> </head> <body> <div id="esterno"> <div id="totalcontainer"> <div id="testatacontainer"> <div id="brandateneo"><a href=" alt="logo dell'università di Bologna - link alla home page del portale" src="images/logo.gif" /> </a></div> <div id="testatagrafica"><a name="top"><img alt="testata del Portale" src="images/testata.gif" /></a> </div> </div> <div id="container"> <div id="filetto"> <li class="primoitem"><a href=" <li><a href="facolta.htm">facoltà</a></li> <li><a href="dipartimento.htm">dipartimento</a></li> <li><a href="link.htm">link utili</a></li> <div id="subfilettosx"></div> </div> La parte evidenziata in neretto consente di inserire, nel filetto grigio adiacente al bordo inferiore della testata, una serie di link orizzontali. Ciascuna delle voci è inserita all interno degli elementi <li></li>. Navigazione <div id="menusx"> DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 7/11

8 <li class="menuon"><a href="#">pagina personale</a></li> <li><a href="profilo.htm">profilo</a></li> <li><a href="personale.htm">pagina personale</a></li> </div> Questa sezione contiene le voci presenti nel menu di navigazione di sinistra. Ciascuna delle voci è inserita all interno degli elementi <li></li>. Le voci si differenziano tra loro per la presenza di un elemento grafico (freccia rossa) e da un filetto grigio che sottolinea il testo e segnala la pagina in cui ci si trova a navigare. Questi elementi servono a facilitare l orientamento all interno delle pagine del sito e sono gli stessi utilizzati in tutte le pagine del Portale Unibo. Le classi presenti nel menusx relative al menu di primo livello, sono le seguenti: menuon: la classe menuon viene utilizzata quando si vuole segnalare il posizionamento al primo livello di navigazione <li class="menuon"><a href="">profilo</a></li> Si veda di seguito l utilizzo della classe menuon <li class="menuon"><a href="">profilo</a></li> <li> <a href="">sito Dipartimento</a></li> <li><a href="">pagina Personale</a></li> menu2livon: la classe Menu2livOn permette di inserire il solo elemento grafico freccia rossa. Tale elemento segnala il posizionamento al primo livello di navigazione e la presenza di un menu di secondo livello inferiore. Tale classe viene utilizzata insieme alle classi relative al menu di secondo livello. Si veda in seguito l esemplificazione dell utilizzo. <li class="menu2livon"><a href=" >Profilo</a></li> Le classi presenti nel menusx relative al menu di secondo livello, sono le seguenti: La classe sottomenu viene utilizzata per inserire un menu di secondo livello di dimensioni ridotte. DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 8/11

9 <li class="sottomenu"><a href="">prima voce</a></li> La classe sottomenuon viene utilizzata allo scopo di segnalare il posizionamento al secondo livello di navigazione. <li class="sottomenuon"><a href="">prima voce</a></li> Si veda di seguito l utilizzo integrato della classe Menu2livOn, sottomenu e sottomenuon <li><a href="">profilo</a></li> <li><a href="">sito Dipartimento</a></li> <li class="menu2livon"><a href="">pagina Personale</a></li> <li class="sottomenuon"><a href="">prima voce</a></li> <li class="sottomenu"><a href="">seconda voce</a></li> <li class="sottomenu"><a href="">terza voce</a></li> Area contenuto di pagina <div id="content"> <h1>titolo livello 1</h1> <img src="images/logo_foto.gif" alt="logo Foto" /> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <li>item 1</li> <li>item 2</li> <li>item 3</li> <h2>titolo livello 2</h2> <p> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 9/11

10 eirmod tempor <h3>titolo livello 3</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> Tutte gli elementi dell area contenuto di pagina deve essere inclusi all interno dell elemento <div id="content"> che non deve quindi essere eliminato o modificato. Nella sua versione completa l Area contenuto di pagina si compone di: 1. Titolo di 1 livello È il titolo della pagina ed è contenuto all interno degli elementi <h1> </h1>: <h1>titolo livello 1</h1> 2. Immagine È possiile inserire un immagine facendo attenzione che il nome corrisponda a quanto richiamato nel codice e che sia stata salvata nella cartella images del sito: <img src="images/logo_foto.gif" alt="logo Foto" /> 3. Corpo testo Il corpo del testo è contenuto all interno di blocchi delimitati dagli elementi <p> </p>. Ciascun blocco di testo all interno di tali elementi corrisponde a un paragrafo: <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 4. Elenco puntato Se necessario è possibile realizzare elenchi puntati. Il numero di voci corrisponde al numero di elementi <li> </li> presenti all interno del codice: <li>item 1</li> <li>item 2</li> <li>item 3</li> 5. Titolo di 2 livello, Titolo di 3 livello Se necessario è possibile utilizzare titolazioni di 2 o 3 livello a seconda delle necessità degli autori. Sono contenute all interno degli elementi <h2></h2> e <h3></h3>: <h2>titolo livello 2</h2> <h3>titolo livello 3</h3> DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 10/11

11 Colonna Destra La colonna destra prevede il box azioni, deputato a contenere il comando per stampare la pagina web. Se opportuno, è possibile inserire anche un ulteriore box allo scopo di dare evidenza a temi specifici o a risorse di approfondimento. <div id="coldx"> < div class="azioni"><p><img src="images/ico_print.gif" alt="stampa pagina" /><a href="javascript:window.print();">stampa</a> </div></div> <br/> <div class="box"> <h2>in evidenza</h2> <div class="dxboxbody"> <p><a href="">link</a><br/> Link a risorsa linkata</p> <p><a href="">link</a><br/> Link a risorsa linkata</p> </div> </div> </p> La parte evidenziata in neretto consente di inserire un ulteriore box contenente risorse di cui si vuole dare particolare evidenza. Chiusura di pagina (footer) <div id="footer"><div id="bordergrey"> </div> <span class="copyright"> Copyright <a href=" sulla Privacy</a><br/> ALMA MATER STUDIORUM - Università di Bologna - Via Zamboni, Bologna</span> <span class="backtotop"><a href="#top">inizio pagina</a></span> DIREZIONE E SVILUPPO DELLE ATTIVITA WEB TEL FAX lgarlaschelli@ammc.unibo.it 11/11