WEB DESIGN II - gabrieleruscelli.com · HTML5 e CSS3 di Gabriele Gigliotti ... Editore Gabriele Gigliotti, Gianluca Troiani 9. Build you own website the right way by Ian Lloyd - third

WEB DESIGN IIdocente: Gabriele Ruscelli

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

Queste slideQueste slides fanno parte del corso “Web Design II & HTML II”.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.

ProgrammaHTML 5 introduzione ai nuovi

tag

Utilizzo delle tecniche di base dei CSS3

Animazioni e transazioni con CSS3

Design mobile, come si progetta un’app

Responsive design con griglie fluide

Responsive design con media query

Testo e immagini responsive

View Port e Flex box

Flex box

jQuery introduzione

Revisione esame

Revisione esame

1

2

34

5

6

9

8

7

10

11

12

esame MODALITA’ DI VALUTAZIONE

Gli esami dovranno essere sostenuti dimostrando di aver appreso le logiche del digital design con la presentazione di un progetto individuale per un mini-sito web “One-page” utilizzando le tecniche degli standard W3C ed il conseguente superamento di una verifica orale.

I criteri generali di valutazione si fondano su tre parametri fondamentali: la qualità dell’esecuzione grafica, la preparazione “tecnica” di costruzione e la capacità di aver appreso gli obiettivi fondamentali di questa materia.

La valutazione complessiva sarà quindi così composta:- frequenza, attenzione, comportamento e preparazione generale : 33% del voto- parte grafico/estetica + architettura dell’informazione : 33% del voto- parte tecnica di costruzione (HTML + CSS) : 33% del voto

esame appelli sucessivi

Lo studente che si proporrà negli appelli successivi al primo, sarà soggetto a un carico maggiore di lavoro.Oltre a portare il sito web sopra citato l’alunno sarà tenuto a sostenere una prova teorica scritta, pertanto si è obbligati a presentarsi all’ora precisa dell’esame.La prova scritta sarà composta da domande chiuse su argomenti svolti in classe. Prendere come riferimento le slide e se opportuno i libri specifici.

HTML5 e CSS3di Gabriele Gigliottihttp://www.apogeonline.com/libri/9788850330119/schedano capitoli:Realizzare form dinamiciSviluppare applicazioni web offlineSfruttare la geolocalizzazioneTabelle di supporto dei principali browser

Responsive Web Designdi Gianluca Troianihttp://www.apogeonline.com/libri/9788850316694/schedano capitoli:Strumenti per il test ed emulatori multipiattaformaCreazione di CSS responsive con SASS

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. Build you own website the right way by Ian Lloyd - third edition - Editor: SitePoint

Sitografica specifica: 1. http://www.italianalistapart.com 2. http://learn.shayhowe.com/advanced-html-css/ 3. http://www.zeldman.com 4. http://www.cssbeauty.com/gallery/ 5. http://www.webcreme.com/ 6. http://www.sitepoint.com/ 7. http://www.thefwa.com/ 8. http://www.awwwards.com/ 9. http://www.iwebdesigner.it/ 10. http://www.html5today.it/ 11. http://www.yourinspirationweb.com/ 12. http://onepagelove.com/

Bibliografia e sitografia generale: 1. Jeffry Zeldman Progettare Siti Web Standard – tecniche per il design con XHTML e CSS, Editore Parson Education Italia – disponibile da HOEPLI Milano in italiano e in inglese. 2. Jackob Nielsen, Designing Web Usability, New Riders Publishing, USA, 3. http://www.w3.org/ 4. http://www.w3.org/html/ 5. http://www.w3.org/Style/CSS/

HTML5il presente e futuro

documentazionePiccolo e veloce Funzioni HTML5

avanzateGuida completa

INTRODUZIONE

L’HTML5 è il linguaggio universale utilizzato sul web, è interpretabile in ogni browser e permette la

composizione di pagine web su computer e device mobili.

DOCTYPE

Definiamo un doctype per permettere alla pagina di essere renderizzata in modalità standard sui vari browser.

<!doctype html><html><head></head><body></body></html>

Da notare il doctype privo di dtd.

CHARSET

Definendo il charset possiamo forzare il browser ad un rendering del testo secondo un set di caratteri da noi scelto.

Per avere una maggiore compatibilità con traduzioni e caratteri speciali scegliamo utf-8

<!doctype html><html><head><meta charset= “utf-8” /></head><body></body></html>

ALTRI META

È opportuno inserire l’elemento title, il meta description e il meta keyword

<head><meta charset= “utf-8” /><title> La mia pagina in HTML5 </title><meta name= “description” content= “Descrizione della pagina” /><meta name= “keywords” content= “keyords1, keyords2, keyords3” /></head>

FAVICONPer includere una favicon è possibile utilizzare il tag <link>.

Il formato può essere .png .ico .gifA seconda del formato ogni browser può scegliere come renderizzarla.

Per Photoshop esiste un plugin gratuito che permette il salvataggio di questo formato:http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html

<head><link rel= “shortcut icon” href= “image/favicon.ico” type= “image/x-icon”><link rel= “stylesheet” href=”css/style.css” /></head>

NUOVI ELEMENTI

Le principali novità dell’HTML5 rispetto alle altre versioni è l’introduzione di nuovi elementi che garantiscono nuove

funzionalita al linguaggio, come:

-elementi video e audio (senza l’ausilio di flash garantendo compatibilità con device mobili);-l’elemento canvas (permette la definizione di grafiche attraverso una sintassi simile a javascript);-nuovi elementi per i form (garantiscono interazioni elaborate con per l’utente);

Essendo nuovi elementi molto peculiari il loro funzionamento non è ancora completamente supportato.

