Realizzazione di siti web

betaingegneria
Marco Barbato – Studio di Ingegneria

Web: http://www.betaingegneria.it

Mail: [email protected]

Who I am

Scopo del corso

Strumenti

Risorse
Copyright (C) 2010 - Marco Barbato
Who I am





Laurea in Ingegneria Elettronica
Mi sono occupato di Automazione Industriale e
Robotica
Da 10 anni mi occupo di tecnologie per il Web
Lavoro con la PA, con l'industria e faccio
fromazione superiore e universitaria
Mi occupo anche di musica
Copyright (C) 2010 - Marco Barbato
Scopo del corso





Acquisire familiarità ed usare la lingua franca
del web (XHTML) e gli stili (CSS)
Definire l'architettura di un sito
Integrare il sito nel web (accesso a ws, a risorse
remote, ...)
Separare contenuti e presentazione,
differenziare la presentazione a seconda del
dispositivo di accesso
Varie ed eventuali
Copyright (C) 2010 - Marco Barbato
Strumenti



Non faremo ricorso se non alla fine per causa di
forza maggiore a tool di sviluppo visuale (Adobe
Dreamweaver)
Useremo strumenti open source per la
valutazione dell'accessibilità
Useremo strumenti standard per la valutazione
della qualità del codice
Copyright (C) 2010 - Marco Barbato
Risorse



http://www.w3.org (sito del consorzio Web)
http://www.betaingegneria.it (il mio sito contiene
parecchie risorse relative al web)
Altri riferimenti web o bibliografici ve li darò
durante il corso
Copyright (C) 2010 - Marco Barbato
Breve storia del web





Web <> Internet (dispense)
1989: Tim Berners-Lee fa girare al CERN di
Ginevra una proposta per la gestione delle
informazioni.
Nel 1990 scrive WorldWideWeb, il primo web
browser su una stazione NeXTStep
La più antica pagina web conservata al CERN
TBL inventa l'HTML, il protocollo http e il primo
server web httpd.
Copyright (C) 2010 - Marco Barbato
Il Web cresce...

Nel 1993 TBL e lo sviluppo del web si spostano
negli USA al MIT di Boston.

1994: W3C

1996: Google (da gogol, 1 seguito da 100 zeri)

1999: esplode l'e-commerce. Si parla per la
prima volta di Web 2.0. Nasce il blog

2001: Wikipedia

2004: Facebook, Gmail

2005: Youtube, Copyright
Google
Maps
(C) 2010 - Marco Barbato
Ma cos'è il web?


Il Web è un servizio di Internet che consente di
scambiare dati (testo strutturato, files di vario
tipo MIME) attraverso il protocollo HTTP.
W3C dixit:



1. A uniform naming scheme for locating
resources on the Web (e.g., URIs).
2. Protocols, for access to named resources over
the Web (e.g., HTTP).
3. Hypertext, for easy navigation among
resources (e.g., HTML).
Copyright (C) 2010 - Marco Barbato
Il protocollo HTTP



Altri servizi di Internet: mail, ftp, IRC, gopher...
HTTP è un protocollo client / server: chi ha
anche il solo compito di scrivere pagine web è
utile che abbia almeno una vaga idea di come
funzioni.
Una sessione HTTP si articola in due fasi:
REQUEST e RESPONSE:


REQUEST è un'interrogazione che parte dal client
verso il server
RESPONSE è la risposta del server
Copyright (C) 2010 - Marco Barbato
HTTP




Il client (un browser o un altro programma)
lanciano una request verso il server web
La richiesta contiene l'URI della risorsa, i dati
contingenti della richiesta e alcuni dati di
contorno (tipo di browser, codifica, lingua, etc)
Il server raccoglie la richiesta, la elabora (lui o
qualcun altro), costruisce un flusso di uscita
(header + body) e lo restituisce al client.
La sessione si chiude qui: non c'è memoria.
Copyright (C) 2010 - Marco Barbato
Approfondimento 1/1

URI Uniform Resource Identifier è un sistema
di coordinate nel mondo delle risorse:
http://www.sito.it/risorsa?parametri

http: protocollo

www.sito.it: è l'host

risorsa: file o programma

parametri: ad es: input a,b per avere a+b

Dobbiamo immaginare il web come un insieme
di documenti e servizi dotato di coordinate.
Copyright (C) 2010 - Marco Barbato
Approfondimento 1/2

