Presentazione dell'utilizzo della tecnologia ASP.NET all...

Autori: E. Mazzoni, D. Tentoni, G. Tumedei 1 - 16

Gruppo 0 Versione: 0.4c Data: 09-03-2015

Documentazione MasterPage

Presentazione dell'utilizzo della tecnologia ASP.NET all'interno del progettoGarden of Things



Sommario:

Indice generaleSommario:............................................................................................................................................2Introduzione:.........................................................................................................................................3

Cosa significa ASP.NET? A cosa serve?..........................................................................................3Il Web Server Microsoft, IIS............................................................................................................3Cos' la MasterPage?.......................................................................................................................3Perch si usa?...................................................................................................................................3Attributo runat, a cosa serve?..........................................................................................................3

Sguardo generale:.................................................................................................................................4Struttura...........................................................................................................................................4Sfondo..............................................................................................................................................4

Elementi costitutivi...............................................................................................................................5Header del file..................................................................................................................................6Body.................................................................................................................................................7

Menu.....................................................................................................................................................9Tecniche di visualizzazione.............................................................................................................9Struttura del menu..........................................................................................................................10

Footer..................................................................................................................................................14Cos' il Footer?..............................................................................................................................14A cosa serve?.................................................................................................................................14Struttura del Footer........................................................................................................................14

Responsive Web Design.....................................................................................................................15Cosa vuol dire?..............................................................................................................................15Perch importante?......................................................................................................................15Nel nostro caso, perch particolarmente utile?...........................................................................15Quali problematiche comporta?.....................................................................................................15Come possibile realizzarlo?........................................................................................................15

Il RWD nel progetto Garden...............................................................................................................16



Introduzione:

Cosa significa ASP.NET? A cosa serve?

un insieme di tecnologie commercializzate da Microsoft per lo sviluppo di Web Application eWeb 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 dalFramework.NET, eseguendole sul CLR (Common Language Runtime). I paradigmi diprogrammazione da usare sono numerossimi, infatti, i controlli utilizzati, spesso e volentieri simili aquelli gi proposti in Windows, possono essere gestori o scatenatori di eventi o semplicementeutilizzati per ricaricare la pagina per sfruttare i metodi POST e GET di HTTP. possibileprogrammare con una vastissima gamma di linguaggi, ma in questo caso stato scelto C#, gistudiato 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 delleapplicazioni scritte con tecnologia ASP.NET, come il comune rivale Apache. Il vantaggio che estremamente ottimizzato e precompila le pagine da servire al client, rendendo estremamenteveloce la loro esecuzione.

Cos' la MasterPage?

una pagina propria di ASP.NET che si comporta da contenitore per tutte le altre che compongonola web application. Al suo interno contiene due elementi, detti placeholder, che saranno sovrascrittidalle 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 paginarichiesta.

Perch si usa?

Perch permette di separare il concetto di impaginazione (cio il layout della pagina in generale, laMasterPage) e il contenuto (le diverse pagine che andranno a comporre la web application), e difornire 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 enon nel client. Questo obbligatorio per i blocchi di codice lato server.



Sguardo generale:

Struttura

La MasterPage strutturata in divisioni ognuna con un proprio ruolo. In alto si trova la barra deimenu, che permettono di navigare all'interno della web application. Appena sotto si troval'immagine di presentazione del sito, con annesso il logo del progetto. Al centro della pagina sitrova il segnaposto per il contenuto delle pagine come accennato in prefazione. Infine in fondoalla pagina si trova il footer.

Sfondo

Lo sfondo una fotografia con soggetto floreale scattata da uno studente che occupa tutta la pagina.



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 sianalizzer il ruolo che assume nell'insieme e i diversi stili di formattazione applicati. Si propone orala struttura della pagina in linguaggio html solamente con i tag relativi agli elementi pisignificativi, senza entrare per adesso nello specifico di ognuno, dato che verranno analizzati piavanti con una sezione per ognuno a loro dedicata.



Header del file

In questa zona della pagina vengono elencati tutti i link esterni alla pagina e al sito come fogli distile, 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.

