Web Application Development – Web Communication

28 aprile 2012

Dopo moltissimo tempo torno a scrivere! Questa volta ho un preciso obiettivo. Molti dei post che pubblicherò d’ora in poi potranno sembrare scontati e semplici per qualcuno mentre per me rappresentano dei veri e propri appunti, a breve dovrò sostenere molti esami che mi permetteranno di ricevere diverse certificazioni in ambiente Microsoft, per questo motivo ho deciso di riportare qui un riassunto di ripassi/nuove conoscenze/curiosità/dubbi!

Oggi si parte con una panoramica delle attività svolte tra Client e Server per quanto concerne il funzionamento di una web application. Capire cosa accade durante la navigazione all’interno di un sito web è importante per poter meglio comprendere le mimiche che si nascondono dietro l’interazione con un server IIS. Un Web Browser (Client) ed un Web Server (Server) comunicano tra di loro utilizzando l’HTTP (Hypertext Transfer Protocol) che è un protocollo di rete assegnato alla porta 80, se il server è provvisto di un certificato, la comunicazione può avvenire su porta 443, in questo caso parliamo di HTTPS.

Tipicamente la comunicazione Client/Server prevede diverse operazioni:

  1. L’utente si collega al sito www.sample.com
  2. Il Browser attiva una connessione HTTP con www.sample.com ed inoltra un comando GET, questo comando tenta di accedere al path / (root del sito web) per cui, generalmente, è specificata una pagina di default da caricare. Tecnicamente il comando inoltrato assomiglia a questo:
    GET /
    host http://www.sample.com
  3. Il web server restituisce una risposta preceduta da un HTTP STATUS CODE che ne indica il tipo di contenuto (200 se è stata trovata una pagina web da visualizzare, 404 se la pagina non esiste, 302 se è stato effettuato un inoltro presso un’altra pagina etc. per ulteriori info sugli status code: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html).

Volendo entrare nel merito delle attività, possiamo suddividere il lavoro svolto tra Client e Server, il client esegue una serie di operazioni volte alla preparazione ed inoltro/ricezione della richiesta al web server:

  1. Inoltra la richiesta al web server: se, come nell’esempio precedente, dobbiamo accedere a www.sample.com, il browser risolve l’indirizzo ed inoltra la chiamata per la richiesta della pagina.
  2. Autenticazione: se è attiva una connessione HTTPS, la richiesta deve contenere le informazioni necessarie per poter poi essere autenticata dal server.
  3. Elaborazione della risposta: quando il web server restituisce l’output della richiesta il web browser si occupa dell’elaborazione della risposta (es. se il web server ha restituito la pagina, il browser provvede a tradurla in elementi grafici, se invece sono restituiti particolari HTTP STATUS CODE, il web server si comporta nel modo più appropriato per poterli gestire).
  4. Esecuzione di codice Client Side (Scripts): se all’interno della pagina è presente del codice javascript, il browser si fa carico della sua esecuzione.

