WEB DESIGN I. docente: Gabriele Ruscelli. dispense:

Transcript

1 WEB DESIGN I docente: Gabriele Ruscelli dispense: gabriele_ruscelli@docenti.naba.it

2 Queste slide Queste slides fanno parte del corso Web Design & HTML. Il sito del corso, con il materiale completo, si trova in Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno. Il presente materiale è pubblicato con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 ( by-nc-sa/3.0/it/deed.it ): La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati. L autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

3 Programma Introduzione al web e al design digitale 1 9 Introduzione ai fogli stili (CSS) Elementi di una pagina 2 10 Il box model Navigazione 3 11 Impaginazione di elementi con float e clear e posizionamenti Gestire un layout 4 12 Gestione del testo e della tipografia Immagini per il web Tipografia per il web Interaction design Brief esame intermedio La navigazione e la gestione di siti web multi pagina Consegna brief d esame Trasformare la grafica in codice HTML revisione esame (consegna progetto intermedio) Basi del linguaggio HTML 8 16 revisione esame

4 sitografia e bibliografia Bibliografia specifica: 1. CSS Guida Completa di Gianluca Trojani - editore Feltrinelli, nuova edizione copertina Blu 2. HTML and CSS web standard solutions by Christopher Murphy, Nicklas Persson - Editore: Friends of (an Apress Company) 3. HTML and CSS: Design and Build Websites di jon Duckett 4. Neuro Web Design di Susan M. Weinschenk - Editore: Apogeo; 5. Eyetracking web Usability. Siti che catturano lo sguardo di Jakob Nielsen e Kara Pernice - Amazon.it 6. HTML5 - the missing manual - by Mattew MacDonald Editore: O Reilly 7. CSS3 - the missing Manual by David Sawyer McFarland Editore: O Reilly 8. HTML5 il murkup e le api. di Gabriele Gigliotti, Gianluca Troiani - Editore Gabriele Gigliotti, Gianluca Troiani 9. Web usability 2.0. L usabilità che conta di Jakob Nielsen e Hoa Loranger Sitografica specifica: Bibliografia e sitografia generale: 1. Jeffry Zeldman Progettare Siti Web Standard tecniche per il design con XHTML e CSS, Editore Parson Education Italia disponibile da HOEPLI Milano in italiano e in inglese. 2. Jackob Nielsen, Designing Web Usability, New Riders Publishing, USA,

5 introduzione al web e al design digitale

6 introduzione Web Design è un espressione utilizzata per definire la progettazione tecnica, strutturale e grafica di un sito web. Progettazione per il world wide web. wikipedia

7 introduzione Nel mondo del web design nasce una nuova figura professionale: il WEBDESIGNER

8 il web designer cosa fa? Progetta & Realizza Cosa deve avere/sapere? -creatività -grafica -logica -conoscenza del www -conoscenza di usabilità e navigabilità -saper lavorare in team

9 il web designer Competenze: Creativa/Logica creatività, gusto estetico, capacità di progettazione, sintesi Software & linguaggi photoshop, illustrator, fireworks, flash, dreamweaver, sketch, XD HTML, CSS, Javascript Progetta disegna interfacce coda