REQUEST Http header (dal browser al server):
GET / HTTP/1.1
Host: bach
User-Agent: Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.0.19) Gecko/2010040118 Ubuntu/8.10 (intrepid)
Firefox/3.0.19
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: it-it,it;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
If-Modified-Since: Thu, 23 Sep 2010 06:39:21 GMT
If-None-Match: "99903-3b0a-490e785a6f840"
Cache-Control: max-age=0

MIME type: etichetta che identifica cosa c'è
dentro ad un file (Multipurpose Internet Mail
Extensions)
Copyright (C) 2010 - Marco Barbato
Aprofondimento 1/3




Problema della rappresentazione dei
caratteri: un amico di penna giapponese è un
bel problema. Con un inglese sarebbe OK. Per
gli inglesi basta ASCII. Con 7 bit fanno tutto.
Già con francesi e italiani è complicato: àèìòùç
non bastano 7 bit. Ok, 8.
Coi greci, gli arabi e gli israeliani siamo
daccapo. Con le lingue orientali siamo fritti.
Unicode + UTF : si possono codificare e
trasmettere tutti i caratteri.
Copyright (C) 2010 - Marco Barbato
UNICODE / UCS



È un tabellone che contiene un'associazione tra
un carattere ed un codice esadecimale
E' arrivato alla versione 5.2.0 nel 2009, trae le
origini da ISO 10646 del 1989)
Prevede una codifica a 21 bit (2 milioni di
caratteri), ma quasi tutti i caratteri sono mappati
da U+0000 a U+FFFF (Basic Multilingual
Plane), che con 65536 caratteri copre già
praticamente tutto (cinese, matematica, etc)
Copyright (C) 2010 - Marco Barbato
UTF

Unicode Transformation Format è una codifica
a lunghezza variabile dei caratteri Unicode.

Repertorio: un elenco di caratteri col loro nome.

Codice: mappa tra un carattere e un numero > 0


