Laboratorio di Tecnologie Web
Introduzione al corso
Dott. Stefano Burigat
www.dimi.uniud.it/burigat
Cosa faremo
L'obbiettivo del corso di Laboratorio di Tecnologie Web è
quello di fornire le competenze tecniche necessarie allo
sviluppo lato client di siti web.
Gli argomenti principali trattati durante il corso saranno tre:
• HTML5 (HyperText Markup Language): versione più recente
del linguaggio utilizzato per rappresentare il contenuto delle
pagine web
• CSS 2 e 3 (Cascading Style Sheets): linguaggio utilizzato per
definire lo stile delle pagine web
• JavaScript: linguaggio utilizzato per aggiungere
comportamenti dinamici alle pagine web
Questi linguaggi permettono di avere massimo controllo sul
contenuto e sulla forma delle pagine web che costituiscono
un sito. Andremo quindi ad un livello più profondo rispetto
a quello che si può fare attraverso siti quali Facebook,
Twitter, blog vari (che si limitano a facilitare la
pubblicazione di contenuti) o anche siti quali Wikipedia
(che utilizzano un linguaggio di markup semplificato per la
creazione dei contenuti).
Non ci occuperemo di design dei siti web (come progettare
un sito in modo che sia efficace, usabile e risponda a
specifici requisiti) ma delle basi tecniche che permettono di
costruire e controllare i diversi mattoni di base che
costituiscono le pagine web. Detto questo, se volete vedere
un esempio di errori (deliberati) di web design, provate
questo sito http://www.angelfire.com/super/badwebs/
Generalmente, le lezioni si comporranno di una trattazione
teorica degli argomenti intervallata da esercizi pratici sulle
nozioni teoriche acquisite.
Gli strumenti necessari allo svolgimento delle esercitazioni
pratiche sono sostanzialmente due:
• Un editor di testo tipo Notepad o equivalenti (è anche
possibile ma sconsigliabile utilizzare strumenti quali
LibreOffice o Word; in tal caso bisogna stare attenti a salvare
i documenti creati nel formato appropriato)
• Un browser web (Chrome, Firefox, Safari, Opera, Internet
Explorer, ...)
I compiti di un browser sono essenzialmente due:
• Richiedere le pagine web ad un server quando viene inserito
un indirizzo web nella barra degli indirizzi o viene cliccato
un link in una pagina
• Visualizzare il contenuto che viene ritornato dal server web,
interpretando le istruzioni contenute all'interno del codice
delle pagine
Sebbene i siti web siano normalmente memorizzati su
macchine server configurate appositamente per servire
pagine web, durante il corso faremo riferimento solo a
pagine web memorizzate localmente, alle quali è comunque
Illustrazione 1: Diffusione dei principali browser web
possibile accedere tramite browser (gli aspetti lato server
verranno trattati nel corso di Complementi di Tecnologie
Web).
Al giorno d'oggi i browser più diffusi sono, nell'ordine,
Chrome, Internet Explorer, Firefox, Safari, Opera.
La presenza di browser diversi sul mercato, spesso con un
livello di compatibilità tra di loro scarso, comporta due
conseguenze per gli sviluppatori di siti web:
• E' preferibile creare pagine web che rispettino gli standard
esistenti
• E' necessario come minimo verificare il funzionamento delle
pagine sviluppate con i primi quattro browser elencati
Esistono letteralmente decine e decine di libri sugli
argomenti che tratteremo durante il corso e ne vengono
pubblicati continuamente di nuovi. Siete liberi, se lo volete,
di utilizzare uno qualunque dei testi disponibili come
complemento al materiale che vi verrà fornito a lezione.
L'esame consisterà di uno scritto con esercizi/domande
sulle nozioni apprese a lezione.
Che tipo di esercizi? Ad esempio, scrivere un pezzo di
codice secondo le specifiche date, determinare se un
esempio di codice fornito è corretto, etc.
L'obbiettivo è determinare se avete capito i concetti spiegati
e sapete applicarli, non determinare se avete imparato a
memoria un linguaggio.
Un po' di storia
Su Internet potete trovare milioni di siti web diversi, dai
blog ai siti di notizie ai siti commerciali dove fare acquisti
online.
Un sito web è costituito da un insieme di pagine web
interconnesse, tipicamente memorizzate in uno o più server
e accessibili tramite un indirizzo chiamato Uniform
Resource Locator (URL).
NOTA:
Internet è una rete globale di computer interconnessi che
possono scambiarsi informazioni. Lo scambio può avvenire
in molti modi diversi: via email,via HTTP (Hypertext
Transfer Protocol), via FTP (File Transfer Protocol), via
peer-to-peer, etc.
Il World Wide Web (o web) può essere considerato uno dei
servizi messi a disposizione su Internet ed è costituito
dall'insieme delle pagine web che costituiscono i diversi
siti, collegate tra loro tramite hyperlink e accessibili via
browser.
Ogni pagina web è tipicamente un documento scritto con
una combinazione di testo, HTML (HyperText Markup
Language), CSS (Cascading Style Sheets) e (a volte)
JavaScript.
Illustrazione 2: Mappa parziale di Internet del 2005
Come si è sviluppato tutto ciò? L'idea di Internet ha iniziato
ad essere sviluppata all'inizio degli anni 60. Nel 1969 è
stata effettuata la prima trasmissione via Internet tra un
computer dell'Università della California a Los Angeles e
un computer allo Stanford Research Institute. Inizialmente
Internet è stata utilizzata a livello governativo e
accademico, come tool per la ricerca e la collaborazione.
Nel 1990, Tim Berners-Lee e Robert Cailiau pubblicano
una proposta di finanziamento per la creazione di un
"Hypertext project" called "WorldWideWeb" as a "web" of
"hypertext documents" to be viewed by "browsers" using a client–
server architecture.
Alla fine del 1990, Berners-Lee aveva sviluppato tutti gli
elementi necessari al funzionamento del web, includendo
un sistema per l'identificazione univoca delle risorse sul
web (URL), un linguaggio per la creazione delle pagine
web (HTML), un sistema per la visualizzazione delle
pagine web (il browser WorldWideWeb) ed un protocollo
per il trasferimento di risorse (HTTP).
Il vero punto di svolta per la diffusione del web è stato il
rilascio nel 1993 del browser Mosaic (da cui sono poi
derivati Netscape Navigator e successivamente Firefox),
grazie alla disponibilità di un'interfaccia grafica. Da quel
momento in poi, il numero di siti web disponibili ed il
numero di persone che hanno inziato a consultare il web è
aumentato esponenzialmente fino ai livelli di oggi.
Illustrazione 3: Screenshot del browser NCSA Mosaic 1.0
HTML, XHTML, HTML5
A partire dalla versione creata inizialmente da Berners-Lee
nel 1990-1991, HTML si è evoluto nel tempo prima come
specifica IETF (Internet Engineering Task Force), poi come
raccomandazione W3C (World Wide Web Consortium),
fino a standard ISO. L'ultima versione di HTML standard
(HTML 4.01) è stata definita alla fine del 1999.
Successivamente, è stato sviluppato XHTML (Extensible
HyperText Markup Language), una versione del linguaggio
HTML basata su XML (Extensible Markup Language).
L'obbiettivo era quello di rendere HTML più estensibile e
aumentare l'interoperabilità con altri formati di dato.
L'ultima versione di XHTML disponibile è la 1.1,
inizialmente pubblicata nel 2001 ma raffinata fino al 2010.
Il passo successivo sarebbe dovuto essere XHTML 2.0 ma
alcune scelte di design effettuate dai progettisti del
linguaggio (ad esempio, la non compatibilità con la
versione precedente) hanno portato alla formazione di un
gruppo di lavoro alternativo (inizialmente formato da
Mozilla, Opera, Apple) ed alla creazione di HTML5 (che
supporta comunque tutto ciò che viene supportato da
XHTML oltre ad aggiungere nuove interessanti funzionalità
mirate principalmente a supportare la creazione di web
apps). A seguito del lavoro su HTML5, il W3C ha
abbandonato lo sviluppo di XHTML 2.0.
Oltre ad aver introdotto alcuni nuovi elementi di markup
(istruzioni HTML) mirati ad arricchire il contenuto
semantico dei documenti HTML (cioè permettere di
definire il significato delle diverse parti di una pagina web),
HTML5 introduce la possibilità di integrare codice SVG
(Scalable Vector Graphics) per la grafica vettoriale e
MathML per le formule matematiche oltre a supportare
nuove API (Application Programming Interface) utilizzabili
tramite JavaScript che permettono ad esempio la possibilità
di disegnare sullo schermo, gestire funzionalità di
geolocalizzazione, etc.
Il livello di supporto di HTML5 da parte dei vari browser
web è già piuttosto buono e la quantità di siti web scritti in
HTML5 sta aumentando molto velocemente.
Se volete verificare quanto il vostro browser è compatibile
con HTML5, potete utilizzare il sito http://html5test.com/
Nel seguito, verrà utilizzato l'acronimo HTML per indicare
una qualsiasi versione del linguaggio
CSS
Cascading Style Sheets (CSS) è un linguaggio utilizzato per
descrivere il look e la formattazione di un documento
scritto in un linguaggio di markup (può essere utilizzato
anche per linguaggi diversi da HTML)
L'obbiettivo di CSS è quello di separare il contenuto di un
documento dalla presentazione del documento, che include
aspetti come il layout (disposizione degli elementi sullo
schermo), i colori, i font, etc. Questo migliora l'accessibilità
del contenuto e la flessiblità nella presentazione del
contenuto, portando ad una migliore manutenibilità di un
documento nel tempo.
La prima versione di CSS è stata pubblicata nel 1996, CSS
2 nel 1998, CSS 2.1 nel 2011 (anche se la prima
raccomandazione è del 2004), CSS 3 (che è divisa in diversi
moduli) è ancora in fase di sviluppo anche se alcuni moduli
hanno già raggiunto la fase di pubblicazione come
raccomandazione.
JavaScript
JavaScript è un linguaggio di scripting orientato agli
oggetti, usato principalmente nella creazione lato client di
siti web. Originariamente sviluppato e rilasciato dalla
Netscape Communications nel 1995 (con il nome
LiveScript) è stato standardizzato per la prima volta tra il
1997 e il 1999 dalla ECMA (European Computer
Manufacturers Association) con il nome ECMAScript.
Non c'è relazione tra Java e JavaScript, se non per
somiglianze nella sintassi, in entrambi i casi derivata dal C.
In ambito web, il codice JavaScript viene tipicamente
inserito all'interno delle pagine web e interpretato dal
browser (che contiene un apposito interprete, anche se le
ultime versioni utilizzano la just-in-time compilation per
aumentare l'efficenza).
Originariamente, JavaScript veniva utilizzato per
aggiungere alle pagine web funzionalità dinamiche di
contorno, quali scritte scrollabili o puntatori personalizzati,
oltre che per consentire la validazione a run-time del testo
inserito all'interno dei campi in un form. Il suo utilizzo ha
iniziato a diffondersi in modo sostanziale con l'avvento
della tecnica di sviluppo AJAX (Asynchronous JavaScript
and XML) che si basa su uno scambio di dati in background
fra web browser e server, e che consente l'aggiornamento
dinamico di una pagina web senza esplicito ricaricamento
da parte dell'utente.
L'importanza di JavaScript sarà ancora maggiore con la
diffusione di HTML5 dato che molte delle nuove
funzionalità di HTML5 sono gestite tramite JavaScript.
