Presentazione dell`utilizzo della tecnologia ASP.NET all`interno del

Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
1 - 16
Data: 09-03-2015
Documentazione MasterPage
Presentazione dell'utilizzo della tecnologia ASP.NET all'interno del progetto
Garden of Things
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
2 - 16
Data: 09-03-2015
Sommario:
Indice generale
Sommario:............................................................................................................................................2
Introduzione:.........................................................................................................................................3
Cosa significa ASP.NET? A cosa serve?..........................................................................................3
Il Web Server Microsoft, IIS............................................................................................................3
Cos'è la MasterPage?.......................................................................................................................3
Perché si usa?...................................................................................................................................3
Attributo runat, a cosa serve?..........................................................................................................3
Sguardo generale:.................................................................................................................................4
Struttura...........................................................................................................................................4
Sfondo..............................................................................................................................................4
Elementi costitutivi...............................................................................................................................5
Header del file..................................................................................................................................6
Body.................................................................................................................................................7
Menu.....................................................................................................................................................9
Tecniche di visualizzazione.............................................................................................................9
Struttura del menu..........................................................................................................................10
Footer..................................................................................................................................................14
Cos'è il Footer?..............................................................................................................................14
A cosa serve?.................................................................................................................................14
Struttura del Footer........................................................................................................................14
Responsive Web Design.....................................................................................................................15
Cosa vuol dire?..............................................................................................................................15
Perché è importante?......................................................................................................................15
Nel nostro caso, perché è particolarmente utile?...........................................................................15
Quali problematiche comporta?.....................................................................................................15
Come è possibile realizzarlo?........................................................................................................15
Il RWD nel progetto Garden...............................................................................................................16
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
3 - 16
Data: 09-03-2015
Introduzione:
Cosa significa ASP.NET? A cosa serve?
È un insieme di tecnologie commercializzate da Microsoft per lo sviluppo di Web Application e
Web Service che è possibile eseguire su un IIS. La sigla ASP sta per Active Server Pages, mentre
.NET indica che è possibile compilare le applicazioni con un qualsiasi linguaggio supportato dal
Framework.NET, eseguendole sul CLR (Common Language Runtime). I paradigmi di
programmazione da usare sono numerossimi, infatti, i controlli utilizzati, spesso e volentieri simili a
quelli già proposti in Windows, possono essere gestori o scatenatori di eventi o semplicemente
utilizzati per ricaricare la pagina per sfruttare i metodi POST e GET di HTTP. È possibile
programmare con una vastissima gamma di linguaggi, ma in questo caso è stato scelto C#, già
studiato a scuola e linguaggio di punta di Microsoft.
Il Web Server Microsoft, IIS
IIS (Internet Information Service) è l'applicativo server web che permette l'esecuzione delle
applicazioni scritte con tecnologia ASP.NET, come il comune rivale Apache. Il vantaggio è che è
estremamente ottimizzato e precompila le pagine da servire al client, rendendo estremamente
veloce la loro esecuzione.
Cos'è la MasterPage?
È una pagina propria di ASP.NET che si comporta da contenitore per tutte le altre che compongono
la web application. Al suo interno contiene due elementi, detti placeholder, che saranno sovrascritti
dalle pagine dei contenuti veri e propri. Quando l'utente richiede la visualizzazione di una pagina,
ASP.NET combina il layout e le funzionalità della master page con il contenuto della pagina
richiesta.
Perché si usa?
Perchè permette di separare il concetto di impaginazione (cioè il layout della pagina in generale, la
“MasterPage”) e il contenuto (le diverse pagine che andranno a comporre la web application), e di
fornire a tutte le pagine del sito dei comportamenti comuni.
Attributo runat, a cosa serve?
L'attributo runat="server" specifica che il codice contenuto nell'elemento è eseguibile nel server e
non nel client. Questo è obbligatorio per i blocchi di codice lato server.
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
4 - 16
Data: 09-03-2015
Sguardo generale:
Struttura
La MasterPage è strutturata in divisioni ognuna con un proprio ruolo. In alto si trova la barra dei
menu, che permettono di navigare all'interno della web application. Appena sotto si trova
l'immagine di presentazione del sito, con annesso il logo del progetto. Al centro della pagina si
trova il “segnaposto” per il contenuto delle pagine come accennato in prefazione. Infine in fondo
alla pagina si trova il footer.
Sfondo
Lo sfondo è una fotografia con soggetto floreale scattata da uno studente che occupa tutta la pagina.
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
5 - 16
Data: 09-03-2015
Elementi costitutivi
Si vuole adesso approfondire la documentazione con riferimenti specifici ai singoli elementi,
offrendo inizialmente la struttura gerarchica della pagina. Per ogni elemento della pagina si
analizzerà il ruolo che assume nell'insieme e i diversi stili di formattazione applicati. Si propone ora
la struttura della pagina in linguaggio html solamente con i tag relativi agli elementi più
significativi, senza entrare per adesso nello specifico di ognuno, dato che verranno analizzati più
avanti con una sezione per ognuno a loro dedicata.
<head runat="server">
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="menuParent">
<div id="menu">
</div>
</div>
<div id="all">
<div id="main">
<div id="header">
</div>
<div id="contentParent">
<div id="content">
<asp:ContentPlaceHolder
id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
<div id="footParent">
<div id="foot">
</div>
</div>
</form>
</body>
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
6 - 16
Data: 09-03-2015
Header del file
<head runat="server">
In questa zona della pagina vengono elencati tutti i link esterni alla pagina e al sito come fogli di
stile, font esterni e script (codice da interpretare nel momento in cui la risorsa viene richiesta).
Tutte le regole di stile verranno analizzate assieme agli elementi ai quali sono applicate.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1"/>
Queste righe servono per dare informazioni aggiuntive al browser o al server. In questo caso le
informazioni passate sono la codifica del testo utilizzata (utf-8) e le scale di zoom da applicare alla
pagina, nel nostro caso è preimpostata a 1 e l'utente può aumentarla al massimo fino a 1 e al minimo
fino a 1, per cui non è possibile zoommare in alcun senso.
<link rel="stylesheet" href="master.css" type="text/css" />
Foglio di stile contenente le regole da applicare agli elementi della pagina che non sono il menu.
<title><%: Page.Title %> - Giardino ITT</title>
All'interno dei tag title si inserisce il titolo della pagina, ma dato che si tratta di un sito dinamico si
vuole visualizzare un titolo diverso per ogni pagina a seconda del contenuto. Ciò è realizzabile
tramite VBScript. Basta la stringa che è racchiusa tra le parentesi angolari per adattare il titolo a
seconda della pagina richiesta dinamicamente senza preoccuparci di scrivere a mano il titolo per
ognuna: lo script si preoccupa di assemblare il titolo della pagina, esempio “Dati Attuali”, con “ Giardino ITT, generando un'unica stringa “Dati Attuali – Giardino ITT”.
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
ContentPlaceHolder: tra gli elementi fondamentali di ASP.NET, i segnaposto per porzioni di codice
scritte sulla pagina che vogliamo visualizzare. In questo caso l'attributo id settato a head indica che
in quella posizione della pagina deve essere inserito il codice contenuto nel tag <asp:Content
ContentPlaceHolderID=”head”>. Il vantaggio di averlo inserito appena sopra al tag </head> ci
permette di sovrascrivere altri possibili metatag, script e regole di stile che si applicheranno
esclusivamente alla pagina in questione.
</head>
Chiusura dell'elemento head, fine delle informazioni aggiuntive e inizio della pagina che è
effettivamente visualizzata dall'utente.
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
7 - 16
Data: 09-03-2015
Body
<body>
In questa zona della pagina viene definita la struttura della pagina, non come viene visualizzata, il
che avviene utilizzando i fogli di stile.
È stato definito un semplice colore di sfondo, come accennato nello sguardo generale, più
precisamente il colore #46a33f, equivalente a
<form id="form1" runat="server">
Primo elemento che racchiude anche tutti gli altri è un elemento form che viene usato per
identificare la web form che usiamo per interpretare gli script all'interno della pagina, che si vuole
ricordare ancora una volta che conterrà tutte le altre, quindi permette di sfruttare le molteplici
funzionalità degli script in tutte le pagine, non vengono perciò applicati stili particolari.
<div id="menuParent">
<div id="menu">
<ul id="nav">
</ul>
</div>
</div>
Divisioni contenenti la struttura del menu, qui non presente perché analizzata in seguito. Si vuol far
notare soltanto che, sia per il menu che contiene la barra di navigazione, sia per la stessa barra, non
vengono utilizzati i tag semantici specifici propri di HTML5 (<menu> e <nav>) perchè si è scelto di
evitare problemi di retro compatibilità con browser obsoleti non aggiornati.
<div id="all">
Divisione che ospita tutti i contenuti, eccetto menu e footer, utile per definire stili che tutti gli
elementi devono condividere. In questo caso vengono definite l'altezza e la larghezza della pagina,
entrambe al 100% dell'altezza e della larghezza possibili. Le istruzioni da applicare necessarie sono:
width: 100%; e height: 100%;
<div id="main">
All'interno di questa divisione invece viene definito che la larghezza massima del suo contenuto
deve essere di 1024px, la larghezza minima deve essere di 400px e deve essere alta al 100%. Tutto
ciò per fare in modo che rimangano dei bordi ai lati per questione di estetica e funzionalità
dell'interfaccia dell'applicazione. Le regole applicate sono: height: 100%; max-width: 1024px; minwidth: 400px;
<div id="header">
</div>
In questo elemento è contenuto, come si evince dall'id, l'header della pagina, cioè immagine
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
8 - 16
Data: 09-03-2015
significativa e logo del progetto. Non vi sono applicate regole particolari tranne quella per cui sotto
ad una certa risoluzione dello schermo del dispositivo esso viene nascosto, perché risulterebbe di
intralcio alla corretta visualizzazione dei contenuti più importanti come i dati riguardanti la serra.
<div id="contentParent">
<div id="content">
Questa sovrapposizione di divisioni permette di realizzare uno sfondo semitrasparente senza che i
contenuti siano opachi. L'effetto è realizzato con le regole background: rgba(255,255,255,0.8) nel
contentParent e opacity:1 nel figlio.
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
Ecco un altro elemento ContentPlaceHolder. La differenza è che questo è il segnaposto per il
contenuto visibile della pagina assemblata.
</div>
</div>
</div>
</div>
Chiusura delle divisioni per i contenuti
<div id="footParent">
<div id="foot">
</div>
</div>
Divisioni contenenti il footer, la prima per posizionarlo e la seconda per centrarlo, ma l'argomento
verrà trattato meglio nell'apposita sezione.
</form>
</body>
</html>
Chiusura form e pagina.
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
9 - 16
Data: 09-03-2015
Menu
Affrontiamo ora il delicato tema del menu che ha coinvolto i nostri periti in macchinose
argomentazioni sulla migliore tecnica di visualizzazione e costruzione del menu per la web
application.
Tecniche di visualizzazione
Si è discusso molto per decidere se utilizzare blocchi, alberi di navigazione o menu a tendina. Di
seguito saranno analizzati nel dettaglio i pregi e difetti di questi elementi.
Blocchi
Con questa tecnica si ottengono degli elementi fissi nella pagina, senza effetti particolari se non
qualche animazione, per cui ci è sembrata una scelta un po' spartana, da applicare ad un menu che
deve essere user-friendly.
Albero di navigazione
Con questa tecnica era necessario lasciare dello spazio laterale adibito ad una rappresentazione ad
albero delle pagine del sito, organizzata per argomenti e categorie. Ciò toglie spazio ai contenuti
delle pagine ed è poco adattabile sui device con diverse risoluzioni. L'argomento verrà trattato
meglio nella sezione sul responsive design.
Tendina (con scorrimento a scomparsa)
Questa è la tecnica che si è deciso di utilizzare. La tendina a scomparsa è un buon mix di blocchi,
perché mostra solo degli elementi che richiamano alla sezione del sito che si intende navigare ed è
molto adattabile al cambiare della risoluzione del device, sempre mantenendo la completezza
dell'albero di navigazione. Passando con il mouse sopra alle voci a blocchi scende una tendina con
tutte le voci navigabili tramite quella particolare sezione del menu.
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
10 - 16
Data: 09-03-2015
Struttura del menu
Ora verrà analizzata la struttura del menu proponendo inizialmente uno sguardo generale su tutto il
codice e successivamente elemento per elemento.
<div id="menuParent">
<div id="menu">
<ul id="nav">
<li> </li>
<li>
<ul>
<li></li>
...
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
...
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
...
<li></li>
</ul>
</li>
</ul>
</div>
</div>
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
11 - 16
Data: 09-03-2015
<div id="menuParent">
Questa prima divisione serve per fornire al menu, come sfondo, una barra lunga tutta la pagina di
colore bianco. Le regole applicate sono: width: 100%; height: 25px; background-color: white;
position: fixed;
<div id="menu">
Questa invece serve per impostare la larghezza massima e minima ai contenuti del menu, per
allinearli quindi al resto della pagina con larghezza massima e minima: max-width: 1024px; minwidth: 400px;
<ul id="nav">
Ecco l'inizio della struttura vera e propria. Un elenco di elementi non ordinato. Ciò ci permette di
aggiungere e rimuovere voci dal menu in maniera semplice e pulita senza complicate operazioni su
molti codici, basta aggiungere o togliere un elemento dall'elenco. Con le regole di stile viene
semplicemente settato un font così da rendere leggibili i caratteri: font: 70%/1.5
Verdena,Tahoma,sans-serif;
Sotto di essa si trova la struttura gerarchica basata su un annidamento di elenchi puntati. Gli
elementi del primo vengono visualizzati sulla barra, mentre quelli del secondo livello vengono
visualizzati solamente se se passa con il mouse sopra alla voce del menu ad essi associata.
<a href="Default.aspx"><strong>Giardino ITT</strong></a>
Primo elemento, non contiene al suo interno un sotto elenco puntato perché il suo compito è
solamente quello di riportare il visitatore, ovunque esso si trovi, alla pagina iniziale.
<a href="actual_data.aspx"><strong>Dati Attuali Serra</strong></a>
Questo secondo elemento di primo livello, quindi visualizzato, ci rimanda ad una pagina in cui sono
elencate tutte le pagine del sito in cui è possibile trovare dati relativi alla situazione attuale della
serra.
<a href="#">Di tutte le Grandezze e di tutte le centraline</a>
Questo elemento, come altri che analizzeremo nei prossimi paragrafi, è un elemento di secondo
livello sottostante alla voce “Dati Attuali Serra”. Permette di visualizzare la pagina con tutti i dati
relativi ad ogni Grandezza e ad ogni Centralina in una pratica tabella.
<a href="#">Di tutte le Grandezze di una specificata centralina</a>
Questo elemento permette di visualizzare la pagina con i dati attuali di tutte le Grandezze di una
specifica centralina definita dall'utente.
<a href="#">Valori attuali per centralina e grandezza</a>
Questo elemento permette di visualizzare i valori attuali di una centralina e di una grandezza scelta
dall'utente.
<a href="page2.aspx">Ultimi valori per una centralina</a>
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
12 - 16
Data: 09-03-2015
Questo elemento permette di visualizzare gli ultimi valori raccolti di una Centralina scelta
dall'utente.
<a href="#">Ultimi valori per una grandezza</a>
Questo elemento permette di visualizzare gli ultimi valori raccolti di una Grandezza scelta
dall'utente.
<a href="#">Valori giornalieri per una grandezza e una centralina</a>
Questo elemento permette di visualizzare gli ultimi valori raccolti di una Centralina e di una
Grandezza scelta dall'utente.
<a href="summarized_data.aspx"><strong>Dati Riepilogativi Serra</strong></a>
Questo elemento di primo livello permette di visualizzare una pagina in cui sono elencate tutte le
sezioni del sito in cui è possible trovare dati medi di un certo periodo che può variare da una
giornata ad un anno.
<a href="#">Riepilogo giornaliero</a>
Questo elemento permette di visualizzare i valori medi di una giornata scelta dall'utente.
<a href="#">Riepilogo mensile</a>
Questo elemento permette di visualizzare i valori medi di un mese scelto dall'utente.
<a href="#">Valori orari</a>
Questo elemento permette di visualizzare i valori medi di un'ora scelta dall'utente.
<a href="#">Valori significativi della settimana</a>
Questo elemento permette di visualizzare i valori significativi di una settimana scelta dall'utente.
<a href="#">Riepilogo settimanale</a>
Questo elemento permette di visualizzare i valori medi di una settimana scelta dall'utente.
<a href="#">Riepilogo annuale</a>
Questo elemento permette di visualizzare i valori medi di un anno scelto dall'utente.
<a href="#"><strong>Informazioni</strong></a>
Questo elemento di primo livello permette di visualizzare una schermata da cui è possibile accedere
a informazioni riguardanti il progetto e servizi aggiuntivi.
<a href="#">Progetto</a>
Questo elemento permette di visualizzare alcune informazioni generali riguardo il progetto.
<a href="#">Galleria</a>
Questo elemento permette di visualizzare una galleria di immagini
<a href="#">Contatti</a>
Questo elemento permette di visualizzare una pagina con recapiti telefonici e email da contattare
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
13 - 16
Data: 09-03-2015
quando si verificano anomalie o guasti oppure per ricevere assistenza e informazioni aggiuntive.
<link rel="stylesheet" type="text/css" href="masterstyle/menu-dd.css"/>
<script type="text/javascript" src="masterstyle/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="masterstyle/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="masterstyle/jquery-ddi2.js"></script>
Questi riferimenti a fogli di stile e script sono inseriti all'interno dell'elemento head della pagina e
contengono tutte le regole di visualizzazione e gli script utilizzati per il menu. Verranno analizzati
quando saranno descritti gli elementi su cui sono applicati. Il contenuto di jquery-1.2.6.pack.js e di
jquery.hoverIntent.minified.js sono i framework utilizzati nello script contenuto in jquery-ddi2.js.
Lo script è:
$(function(){
$("#nav>li").hoverIntent(
function(){$("ul",this).slideDown("slow");},
function(){$("ul",this).css({left:"-1px"}).slideUp('fast')});
});
Senza entrare nel dettaglio del codice, si può leggere che nella prima riga di codice si definisce una
funzione, che al passaggio del mouse sopra ad un elemento li, elemento del menu, lo fa scorrere in
basso ad una velocità moderata per poi farlo scorrere in alto repentinamente fino a scomparire,
quando il mouse non si trova più sull'elenco sceso o sull'elemento del menu.
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
14 - 16
Data: 09-03-2015
Footer
Cos'è il Footer?
Il Footer è un elemento presente in fondo alla pagina del sito. Nel nostro caso, essendo in fondo al
codice della Pagina Master, esso verrà renderizzato in ogni sezione dell'applicazione.
A cosa serve?
Serve per fornire all'utente che visita il sito informazioni utili riguardo gli ultimi aggiornamenti e i
creatori del servizio. Nel nostro caso, vengono forniti l'anno di pubblicazione e l'anno attuale di
servizio, per dare all'utente una dimostrazione dell'operato svolto dalla serra. Vengono inoltre
visualizzati i nomi delle scuole coinvolte nel progetto con relativi recapiti, più qualche altra
informazione legale.
Struttura del Footer
<div id="footParent">
<div id="foot">
<strong><%: DateTime.Now.Year %> - Giardino ITT</strong>
</div>
</div>
Nella prima divisione, analogamente al menu, la larghezza della barra del footer viene impostata
tutta la pagina e viene colorata di bianco. Viene inoltre impostata una posizione fissa, in tal modo
non si muove allo scorrere della pagina. Le regole applicate sono le seguenti: width:100%; display:
table; background-color: white; position: fixed; left: 0; bottom: 0;
Nella seconda divisione viene impostata una larghezza massima ai contenuti, ancora una volta
analogamente al menu. Le regole di stile applicate sono: width: 100%; height: 25px; line-height:
25px; vertical-align: middle; text-align: center; font: 70%/1.5 Verdena,Tahoma,sans-serif; display:
table-cell;
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Versione: 0.4c
15 - 16
Data: 09-03-2015
Responsive Web Design
Cosa vuol dire?
Il Responsive Web Design indica una tecnica per realizzare siti in grado di adattarsi graficamente
alla risoluzione del dispositivo sul quale vengono visualizzati.
Perché è importante?
Perché in futuro le pagine web verranno visualizzate maggiormente su dispositivi mobili che
talvolta hanno risoluzioni ridotte e risorse hardware inferiori, senza contare il noto problema
italiano della disponibilità della rete, inoltre i dispositivi utilizzati da persone con difficoltà fisiche
avranno delle specifiche diverse, ad esempio densità di punti inferiore per permettere una maggior
precisione in fase di acquisizione di input.
Nel nostro caso, perché è particolarmente utile?
Perché il personale addetto alla serra può avere necessità di consultare l'applicazione anche fuori
casa o fuori dalla serra. Inoltre, anche all'interno della serra stessa, se si ha bisogno di lavorare e
muoversi spesso, ad esempio per controllare il colore delle foglie delle piante, portarsi appresso un
computer potrebbe essere faticoso.
Quali problematiche comporta?
Quando la risoluzione è inferiore, ovviamente non si potrà continuare a visualizzare gli stessi
contenuti come su un desktop. Principalmente deve cambiare la dimensione dell'immagine di
sfondo e la dimensione del font, alcuni elementi non essenziali possono venire nascosti ed altri
necessari possono venire ridimensionati e riposizionati. Si deve cercare il più possibile di
equilibrare il rapporto leggibilità/contenuti, rendere leggibili il numero maggiore di contenuti.
Come è possibile realizzarlo?
Vengono usati dei breakpoint, punti di rottura, che ad una certa risoluzione cambiano il layout della
pagina: ad una risoluzione inferiore a 1024px dispone gli elementi in un modo, ad una risoluzione
inferiore a 800px li dispone in un altro.
Autori: E. Mazzoni, D. Tentoni, G. Tumedei
Gruppo 0
Il RWD nel progetto Garden
Versione: 0.4c
16 - 16
Data: 09-03-2015