Queste righe servono per dare informazioni aggiuntive al browser o al server. In questo caso leinformazioni passate sono la codifica del testo utilizzata (utf-8) e le scale di zoom da applicare allapagina, nel nostro caso preimpostata a 1 e l'utente pu aumentarla al massimo fino a 1 e al minimofino a 1, per cui non possibile zoommare in alcun senso.

Foglio di stile contenente le regole da applicare agli elementi della pagina che non sono il menu.

- Giardino ITTAll'interno dei tag title si inserisce il titolo della pagina, ma dato che si tratta di un sito dinamico sivuole visualizzare un titolo diverso per ogni pagina a seconda del contenuto. Ci realizzabiletramite VBScript. Basta la stringa che racchiusa tra le parentesi angolari per adattare il titolo aseconda della pagina richiesta dinamicamente senza preoccuparci di scrivere a mano il titolo perognuna: lo script si preoccupa di assemblare il titolo della pagina, esempio Dati Attuali, con -Giardino ITT, generando un'unica stringa Dati Attuali Giardino ITT.

ContentPlaceHolder: tra gli elementi fondamentali di ASP.NET, i segnaposto per porzioni di codicescritte sulla pagina che vogliamo visualizzare. In questo caso l'attributo id settato a head indica chein quella posizione della pagina deve essere inserito il codice contenuto nel tag . Il vantaggio di averlo inserito appena sopra al tag cipermette di sovrascrivere altri possibili metatag, script e regole di stile che si applicherannoesclusivamente alla pagina in questione.

Chiusura dell'elemento head, fine delle informazioni aggiuntive e inizio della pagina che effettivamente visualizzata dall'utente.



Body

In questa zona della pagina viene definita la struttura della pagina, non come viene visualizzata, ilche 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

Primo elemento che racchiude anche tutti gli altri un elemento form che viene usato peridentificare la web form che usiamo per interpretare gli script all'interno della pagina, che si vuolericordare ancora una volta che conterr tutte le altre, quindi permette di sfruttare le molteplicifunzionalit degli script in tutte le pagine, non vengono perci applicati stili particolari.

Divisioni contenenti la struttura del menu, qui non presente perch analizzata in seguito. Si vuol farnotare soltanto che, sia per il menu che contiene la barra di navigazione, sia per la stessa barra, nonvengono utilizzati i tag semantici specifici propri di HTML5 ( e ) perch si scelto dievitare problemi di retro compatibilit con browser obsoleti non aggiornati.

Divisione che ospita tutti i contenuti, eccetto menu e footer, utile per definire stili che tutti glielementi 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%;

All'interno di questa divisione invece viene definito che la larghezza massima del suo contenutodeve essere di 1024px, la larghezza minima deve essere di 400px e deve essere alta al 100%. Tuttoci per fare in modo che rimangano dei bordi ai lati per questione di estetica e funzionalitdell'interfaccia dell'applicazione. Le regole applicate sono: height: 100%; max-width: 1024px; min-width: 400px;

In questo elemento contenuto, come si evince dall'id, l'header della pagina, cio immagine



significativa e logo del progetto. Non vi sono applicate regole particolari tranne quella per cui sottoad una certa risoluzione dello schermo del dispositivo esso viene nascosto, perch risulterebbe diintralcio alla corretta visualizzazione dei contenuti pi importanti come i dati riguardanti la serra.

Questa sovrapposizione di divisioni permette di realizzare uno sfondo semitrasparente senza che icontenuti siano opachi. L'effetto realizzato con le regole background: rgba(255,255,255,0.8) nelcontentParent e opacity:1 nel figlio.

Ecco un altro elemento ContentPlaceHolder. La differenza che questo il segnaposto per ilcontenuto visibile della pagina assemblata.

Chiusura delle divisioni per i contenuti

Divisioni contenenti il footer, la prima per posizionarlo e la seconda per centrarlo, ma l'argomentoverr trattato meglio nell'apposita sezione.

Chiusura form e pagina.



MenuAffrontiamo ora il delicato tema del menu che ha coinvolto i nostri periti in macchinoseargomentazioni sulla migliore tecnica di visualizzazione e costruzione del menu per la webapplication.

Tecniche di visualizzazione

