WEB DESIGN I. docente: Gabriele Ruscelli. dispense:

WEB DESIGN I docente: Gabriele Ruscelli dispense: www.gabrieleruscelli.com email: gabriele_ruscelli@docenti.naba.it

Queste slide Queste slides fanno parte del corso Web Design & HTML. Il sito del corso, con il materiale completo, si trova in http://www.gabrieleruscelli.com. 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 (http://creativecommons.org/licenses/ 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.

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 5 6 7 13 14 15 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

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 - 2013 - Editore: O Reilly 7. CSS3 - the missing Manual by David Sawyer McFarland - 2013 - 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: 1. http://www.italianalistapart.com 2. http://learn.shayhowe.com/advanced-html-css/ 3. http://www.zeldman.com 4. http://www.cssbeauty.com/gallery/ 5. http://www.webcreme.com/ 6. http://www.sitepoint.com/ 7. http://www.thefwa.com/ 8. http://www.awwwards.com/ 9. http://www.iwebdesigner.it/ 10. http://www.html5today.it/ 11. http://www.yourinspirationweb.com/ 12. http://onepagelove.com/ 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, 3. http://www.w3.org/ 4. http://www.w3.org/html/ 5. http://www.w3.org/style/css/

introduzione al web e al design digitale

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

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

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

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

