Il web cambia con ASP.NET

ASP.NET (chiamato in una prima versione ASP+) è più di un semplice upgrade di Active Server Pages, la soluzione Microsoft per la realizzazione di siti dinamici.

Chi ha esperienza di sviluppo con questa tecnologia ne ha già ben chiaro i vantaggi e le lacune. A fronte di una elevata semplicità nella stesura del codice (un programmatore Visual Basic è produttivo con ASP dopo pochi giorni), esiste una difficoltà quasi cronica nella correzione degli errori (debugging). I documenti ASP, inoltre, sono tutt’altro che prestazionali, poiché richiedono l’esecuzione di un interprete di comando ad ogni accesso.

Microsoft ha lavorato tre anni per questa nuova versione, riscrivendo completamente il codice originario di ASP: il risultato è una piattaforma di lavoro più efficiente e decisamente più orientata agli oggetti, tanto che in ASP.NET i tag possono essere generati lato server piuttosto che lato client.

Le Web Forms

Fino ad oggi, chi ha intrapreso la programmazione Web migrando da un ambiente di sviluppo tradizionale qual è Visual Basic, ha dovuto rinunciare a malincuore a molte opportunità.

Come prima cosa, i tag HTML non sono dei veri controlli, e come tali non dispongono di un puro modello di programmazione ad oggetti. Inoltre, il codice HTML è molto spesso “amalgamato” con il contenuto della pagina: una modifica alla struttura del sito comporta anche una ristrutturazione dell’informazione.

Per ridurre questi effetti collaterali, Microsoft ha introdotto in ASP.NET una libreria di oggetti, chiamata Web Forms, con lo scopo di agevolare e rendere più chiara la stesura di codice all’interno di una pagina dinamica. L’idea è molto semplice. E’ possibile specificare un tag nella forma:

<asp:textBox id="txtName" runat="server" Text="testo">
</asp:TextBox>

Quando il processore ASP.NET incontra il tag, lo trasforma nel corrispettivo HTML. Il vantaggio è che questi controlli dispongono di un certo numero di proprietà, metodi ed eventi che usano una nomenclatura coerente e modificabili da codice.

Inoltre, nel generare la pagina, il processore ASP.NET è in grado di riconoscere il browser dell’utente: può di conseguenza generare una pagina HTML che ne utilizzi solo le caratteristiche supportate.

Come ulteriore vantaggio, con questo modello ad oggetti è notevolmente semplificata la convalida dei dati provenienti dall’input degli utenti, che è così gestita sia lato client sia lato server. Con le Web Forms è anche possibile “simulare” il mantenimento di stato tra le pagine, con le cosiddette “postback form”.

Aumentano i linguaggi di sviluppo

La presenza del .Net Common Language Runtime consente allo sviluppatore l’utilizzo di una platea teoricamente infinita di linguaggi per la scrittura di pagine ASP.NET. Usare un linguaggio od un altro risulta indifferente, visto che si usano le classi presenti nelle librerie .NET. In questo modo è possibile adottare Visual Basic, C# oppure ad esempio Fortran: si userà il linguaggio con il quale si è più produttivi o quello che rappresenta lo standard aziendale. Il Common Language Runtime si comporta quindi da strato di interfaccia tra la complessità del sistema operativo (e delle sue API – Application Program Interfaces) e il linguaggio.

Con ASP.NET Microsoft da inoltre l’addio a Visual Basic Script, che è sostituito da un pieno supporto per Visual Basic, un suo sovrainsieme. Come conseguenza, Visual Studio .NET (il successore di Visual Studio 6) non contiene due ambienti di programmazione, uno per Visual Basic e uno per la stesura di codice ASP (Visual Interdev), ma un solo strumento integrato di sviluppo per tutti i linguaggi.

Le pagine ASP.NET sono compilate

L’unica soluzione all’inefficienza del codice interpretato è la sua compilazione. Una pagina ASP.NET è creata alla pari di una pagina ASP: quando è richiesta dall’utente viene processata dal parser di linguaggio.

A differenza di ASP, però, dove la pagina è successivamente interpretata, con ASP.NET un compilatore si preoccupa della sua trasformazione in codice binario. Questa operazione è eseguita al primo accesso della pagina, oppure quando lo sviluppatore ne avrà alterato il contenuto. Tutti gli altri utenti della pagina ne riceveranno la versione già compilata, diminuendo di gran lunga i tempi di risposta, ma soprattutto il carico elaborativo. In caso di riavvio del server, la pagina non deve essere nuovamente compilata, giacché è memorizzata in una cache privata.

