WEB DESIGN I · HTML5 il murkup e le api. di Gabriele Gigliotti, Gianluca Troiani - Editore Gabriele Gigliotti, ... primo cellulare con connesione internet Primo iPhone Nascita del

WEB DESIGN Idocente: Gabriele Ruscelli

dispense: www.gabrieleruscelli.comemail: [email protected]

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

ProgrammaIntroduzione al web e al design

digitale

Elementi di una pagina

Navigazione

Gestire un layout

Immagini per il web

Tipografia per il web

Interaction designBrief esame intermedio

9

10

11

12

13

14

15

16

1

2

3

4

5

6

7

8(consegna progetto intermedio)Basi del linguaggio HTML

Introduzione ai fogli stili (CSS)

Il box model

Impaginazione di elementi con float e clear e posizionamenti

La navigazione e la gestione di siti web multi paginaConsegna brief d’esame

revisione esame

revisione esame

Gestione del testo e della tipografia

Trasformare la grafica in codice HTML

sitografia e bibliografiaBibliografia 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. JeffryZeldmanProgettareSitiWebStandard–tecnicheperildesignconXHTMLeCSS,EditoreParsonEducationItalia– 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

Nel mondo del web design nasce una “nuova” figura professionale:

il WEBDESIGNER

introduzione

il web designercosa fa?

Progetta & Realizza

Cosa deve avere/sapere?-creatività-grafica-logica

-conoscenza del www-conoscenza di usabilità e navigabilità

-saper lavorare in team

il web designerCompetenze:

Creativa/Logicacreatività, gusto estetico, capacità di progettazione, sintesi

Software & linguaggiphotoshop, illustrator, fireworks, flash, dreamweaver, sketch, XD

HTML, CSS, Javascript

Progetta disegna interfacce coda

altre figureDigital Designer

Digital Art directorUI Designer

Interaction DesignerUX Designer

Front-end Designer

WebDesigner

tantaprogettazione

tantagrafica

tantocodice

