Tecnologie WEB

Il passaggio di semplici documenti HTML tra il server e il client non permette lo sviluppo di applicazioni web complesse che coinvolgano una fase di elaborazione oltre che di passaggio di dati. Proprio per questo sono nati linguaggi di scripting (o adattati linguaggi esistenti) per poter rendere dinamico, interattivo e usabile il WEB.

Tecnologie WEB client-side

L'importanza delle tecnologie software per lo sviluppo di applicazioni web lato client (client-side) è testimoniata dal fatto che in molti casi esse hanno sostituito le applicazioni software tradizionali: per una applicazione web è il browser – piuttosto che il computer, il tablet, o lo smartphone con il relativo sistema operativo – la piattaforma di esecuzione. Le tecnologie software di base che consentono di sviluppare codice interpretabile da un browser sono tre:

  • HTML (Hyper Text Markup Language): linguaggio per la definizione della struttura del contenuto delle pagine web, la versione 5 del linguaggio focalizza questo aspetto rilasciando le funzionalità di definizione del layout delle pagine web;
  • CSS (Cascading Style-Sheet): linguaggio per la definizione del layout di un documento HTML, una pagina web può assumere aspetti diversi in base al foglio di stile applicato in funzione della modalità di visualizzazione;
  • JavaScript: linguaggio di programmazione il cui codice viene interpretato dal browser, l'esecuzione del codice JavaScript è associata agli eventi di interazione di un documento HTML con il browser, con l'utente o con il server e può modificare il contenuto e l'aspetto del documento stesso determinando il comportamento di una applicazione web.

Queste tre tecnologie sono oggi rigorosamente standardizzate e le differenze tra browser sono limitate agli aspetti sperimentali.

HTML

HTML (Hyper Text Markup Language) è un linguaggio a marcatori (o markup language) ideato negli ultimi anni del secolo scorso dal fisico Tim Berners-Lee presso il CERN di Ginevra. è stato ideato prima dell'XML e deriva dallo standard SGML (come l'XML).

Le novità introdotte dalla versione 5 di HTML riguardano in particolare il comparto multimediale e quello semantico e hanno come obiettivo quello di riportare sotto l'unica specifica di HTML5 le molteplici funzionalità introdotte in campo web da altri linguaggi o strumenti.

L'estensione di un file HTML è “.html” ed esso viene interpretato da appositi programmi, denominati browser. Se l'URL a cui viene puntato il browser è una cartella, questo esegue automaticamente il file denominato “index.html” contenuto al suo interno.

HTML5

HTML5 è stato ideato per eliminare i plugin esterni (Flash Player, Silverlight e Java) e consente di riprodurre contenuti multimediali (video e musica), animazioni grafiche e molto altro.

Inoltre ha semplificato alcuni tag (tra cui il preambolo) e ne ha introdotti di nuovi.

Progressivo abbandono di vecchie tecnologie (come i cookie) in favore di nuove tecnologie (SessionStorage e LocalStorage), compilazione automatica dei form e un migliore SEO delle pagine web. Migliorata anche la geolocalizzazione.

CSS

Il linguaggio CSS (Cascading Style Sheets, in italiano “fogli di stile”) viene usato principalmente per definire il layout grafico di una pagina HTML. Le specifiche del linguaggio sono emanate in forma di direttive (recommendations) dal World Wide Web Consortium; l'ultima versione del linguaggio CSS è la 3, oggi supportata da parte di tutti i browser.

Una regola CSS si compone di un selettore, la cui funzione è quella di selezionare un elemento HTML, e di un blocco di dichiarazioni, ovvero un elenco di coppie proprietà: valore che operano sull'elemento selezionato. Il blocco dichiarazioni è delimitato dai simboli “ { ” e “ } ”, mentre le singole dichiarazioni sono separate dal simbolo “ ; ”. La sintassi di una regola è schematizzata nel codice seguente:

selettore { 
    proprietà1: valore1;
    proprietà2: valore2;
}