NUOVI ELEMENTI i nostri

Nuovi elementi ad alto valore semantico che permettono di strutturare pagine web.

Elemento <HEADER>Elemento <FOOTER>Elemento <SECTION>

Elemento <ASIDE>Elemento <ARTICLE>Elemento <HGROUP>

Elemento <TIME>Elemento <MARK>


Elemento <SECTION>Viene utilizzato per definire una porzione della pagina web.

il suo valore semantico impone che ogni sezione abbia un valore/contenuto peculiare che rappresenti un argomento/sezione del sito. Al suo interno ci possono essere ulteriori tag.

Elemento <ASIDE>Viene utilizzato per definire una porzione della pagina web il cui contenuto sia correlato

ma differente rispetto al suo contenuto principale. Al suo interno ci possono essere ulteriori tag.

Elemento <ARTICLE>Viene utilizzato per definire un contenuto del sito web, normalmente questo deve essere condivisibile e riutilizzabile, a normalmente carattere indipendente rispetto al resto della

pagina. Al suo interno ci possono essere ulteriori tag.


Elemento <HGROUP>Viene utilizzato all’interno dell’elemento section per definire un insieme di intestazioni

(h1...h6), aiuta a separare i titoli all’interno dell’elemento section. Al suo interno ci possono es-sere ulteriori tag di intestazione.

Elemento <TIME>Viene utilizzato per definire data e ora di una pagina, sezione o articolo.

Al suo interno non ci possono essere ulteriori tag.

Elemento <MARK>Viene utilizzato per definire del testo rilevante all’interno del contenuto.Rappresenta un modo univoco per enfatizzare una porzione di testo.

NUOVI ELEMENTI conclusioni

Piccola notaLa maggior parte dei browser non conosce questi elementi

e di fatto non sa come renderizzarli.

Su questa base i nuovi elementi dell’HTML5 vengono normalmente renderizzarli senza valori di default per gli stili.

Una pratica consigliabile è quella di definire uno stile che definisce un display block per ognuno degli elementi utilizzati.

STRUTTURA

Differenza 1

HTML 4.01

<div id=”header”></div>

<header></header>

#header{ ... ...}

header{ ... ...}

HTML 5

Differenza 2

HTML 4.01

<div id=”header”> <div id=”logo”> </div></div>

<header> <figure> </figure></header>

#header{ ...}

#header #logo{ ...}

header{ ...}

header figure{ ...}

HTML 5

Differenza 3

HTML 4.01

<div id=”header”></div><div id=”content”> <div id=”parte_alta”> </div></div>

<header></header><section id=”content”> <header> </header></section>

HTML 5

Differenza 3

HTML 4.01

#header{ ...}

#content #parte_alta{ ...}

header{ ...}

#content header{ ...}

header{...}section#content header{...}

#header{...}#content{...}#parte_alta{...}

HTML 5

oppure:oppure:

Differenza 4

HTML 4.01

<div> <a> <img> <ul> <li> <h1>

<div id=“mio_id”></div>

<section id=“mio_id”></section>

<div class=“mia_classe”> </div>

<section class=“mia_classe”> </section>

<section> <article> <header>TAGID

CLASSI{ HTML 5

Esercizio

Dato un layout, dividerlo in sezioni e attriubuire a queste un tag HTML5. Sucessivamente determinare dei

selettori css validi per una possibile gestione di stile.

Section

Article

Aside

Video

Audio

Figure

Nav

Footer

Header

Figcaption

Esercizio esempio 1

<header>

<nav>

<footer>

<section>

Esercizio esempio 2

<section>

<article class= “colonna”>

h1p p

<article class= “colonna”>

Metodi

come scrivere CSS e HTML in diversi modi

Metodo 1 stile unico per tagMetodo base, per neofiti.

Creo diversi stili in un solo ID o Classe e associo questi ad un tag.

<section class=”myClass”>

</section>

.myClass{

width: 200px;

height: 300px;

background-color: blue;

font-size: 20px;

color: red;

line-height: 23px;

padding-top: 20px;

margin-bottom: 20px;

}

Metodo 2 stile annidatoCreo diversi stili in funzione della gerarchia presente nell’HTML.

<section id=”parte_centrale”>

<header>

<h1>Titolo</h1>

</header>

<article>

<h1>Titolo2</h1>

</article>

</section>

#parte_centrale{

font-family: helvetica;

}

#parte_centrale header h1{

color: fuchsia;

}

#parte_centrale article h1{

color: aqua;

}

Metodo 2 stile incrociatoCreo tante classi e le riutilizzo quando mi servono.

Ottimo per la costruzione di siti web con griglia precisa.

<section class=”marginT10 marginB20 bgBlack”>

</section>

<section class=”marginT20 marginB20 cBlack”>

</section>

<section class=”marginT10 marginB20 bgGreen”>

</section>

.marginT10{margin-top: 10px;}

.marginT20{margin-top: 20px;}

.marginB10{margin-bottom: 10px;}

.marginB20{margin-bottom: 20px;}

.cBlack{color: black;}

.bgBlack{background-color: black;}

.bgGreen{background-color: green;}

Metodo 3 stile per classi

CSS3nuovi stili e formattazioni

INTRODUZIONE

CSS3 è la nuova versione dei CSS che permette a tutti i designer di implementare effetti, dare animazioni e creare

nuove formattazioni.

Putroppo la loro compatibilità non è ancora universale, tuttavia i browser moderni non creano ecessivi

problematiche in fase di rendering.

Gli sviluppatori sono quindi invogliati a creare nuovi effetti al fine di rendere siti internet più veloci e acessibili.

SUPPORTO