Questo processo è ripetuto ogni qual volta l’utente clicca su un bottone o seleziona un link. Il Server Web, come è facile immaginare, fa molto più del client. Una serie di processi sono innescati quando una richiesta HTTP arriva, tali processi, in parte operazioni di validazione, in parte comportamenti di contesto, concorrono alla preparazione dell’output finale da inoltrare al client. Quando una richiesta arriva sono eseguite diverse attività:

  1. Validazione: il server verifica che la richiesta sia correttamente strutturata, tale operazione si rende necessaria per evitare l’introduzione di richieste malformate che possono compromettere il corretto funzionamento del web server.
  2. Autenticazione: se la richiesta è in HTTPS (es. https://www.sample.com), è necessario autenticare la chiamata (il tutto avviene utilizzando il Secure Sockets Layer SSL).
  3. Autenticazione dell’utente: se è previsto un particolare meccanismo di autenticazione per l’utente, è necessario applicarlo, nel caso non siano presenti le credenziali necessarie per poter accedere, è visualizzata una maschera di login.
  4. Impostazione delle autorizzazioni dell’utente: successivamente è necessario impostare le autorizzazioni dell’utente, una serie di informazioni che indicano quali sono i permessi disponibili per il profilo connesso.
  5. Determinare come gestire la richiesta: a questo punto il server web deve capire in che modo interpretare ed eseguire la richiesta, se per esempio l’utente ha richiesto una pagina statica provvederà a restituirne il contenuto, se ha chiesto una pagina ASPX provvederà a servirla nel modo corretto.
  6. Gestione degli errori: se si verificano eventuali errori nel determinare il corretto percorso della richiesta, il server web cerca di fornire un dettaglio chiaro dell’errore che si è verificato (es. un Internal Server Error solitamente restituisce uno status code 500).
  7. Cache Output: il web server, provvede ad applicare anche meccanismi di cache con cui è possibile migliorare i tempi di risposta.
  8. Logging: per finire, tutte le operazioni eseguite per la chiamata, generalmente vengono loggate per questioni di sicurezza/monitoring.

La comunicazione descritta tra client e server è gestita mediante l’utilizzo di una richiesta. In ASP.NET è disponibile un oggetto, appunto Request, in cui sono raccolte tutte le informazioni che girano intorno a questa informazione. L’oggetto richiesta contiene informazioni sui Cookies, la cache, la scadenza delle pagine e molto altro. Tecnicamente parlando, il web server restituisce una risposta del genere:

HTTP/1.1 200 OK
Server: Microsoft-IIS/7.0
Content-Type: text/html
Content-Length: 154
<html><head><title>Hello World Sample</title></head><body><p>Hello World Sample Page!</p></body></html>
  • la prima linea indica il protocollo di comunicazione e le informazioni di stato (HTTP STATUS CODE).
  • la seconda linea contiene le informazioni sul tipo di web server che ha generato la risposta (Microsoft-IIS/7.0).
  • la terza linea (Content-Type) indica il tipo di contenuto erogato dal web server. Questo indicatore è anche conosciuto come MIME TYPE (Multipurpose Internet Mail Extensions). In questo esempio il MIME indica che il tipo di file è HTML.
  • la linea successiva contiene informazioni sulla grandezza effettiva del dato restituito.
  • ciò che è presente dopo è il dato vero e proprio che verrà trattato dal web browser in base alle specifiche del Content-Type.

Per ora può bastare, nel prossimo articolo: FORMS, POSTBACK e gestione degli HTTP METHODS.

Create un tema WordPress

28 giugno 2010

Premessa: questa guida prevede conoscenze di base di HTML e CSS.

Struttura di un tema.

Il primo passo e capire come è strutturato un tema WordPress, questo è composto da diversi file ed una cartella per le immagini, ogni file riveste un preciso ruolo all’interno del layout:

  • header.php: contiene la parte superiore del sito (logo, titolo del sito o più in generale tutte quelle informazioni che devono ripetersi su ogni pagina indipendentemente dal contesto).
  • footer.php: è l’opposto di header, contiene la parte finale del blog. Tecnicamente è adibito al contenimento di tag di chiusura html ma più in generale serve a fornire informazioni finali tipo Autore, Feed Link, informazioni di validazione e quant’altro.
  • index.php: è l’homepage del blog, contiene l’intera struttura che ogni utente visualizzerà visitando il sito (qui vengono conservate le tracce di collegamento tra i vari moduli).
  • page.php: è il template utilizzato per le pagine statiche (es: Chi sono, Contatti etc. ).
  • comments.php: rappresenta la porzione di pagina utilizzata per la visualizzazione dei commenti inseriti dall’utente e del form per l’invio da parte degli stessi.
  • sidebar.php: in generale dovrebbe contenere i menu e tutti gli strumenti per la navigazione attraverso il sito (esempio: Ultimi articoli, Categorie, Cerca etc.).
  • single.php: è la pagina che viene utilizzata da WordPress per la visualizzazione di un singolo articolo (quando clicchiamo su un post per visualizzarne il contenuto WordPress utilizza questa come layout strutturale).
  • search.php: è la pagina che mostra i risultati di una ricerca effettuati con il widget Search.
  • style.css: contiene tutte le regole di stile per la visualizzazione del blog (Cascading Style Sheets).
  • functions.php: contiene del codice php scritto da noi stessi per elaborare particolari funzioni, se non vogliamo scrivere nulla dobbiamo inserire solamente il codice necessario ad attivare la Sidebar del nostro blog (cosi da poter usufruire dei vantaggi di dinamicità dei contenuti offerti dalla stessa).

La cartella immagini è chiamata images ed è presente nella root del tema. Penso sia opportuno precisare che questa struttura per la creazione di temi è standard ma in generale esistono diverse strategie con cui implementarli, un esempio pratico e la realizzazione di temi con più Sidebar.

Anche se può sembrare complesso, realizzare un tema modulare in cui il codice viene gestito da più pagine, rappresenta un grande vantaggio dal punto di vista della progettazione ed anche per quanto riguarda la manutenzione. Le pagine vere è proprio del sito web sono index.php, page.php, single.php e search.php, le altre sono inclusioni di codice che vengono implementate di volta in volta. Header.php rappresenta la testata del sito web che viene caricata in alto prima di ogni elemento, Footer.php viene caricata alla fine è rappresenta proprio la parte finale del tema. Per semplificare quanto detto fino ad ora ho pensato di fornire un disegno della struttura generale del tema:

Fig. 1 – struttura di un tema WordPress.

Questo è lo schema principale della pagina, i benefici da una struttura realizzata in questo modo sono molteplici. Un esempio può essere l’esigenza di dover modificare l’intestazione della pagina o il logo, effettuare questa operazione necessità la modifica della sola pagina Header.php non impattando sul resto delle altre! Ci penserà WordPress successivamente ad includere le varie porzioni di pagina in modo tale da costruire l’intero template.

Progettazione del Layout

Ora possiamo passare alla realizzazione vera e propria di un tema, questa operazione può essere effettuata utilizzando un editor di testo semplice (Notepad di Windows) o più avanzato (Notepad++ v5.6.8 o gedit). Consiglio la seconda opzione per il semplice fatto che offrendo la colorazione del codice html e php sarà più semplice per noi leggere e gestire questi files (ho visto gente perdersi in un file di testo… come non capirli!). Di seguito ho pensato di realizzare un layout di esempio che riprende la stessa struttura dello schema riportato in Fig. 1 – struttura di un tema WordPress:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;
		charset=utf-8" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<title>Esempio di Tema WordPress</title>
</head>
<body>
 	<div id="Wrapper">
		<div id="Header">
		</div>
		<div id="Sidebar">
		</div>
		<div id="Content">
		</div>
		<div id="Footer">
		</div>
	</div>
<body>
</html>

Come potete vedere ho impostato un ID per ogni elemento presente nella pagina, questa operazione mi facilita la creazione delle regole di stile (CSS – Cascading Style Sheets).

/*
Theme Name: Esempio
Theme URI: http://www.coding.altervista.org/blog
Description: Esempio di tema WordPress
Version: 1.0
Author: Roberto Conte Rosito
Author URI: http://www.coding.altervista.org/blog
Tags: 960gs, fixed width

*/

@charset "utf-8";
/* CSS Document */

div#Wrapper {
    width: 960px;
    left: 50%;
    margin-left: -480px; /*Centro*/
    margin: 0;
    padding: 0;
    border: 0;
}
div#Header {
    width: 100%;
    display: block;
    clear: both;
}
div#Sidebar {
    width: 180px;
    float: left;
    display: block;
}
div#Content {
    width: 780px;
    float: right;
    display: block;
}
div#Footer {
    width: 100%;
    display: block;
    clear: both;
}