10 altre figure { Digital Designer Digital Art director UI Designer Web Designer Interaction Designer UX Designer Front-end Designer { { { tanta grafica tanta progettazione tanto codice

11 il web designer differenze: GraphicDesigner design WebDesigner design e navigazione WebDeveloper PHP, ASP, XML, Java, Javascript WebDesigner HTML, CSS, Flash

12 il web designer? Web Master

13 internet funzionamento internet utente L utente naviga o usa internet

14 internet funzionamento internet utente L utente chiede e internet risponde

15 internet funzionamento server computer Il computer chiede e il server risponde

16 internet funzionamento LATO CLIENT computer rendering richiesta browser server risposta ricerca/esecuzione file LATO SERVER Richiesta e risposta di un file nel web

17 internet funzionamento windows +1024x768 file apple OS 1024x768 linux 800x600 Crossbrowser Crossdevice

18 differenze Web Designer Funzionamento legato al Front-End Web Developer Funzionamento legato al Back-End Utente

19 differenze Web Designer Graphic Designer RGB schermo palette rgb diversi output rendering minure in px immagini leggerissime ma di alta qualità nooo, non dirmi che non si vede su iphone? CMYK carta pantoni ingombri e crocini di taglio cromaline misure in cm file pesanti terabyte quante pagine hai detto che erano?

20 Evoluzione del mondo digital Nascita del www www pubblico con HTML basico introduzione CSS Nokia primo cellulare con connesione internet Nascita del Web 2.0 Primo iphone evoluzione a livello tecnico

21 Elementi di una pagina

22 Queste slide Queste slides fanno parte del corso Web Design & HTML. Il sito del corso, con il materiale completo, si trova in Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno. Il presente materiale è pubblicato con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 ( by-nc-sa/3.0/it/deed.it ): La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati. L autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

23 Tipologie di siti web infrastruttura CMS-online CMS nativi statici anatomia one-page landing-page multi-page tipologia informazione blog portali social network forum ecommerce market-place vetrina portfolio motori di ricerca web app

24 composizione cartella principale root index.html about.html contact.html stili.css sfondo.jpg video.mov

25 struttura dimensioni La grandezza di un sito web può variare in base alle esigenze, tendenzialmente si parla di misure orizzontali in quanto la misura in verticale è commisurata ai contenuti come immagini e testi. Possiamo dividere 2 categorie di siti web: Siti Web a tutta pagina (siti responsive) misure in % relative alla grandezza dei display Siti Web con un contenitore centrale la misura più utilizzata è 960px

26 struttura dimensioni perchè 960px? Una misura media tra risoluzioni basse (800x600 VS 1920x1080). La visualizzazione è corretta anche con schermi 1024x Numero divisibile per 2, 3, 4, 5, 6, 8 più numeri = più colonne a disposizione più colonne = più possibilità di creare layout personalizzati

27 struttura elementi base wrapper header nav/menu content sidebar footer Tutti questi elementi devono essere presenti in un sito web e in tutte le pagine

28 struttura elementi base wrapper contenitore generale, grandezza 960px, quasi sempre centrato

29 struttura elementi base header testa del sito,spesso contiene: -logo -payoff -lingua -menu istituzionali -barra di ricerca

30 struttura elementi base nav/menu menu di navigazione principale il più importante. Può essere composto anche da immagini e icone

31 struttura elementi base nav/menu 2 menu di navigazione principale laterale

32 struttura elementi base nav/menu posizionamento si no si no

33 struttura elementi base content parte centrale del sito, dove saranno presenti le informazioni più importanti. È di fatto la parte adibita ai contenuti: testi, immagini e altri media. Questi sono gli elementi che varieranno da pagina a pagina.

34 struttura elementi base sidebar elemento non obbligatorio, serve per inserie un menu secondario ho dei contenuti meno rilevanti. Molto spesso usato nei blog.

35 struttura elementi base footer piede/chiusura del sito web, indica la fine della pagina, spesso contiene: -informazioni aziendali -contatti veloci -riproposta dei menu e sottomenu

36 struttura visualizzazione viewport area visibile di una finestra del browser. fold parte visualizzata del sito visualizzata al momento dell atterraggio.

37 struttura visualizzazione fold ~ 750px

38 effetto matrioska un elemento può contenere altri elementi wrapper > content > sidebar ESEMPIO: dentro la sidebar potrebbe esistere sidebar > articolo > paragrafo > alcune parole in bold Visione 3d di un sito web

39 atomic design

40 Esercizio 1 Suddividere in blocchi uno di questi siti: 1- prendere uno screenshot 2-utilizzare i shape layer e colori per la divisione 3-iniziare dai contenitori più grossi 4-finire con i testi

41 Navigazione

42 differenze multipage onepage sezione 1 HP sezione 2 sezione 3 pag 1 pag 2 pag 3 pag 4 sezione 4 sezione 4.1 pag 4.1 pag 4.2 pag4.3 sezione 4.2

43 differenze alberatura piatta HP alberatura profonda HP pag 1 pag 2 pag 3 pag 1 pag 2 pag 3 pag 4 pag 2.1 pag 2.2 pag 2.3 pag 2.4 pag pag pag 2.4.1

44 come iniziare HP 1 ordine di progettazione e disegno layout mastro A 6 7 about contact service blog 3 4 B B C D service 1 service 2 service 3 dettaglio archivio articolo articoli E E E F D

45 mission La mission della navigazione è rendere a prova di utente un sito web. -qui sei in homepage -la pagina principle -l indice -la prima pagina che vedi appena atterri sul web site -qui sei nell ecommerce -qui puoi comprare un sacco di cose -qui spenderai soldi -se vuoi puoi vedere chi siamo -qui puoi vedere chi siamo -grazie a questa sezione puoi innamorarti di noi -vuoi sapere la nostra storia? -ma è il sito giusto?

46 principio Il principio base della navigazione è: Non fare perdere l utente negli abissi più profondi di un sito web. Ovvero: Ovunque vado posso tornare Ovunque....e se mi dovessi perdere ho la possibilità di tornare indietro.

47 posizionamento Esistono diverse tipologie di menu, ognuna di queste avrà la sua importanza e in base a questa avranno uno stile e una posizione diversa.

48 posizionamento Menù laterale

49 informazioni utili Briciole di pane (breadcrumbs)

50 stile menu Nella gestione dei sotto menu la scelta varia in base alle esigenze, ormai da tenere in conto è sempre il fattore device il quale tende a far eliminare i cosidetti menu a tendina. home work contact work 1 work 2 work 3 work 4 work 2.1 work 2.2 work 2.3 work 2.4

51 stile menu altri sottomenu: home work contact work1 work2 work3 home work contact work1 work2 work3

52 diversi menu menu di navigazione istituzionale menu di navigazione principale contenuto menu di navigazione informazioni

53 trick grafici I menu possono essere presenti in diverse parti del sito, qual è il posizionamento migliore? home about contact home about contact home about contact home about contact top consigliato bottom sconsigliato left consigliato right sconsigliato

54 trick grafici colori e cambi di stato servono ad aiutare l interazione tra sito web e utente

55 da ricordare... Il menu di navigazione: deve essere visibile; deve essere riconoscibile; deve essere omogeno per tutte le pagine, un unica eccezione potrebbe essere splash page o in rari casi home page; deve avere sempre i 3 stati: normal, hover, current. Nella navigazione mobile anche active;

56 da ricordare... Le voci del menu: devono essere identificative; devono essere capibili; NON devono avere immagini (icone si); NON devono avere simboli strani {}ØŒØÙ Çˇ Ú» apple } devono essere monolingua; se monoparola meglio.

57 mobile avete mai visto questo tipo di navigazione?

58 mobile differenze di navigazione tra un pc e uno smartphone

59 mobile differenze di navigazione tra un pc e uno smartphone

60 fisso avete mai visto questo tipo di navigazione?

61 tanti contenuti 1

62 tanti contenuti 2

63 call to action Pulsante d azione Lo si trova nel fold e/o a fine pagina Serve a collegare pagine non per forza inserite nel menu Spesso propone la finalità/scopo del web site

64 albero di navigazione

65 esercizi Progettare e disegnare la navigazione facendo 2 proposte Negozio di vestiti: -abbigliamento uomo elegante -specializzato in cravatte e abiti -negozio fisico (no e-commerce) -spazio dedicato alle promo -possibilità onepage Obiettivo: vieni a trovarci Blog : riformulare la navigazione del blog dato dal docente.

66 Gestire un layout

67 introduzione La gabbia o griglia è la struttura invisibile che compone gli elementi della pagina. Questa struttura è composta da linee orizzontali e verticali che definiscono la disposizione del testo e delle immagini, il confine dei contenuti e i limiti della pagina stessa. L uso delle griglie determina un ritmo costante, che facilità il percorso di lettura, la memorizzazione e la mappatura mnemonica dei contenuti.

68 stampa e web

69 terminologia gabbia grafica { griglia unit gutter colums field

70 gabbia grafica contenitore della griglia è possibile determinare i margini top bottom left right

71 composizione di elementi (trasparenti) utili per l impaginazione griglia

72 unit numero di elementi che compongono la griglia in questo caso: 6

73 gutter spazio tra le unit determinano la distanza tra i box

74 colums numero di colonne ricavate dalle unit è possibile creare molte combinazioni

75 field spazio orizzontale che definisce i contenuti dividendoli in righe possono avere misure (altezze) diverse in base alla loro importanza

76 scegliere colonne simmetrica asimmetrica

77 scegliere colonne posizione ordine di lettura grandezza verticale grandezza orizzontale look and feel Determinano che tipo di importanza deve avere un contenuto. Grazie alle griglie è possibile prestabilire: ordine gerarchico bilanciamento tra gli elementi armonia della pagina allineamenti precisi e consistenti

78 sezione aurea

79 per approfondire griglie e gabbie Libro sulle griglie inkcode=as2&tag=ciroespo-21 Esempi

80 esercizio Disegnare i wireframe strutturali prendendo come soggetto l esercizio della lezione precedente. Iniziare dall home page, procedere poi con le pagine interne, al fine di definire un numero di template. Come fare una home page: -partite dal menu e selezionate le voci più importanti -decidere cosa va messo in risalto nel content -decidere se inserire una sidebar e cosa metterci dentro -creare una suddivisione in righe e colonne adeguata al contenuto

81 Box Model & immagini

82 Box Model top left right content padding border margin bottom

83 padding padding:10px padding: 0px Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess padding-top:10px

84 Margin margin:0px margin: 20px Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem dolupta Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess margin-top:20px

85 border border:0px border: 2px solid blue Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess border-top: 2px solid blue

86 Box model Titolo Pagina Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess

87 immagini Salvare le immagini da photoshop per poi digitalizzarle nel mondo del web è un procedimento molto importante. Il risultato finale dovrà essere il rapporto tra la qualità e il peso dell immagine stessa. Qualità Peso

88 Motivazioni Perchè salvare le immagini leggere? 1-I siti web navigano sulla rete ed essa si basa sullo scambio di bit e byte. Più il sito è composto da immagini pesanti, quindi con più byte, più il motore di rendering farà fatica a gestirle (ovvero scaricarle). 2-Il peso di un sito web è la somma di tutte le informazioni testuali e immagini. Più informazioni ci sono più il sito pesa. 3- Quando si renderizza una pagina di fatto si genera un download. 4-Attenti agli smarphone e al traffico dati!

89 Quali prendere immagini non riproducibili in HTML immagini riproducibili in HTML Fotografie, icone, loghi, grafiche di ogni genere colori pieni, contorni (non troppo sfarzosi), gradienti (lineari e radiali)

90 Quali prendere immagini non supportate al 100% in HTML immagini riproducibili in HTML Metodi di fusione, in questo caso: multiply e softlight Possibilità di opacizzare un colore o un immagine

91 Texture Immagini che garantiscono una ottima resa con poco peso. 1-sono immagini modulari che affiancate orizzontalmente e verticalmente generano una superficie omogenea. 2-pesano pochissimo perchè vengono salvate da: 2x2px a 50x50px (più o meno). 3-La regola moltiplicatrice sull asse x e y è presente in HTML con la proprietà Background-repeat.

92 texture dove trovare texture web: PS. se mettete la foto del vostro gatto come sfondo non va bene!

93 selezione slice tool Tool utile per selezionare diverse immagini e salvarle tutte assieme. Le sezioni possono essere selezionate, modificate e eliminate.

94 formati web le possibilità sono multiple poichè si può decidere la qualità dell immagine in base a colori e sfumature png 156 kb jpg 33 kb gif 20 kb

95 formati web JPG Joint Photographic (Experts) Group compressione di tipo lossy cioè con perdita di informazione; Uso: fotografie Screen e text by Wikipedia

96 formati web PNG Portable Network Graphics compressione di tipo lossless cioè senza perdere alcuna informazione, per questo pesa di più del jpg. Simile e successo del formato GIF può memorizzare immagini a 24 bit (mentre il GIF era limitato agli 8 bit, 256 colori) Uso: Immagini con trasparenza Screen e text by Wikipedia

97 formati web GIF Graphics Interchange Format Il numero massimo di colori visualizzabili è 256 ma tra i punti di forza di questo formato vi sono la possibilità di creare immagini animate; molto spesso viene usato per le animazioni e in secondo piano per le immagini fisse. compressione di tipo lossless cioè senza perdere alcuna informazione Uso: Immagini monocolore o bicolore oppure immagini animate Screen e text by Wikipedia

98 Alcune impostazioni Dithering per formati GIF e PNG8 È una tecnica che permette di mischiare i colori per simularne degli altri. Ovviamente il peso dell immagine aumenterà se questa opzione è attiva. Differenza tra PNG8 e PNG24 Entrambi hanno il canale alfa ovvero supportano la trasparenza. PNG bit + 8 bit di alfa = 16,7 milioni di colori distinti Screen by adobe.com PNG 8 8 bit + 8 bit di alfa = 256 colori distinti, simile al formato GIF

99 retina La visualizzazione di immagini per schermi retina è semplice e veloce: basta salvare la propria immagine con il doppio o triplo della risoluzione. mare.jpg (200x200px) mare2x.jpg (400x400px) mare3x.jpg (800x800px)

100 Esercizio 1 Dato il layout fornito dal docente salvare le immagini per il web e inserile all interno del file html.

101 Esercizio 2 Con questi elementi create una gif animata

102 Tipografia per il web

103 il web e il testo Titolo sottitolo Nost moloreratur sunt, que nonost moloreratur sunt, que no- Nost moloreratur sunt, que no Arum doluptas nonseria dolut quiam quam doluptatio ident latiae nonseque velibus id utem res nonsectus, suntius andescimi, serchic to et, te venimaios etur repel est velentu ribus, cone moloriae volorumenda esed magnihi llacear cieniatur milland esequi dolendis ratem quaturem doluptas dolor ad que nonse non nulparchicit ut velignis nus rerum quaest am nosapitat. On pa quae. Itat. Uptatum fuga. Is Autore

104 gerarchia grandezza del corpo stile del font colore del carattere Determinano che tipo di importanza deve avere un paragrafo o una parola. I box di testo devono avere: -larghezza divisa in colonne -se una colonna allora non troppo larga -margini e spazi adeguati che definiscono il titolo dal paragrafo -se con tanto testo conviene dividere il discorso in tanti piccoli paragrafi -se affiancato ad un immagine ci deve essere un adeguato margine

105 che font usare? Dreamweaver offre una piccola gamma di font standard, si chiamano: Font Web Safe Essendo una gamma limitata si ha la possibilità di utilizzare una libreria di google chiamata google font. Con essa è possibilie scaricare ma anche implementare un font all interno di dreamweaver. Grazie a questo sistema si ha una buona compatibilità con tutti i browser. NB tutti i font di google sono open e possono essere installati sul proprio computer.

106 che font usare? Graziato o Bastoni?

107 che font usare? TITOLO Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. TITOLO Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

108 che colori usare? TITOLO Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. TITOLO Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

109 stili disponibili font stile font corpo crenatura scala verticale spostamento linea base interlinea avvicinamento scala orizzontale corsivo simulato dizionario allineamento rientro sinistro rientro sinistro prima riga allinea lato dorso rientro destro software: indesing

110 stili disponibili software: dreamweaver

111 numero di stili titoli in HTML paragrafi in HTML h1 h2 h3 h4 p è possibile aggiungere diversi stili di paragrafo, senza però una dicitura standard h5 h6

112 spaziature interlinea letter spacing Udam dolupta quost, od quiat. Evel maionsed esequia sperios dollorem facit et, ius magnis saperunt. Es ipitat dit, se eum ratemporatem id moluptaqui sust quae ipsanima nonsequat vercient, consequ isinvero od quatumquos ma nulland. Ipiento doluptas modita cumquibus sit aut lique ad est faciati uritatius ide pe nonsedi tempor suntis autae volorum ratur? Udam dolupta quost, od quiat. Evel maionsed esequia sperios dolorem facit et, ius magnis saperunt. Es ipitat dit, se eum ratemporatem id moluptaqui sust quae ipsanima nonsequat vercient, consequ isinvero od quatumquos ma nulland. Ipiento doluptas modita cumquibus sit aut lique ad est faciati uritatius ide pe nonsedi

113 esercizio

114 Look and Feel

115 Introduzione In informatica, l espressione inglese look and feel viene usata per descrivere le caratteristiche percepite dall utente di una interfaccia grafica, sia in termini di apparenza visiva (il look) che di modalità di interazione (il feel). wikipedia

116 organizzare domande da farsi prima di entrare in un progetto web: cosa devo comunicare? a chi è rivolto? cosa mi serve e cosa non serve? quante pagine sarà il mio sito? perchè?

117 organizzare 1- capire di che tipo di lavoro si tratta: -sito web? nuovo? restyling? -applicazione web o device? 2- capire qual è il mondo di appertenenza: -cupo, divertente, giocoso, serio iniziare a studiare e ricercare uno stile appropiato: -internet, libri, riviste 4- dopo che si è sicuri che la ricerca sia andata a buon fine: -abbozzare il layout grafico strutturale -scegliere colori -decidere che elementi grafici inserire

118 studiare il look color palette max 4/5 immaginario brand identity tone of voice layout scelta griglia grandezza resposive immagini iconografiche fotografiche illustrative nessuna scelta del carattere max 2/3

119 studiare il look Definire dei ruoli (grandezze, caratteri, stili) Testuali: - Titolo 1 - Titolo 2 - Sottotitolo 1 - Sottotitolo 2 - Paragrafo - Parole sottolineate - Parole in corsivo Bottoni: - Principale 1 - Principale 2 - Secondario - Parole link - Immagini link Colori: - Sfondo - Testuali - Interazione (bottoni) - Elementi grafici Immagini: - Principali - Secondarie - Piccole - Supporto grafico

120 studiare il feel obiettivo del sito azione cosa farà l utente? quali passi dovrà compiere per soddisfare le sue esigenze? informazione dove deve trovare le informazioni principali e quelle secondarie?

121 esempio brief lavoro commissionato da: amici degli animali che cosa: sito web pagine richieste: home; cosa facciamo; chi siamo; unisciti a noi; contatti. che tono utilizzare: amichevole, sensibilizzante

122 esempio ricerca

123 esempio ricerca

124 esempio scelta colori scelta 1 scelta 2 scelta 3

125 esempio prova colore scelta 1

126 esempio prova font

127 Interface Design

128 introduzione L interface design è la cerniera tra device e utente. Grazie a questo: L utente riesce a usufruire dell applicazione senza avere difficoltà. Il cliente sarà soddisfatto inquanto l applicazione funziona al meglio.

129 GUI

130 GUI Graphical User Interface quei componenti di grafica che fanno interagire l utente con la piattaforma digitale

131 organizzare Alcune volte ci capitano dei siti web con una quantità alta di contenuti, come facciamo a organizzare i pesi delle informazioni principali delle informazioni meno importanti, di quelle che hanno bisogno di più rilievo, quelle che servono per la navigazione, quelle da inserire perchè istituzionali, quelle che fanno riferimento all autore, quelle che fanno riferimento ai tag e quelle che servono per rendere il design accattivante?

132 organizzare in aiuto a questo problema abbiamo:

133 organizzare link utili per icone:

134 bottoni click click click click normal hover active current esiste una voce del menu la voce del menu è cliccabile sono sicuro che ho cliccato la voce mi trovo nella pagina che si chiama click

135 material bottoni flat skeuomorph (Scheumorfismo) next?

136 evoluzione ios

137 evoluzione android

138 evoluzione windows

139 tipi di form label input type radio button select checkbox

140 tipi di form textarea

141 interazione mobile in continua evoluzione nel mondo mobile troviamo molteplici gesture per compiere azioni

142 Esercizio creare una guideline seguendo il look and fell del proprio progetto (brief intermedio) Testuali: - Titolo 1 - Titolo 2 - Sottotitolo 1 - Sottotitolo 2 - Paragrafo - Parole sottolineate - Parole in corsivo Bottoni: - Principale 1 - Principale 2 - Secondario - Parole link - Immagini link - hover - inattivi/disable Colori: - Sfondo - Testuali - Interazione (bottoni) - Elementi grafici Immagini: - Principali - Secondarie - Piccole - Supporto grafico Esempi:

143 Esercizio...se non si ha idea di cosa fare nella prova intermedia, scegliere un brand tra questi: Loghi presi da google images

144 HTML HyperText Markup Language

145 struttura index.html{ codice html codice javascript codice php

146 struttura <html> </html>

147 struttura <html> <head> </head> <body> </body> </html>

148 struttura html head body

149 doctype DTD document type definition (definizione del tipo di documento)

150 doctype <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > DTD

151 documento HTML doctype <html> <head> informazioni di servizio </head> <body> contenuti visualizzati dal browser </body> </html>

152 altri linguaggi XHTML? extensible HyperText Markup Language

153 sintassi chiusura esplicita <div> ciao </div> chiusura implicita <img src= file://immagine.jpg />

154 sintassi <div> ciao </div> tag apertura contenuto tag chiusura <div> <p> paragrafo </p> </div> tag apertura 1 tag apertura 2 contenuto tag chiusura 2 tag chiusura 1 figlio genitore

155 indentatura <div> <p> paragrafo </p> </div>

156 attributi <div style= color:yellow; > ciao </div> attributo <div class= stile_1 id= wrapper > ciao </div> attributo 1 attributo 2 nome attributo = valore attributo

157 attributi Il numero di attributi può essere illimitato. L attributo viene sempre inserito nel tag d apertura. Nel caso ci si trova ad avere diversi valori per lo stesso attributo basta spaziarli dentro le. <div class= stile_1 stile_2 stile_3 > ciao </div>

158 gerarchia DOM Il Document Object Model (spesso abbreviato come DOM), letteralmente modello a oggetti del documento, è una forma di rappresentazione dei documenti strutturati come modello orientato agli oggetti. wikipedia

159 gerarchia <div> elemento fratello1 </div> <div> elemento fratello2 </div>

160 gerarchia <div> <div> elemento figlio </div> </div>

161 gerarchia <div> <strong> </div> </strong>

162 commenti <!-- questo non verrà mostrato nel browser --> i commenti servono: -per trovare un errore nascondendo il codice senza eliminarlo -come segnaposto o indice o piccola nota per spiegare la parte di codice sottostante. Usarli è un buon metodo per non perdersi nel codice, creano ordine e maggiore produttività.

163 principali tag <h1> <h2> <h3> <h4> <h5> <h6> <p> <b> <i> <a> <ul> <ol> <li> Headline Paragraph Bold Italic Ancor Order list Unorder list List Items NB. di paragrafo ne site solo uno. Non esitono <p1><p2><p3>...

164 Esercizio 1 Creiamo assieme una pagina HTML e testiamo i tag principali: h1, h2, h3, h4, h5, h6, p, ul, li, a, body Creiamo più pagine HTML e colleghiamole fra di loro

165 Esercizio 2 Ricreare questa pagina in HTML utilizzando i tag studiati oggi in classe. TITOLO sottotitolo Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. TITOLO sottotitolo Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. TITOLO 1 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. sottotitolo 1 sottotitolo 2 TITOLO 2

166 CSS Cascading Style Sheets o Fogli di stile

167 struttura stili_1.css{ stili_head stili_head2 content main h1 p

168 struttura body{ background:#fff; font-size: 80px; font-family: Courier New, Courier; } body{background:#fff; font-size: 80px; font-family: Courier New, Courier; }

169 tipologie CSS esterni CSS interni CSS in linea CSS importati

170 tipologie - css esterni index.html stili_1.css HTML CSS <head> <link href= css/stili_1.css rel= stylesheet type= text/css /> </head>

171 tipologie - css interni index.html CSS HTML <head> <style type= text/css > </head> </style>

172 tipologie - css in linea index.html HTML CSS <body style= background:#000 > </body>

173 tipologie - css importati index.html stili_1.css HTML url ( )

174 Selettori di elemento di classe di ID

175 Selettori - elemento CSS body { background:#ccc; } h1 { background:#ccc; } HTML <body> <h1> titolo </h1> </body

176 Selettori - elemento I selettori di elemento si utilizza quando si vuole creare uno stile per un tag HTML specifico. L attribuzione è automatica. Essendo il codice HTML composto da tag questi stili si propagano su tutta la pagina e su tutto il sito web. Creare stili con un selettore di elemento significa creare delle regole globali. Ad esempio: h1 { color:#ccc } in questo caso tutte le pagine con all interno il tag h1 compariranno di colore #ccc

177 Selettori - classe CSS.myClass { background:#ccc; } HTML <div class= myclass > </div> <h1 class= myclass > </h1> <p class= myclass > </p> <div class= myclass myclass2 myclass3 > </div>

178 Selettori - classe Le classi sono delle istruzioni (stili) che vengono attribuite ai tag. L attribuzione non è automatica proprio perchè si ha la possibilità di inserirle dove si vuole. <h1 class= myclass > </h1> attribuzione Servono per ovviare al problema degli stili globali citato sopra. Creando una classe si ha la possibilità di andare a sovrapporre / eliminare uno stile globale dato in precedenza. Sono utili perchè possono essere presenti più volte nella stessa pagina quindi possono essere attribuite a più tag contemporaneamente.

179 Selettori - classe Una delle potenzialità dell uso delle classi è il loro multiutilizzo e il loro intersecamento con altre classi, in parole povere: sono utili perchè per ogni tag posso richiamare un numero infinito di classi. <h1 class= colore dimensione > ciao </h1> <h1 class= colore2 > ciao </h1> <h1 class= dimensione > ciao </h1> Ciao Ciao Ciao

180 Selettori - classe Nel caso si dovessero associare due stili contrastanti bisogna decidere quale deve essere il più importante e quindi visualizzato, poniamo il caso:.colore_1 { color:pink; }.colore_2 { color:green; } <h1 class= colore_1 colore_2 > ciao </h1> Ciao L istruzione!important definisce quale tra queste regole diventerà più importante..colore_1 { color:pink; }.colore_2 { color:green!important; }

181 Selettori - ID CSS #myid { background:#333; } HTML <div id= myid > </div> <h1 id= myid > </h1> <p id= myid > </p>

182 Selettori - ID Simili alle classi necessitano di una attribuzione a un tag specifico. Ad alci un tag vengono attribuiti sia delle classi che degli ID, esempio: <div id= header class= colore dimensione > </div> NB. ricordarsi che gli ID possono sovrapporre / eliminare le regole dei selettori di elemento e delle classi. Non possono esistere due ID associati ad un tag.

183 Selettori - ID Gli ID esistono per rendere un elemento univoco nella pagina HTML, difatti vengono utilizzati per la cotruzione dei macro blocchi di un sito. Identificano un elemento univoco nella pagina, non nel sito web! #header #sidebar #content #wrapper #footer

184 Struttura completa 1 <body> <div> </div> <div> </div> <div> </div> </body> struttura composta dai tag HTML <body> <div id= header > </div> <div id= content > </div> <div id= footer > </div> </body> struttura composta dai tag HTML con associati gli ID

185 Struttura completa 2 <body> <div id= header class= colore dim > </div> <div id= content class= colore2 dim2 > </div> <div id= footer class= colore3 dim > </div> </body> struttura completa composta dai tag HTML con associati gli ID e le classi

186 Priorità delle regole CASO1 body{background:green; } body{background:red; } CASO2 body{background:green; background:red;} CASO3 <link rel= stylesheet href= stili_1.css /> <style> body{background:red; } </style> In tutti i casi il colore visualizzato è il rosso.

187 Gerarchia body{}.myclass {} #myid {} specificità:1 specificità:10 specificità:100 La natura del CSS detta le leggi della gerarchia, per ogni problema di ridondanza di una specifica regola bisogna tenere a mente che: ID > Class > tag!important permette di alterare queste regole

188 Gerarchia La gerarchia genitore-figlio presente in HTML si rifà pure con gli stili, ovvero: Se un elemento genitore ha un determinato stile tutti i figli ereditano le regole dei genitori. Qualora un figlio abbia una regola CSS propria, automaticamente abbandona la regola ereditata dai genitori per abbracciare quella nuova. CASO1 body{background:green; } CASO2 body{background:green; } h1{background:red; } <body> <h1>ciao</h1> </body> 1 2 ciao ciao

189 Colori body{ background:#ff00ff; background:#0f0; background:green; background:rgb(21,143,40); background:rgba(21,143,40, 0.3); }

190 Esercizio 1 Creare un nuovo file HTML chiamarlo interno e applicarli un foglio di stile interno; Creare un nuovo file HTML chiamarlo esterno e applicarli un foglio di stile esterno; Creare un nuovo file HTML chiamarlo in_linea e applicarli un foglio di stile in linea;

191 Duplichiamo l esercizio concluso la lezione precendente e dopo avergli applicato un foglio di stile esterno iniziare a richiamare i primi selettori. Esercizio 2

192 BOX MODEL come definire la grafica in un sito web

193 come definire la grafica in un sito web risoluzione minima utilizzata nel web 800 x 600 risoluzione utilizzata da noi 960 x contenuto fold 960 x ~700

194 unità di misura Unità di misura relative - em (misura equivalente alla dimensione del carattere) - ex (misura equivalente all altezza del carattere in minuscolo) - px (pixel) Unità di misura assolute cm (centimetri) mm (millimetri) pt (punti) pc (picas) in (pollici)

195 creare un box Il tag HTML per costruire i box è <div>, lo utilizzerete sempre e tanto. I box sono degli elementi HTML che hanno due misure: height e width per rendere visibile un box bisogna impostare sempre: height + width + background-color senza di essi il box non potrà essere mai visibile! Tuttavia se l altezza non è specificata la misura può variare in base al contenuto. In fase di costruzione il contenuto non è mai disponibile quindi è opera buona impostare inizialmente un altezza anche fittizzia.

196 creare un wrapper Il wrapper è il contenitore centrale, è caratterizzato per essere il contenitore di tutto il sito web, esso si differenzia dal body in quanto quest ultimo è la pagina intera del browser. wrapper body

197 creare un wrapper 2 piccole informazioni da sapere: 1- il wrapper sarà sempre un ID 2-il wrapper sarà sempre centrale, per centrarlo inserire queste regole CSS: margin-top:0px; margin-right:auto; margin-bottom:0x margin-left:auto; Avendo settato auto per i margini laterali il box seguirà una centratura automatica dettata dall elemento genitore (che in questo caso è <html>)

198 Margin Margini - sintassi estesa margin-top:1px; margin-right:1px; margin-bottom:1px margin-left:1px; sintassi contratta margin:1px 1px 1px 1px; sintassi semplificata margin:1px;

199 Margin

200 Padding Padding - sintassi estesa padding-top:1px; padding-right:1px; padding-bottom:1px; padding-left:1px; sintassi contratta padding:1px 1px 1px 1px; sintassi semplificata padding:1px;

201 Padding 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 e.

202 Border bordi - sintassi estesa border-top-width:1px; border-top-color:#000; border-top-style:solid; border-right-width:1px; border-right-color:#000; border-right-style:solid; sintassi contratta border-width:1px; border-color:#000; border-style:solid; sintassi semplificata border:1px solid #000;

203 Border

204 larghezza e altezza NB. Ognuna di queste istruzioni aumenta lo spazio del box, esempio: box(200x200px)+margini(20px)+padding(10px)+bordi(5px)= 270x270px

205 gestire i box 3 box (300x200px) dentro un wrapper con 600px di larghezza aggiungendo 20px di padding al box verde la sua larghezza supera i 600px del wrapper quindi cade. (larghezza box verde) + (padding) = 240 per mantenere il padding e la stessa posizione si deve fare la differenza tra il padding aggiunto e la larghezza di inzio. (larghezza box verde) - (padding) = = 160 larghezza dei box: 200px larghezza del verde: 240px larghezza del verde finale = 160 con 20 px di padding per ambo i lati.

206 una regola importantissima *{ margin: 0; padding: 0; } L asterisco è un tag generico, non deve essere richiamato all interno del codice. Con questa regola andate ad eliminare i margini e i padding standard. È la prima regola CSS da scrivere

207 Esercizio 1 Creare un nuovo file HTML, applicare un foglio di stile esterno. Inserire dei primi tag div per creare il wrapper, l header, content e footer. All interno del content creare 2 blocchi con dentro del testo, usare padding, margini e bordi.

208 Esercizio 2 ricreare i layout con le tecniche imparate oggi

209 Esercizio 3 ricreare i layout con le tecniche imparate oggi

210 FLOAT per layout a più tabelle

211 .box_1{ width: 200px; height: 200px; background-color: red; float: left; } Uso - Float Left

212 .box_2{ width: 200px; height: 200px; background-color: green; float: right; } Uso - Float Right

213 Uso - Float Left & Right.box_1{ width: 200px; height: 200px; background-color: red; float: left; }.box_2{ width: 200px; height: 200px; background-color: green; float: right; }

214 Uso - HTML senza float.box_1{ width: 200px; height: 200px; background-color: red; }.box_2{ width: 200px; height: 200px; background-color: green; }.box_3{ width: 900px; height: 100px; background-color: yellow; }

215 Uso - clear.box_1{ width: 200px; height: 200px; background-color: red; float:left; }.box_2{ width: 200px; height: 200px; background-color: green; float:right; }.box_3{ width: 900px; height: 100px; background-color: yellow; }

216 Uso - clear Quando degli elementi hanno come regola il float creano un area libera dove possono affiancarsi a destra e sinistra. Se un successivo elemento non ha questa regola vola fino a trovare un appoggio, in questo caso il bordo della pagina.

217 Uso - clear Quando degli elementi hanno come regola il float creano un area libera dove possono affiancarsi. Se un successivo elemento non ha questa regola vola fino a trovare un appoggio, in questo caso il bordo della pagina. Per ovviare a questo problema si deve impostare la regola clear all elemento senza il float.

218 Uso - clear clear:right; clear:left; clear:both; Il clear lavora sull area associata: se ci sono elementi con float left e il clear è settato su left allora riconosce l esistenza di box e quindi non farà volare il box giallo. Conviene settare clear:both; poiché solo in rari casi si ha la necessità di far flottare alcuni elementi rispetto ad altri.

219 Float e Clear - info utili 1-conviene creare una classe clear e settare la regola clear:both; per utilizzarla con dei div trasparenti senza spessore, in poche parole si utilizza questa regola per definire che sopra di essa ci sono degli elementi floattanti. <body> <div class= rosso ></div> <div class= verde ></div> <div class= clear ></div> <div class= giallo ></div> </body> div clear In questo modo non si ha l obbligo di impostare la regola al singolo blocco (in questo caso il giallo)

220 Float e Clear - info utili 2-È assai raro vedere l esistenza di elementi con Clear e Float in contemporanea. 3- Creare diversi box in sucessione verranno visualizzati con un ordine dettato dal tipo di float scelto: <body> <div class= rosso ></div> <div class= verde ></div> <div class= giallo ></div> <div class= blu ></div> </body> float: Left; <body> <div class= rosso ></div> <div class= verde ></div> <div class= giallo ></div> <div class= blu ></div> </body> float: Right;

221 Esercizio Creare 2 quadrati (rosso e verde) e 1 rettangolo (giallo), sperimentare float left e float right e al rettangolo applicare il clear. Sucessivamente riprodurre in codice html il seguente layout utilizzando solo FLOAT LEFT, all interno di un wrapper di 960px.

222 Posizionamento metodi alternativi al float

223 Tipologie static absolute relative fixed La scelta varia in base alle esigenze

224 Static Il valore static è attribuito di default ad ogni elemento ed ignora qualunque tipo di offset attribuito all elemento come top, left, bottom e right. Per affiancare gli elementi si necessita della proprietà float. Float LEFT Float RIGHT

225 Absolute Un blocco posizionato in modo assoluto può essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all interno del flusso. Il valore absolute posiziona un elemento in relazione all elemento html o all elemento genitore che ha un posizionamento diverso da statico. I nostri elementi si spostano con cordinate x e y.

226 Absolute esempio 1 div{ } position: absolute; top: 0px; right: 0px; wrapper elemento html

227 Absolute esempio 2 div{ } position: absolute; top: 0px; right: 0px; wrapper con: #wrapper{ position: relative; } elemento html

228 Relative Il valore relative altera il posizionamento di un elemento tramite un offset impostato con le proprietà top, left, bottom e right. Gli altri elementi della pagina non mutano il proprio posizionamento in quanto il posizionamento relativo non estrae dal flusso l elemento ma lo colloca su un livello superiore.

229 Relative esempio 1.box_1{ position: relative; top: 20px; left: 50px; } wrapper.box_2{ position: relative; top: 20px; left: 50px; }

230 Fixed il valore fixed estrae un elemento dal flusso e lo posiziona in base all offset (specificato con top, left, bottom e right) in relazione all elemento html. Simile al valore absolute mantiene la stessa posizione delle cordinate x e y. Non tiene conto dell elemento genitore e quindi fa solo riferimento al file html. Blocca un elemento all interno del viewport. (utile per i menu)

231 Fixed esempio.menu{ position: fixed; top: 0px; }

232 Z-index Per gestire la sovrapposizione degli elementi è possibile utilizzare z-index con un valore superiore a 0 (avendo gli elementi della pagina z-index con valore 0 di default) La proprietà css z-index permette di posizionare gli elementi su un asse z cambiando la profondità degli elementi e il loro ordine naturale di sovrapposizione. (simili ai livelli di photoshop)

233 Z-index esempio.box_1{ z-index:0; }.box_2{ z-index:50; }.box_3{ z-index:100; } NB. da usare solo con position: fixed, relative, absolute

234 ESERCIZIO Ricreare questo disegno utilizzando le tecniche di posizionamento. NB. fatevi aiutare da firebug o ispeziona elemento dei browser.

235 TESTO gestione e utilizzo

236 Queste slide Queste slides fanno parte del corso Web Design & HTML. Il sito del corso, con il materiale completo, si trova in Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno. Il presente materiale è pubblicato con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 ( by-nc-sa/3.0/it/deed.it ): La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati. L autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

237 INTRODUZIONE Il testo rappresenta la maggiorparte del contenuto dei siti web ed è sicuramente di grande importanza per l utente e per i motori di ricerca.

238 TESTO IN HTML Esistono diversi elementi in grado di gestire gerarchie e scopo del testo. Definire un elemento significa definire il valore semantico. Principali tag: <h1> <h2> <h3> <h4> <h5> <h6> altri tag: <p> <br> <span> <b> <i>

239 TESTO IN HTML Esistono tag per contesti peculiari <abbr> abbreviazione <acronym> acronimo <address> informazioni di contatto <blockquote> citazione lunga <q> quatozione <cite> citazione breve <dfn> definizione

240 FORMATTAZIONE TESTO Attraverso i css possiamo gestire la formattazione testo. Le principali istruzioni sono font e text Font-size corpo del font line-height interlinea font-family famiglia carattere font-style stile del font (normal/italic/oblique) font-weight grassetto del testo (bold, bolder,400,600,900) font-variant variazioni (small-caps, normal) text-decoration decorazione del testo (underline, none ecc) text-transform maiuscolo/minuscolo (uppercase, lowercase) text-indent indentazione del testo text.align allineamento del testo

241 FORMATTAZIONE TESTO altri... color colore del testo white-space forza il testo ad andare a capo o a rimanere sulla stessa linea letter-spacing spaziatura tra le lettere word-spacing spaziatura tra le parole alcune psudo-elementi applicabili al testo: :first-letter seleziona la prima lettera :first-line seleziona la prima linea di testo

242 CARATTERE DEI FONT SU WEB La scelta dei caratteri è sempre limitata da famiglie di font websafe font-family:helvetica, arial, sans-serif; In questo modo viene definito come font principale l helvetica, nel caso il computer dell utente non disponga di questo font verrà utilizzato l arial o in alternativa un font senza grazie disponibile nel sistema operativo.

243 FONT REPLACEMENT CSS Per inserire un font nella nostra pagina web possiamo utilizzare la tecnica font replacement font-family: myfontname ; src:url(../font/myfontfile.otf ); }

244 FONT REPLACEMENT CSS Per verificare questa tecnica possiamo appoggiarci a servizi che offrono font utilizzabili liberamente come:

245 PERCHÈ FONT SQUIRREL Font squirrel è un sito web da dove è possibile scaricare font gratuiti, tuttavia di interesse maggiore offre un servizio di creazione di web font kit. Cos è un web font kit? È un kit composto da diversi font file con diverse estensioni, con le quali è possibile visualizzare on-line un font che non appartiene alle famiglie font web safe. Il web font kit è caratterizzato anche da un file css che richiama tutti i font con le loro estensioni. Che tipo di font usare? Le estensioni di font disponibili per la conversioni sono: TTF (true type font), OTF(open type font) Assicurarsi che il font sia legale e/o non faccia parte della libreria typekit di Adobe altrimenti risulta difficile se non impossibile caricarlo.

246 FONT SQUIRREL - metodo Step 1 - caricare Assicurarsi che il font rispetti i requisiti. Cliccare su webkit generator, spuntare la checkbox e cliccare generate, sucessivamente download. Step 2 - la cartella Dopo il download rinominare la cartella (nome: font) e inserirla nella root folder del sito. Rinominare anche il file css (nome: font_style.css) Step 3 - il codice HTML Creare un link nel documento HTML che richiami il file appena rinominato. Step 3 - il codice CSS Inserire dove serve (Es. h1 p...) la regola: font-family: myfontname ;

247 PERCHÈ GOOGLE FONT? Google Font è una libreria che offre una vasta gamma di font on-line. Anche loro utilizzano la tecnica font face ma a differenza del metodo spiegato precendentemente qui abbiamo tutto on line. Vantaggi: scelta rapida del font, velocità nel caricamento, velocità nell istallazione, ottima compatibilità svantaggi: libreria limitata, necessità di una connessione anche in fase di progettazione

248 FONT REPLACEMENT CUFON Cufon è una libreria javascript in grado di sostituire il font nella pagina web L utilizzo di questa tecnica implica l inclusione della libreria nella pagina web e l inserimento di un file custom generabile sul sito di cufon

249 IMMAGINI gestione e utilizzo

250 Introduzione Le immagini sono altri elementi di contenuto, gestirle è semplice ma bisogna fare attenzione a diversi metodi e diverse proprietà che permettono la loro manipolazione.

251 Differenze La principale differenza nella gestione delle immagini è il loro inserimento, infatti per visualizzare una foto o una grafica in un sito web possiamo identificare 2 grandi metodi: Inserimento HTML utilizzando il tag <img> Inserimento CSS utilizzando la proprietà background-image Immagini di contenuto per la fruizione degli utenti. Esempio: fotogallery, il logo di una azienda o foto che rappresentano una sezione del sito. Immagini come elementi grafici che servono per il look visivo del layout. Esempio: texture, immagine di sfondo, filetti e elementi grafici di contorno

252 TAG <img> Tag a chiusura implicita, questa è la sua dicitura: <img src= immagine.jpg alt= città width= 1920 height= 1080 /> Attributo di ricerca, serve a ricecare l immagine nel file system. Testo alternativo: se l immagine non si visualizza allora compare il testo inserito. Utile per i motori di ricerca. Può essere omesso. Misure che appartengono all immagine, non conviene modificarle poiché è facile perdere le proporzioni. Possono essere omesse.

253 Background-image Il background-image è un proprietà ricca di regole, con essa è possibile gestire le immagini all interno dei box se questi hanno una misura.

254 Esercizio Utilizzando font-squirrel gestire un font all interno di un nostro file; Utilizzando Google font gestire un font all interno di un altro nostro file. Gestire le immagini con le proprietà di background-image; Gestire le immagini con il tag img.

255 Esercizio 2 Ricreare questo layout in codice HTML e CSS

256 Esercizio 3 (a casa) Ricreare questo layout in codice HTML e CSS. L immagine deve essere a tutto schermo, il box dovrà essere centrato nella pagina.

257 NAVIGAZIONE come fare navigare l utente

258 INTRODUZIONE Ogni pagina web ha sempre 3 parti da definire: -parte istituzionale (loghi, nome, p.iva...) -parte di contenuti (testi e immagini) -parte di navigazione La parte di navigazione è la parte più funzionale poichè permette la visita all utenza e genera di fatto l interazione.

259 CREARE UN MENU L elemento utilizzato per la creazione dei menu è la lista. Le liste possono essere di due tipi: -ol (order list) -ul (unorder list) A loro interno vengono specificati gli elementi della lista: -li (list items)

260 CREARE UN MENU <ul> <li> </li> <li> </li> </ul> <ol> <li> </li> <li> </li> </ol> una lista con i contenuti si presenterà in questo modo: <ul> <li> voce menu 1</li> <li> voce menu 2</li> <li> voce menu 3</li> </ul>

261 CREARE UN MENU - formattare una lista Come prima cosa bisogna eliminare le proprietà di default: ul, ol, li {margin:0; padding:0; list-style:none;}

262 INTRODURRE I LINK <ul> <li><a href= # >voce menu 1</a></li> <li><a href= # >voce menu 2</a></li> <li><a href= # >voce menu 3</a></li> </ul> Anche qui bisogna eliminare le proprietà di default: a:{text-decoration:none; color:#000;} a:hover{color:#666;} a:visited{color:#999;}

263 INTRODURRE I LINK Per poter utilizzare gli elementi del box model occorre definire la proprietà display con valore block. a:{text-decoration:none; color:#000; display:block;} a:hover{color:#666;} a:visited{color:#999;} Nel caso di un menù orrizontale bisogna utilizzare proprietà float applicata a elementi li mentre a ul sarà applicato un overflow:hidden

264 ESERCIZIO Creare 1 file HTML con i suoi CSS, inserire un menù di navigazione con ul li. Dopo la creazione di quest ultimo duplicare la pagina html, attribuirgli un nome diverso (Es. about e contact) e testare se la navigazione funzioni.

265 INTRODURRE I LINK Per poter utilizzare gli elementi del box model occorre definire la proprietà display con valore block. a:{text-decoration:none; color:#000; display:block;} a:hover{color:#666;} a:visited{color:#999;} Nel caso di un menù orrizontale bisogna utilizzare proprietà float applicata a elementi li mentre a ul sarà applicato un overflow:hidden

266 ROLL-HOVER Il cambio di stato tra una proprietà e un altra si chiama roll-hover. È possibile crearlo con una pseudoclasse: :hover Si può applicare a un qualsiasi tag tuttavia è consigliabile creare movimento solo su elementi di interazione come menu o immagini con link. div{ background: orange; width: 200px; height: 200px; } div:hover{ background: green; }

267 Esercizio Ricreare le 3 pagine e collegarle fra di loro usando un menu.