Si discusso molto per decidere se utilizzare blocchi, alberi di navigazione o menu a tendina. Diseguito 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 nonqualche animazione, per cui ci sembrata una scelta un po' spartana, da applicare ad un menu chedeve essere user-friendly.

Albero di navigazione

Con questa tecnica era necessario lasciare dello spazio laterale adibito ad una rappresentazione adalbero delle pagine del sito, organizzata per argomenti e categorie. Ci toglie spazio ai contenutidelle pagine ed poco adattabile sui device con diverse risoluzioni. L'argomento verr trattatomeglio 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 completezzadell'albero di navigazione. Passando con il mouse sopra alle voci a blocchi scende una tendina contutte le voci navigabili tramite quella particolare sezione del menu.



Struttura del menu

Ora verr analizzata la struttura del menu proponendo inizialmente uno sguardo generale su tutto ilcodice e successivamente elemento per elemento.

...

...

...



Questa prima divisione serve per fornire al menu, come sfondo, una barra lunga tutta la pagina dicolore bianco. Le regole applicate sono: width: 100%; height: 25px; background-color: white;position: fixed;

Questa invece serve per impostare la larghezza massima e minima ai contenuti del menu, perallinearli quindi al resto della pagina con larghezza massima e minima: max-width: 1024px; min-width: 400px;

Ecco l'inizio della struttura vera e propria. Un elenco di elementi non ordinato. Ci ci permette diaggiungere e rimuovere voci dal menu in maniera semplice e pulita senza complicate operazioni sumolti codici, basta aggiungere o togliere un elemento dall'elenco. Con le regole di stile vienesemplicemente settato un font cos da rendere leggibili i caratteri: font: 70%/1.5Verdena,Tahoma,sans-serif;

Sotto di essa si trova la struttura gerarchica basata su un annidamento di elenchi puntati. Glielementi del primo vengono visualizzati sulla barra, mentre quelli del secondo livello vengonovisualizzati solamente se se passa con il mouse sopra alla voce del menu ad essi associata.

Giardino ITT 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.

Dati Attuali Serra Questo secondo elemento di primo livello, quindi visualizzato, ci rimanda ad una pagina in cui sonoelencate tutte le pagine del sito in cui possibile trovare dati relativi alla situazione attuale dellaserra.

Di tutte le Grandezze e di tutte le centralineQuesto elemento, come altri che analizzeremo nei prossimi paragrafi, un elemento di secondolivello sottostante alla voce Dati Attuali Serra. Permette di visualizzare la pagina con tutti i datirelativi ad ogni Grandezza e ad ogni Centralina in una pratica tabella.

Di tutte le Grandezze di una specificata centralinaQuesto elemento permette di visualizzare la pagina con i dati attuali di tutte le Grandezze di unaspecifica centralina definita dall'utente.

Valori attuali per centralina e grandezzaQuesto elemento permette di visualizzare i valori attuali di una centralina e di una grandezza sceltadall'utente.

Ultimi valori per una centralina



Questo elemento permette di visualizzare gli ultimi valori raccolti di una Centralina sceltadall'utente.

Ultimi valori per una grandezzaQuesto elemento permette di visualizzare gli ultimi valori raccolti di una Grandezza sceltadall'utente.

Valori giornalieri per una grandezza e una centralinaQuesto elemento permette di visualizzare gli ultimi valori raccolti di una Centralina e di unaGrandezza scelta dall'utente.

Dati Riepilogativi Serra Questo elemento di primo livello permette di visualizzare una pagina in cui sono elencate tutte lesezioni del sito in cui possible trovare dati medi di un certo periodo che pu variare da unagiornata ad un anno.

Riepilogo giornalieroQuesto elemento permette di visualizzare i valori medi di una giornata scelta dall'utente.

Riepilogo mensileQuesto elemento permette di visualizzare i valori medi di un mese scelto dall'utente.

Valori orariQuesto elemento permette di visualizzare i valori medi di un'ora scelta dall'utente.

Valori significativi della settimanaQuesto elemento permette di visualizzare i valori significativi di una settimana scelta dall'utente.

Riepilogo settimanaleQuesto elemento permette di visualizzare i valori medi di una settimana scelta dall'utente.