Codifica (Encoding): come il codice viene
rappresentato in un file o in un flusso tcp/ip (sito
w3c: ”used to transform the document character
stream into a byte stream”: es. UTF-8
Esercizi
Copyright (C) 2010 - Marco Barbato
Torniamo all'header





GET è uno dei comandi del protocollo con cui
un client chiede una risorsa;
Accept-Language scrive le preferenze di lingua
del browser
Accept dice quali mime type il browser gestisce
Accept-Charset quale codifica il browser usa
per visualizzare i caratteri
In sostanza mandiamo la carta d'identità del
browser.
Copyright (C) 2010 - Marco Barbato
RESPONSE


Il server web httpd di solito fa da passamano,
prende i file e li spedisce al client uno alla volta
(html, stili, immagini, audio, etc).
Se è richiesta l'elaborazione httpd passa i
parametri all'application server che risponde
con un flusso HTML: httpd fa ancora una volta il
passamano.
Copyright (C) 2010 - Marco Barbato
Esempio di RESPONSE


HTTP/1.1 304 Not Modified
Date: Thu, 23 Sep 2010 17:38:41 GMT
Server: Apache/2.2.9 (Ubuntu) PHP/5.2.6-2ubuntu4.6 with
Suhosin-Patch mod_python/3.3.1 Python/2.5.2 mod_perl/2.0.4
Perl/v5.10.0
Connection: Keep-Alive
Keep-Alive: timeout=15, max=100
Etag: "d9814-3b0b-490f09b20a000"
Il server si presenta con il suo header,
dice la versione (1.1) il codice di risposta
(304), la data e l'ora, alcune informazioni
sul sistema operativo del server
Copyright (C) 2010 - Marco Barbato
RESPONSE (continua)




Non è finita: all'header nel flusso http segue il
corpo che è il documento HTML vero e proprio.
Se è un file nel file system del server si dice
pagina web statica (in questo corso impareremo
a costruire solo pagine statiche)
Se è un file costruito al volo è una pagina web
dinamica.
A volte anche le pagine dinamiche sono
statiche (cache).
Copyright (C) 2010 - Marco Barbato
Esempio del corpo XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="it">
<head>
<title>betaingegneria - studio d'Ingegneria Marco Barbato</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
</head>
<body>
....
</body>
</html>

Questo è XHTML 1.0

Ma anche HTML ha una storia
Copyright (C) 2010 - Marco Barbato
Storia di HTML

Da HTML a HTML 5: sito del Consorzio Web.

1989 HTML (TBL) - 1991 HTML+

1993 NCSA Mosaic

1994 HTML 2 (Netscape, W3C)

1995 HTML 3 (Microsoft IE, CSS)

1997 HTML 3.2 – 1998 HTML 4.0

2000 XHTML 1.0 – 2008 HTML 5
Copyright (C) 2010 - Marco Barbato
Cominciamo con HTML 4.01

Internationalization

Accessibility

Tables (sia come contenitori di dati che per
layout: obbrobrio! → XHTML 1.0)

<OBJECT>

Style Sheets

Scripting

Printing (<LINK />)
Copyright (C) 2010 - Marco Barbato
Struttura di HTML

Versione
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Elemento (tag) HTML
Elemento HEAD
 Elemento BODY
A seconda della versione del browser e
dell'html che usiamo, ci sono permessi errori



La maggior parte delle cose che la pagina web
mostra è nella sezione BODY.
Copyright (C) 2010 - Marco Barbato
Generalità sui tag


Vi sono tag che viaggiano in coppia (<A></A>)
o da soli (<META />)
Un tag è formato da un nome e da degli attributi
<a href=”index.html” target=”parent”>Indice</a>


Cercheremo di usare tag semantici che si
associano alla funzione più che all'aspetto.
Ad esempio <i></i> di permette di fare
l'inclinato. Ma lasciamo queste cose agli stili e
usiamo <em></em> (emphasize)
Copyright (C) 2010 - Marco Barbato
La sezione BODY




È la più immediata perché ”si vede subito”
Con HTML 4.02 usiamo i tag in maiuscolo, con
xhtml 1.0 il minuscolo
Qui ha luogo l'impaginazione del sito, ciò che
vedremo del sito: testo, titoli, immagini, video,
form (moduli interattivi), link (collegamenti
ipertestuali)
Adotterremo sempre una separazione netta tra
contenuto e aspetto usando i CSS.
Copyright (C) 2010 - Marco Barbato
Tag di testo


Tag semantici (di testo strutturato)

Intestazioni <H1></H1> fino a 6 livelli

<EM>,<STRONG>,<DFN>,<CODE>,<ACRONYM>
Tag visuali


Paragrafi <P>, <PRE>
Tag visuali usati soprattutto in XHTML

<div>
Copyright (C) 2010 - Marco Barbato
Liste


Per ottenere delle liste non ordinate
<ul>
<li>carta</li>
<li>penna</li>
<li>calamaio</li>
</ul>
e ordinate
<ol>
<li>Zoff</li>
<li>Gentile</li>
</ol>
Copyright (C) 2010 - Marco Barbato
Tabelle



In HTML <= 4.02 sono state usate a sproposito;
hanno un significato semantico: contenere dati;
invece sono state usate per impaginare. Acqua
passata.
<table>
<thead /><tr /><th /> intestazioni
<tbody /><tr /><td /> celle
</table>
L'oggetto tabella è molto complesso e ci
torneremo studiando il DOM.
Copyright (C) 2010 - Marco Barbato
Link: generalità





È l'elemento principe del web: il collegamento
ipertestuale!
<a href=”uri”>testo</a>
Se uri ha un # davanti ci muoviamo all'interno
della presente risorsa; in questo caso
cerchiamo un tag <a name=”uri” />
URI può essere assoluto (specifico protocollo,
host e risorsa) o relativo (solo la risorsa,
protocollo e host vengono sottointesi).
Esercizio 1 - Esercizio
2
Copyright (C) 2010 - Marco Barbato
Link 2: relazioni tra documenti


LINK è un elemento da usarsi solo nella
sezione HEAD.
Lo usiamo per collegare fogli di stile


Per dire al browser qual è il foglio di stile più adatto
alla piattaforma su cui gira (pc, braille, smartphone)
Per dire ai motori di ricerca dove trovare

versioni del sito in altre lingue

versioni pdf del sito

l'indice del sito
Copyright (C) 2010 - Marco Barbato
Link 3: accessori

Per l'accessibilità esistono due strumenti legati
al tag àncora <a>:


Tasto di accesso (ACCESSKEY): posso attivare un
link con la tastiera anziché con il mouse; ad
esempio se ACCESSKEY=”A” attiverò il link con la
sequenza ALT+SHIFT+A
Testo alternativo (ALT): questo testo viene letto da
un sintetizzatore vocale. Utile anche per le
immagini
Copyright (C) 2010 - Marco Barbato
Link: plug in


Determinati tipi MIME sono gestiti nativamente
dal browser. I tipi che non lo sono di solito si
associano ad un plug in (spina) che ne
permette la lettura all'interno del browser. Se il
plug in non è disponibile (il browser on digerisce
il file), viene forzato il salvataggio della risorsa
sul proprio computer.
Dal lato server si può controllare il
comportamento del browser forzando il
salvataggio tramite una direttiva nell'header
Copyright (C) 2010 - Marco Barbato
Oggetti multimediali



<img src=”uri” /> (abituiamoci alla sintasi xhtml
1.0)
<object /> è più generale: può definire una
immagine (al posto di img), un'applet Java, un
video...
Se cominciamo a includere mp3 dobbiamo
pensare che l'mp3 il browser lo potrà suonare
solo se ha il plug-in apposito installato.
Copyright (C) 2010 - Marco Barbato
Digressione

Youtube usa una tecnologia particolare: di solito
si deve attendere che sia terminato il download
di tutti gli oggetti perché il browser possa
renderizzarli. Ma mp3 e video darebbero
comunque luogo a ritardi, per cui si adotta una
tecnologia che permette di sentire vedere mano
a mano che il file viene scaricato (streaming)
Copyright (C) 2010 - Marco Barbato
Frames


Solo en passant, è uno strumento deprecato.
<FRAMESET cols="20%,80%">
<FRAMESET rows="30%,70%">
<FRAME src="overview.html" name="pListFrame">
<FRAME src="allclasses.html" name="pFrame">
</FRAMESET>
<FRAME src="summary.html" name="classFrame">
</FRAMESET>
<NOFRAMES><H2>Frame Alert</H2>
<P>This document is designed to be viewed using the frames feature. If you see this
message, you are using a non-frame-capable web client.
<BR>
Link to <A HREF="overview-summary.html">Non-frame version.</A></NOFRAMES>

Nella slide seguente il risultato. Serve per
caricare più pagine web nella stessa finestra.
Bandito come strumento per siti accessibili
Copyright (C) 2010 - Marco Barbato
Visualizzazione del frameset
Copyright (C) 2010 - Marco Barbato
FORMS



Uno degli strumenti più usati (compila un
modulo per l'iscrizione, username e password,
seleziona una nazione, rispondi ad un
questionario, ...)
Ci porta ad andare ancora più a fondo nello
studio di HTTP
Ci introduce a DOM e a JavaScript: il modulo
può essere reso più interattivo con JavaScript e
con AJAX.
Copyright (C) 2010 - Marco Barbato
Un esempio di FORM



Questo modulo permette di autenticarsi in un
sito
<form action="login.php" method="post">
<fieldset>
<legend>Username</legend>
<input type="text" name="uname" size="8" />
</fieldset>
<fieldset>
<legend>Password</legend>
<input type="password" name="paswd" size="8" />
</fieldset>
<fieldset>
<input type="submit" value="Entra" />
</fieldset>
</form>
Questo form ha molti oggetti e attributi che
devono essere compresi bene.
Copyright (C) 2010 - Marco Barbato
Attributi di FORM



action: URI della risorsa cui è affidata
l'elaborazione dei dati. È sempre un
programma
method: con quale comando di protocollo i dati
vengono inviati al server. Conosciamo già GET,
che consente di invocare un URI completo. Un
altro comando è POST il quale fa pervenire i
dati al server tramite il suo standard input.
Una differenza tra get e post è che con get
vediamo transitare i dati sulla barra degli
Copyright (C) 2010 - Marco Barbato
indirizzzi.
Approfondimento





Stuttura di un messaggo GET
GET /examples/basic/method.php?uname=ppp&paswd=ppp HTTP/1.1
Host: bach
User-Agent: Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.0.19)
....
Struttura di un messaggio POST
POST /examples/basic/method.php HTTP/1.1
Host: bach
...
Content-Type: application/x-www-form-urlencoded
Content-Length: 19
uname=ppp&paswd=ppp
Query string: *[nome=valore]&
Copyright (C) 2010 - Marco Barbato
Campi di un modulo