Il nuovo concetto di sessione

Le sessioni di ASP sono un comodo strumento per guidare l’utente tra più pagine di un sito e portare con sè le informazioni inserite. Si pensi ad un sito di commercio elettronico dove l’utente può in ogni momento verificare il contenuto del carrello e provvedere al pagamento. Sfortunatamente, le sessioni ASP richiedono l’utilizzo di cookie per il funzionamento. Non solo: le sessioni non possono essere utilizzate in realtà di tipo “Web Farm”, dove cioè più server si suddividono il carico elaborativo.

Con ASP.NET l’oggetto sessione è eseguito al di fuori del processo che gestisce l’applicazione Web: il risultato è che è possibile utilizzare le sessioni tra più server, e memorizzarne il contenuto in fonti di dati esterne, quali un file di testo oppure un server SQL. In caso di arresto critico del server, inoltre, la sessione può essere mantenuta e ristabilita. Un’ulteriore miglioria consente la fruizione delle sessioni anche a browser che non gestiscono i cookies, aggiungendo le informazioni come Querystring nell’URL.

Cache

Con ASP.NET è possibile costruire una cache per velocizzare la comunicazione con il browser e ridurre il consumo di risorse da parte del server. In base ad un discriminante la pagina è memorizzata in un’apposita cache e restituita al browser fino al verificarsi di una condizione che impone l’eliminazione e ricostruzione della cache. È una caratteristica molto versatile e potente. Una pagina può risiedere in memoria ad esempio fino allo scadere di un intervallo stabilito o fino a quando non cambia un file da cui dipende.

Debugging e tracing

Fino ad oggi mancavano delle tecniche efficienti per la correzione degli errori e l’analisi del codice, se non utilizzando le estensioni lato server rese disponibili da Visual Interdev. ASP.NET include un vero debugger (una versione più completa è distribuita con Visual Studio .NET) che è possibile configurare con i “breakpoint” e i “watches”, come se ci trovassimo in Visual Basic. Il file config.web (che si affianca a global.asax) può essere invece modificato per consentire il tracing del codice: informazioni rese disponibili sono tra le altre il dettaglio di richiesta della pagina, l’albero di generazione dei controlli, il contenuto delle variabili lato server e delle intestazioni HTTP.

Convivenza di ASP e ASP.NET

ASP e ASP.NET possono essere installati sullo stesso server senza interferire le une con le altre. Per ASP.NET l’estensione da utilizzare è solitamente .aspx (a differenza di .asp utilizzato per i documenti .ASP). E’ importante sottolineare che non è garantita la compatibilità 100% tra ASP e ASP.NET e che le due tecnologie non condividono lo spazio di memoria degli oggetti session e application: la comunicazione tra pagine ASP e ASP.NET sullo stesso server deve basarsi su componenti scritti ad hoc o sul passaggio di parametri “nascosti”.

Riscrivere il codice da zero

Se state valutando la possibilità di migrare un progetto ASP verso ASP.NET, dovete sapere che tutto il codice deve essere riscritto per poter sfruttare appieno le potenzialità di questa tecnologia. L’uso di controlli lato server e di form postback, unito alla possibilità di separare il codice dallo strato di presentazione, rende praticamente impossibile il riutilizzo del codice precedente.
Sarà improbabile che vengano realizzati in futuro dei tool di conversione automatici per la migrazione del codice (come invece è avvenuto con “l’upgrade wizard” di Visual Basic): le differenze sono di concetto più che di sintassi.

Conclusione

Molte le novità che distinguono ASP.NET dal predecessore, dal modello ad oggetti alle caratteristiche migliorate o completamente nuove.

Se siete incuriositi, siete pronti per il nostro corso online di ASP.NET!

ASP.NET: Server Roundtrip e ViewState

Corso ASP.NET: terza puntata

Esempio funzionante | Sorgente | Scarica il sorgente (zip)

Le form di tipo PostBack, come abbiamo visto nella scorsa puntata, consentono di mantenere lo stato tra le pagine web (“state bag”).

Il “trucco” usato non è nuovo: le form passano e ricevono dal server dei parametri in un campo nascosto. Lo fanno però senza che se ne occupi il programmatore, velocizzando sensibilmente il tempo di sviluppo.

Il campo nascosto prende il nome di Viewstate.

