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

FONT-STILE, FONT-WEIGHT 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 <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 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 | line- through

SPAZIATURA FRA PAROLE E CARATTERI 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 }

TRASFORMAZIONI DEL CARATTERE 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

FORMATTAZIONE DELLE TABELLE 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à 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; }

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> </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