Testo / Password

Checkbox / Radio

Lista di selezione (combo box)

Lista di selezione multipla

File

Pulsanti / button

Con fieldset posso visualizzare i campi in modo
compatto
Copyright (C) 2010 - Marco Barbato
Conclusione



A questo punto abbiamo gli elementi
fondamentali per costruire un sito web.
Non siamo ancora in grado di agire in
profondità sull'aspetto del sito e dobbiamo
migliorare l'interattività con l'utente.
Per queste cose ci sono 2 strumenti: i CSS e il
Javascript
Copyright (C) 2010 - Marco Barbato
CSS Cascading Style Sheets

Nel mezzo del cammin di nostra vita
mi ritovai per una selva oscura
che la diritta via era smarrita
Dante, Divina Commedia, Inf, I, 1-3

Nulla meglio di questa terzina introduce il
difficile argomento dei CSS (versione 2). Di per
sé l'argomento è una scienza esatta, ma
l'aspetto commerciale rende veramente una
selva oscura il comportamento delle regole
CSS nei vari browser. Ci vuole pazienza e
dedizione.
Copyright (C) 2010 - Marco Barbato
CSS: regole, selettori

I Cascading Style Sheet si chiamano così
perché possono essere sovrapposti per creare
effetti nella pagina web. Un foglio di style è un
file che contiene uno o più selettori fatti così:
selettore {
regola1;
regola2; ...}