Se analizziamo il sorgente di una pagina Html contenente una Form Postback, ad un certo punto compare qualcosa di simile a:

<input type="hidden" name="__VIEWSTATE" value="dDwtMTA5MDY5ODU4MTt0" />

Si tratta proprio di un campo nascosto il cui valore è una stringa crittografata. La stringa contiene, tra le altre cose, il valore dei controlli della form PostBack precedente l’ultimo invio.

Il Web Form processor di ASP.NET si vedrà così arrivare due valori per i campi: quello attuale (nella Querystring o nella collezione Form) e quello precedente (sottoforma di stringa crittografata che è in grado di decifrare). In questo modo può confrontare, di volta in volta, le variazioni dei controlli della pagina e simulare uno “stato” tra le diverse chiamate della pagina.

Lo svantaggio nell’uso del campo ViewState è dato dalla sua dimensione, che può crescere considerevolmente nel caso di numerosi controlli sulla pagina, sopratutto se questi contengono dati provenienti da un database. Il passaggio di valori tra client e server prende il nome di Server RoundTrip

La soluzione, come vedremo in un’altra puntata, è di disabilitare per tutta la pagina o solo per alcuni controlli il mantenimento dello stato.

Il campo ViewState può anche essere usato in modo esplicito dal programmatore. A differenza dell’oggetto Session o di quello Application, può essere utile per passare dei valori e dei parametri durante i submit della pagina.

Vediamo come con un esempio

Programmare il View State

La pagina contiene un contatore e un campo che visualizza alternativamente il nome di due colori: rosso e nero.

Il primo caricamento della pagina
Il primo caricamento della pagina

Premendo il pulsante, il contatore viene incrementato. Non solo: il colore diventa prima nero, poi ancora rosso, ecc.

La pagina dopo qualche caricamento
La pagina dopo qualche caricamento

Per memorizzare il contatore e il colore da visualizzare è stato usato l’oggetto ViewState.

Se guardiamo il codice (viewstate.aspx), vediamo come è stato realizzato:

51     <div id="colore" runat="server" class="risposta"></div>
54     <span class="txt">Il contatore segna <span id="contatore" runat="server" class="txtb"><%=ViewState("count")%></span> volte.</span>

Sopra sono dichiarati due controlli i cui identificativi sono “colore” e “contatore”.

15 <script language="vb" runat="server">
16 Sub Page_Load(sender as Object, e as EventArgs)
17   
18   If ViewState("colore") = "<font color=‘red’><b>Rosso</b></font>" Then
19     colore.InnerHtml = "<font color=‘black’><b>Nero</b></font>"
20     ViewState("colore") = "<font color=‘black’><b>Nero</b></font>"
21   Else
22     colore.InnerHtml = "<font color=‘red’><b>Rosso</b></font>"  
23     ViewState("colore") = "<font color=‘red’><b>Rosso</b></font>"
24   End If
25   
26   If IsNothing(ViewState("count")) Then
27     ViewState("count") = 1            
28   Else
29     ViewState("count") += 1
30   End If
31   
32 End Sub
33 </script>

Questo è il cuore della pagina.

Il ViewState è un contenitore di oggetti. Per prima cosa si verifica se l’oggetto colore (una stringa) è nero, così da farlo diventare rosso: poiché la prima volta non è nero, è visualizzato come rosso.

Il contatore funziona nello stesso modo: se è la prima volta è posto a 1, altrimenti viene incrementato.

Va notato che per utilizzare il ViewState il bottone di submit è incluso in una form di tipo PostBack (con runat=”server”)

56     <form runat="server">
57       <input type="submit" value="Riprova">
58     </form>

Conclusione

La possibilità di introdurre un modello a stati in ASP.NET porta lo sviluppatore verso un compromesso: usare questa funzionalità bilanciando il numero delle comunicazioni tra client/server e il peso della pagina. Il ViewState può inoltre essere programmato, così da facilitare il passaggio di oggetti tra form di tipo PostBack.

La Home Page

Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Splash Screen

La pagina di benvenuto, che spesso ci accoglie prima di entrare in un sito, è la splash screen.
Se consideriamo che l’utente ha fretta di ottenere le notizie e che la splash screen non permette la navigazione, è difficile capirne la funzionalità.
Consigliamo, quindi, di non crearla per un sito facile e immediato che si rivolge ad un ampio pubblico.

