Progetto Portale di Ateneo

Alma Mater Studiorum
Università di Bologna
Progetto Portale di Ateneo
Modello per pagine redazionali esterne al Sistema
Portale
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051.2099267 – FAX 051.2099288 – [email protected]
Materiale riservato e strettamente confidenziale
Indice dei contenuti
1. Introduzione ....................................................................................................................................... 3
1.1 Obiettivo del documento .................................................................................................................... 3
2. Struttura di Pagina e Navigazione ................................................................................................. 4
2.1 (Conceptual Model) Gabbia............................................................................................................... 4
2.2 Testata .............................................................................................................................................. 4
2.2.1 Brand di Ateneo .............................................................................................................................. 4
2.2.2 Area di immagine/brand.................................................................................................................. 5
2.2.3 Separatore ...................................................................................................................................... 5
2.3 Menu di Navigazione ........................................................................................................................ 6
2.4 Area contenuto di pagina................................................................................................................... 6
2.5 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) ................................................................................................................. 11
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
2/11
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.
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
3/11
2. Struttura di Pagina e Navigazione
2.1 (Conceptual Model) Gabbia
A, B, C
D
E
F
Testata
Menu di Navigazione
Area contenuto di pagina
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:
2.2.1 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.
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
4/11
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
2.2.2 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).
2.2.3 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.
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
5/11
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.
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
6/11
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>nuovo sito</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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="http://www.unibo.it/"><img 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">
<ul>
<li class="primoItem"><a href="http://www.unibo.it/Portale/default.htm">Portale</a></li>
<li><a href="facolta.htm">Facolt&agrave;</a></li>
<li><a href="dipartimento.htm">Dipartimento</a></li>
<li><a href="link.htm">Link utili</a></li>
</ul>
<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">
<ul>
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
7/11
<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>
</ul>
</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
<ul>
<li class="menuOn"><a href="">Profilo</a></li>
<li> <a href="">Sito Dipartimento</a></li>
<li><a href="">Pagina Personale</a></li>
</ul>
•
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.
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
8/11
<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
<ul>
<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>
</ul>
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>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Titolo livello 2</h2>
<p>
Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
9/11
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:
<ul>
</ul>
<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>
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
10/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">&nbsp;</div>
<span class="copyright">©Copyright 2004-2006 -<a
href="http://www.unibo.it/Portale/Privacy.htm">Informativa sulla Privacy</a><br/>
ALMA MATER STUDIORUM - Università di Bologna - Via Zamboni, 33 - 40126 Bologna</span>
<span class="backToTop"><a href="#top">inizio pagina</a></span>
A L M A M A T E R S T U D I O R U M – U N I V E R S I T A’ D I B O L O G N A
DIREZIONE E SVILUPPO DELLE ATTIVITA’ WEB – TEL. 051 2099267 – FAX 051 2099288 – [email protected]
11/11