Newer
Older
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
*11 aprile 2019*
### Obiettivi:
1. Comprendere la struttura delle regole CSS
2. Comprendere il funzionamento dei selettori
3. Comprendere il significato dei principali attributi
4. Costruire una pagina HTML
### Strumenti:
- Browser (consigliato: Google Chrome)
- Editor (consigliato: [WebStorm](https://www.jetbrains.com/webstorm/))
- Reference CSS: <https://www.w3schools.com/cssref/default.asp>
Per avviare WebStorm ed effettuare il checkout del progetto dal repository personale fare riferimento al [tutorial](https://oop.polito.it/VIQ/Git.html).
Esercizio 1
-----------
**Dati**
Utilizzare i file HTML presenti nella cartella `Esercizio_1` del progetto.
**Attività**
Costruire un foglio di stile da applicare ad entrambe le pagine.
- Definire una palette di colori per lo sfondo, il testo normale e per i titoli (`h1`, `h2`, ...).
Come spunto si può utilizzare ad esempio <http://paletton.com/>.
Per i principi di integrità visuale, i colori scelti devono essere:
- chiaramente distinguibili: da qui la scelta "*ovvia*" del bianco e del nero (o di due colori ben distinguibili per luminosità);
- utili: i colori saturi, che attirano l'attenzione, dovrebbero essere usati, con parsimonia, quanto sono utili per evidenziare alcuni elementi (ad esempio i titoli).
- Definire il tipo di carattere da utilizzare per il testo normale e per i titoli.
Si ricorda che:
- i titoli devono essere sufficientemente diversi dal testo principale in termini di forma (es. serif vs. sans-serif), dimensione, e colore;
- in generale la lettura di lunghi frammenti di testo è più facile con font serif;
- è possibile specificare nomi specifici di font o semplicemente le famiglie. Per i nomi utilizzare, ad esempio, quelli presenti nel sistema in uso (ad esempio l'elenco dei font in *Word*).
- Definire le caratteristiche del testo: allineamento (`text-align`), rientro (`text-indent`) e interlinea.
L'interlinea (`line-height`) deve essere proporzionata al testo. Provare con diversi valori: dal `100%` (interlinea singola) al `200%` (interlinea doppia).
- Evidenziare i link in maniera appropriata.
Definire uno stile per gli stati `:link`, `:hover`, `:active` e `:visited` che possono operare su vari attributi, ad esempio `color`, `background-color`, `border`.
- Definire lo stile per le liste, sia numerate che non-numerate.
Provare a definire un'immagine da utilizzare come punto; è possibile utilizzare *Paint* per disegnare l'immagine, ad esempio: 
È importante scegliere una dimensione adeguata per le immagini-punto.
- Definire degli stili alternativi per le tabelle.
In generale si applicano tutte le linee guida illustrate a lezione.
La separazione delle righe della tabella può essere effettuata con le seguenti strategie:
- utilizzando un'ampia spaziatura verticale tra le righe stesse (classe `widerow`);
- utilizzando delle linee orizzontali, tenui e non predominanti (classe `hrules`);
- utilizzando dei colori di sfondo alternati (classe `bandedrows`).
Definire le tre classi (indicate tra parentesi) da assegnare alle tabelle per utilizzare le tre varianti.
I titoli delle tabelle devono essere evidenziati e separati dal resto della tabella:
- con delle linee (classe `hhlines`);
- utilizzando uno sfondo significativamente diverso (classe `hband`), eventualmente invertendo il rapporto di luminosità testo/sfondo del resto del documento, es. testo bianco su sfondo colorato (classe `reverse`).
Definire le tre classi (indicate tra parentesi) da assegnare alle tabelle per utilizzare le tre varianti.
Per applicare due diverse classi (ad esempio una per le righe e una per l'intestazione) è sufficiente indicare entrambe le classi separate da spazio, per esempio `<table class="hrules reverse">`. È importante anche definire uno stile di default (quando non è definita nessuna classe).
- Definire uno stile per le sezioni (`<section>`).
Le sezioni dovrebbero essere separate l'una dall'altra. Ad esempio con delle linee orizzontali, racchiuse in bordi oppure con sfondi distinti.
- Definire uno stile per le immagini.
Le immagini possono essere posizionate a destra (*floating*) della pagina con il testo che viene disposto a fianco.
- Definire lo stile per il menù di navigazione (`<nav>`).
I link definiti dentro il menù devono essere rappresentati in modo che il seguente codice HTML di esempio:
<nav>
<a href="#dati">Dati personali</a>
<a href="#lavoro">Lavoro</a>
<a href="#formazione">Formazione</a>
<a href="#competenze">Competenze</a>
<a href="#interessi">Interessi</a>
</nav>
sia visualizzato come una barra di menù simile alla seguente:
- Definire lo stile per il `<footer>`.
Il footer deve essere disposto in fondo alla pagina.
Per disporlo in fondo alla pagina occorre utilizzare il posizionamento:
- in fondo alla pagina, non sapendo quanto è lunga la pagina è possibile utilizzare come posizione l'attributo `bottom=0`, ovvero a distanza nulla dal fondo del contenitore (che è `<body>`, ovvero la pagina);
- utilizzare il posizionamento (`position`) di tipo `fixed`, rispetto alla finestra (cosa cambia se il posizionamento è invece di tipo `absolute`?);
- il posizionamento assoluto sovrappone l'elemento al resto della pagina quindi è necessario lasciare un po' di spazio in fondo alla pagina per poter posizionare il footer. Per allocare lo spazio è necessario conoscere le dimensioni del footer che quindi deve avere una dimensione (`height`) predefinita.
Esercizio 2
-----------
**Dati**
Utilizzare la classifica del campionato di calcio di Serie A disponibile nel file [SerieA.csv](Esercizio_2/SerieA.csv).
**Attività**
- Costruire una pagina HTML contente una tabella in cui sono riportati i dati della classifica, **SENZA FORMATTAZIONE**.
- Definire uno stile che permetta di:
- evidenziare i titoli della tabella;
- separare le linee con uno sfondo alternato;
- visualizzare la prima cella delle prime due righe (titoli esclusi) di colore blu (qualificate in Champions League);
- visualizzare la prima cella della terza riga (titoli esclusi) di colore verde (qualificata ai preliminari di Champion League);
- visualizzare la prima cella delle righe 4 e 5 (titoli esclusi) di colore giallo (qualificate in Europa League);
- visualizzare la prima cella delle ultime tre righe (titoli esclusi) di colore rosso (retrocesse in serie B).