regola = proprietà: valore;

Si possono definire anche operatori tra selettori

Dispense
Copyright (C) 2010 - Marco Barbato
DOM




Document Object Model
Modellazione di un documento (libro, giornale,
fumetto, ...) come un oggetto.
W3C ”a platform- and language-neutral
interface that allows programs and scripts to
dynamically access and update the content,
structure and style of documents”
Adottando questa piattaforma siamo in grado di
analizzare e modificare un documento XHTML.
Copyright (C) 2010 - Marco Barbato
DOM /2

<TABLE>
<TBODY>
<TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR>
<TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR>
</TBODY>
</TABLE>
Copyright (C) 2010 - Marco Barbato
DOM /3




In sostanza trasformiamo un documento in un
albero. Le strutture ad albero sono pane per i
denti dei linguaggi di programmazione.
Con i CSS navighiamo quest'albero per stabilire
delle regole di rendering.
Con Javascript navighiamo quest'albero per
compiere delle azioni sul documento.
Il papà di DOM si chiamava DHTML.
Copyright (C) 2010 - Marco Barbato
XML


Ancora un po' di storia: HTML è un derivato di
un linguaggio di tag generale l'SGML (Standard
Generalized Markup Language (ISO 8879:1986
SGML)).
SGML si pone l'ambizioso obiettivo di
rappresentare un documento come un oggetto
strutturato e di fornire un appiglio per i linguaggi
di programmazione affinché lo possano
processare come una struttura dati.
Copyright (C) 2010 - Marco Barbato
XML /2



XML è un altro derivato (o profilo, o
sottoinsieme, o dialetto) di SGML che è più
facile da trattare di SGML per i parser
(analizzatori di testo). X sta per eXtensible.
XML è un linguaggio strutturato che permette di
rappresentare dati, un foglio XML può essere
comparato ad un vero database.
Si può usare XML anche per fare pagine web!
(esempio) oggi tutti i browser supportano
XML + XSLT (esercizi sulle trasformazioni)
Copyright (C) 2010 - Marco Barbato
XHTML



XHTML è una versione di HTML definita in
modo molto rigoroso come un documento XML.
Dobbiamo essere grati dell'avvento di XHTML
perché è un tentativo di rendere rigoroso il
lavoro del web master, che non deve più
impazzire perché determinati tag si comportano
in modo diverso da browser a browser
(ovviamente non tutti la pensano così).
Con XHTML posso trattare la pagina web come
se fosse una struttura dati
Copyright (C) 2010 - Marco Barbato
XHTML /2



Posso infatti elaborare una pagina web con un
programma, ad esempio per leggerla e mettere
via i dati in campi di una tabella di database.
Questo tipo di attività si chiama interoperabilità
e preferisce in ogni caso lo scambio dati tramite
XML.
Posso definire dei tag specializzati (custom)
tramite le Document Type Definition DTD.
Copyright (C) 2010 - Marco Barbato
Una parola sul W3C