http://www.w3schools.com/cssref/css3_browser-

support.asp

http://caniuse.com

I PREFISSIPer l’implementazione dei CSS3 abbiamo la necessità di inserire dei prefissi per la completa compatibilità tra tutti i

browsers.

CSS1 / CSS2 CSS3

div{ font-size: 32px;}

div{ border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px;}

I PRINCIPALI

I principali CSS3 posso essere suddivisi in diversemacroaree:

border-radiusbox-shadowtext-shadow

rgba..

rotateskewscale

translate

transitionanimation

media queryflexbox

viewport

stili e colori trasformazioni animazioni responsive

TRASFORMAZIONIL’istruzione da usare si chiama “transform” ad essa si

identifica il tipo di proprietà da utilizzare, sucessivamente si immette il valore.

istruzione proprietà valore

div{ transform: rotate(25deg); transform: skew(20deg); transform: scale(2); transform: translate(20px);}

TRASFORMAZIONI

div{ transform: rotate(25deg); transform: rotateX(25deg); transform: rotateY(25deg); transform: rotateZ(25deg); transform: rotate3d(25deg);}

transform-origin: XXXX;

Rotate

NB

TRASFORMAZIONI

div{ transform: skew(20deg); transform: skewX(20deg); transform: skewY(20deg);}

Skew

TRASFORMAZIONI

div{ transform: scale(2); transform: scaleX(2); transform: scaleY(2); transform: scaleZ(2); transform: scale3d(2);}

Scale

TRASFORMAZIONI

div{ transform: translate(20px); transform: translateX(20px); transform: translateY(20px); transform: translateZ(20px); transform: translate3d(20px);}

Translate

Esercizio

Data la seguente immagine ricrearla in CSS3

Esercizio

Data la seguente immagine ricrearla in CSS3

CSS3

ANIMAZIONI

come animare oggetti con il codice

INTRODUZIONE

Le animazioni CSS3 di fatto soppiantano completamente il tanto usato Flash.

Grazie ai CSS3 non ci si limita solo alla animazione ban-ner bensì anche i contenuti più strutturali di una pagina.Questo perchè si ha la possibilità di “animare” qualsiasi

blocco HTML.

DIFFERENZE

Data una proprietà (iniziale) si arriva a un’altra proprietà (finale)

creando una transazione.

Sono gestite con il tempo.

Si attivano scatenando un evento, come ad esempio

un rollhover.

Date N proprietà possono mutare nel tempo utilizzando dei

breakpoint.

Sono gestite con il tempo.

Si attivano autonomamente, appena la pagina viene

renderizzata dal browser.

TRANSIZIONI ANIMAZIONI

Transizione

.box_1{ background-color: red;}

.box_1:hover{ background-color: green; transition-property: background-color; transition-duration: 2s; transition-timing-function: ease;}

Una transizione è un cambio di stato tra due proprietà avendo l’ausilio del tempo.

stato iniziale

stato finale

Animazione 1

