Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Candidato:
Fabio Fazio
Relatrice:
Professoressa M. Ribaudo
1
INDICE
INTRODUZIONE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
1. L'INTERFACCIA UTENTE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2. Il DATABASE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
5. CONCLUSIONI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
APPENDICE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
2
INTRODUZIONE
Questo progetto è stato realizzato allo scopo di disporre di un unico software in grado di contenere e
gestire le informazioni relative a corsi, lezioni, appelli e lauree in modo funzionale ed immediato.
L’unico supporto alla didattica disponibile era l’area statica Education del sito web del DISI
(http://www.disi.unige.it/index.php?education/education). Questa area conteneva esclusivamente
informazioni pubbliche statiche e non era predisposta per la gestione dinamica del corso di laurea.
Da qui l’esigenza di separare l’area didattica da sito del DISI, sia per distinguere concetti ortogonali
tra loro come il Corso di laurea e il Dipartimento, sia per predisporre una piattaforma dinamica in
grado di gestire le informazioni riservate e quelle pubbliche.
Il nome scelto per questa piattaforma di rete è DIDISI – Didattica al DISI (http://dida.disi.unige.it)
ed offre due modalità di accesso:
• Un'area riservata ai docenti, dedicata alla modifica di tutti i dati relativi a corsi ed appelli di cui il
docente è responsabile.
• Un'area riservata agli studenti, dove poter prenotare e disdire le prenotazioni agli appelli.
La progettazione dei servizi è stata pensata per garantire diversi requisiti di qualità tra i quali
ricordiamo:
3
Transport Protocol Secure).
• Il primo capitolo verterà sull'interfaccia utente del sito, soffermandosi sia sull'area pubblica, sia
sulle funzionalità e operazioni dell'area privata per studenti e docenti.
• Il secondo capitolo è dedicato ai database utilizzati da DIDISI per gestire il corso di studi e la
struttura dinamica dell'area pubblica.
• Il quinto capitolo, infine, valuta il progetto nella sua completezza, argomentandone i pregi e i
difetti, nonché le possibili future evoluzioni del servizio online di management didattico.
4
CAPITOLO 1
L'INTERFACCIA UTENTE
La progettazione grafica delle pagine pubbliche e della struttura di navigazione, sono state
liberamente ispirate alla vecchia area Education, distinguendosi rispettivamente per la scelta
cromatica di alcuni elementi grafici, e per la presenza di due aree private.
Questa scelta è motivata dalla necessità di offrire un'applicazione web di rapida comprensione ed
utilizzo, per tutti coloro che avevano già ampia dimestichezza con il vecchio servizio.
5
• La Title Bar o Header (*) (in alto): contenente il logo, una immagine evocativa del corso di
studi e alcuni link utili (tra cui anche il ritorno alla homepage).
• Le Breadcrumbs o Molliche di Pane (in alto sotto l'header): collegamenti ipertestuali dinamici
che tengono traccia del percorso di navigazione nella struttura gerarchica del sito.
Questi link offrono all'utente la possibilità di ripercorrere a ritroso il cammino, dalla pagina
corrente alla homepage.
• Il Main Menu o Menu di Navigazione (a sinistra): progettato per essere sempre aperto sulla
sezione che l'utente sta consultando, in modo da facilitare la navigabilità su pagine tra loro
correlate.
• Il Footer (*) (in basso): barra di chiusura della pagina contenente link alle aree private e ai
credits.
(*) = Visibili anche nelle aree private ma con alcune differenze ai collegamenti ipertestuali.
L'area riservata agli utenti offre sia funzionalità gestionali del profilo, sia comandi per la
prenotazione agli appelli.
• Registrazione
Seguono due screenshot (Figura 3 e Figura 4) che presentano i form di registrazione studente.
6
Figura 3: Modulo di registrazione DISI
Dal 1 ottobre 2005 la procedura di registrazione si è distinta in due modalità (utenti DISI e utenti
Guest), per permettere la registrazione anche ai neo-iscritti privi della vecchia login di
7
laboratorio.
• Recupero Password
In caso di smarrimento della password è possibile ottenerne una nuova come descritto in Figura
5.
L'invio di una e-mail con la nuova password è attivo solo per gli utenti con la login di
laboratorio, mentre per i nuovi iscritti il messaggio di posta non è attivo.
• Modifica Password
I comandi di modifica della password sono presentati in Figura 6.
8
Questa funzionalità è molto pericolosa perché può compromettere l'accessibilità al servizio ed
esporre l'utente ad un “furto” di identità.
Per assicurarsi che la nuova password sia digitata correttamente e per evitare che un soggetto non
autorizzato modifichi la password a proprio piacimento, diventa necessaria la conferma della
nuova password e la verifica della vecchia.
• Visualizzazione dell'elenco degli appelli
Una tabella presenta tutti gli appelli di ogni corso per ordine alfabetico, specificando quali
appelli sono ancora disponibili e quali già scaduti (Figura 7).
9
rispettivamente il nome del corso e lo specifico appello di interesse.
In qualunque momento durante questo processo, sarà possibile tornare alla pagina precedente e/o
alla homepage studenti, senza lasciare traccia di iscrizioni parziali e/o errate.
• Visualizzazione (e cancellazione) degli appelli prenotati
Per semplificare la verifica e cancellazione delle iscrizioni agli esami, è disponibile una tabella
10
(Figura 10) contenente solo gli appelli a cui lo studente è iscritto.
Per sicurezza la cancellazione richiederà una conferma utilizzando una finestra pop up javascript.
L'area riservata ai docenti offre le stesse funzionalità gestionali dei dati personali (recupero e
modifica della password), riservando però unicamente agli amministratori, gli strumenti per
l'aggiunta, la cancellazione e la modifica dei profili, evitando che operazioni delicate come
l'inserimento di un nuovo docente, siano pubbliche.
Il menu principale dei comandi è presentato in Figura 11.
11
Figura 11: Homepage docenti
Sono presenti inoltre due distinti menu gestionali (Figura 12 e 13) dedicati rispettivamente agli
appelli e ai corsi, in modo da raccogliere e organizzare tutti i comandi.
12
Figura 12: Menu gestionale degli appelli
13
Figura 13: Menu gestionale dei corsi
Entrambi i menu presentano una grafica semplice e compatta, facilitano la navigabilità del sito
fornendo collegamenti alla homepage dell'area docenti (menu principale) e permettono l'immediato
logout ad operazioni ultimate.
Per scongiurare il rischio di sovrapposizione degli appelli, si è scelto di dare buona visibilità ad una
tabella che tenga conto delle date di registrazione degli esami come ordine di precedenza.
14
CAPITOLO 2
IL DATABASE
2.1 DIDISI
15
Lo schema logico risultante dalla traduzione dello schema precedente è il seguente.
Nello schema, gli attributi sottolineati costituiscono la chiave primaria per quella relazione.
• Menu
(`id_menu`, `posizione`, `argomento`, `note`, `outlink`, `link`)
• Menuitem
(`id_menuitem`, `posizione`, `id_menu`, `elemento`, `note2`, `outlink2`, `link2`)
• News
(`id_news`, `titolo`, `anteprima`, `argomento`, `scadenza`, `url_nome`, `url`, `email_nome`,
`email`)
2.2 DIDATTICA
16
Lo schema logico risultante dalla traduzione dello schema precedente è il seguente.
Nello schema, gli attributi sottolineati costituiscono la chiave primaria per quella relazione.
• Appelli
(`id_appello`, `id_corso`, `id_docente`, `data`, `scadenza`, `appuntamento`, `ora`, `aula`, `tipo`,
`note`, `online`, `time`)
• Corsi
(`id_corso`, `codice`, `id_docente`, `titolo`, `crediti`, `semestre`, `anno`, `moodle`, `url`, `obiettivi`,
`sigla`, `laboratorio`, `inizio_lezioni`, `fine_lezioni`)
• Dipartimenti
(`id_dipartimento`, `titolo`, `abbreviazione`, `url`, `indirizzo`)
• Docenti
( `id_docente`, `nome`, `cognome`, `id_dipartimento`, `homepage`, `email`, `telefono`, `password`)
• Esercitatori
(`id_corso`, `id_docente`)
• Iscritti
(`id_studente`, `id_appello`, `data`)
• Studenti
(`id_studente`, `nome`, `cognome`, `matricola`, `password`, `email`, `time`)
17
CAPITOLO 3
APPROFONDIMENTO: LA STRUTTURA DINAMICA
Questo capitolo è da intendersi solamente come una traccia per agevolare la lettura e comprensione
del codice PHP dedicato alla generazione dinamica delle pagine pubbliche e al Menu di
Navigazione.
La necessità di questo approfondimento è motivata dall'esigenza degli attuali amministratori di
poter consultare una breve documentazione per eventuali aggiunte e/o modifiche future.
La generazione dinamica delle pagine HTML nell'area pubblica è basata sul riconoscimento di una
stringa passata come parametro GET al file principale index.php (esempio:
http://dida.disi.unige.it/didattica/index.php? <substring0>/<substrung1>).
Il codice di index.php insieme al file header.php (che contiene l' intestazione di ogni pagina, la Title
Bar e le Breadcrumbs) gestisce la stringa verificando l'esistenza di una pagina ad essa associata.
Il valore della stringa può essere di tre tipi diversi: nullo, non nullo o composito da due sotto-
stringhe divise dal separatore “/”. Ognuno di questi casi viene gestito separatamente includendo il
file appropriato al tipo di richiesta (come vedremo più chiaramente nel capitolo 4).
Graficamente la struttura di ogni pagina pubblica è organizzata come nell'esempio di Figura 16.
Gli elementi che la compongono sono header.php, menusx.php, footer.php e uno specifico file che
chiameremo content-XXX.php (esempi: content-help.php, content-credits.php, ecc..).
18
Figura 16: Struttura di una pagina pubblica
Come già accennato nel capitolo 1, il Menu di Navigazione rappresenta un potente strumento a
disposizione degli utenti per facilitare la navigabilità e garantire la massima efficienza negli
spostamenti ipertestuali su pagine tra loro correlate.
Per realizzare un codice compatto che permetta ad ogni pagina pubblica di visualizzare il menu
aperto sulla sezione che l'utente sta consultando, si è scelto un approccio dinamico.
Il codice del file menusx.php (incluso da quello di header.php) genera infatti una tabella mediante
interrogazioni ricorsive al database "didisi", in modo da visualizzare tutti i sotto-argomenti del
menu all'interno del quale l'utente sta navigando (questo è possibile grazie alle variabili $myargv[0]
e $myargv[1] come vedremo nel prossimo successivo).
19
CAPITOLO 4
APPROFONDIMENTO: IL CODICE DINAMICO
Questo capitolo è da intendersi solamente come una traccia per agevolare la lettura e comprensione
del codice PHP che si occupa della generazione dinamica delle pagine pubbliche e del Menu di
Navigazione.
La necessità di questo approfondimento è motivata dall'esigenza degli attuali amministratori di
poter consultare una breve documentazione per eventuali aggiunte e/o modifiche future.
Di seguito verrà presentato sia il codice commentato che gestisce la generazione dinamica di pagine
pubbliche (index.php), sia quello che si occupa del Menu di Navigazione (menusx.php).
Dopo aver caricato alcune variabili di dominio dal file domain.php (riga 2), il codice procede
verificando quale metodo sia stato utilizzato per passare la stringa che identifica la pagina da
visualizzare e la memorizza nella variabile $myargv (righe 4-7).
1. <?php
2. include("share/domain.php");
3.
4. if ($page=="")
5. $page = $argv[0];
6. $myargv = explode("&", $page);
7. $myargv = explode("/", $myargv[0]);
header.php viene subito caricato (riga 8) e si verifica subito il contenuto della stringa (riga 10).
Nel caso questa sia vuota, index.php carica la homepage dell'area pubblica (da riga 12 a riga 17),
altrimenti procede distinguendo altri due casi:
la stringa è composta da due sotto-stringhe separata dal simbolo “/” (da riga 21 a riga 28)
la stringa contiene un unico valore (da riga 30 a riga 35)
8. include("inc/header.php");
9.
10. if ((strcmp($myargv[0], "")==0))
11.
12. {
20
13. if (file_exists("content-home.php"))
14. include("content-home.php");
15. else
16. include("content-notfound.php");
17. }
18. else
19. {
20. if ((strcmp($myargv[1], "")!=0))
Quando la stringa contene due sotto-stringe, significa che la pagina richiesta appartiene al Menu di
Navigazione.
Per verificare che nel menu esista un menuitem associato, il codice di header.php che accede al
database "didisi" per la generazione delle molliche di pane, memorizza la variabile di controllo
$content (riga 24).
Se la pagina appartiene al menu ma non è presente sul server, viene caricato il file di errore
content-notready.php (riga 26), altrimenti si utilizza content-notfound.php (riga 28).
21. {
22. if (file_exists("$myargv[0]/content-
$myargv[1].php"))
23. include("$myargv[0]/content-
$myargv[1].php");
24. elseif ($content=="ondb")
25. include("content-notready.php");
26. else
27. include("content-notfound.php");
28. }
29. else
Quando la stringa contiene un unico valore, significa che la pagina richiesta non appartiene al Menu
di Navigazione, quindi si procede senza l'utilizzo di alcuna variabile di controllo e l' unico
messaggio di errore utilizzato appartiene al file content-notfound.php (riga 34).
30. {
31. if(file_exists("content-$myargv[0].php"))
32. include("content-$myargv[0].php");
33. else
34. include("content-notfound.php");
35. }
36. }
37.
38. include("inc/footer.php");
39. ?>
In chiusura di pagina la chiamata a footer.php (riga 38) è essenziale sia per una corretta
visualizzazione della pagina che per la chiusura di tutte le basi di dati utilizzate.
21
Per la visualizzazione del Menu di Navigazione, il database “didisi” e le due variabili $myargv[0] e
$myargv[1 occupano un ruolo essenziale.
Nel dettaglio, la visualizzazione del menu dovrà tener conto del dominio di appartenenza della
pagina corrente (determinabile appunto grazie a $myargv), in modo da visualizzare tutti i link alle
pagine correlate (da riga 12 a riga 90) e mantenere chiusi gli altri elenchi di collegamenti
ipertestuali (da riga 92 a riga 104).
22
title="<?echo $row2[note2]?>" id="menusx2"><?echo
$row2[elemento]?></a></td>
40. </tr>
41. <?
42. $row2=mysql_fetch_array($res2);
43.
44. for($counter--; $counter>1; $counter--)
45. {
46. ?>
47. <tr>
48. <td class="menusx2"><a <?if
($row2[outlink2]) echo "target=\"nuovo\" href=\"".$row2[outlink2]."\"";
else echo
"href=\"".$path."/index.php?".$row[link]."/".$row2[link2]."\"";?>
title="<?echo $row2[note2]?>" id="menusx2"><?echo
$row2[elemento]?></a></td>
49. </tr>
50. <?
51. $row2=mysql_fetch_array($res2);
52. }
53. ?>
54. <tr>
55. <td class="menusx2"><a <?if
($row2[outlink2]) echo "target=\"nuovo\" href=\"".$row2[outlink2]."\"";
else echo
"href=\"".$path."/index.php?".$row[link]."/".$row2[link2]."\"";?>
title="<?echo $row2[note2]?>" id="menusx2"><?echo
$row2[elemento]?></a></td>
56. <td rowspan="20"><img src="<?echo
$path?>/img/spacer.gif" width="2" height="1" alt="" border="0"/></td>
57. </tr>
58. </table>
59. </td>
60. </tr>
61.
62. <tr>
63. <td class="bgverde"><img src="<?echo
$path?>/img/spacer.gif" width="155" height="1" alt="" border="0"/></td>
64. </tr>
65. <?
66. }
67. elseif ($counter==1)
68. {
69.
70. $row2=mysql_fetch_array($res2);
71. ?>
72. <tr>
73. <td>
74. <table border="0" cellpadding="2"
cellspacing="0">
75. <tr>
76. <td rowspan="20"><img src="<?echo
$path?>/img/spacer.gif" width="10" height="1" alt="" border="0"/></td>
77. <td class="menusx2"><a <?if
($row2[outlink2]) echo "target=\"nuovo\" href=\"".$row2[outlink2]."\"";
else echo
"href=\"".$path."/index.php?".$row[link]."/".$row2[link2]."\"";?>
title="<?echo $row2[note2]?>" id="menusx2"><?echo
$row2[elemento]?></a></td>
78. <td rowspan="20"><img src="<?echo
$path?>/img/spacer.gif" width="2" height="1" alt="" border="0"/></td>
23
79. </tr>
80.
81. </table>
82. </tr>
83.
84. <tr>
85. <td class="bgverde"><img src="<?echo
$path?>/img/spacer.gif" width="155" height="1" alt="" border="0"/></td>
86. </tr>
87.
88. <?
89. }
90. }
91. else
92. {
93. ?>
94. <tr>
95. <td class="menusx" height="19"
onMouseOver="javascript:this.style.background='#eeeeee'"
onMouseOut="javascript:this.style.background='#ffffff'">
96. <a <?if ($row[outlink]) echo
"target=\"nuovo\" href=\"".$row[outlink]."\""; else echo
"href=\"".$path."/index.php?".$row[link]."/".$row[link]."\"";?>
title="<?echo $row[note]?>" id="menusx"> <?echo $row[argomento]?></a>
97. </td>
98. </tr>
99.
100. <tr>
101. <td class="bgverde"><img src="<?echo
$path?>/img/spacer.gif" width="155" height="1" alt="" border="0"/></td>
102. </tr>
103. <?
104. }
105. }
106. ?>
107.
108. <tr>
109. <td align="center">
110. <br/><br/>
111. <br/><br/>
112. <a target="nuovo"
href="http://crui.nestor.uniroma2.it/certificazione/beta/"><img
src="<?echo $path?>/img/bollinoblu.jpg" alt="" border="0"/></a>
113. <br/><br/>
114.
115. </td>
116. </tr>
117. </table>
24
CAPITOLO 5
CONCLUSIONI
Questo sistema automatizzato di segreteria didattica ha dimostrato una immediata efficacia nello
sveltire quelle operazioni che in gran parte erano ancora gestite mediante posta elettronica.
La modularità e la struttura dinamica hanno inoltre permesso di facilitare le operazioni di
aggiornamenti che nel tempo si sono rese necessarie.
Per esigenze di adeguamento alle regole di accessibilità ad utenti portatori di handicap, in futuro si
prevede che la struttura subirà una modifica sostanziale.
Tra le possibili soluzioni per il nuovo sito della didattica, attualmente la più funzionale prevede
l'utilizzo di un portale CMS (Content Management System) sistema di software organizzativo
realizzato per supportare la creazione collaborativa di documenti, utilizzato sempre più
frequentemente per la progettazione di portali web dinamici.
25
APPENDICE
LA MAPPA DEL SITO DIDISI
Di seguito presenterò un elenco esaustivo di tutti i contenuti del sito DIDISI accessibili sia dall'area
pubblica, sia da quella riservata ai docenti e agli studenti.
La suddivisione per categorie nell'area pubblica ricalca in parte la struttura del Menu di
Navigazione.
Area pubblica
Homepage
Informazioni Generali
Sede e contatti
Dove, come, quando
Segreterie studenti
Scadenze importanti
Modulistica
F.A.Q.
Commissioni
Laurea
Scadenze importanti
26
Regole prova finale
Proposte prova finale
Date delle lauree
Elenco dei laureandi
Laurea specialistica
Scadenze importanti
Regole per la tesi
Proposte di tesi
Date delle lauree
Elenco dei laureandi
Laboratori
Regolamento
Login individuale
Quote stampa
Orario esercitazioni
Prenotazione sw1-sw2
Software installati
Segnalazione guasti
Studiare all´estero
Convenzioni Erasmus
Anni precedenti
A.A. 2004/2005 (aggiunta successivamente)
A.A. 2005/2006 (aggiunta successivamente)
Link utili
Help
Credits
27
Area privata: Studenti
Pagina di autenticazione
Modulo di registrazione studenti
Modulo di registrazione utenti Guest (aggiunta successivamente)
Modulo di recupero password
Homepage *
Pagina di autenticazione
Modulo di recupero password
Homepage *
Pagina di gestione dei corsi *
Modulo di aggiunta di informazioni di un corso *
Modulo di modifica / cancellazione delle informazioni di un corso *
28