Note sull’esame L’esame è composto da due parti: 1) valutazione del progetto -> determinerà un...

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

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)


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


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 <font-size> 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 }

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 }


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 |

line-through


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 }


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 fonts1) 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

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à border-collapse

• I valori ammessi sono:collapse | separate

• Quando i bordi sono separati, può essere utile non mostrare le celle vuote:

table { empty-cells: hide; }


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; }


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.


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>

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


Note sull’esame L’esame è composto da due parti: 1) valutazione del progetto -> determinerà un...

Documents

Transcript of Note sull’esame L’esame è composto da due parti: 1) valutazione del progetto -> determinerà un...