della costruzione di un sito web 0 20 30 40 50 60 70 80 90 10 100 Research & speci cation Functional speci cation, project management Content development & analysis User experience design Site production & engineering Interface & usability Graphic design Building & programming Requirements User research Schedule budget Content inventory Process & task analysis Site map Page wireframes Programming & engineering Page production & linking Quality & testing Prototypes Visual design Content analysis & development Project management da “Web Style Guide”. http://webstyleguide.com 3
del design ‣ Sketching (paper prototyping) - Prima bozza del sito ‣ Wireframing - Struttura delle pagine, maggior dettaglio rispetto alla fase iniziale ‣ Design prototyping - Realizzazione della veste grafica definitiva per l’approvazione prima dello sviluppo vero e proprio 4
‣ Come scegliere uno strumento di prototyping: - Rapidità di realizzazione e modifica - Possibilità di simulare interattività - Rapida conversione in HTML Risorse: http://www.smashingmagazine.com/tag/prototyping/ 8
del web designer ‣ Un editor (IDE) HTML e CSS - Adobe Dreamweaver CS6 ‣ Un browser moderno - Firefox o Chrome con le estensioni: ‣ Firebug → https://getfirebug.com/ (solo Firefox) ‣ Web developer → http://chrispederick.com/work/web-developer/ ‣ Colorzilla → http://www.colorzilla.com/ ‣ Strumenti di testing - Browser e dispositivi mobili - Sistemi di testing remoto ‣ www.browserstack.com ‣ browsershots.org 10
Grid System → www.thegridsystem.org - 960 Grid System → 960.gs - Skeleton → www.getskeleton.com - Twitter Bootstrap → twitter.github.io/bootstrap - Modular Grid pattern → modulargrid.org - The Javascript grid → javascriptgrid.org Risorse Perché utilizzare le griglie ‣ Il design con le griglie: - è una metodologia progettuale - permette un design più regolare e modulare - nel web, permette l’utilizzo di strutture predefinite (framework) che velocizzano e rendono meno ripetitiva la progettazione - è particolarmente utile nel design responsivo 12
system ‣ 960 Grid System è un framework css basato su un layout statico a 12 o 16 colonne - Il nome deriva dalla larghezza del layout, 960 pixel appunto, adatto a schermi con risoluzione 1024 pixel - Creato da Nathan Smith intorno al 2010, è uno dei più vecchi e più diffusi framework a griglie ‣ Il framework può essere scaricato dal sito 960.gs - Nel file di download sono presenti varie risorse, tra cui un plugin per Fireworks e una serie di file pdf per lo sketching 13
Skeleton è un framework basato su 960.gs creato da Dave Gamache - È un framework “responsivo”, cioè in grado di adattarsi a diverse risoluzioni di schermo - Il framework può essere scaricato dal sito www.getskeleton.com - È il framework che utilizzeremo durante questo corso 14
numero-7-8-giugno-2010/71-web-design- reattivo - www.abookapart.com/products/responsive- web-design Risorse Design responsivo ‣ Il Responsive Web Design è una tecnica per la realizzazione di siti web che prevede che le pagine adattino il proprio layout in funzione della risoluzione dello schermo - La tecnica è stata definita da Ethan Marcotte in un articolo su “A List Apart” e successivamente nel libro “Responsive web design” 16
- webdesign.tutsplus.com/articles/design- theory/setting-web-type-to-a-baseline-grid - dev.opera.com/articles/view/setting-web-type- to-a-baseline-grid/ - 24ways.org/2006/compose-to-a-vertical- rhythm/ - coding.smashingmagazine.com/2012/12/17/ css-baseline-the-good-the-bad-and-the-ugly/ - keyes.ie/things/baseliner Risorse Griglie di interlinea 18 ‣ La progettazione di un sito web dovrebbe tener conto anche del “ritmo” verticale, ovvero dell’interlinea
pagine web ‣ HTML e CSS corrispondono a due elementi fondamentali delle pagine web ‣ Possiamo identificare con: - Il codice HTML → la struttura fisica della pagina (lo scheletro) - Il CSS → l’aspetto presentazionale (visual) e di interfaccia - Il codice Javascript → la parte funzionale e interattiva (lato client) 21
il caricamento di una pagina 23 1. L’utente richiede una pagina inserendo un URL nel proprio browser Richiesta Risposta 2. Il server remoto interrogato recupera o genera il file HTML richiesto e lo restituisce al browser 3. Il browser analizza il file HTML e richiede eventuali file collegati (se non disponibili in cache) Web Richiesta (CSS, JS, immagini, video, ecc.) Risposta
rappresentazione ‣ ll codice HTML rappresenta la struttura della pagina e permette di organizzare il contenuto. ‣ Quest’ultimo deve essere fruibile indipendentemente dal tipo di media (visuale, audio, braille, ecc...) ‣ Il codice HTML non deve quindi contenere nulla che sia legato alla rappresentazione dei dati, operazione che è eseguita dai fogli CSS - vedi → www.csszengarden.com 24
(Hypertext Markup Language) è un linguaggio di formattazione a marcatori utilizzato per la creazione di documenti ipertestuali - È stato sviluppato verso la fine degli anni ottanta da Tim Berners-Lee al Cern di Ginevra ‣ Ogni elemento HTML è racchiuso all’interno di marcature dette “tag”, racchiuse tra i segni “<” e “>” - Ogni tag può inoltre avere uno o più “attributi” 25 Il linguaggio HTML
27 Questa è una frase in html ‣ Notare che: - Il testo è formattato in Times perché questa è l’impostazione di default di quasi tutti i browser, ma il codice precedente non contiene nessuna indicazione al riguardo - Il grassetto è indicato con il tag “b”, ma, nell’ottica di rendere il contenuto indipendente dal tipo di media utilizzato, sarebbe stato più corretto utilizzare il tag “strong”, ad indicare un rafforzamento del testo, non necessariamente grassetto (ad esempio in questa frase viene utilizzato un cambio di colore)
un tag HTML 28 <p id="riga1">testo</p> ⎧ ⎪ ⎨ ⎪ ⎩ Tag di apertura <br> Tag “vuoto” (non ha apertura-chiusura) Nome ⎧ ⎨ ⎩ attributo Tag di chiusura <br /> Tag vuoto in xhtml
Gli attributi forniscono informazioni e proprietà aggiuntive agli elementi HTML ‣ Alcuni elementi sono specifici di alcuni tag, altri invece sono comuni a tutti gli elementi - Questi ultimi possono essere suddivisi in attributi di base e attributi legati agli eventi 29
caratteri 30 ‣ Perché una pagina web possa rappresentare correttamente tutti i caratteri presenti nella pagina originale, è necessario che il browser utilizzi la stessa codifica impostata nella pagina HTML - La codifica utilizzata viene dichiarata con il meta-tag “charset” - I linguaggi occidentali utilizzano prevalentemente il set ISO-8859-1 (detto anche Latin-1)
caratteri ‣ I set di caratteri basati sui caratteri latini hanno una parte comune a tutti di circa 127 caratteri - Sono inclusi caratteri base (numeri, lettere maiuscole e minuscole, punteggiatura) e alcuni caratteri di controllo - Gli altri caratteri possono essere rappresentati con “Entità HTML”, ovvero rappresentazioni che utilizzano i 127 caratteri standard (esempio: è → è). Ovviamente il font utilizzato dal client deve contenere il glifo corrispondente 31
caratteri ‣ È però possibile anche utilizzare un set di caratteri più esteso che contiene tutti o quasi i glifi e le codifiche possibili (ad esclusione dei font asiatici): il set UTF-8 - Esiste anche una versione ancora più ampia: UTF-16 ‣ Risorse - www.w3schools.com/tags/ref_charactersets.asp - www.unicode.org/charts/ - coding.smashingmagazine.com/2012/06/06/all-about-unicode- utf8-character-sets/ - copypastecharacter.com/ 33
pagina HTML 35 <!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-‐8"> <title>Questa è una pagina di prova</title> <style type="text/css" media="screen"> <!-‐-‐ h1 { color: #f00} -‐-‐> </style> </head> <body> <h1>Un pagina web</h1> <p>Lorem ipsum dolor sit amet</p> </body> </html> Doctype: dichiara la versione html utilizzata Set di caratteri utilizzato Foglio stile incorporato Titolo della finestra Contenuto della pagina
Model 37 ‣ Il Document Object Model (DOM) è una rappresentazione della pagina web come modello orientato agli oggetti ‣ Questo permette un approccio diretto ad ogni elemento della pagina seguendo il suo “percorso” dalla radice della pagina - La rappresentazioni ad oggetti è particolarmente importante e indispensabile per applicazioni Javascript che eseguano manipolazioni della pagina (DOM injection)
38 <!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-‐8"> <title>Questa è una pagina di prova</title> </head> <body> <h1>Un pagina web</h1> <p>Lorem ipsum dolor sit amet</p> </body> </html> HTML HEAD BODY TITLE H1 P Text Text Text
formed” ‣ È essenziale che il documento sia ben costruito, ovvero che sia Well Formed: - I tag devono essere nidificati correttamente - Vanno utilizzati solo tag e attributi corrispondenti al doctype dichiarato - Tutti i tag devono essere chiusi correttamente ‣ È importare validare le pagine HTML per assicurarsi della loro correttezza - validator.w3.org 39
validazione: il risultato 41 ↑ TOP Validation Output: 4 Errors Line 8, Column 13: Attribute font not allowed on element h1 at this point. <h1 font="3" > Un pagina web</h1> Line 9, Column 26: End tag p seen, but there were open elements. <p><strong>Lorem ipsum</p > </strong> Line 9, Column 11: Unclosed element strong. <p><strong > Lorem ipsum</p></strong> Line 9, Column 35: No strong element in scope but a strong end tag seen. <p><strong>Lorem ipsum</p></strong > ↑ TOP ✉ ✉ ✉ ✉
42 Versione Anno Note 1-2 1991-1996 Versioni iniziali 3.2 1997 La prima versione a larga diffusione 4.0 - 4.0.1 1997-1999 Tre tipologie di documenti (Strict, Transitional, Frameset). Vengono deprecati i tag di presentazione, in favore dei CSS XHTML 1.0 XHTML 1.1 2000 2001 Riformulazione di HTML 4 in XML HTML 5 2012 (Candidate Recommendation)
L’XHTML (Extensible HyperText Markup Language) è una riformulazione dell’HTML in XML ‣ L’obiettivo è un uso dei tag più restrittivo, maggiormente vincolato alla struttura del documento e non alla sua rappresentazione grafica - La separazione tra struttura e presentazione è particolarmente importante se si considerano i temi legati all’accessibilità 43
XHTML ‣ L’XHTML non è particolarmente diverso dall’HTML, ma è più rigido rispetto ad alcuni elementi, tra cui: - Tutti i tag devono essere chiusi; anche in quelli “singoli” va indicata la chiusura con uno slash: <br> → <br /> - Tag e attributi vanno scritti in minuscolo - Tutti i valori degli attributi devono essere delimitati da virgolette e rappresentati con entità html ‣ È buona pratica attenersi agli ultimi due punti per tutte le versioni sia HTML che XHTML 44
‣ La parte head dei un documento, può contenere informazioni non fruibili direttamente dall’utente, ma utilizzati da motori ricerca, spider, ecc. per ottenere dei dati ‣ Queste informazioni sono veicolate dai meta tags - Uno dei più comuni è il meta “description”, usato per fornire una rapidissima descrizione della pagina ‣ <meta name="description" content="La mia pagina"> - I meta tags possono anche fornire istruzioni per il dispositivo che visualizza il documento ‣ <meta name="viewport" content="width=device-width, initial-scale=1.0"> 45
‣ Un altro uso dei meta tags è quello di fornire degli “Header HTTP”, ovvero istruzioni utilizzate dal server che invia la pagina - Ad esempio, questo meta tag forza il redirect su un altro documento dopo 5 secondi: ‣ <meta http-equiv="refresh" content="5; url=nuova_pagina.html"> ‣ Risorse: - www.w3schools.com/tags/tag_meta.asp - it.wikipedia.org/wiki/Meta_tag 46
CSS ‣ Nella sezione Head di un documento sono inoltre presenti due elementi fondamentali: script e css ‣ Possono essere incorporati nel documento o richiamati da un file esterno - La seconda ipotesi è generalmente preferibile (specialmente se i file sono “sostanziosi”), perché in questo modo si sfrutta la cache del browser 47
L’ultima versione dell’HTML, la 5 introduce nuovi tag e nuove API per il controllo della pagina - HTML5 è attualmente allo stato di Candidate Recommendation - La scelta del W3C è stata preceduta da lunghi dibattiti tra i sostenitori di HTML5 e quelli a favore di XHTML2, alla fine ha prevalso l’approccio meno rigido di HTML5 - Le API (Application Program Interface) sono i metodi con i quali lo sviluppatore accede alle funzionalità di un sistema (nel nostro caso, il browser). HTML5 ha introdotto molte importanti API Javascript 50
Nuovi tag e attributi - Elementi strutturali: header, footer, nav, aside, section, article, ecc. - Elementi legati all’utilizzo di contenuti multimediali: audio, video, ecc. - Nuovi tag e soprattuto nuovi attributi per la gestione dei form - Nuovo elemento “canvas” per il disegno di grafici e la manipolazione di immagini via javascript ‣ Sono stati rimossi alcuni tag html 4 - Gestione frames e alcuni tag di carattere presentazionale (big, center, ecc.) 51
HTML5 ‣ HTML5 è ormai ampiamente supportato da tutti i browser più recenti ‣ Il punto debole è rappresentato da Explorer 8, che mantiene ancora una percentuale non trascurabile di installato - La 8 è la versione di Explorer più moderna installabile su Windows XP ‣ Per ovviare a questi problemi esistono delle librerie javascript in grado di estendere, parzialmente, le nuove funzionalità a IE8 52
Desktop 54 Mondo Italia Desktop Mobile Desktop Mobile 7,9% 14,2% 92,1% 85,8% Percentuale Browser Desktop e Mobile nel mondo e in Italia (gen.- apr. 2013) 0% 2,25% 4,50% 6,75% 9,00% gen 12 mar 12 mag 12 lug 12 set 12 nov 12 gen 13 mar 13 Crescita della consultazione web tramite dispositivi mobili in Italia +300% gs.statcounter.com
Sheets ‣ Il CSS è un linguaggio definito a metà degli anni ’90 usato per la formattazione di documenti HTML, XHTML o XML - CSS = Cascading Style Sheet = Fogli stile a cascata ‣ Il termine “a cascata” indica il fatto che ad uno stesso elemento possono essere assegnate più regole una dopo l’altra - Esistono dei modi per controllare la priorità di una regola rispetto alle altre 56
viewport ‣ Nei dispositivi dotati di display, è necessario prima di tutto distinguere tra schermo, documento e viewport - Lo schermo corrisponde al display del dispositivo - Il documento è la pagina HTML completa così come viene rappresentata dal dispositivo - Il viewport è la parte “utile” della finestra del browser, ovvero la parte visibile del documento 57 http://www.quirksmode.org/mobile/viewports.html http://www.quirksmode.org/mobile/viewports2.html
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Screen, document & viewport 58 S D V
CSS ‣ Un blocco di codice CSS consiste in un insieme di regole ‣ Ogni regola seleziona uno o più elementi HTML e assegna loro delle proprietà 59 h1 {color: #f00;} p, td { font-‐size:1em; } strong { font-‐weight:bold; }
‣ I selettori, le proprietà e le parole chiave utilizzate in una regola sono detti identificatori ‣ Gli identificatori possono essere composti dai caratteri alfabetici da a a z maiuscoli e minuscoli, dai numeri, dai trattini “-” e “_” e da alcuni segni di punteggiatura ‣ Non possono contenere spazi, né iniziare con un numero o con “-”
‣ Il selettore è la parte di una regola CSS che identifica gli elementi sui quali la regola stessa deve agire - È possibile inserire più selettori nella stessa regola separandoli con una virgola ‣ I selettori possono far riferimento a tag, classi, id, a particolari stati di un elemento o anche ad elementi “virtuali” (pseudo-classi e pseudo- elementi)
‣ il simbolo * in un css identifica tutti gli elementi e viene definito “selettore universale” ‣ Viene generalmente omesso nelle dichiarazioni perché implicito - Esempio: .la_mia_classe {...} corrisponde a *.la_mia_classe {...} ‣ In alcuni casi può essere però necessario utilizzarlo - Esempio: *{margin:0} → rimuove i margini di tutti gli elementi 63
classi ‣ Gli elementi di una pagina HTML (i tag) possono essere “evidenziati” assegnando loro id e classi - Assegnazioni di un id: <h1 id="titolo"> - Assegnazione di una classe: <h1 class="special"> - Allo stesso elemento possono essere assegnate più classi: <h1 class="special evidenza"> - Allo stesso elemento possono essere assegnati sia id che classi: <h1 id="titolo" class="special evidenza"> ‣ Ogni id deve essere unico in tutto il documento, mentre le classi non hanno limitazioni di uso 64
classi nei CSS 65 #titolo { font-‐style:italic } Si applica all’elemento con id “titolo” .special { font-‐size:1em; } Si applica a tutti gli elementi con classe “special” p.special { font-‐weight:bold; } Si applica agli elementi “p” con classe “special” .special.evidenza { color: #fc0; } Si applica a tutti gli elementi che abbiano sia la classe “special” che “evidenza”
anchor 66 ‣ Oltre ad essere utilizzati nei css, gli id possono essere utilizzati per creare link “interni” ad un documento - il link <a href="#titolo"> posiziona la finestra del browser in modo che sia visibile l’elemento con id “titolo” - Riferimenti a punti specifici di un documento possono essere anche inseriti in link ad altre pagine. Es.: <a href="altra_pagina.html#titolo">
attributi ‣ È possibile costruire un selettore che agisca solo in presenza di un particolare attributo, e di un suo particolare valore - Ad esempio, il selettore input[type="text"] identifica tutti gli elementi input di tipo “text” 67
attributi 68 [href] Si applica a tutti gli elementi che abbiano l'attributo “href” (equivale a *[href]) input[type="button"] Si applica a tutti gli elementi input di tipo “button” [id="titolo"] Equivale a “#titolo”, ma ha un significato diverso in termini di specificità p[lang|="it"] Seleziona gli elementi con attributo “lang” che contengano la stringa “it”. L'operatore “|=” si utilizza quando siano presenti valori separati da un trattino (es.: it-IT, en-US, ...) [class~="evidenza"] Seleziona gli elementi con attributo “class” che contengano la stringa “evidenza”. L'operatore “~=” si utilizza quando siano presenti valori separati da uno spazio (come nel caso delle classi)
attributi CSS3 69 a[href^="http:"] Seleziona gli elementi con attributo “href” il cui valore inizi con “http” img[src$=".png"] Seleziona gli elementi “img” il cui attributo “src” termini con “.png” [class*="icon-‐"] Seleziona gli elementi con attributo “class” il cui valore contenga la stringa “icon-” NB: Il supporto di questi selettori (e di molte altre regole e proprietà CSS) non è uguale nei vari browser. È importante effettuare sempre dei test per verificarne la compatibilità e l'efficacia. Una grande risorsa in questo senso è offerta dalle tavole di compatibilità del sito quirksmode.org. Nel caso dei selettori: www.quirksmode.org/css/selectors. Altra risorsa analoga è “Can I use...”: caniuse.com
selettori ‣ È possibile indicare particolari combinazioni di selettori per applicare una regola solo in alcuni contesti - Ad esempio, è possibile scrivere un selettore che riguardi solo il primo elemento di una lista, o le righe dispari di una tabella, ecc... 70
selettori 71 A B Selettore discendente: Seleziona gli elementi “B” contenuti in “A” A>B Selettore figlio: Seleziona gli elementi “B” che siano figli diretti di “A” A+B Selettore elemento immediatamente adiacente: Seleziona gli elementi “B” immediatamente adiacenti ad un tag “A” A~B Selettore elementi adiacenti (CSS3): Seleziona tutti gli elementi “B” adiacenti ad un tag “A” SPAN P DIV H1 P P H1 P DIV P P BODY BODY div>span {...} h1+p {...} h1~p {...} SPAN SPAN P DIV div span {...} SPAN
Le pseudo-classi non esistono nel markup del documento ma sono applicate in base all’interazione dell’utente con il documento ‣ Alcune pseudo-classi sono state definite nelle versioni 1 e 2 di CSS e sono pertanto ampiamente supportate ‣ L’uso più comune è legato all’interazione dell’utente con i link 72
relative ai link 73 ‣ Le 4 pseudo-classi relative ai link sono molto importanti per una buona user experience - È importante fare attenzione alla loro sequenza nel css: se diversa da quella riportata di seguito, l’esito potrebbe non essere quello voluto a:link Stato iniziale a:visited Link già visitato a:hover Cursore sopra il link a:active Link nel momento in cui viene premuto
classi CSS 1 & 2 74 :focus Relativo agli elementi che stanno ricevendo un input da tastiera (ad esempio un campo di un form durante una compilazione) :first-‐child Identifica il primo figlio di una serie di elementi (ad esempio il primo elemento di una lista). Non pienamente supportato dai browser meno recenti :lang(codice) Identifica gli elementi con attributo lang uguale a quello indicato. Ben supportato da tutti i browser
CSS3 ‣ CSS3 ha introdotto molte nuove pseudo classi, ancora non completamente supportate da tutti i browser ‣ Le nuove pseudo classi possono essere suddivise in: - Pseudo-classi legate alla posizione degli elementi - Pseudo-classi relative agli elementi dei form - Pseudo-classi relazionali 75 - css-tricks.com/pseudo-class-selectors/ - reference.sitepoint.com/css/css3psuedoclasses - coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/
alla posizione 76 :root Si riferisce all’elemento radice di un documento, ovvero, nei documenti HTML, il tag <html> :nth-‐child(N) Seleziona gli N-esimi elementi di una serie, dove N può essere una espressione o le parole chiavi “odd” o “even” :nth-‐last-‐child(N) Seleziona gli N-esimi elementi di una serie partendo dalla fine :nth-‐of-‐type(N) Seleziona gli N-esimi elementi dello stesso tipo :nth-‐last-‐of-‐type(N) Seleziona gli N-esimi elementi dello stesso tipo partendo dall’ultimo
pseudo-classi strutturali 77 ‣ Alcune pseudo-classi prevedono un parametro N che identifica gli elementi desiderati ‣ N può essere la parola chiave odd (dispari) o even (pari) - tr:nth-‐child(odd) {...} → seleziona le righe dispari di una tabella ‣ N può essere un numero e selezionare uno specifico elemento di una serie - li:nth-‐child(3) {...} → seleziona il terzo elemento di una lista
pseudo-classi strutturali 78 ‣ N può essere un’espressione numerica del tipo an+b (es. 3n+1) - b rappresenta il primo elemento da selezionare e a ogni n-esimo elemento dopo b ‣ 3n+1 → Seleziona il primo elemento, il 4º, il 7º, ecc. - Se a e b sono uguali o se b = 0, b può essere omesso ‣ 2n+2 = 2n+0 = 2n = even → Seleziona gli elementi pari - Se a = 1 può essere omesso ‣ 1n+2 = n+2 → Seleziona tutti gli elementi tranne il primo - Se a = 0 viene selezionato solo l’elemento b ‣ 0n+4 = 4 → Seleziona il 4º elemento - a o b possono essere negativi, ma n deve sempre essere positivo così come il risultato finale dell’espressione ‣ Un valore negativo inverte la direzione da utilizzare per individuare l’elemento ‣ Es.: 2n+6 → seleziona gli elementi 6, 8, 10...; -‐2n+6 → seleziona gli elementi 6, 4, 2 ...
alla posizione 79 :last-‐child Seleziona l’ultimo elemento di una serie. È equivalente a :nth-‐last-‐child(1) :first-‐of-‐type Seleziona il primo elemento dello stesso tipo. È equivalente a :nth-‐of-‐type(1) :last-‐of-‐type Seleziona l’ultimo elemento dello stesso tipo. È equivalente a :nth-‐last-‐of-‐type(1) :only-‐child Seleziona gli elementi che siano figli unici del loro genitore :only-‐of-‐type Seleziona gli elementi che siano unici del loro tipo
ai form 81 :enabled Seleziona gli elementi che sono abilitati, ovvero in grado di ricevere input dall’utente :disabled Seleziona gli elementi che sono disabilitati, non in grado di ricevere input, ovvero con attributo disabled :checked Seleziona i pulsanti radio o checkbox selezionati
82 :not(selector) Esclude gli elementi individuati da selector dalla selezione :empty Seleziona gli elementi vuoti :target Seleziona l’elemento individuato dal fragment identifier (identificatore di frammento) contenuto nell’URL della pagina. Ad esempio, nella pagina con URL http://miosito.it/index.html#sezione1, il selettore :target individua l’elemento con id = sezione1
Come le pseudo classi, gli pseudo elementi non esistono nel markup e non sono quindi presenti nel DOM della pagina ‣ Sono quasi tutti già presenti nei CSS 1 e 2 ma poco supportati fino a non molto tempo fa ‣ Sono sempre preceduti dai due punti (:). Nel CSS 3 i due punti sono raddoppiati (::) 83
84 :first-‐letter Seleziona la prima lettera dell’elemento indicato :first-‐line Seleziona la prima riga dell’elemento indicato :before Rappresenta il contenuto generato prima dell’elemento indicato. È usato praticamente sempre con la proprietà “content” :after Rappresenta il contenuto generato dopo l’elemento indicato ::selection Rappresenta il testo selezionato dall’utente
La specificità è uno dei concetti più importanti del linguaggio CSS ‣ Quando ad un elemento sono riferite più regole, queste si sommano “a cascata”. Se sono discordanti prevale l’ultima applicata ovvero quella con specificità più alta ‣ La specificità è il meccanismo interno al CSS per risolvere eventuali conflitti di attribuzione di una regola 85
specificità ‣ Il calcolo avviene sulla base di 4 parametri: - Le regole CSS inline, inserite tramite l’attributo “style”, hanno la specificità più alta - Il secondo parametro è dato dal numero di id contenuti in una regola - Il conteggio di classi, selettori di attributo, e pseudo-classi costituisce il terzo parametro - L’ultimo parametro è infine costituito dal conteggio di elementi (tag) e pseudo-elementi ‣ La lettura dei risultati avviene da sinistra a destra (i valori più a sinistra prevalgono sugli altri) 86
‣ Esiste un sistema per prevalere sugli stili inline: la dichiarazione !important ‣ Questa dichiarazione va inserita dopo il valore di una proprietà e la rende prevalente ad eventuali proprietà in conflitto, anche se inline - Esempio: a {color: #f00 !important;}
‣ Una proprietà css è un elemento che definisce una particolare qualità di un tag html - Ci sono proprietà css legate all’aspetto “estetico” di un tag (font, dimensione, colore, ecc.) o al suo posizionamento, altre legate alla sua rappresentazione con media differenti dallo schermo (ad esempio per definire volume e timbro di una voce sintetizzata), ecc. ‣ In una regola css, ad ogni proprietà è associato un valore
Le proprietà possono essere raggruppate in vari modi, in base alla propria esperienza e alla propria visione ‣ Alcuni esempi: - Sitepoint → reference.sitepoint.com/css/propertyref - W3School → www.w3schools.com/cssref/ - Lista di tutte le proprietà → developer.mozilla.org/en-US/docs/Web/CSS/Reference 90
Tralasciando quelle più specifiche, possiamo raggruppare le proprietà in: - Box model (dimensioni, bordi e margini) - Layout (spaziatura, posizionamento e impaginazione) - Liste - Tabelle - Colori e sfondi - Font e testo - Animazioni e transizioni - Contenuto generato - Interfaccia utente - Stampa e altri media 91
‣ I valori definiscono entità e misura della proprietà a cui si riferiscono ‣ In base alla proprietà cui sono applicati, i valori possono essere - Numeri che definiscono una lunghezza (secondo una specifica unità di misura) - Parole chiave (es.: center, small, ecc...) - Percentuali - Colori - Url
misura 93 ‣ Le unità di misura fanno riferimento a lunghezze e possono essere suddivise in assolute e relative ‣ Le unità di misure assolute sono di scarso utilizzo nei css applicati alle pagine web, mentre possono essere utili, ad esempio, in un css per la stampa ‣ In un css, ogni valore numerico deve essere seguito da una sigla che indichi l’unità adottata - Fa eccezione il valore “0”, che può essere scritto senza unità - I numeri possono essere positivi o negativi, interi o decimali (il separatore decimale è il punto)
misura assolute 94 Pollice (in) Utilizzato nel sistema metrico anglosassone e negli USA. Un pollice equivale a 2,54cm Centimetro (cm) Millimetro (mm) Punto (pt) Unità di misura tipografica, ha conosciuto numerose elaborazioni. Quella attualmente in uso nel DTP e nel web è stato elaborata da Adobe con il linguaggio Postscript. Corrisponde a 1/72 di pollice, quindi a 0,352mm Pica (pc) È un multiplo del punto. Un pica equivale a 12pt, quindi a ⅙ di pollice, ovvero a 4,23mm Pixel (px) L’unità di base di un’immagine bitmap, corrisponde ad 1/96 di pollice = 0,76pt = 0,26mm
misura relative 95 em Corrisponde allo spazio “em”, ovvero alla larghezza della lettera M maiuscola del font usato. L’unità di misura em è molto usata in tipografia ex corrisponde all’altezza della x minuscola ch La larghezza del carattere “0” (zero) rem Analoga ad em, ma riferita alla dimensione dell’elemento root (html) ‣ Le unità di misura relative fanno riferimento alla dimensione del font utilizzato - Nel caso della proprietà font-size, la dimesnione è riferita all’elemento genitore
misura relative al viewport 96 vh 1/100 dell’altezza del viewport vw 1/100 della larghezza del viewport vmin 1/100 del valore più piccolo tra altezza e larghezza del viewport vmax 1/100 del valore più grande tra altezza e larghezza del viewport
Il termine pixel è la contrazione di “Picture element”, ovvero l’elemento più piccolo di uno schermo o di un’immagine raster ‣ È definita come un’unità di misura assoluta, ma in realtà è legata a molti elementi che possono influenzare il risultato finale - Una dimensione in pixel dipende dalla risoluzione del monitor, dalla dimensione fisica dei pixel (più piccola negli schermi di ultima generazione, come i display retina) e dall’eventuale zoom applicato alla pagina 97 http://www.w3.org/TR/CSS21/syndata.html#length-units
di misure relative ‣ Utilizzare misure relative in layout css è consigliabile per diversi motivi: - Le dimensioni basate sui font si modellano sul font effettivamente disponibile sul computer dell’utente - Se l’utente ingrandisce il font, le larghezze definite in em seguono il ridimensionamento del carattere - Tutti gli elementi della pagina sono relazionati gli uni agli altri, rendendo il design più armonico e la manutenzione più semplice 98
99 ‣ I valori di alcune proprietà possono essere costituiti da parole chiave ‣ Si tratta di termini predefiniti che corrispondono a determinati comportamenti del browser - Le parole chiave sono specifiche delle proprietà, per il loro utilizzo è necessario consultare un reference css - Alcuni esempi: ‣ text-‐align: center ‣ display: block ‣ background-‐position: center center
‣ Nei css i colori possono essere definiti in vari modi: - modello RGB con notazione esadecimale ‣ Ogni colore è definito dalle tre componenti Red, Green e Blue. Ogni colore è definito da due cifre in cui il valore minimo è 0 (00 in notazione esadecimale) e il massimo è 255 (FF). Il codice del colore è preceduto dal cancelletto ‣ Esempio: rosso → R=255, G=0, B=0 → #FF0000 ‣ I colori esadecimali possono essere abbreviati quando le tre coppie sono formate da cifre uguali. Quindi #FF0000 → #F00 ‣ La parte letterale delle cifre esadecimali può essere scritta sia in maiuscolo che in minuscolo - modello RGB ‣ Utilizzando la notazione rgb(rosso, verde, blu) ‣ Il rosso dell’esempio precedente diventa quindi → rgb(255, 0, 0) ‣ È possibile anche utilizzare valori percentuali → rgb(100%, 0%, 0%)
‣ È analogo al modello RGB con l’aggiunta di un quarto valore che indica l’intensità del canale alpha (da 0.0 a 1.0) e quindi l’opacità del colore - Esempio: rosso trasparente al 50% → rgba(255,0,0,.5) - Anche in questo caso è possibile usare valori percentuali → rgba(100%,0%,0%,.5) - Notare che rgb(255,0,0) = rgba(255,0,0,1) 102
e HSLA ‣ Il modello HSL (Hue, Saturation, Lightness) rappresenta lo spazio cromatico come un cilindro - la base rappresenta la tinta con il rosso primario corrispondente a 0°, il verde a 120° e il blu a 240° - Le altre due dimensioni del cilindro rappresentano la saturazione (intensità della tonalità) e la luminosità (brillantezza della tinta), entrambe vengono definite come valori percentuali - HSL è a volte definito come HSB (Hue, Saturation, Brightness) ‣ Il rosso dell’esempio precedente diventa quindi → hsl(360, 100%, 50%) - Anche con il modello HSL è possibile definire un canale alpha. ‣ Rosso al 50% → hsla(360, 100%, 50%, .5) 103
in Fireworks 104 Il mixer colori è lo strumento di selezione più semplice ‣ Fireworks dispone di diversi strumenti per la selezione dei colori I colori possono essere selezionati da tavole di colore predefinite o importate, con la possibilità di crearne nuove
per i colori - Colorzilla: plug in per Firefox o Chrome. Generatore di gradienti online http://www.colorzilla.com/ - Colors, applicazione freeware per mac http://mattpatenaude.com/ - ColorSnapper, applicazione commerciale per mac http://colorsnapper.com/ - HSL color picker http://hslpicker.com/ - Color Scheme Designer http://colorschemedesigner.com/ - Color Blender http://meyerweb.com/eric/tools/color-blend/ - Pictaculous, color palette generator from image http://pictaculous.com/ - Adobe Kuler https://kuler.adobe.com - Color Hunter, palette generator http://www.colorhunter.com/ - Web Colour Data (generatore di palette da siti web) http://webcolourdata.com/ - Hex color tool (generatore di tinte da un colore base) http://hexcolortool.com/ 107
‣ Gli URL (Uniform Resource Locator) costituiscono il valore di diverse proprietà css - Vengono utilizzati in tutti i casi in cui sia necessario far riferimento ad elementi esterni (ad esempio un’immagine di background) ‣ Gli url devono essere inseriti nella forma → url(indirizzo) ‣ “indirizzo” rappresenta il percorso, assoluto o relativo, della risorsa da includere ‣ È facoltativo racchiudere l’indirizzo tra virgolette semplici o doppie ‣ Esempio → body {background-‐image: url(/percorso/immagine/di/sfondo.jpg);}
109 ‣ Anche se non si modifica in nessun modo una proprietà, questa apparirà nel browser con un valore specifico ‣ Quel valore è definito nelle specifiche CSS ed è chiamato initial value o default
L’ereditarietà (inheritance) è il processo grazie al quale una proprietà css viene passata automaticamente da un elemento genitore ad un figlio anche se non esplicitatamente dichiarata - Es.: <p><span>Lorem ipsum</span></p> → se all’elemento p è assegnata una regola per impostare il font in grassetto, anche l’elemento span sarà in grassetto (se non presente una regola che operi in senso opposto) - Non tutte le proprietà vengono ereditate allo stesso modo: in caso di dubbio consultare sempre un reference css 110
“inherit” ‣ L’ereditarietà può essere “forzata” in modo che prevalga su altre regole ‣ Assegnando il valore inherit ad un proprietà ad un elemento figlio, questi assumerà il valore assegnato al genitore 111 P DIV BODY P div {color:green} p {color:red} P DIV BODY P div {color:green} p {color:red} div p {color:inherit}
font-size ‣ L’ereditarietà può portare a volte a risultati inaspettati, come nel caso della proprietà font-size con valori relativi 112 body {font-‐size:12px} div {font-‐size: 120%} p {font-‐size:120%} DIV BODY P 120% di 120% di 12px = 17,28px P 120% di 12px = 14,4px
È possibile inserire uno o più commenti in un blocco di codice CSS ‣ I commenti vengono ignorati nell’elaborazione delle regole e possono essere inseriti in qualsiasi punto - Per inserire un commento utilizzare i caratteri /* e */ - Esempio: /* Questo è un commento */ 113
‣ È bene distinguere tra i valori assegnati da noi al css e quelli effettivamente elaborati dal browser - Questi ultimi dipendono dai valori di default, dalla “cascata” delle regole e dall’ereditarietà - Il browser infine effettua un rendering in pixel dei valori risultanti e costruisce il layout 114 Gli strumenti disponibili nei browser moderni (in questo caso Firebug su Firefox) permettono di visualizzare i valori elaborati per ogni singolo elemento della pagina
‣ In alcuni casi è possibile raggruppare più regole complementari in un’unica notazione, più breve - La tecnica è comunemente indicata come shorthands, ed è tradotta in Dreamweaver come stenografia body { background-‐attachment: scroll; background-‐color: #FFF; background-‐image: url(sfondo.jpg); background-‐repeat: repeat; background-‐position: left top; } body { background: #FFF url(sfondo.jpg) repeat scroll left top; }
Le proprietà che riguardano qualità distribuite attorno ad un oggetto, possono essere abbreviate applicandole in senso orario partendo dall’alto a sinistra 116 body { margin-‐top: 10px; margin-‐right: 15px; margin-‐bottom: 20px; margin-‐left: 25px; } body { margin: 10px 15px 20px 25px;}
La sintassi degli shorthands varia da proprietà a proprietà e, specialmente all’inizio, è bene usare regole non abbreviate o far ricorso ad un IDE, come Dreamweaver - IDE = Integrated Development Environment 117
e block-level ‣ Fatta eccezione per alcune tipologie particolari, gli elementi di un documento HTML possono essere divisi in due categorie: elementi inline e block-level - Ad un elemento block-level si possono attribuire dimensioni - Un elemento inline può essere dimensionato solo verticalmente con la proprietà line-height (l’interlinea) - Un elemento block può contenere sia elementi block che inline - Un elemento inline può contenere solo elementi inline - Elementi inline adiacenti si dispongono orizzontalmente, gli elementi block verticalmente 118
e block-level ‣ Il comportamento di default degli elementi può essere modificato in diversi modi tramite CSS - Ad esempio, è possibile trasformareun elemento inline in block-level con la regola display: block - La disposizione verticale che assumono elementi di blocco adiacente può essere alterata con la proprietà float 119
model ‣ Nei css, ogni elemento di blocco può essere considerato come un contenitore, una “scatola” composta da larghezza del contenuto, margini interni (padding), bordo e margini ‣ Questo sistema di rappresentazione è definito box model ‣ Nel CSS2, le proprietà width e height riguardano solo il contenuto di un box, mentre la dimensione visibile è data dalla somma di tutte le componenti 120
model ‣ Nel CSS3 questo comportamento è definito dalla proprietà box-sizing, il cui valore di default è content-box che corrisponde al comportamento standard CSS2 - Nelle più vecchie versioni di Explorer e nella versione 6 in modalità “quirk”, le proprietà width e height interessavano l’insieme contenuto-padding-border 121
box 122 Contenuto padding width border margin height Le proprietà width e height fanno riferimento alle dimensioni del contenuto. La dimensione renderizzata del box è data quindi da contenuto + padding + bordi + margini
123 ‣ Nel CSS3 è definito il valore border-box per la proprietà box-sizing - In un box con questa proprietà, i valori di width e height riguardano l’insieme contenuto+padding+border+margin content-box border-box width width
‣ Le at-rules sono istruzioni contenute in un CSS utilizzate per diversi scopi - @charset indica il set di caratteri utilizzato nel css ‣ Esempio → @charset “UTF-‐8”; - @import viene utilizzata per importare un foglio stile all’interno di un altro ‣ Esempio → @import url(css_esterno.css); ‣ Anche nella forma → @import "css_esterno.css"; ‣ È possibile indicare un media-type specifico (opzione non supportata da IE8 e inferiori) → @import url(screen.css) screen, projecton; ‣ La regola @import non può essere preceduta da altre regole css
media queries - @media specifica un media-type specifico per le regole che seguono ‣ Esempio: regole specifiche per la stampa → @media print { ... } - Nei fogli di stile livello 3 la regola @media è diventata un elemento fondamentale per il design responsivo, permettendo di specificare, oltre al media-type, indicazioni sul dispositivo utilizzato ‣ Esempio → @media screen and (min-‐width:500px) { ... } 125
@font-face permette di incorporare font non standard nel proprio documento ‣ Esempio: @font-‐face { font-‐family: "Il nome del mio carattere"; src: url("miofont.ttf"); } ‣ A causa delle differenze tra i vari browser il formato da utilizzare (e da richiamare con la proprietà src) non è standard e va adattato alle varie esigenze - @page è una regola specifica per la stampa dei documenti, ancora scarsamente supportata - Esistono anche altre at-rules ancora poco supportate e utilizzate ‣ Per una lista completa: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule 126
- Che cos’è HTML 5 www.html5today.it/tutorial/che-cos-html5 - Jeremy Keith: HTML5 for web designers www.abookapart.com/products/html5-for-web-designers - Dan Cederholm: CSS3 for web designers www.abookapart.com/products/css3-for-web-designers - Luke Wroblewski: Mobile First www.abookapart.com/products/mobile-first - Andy Clarke, Hardboiled Web Design, Five Simple Steps www.fivesimplesteps.com/products/hardboiled-web-design - Andy Clarke, On the grid. From my five minute presentation at What Do You Know, an informal series of evening community events in Perth, Melbourne, Sydney and Brisbane in February 2012. speakerdeck.com/malarkey/on-the-grid - Codrops tympanus.net/codrops - SMACSS http://smacss.com/ 128
- Smashing Magazine Coding techniques: coding.smashingmagazine.com/tag/techniques CSS: coding.smashingmagazine.com/tag/css HTML: coding.smashingmagazine.com/tag/html Web Design: www.smashingmagazine.com/tag/web-design Fireworks: fireworks.smashingmagazine.com - Design Festival designfestival.com designfestival.com/grid-theory - Il blog sui CSS di Chris Coyler css-tricks.com - Eric Meyer, Cascading Style Sheet la guida completa, Tecniche Nuove, 2007 - Gianluca Troiani, CSS Guida Completa, Apogeo - Steve Krug, Don’t make me think. Un’approccio di buon senso all’usabilità del web, Tecniche Nuove-Hops - Jeffrey Zeldman, Progettare siti web standard, Pearson-New Riders 129
Sitepoint reference.sitepoint.com/css reference.sitepoint.com/html - W3Schools References www.w3schools.com/cssref/default.asp www.w3schools.com/tags/default.asp www.w3schools.com/tags/ref_colornames.asp - Mozilla Developer Network developer.mozilla.org/it/docs/ Guida_di_riferimento_ai_CSS developer.mozilla.org/it/docs/HTML - Quirks Mode, il sito di Peter-Paul Kock www.quirksmode.org - The Current State of HTML5 Forms www.wufoo.com/html5 - CSS3 Shapes www.css3shapes.com - HTML5 Element Index html5doctor.com/element-index/ 130
mcassandro
yasuhiroyokota
usagimaru
root_recruit
findyinc
amishiratori
keita_yoshikawa
sms_tech
minamitary
one0
cielo1985
taigakiyokawa
eileencodes
irinanazarova
mojombo
thoeni
marktimemedia
samlambert
chriscoyier
danielanewman
ufuk
panda_program
andyhume