Fig. 2 – File di tema WordPress: style.css

[ad#ad-lungo]

Potete notare nell’intestazione del file di stile delle informazioni commentate, queste seguono un preciso schema adottato da WordPress per mostrare dei dettagli sul tema quando viene visualizzato tra l’elenco di quelli disponibili.

Creazione dei moduli.

Abbiamo completato il nostro tema, l’ultima operazione che dobbiamo effettuare e “suddividerlo” nelle varie sezioni di cui abbiamo parlato prima. Per semplicità ho pensato di mostrare questa operazione in un’immagine che può riassumere chiaramente l’obiettivo da raggiungere:

Struttura di un tema WordPress

Fig. 3 – Suddivisione del layout principale in più files.

Penso sia molto chiaro come il blog sia stato spezzettato (nel dubbio, contattami) e diviso nelle varie pagine in base al contesto semantico (Header come Testata, Sidebar come Menu, Content per i Contenuti e Footer per la parte finale), ora passiamo alla parte meno “simpatica” e più tecnica, dobbiamo iniziare a lavorare con le funzioni di sviluppo offerte. Infatti fino a questo momento ci siamo occupati solo di disegnare il nostro blog mescolando HTML e CSS, ovviamente abbiamo tralasciato un pezzo molto importante: la comunicazione che deve avvenire tra WordPress ed il Tema (l’HTML da solo non è in grado di poter comunicare). WordPress mette a disposizione diverse funzioni volte ad un buon utilizzo della piattaforma. La più importante è la funzione blogInfo in grado di fornici molte informazioni in base ad un parametro passato:

  • name: restituisce il titolo del blog;
  • description: la descrizione sintetica del blog (quello che nella configurazione viene chiamato Motto);
  • url: indirizzo del blog nella sua forma completa (es: http://coding.altervista.org/blog);
  • rdf_url: url per la generazionedei feed RDF/RSS 1.0;
  • rss_url: url dei feed RSS 0.92;
  • rss2_url: url dei feed RSS 2.0;
  • atom_url: url dei feed ATOM;
  • pingback_url: l’url di Pingback;
  • admin_email: indirizzo email dell’amministratore del blog;
  • charset: tipo di encode utilizzato per la pagina;
  • version: indica la versione di WordPress installata;
  • wpurl: url dell’installazione di WordPress;
  • template_directory: url che indica la directory in cui è posizionato il template utilizzato;
  • stylesheet_url: url del foglio di stile css;
  • stylesheet_directory: indica la root del tema;

Come si usano queste funzioni?

Semplice, nel codice php delle pagine web è possibile reperire informazioni come in questo esempio:

<h1><?php echo blogInfo('name'); ?>

Le funzioni descritte sopra, sono solo una piccola parte di quelle fornite, a questo indirizzo http://codex.wordpress.org/Template_Tags potete trovare un elenco completo di tutte quelle disponibili. Quello che possiamo fare ora è utilizzare questa funzione per valorizzare parti del nostro tema che lo richiedono. Prendiamo come esempio la pagina Header.php e modifichiamola come nell’esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;
		charset=utf-8" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<title>Esempio di Tema WordPress</title>
</head>
<body>
 	<div id="Wrapper">
		<div id="Header">
			<h1><a href="
				<?php echo bloginfo('url') ?>">
				<?php echo bloginfo('name') ?></a>
			</h1>
			<p id="description">
				<?php bloginfo('description') ?>
			</p>
		</div>

Fig. 4 – File di tema WordPress: header.php

Ovviamente stessa operazione nelle altre pagine, dobbiamo sostituire, ove necessario, le informazioni che bloginfo può fornirci automaticamente. Un consiglio per conoscere meglio tutte le funzionalità offerte è prendere un tema già fatto (il default di WordPress sarebbe il massimo) e analizzarne la struttura ed i contenuti, in questo modo l’idea di cosa è stato realizzato permette di produrre ottimi temi partendo da una base ben strutturata.

Per la realizzazione di questa guida sono state utilizzate le seguenti risorse:

  1. Using Themes
  2. Blog Design and Layout
  3. Templates
  4. Stepping Into Template Tags

.Net – Misurare la lunghezza di un contenitore di testo html.

14 giugno 2010

Avete mai avuto la necessità di dover misurare lo spazio che un testo occupa all’interno di un div o di dover capire quanto è l’altezza di un div che contiene del testo? Sicuramente no (lo spero per voi), ma supponiamo che vi venga chiesto di creare una pagina web in cui deve essere effettuato un salto pagina (css: page-break) ogni qual volta il testo di una serie di div supera una certa dimensione, quale sarebbe la strategia migliore da seguire? Qualcuno potrebbe pensare subito ad un intervento diretto sul foglio di stile inserendo questa regola:

page-break-after: auto

Soluzione invitante che sembrerebbe risolvere qualsiasi problema ma basta metterci di mezzo la questione dei mille-mila browser (come direbbe un mio collega) per rimanere sconcertati dal diverso comportamento che questa regola mostra in corrispondenza di un diverso software di navigazione (Internet Explorer, Firefox, Chrome etc.). Una soluzione che ho scelto di usare è stata quella di creare una regola di stile come questa:

page-break-after: always !important;

Successivamente ho implementato un metodo utilizzando il .Net Framework che:

dato in input un testo, la larghezza dell’oggetto contenitore (un div, uno span, qualsiasi elmento html) ed il carattere con cui questo testo è disegnato, ritorna una variabile di tipo float che indica la lunghezza che il contenitore dovrà avere per ospitare tutto il contenuto.

Una breve descrizione delle variabili in ingresso è molto utile:

  • testo (text): variabile che contiene il testo che deve essere posizionato nel contenitore
  • larghezza del contenitore (width): larghezza del contenitore che dovrà ospitare il testo.
  • carattere (System.Drawing.Font): carattere con cui il testo viene disegnato all’interno del contenitore, di questo vanno valorizzate le proprietà più importanti quali unità di misura per la grandezza, nome del font da cui deriva e grandezza stessa con cui viene disegnato.

Ed ecco il metodo che implementa questa operazione:

public float MeasureString(string text, Font font, int width) {
    float height = 0;
    Bitmap bitmap = null;
    Graphics g = null;
    try {
        bitmap = new Bitmap(1, 1);
        g = Graphics.FromImage(bitmap);
        g.PageUnit = font.Unit;
        SizeF sizeF = g.MeasureString(text, font, width);

        height = sizeF.Height;
        sizeF = SizeF.Empty;
    }
    catch { }
    finally {
        if (bitmap != null)
        {
            bitmap.Dispose();
            bitmap = null;
        }
        if (g != null)
        {
            g.Dispose();
            g = null;
        }
    }
    return height;
}

[ad#ad-lungo]

È molto facile intuire come questo metodo non fa’ altro che appoggiarsi su una funzione già presente nel Framework che permette di reperire informazioni relative alla misurazione delle stringhe. Successivamente, durante la generazione della pagina web in cui devo stampare i div, posso interrogare questo metodo (che avrò opportunamente inserito all’interno di un oggetto di servizio) e capire come comportarmi in base allo stesso valore che la funzione ritorna.

Attenzione
In base all’unità di misura impostata per l’oggetto Font varia la grandezza utilizzata per il valore di ritorno della funzione MeasureString, se per esempio imposto l’oggetto Font con unità di misura in Millimetri, il float che la funzione ritorna è da considerarsi con unità di misura “millimetro”.

Spero sia utile anche a voi! :)

Framework 960gs – Guida di base.

4 gennaio 2010

Uno strumento che utilizzo molto spesso per lo sviluppo della parte grafica di applicazioni web è 960gs. Oggi vorrei aiutare chi, alle prime armi con lo sviluppo web, vuole cimentarsi nell’utilizzo di strumenti avanzati per lavori di un certo livello (e direi anche qualità!). Premetto che per leggere questa guida è necessario conoscere le basi di HTML e CSS (non è complicato!).

Sommario

Cos’è 960gs.

È un framework CSS (Cascading Style Sheet) per la creazione di layout grafici mescolando opportunamente HTML e CSS, gs è l’acronimo di Grid System, ciò indica molto chiaramente che questo strumento permette la costruzione di pagine HTML utilizzando delle griglie. Voi potreste dire: Ma non si potrebbero usare direttamente delle tabelle HTML? ed io potrei rispondere Sbagliatissimo!. Mai sentito parlare di accessiblità? Di siti conformi allo standard W3C? Nello sviluppo web, queste informazioni dovrebbero essere la bibbia dello sviluppatore! Usare le tabelle è un errore che il mio professore di elettronica avrebbe segnato con la penna blu, queste vanno usate quando dobbiamo stampare realmente dei dati di tipo tabellare, in altri casi è necessario attenersi allo standard ed utilizzare un layout fluido e leggero. Quindi si potrebbe dire che:

960gs è un framework che si contrappone all’uso sbagliato delle tabelle ed emula queste utilizzando div, con cui è possibile ottenere qualità delle pagine e conformità allo standard.

Cosa occorre per utilizzare il framework?

Per poter utilizzare il framework è necessario avere i file .css di 960gs che puoi scaricare direttamente qui:
[download id="4"]
Il file contiene una cartella, css ed al suo interno abbiamo:

  • 960.css,960_24_col.css,reset.css,text.css: file contenenti tutti gli elementi css necessari per poter utilizzare il framework, i file sono “compressi”, cioè non esistono tabulazioni, spazi o a capo al loro interno (quindi è molto difficile poterli leggere).
  • uncompressed: contiene una versione decompressa di tutti i file del framework (per lo sviluppatore “voglioso di leggere”, scherzi a parte sarebbe anche il caso di leggere questi file per comprendere meglio come il framework funziona).

Progettare un layout

La prima operazione è molto semplice e divertente, utilizzare fantasia ed immaginazione per disegnare il layout grafico che si vuole ottenere (una matita ed una penna sarebbero ottimi strumenti per questa operazione!).

Configurare una pagina per utilizzare il framework.

Ora è necessario configurare la pagina per poter utilizzare il framework, copiare la cartella estratta dal file precedentemente scaricato (ricordate il pacchetto .zip?) all’interno del progetto web con cui si sta lavorando. Successivamente aprire la pagina web e posizionarsi sul tag <head>:

    
    <link href="css/960.css" rel="stylesheet" type="text/css" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/text.css" rel="stylesheet" type="text/css" />

Ora il framework è pronto per essere utilizzato!

Disegnare il layout nella pagina.

Si passa ora all’utilizzo vero e proprio del framework, attraverso il quale porteremo il nostro schizzo fatto su carta direttamente sulla pagina web utilizzando il framework 960gs. Di seguito il codice da inserire all’interno del tag <body> della pagina, per maggiore chiarezza ho applicato l’id presente nella figura dello schizzo nei contenitori:

<body>
    <div class="container_12">
         <div id="Header" class="grid_12 alpha omega">
         </div>
         <div class="clear"></div>
         <div id="Menu" class="grid_3 alpha">
         </div>
         <div id="Content" class="grid_9 omega">
         </div>
         <div class="clear"></div>
         <div id="Footer" class="grid_12 alpha omega">
         </div>
    </div>
</body>

Di seguito la spiegazione di ogni class utilizzato per costruire il layout:

container_12
specifica il tipo di contenitore da utilizzare, il numero impostato come suffisso indica le colonne che sarà possibile configurare all’interno della griglia, quindi container_12 indica che sto costruendo un layout a 12 colonne, ma è possibile utilizzarne altri quali: container_16, container_24.
grid_?
specifica il numero di colonne che il contenitore simulerà, anche qui il numero impostato come suffisso indica quante colonne occupare, avendo utilizzato nell’esempio un layout a 12 colonne il massimo che potremo impostare come class sarà “grid_12
alpha
specifica che la grid inserita è la prima della riga corrente(inserire questo tag è importante al fine di poter rispettare i margini del layout 960).
omega
specifica che la grid inserita è l’ultima della riga corrente (anche qui vale la stessa regola di alpha).
clear
ogni qual volta, utilizzando div, completiamo il numero di colonne disponibili per una riga, va inserito un div con class=”clear” per andare alla riga successiva.

Utilizzare 960gs non è per niente difficile, basta conoscere la logica applicata alle classi css per poter capire come disegnare velocemente un layout fluido e di facile gestione. Enjoy!