Riepilogo annualeQuesto elemento permette di visualizzare i valori medi di un anno scelto dall'utente.

Informazioni Questo elemento di primo livello permette di visualizzare una schermata da cui possibile accederea informazioni riguardanti il progetto e servizi aggiuntivi.

ProgettoQuesto elemento permette di visualizzare alcune informazioni generali riguardo il progetto.

GalleriaQuesto elemento permette di visualizzare una galleria di immagini

ContattiQuesto elemento permette di visualizzare una pagina con recapiti telefonici e email da contattare



quando si verificano anomalie o guasti oppure per ricevere assistenza e informazioni aggiuntive.

Questi riferimenti a fogli di stile e script sono inseriti all'interno dell'elemento head della pagina econtengono tutte le regole di visualizzazione e gli script utilizzati per il menu. Verranno analizzatiquando saranno descritti gli elementi su cui sono applicati. Il contenuto di jquery-1.2.6.pack.js e dijquery.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 unafunzione, che al passaggio del mouse sopra ad un elemento li, elemento del menu, lo fa scorrere inbasso 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.



Footer

Cos' il Footer?

Il Footer un elemento presente in fondo alla pagina del sito. Nel nostro caso, essendo in fondo alcodice 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 icreatori del servizio. Nel nostro caso, vengono forniti l'anno di pubblicazione e l'anno attuale diservizio, per dare all'utente una dimostrazione dell'operato svolto dalla serra. Vengono inoltrevisualizzati i nomi delle scuole coinvolte nel progetto con relativi recapiti, pi qualche altrainformazione legale.

Struttura del Footer

- Giardino ITT

Nella prima divisione, analogamente al menu, la larghezza della barra del footer viene impostatatutta la pagina e viene colorata di bianco. Viene inoltre impostata una posizione fissa, in tal modonon 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 voltaanalogamente 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;



Responsive Web Design

Cosa vuol dire?

Il Responsive Web Design indica una tecnica per realizzare siti in grado di adattarsi graficamentealla risoluzione del dispositivo sul quale vengono visualizzati.

Perch importante?

Perch in futuro le pagine web verranno visualizzate maggiormente su dispositivi mobili chetalvolta hanno risoluzioni ridotte e risorse hardware inferiori, senza contare il noto problemaitaliano della disponibilit della rete, inoltre i dispositivi utilizzati da persone con difficolt fisicheavranno delle specifiche diverse, ad esempio densit di punti inferiore per permettere una maggiorprecisione 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 fuoricasa o fuori dalla serra. Inoltre, anche all'interno della serra stessa, se si ha bisogno di lavorare emuoversi spesso, ad esempio per controllare il colore delle foglie delle piante, portarsi appresso uncomputer potrebbe essere faticoso.

Quali problematiche comporta?

Quando la risoluzione inferiore, ovviamente non si potr continuare a visualizzare gli stessicontenuti come su un desktop. Principalmente deve cambiare la dimensione dell'immagine disfondo e la dimensione del font, alcuni elementi non essenziali possono venire nascosti ed altrinecessari possono venire ridimensionati e riposizionati. Si deve cercare il pi possibile diequilibrare 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 dellapagina: ad una risoluzione inferiore a 1024px dispone gli elementi in un modo, ad una risoluzioneinferiore a 800px li dispone in un altro.



Il RWD nel progetto Garden

Sommario:Introduzione:Cosa significa ASP.NET? A cosa serve?Il Web Server Microsoft, IISCos' la MasterPage?Perch si usa?Attributo runat, a cosa serve?

Sguardo generale:StrutturaSfondo

Elementi costitutiviHeader del fileBody

MenuTecniche di visualizzazioneStruttura del menu

FooterCos' il Footer?A cosa serve?Struttura del Footer

Responsive Web DesignCosa vuol dire?Perch importante?Nel nostro caso, perch particolarmente utile?Quali problematiche comporta?Come possibile realizzarlo?

Il RWD nel progetto Garden

Presentazione dell'utilizzo della tecnologia ASP.NET all...

Documents

Transcript of Presentazione dell'utilizzo della tecnologia ASP.NET all...