{{{{

http://www.skillprofiles.eu/

il web designerdifferenze:

GraphicDesigner ͢ WebDesigner

WebDeveloper ͢ WebDesigner

design design e navigazione

HTML, CSS, FlashPHP, ASP, XML, Java, Javascript

http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/

?il web designer

Web Master

internet funzionamento

L’utente naviga o usa internet

utenteinternet


L’utente chiede e internet risponde

utenteinternet


Il computer chiede e il server risponde

computerserver


server

richiesta

ricerca/esecuzionerisposta

rendering

LATO CLIENT

LATO SERVER

computer

browser

Richiesta e risposta di un file nel web

file


file

windows

apple OS

linux800x600

1024x768

+1024x768

Crossbrowser Crossdevice

differenze

Web Designer

Utente

Web DeveloperFunzionamento legato

al Back-EndFunzionamento legato

al Front-End

differenze

Web Designer Graphic Designer

CMYKcartapantoniingombri e crocini di tagliocromalinemisure in cmfile pesanti terabytequante pagine hai detto che erano?

RGBschermo

palette rgbdiversi output

renderingminure in px

immagini leggerissime ma di alta qualitànooo, non dirmi che non si vede su iPhone?

Evoluzione del mondo digital

Nascitadel www

1991 1993 1994 1996 20072005

wwwpubblico

con HTMLbasico

introduzioneCSS

Nokiaprimo cellulare

con connesione internet

PrimoiPhone

Nascitadel

Web 2.0

evoluzione a livello tecnico

Elementi di una pagina




Tipologie di siti web

one-page

CMSCMS-onlineinfrastruttura

anatomia

tipologia

landing-page

nativi

informazioneblog

portali

motori diricerca

web app

social networkforum

vetrinaportfolio

ecommercemarket-place

multi-page

statici

composizione

index.html

stili.css

sfondo.jpg

video.mov

cartella principale “root”

about.html

contact.html

struttura dimensioniLa grandezza di un sito web può variare in base alle esigenze,

tendenzialmente si parla di misure orizzontali in quanto la misurain 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, 8più numeri = più colonne a disposizione

più colonne = più possibilità di creare layout “personalizzati”

struttura elementi base

wrapperheader

nav/menucontentsidebarfooter

Tutti questi elementi devono essere presenti in un sito web e in tutte le pagine


wrappercontenitore generale,

grandezza 960px,quasi sempre centrato

http://www.corriere.it


headertesta del sito,spesso contiene:

-logo-payoff-lingua

-menu istituzionali-barra di ricerca


nav/menumenu di navigazione principale

il più importante.Può essere composto anche

da immagini e icone

http://it.beatsbydre.com


nav/menu 2menu di navigazione principale

laterale


nav/menuposizionamento

si

si

no

no


contentparte centrale del sito, dove

saranno presenti le in-formazioni più importanti.

È di fatto la parte adibita ai contenuti: testi, immagini e altri media. Questi sono gli elementi che varieranno da

pagina a pagina.


sidebarelemento non obbligatorio,serve per inserie un menu

secondario ho dei contenuti meno rilevanti.

Molto spesso usato nei blog.


footerpiede/chiusura del sito web,indica la fine della pagina,

spesso contiene:-informazioni aziendali

-contatti “veloci”-riproposta dei menu e

sottomenu

struttura visualizzazioneviewportarea visibile di una

finestra del browser.

foldparte visualizzata del sito visualizzata al momento

dell’atterraggio.

struttura visualizzazione

fold~ 750px

effetto matrioskaun elemento può contenere altri elementi

wrapper > content > sidebar

ESEMPIO: dentro la sidebar potrebbe esisteresidebar > articolo > paragrafo > alcune parole in bold

Visione 3d di un sito web

atomic design

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

Esercizio 1Suddividere in blocchi uno di questi siti:

1- prendere uno screenshot2-utilizzare i shape layer e colori per la divisione

3-iniziare dai contenitori più grossi4-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

HP

multipage onepage

pag 1 pag 2 pag 3 pag 4

sezione 1

sezione 2

sezione 3

sezione 4

sezione 4.1

sezione 4.2pag 4.1 pag 4.2 pag4.3

differenze

HPHP

alberatura piatta alberatura profonda

pag 1

pag 1

pag 2.1 pag 2.3

pag 2

pag 2

pag 2.2 pag 2.4

pag 2.1.1 pag 2.1.2 pag 2.4.1

pag 3

pag 3

pag 4

come iniziareHP

about contact blogservice

service 1

ordine di progettazione e disegno

layout “mastro”

service 2 dettaglioarticolo

service 3 archivioarticoli

1

3

2

4

5 8

6 7

A

B B C D

E E E F D

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

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

posizionamentoEsistono diverse tipologie di menu, ognuna di queste avrà la sua importanza

e in base a questa avranno uno stile e una posizione diversa.

posizionamentoMenù laterale

informazioni utiliBriciole di pane (breadcrumbs)

stile menuNella 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 1work 2work 3work 4

work 2.1work 2.2work 2.3work 2.4

stile menualtri sottomenu:

home work contact

home work contact

work1 work2 work3

work1 work2work3

diversi menumenu di navigazione istituzionale

menu di navigazione informazioni

menu di navigazione principale

contenuto

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

topconsigliato

bottomsconsigliato

leftconsigliato

rightsconsigliato

trick graficicolori 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 ∏{}ØŒØÙ◊∞Çˇ˛˝—· Ú»”’¢‰›⁄ ‚◊}

devono essere monolingua;

se monoparola meglio.

mobileavete mai visto questo tipo di navigazione?

mobiledifferenze di navigazione tra un pc e uno smartphone

mobiledifferenze di navigazione tra un pc e uno smartphone

fissoavete mai visto questo tipo di navigazione?

tanti contenuti 1

tanti contenuti 2

call to actionhttps://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

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

Gestireun layout

introduzioneLa 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

terminologiagabbia grafica

griglia

unit gutter colums field{

gabbia graficacontenitore della griglia

è possibile determinare i margini top bottom left right

grigliacomposizione di elementi(trasparenti) utili per l’impaginazione

unitnumero di elementi che compongono la griglia

in questo caso: 6

gutterspazio tra le unit

determinano la dis-tanza tra i box

columsnumero di colonne ricavate dalle unit

è possibile creare molte combinazioni

fieldspazio orizzontale che definisce i con-tenuti dividendoli in righe

possono avere mis-ure (altezze) diverse in base alla loro im-portanza

scegliere colonne

simmetrica asimmetrica

scegliere colonneposizioneordine di letturagrandezza verticalegrandezza orizzontalelook and feelDeterminano che tipo di importanza deve avere un contenuto.

Grazie alle griglie è possibile prestabilire:ordine gerarchicobilanciamento tra gli elementiarmonia della paginaallineamenti precisi e consistenti

sezione aurea

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

per approfondiregriglie e gabbiehttp://www.designersinsights.com/designer-resources/using-layout-grids-effectively/

Libro sulle grigliehttps://www.amazon.it/gp/product/3721201450/ref=as_li_ss_tl?ie=UTF8&camp=3370&creative=24114&creativeASIN=3721201450&linkCode=as2&tag=ciroespo-21

Esempihttps://www.awwwards.com/30-grid-based-websites.html

esercizioDisegnare 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

content

paddingbordermargin

right

top

bottom

left

paddingUt quost et, iditiae con pere nulpa conse-quae cum sam, venditatur? Poraest fac-cus quatur moloreped quaero intio. Ossi-met aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus volup-tatem 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 in-tio. Ossimet aturisto doluptatur, omnis pra-tiorero iunt debitiae nonseniet ilitatibus voluptatem dolupta-qui 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 mo-loreped quaero intio. Ossimet aturisto dolup-tatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa do-luptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess

padding:10px padding-top:10px

padding: 0px

MarginUt quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur mo-loreped quaero intio. Ossimet aturisto dolup-tatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa do-luptibus 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 pra-tiorero iunt debitiae nonseniet ilitatibus voluptatem dolupta

margin:0px margin-top:20px

margin: 20px

borderUt quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur mo-loreped quaero intio. Ossimet aturisto dolup-tatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa do-luptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess



border:0px border-top:2pxsolidblue

border:2pxsolidblue

Box model


Titolo Pagina

immaginiSalvare 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

MotivazioniPerchè 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 mo-

tore di rendering farà fatica a gestirle (ovvero scaricarle).

2-Il “peso” di un sito web è la somma di tutte le informazioni testuali e im-magini. 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 prendereimmagini non

riproducibili in HTMLimmagini

riproducibili in HTML

Fotografie, icone, loghi, grafiche di ogni genere colori pieni, contorni (non troppo sfarzosi),gradienti (lineari e radiali)

Quali prendereimmagini non

supportate al 100% in HTML

immaginiriproducibili in HTML

Metodi di fusione, in questo caso: multiply e softlight Possibilità di opacizzare un colore o un immagine

TextureImmagini che garantiscono una

ottima resa con poco peso.

1-sono immagini modulari che affian-cate 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 propri-

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

selezioneslice tool

Tool utile per selezion-are diverse immagini e salvarle tutte assieme.

Le sezioni possono es-sere selezionate,

modificate e eliminate.

formati weble possibilità sono multiple poichè si può decidere la qualità dell’immagine in

base a colori e sfumature

http://www.gifparanoia.org/http://www.ilpost.it/2012/11/26/gif-animate-ipnotiche/2/

png156 kb

jpg33 kb

gif20 kb

formati web JPGJoint Photographic (Experts) Group

compressione di tipo “lossy” cioè con perdita di informazione;

Uso: fotografie

Screen e text by Wikipedia

formati web PNGPortable 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 (men-tre il GIF era limitato agli 8 bit, 256 colori)

Uso: Immagini con trasparenza


formati web GIFGraphics 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 spes-

so 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#/me-dia/File:Rotating_earth_(large).gif

http://www.gifparanoia.org/http://www.ilpost.it/2012/11/26/gif-animate-ipnotiche/2/


Alcune impostazioniDithering

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 PNG24Entrambi hanno il canale alfa ovvero supportano la

trasparenza.

PNG 2424 bit + 8 bit di alfa

=16,7 milioni di colori distinti

PNG 8 8 bit + 8 bit di alfa

= 256 colori distinti,

simile al formato GIFScreen by adobe.com

retinaLa 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 1Dato il layout fornito dal docente

salvare le immagini per il web e inserile all’interno del file html.

Esercizio 2Con questi elementi create una gif animata

Tipografiaper il web

il web e il testoTitolosottitoloNost moloreratur sunt, que noNost molore-ratur sunt, que no-Nost moloreratur sunt, que no Arum dolup-tas nonseria dolut quiam quam dolup-tatio ident latiae non-seque velibus id utem

res nonsectus, suntius andescimi, serchic to et, te venimaios etur repel est velentu ri-bus, cone moloriae volorumenda esed magnihi llacear cienia-tur milland esequi do-lendis ratem quaturem

doluptas dolor ad que nonse non nulparchi-cit ut velignis nus re-rum quaest am nosa-pitat.On pa quae. Itat. Up-tatum fuga. Is

Autore28-11-2017 10.30

gerarchiagrandezza del corpostile del fontcolore del carattereDeterminano 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 SafeEssendo 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 pro-prio computer.

che font usare?

Graziatoo

Bastoni?

che font usare?TITOLOLorem 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, venena-tis 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 vi-tae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Ae-nean imperdiet. Etiam ultricies nisi vel augue.

TITOLOLorem ipsum dolor sit amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penati-bus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla con-sequat 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. Viva-mus 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. Eti-am ultricies nisi vel augue.

che colori usare?TITOLOLorem ipsum dolor sit amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penati-bus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla con-sequat 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. Viva-mus 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. Eti-am ultricies nisi vel augue.

TITOLOLorem ipsum dolor sit amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penati-bus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla con-sequat 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. Viva-mus 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. Eti-am ultricies nisi vel augue.

stili disponibili font

rientro sinistroallineamento

rientro sinistro prima riga

stile fontcorpo

crenaturascala verticale

spostamento linea base

interlinea

rientro destroallinea lato dorso

avvicinamentoscala orizzontalecorsivo simulatodizionario

software: indesing

stili disponibili software: dreamweaver

numero di stili

h1 ph2h3h4h5h6

titoli in HTML paragrafiinHTML

è possibile aggiunge-re diversi stili di para-grafo, senza però una dicitura standard

https://www.awwwards.com/websites/typography/

spaziatureUdam dolupta quost, od quiat.Evel maionsed esequia sperios dol-lorem facit et, ius magnis saperunt.

Es ipitat dit, se eum ratemporatem

id moluptaqui sust quae ipsanima

nonsequat vercient, consequ isin-

vero 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 dollorem facit et, ius magnis saperunt.

E s i p i t a t d i t , s e e u m r a t e m p o r a t e m i d m o l u p t a q u i s u s t q u a e i p s a n i m a n o n -s e q u a t v e r c i e n t , c o n s e q u i s i n v e r o o d q u a t u m q u o s m a n u l l a n d .

Ipiento doluptas modita cumquibus sit aut lique ad est faciati uritatius ide pe nonsedi

interlinea letter spacing

esercizio

Lookand

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

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

organizzare1- 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 lookcolor palette

immagini scelta del carattere

layout

immaginariobrand identitytone of voice

scelta grigliagrandezzaresposive

max 2/3iconografichefotograficheillustrativenessuna

max 4/5

studiare il lookDefinire 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

azione

informazione

obiettivodel sito

dove deve trovare le informazioniprincipali e quelle secondarie?

cosa farà l’utente?quali passi dovrà compiere persoddisfare le sue esigenze?

esempio brieflavoro commissionato da: amici degli animaliche cosa: sito webpagine richieste:home;cosa facciamo;chi siamo;unisciti a noi;contatti.

che tono utilizzare: amichevole, sensibilizzante

esempio ricerca

esempio ricerca

esempio scelta colori

scelta 1

scelta 2

scelta 3

esempio prova colorescelta 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

GUI

Graphical User Interface quei componenti di grafica che fanno interagire

l’utente con la piattaforma digitale

http://www.teehanlax.com/tools/iphone/

organizzareAlcune 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ù ril-ievo, quelle che servono per la nav-igazione, quelle da inserire perchè istituzionali, quelle che fanno rifer-imento all’autore, quelle che fan-no riferimento ai tag e quelle cheservono per rendere il design accattivante?

organizzarein aiuto a questo problema abbiamo:

organizzare

link utili per icone:

http://fontello.com/

http://www.entypo.com/

bottoni

click click

normal

esiste una voce del menu

hover

la voce del menu è cliccabile

current

mi trovo nella pagina che si chiama “click”

active

sono sicuro che ho cliccato la voce

click click

bottoni

https://dribbble.com/shots/1898320-Material-Design-Button

material flat

nextskeuomorph (Scheumorfismo)

?

evoluzione

iOs

evoluzione

android

evoluzione

windows

tipi di form

input typelabel

selectradio button

checkbox

tipi di form

textarea

interazione mobile

https://uxplanet.org/mobile-design-techinques-e0212ac66765

http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/

in continua evoluzione nel mondo mobiletroviamo molteplici “gesture” per compiere azioni

Eserciziocreare una guideline seguendo il look and felldel proprio progetto (brief intermedio)

Testuali: - Titolo 1 - Titolo 2 - Sottotitolo 1 - Sottotitolo 2 - Paragrafo - Parole sottolineate - Parole in corsivo

Esempi:http://bashooka.com/inspiration/40-great-examples-of-ui-style-guides/

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

Esercizio...se non si ha idea di cosa fare nella prova intermedia,

scegliere un brand tra questi:

Loghi presi da google images

HTMLHyperText Markup Language

strutturacodice html

codice javascriptcodice php

....

....

....

....

....

....

....

index.html{

struttura<html>

</html>

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

strutturahtml

head

body

doctype

DTDdocument

typedefinition

(definizione del tipo di documento)

doctype

DTDhttp://www.w3.org/QA/2002/04/valid-dtd-list.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html>

</html>

<body>

contenuti visualizzati dal

browser

</body>

<head>

informazioni di servizio

</head>

doctype

documento HTML

altri linguaggi

XHTML?eXtensible HyperText Markup Language

sintassichiusura esplicita

chiusura implicita

<div> ciao </div>

<img src=”file://immagine.jpg”/>

sintassi<div> ciao </div>

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

tag apertura

tag apertura 1 tag apertura 2

tag chiusura

tag chiusura 1tag chiusura 2

contenuto

contenuto

genitore

figlio

indentatura

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

attributi

nome attributo = “valore attributo”

<div style=”color:yellow;”> ciao </div>

<div class=”stile_1” id=”wrapper”> ciao </div>

attributo

attributo 1 attributo 2

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

gerarchiaDOM

Il Document Object Model (spesso abbreviato come DOM), letteralmente modello a oggetti del documento, è una forma di rappresentazione dei docu-menti 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 codi-ce 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

BoldItalic

Ancor

Order listUnorder listList 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

Ricreare questa pagina inHTML utilizzando i tag stu-diati oggi in classe.

TITOLOsottotitoloLorem 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 fe-lis, 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.

TITOLOsottotitoloLorem 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, frin-gilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nul-lam 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, ultri-cies 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 1Vivamus 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 ullamcor-per 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 1sottotitolo 2TITOLO 2

Esercizio 2

CSSCascading Style Sheets o Fogli di stile

strutturastili_head

stili_head2content

mainh1p................

stili_1.css{

strutturabody{

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

<head><link href=“css/stili_1.css” rel=“stylesheet” type=“text/css” />

</head>

index.html stili_1.css

→HTML CSS

tipologie - css interni

<head><style type=“text/css”> </style>

</head>

index.html

CSS

HTML

tipologie - css in linea

<body style=“background:#000”> </body>

index.html

HTML

CSS

tipologie - css importati

@import url (“http://www.naba.it/stili_1.css”)

index.html stili_1.css

→ →HTML CSS

Selettori

• di elemento• di classe• di ID

Selettori - elemento

body { background:#ccc; }h1 { background:#ccc; }

<body> <h1> titolo </h1></bodyHTML

CSS

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

.myClass { background:#ccc; }

<div class=“myClass”> </div><h1 class=“myClass”> </h1><p class=“myClass”> </p>

<div class= “myClass myClass2 myClass3”> </div>

HTML

CSS

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>

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.

attribuzione

Selettori - classe

Una delle potenzialità dell’uso delle classi è il loro multiutilizzo e il loro inter-secamento 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>

CiaoCiao

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:

L’istruzione !important definisce quale tra queste regole diventerà più importante.

.colore_1 { color:pink; }

.colore_2 { color:green; }

<h1 class=“colore_1 colore_2”> ciao</h1>

.colore_1 { color:pink; }

.colore_2 { color:green !important; }

Ciao

Selettori - ID

#myID { background:#333; }

<div id=“myID”> </div><h1 id=“myID”> </h1><p id=“myID”> </p>HTML

CSS

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!

#sidebar#wrapper

#header

#footer

#content

Struttura completa 1

struttura composta dai tag HTML

struttura composta dai tag HTMLcon associati gli ID

<body> <div> </div> <div> </div> <div> </div></body>

<body> <div id=”header”> </div> <div id=”content”> </div> <div id=”footer” > </div></body>

Struttura completa 2

struttura completa composta dai tag HTML con associati gli ID e le classi

<body> <div id=”header” class=”colore dim”> </div> <div id=”content” class=”colore2 dim2”> </div> <div id=”footer” class=”colore3 dim”> </div></body>

Priorità delle regoleCASO1body{background:green; }body{background:red; }

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

Gerarchiabody{} specificità:1

.myclass {} specificità:10

#myID {} 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

GerarchiaLa gerarchia genitore-figlio presente in HTML si rifà pure con gli stili, ovvero:

Se un elemento genitore ha un determinato stiletutti 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.

CASO1body{background:green; }

CASO2body{background:green; }h1{background:red; }

<body> <h1>ciao</h1></body>

ciao ciao1 2

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;

Esercizio 2Duplichiamo l’esercizio concluso la lezione pre-cendente e dopo avergli applicato un foglio di stile esterno iniziare a richia-mare i primi selettori.

BOX MODEL

come definire la grafica in un sito web

come definire la grafica in un sito web

risoluzione minima utilizzata nel web800 x 600

risoluzione utilizzata da noi960 x contenuto

fold960 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 assolutecm (centimetri) mm (millimetri) pt (punti) pc (picas) in (pollici)

creare un boxIl 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-colorsenza di essi il box non potrà essere mai visibile!

Tuttavia se l’altezza non è specificata la misura può variare in base al conte-nuto. In fase di costruzione il contenuto non è mai disponibile quindi è opera buona impostare inizialmente un’altezza anche fittizzia.

creare un wrapperIl wrapper è il contenitore centrale, è caratterizzato per essere il contenitore di tutto il sito web, esso si differenzia dal body in quanto quest’ultimo è la pa-gina intera del browser.

wrapper

body

creare un wrapper

2 piccole informazioni da sapere:1- il wrapper sarà sempre un ID2-il wrapper sarà sempre centrale, per centrarlo inserire queste regole CSS:

margin-top:0px; margin-right:auto; margin-bottom:0xmargin-left:auto;

Avendo settato auto per i margini laterali il box seguirà una centratura auto-matica dettata dall’elemento genitore (che in questo caso è <html>)

Margin

margin-top:1px; margin-right:1px; margin-bottom:1pxmargin-left:1px;

margin:1px 1px 1px 1px;

margin:1px;

Margini - sintassi estesa

sintassi contratta

sintassi semplificata

Margin

Padding

padding-top:1px; padding-right:1px; padding-bottom:1px; padding-left:1px;

padding:1px 1px 1px 1px;

padding:1px;

Padding - sintassi estesa

sintassi contratta


Padding

Lorem ipsum dolor sit amet, consectetur adip-isicing elit, sed do eius-mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud e.

Border

border-top-width:1px; border-top-color:#000; border-top-style:solid; border-right-width:1px; border-right-color:#000; border-right-style:solid;

border-width:1px;border-color:#000;border-style:solid;

border:1px solid #000;

bordi - sintassi estesa

sintassi contratta


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

larghezza dei box: 200px

aggiungendo 20px di padding al box verde la sua larghezza supera i 600px del wrapper quindi cade.

(larghezza box verde) + (padding) =

240

larghezza del verde: 240px

per mantenere il padding e la st-essa posizione si deve fare la dif-

ferenza tra il padding aggiunto e la larghezza di inzio.

(larghezza box verde) - (padding) =

200 - 40= 160

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 co-dice. 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 2ricreare i layout con le tecniche imparate oggi

Esercizio 3ricreare i layout con le tecniche imparate oggi

FLOATper layout a più tabelle

Uso - Float Left

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

Uso - Float Right

.box_2{ width: 200px; height: 200px; background-color: green; 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 ap-poggio, 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.

In questo modo non si ha l’obbligo di impostare la regola al singolo blocco (in questo caso il giallo)

div clear

<body> <div class=”rosso”></div> <div class=”verde”></div> <div class=”clear”></div> <div class=”giallo”></div></body>

Float e Clear - info utili2-È 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>

<body> <div class=”rosso”></div> <div class=”verde”></div> <div class=”giallo”></div> <div class=”blu”></div></body>

float: Left;

float: Right;

EsercizioCreare 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

staticabsoluterelative

fixed

La scelta varia in base alle esigenze

StaticIl 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, indip-endentemente 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;}

elemento htmlwrapper

Absolute esempio 2

div{ position: absolute; top: 0px; right: 0px;}

#wrapper{ position: relative;}

elemento htmlwrapper con:

Relative

Il valore relative altera il posizionamento di un ele-mento 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;}

.box_2{ position: relative; top: 20px; left: 50px;}

wrapper

Fixedil 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 posizionedelle 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 glielementi su un asse z cambiando la profondità deglielementi e il loro ordine naturale di sovrapposizione.

(simili ai livelli di photoshop)

Z-index esempio

.box_1{ z-index:0; }



NB. da usare solo con position: fixed, relative, absolute

ESERCIZIORicreare questo disegno utilizzando le tecniche di posizionamento.NB. fatevi aiutare da “firebug” o “ispeziona elemento” dei browser.

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

alcune psudo-elementi applicabili al testo:

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

: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 utilizzarela 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 SQUIRRELFont 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 - metodoStep 1 - caricareAssicurarsi che il font rispetti i requisiti.Cliccare su webkit generator, spuntare la check-box e cliccare generate, sucessivamente down-load.

Step 2 - la cartellaDopo 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 HTMLCreare un link nel documento HTML che richiami il file appena rinominato.

Step 3 - il codice CSSInserire 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/

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

DifferenzeLa principale differenza nella gestione delle immagini è il loro inserimento,

infatti per visualizzare una foto o una grafica in un sito web possiamo identi-ficare 2 grandi metodi:

Inserimento HTMLutilizzando il tag

<img>

Immagini di contenuto per la fruizione degli utenti.

Esempio: fotogallery, il logo di una azienda o foto che rappresentano

una sezione del sito.

Inserimento CSSutilizzando la proprietà background-image

Immagini come elementi grafici che servono per il look visivo del layout.

Esempio: texture, immagine di sfon-do, filetti e elementi grafici di “contor-

no”

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 per-dere le proporzioni.Possono essere omesse.

Background-imageIl background-image è un proprietà ricca di regole, con essa è possibile ge-

stire 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 2Ricreare 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>

<ul><li> voce menu 1</li><li> voce menu 2</li><li> voce menu 3</li>

</ul>

<ol><li> </li><li> </li>

</ol>

una lista con i contenuti si presenterà in questo modo:

CREARE UN MENU - formattare una lista

ul, ol, li {margin:0; padding:0; list-style:none;}

Come prima cosa bisogna eliminare le proprietà di default:

INTRODURRE I LINK

a:{text-decoration:none; color:#000;}

a:hover{color:#666;}

a:visited{color:#999;}

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

INTRODURRE I LINK

a:{text-decoration:none; color:#000; display:block;} a:hover{color:#666;}a:visited{color:#999;}

Per poter utilizzare gli elementi del box model occorre definire la proprietà display con valore block.

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

zioni.

INTRODURRE I LINK

a:{text-decoration:none; color:#000; display:block;} a:hover{color:#666;}a:visited{color:#999;}

Per poter utilizzare gli elementi del box model occorre definire la proprietà display con valore block.

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 movimen-to” 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.

Documents

WEB DESIGN I · HTML5 il murkup e le api. di Gabriele Gigliotti, Gianluca Troiani - Editore Gabriele Gigliotti, ... primo cellulare con connesione internet Primo iPhone Nascita del