@keyframes cambioColore{ from{ background-color: #fff; } to{ background-color: #000; }

}

La creazione di un’animazione si basa su una serie di istruzuioni chia-mati “keyframes”. Un keyframes è caratterizzato da un nome identifica-tivo che viene applicato in qualsiasi classe per l’aggiunta di parametri

di controllo.

nome

proprietà

Animazione 2

.animazione_1 { animation-name: cambioColore; animation-duration: 3s; animation-iteration-count: 2; animation-direction: alternate; animation-delay: 2s;}

nome

La classe “.animazione_1” potrà essere applicata a qualsiasi elemento presente nella pagina html.

Si possono creare diverse animazione e applicarle dove si vuole.

Per maggiori dettagli http://www.w3schools.com/css/css3_anima-tions.asp

Timing-FunctionTra tutte le proprietà applicabili alle animazioni e transizioni “Timing-Function” è una delle più importanti inquanto con l’utilizzo di questa

la resa finale potrebbe cambiare notevolmente.

http://easings.net/it

WoW.jsPer far scatenare l’animazione nella porzione di schermo su cui

l’utente è attivo abbiamo bisogno di questo script che ci permette di far partire l’animazione quando vogliamo noi.

http://mynameismatthieu.com/WOW/

EsercizioAnimare a piacimento il fiorellino costruito durante la lezione

precendete.

APPun nuovo mondo del design

che cosa è un’APP?

che cosa è un’APP?

su che supporti?Desktop APP

Mobile APP

Tablet APP

SmartWatch APP

SmartTV APP

Car/auto APP

futuro???

su che supporti?lavoro

svago

complessità usofacilità uso

Desktop APP

Mobile APP

Tablet APP

SmartWatch APP

Car/auto APP

tipologieweb

ibrida

nativa

universale

-motori di ricerca-sviluppo solo con tecnlogie web

-bisogna essere sempre online-limitazioni di performance

-costruzione di solo un app-utilizzo tecnologie web e native

-limitazioni di performance-ogni integrazione nativa può essere complessa

-sviluppo tecnologie nuove e performanti-applicazione più fluida e usabile (design pattern)

-doppio lavoro-costi più alti

non ancora nel mercato, si cerca di creare applicazio-ni che si possano declinare su diversi device.

Ad esempio la simmetria tra windows phone (dece-duto) e windows 10

il ciclo di un’APP

azienda digitale

uploadsubmission

store

azienda digitale

uploadsubmission

downloade istallazione

downloade istallazione

store

notifica

utente

utente

usa l’app

aggiorna l’app

Esempio di quando si scarica un APP per la

prima volta

Esempio di aggiorna-mento di un’app già

installata

il ciclo di lavoro su un’APP

idea servizio analisifunzionale

studio UX progettazione UI

sviluppo test fix issuepreparazionealla build di collaudo

preparazionealla build di produzione

business simulation rilascio ufficiale

richiesta cliente

il ciclo di lavoro su un’APPanalisifunzionale

studio UX

progettazione UI

sviluppo

test

fix issue

preparazionealla build di collaudo

preparazionealla build di produzione

business simulation

rilascio ufficiale

la parte “creativa”

studio UX

ricerca e analisi

scenario e personas

user test

information architecture

interaction design

wireframe

prototipazione bassa fedeltà

ricerca stile grafico

tone of voice

design pattern

styleguide

visual design

motion design

prototipazione alta fedeltà

progettazione UI

UX

UI

Esercizio

sollecita pareggia

crea

richiedi soldi richiedi soldi

crea

crea

Richiedi soldi a: dove hai anticipato i soldi?

quanti soldi hai anticipato?

Debiti / Crediti Debiti / Crediti



Debiti / Crediti

Debiti / Crediti

100€ 120€

120€ 120€

120€ 120€

120€

100€

Andrea Andrea

Andrea Andrea

Andrea Andrea

Andrea

Andrea

Andrea

-60€ -60€

-60€ -60€

-60€ -60€

-60€

-60€

-20€

-40€ -40€

-40€ -40€

-40€ -40€

-40€

-20€ -20€

-20€ -20€

-20€ -20€

-20€

Gabriele Gabriele

Gabriele Gabriele

Gabriele Gabriele

Gabriele

-40€ -40€

-40€ -40€

-40€ -40€

-40€

-60€ -60€

-60€ -60€

-60€ -60€

-60€

+20€

+20€

+20€ +20€

+20€

+20€

+20€

totale totale

totale totale

totale totale

totale

totale

pranzo dalla vecchia pranzo dalla vecchia



pranzo dalla vecchia

sigarette

discoteca

Marco +140€pranzo dall’abruzzese

Massimiliano -20€pizza

Andrea

Febbraio 2018

Marzo 2018

+20€Cena dalla vecchia

regalo Massimiliano regalo Massimiliano



regalo Massimiliano

sollecita pareggia

birra birra

birra birra

birra birra

birra

cover cellulare cover cellulare



cover cellulare

storico storico

storico storico

storico storico

storico

storicoMassimiliano

Andrea

Marco

GabrieleDebiti / Crediti 120€

sollecita

pareggia pareggia

sollecita

torna allo storico

torna allo storico

Andrea

Andrea Andrea

Andrea-60€

-60€ -60€

-60€

-40€

-40€ -40€

-40€Gabriele

Gabriele Gabriele

Gabriele

Seleziona chi sollecitare

Chi ha saldato il suo debito? Chi ha saldato il suo debito?

Seleziona chi sollecitare

Hai sollecitatoAndrea per una richiesta di:

60€

Hai pareggiato il debito diAndrea per una richiesta di:

60€

miei soldi

miei soldi

0,0€1

4

2

5

3

6

7 8

0

9

<

soldicondivisi

soldicondivisi

home page home page

Disegnare la grafica di questo flusso

WebResponsive

Design

siti web su tutti i devices

documentazione

Responsive designResponsive web design è un approcio volto ai siti per fornire una visione ottimale e un esperienza di facile lettura su qualsiasi

dispositivo.

Il Responsive design si basa su layout fliudi con griglie proporzionali al contenuto, immagini flessibili e diversi comandi

media query.

Responsive designAnche questo è uno dei motivi per cui la figura del Designer Digitale

è molto richiesta in questo momento.Se notate che il responsive design è una tecnica che fa riferimento alle basi dell’impaginazione, utilizzando schemi logici strutturali e

gabbie grafiche.

griglie

Esempihttp://popcorn.im/

http://discover.collectorwp.com/

http://zomigi.com/blog/hiding-and-revealing-portions-of-images/

Link utilihttp://www.responsivegridsystem.com/

http://semantic.gs/

http://www.hongkiat.com/blog/rwd-tools/

immaginiPer rendere le immagini “flessibili“ possiamo attribuirli diverse tecniche: tra cui la riduzione in %, la riduzione tramite media query o il semplice “croppaggio”

testiI testi come le immagini se inseriti in griglie efficenti se-guiranno l’andamento delle colonne fino all’arrivo di un punto di non visibilità.

Anche qui entrano in campo le media query che definisco-no quando bisogna cambiare l’impaginazione della griglia stessa.

Media QueryGrazie alle media query possiamo definire diversi tipi di layout della nostra pagina. Normalmente la struttura e la grafica di un sito web fa riferimento es-clusivamente ai suoi CSS, le media query di fatto non cambiano i contenuti ma solo i CSS definendoli in base a una misura decisa.

stili_1024.css

colore font: rossocorpo font: 14

stili_960.css

colore font: rossocorpo font: 18

stili_420.css

colore font: giallocorpo font: 24

Media Query@media screen and (max-width: 1024px) {

.header {color: red;font-size: 14pt; }

}

@media screen and (max-width: 960px) {

.header {color: red;font-size: 18pt; }

}

@media screen and (max-width: 420px) {

.header {color: yellow;font-size: 24pt; }}

ContenutiCon il responsive design è possibile nascondere determinati contenuti.Dobbiamo pensare in che ambito il nostro utente sta visualizzando il sito

web, in che circostanza e con quale dispositivo.

L’omissione di alcuni contenuti è fondamentale per comunicare le informazioni principali, in tal modo l’utente sarà soddisfatto per avere quello

che vuole in poco tempo.

Es.http://colly.com/archives/

Testing

Impostazioni

Impostazioni

Impostazioni

EsercizioRicreare il layout con misure in per-

centuale

Griglia fluida

100%

25%

50% 50%

25%25% 25%

da px a %

La conversione da pixel a percentuale si effettua grazie alle proporzioni,per fare questo si ha bisogno di sapere 2 valori fondamentali:

La grandezza della gabbia grafica (Es. 960px/1024px)La grandezza del singolo blocco (Es. 300px)

300px 960px

da px a %

Per avere il valore in % dobbiamo rifarci ad alcune regole di matematica:

(misura iniziale / misura contenitore )* 100 = valore atteso

nel nostro esempio:

(300/960)*100 = 31.25%

Ora questo nuovo valore sarà la larghezza effettiva del nostro box, quindi:

.box{ width: 31.25%;}

Immagini flessibiliLe immagini essendo anch’esse dei contenuti dovranno adattarsi al layout,

per fare questo si introducono le immagini flessibili.

Per creare un immagine flessibile bisogna impostare una griglia fluida, sarà quest’ultima a cambiare larghezza.

L’immagine seguirà la flessione della griglia e quindi si “adatterà” al layout.

30% 30% 30%

Immagini flessibili

.immagine{ width: 100%; height:auto;}

.sfondo{ background-size: cover; background-image: sfondo.jpg;}

30% 30%

Due metodi per due esigenze diverse: width:100% per inserire le immagini tramite il tag img in html.

background-size: cover per le immagini di sfondo

Media Query

.box_1{ width: 30%;}

@media screen and (max-width: 960px){.box_1{ width: 80%;}}

Le media query funzionano automaticamento una volta che viene inserito il codice di riferimento, sono regole aggiuntive che vengono “sovrapposte” alle

precendenti.

Media Query - hide

.box_1{ display: block;}

@media screen and (max-width: 960px){.box_1{ display: none;}}

Per eliminare un contenuto si necessita della proprietà display con i rispettivi valori: block e none.

Media Query - show

.box_1{ display: none;}

@media screen and (max-width: 960px){.box_1{ display: block;}}

Nel caso opposto al precedente basta invertire le proprietà.

Esercizio

Adattare il layout fatto in precedenza rendendolo

mobile

Testoresponsivescalabile e utile

da px/pt a em

L’unità di misura “em” mette in relazione gli elementi figli con gli elementi genitori creando sempre un andamento proporzionale, proprio per questo vi-

ene utilizzato spesso, specialmente in ambito tipografico.

Sapendo che la misura standard web di un font è 16px possiamo impostarla come se fosse 1em:

html{ font-size: 1em;}

Sapendo che 16 px equivalgono a 1em e che le misure in em sono proporzi-onali possiamo dedurre che 2em equivalgono a:

(16px * 2) = 32pxe così via.....

Il testo nel mobile designNel mobile design ogni elemento tipo-grafico (carattere, in-terlinea, letter spac-ing...) deve essere più grande rispetto ad una pagina desktop.

Nella progettazione di decide a posteriori quanto il testo deve variare da un disposi-tivo all’altro.

Esempi importanti

https://material.io/design/typography/the-type-system.html#

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/

quale scegliere?

emrem

em con elemento genitore

Grazie all’eredità da genitore a figlio se si imposta un valore diverso al geni-tore tutti i figli a catena cambiano misura rimanendo proporzionali.

1em 2em

0.5em 1em

0.2em 0.4em

rem con pagina

1em 2em

4em

0.5em 2em

0.2em 0.8em

x1.2 x1.4

Desktop

h1font-size: 2em;line-height: 0.8em;letter-spacing: 0.02em;margin-bottom: 0.4em;

Tablet

h1font-size: 2,4em;line-height: 0.96em;letter-spacing: 0.024em;margin-bottom: 0.48em;

Mobile

h1font-size: 2,8em;line-height: 1.12em;letter-spacing: 0,028em;margin-bottom: 0.56em;

esempio di progettazione grafica

Desktop

section{ font-size: 1em; width: 60%; min-height: 100px; background-color: fuchsia; padding:5%; }h1{ font-size: 2em; line-height: 0.8em; margin-bottom: 0.4em; letter-spacing: 0.02em;}

Mobile@media screen and (max-width: 600px){

section{ font-size: 1.4em; width: 80%; padding: 10%;} }

esempio di progettazione codice

risultatoDesktop Mobile

ConversioniNB. impostare sempre font-size: 100%; che equivale a 16px

px to emNpx /16 = valore in em Es. 300 / 16= 18.75em

em to pxNem * 16 = valore in px Es. 18.75 * 16 = 300px

px to %(misura box / misura contenitore ) * 100 = valore attesoEs. (300px / 960px) * 100 = 31.25%

% to px(misura in percentuale / 100) * misura contenitore = misura boxEs. (31.25% / 100) * 960px = 300px

http://pxtoem.com

DocumentazioneTipografia nel mobile designhttps://www.mockplus.com/blog/post/typography-in-mobile-design

https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html

https://www.smashingmagazine.com/2018/06/reference-guide-typography-mobile-web-design/

Uso di EM e REMhttps://webdesign.tutsplus.com/it/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

https://medium.com/@julienetienne/pixels-are-dead-faa87cd8c8b9

EsercizioFinire l’esercizio dato dal docente utilizzando misure EM.

Immaginiresponsive

multi immagini per multi schermi

cosa sapereogni schermo ha la sua densità di pixel (retina), sopratutto macBookpro o simili

spesso si ha la neces-sità di avere immagini con proporzioni diverse

1x

schermi larghi tablet smartphone

2x 3x

https://www.mydevice.io

Retinaper la visualizzazione di immagini su schermi retina basta salvare il proprio file con il doppio o tripla risoluzione.

mare.jpg(200x200px)

mare2x.jpg(400x400px)

mare3x.jpg(600x600px)

Retina applicazioneIn HTML bisogna richiamare l’immagine 2x “forzando” le sue dimensioni a quelle originali: <img src=”mare2x.jpg” width=”200px” height=”200px” />

oppure utilizzare un nuovo attributo che recepisce quale tipo di schermo sta visualizzando la pagina:

<img src=”img/waterfall_small.jpg” srcset=”img/waterfall_small.jpg 1x, img/waterfall_big.jpg 2x”>

Retina applicazioneIn CSS bisogna inserire la media query appropriata, dopodiché mettere la foto come immagine di sfondo e dargli sempre la metà della misura origina-le: @media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { .foto{ background-image:url(mare2x.png); background-size:200px 200px; }}

<picture>

<picture> <source media=’(min-width: 401px)’ srcset=’images/photo-big.jpg’/> <source media=’(max-width: 400px)’ srcset=’images/photo-tall.jpg’/> <img src=’images/photo-small.jpg’/> </picture>

L’elemento picture gestisce le singole foto con mediaquery uniche per il cambio di immagine.

sostituire le foto su deviceoltre ai metodi appena descritti, per avere le immagini proporzionate al devie è possibile sostiuire l’immagine direttamente da css seguendo le media que-ry appropriate

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

SVGScalable Vector Graphics abbreviato in SVG, indica una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente. wikipedia

<svg width=”36” height=”27” viewBox=”0 0 36 27”> <path id=”ico1.svg” class=”cls-1” d=”M482,1954.53v11.12a6.249,6.249,0,0,0,6.127,6.35h23.746a6.249,6.249,0,0,0,6.127-6.35v-11.12H482Zm4.6,4.76h6.127v1.59H486.6v-1.59Zm12.255,4.77H4-86.6v-1.59H498.85v1.59ZM511.873,1945H488.127a6.249,6.249,0,0,0-6.127,6.35h36A6.249,6.249,0,0,0,511.873,1945Z” transform=”translate(-482 -1945)”/></svg>

Viewportmisure relative allo schermo

le unità di misura

vh vw vmin vmaxViewport Height:altezza

dello schermo

Viewport Width:

larghezza dello schermo

ViewportMinima:lato dello

schermo più piccolo

ViewportMassima:lato dello

schermo più grande

le unità di misura

1vh 1vw

1% dello schermo

1vmin=

1vmax

vh.box_rosso{ width: 80%; height: 10vh;}

.box_viola{ width: 80%; height: 100vh;}

vw.box_rosso{ width: 80vw; height: 10vh;}

.box_viola{ width: 80vw; height: 100vh;}

vw (2).box_rosso{ width: 80vw; height: 10vw;}

.box_viola{ width: 80vw; height: 50vw;}

vmin.box_viola{ width: 80%; height: 10vmin;}

10% del lato dello schermo più piccolo

Nella gestione di grandezze è possibile bloccare il ridimensionamento quando lo schermo definisce il lato piccolo.

vmax.box_rosso{ width: 80%; height: 10vmax;}

10% del lato dello schermo più grande

Nella gestione di grandezze è possibile bloccare il ridimensionamento quando lo schermo definisce il lato grosso.In questo caso stringo la pagina lateralmente è il box sarà invariato

misure viewportUtili per:

occupare tutta la pagina in verticale

rendere il testo resposive

creare dei box quadrati responsive (prima era necessario crearli solo in pixel)

disegnare impaginati complessi, precisi e fluidi

Esercizio

Scopri i nostri servizi con docente

Che belloWeb Designlorem impus sahsoi sa-jnas lorem impus sah-soi sajnas lorem impus sahsoi sajnas

click

FlexBoxIl nuovo modo di scrivere codice

le basi

container

display:flex;

items

proprietà da dare solo al container

flex-direction

flex-direction: column;stiamo lavorando in orizzontale

flex-direction: row;stiamo lavorando in verticale

Tutte le altre proprietà lavoreranno di conseguenza. esempio:

justify-content: flex-end; porterà a fine box genitore o verticalmente o orizzontalmente i box figli.

flex-wrap

flex-wrap: no wrap;adatta gli elementi dentro il con-tenitore, indipendentemente dal

loro numero e grandezza.

flex-flow: xxxx; è un’istruzione che riassume flex-wrap e direction

flex-wrap: wrap;dispone gli elementi con la loro grandezza effettiva e se non ci stanno su una riga automatica-

mente cadono

justify-content

justify-content: flex-start;

justify-content: center

justify-content: space-around

justify-content: flex-end;

justify-content: space-between

justify-content: space-evenly

align-items

align-items: flex-start;

align-items: center;

align-items: baseline;

aa bb cc dd

align-items: flex-end;

align-items: stretch;

align-content

align-content: flex-start;

align-content: center;

align-content: space-between

align-content: flex-end;

align-content: stretch;

align-content: space-around

Riassunto 1flex-direction

flex-wrap

justify-content

align-items

align-content

definisce se gli elementi devono lavorare in orizzontale o in verticale

definisce se gli elementi devono adattarsi al box genitore oppure alla gran-dezza del box figlio

definisce come gli elementi dovranno giustificarsi (adattarsi, splamarsi)all’interno del box genitore

definisce come gli elementi dovranno allinearsi verticalmente o orizzontal-mente dentro il box genitore

definisce come il blocco degli elementi dovrà (quindi non i singoli) si deve allineare al box genitore

proprietà da dare solo ai singoli items

flex-Grow

flex-grow: 1;la proprierà ridimensionerà

l’elemento su cui è applicata ren-dendolo più grande degli altri(in questo caso al primo box)

flex-grow: 2;più il valore è alto più il box sarà

grande rispetto agli altri

di default è impostato a:flex-grow: 0;

flex-Grow

flex-shrink: 1;la proprierà ridimensionerà

l’elemento su cui è applicata ren-dendolo più piccolo degli altri(in questo caso al primo box)

flex-shrink: 2;più il valore è alto più il box sarà

piccolo rispetto agli altri

di default è impostato a:flex-shrink: 0;

flex-basis

flex-basis: 250px;definisce la grandezza

(in questo caso al primo box)

flex-basis: 250px;flex-grow: 2;

se impostato anche grow ese il box supera la misura (250px)

allora si ingrandisce

processo opposto con shrink

250px 250px

align-self

align-self: flex-start;

align-self: center;

align-self: flex-end;

lavora sul singolo elemento,può sovrascrivere la proprietà

align-items

order

order: 0;

order: 1;

order: -1;

1

1

22

3

13

2

34

4

4

è possibile spostare un elemento prima o dopo i suoi fratelli

di default il parametro è: 0

Riassunto 2flex-grow

flex-shrink

flex-basis

align-self

order

definisce la dimensione dei singoli items rendendoli più grossi, valori da 0 in su

definisce la dimensione dei singoli items rendendoli più piccoli, valori da 0 in su

definisce la dimensione dei singoli items con misure precise, possibile usare qualsiasi unità di misura (px, %, em...)

definisce come gli i singoli elementi dovranno allinearsi verticalmente o oriz-zontalmente dentro il box genitore, annullando l’istruzione align-items

definisce l’ordine degli elementi, utile quando si applicano media query.

documentazionehttps://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://flexbox.malven.co

esercizio

titoloparagrafosottotitolo

titolobottone

jQuery

come utilizzare javascript senza troppi problemi




Introduzione

jQuery è una libreria di funzioni (un cosiddetto software framework) javas-cript, cross-browser per le applicazioni web, che si propone come obiettivo

quello di semplificare la programmazione lato client delle pagine HTML.

wikipedia

Grazie a jQuery è possibile scrivere poche righe di codice per richiamare tantissime funzioni javascript.

documentazione

http://jquery.com

http://jqueryui.com

http://www.jqueryrain.com

alcuni esempi sono stati presi da questi libri

per iniziare.... manuale completoper i designer..

perchè jQuery?-manipolazione di HTML/DOM e CSS

– metodi per eventi HTML

– effetti e animazioni

– supporto a programmazione AJAX

-è diffuso, testato e manutenuto

– open source

– compatto (meno di 100kb, se compresso)

– può essere esteso con una serie di plugin di vario genere

perchè jQuery?

codice scritto con javascript

Differenze

codice scritto con jQuery

screen presi da wikipedia

jQuery - primi passi

1- scaricare da http://jquery.com l’ultimo file aggiornato jquery

2- fare una cartellina nuova chiamandola js

3- inserire nell’head un link che richiama il file scaricato<script type=”text/javascript” src=”js/jquery-1.7.1.min.js”>

</script>

4- iniziare a scrivere codice javascript nel proprio file HTML

HTML e jQueryÈ possibile implementare codice jQuery in diversi parti:

-All’interno di head nella pagina HTML

-All’interno di body a fine pagina HTML prima della chiusuradel tag </body>

-Creando un file nuovo *.js e richiamarlo nella head, ES:

<head><script src=”js/jquery.js” type=”text/javascript”></script><script src=”js/script_mio.js” type=”text/javascript”></script></head>

jQuery strutturaParte iniziale, richiama la funzione jQuery

Istruzione legata al selettore “a”.L’istruzione si chiama: click.Se click “a” allora crea una funzione nuova.

chiudi la secondafunzione chiudi la prima

funzione

La funzione nuova è un alert.L’alert comunicherà:ciao!

NB. se questo pezzo di codice viene inserito dentro head o dentro body deve essere all’interno del tag <script></script>.

Selettore. In questo caso sta puntando ad un tag HTML “a”

$(document).ready(function() {$(“a”).click(function(event) { alert(“ciao!”); event.preventDefault(); }); });

selettoriPer poter collegare gli script a degli elementi presenti nella pagina HTML si necessita di un selettore e/o un filtro. Questo permette di far agire jQuery a un determinato box, tag etc.. etc..La sintassi di un selettore è determinata dalla struttura HTML e dai sui tag, classi o id; saranno proprio questi che ci serviranno per collegare i nostri script.

Selettori classici$(‘p’)$(‘.classe’)

$(‘#id’)

Selettori discendenti$(‘ul li a’)$(‘.classe1 .colore’)$(‘#id #id_piccolo’)

Selettori multipli$(‘p, h1, a’)$(‘.classe1, .classe2, .classe3’)$(‘#id, #id2’)

Selettori gerarchici$(‘p > a’)$(‘.classe1 + .classe2’)$(‘#id ~ #id2’)

FiltriI filtri permettono un ulteriore “ricerca e filtraggio” di qualsiasi elemen-to dentro un documento HTML, tuttavia sono più lenti rispetto ai selet-tori primari.

alcuni filtri:$(‘:button’)$(‘:checkbox’)$(‘:input’)

$(‘:animated’)$(‘:checked’)$(‘:focus’)

$(‘:first-child’)$(‘:last-child’)$(‘:odd’)

Uso$(‘:button’)$(‘*:button’)$(‘#id’).filter(‘:button‘)$(‘form input:button‘)

Primi script 1

impostare una semplice pagina html con un paragrafo

<body><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></body>

lo script che scriveremo servirà a contare le parole del paragrafo

$(document).ready(function() { var count=$(“p”).text().split(‘’).length;alert(“numero parole:”+ count); });

addClass 2

Creiamo una classe nei css “colore” e la associamo al paragrafo..colore{background-color: fuchsia;}

<p class=”colore”>Lorem ipsum dolor sit amet, consectetur adipisic-ing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><a href=”#”>clicca</a>

seguendo la stessa logica dell’esempio precedente associamo la nostra classe al click

$(document).ready(function() { $(“a”).click(function(event) { $(“p”).addClass(“colore”); event.preventDefault(); }); }); });

removeClass 3

Creiamo una classe nei css “sottolineato” e la associamo al paragrafo..sottolineato{text-decoration: underline;}

<p class=”colore sottolineato”>Lorem ipsum dolor sit amet, consecte-tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<a href=”#”>clicca</a>

Al contrario di addClass questa proprietà si occupa di cancellare una classe già esistente. In questo caso “sottolineato” associata precen-dentemente.

$(document).ready(function() { $(“a”).click(function(event) { $(“p”) .removeClass(“sottolineato”) event.preventDefault(); });});

toggleClass 4

per far si che quando c’è si cancella e quando non c’è si attiva....

$(document).ready(function() { $(‘a’).click(function(event) { $(‘p’).toggleClass(“colore”) event.preventDefault(); }); });

animazioni jQuery 1

jQuery offre diversi una serie di animazioni predefinite che possono essere manipolate per creare animazioni complesse.NB. attenzione toggle è diversa dalla funzione toggleClass

$(document).ready(function() { $(‘a’).click(function(event) { $(‘p’).toggle(‘slow’); event.preventDefault(); });});

animazioni jQuery 2

Le principali funzioni di animazioni si suddividono in 3 macro gruppi:

Mostrare o Nascondere: .hide() .show() .toogle()

Scorrimento: .slideDown() .slideUp() .slideToggle()

Dissolvenza: .fadeIn() .fadeOut() .fadeTo() .fadeToggle()

animazioni jQuery 3

Ognuni funzione può ammettere dei valori per settare l’animazione.

sintassi per tutte le funzioni.hide(duration [, callback]).hide([duration] [, easing] [, callback])

sintassi solo per queste funzioni.toggle(showOrHide)

.fadeTo(duration, opacity [, easing] [,callback])

Duration: durata dell’animazione (fast, slow, millisecondi)Callback: serve per concatenare le animazioni seguendo il DOM.Easing: curva dell’animazione https://jqueryui.com/easing/showOrHide: non considera lo stato attuale di visualizzazione dell’elemento, se è visibile si può nascondere e viceversa.Opacity: valore di opacità (da 0 a 1)

animazioni jQuery 4

È possibile implementare animazioni diverse da quelle offerte dalle funzionalità di base precedentemente descritte. Per fare ciò si utilizza la funzione .animate() integrandola con parametri CSS.NB non tutte le proprietà CSS sono animabili.

.animate(properties [, duration] [,easing] [,complete])

Complete: termine dell’animazione

$(document).ready(function(){ $(‘#animate1’).click(function(){ $(‘#content’).animate( {‘border-width’: 5, height: 10}); }); $(‘#animate2’).click(function(){ $(‘#content’).animate( {width: 10}, ‘slow’); });});

Esercizi 1Creare una barra che informa gli utenti che il sito utilizza i cookies.1° step: usare HTML e CSS per la costruzione e lo stile;2° step: usare jQuery per implementare la funzione che permette il box di scomparire.

Esercizi 2Creare un sistema di filtraggio che permetta l’eliminazione di alcuni colori una volta cliccato il nome.NB attenzione ai nomi degli id dei blocchi e dei bottoni

plugin jQuery

pratiche e veloci da usare




documentazionehttp://jquery.com

http://jqueryui.com

http://www.jqueryrain.com

http://flexslider.woothemes.com

http://lokeshdhakar.com/projects/lightbox2/

http://jquery.malsup.com/cycle2/

http://isotope.metafizzy.co

http://mediaelementjs.com

effetti divertentihttp://pixelcog.github.io/parallax.js/

http://matthew.wagerfield.com/parallax/

http://iscrolljs.com

http://www.pixxelfactory.net/jInvertScroll/

http://tympanus.net/codrops/

http://responsivemobilemenu.com/en/http://slicknav.com

SVGhttp://snapsvg.io

https://maxwellito.github.io/vivus/

https://github.com/ConnorAtherton/walkway

http://stackoverflow.com/questions/27600421/apply-similar-fill-

effect-with-2-svg-icons

http://tympanus.net/Development/SVGDrawingAnimation/

http://tympanus.net/Development/AnimatedSVGIcons/

http://tympanus.net/Development/AnimatedCheckboxes/

https://css-tricks.com/guide-w-animations-smil/

jQuery UIjQuery UI semplifica la vita, i passi per copiare il codice sono diversi, in

queste slide verrà mostrato un medoto veloce e sicuro.1° step: andare su http://jqueryui.com

2° step: scegliere l’effetto o il widgets (in questo esempio Accordion)3° step: cliccare su view source

jQuery UI4° step: copiare il codice e fare attenzione in HEAD, bisogna inserire HTTP://

nei link.5° step creare i css per custimizzare l’accordion.

EsercizioCercate e integrate un qualsiasi plugin in una pagina HTML.

menu a tendina, menu responsive, accordion...

gallery, slider...

Documents

WEB DESIGN II - gabrieleruscelli.com · HTML5 e CSS3 di Gabriele Gigliotti ... Editore Gabriele Gigliotti, Gianluca Troiani 9. Build you own website the right way by Ian Lloyd - third