Le proprietà grafiche specificate all'interno del blocco dichiarazioni vengono applicate agli elementi (o all'elemento) selezionati mediante il selettore che precede il blocco stesso.

CSS 3 introduce numerose novità: oltre cento nuove proprietà, il numero di proprietà passa da 120 a 245, e la cifra potrebbe salire con l’introduzione di nuovi moduli. Basta questo dato per capire che i CSS3 coprono le aree più disparate nel contesto della presentazione visuale (e non solo) dei contenuti distribuiti via web. Inoltre introduce anche nuovi selettori e nuovi valori (e unità di misura) per le proprietà.

Responsive Web Design

L'impiego di dispositivi mobili per la navigazione sul Web è in forte aumento, ma gran parte del Web non è ancora ottimizzata in tal senso. Spesso i dispositivi mobili soffrono di limitazioni in termini di formato dello schermo e richiedono un nuovo approccio per la disposizione dei contenuti.

Il Responsive Web Design risponde alle esigenze di utenti e dispositivi impiegati. La disposizione dei contenuti varia in base alle dimensioni e alle caratteristiche del dispositivo. Ad esempio, un telefono visualizza i contenuti su una sola colonna mentre un tablet ne adopera due.

Ogni sito "responsive" contiene nell'head il seguente tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

JAVASCRIPT

Il linguaggio di programmazione JavaScript è stato originariamente sviluppato da Brendan Eich della Netscape Communications come linguaggio di scripting il cui codice inserito nel contesto di documenti HTML era interpretato dal browser Netscape Navigator, uno dei più utilizzati negli anni ’90 del secolo scorso. Le successive versioni del linguaggio sono state standardizzate da ECMA (European Computer Manufactures Association) con il nome di ECMAScript (per motivi legali il nome Java non può infatti essere utilizzato). Tutti i browser moderni interpretano il codice JavaScript che oggi è una delle tecnologie software fondamentali per la realizzazione del World Wide Web. L'esecuzione del codice JavaScript nel contesto del browser è di tipo single-thread, questo permette di evitare problematiche di sincronizzazione tra script e di accesso concorrente a variabili globali (HTML5 ha introdotto la API web-workers che permette di eseguire uno o più script in background ed in modalità concorrente rispetto all'esecuzione del codice JavaScript contenuto in una pagina web.).

JSON

JSON (JavaScript Object Notation) è un formato testuale standard per l'interscambio di dati strutturati basato sulla sintassi del linguaggio JavaScript per la definizione di oggetti e di array; in molti contesti di interazione client/server viene utilizzato al posto di XML (eXtensible Markup Language), in particolare se il codice lato client è JavaScript. Proprio per questo esiste una semplice e rischiosa modalità di parsing tramite la funzione eval.