La splash screen è più appropriata per un pubblico di esperti – magari di designer – per i quali può essere utile sottolineare le proprie capacità grafiche e tecniche.

Un altro uso è quello di informare l’utente riguardo i contenuti delle pagine prima che entri, come succede per i siti per adulti.

Regole basilari per la realizzazione della splash screen:

  1. date la possibilità di saltare l’introduzione con lo “skip intro”
  2. rendete la splash screen informativa sui contenuti del sito, con testi e immagini esplicativi
  3. non cadete nella tentazione di una grafica ridondante e animata, rallenta la connessione al sito e non è strettamente necessaria per attirare l’utente
  4. fate in modo che sia solo una breve introduzione, lunga circa 5 secondi, passati in quali automaticamente si entra nella home del sito.
La Home Page

Non si è certi in quale punto del sito entri l’utente, ma è molto più probabile che cominci la navigazione dalla home e questa deve rispondere a tutte le aspettative (riguardo l’home page Jakob Nielsen e Marie Tahir hanno scritto un manuale da tenere sempre a portata di mano).

Cosa non deve mancare in una home

  1. nome del sito, logo
  2. slogan o titolo che comunica immediatamente l’area d’interesse del sito
  3. menu di navigazione
  4. la funzione di ricerca
  5. le novità o promozioni

Tipi di home

La home deve immediatamente comunicare il contenuto del sito, per questo è importante definire la struttura di home più adatta. A seconda che il sito sia prevalentemente d’informazione o sia ricco di servizi, la home presenta una disposizione delle informazioni e della navigazione diversa.

  • Home a menu: è una lista di collegamenti alle pagine interne o mappe grafiche
  • Home informativa: spazio alle informazioni più recenti (indicato per un sito di news) con collegamenti agli approfondimenti e alle altre notizie
  • Home a percorsi: divisa in aree d’interesse, che permettono all’utente di scegliere il tema o il servizio da visitare (indicato per siti grandi o con contenuti molto diversi)

Divisione dello spazio

Le diverse funzioni delle pagine web – navigazione, pubblicità, contenuti, news ecc. – occupano lo spazio dello schermo secondo le necessità.
Considerando lo spazio della navigazione e della pubblicità come un unico campo, in home page si dovrebbe dedicare almeno il 30% della pagina ai contenuti.
Nelle pagine interne diminuisce l’esigenza di promozione e si dà più spazio ai contenuti: almeno il 60%.

La navigazione

Molti utenti prediligono cercare le informazioni con la funzione di ricerca, che dev’essere sempre presente in tutte le pagine del sito, ma altrettanti preferiscono navigare. Guidate l’utente per far capire dov’è, dove è stato e dove può andare.

Dove sono:
  • nome e logo del sito (nelle pagine interne è link alla home),
  • mostrare parte della struttura del sito (come fosse una mappa con in evidenza la sezione che si sta visitando),
  • nel <title> scrivere il contenuto, la pagina e il sito (in quest’ordine)
Dove sono stato:
  • link alle pagine visitate hanno un colore diverso da quelle non viste
Dove posso andare:
  • directory di navigazione,
  • link,
  • collegamenti fissi (pagine precedente e successiva; meglio se si anticipa sotto il collegamento il contenuto delle pagine [nuova finestra])

Ampiezza del sito e profondità

  • Ampiezza: collegamenti alle diverse sezioni del sito
  • Profondità: navigazione in una sezione del sito, indicando i vari livelli. La navigazione cosiddetta a “briciole di pane” è la più usata per indicare la profondità di una sezione fornendo un elenco orizzontale dei diversi livelli: home » pagina di 2° livello » pagina di 3° livello » pagina di 4° livello

Consigliamo di indicare sia le sezioni del sito, sia i livelli della sezione che si sta visitando, offrendo contemporaneamente una navigazione in ampiezza e in profondità.

I frame

Pro:
la separazione del contenuto dalla navigazione fornisce un facile accesso alle informazioni del sito. Tecnicamente i frame semplificano la costruzione della pagina, poiché i contenuti posso essere aggiornati senza compromettere la grafica e la navigazione.

Contro:
i frame sono nemici dell’usabilità, infatti una pagina a frame non è stampata correttamente e non è indicizzata (letta per essere catalogata nei risultati della ricerca) dai maggiori motori di ricerca. È anche impossibile aggiungere la pagina nei “preferiti” del browser.

Per ovviare a questi limiti è fondamentale creare una versione del sito anche senza frame.