Il Consorzio Web, nato a Boston
nel 1994 su iniziativa di TBL,
conta 356 membri (2009).
Tutto ciò che riguarda il web
viene proposto, elaborato,
codificato da questo organismo
di riferimento per il mercato.
Eventuali fughe in avanti
vengono man mano discusse,
razionalizzate e, se accettate,
espresse
in uno standard.
Copyright (C) 2010 - Marco Barbato
XHTML reprise

I documenti devono essere ben-formati (4.1)

I tag sono scritti in minuscolo (4.2)




I tag devono essere rigorosamente chiusi (i tag
singoli si scrivono con <x /> (4.6)) (4.3)
I valori degli attributi vanno chiusi tra ” (4.4)
NON sono ammessi attributi minimizzati (e.g.
checked) (4.5)
L'identificatore di tag (frammento) è id (4.10)
Copyright (C) 2010 - Marco Barbato
XHTML /3





Uso delle tabelle: non ci sono direttive, ma le
direttive WAI-WCAG sull'accessibilità
impongono che non le si usi per scopi di layout.
I tag non devono avere overlap (ed es. È
proibito <p><a></p></a>) (esempio)
L'identificatore pubblico è xhtml1.0 strict (DTD)
La presentazione è esclusivamente demandata
ai CSS
Gli script possibilimente vanno all'esterno.
Copyright (C) 2010 - Marco Barbato
Validatori


Il W3C mette a disposizione uno strumento per
validare la correttezza del codice XHTML. Una
volta validato, se un bowser (user agent) non lo
visualizza come ci si aspetta è per un buco nel
browser.
http://validator.w3.org
Anche i CSS hanno un validatore
ufficiale:http://jigsaw.w3.org/css-validator/
sviluppato da Mozilla
Copyright (C) 2010 - Marco Barbato
Namespaces



Spazi di nomi: sono definizioni di insiemi
particolari di tag. XHTML permette, ad esempio,
di definire in un documento pezzi che si
esprimono con tag non standard.
<p>The following is MathML markup:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply> <log/>
<logbase>
<cn> 3 </cn>
</logbase>
<ci> x </ci>
</apply>
</math>
Ovviamente non è detto che il motore grafico
del browser digerisca...
Copyright (C) 2010 - Marco Barbato
Javascript




