testo - labinf - Politecnico di Torino

Programmazione in ambienti distribuiti
(01FQTCX, 06EKEEC, 02HDFCX, 01FELCX)
AA 2005-06, Esercitazione n. 4
Introduzione
Per scrivere file HTML occorre usare un normale editor di testo (es. Notepad, Blocco appunti,
GVIM). Il file può avere indifferentemente estensione .HTM o .HTML.
Se le pagine sono di tipo statico e sono scritte correttamente con link relativi, allora è possibile
posizionarle in una qualunque cartella del filesystem e navigare direttamente aprendole con un
qualunque browser oppure installarle su un server web vero (vedere istruzioni sulle slide PADlab).
Se le pagine sono di tipo dinamico (server-side) allora è possibile visualizzarle solo se installate su
un server web vero e proprio.
Per tutti gli esercizi proposti, visualizzare sempre le pagine con almeno due browser diversi (es. IE
e Firefox/Mozilla) e cambiando la risoluzione dello schermo (es. 800x600, 1280x1024) al fine di
verificare la qualità grafica della soluzione realizzata.
Per effettuare il debugging negli esercizi proposti, usare gli strumenti di Firefox (alcuni standard,
alcuni aggiuntivi, installati come estensioni). Esempi:
• per i form: tasto dx del mouse > View-Page Info > Forms e Web developer toolbar (da menù o
tasto dx del mouse) > Forms > View forms information
• Web developer toolbar > CSS > Edit CSS (per verificare al volo le modifiche sui fogli CSS
• Web developer toolbar > Miscellaneous > Edit HTML (per verificare al volo le modifiche su
HTML
• DOM inspector (per verificare gli oggetti DOM ed i loro valori) e Javascript Debugger
Esercizio 4.1
Sviluppare un insieme di pagine web personali, tra loro collegate mediante link:
• una home page dello studente, coi suoi dati sintetici (nome, cognome, luogo e data di
nascita)
• una pagina che contenga un sintetico CV
• una pagina che contiene nomi e voti degli esami superati
Tutte le pagine devono contenere nella stessa posizione:
• un menù che permetta di andare ad una qualunque delle tre (home, CV, voti)
• un footer che identifichi l’autore e ne fornisca l’indirizzo mail
Si faccia attenzione ad usare quanto più possibile una formattazione logica ed indipendente dalle
dimensioni dello schermo su cui le pagine vengono visualizzate.
Si usino sempre (quando possibile) link relativi e si inserisca anche qualche link a pagine esterne
pertinenti (es. al Politecnico di Torino, alla propria città di nascita).
Esercizio 4.2
Si implementi almeno una delle pagine dell’esercizio precedente tramite un sistema di
composizione di pagine HTML (ad esempio, Mozilla Composer oppure MS-Word salvando il
risultato in HTML).
Si confronti il codice HTML come quantità e qualità con quello generato a mano nell’esercizio 4.1.
Esercizio 4.3
Si controlli la correttezza di tutte le pagine generate negli esercizi precedenti sfruttando il servizio
di validazione del W3C http://validator.w3.org
Si correggano eventuali errori e quando le pagine sono corrette si inserisca il logo di “HTML
valido” seguendo le istruzioni della pagina citata.
Esercizio 4.4
Alla pagina HTML sviluppata nell’esercizio 4.1 applicare in sequenza tre fogli di stile CSS diversi,
ciascuno memorizzato in un proprio file esterno. I CSS devono specificare:
• lo stile dei titoli (H1...H6) (colore)
• lo stile del body (font, il colore dei font e la loro grandezza)
• specificare tre classi per il paragrafo (P), left, center e right per posizionare rispettivamente
il testo a sinistra, al centro o a destra
Nella pagina HTML si definiscano inoltre degli stili in modo che il colore dello sfondo e del testo di
tutti i link reagiscano in modo dinamico al passaggio del mouse.
Si controlli anche la correttezza dei fogli di stile CSS mediante il seguente servizio di validazione:
http://jigsaw.w3.org/css-validator/
Si correggano eventuali errori e quando le pagine sono corrette si inseriscano i loghi di “HTML
valido” e “CSS valido” seguendo le istruzioni della pagina citata.
Esercizio 4.5
Scrivere una pagina HTML che contenga un form con i campi della figura 4.1 alla quale siano
applicati gli stili implementati nell’esercizio 4.4 con l’aggiunta di stili “inline” che definiscano:
• colore dello sfondo del tasto submit
• colore dello sfondo del menù a tendina
• colore dello sfondo dei textfield
(Figura 4.1)
Si controlli la correttezza di tutte le pagine generate negli esercizi precedenti sfruttando i servizi di
validazione del W3C come indicato precedentemente.
Esercizio 4.6
Scrivere delle funzioni JavaScript che siano eseguite alla pressione del pulsante “Submit” del form
dell’esercizio 4.5 per controllare che:
• il campo Nome non sia vuoto e sia lungo almeno 3 caratteri
• il campo Cognome non sia vuoto e sia lungo almeno 3 caratteri
• nel campo e-mail (se contiene dati) sia presente il carattere @ ed almeno un . dopo di esso
• se inserito nel campo l’anno di nascita sia compreso tra il 1900 e il 2003
• il mese di nascita sia compreso tra 1 e 12
• se tra i radio button “Titolo di studio” è stato selezionato “Altro” allora il campo “Se altro,
specificare” non sia vuoto
Gli script devono comunicare all’utente eventuali anomalie mediante un messaggio che identifichi
chiaramente il tipo d’errore.