I valori primitivi in JSON sono le stringhe (sempre comprese tra simboli “ " ”), i numeri, i booleani true e false ed il valore speciale null; inoltre i nomi delle proprietà in JSON devono sempre essere compresi tra simboli “ " ”:

{ 
    "developer": "Federico Meini", 
    "email": "federico.meini@developer.net", 
    "phone": "0123456789", 
    "address": { 
    "street": "via dell'Informatica", 
        "number": 123, 
        "city": "Livorno", 
        "postcode": "57100", 
        "country": "Italia" 
    }, 
    "languages": ["C", "Java", "HTML", "JavaScript"] 
}

AJAX

La tecnologia AJAX (Asynchronous JavaScript and XML) permette di inviare richieste ad un server HTTP e di ricevere le relative risposte in modo asincrono, senza bloccare l'interazione dell'utente con il browser in attesa della risposta: è alla base delle moderne applicazioni web eseguite lato server che espongono all'utente mediante il browser interfacce grafiche complesse, simili a quelle delle applicazioni tradizionali eseguite localmente. Nonostante il nome, la tecnologia AJAX non è vincolata allo scambio di dati in formato XML, ma permette di gestire un qualsiasi formato testuale, ad esempio HTML, e molto spesso viene utilizzata per acquisire dati in formato JSON. Per motivi di sicurezza le richieste possono normalmente essere inviate solo al server dal quale è stata ricevuta la pagina HTML contenente il codice JavaScript che istanzia l'oggetto. Tutti i browser rendono disponibile il costruttore predefinito XMLHttpRequest mediante il quale è possibile istanziare un oggetto per effettuare richieste al server: var request = new XMLHttpRequest();

AJAX è un approcio ibrido tra le tecnologie client-side e server-side in quanto richiama il server per effettuare operazioni.

Tecnologie WEB server-side

Le tecnologie server-side servono principalmente per:

  • acquisire informazioni dal client, per es: dati inseriti dall'utente in un modulo online; dati contenuti in un link
  • inserire dati in un database inserire dati in un database (per es i dati di registrazione (per es. i dati di registrazione di un utente) o leggere dati da un database (per es. per verificare username e password di un utente)

Si possono distinguere

  • Pagine web statiche. Sono pagine contenute in file esistenti su un server codificate in linguaggi HTML e CSS (più eventuali aggiunte in linguaggio JavaScript). Sono immutabili nel tempo fino a quando non si decide di modificarle riscrivendo parte del loro codice.
  • Pagine web dinamiche. Sono il prodotto di script eseguiti sul server, senza che esistano fisicamente file HTML corrispondenti. Sul server sono presenti programmi che, quando eseguiti, inviano il proprio output (ogni riga del quale è formattata come una istruzione HTML) al browser del client che lo ha attivato. Dato che, in generale, la sequenza delle istruzioni eseguite in un programma e il relativo output dipende dai dati che esso riceve in input, le pagine visualizzate lato client cambiano in maniera dinamica.

Tra i linguaggi più diffusi di scripting server-side troviamo:

  • PHP. Acronimo ricorsivo di “PHP, Hypertext Preprocessor”, preprocessore di ipertesti (originariamente acronimo di Personal Home Page) ed è nato nel 1994 ad opera del danese Rasmus Lerdorf. È un linguaggio di scripting interpretato con una sintassi molto simile a quella del linguaggio C. Funziona principalmente con il webserver Apache e viene distribuito con licenza libera open source ma non compatibile con la GPL.
  • ASP.NET. Acronimo di Active Server Pages per la piattaforma .NET. È sviluppato da Microsoft e si basa, come tutte le applicazioni della famiglia .NET, sul CLR (Common Language Runtime). Permette di scrivere codice utilizzando uno qualsiasi dei linguaggi di alto livello supportati dal framework .NET (Visual Basic .Net, C#, J#)
  • JSP/SERVLET. JSP è molto simile al funzionamento del PHP, cioè quello di inglobare in un'unico file codice JAVA ed HTML (o XML/JSON). Le servlet invece scritte interamente in JAVA e producono come risultato sempre un documento HTML (o XML/JSON).

I cookies sono piccoli file che il server web memorizza sul disco della macchina client. Con essi è possibile realizzare un meccanismo (rudimentale) mediante il quale delle applicazioni lato server posso memorizzare e recuperare informazioni sul lato client (mediante il browser) in modo, ad esempio, da poter associare ad ogni visitatore un certo “stato”. I cookies hanno nomi e valori, una validità temporale ed eventualmente impostazioni di sicurezza.

Per gestire dati persistenti è preferibile fare ricorso al meccanismo delle sessioni piuttosto che ai cookies. Una sessione consiste in una serie di accessi alle nostre pagine PHP, effettuati in un determinato arco di tempo durante il quale viene mantenuto uno “stato”. Ogni sessione è individuata da un identificatore, univoco, utilizzato per l'associazione tra client e relativa sessione: i dati relativi ad una sessione risiedono sul server (memorizzate in file unici) e non sul client offrendo così a chi sviluppa il software maggiori possibilità di controllo. Una sessione viene identificata tramite una stringa che prende il nome di SID, Session IDentifier. Questa viene scambiata tra client e server e punta al file sul server che contiene i dati relativi alla sessione stessa.

results matching ""

    No results matching ""