Note sull’esame
• L’esame è composto da due parti:
• 1) valutazione del progetto -> determinerà un voto di gruppo
• 2) valutazione individuale -> determinera un voto personale
• Voto d’esame:
Media aritmetica fra la valutazione del progetto e la
valutazione individuale
Cosa posso rifiutare?
• Potete rifiutare il voto individuale dello scritto e rifarlo all’appello
successivo. In questo caso manterremo comunque valido il voto
collettivo per il progetto.
• Potete rifiutare come gruppo la valutazione del progetto. In questo
caso manterremo comunque validi i voti individuali e ripresenterete il
progetto con le eventuali modifiche che vi saranno indicate (non
dovrete rifare l’intero progetto, ma solo incrementarlo)
Cosa non potete fare?
• Rifiutare individualmente il voto di gruppo. Per rifiutare il voto di
gruppo ci deve essere accordo unanime di tutti i membri del gruppo
E’ tutto chiaro?
Font, caratteri e gestione del
testo
Web safe
fonts
PRIMA PARTE: CARATTERI E TESTO
CARATTERI E TESTO
• Per i caratteri sono disponibili le seguenti proprietà:
•
•
•
•
•
•
font-family: specifica il tipo di carattere
font-size: specifica la dimensione del carattere
font-style: per specificare il corsivo
font-weight: per specificare il grassetto
font-variant: per specificare il maiuscoletto
font: per specificare contemporaneamente le precedenti proprietà
PRIMA PARTE: CARATTERI E TESTO
FONT-FAMILY
• Attraverso font-family è possibile specificare diversi tipi di carattere:
body {
font-family:verdana,arial,sans-serif;
}
• Il carattere usato sarà il primo, fra quelli specificati, che risulta essere
disponibile nel computer dell’utente
• È bene concludere l’elenco con una famiglia generica da usare nel caso in cui
gli altri tipi di carattere non siano disponibili. Le famiglie generiche sono:
• serif (ad esempio il Times)
• sans-serif (ad esempio il Verdana)
• monospace (ad esempio il Courier)
PRIMA PARTE: CARATTERI E TESTO
FONT-SIZE
• Con font-size è possibile specificare la dimensione del carattere
• Possono essere utilizzate unità di lunghezza (sono consigliate quelle relative ad eccezione dei
pixel) e unità percentuali
• È sconsigliato l’uso dell’unità px poiché con Internet Explorer per Windows il testo sarebbe
non ridimensionabile
• Le unità relative e le percentuali si riferiscono alle dimensioni dell’elemento padre
• Usare le unità percentuali corrisponde ad utilizzare le unità em
PRIMA PARTE: CARATTERI E TESTO
FONT-STILE, FONT-WEIGHT
• Tramite font-style è possibile formattare il testo in corsivo.
• i valori ammessi sono: normal | italic
• Tramite font-weight è possibile formattare il testo in grassetto.
• i valori ammessi sono: normal | bold
• Sono ammessi altri valori ma sono scarsamente supportati dai programmi utente
FONT
• Tramite font è possibile specificare tutte le proprietà del carattere
contemporaneamente
• La sintassi ammessa è:
•
•
•
•
•
•
•
<font-style>
<font-weight>
<font-size>
<line-height>
<font-family>
Non è necessario specificare tutte le proprietà
Perché la dichiarazione sia valida è necessario specificare almeno <fontsize> e <font-family>
• Assieme alla dimensione del testo è possibile specificare l’interlinea tramite
<font-size>/<line-height>
Esempio:
h1 { font : bold 2em/1.5em georgia, serif }
PRIMA PARTE: CARATTERI E TESTO
ALLINEAMENTO DEL TESTO
• L’allineamento orizzontale del testo può essere stabilito tramite
la proprietà text-align
• Valori ammessi:
left | right | center | justify
• L’indentazione è stabilita tramite text-indent
• Sono ammesse unità di lunghezza o unità percentuali
• Esempio:
p { text-indent: 2em }
PRIMA PARTE: CARATTERI E TESTO
DECORAZIONE DEL TESTO
• Il testo può essere decorato con
sottolineature (da usarsi essenzialmente
con i link)
• Eventuali decorazioni vanno specificate
tramite la proprietà text-decoration
• I valori ammessi sono:
none | underline | overline | linethrough
PRIMA PARTE: CARATTERI E TESTO
SPAZIATURA FRA PAROLE E CARATTERI
• Lo spazio predefinito fra lettere e parole può essere modificato tramite le
proprietà
letter-spacing e word-spacing
• Sono ammesse tutte le diverse unità di lunghezza
• Il valore specificato può essere positivo o negativo
• Il valore specificato non indica la distanza fra le varie lettere o parole ma
va a sommarsi alla distanza predefinita
Esempio
h1{ letter-spacing:0.2em;word-spacing:0.5em }
PRIMA PARTE: CARATTERI E TESTO
TRASFORMAZIONI DEL CARATTERE
• Tramite la proprietà text-transform è possibile gestire i caratteri
maiuscoli e minuscoli indipendentemente da quanto specificato nel
codice
• Sono ammessi i seguenti valori:
• capitalize: la prima lettera di ogni parola è rappresentata in
maiuscolo
• uppercase: tutte le lettere di ogni parola sono rappresentate in
maiuscolo
• lowercase: tutte le lettere di ogni parola sono rappresentate in
minuscolo
• none: nessuna variazione
Esempio:
h1 { font-variant: uppercase }
h2 { font-variant: capitalize }
Google fonts
1) Basta importare un css esterno:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
2) E richiamarlo dove ci serve. Avremo ora un set disponibile in
piu di caratteri che funziona online.
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
https://developers.google.com/fonts/docs/getting_started
http://www.google.com/fonts
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
FORMATTAZIONE DELLE TABELLE
• Attraverso i CSS è possibile formattare efficacemente le tabelle
• I vari attributi delle tabelle hanno un corrispondenza con apposite proprietà
CSS:
• Padding interno ad una cella  padding
• Spaziatura fra le celle  border-spacing
• border  bordo della tabella ( ex: 1px solid red)
• width  largehzza della tabella
• È bene specificare la dimensione del testo per le tabelle (ad esempio
table{font-size:1em}) poiché Internet Explorer tende a ignorare le
impostazioni scelte per <body>
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
BORDER-COLLAPSE
• I bordi della tabella e delle singole celle sono specificati
separatamente:
table { border:3px solid #900; }
td,th { border:1px solid #900; }
• Automaticamente, il browser lascia dello spazio fra i
bordi delle singole celle
• Per eliminare tale spazio si utilizza la proprietà bordercollapse
• I valori ammessi sono:
collapse | separate
• Quando i bordi sono separati, può essere utile non
mostrare le celle vuote:
table { empty-cells: hide; }
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
RIGHE E COLONNE
• Specificando opportunamente i bordi è possibile ottenere
una griglia solo orizzontale o solo verticale
• In tutti e due i casi è necessario impostare i bordi in
modo che collassino
table {
border-collapse: collapse;
}
• Griglia orizzontale
td,th {
border:1px #900;
border-style: solid none;
}
• Griglia verticale
td,th { border:1px solid #900; }
td{ border-style: none solid; }
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
Border-collapse
• collapse: se viene impostato un bordo, le celle della tabella lo
condividono;
• separate: se viene impostato un bordo, ogni cella ha il suo,
separato dalle altre; lo spazio tra le celle e tra i bordi si
imposta con la proprietà border-spacing.
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
INTESTAZIONE E RIGHE
• L’intestazione della tabella, identificabile tramite il tag
<thead> oppure <th> può essere formattata
indipendentemente dal resto della tabella:
thead {
background:#ffc;
color:#000;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
• Attraverso le classi è possibile evidenziare meglio le diverse
righe alternandone il colore di sfondo
tr.d {background:#eee;color:#000}
tr.p {background:#fff;color:#000}
<table summary="...">
<thead><tr><th>…</th>…</tr></thead>
<tbody>
<tr class="d"><td>…</td>…</tr>
<tr class="p"><td>…</td>…</tr>
<tr class="d"><td>…</td>…</tr>
<tr class="p"><td>…</td>…</tr>
</tbody>
</table>
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
SPAZIO FRA CELLE
• Lo spazio fra le celle può essere specificato attraverso
la proprietà border-spacing
• La proprietà border-spacing ha effetto quando i
bordi delle singole celle non collassano
• La proprietà border-spacing ammette come valori
solo delle lunghezze:
table { border-spacing:20px; }
• La proprietà border-spacing non è supportata da
Internet Explorer