Javascript è un OOL interpretato, l'interprete è a
bordo dei browser. Serve per migliorare
l'interattività lato client.
Definiamo le strutture di controllo, le funzioni
built-in, le strutture dati di Javascript.
Javascript è stato usato intensivamente dal
2005 in poi (DOM level 3), prima si facevano
script abbastanza semplici per controllare le
form ad esempio.
Dopo esserci sgrezzati, studieremo la libreria
Copyright (C) 2010 - Marco Barbato
jQuery.
Javascript esempio 1


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Esempio Javascript</title>
<script type="text/javascript">
function ciao() {alert('Ciao'); return true; }
</script>
<style type="text/css">
span.boo {font-weight: bold; color: #f00;}
</style>
</head>
<body>
<p>Come attivare un <span onclick="return ciao();" class="boo">alert</span></p>
</body>
</html>
Un interessante esercizio con cui giocare,
testare il browser e i validatori XHTML/CSS
Copyright (C) 2010 - Marco Barbato
Javascript /2



La sintassi è praticamente identica a Java
(strutture if, for, while, case, operatori prefissi,
postfissi, dichiaratori di classe, accesso a
membri e metodi delle classi, polimorfismo)
Non abbiamo il tempo di spingerci molto in là,
ma faremo qualche esempio con jQuery e con
le API di GoogleMaps (se c'è tempo).
Il Javascript consente di accedere ad un
oggetto del DOM e agire su di esso e sul suo
stile con i metodi consentiti.
Copyright (C) 2010 - Marco Barbato
Javascript /3


Si possono definire anche classi, al modo di
Java, potenziando il browser senza limiti.
Ovviamente se l'interprete Javascript a bordo
del browser è abbastanza moderno.
Queste due risorse forniscono un manuale e
alcuni esercizi di complessità crescente.

http://www.javascriptkit.com/jsref/index.shtml

Esercizi
Copyright (C) 2010 - Marco Barbato
Cose da sviluppare



Navigabilità del sito, albero di navigazione,
chiarezza delle sezioni e degli strumenti
Web services
Media diversi: come trattarli, esempi col
telefonino
Copyright (C) 2010 - Marco Barbato
Come strutturare i siti

Ci sono delle caratteristiche desiderabili per un
sito:



Pulizia (niente rumore, distinzione chiara nelle aree
delle pagine web, comandi e etichette chiare)
Orientamento (dove sono nel sito?)
Per cercare una informazione mi serve sapere
com'è fatto il sito??

Possibilità di interazione

Possibilità di personalizzazione
Copyright (C) 2010 - Marco Barbato
Strutture chiare



Google all'inizio aveva solo il logo, la <input text
/> e due pulsanti (”Search” e ”I feel lucky”).
Sfondo bianco. La sua banalità l'ha fatto il
motore vincente.
Ora ha sviluppato un miriade di funzioni, e ha
dovuto fornire un discreto menu in alto. Ma
continua ad avere una notevole semplicità
nonostante sia estremamente complesso.
Trovo spesso noioso raggiungere Analytics.
Copyright (C) 2010 - Marco Barbato
Strutture chiare /2




SI può parlare di politica, di news, di turismo, di
siderurgia o medicina: un menu serve sempre.
Un logo identifica a colpo d'occhio un brand,
una realtà.
Contenuti dinamici importanti da mettere nella
home (se ce ne sono)
Una funzione di ricerca, di tagging, note di
copyright, una barra breadcrumb. O un albero
di navigazione (mappa del sito).
Copyright (C) 2010 - Marco Barbato
Strutture chiare /3

Ma per il turismo? Voglio sapere:

dove devo andare (→ Google Maps),

che tempo fa (→ webservice meteo),

dove posso dormire (database alberghi e ristori),



cosa posso fare una volta arrivato (offerte di svago,
benessere e cultura),
quanto spendo (→ listini aggiornati, offerte, form di
interrogazione del database).
Voglio trovare le info anche se non sono davanti al
pc (mobile)
Copyright (C) 2010 - Marco Barbato
Web 2.0


Web Semantico: infrastruttura comune che
consente ai dati di essere condivisi e riutilizzati
da applicazioni, imprese e community. Nel Web
classico sono i documenti (risorse) ad essere
condivisi, qui ci si vuole spingere ad entrare nei
documenti e a condividerne gli elementi che li
costituiscono.
La fondamentale filosofia della circolazione dei
dati (ovviamente con le necessarie regole) unita
alla partecipazione nella loro produzione è stata
etichettata genericamente
con Web 2.0.
Copyright (C) 2010 - Marco Barbato
Web 2.0 /2



Non è più comunicazione verticale (il
webmaster pubblica e io leggo) ma orizzontale
(tutti possono pubblicare o postare un
commento o un tag, o elaborare dati)
Strumenti Web 2.0 sono il social tagging, il blog,
il page rank di Google, gli RSS, il wiki che
fornisce strumenti di publishing.
La definizione è di Tim O'Reilly. Interessante
leggere il suo articolo [it].
Copyright (C) 2010 - Marco Barbato
Accessibility



”The power of the Web is in its universality.
Access by everyone regardless of disability is
an essential aspect” [TBL, WAI]
Dall'inventore del Web fino alle organizzazioni,
tutti hanno preso in considerazione i benefici di
un web accessibile a tutti.
Ma cosa vuol dire precisamente accessibilità?

Semplicemente la facoltà di usare il web e potervi
contribuire da parte delle persone disabili e anziane
[WAI]
Copyright (C) 2010 - Marco Barbato
Accessibilty /2


La legislazione italiana è più precisa sulla
definizione. Nel 2004 il Parlamento vara la
Legge 4/2004 promossa dal Ministro delle
Infrastrutture Lucio Stanca dell'allora governo
Berlusconi.
La legge enuncia 22 Requisiti per poter definire
un sito come accessibile; definisce metodologie
e criteri di valutazione; è prevista l'applicazione
da uno logo a seconda del grado di aderenza ai
requisiti. Sono requisiti più stretti delle linee
guida del WAI-WCAG.
Copyright (C) 2010 - Marco Barbato