altre figure { Digital Designer Digital Art director UI Designer Web Designer Interaction Designer UX Designer Front-end Designer { { { tanta grafica tanta progettazione tanto codice http://www.skillprofiles.eu/

il web designer differenze: GraphicDesigner design WebDesigner design e navigazione WebDeveloper PHP, ASP, XML, Java, Javascript WebDesigner HTML, CSS, Flash http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/

il web designer? Web Master

internet funzionamento internet utente L utente naviga o usa internet

internet funzionamento internet utente L utente chiede e internet risponde

internet funzionamento server computer Il computer chiede e il server risponde

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

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

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

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?

Evoluzione del mondo digital 1991 1993 1994 1996 2005 2007 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

Elementi di una pagina

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

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

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

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

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

struttura elementi base wrapper contenitore generale, grandezza 960px, quasi sempre centrato http://www.corriere.it

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

struttura elementi base nav/menu menu di navigazione principale il più importante. Può essere composto anche da immagini e icone http://it.beatsbydre.com

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

struttura elementi base nav/menu posizionamento si no si no

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.

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

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

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

struttura visualizzazione fold ~ 750px

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

atomic design http://bradfrost.com/blog/post/atomic-web-design/

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 https://onepagelove.com/day-of-the-dead https://onepagelove.com/minisites https://onepagelove.com/squireel-2 https://onepagelove.com/what-the-fluff

Navigazione

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

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 2.1.1 pag 2.1.2 pag 2.4.1

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

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?

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.

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.

posizionamento Menù laterale

informazioni utili Briciole di pane (breadcrumbs)

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

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

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

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

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

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;

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.

mobile avete mai visto questo tipo di navigazione?

mobile differenze di navigazione tra un pc e uno smartphone

fisso avete mai visto questo tipo di navigazione?

tanti contenuti 1

tanti contenuti 2

call to action https://sketchapp.com https://www.invisionapp.com https://www.volkswagen.it/it.html# 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

albero di navigazione http://www.usabile.it/392009.htm

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.

Gestire un layout

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. https://www.romeuracademy.it/regole-impaginazione-grafica/

stampa e web

terminologia gabbia grafica { griglia unit gutter colums field

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

composizione di elementi (trasparenti) utili per l impaginazione griglia

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

gutter spazio tra le unit determinano la distanza tra i box

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

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

scegliere colonne simmetrica asimmetrica

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

sezione aurea https://webdesign.tutsplus.com/articles/making-your-web-designs-more-effective-with-the-golden-ratio--cms-23459

per approfondire griglie e gabbie http://www.designersinsights.com/designer-resources/using-layout-grids-effectively/ Libro sulle griglie https://www.amazon.it/gp/product/3721201450/ref=as_li_ss_tl?ie=utf8&camp=3370&creative=24114&creativeasin=3721201450&l inkcode=as2&tag=ciroespo-21 Esempi https://www.awwwards.com/30-grid-based-websites.html

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

Box Model & immagini

Box Model top left right content padding border margin bottom

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

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

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

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

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

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!

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)

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

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.

texture dove trovare texture web: http://subtlepatterns.com/ PS. se mettete la foto del vostro gatto come sfondo non va bene! http://www.stevenlim.net/ http://jimvarney.org/index.html

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

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 http://www.gifparanoia.org/ http://www.ilpost.it/2012/11/26/gif-animate-ipnotiche/2/

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

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

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 https://it.wikipedia.org/wiki/graphics_interchange_format#/media/file:rotating_earth_(large).gif http://www.gifparanoia.org/ http://www.ilpost.it/2012/11/26/gif-animate-ipnotiche/2/ Screen e text by Wikipedia

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

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)

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

Esercizio 2 Con questi elementi create una gif animata

Tipografia per il web

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 28-11-2017 10.30

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

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. https://www.google.com/fonts 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.

che font usare? Graziato o Bastoni?

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.

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.

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

stili disponibili software: dreamweaver

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 https://www.awwwards.com/websites/typography/

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

esercizio

Look and Feel

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

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

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

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

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

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?

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

esempio ricerca

esempio scelta colori scelta 1 scelta 2 scelta 3

esempio prova colore scelta 1

esempio prova font

Interface Design

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.

GUI Graphical User Interface quei componenti di grafica che fanno interagire l utente con la piattaforma digitale http://www.teehanlax.com/tools/iphone/

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?

organizzare in aiuto a questo problema abbiamo:

organizzare link utili per icone: http://fontello.com/ http://www.entypo.com/

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

material bottoni flat skeuomorph (Scheumorfismo) next? https://dribbble.com/shots/1898320-material-design-button

evoluzione ios

evoluzione android

evoluzione windows

tipi di form label input type radio button select checkbox

tipi di form textarea

interazione mobile in continua evoluzione nel mondo mobile troviamo molteplici gesture per compiere azioni https://uxplanet.org/mobile-design-techinques-e0212ac66765 http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/

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: http://bashooka.com/inspiration/40-great-examples-of-ui-style-guides/

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

HTML HyperText Markup Language

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

struttura <html> </html>

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

struttura html head body

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

doctype <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd > DTD http://www.w3.org/qa/2002/04/valid-dtd-list.html

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

altri linguaggi XHTML? extensible HyperText Markup Language

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

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

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

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

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>

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

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

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

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

commenti  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à.

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

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

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

CSS Cascading Style Sheets o Fogli di stile

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

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

tipologie CSS esterni CSS interni CSS in linea CSS importati

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

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

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

tipologie - css importati index.html stili_1.css HTML CSS @import url ( http://www.naba.it/stili_1.css )

Selettori di elemento di classe di ID

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

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

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>

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.

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

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

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

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.

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

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

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

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.

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

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

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

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;

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

BOX MODEL come definire la grafica in un sito web

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

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)

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.

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

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

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;

Margin

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;

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.

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;

Border

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

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) = 200-40= 160 larghezza dei box: 200px larghezza del verde: 240px larghezza del verde finale = 160 con 20 px di padding per ambo i lati.

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

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.

Esercizio 2 ricreare i layout con le tecniche imparate oggi

Esercizio 3 ricreare i layout con le tecniche imparate oggi

FLOAT per layout a più tabelle

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

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

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

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

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

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.

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.

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.

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)

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;

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.

Posizionamento metodi alternativi al float

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

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

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.

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

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

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.

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

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)

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

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)

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

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

TESTO gestione e utilizzo

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.

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>

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

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

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

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.

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

FONT REPLACEMENT CSS Per verificare questa tecnica possiamo appoggiarci a servizi che offrono font utilizzabili liberamente come: http://www.fontsquirrel.com/ http://code.google.com/webfonts

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.

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 ;

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

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 http://cufon.shoqolate.com/generate/

IMMAGINI gestione e utilizzo

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.

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

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.

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.

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.

Esercizio 2 Ricreare questo layout in codice HTML e CSS

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.

NAVIGAZIONE come fare navigare l utente

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.

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)

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>

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

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

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

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.

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

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

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