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
Web Design è un espressione utilizzata per definire la progettazione tecnica, strutturale e grafica di un sito web.
Progettazione per il world wide web. wikipedia
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/
internet funzionamento
server
richiesta
ricerca/esecuzionerisposta
rendering
LATO CLIENT
LATO SERVER
computer
browser
Richiesta e risposta di un file nel web
file
internet funzionamento
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
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.
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
struttura elementi base
wrappercontenitore generale,
grandezza 960px,quasi sempre centrato
http://www.corriere.it
struttura elementi base
headertesta del sito,spesso contiene:
-logo-payoff-lingua
-menu istituzionali-barra di ricerca
struttura elementi base
nav/menumenu di navigazione principale
il più importante.Può essere composto anche
da immagini e icone
http://it.beatsbydre.com
struttura elementi base
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.
struttura elementi base
sidebarelemento non obbligatorio,serve per inserie un menu
secondario ho dei contenuti meno rilevanti.
Molto spesso usato nei blog.
struttura elementi base
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.
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
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
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.
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
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
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.
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
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.
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/
fieldspazio orizzontale che definisce i con-tenuti dividendoli in righe
possono avere mis-ure (altezze) diverse in base alla loro im-portanza
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
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 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 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
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
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
border:0px border-top:2pxsolidblue
border:2pxsolidblue
Box model
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
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
Screen e text by Wikipedia
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/
Screen e text by Wikipedia
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.
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?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
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
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
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/
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?
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)
?
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
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
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
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
commenti
<!-- questo non verrà mostrato nel browser -->
i commenti servono:-per trovare un errore nascondendo il codice senza eliminarlo
-come segnaposto o indice o piccola nota per spiegare la parte di 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
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
<head><link href=“css/stili_1.css” rel=“stylesheet” type=“text/css” />
</head>
index.html stili_1.css
→HTML CSS
tipologie - css importati
@import url (“http://www.naba.it/stili_1.css”)
index.html stili_1.css
→ →HTML CSS
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.
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
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
sintassi semplificata
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
sintassi semplificata
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.
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.
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 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)
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; }
.box_2{ z-index:50; }
.box_3{ z-index:100; }
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.
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.
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/
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 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.
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;}