Ok bene, abbiamo visto che dobbiamo assolutamente metterci li' e prima di partire, capire quali sono i colori che vogliamo usare, Qual è la tipografia che vogliamo usare.

Adesso dobbiamo capire abbiamo capito anche in quale tavola, su quale tavola disegnare.

Adesso dobbiamo capire però che quello che andiamo a progettare è qualcosa che non è statico, è qualcosa che è dinamico ma dinamica, non nel senso che si muove, ma dobbiamo ipotizzare che molte volte i nostri contenuti non sono dei contenuti.

Come dire fissi ammette una parola e rimarrà quella per sempre e soprattutto non rimarrà sempre visibile alla stessa dimensione, alla stessa risoluzione.

Quindi dobbiamo iniziare a progettare responsive Che cosa vuol dire? Vuol dire progettare in modo che se qualcosa si allunga, se qualcosa si accorcia, se aggiungiamo un elemento all'interno della mia, del mio design, questo scala modular mente o si adatta in maniera responsive va al mio bailout.

Questo è diciamo, ci viene molto facile sufi, ma grazie a una funzione bellissima che si chiama auto bailout quest'auto lo yacht che cosa fa? Fondamentalmente ci aiuta a lavorare su due grandi, anzi su tre grandi aspetti del mettere insieme gli oggetti all'interno di una pagina o all'interno di piccoli blocchi.

La prima cosa che fa è creare quella che in gergo proprio di sviluppo si chiamano degli stack.

Decidere come se io metto insieme tre elementi ci opponiamo adesso abbiamo questi tre elementi grafici una scritta, un piccolo testo e un pulsante e voglio che siano messi insieme da una regola che li tiene insieme sempre verticalmente e sempre con lo stesso spazio fisso tra di loro.

Questo si chiama stack e può essere fatto in automatico creando un'auto layout come noi selezioniamo i tre oggetti che vogliamo siano regolati da questa appunto regola di auto layout e in questo caso non appare subito sulla destra, ma possiamo farci aiutare dal tasto destro del nostro del nostro tool e vedete che qui c' è in basso a metà del menu con la colpa action con Scusate con la shark evidenziata shift ha la voce ad auto layout guardate che succede in questo momento.

Intanto lui mi ha chiamato questo gruppo fra me perché tutto in film tutto è un contenitore, ok, io lo chiamo adesso per convenzione stacca così me lo ricordo.

Intanto guardate qui.

Graficamente è rappresentato non più come un come una sezione, ma come due elementi.

Due rettangoli verticali, uno sotto l'altro sta ad indicare che io ho fatto senza volerlo in automatico lui l'ha visto uno stack verticale.

Guardate qui a destra.

Sta ad indicare che questi elementi sono tenuti insieme da questa regola di allineamento verticale di vertical da action potrei anche voler e magari disporre questi oggetti invece sull'asse orizzontale.

Immaginate che abbiamo tre voci di menu in alto.

Noi lo vogliamo per verticale.

Le vorremmo per orizzontale.

Allora metteremo questa auto bailout a diciamo sequenza orizzontale, ma noi in questo caso interessa.

Ha sequenza verticale.

Altra cosa che fa l'auto layout.

Scusate, mi sono omesso questo punto.

Lui mi sta decidendo quant'è la distanza tra un oggetto e l'altro.

In questo caso trentatré è andato in default.

Abbiamo detto che se vogliamo essere precisi, lavoriamo per multipli di otto.

Possiamo magari mettere quaranta e vedete che è costante la distanza tra questo elemento.

Questo elemento é questo elemento è sempre quaranta ok, e viene data da questa specifica di auto layout.

Altra cosa che possiamo fare è stabilire creare quello che in gergo viene chiamato padding.

Quello che c' è naturalmente in tutti gli elementi di sviluppo quindi nel css, negli stack di sviluppo iOS Android tutto il contenuto a un po' di aria intorno al contenitore e questo si chiama Paddington il bello spazio intorno agli elementi che si trovano dentro questo contenitore.

Come vedete adesso è tutto attaccato, ma io potrei lasciarvi un po' di aria é per esempio di sono anche qua quaranta che è sempre un multiplo di otto se mi piace e ho creato questo contenitore con questa spaziatura fissa.

Posso anche andare a cliccare qui e decidere che questa spazzatura può variare in maniera non uniforme tra sopra, sotto sinistra e destra.

In questo caso mi va bene così.

Per esempio nei casi dei pulsanti si utilizzano magari delle dei dati difformi, magari si utilizzano sopra e sotto un po' più piccoli come si è dato e sinistra e destra un po' più ampio, poi magari lo vediamo.

La cosa interessante è che questo fra me e ora può essere colorato se vogliamo.

Adesso gli metto un colore che si vede senza creare però un rettangolo di sottofondo, cioè il contenitore che adesso ha un un colore in questo caso non mi interessa.

Io però adesso prendo questo stack e lo porto all'interno del mio bailout.

Potevo farlo anche anche prima.

Non l'ho fatto perché volevo farvelo vedere fuori dalla tavola, ma potevo farlo in un secondo anche qui.

Ora, qual è il potenziale di questo autore di auto? Come vi dicevo di rendere tutto flessibile, fluido.

Vorrà dire che se a un certo punto qualcuno il mio copia arriva e dice no, basta, cambiamo la tipografia.

Non è basta ex, al tuo cash flow ci pensiamo noi.

Ma è basta ex al punto e io tolgo questo testo.

Guardate come tutto il test, tutto il blocco scala in maniera uniforme o se a un certo punto mi rendessi conto che il testo di approfondimento di sottotitolo non mi serve lo vado a cancellare.

Guardate come gli altri elementi si' riassetto ano per creare comunque quella regola fissa di allineamento tra di loro.

E questo è quello che noi chiamiamo progettazione fluida.

Responsi vuol dire che non solo si adatta alle dimensioni della risoluzione, ma anche si adatta ed è cosa importantissimo alle dimensioni del contenuto, senza che noi dobbiamo stare lì ogni minuto a Rhys postare gli elementi perché abbiamo già deciso qual è la regola che li tiene insieme e questa cosa può accadere anche allargando stringendo questo fame adesso, se lo allargo, lo stringo.

Non sta succedendo niente.

Questo perché le regole di auto layout prevedono anche che noi dobbiamo gestire come gli oggetti interni vogliamo che si comportino rispetto al contenitore.

Quindi se voglio, per esempio, che questa scritta questa scritta é questo pulsante, no.

Ma le due scritte principali si adattino alla grandezza del mio contenitore.

Mi basterebbe selezionarle e qui vedete che c' è una sezione che sia Mary.

Sai Singh è un po' simile a quella della del costruire che abbiamo visto prima.

Ma questa specifica si palese si manifesta solo se abbiamo attivato un'auto layout solo se i miei soggetti sono all'interno di notare gli out.

Vedete qui c'e' scritto Fixed we'd sta ad indicare che qualsiasi cosa accada al suo contenitore, questa scritta rimane fissa.

Grande così.

Ma non è quello che voglio.

Magari in certi casi sì, in questo contesto no.

Basta dirgli invece che io voglio che riempia il container questa scritta, huh, Content poi lo vedremo.

Vuol dire adattati.

Adatta il contenitore al contenuto, ma questo è molto utile.

Magari per i pulsanti.

Un po' meno per questi blocchi in questo contesto, noi diciamo che il container ora vedrete che non cambia nulla adesso.

Ma se vado ad allargare il box, vedete che succede? Che il testo mi viene dietro, Ok? E questa identica cosa vale anche per questo Sotto.

Posso dirgli Phil Container? Glielo sto dicendo ovviamente sull'asse orizzontale.

Cosa succede? Che quando vado ad allargare stringere vedete? Beh, il prodotto diventa veramente responsivo.

Non lo sto dicendo alla call to action perché voglio invece che questa si rimanga della dimensione fissa a della dimensione, anzi che occupa il suo contenuto.

E qui vediamo che è molto utile.

La seconda voce che abbiamo visto in questo menù è più competence.

Abbraccia il contenuto.

Vuol dire che questa città questa quanto è lunga? Quanto è lungo il suo contenuto dentro? Se qui scrivo demo, vedete che il pulsante è ritorna più piccolo.

Adesso non li allunghiamo.

Ecco qua.

Guardate.

Questo è l'auto layout.

La cosa buona è che i contenuti, appunto, sono responsabilizzati.

Se vado a anche qui, magari aggiungere più testo, aggiungiamo, aggiungiamo piu' testo Tutto il testo scorre naturalmente questo vedremo.

Poi sarà molto utile anche per far mettere le mani direttamente a chi si occupa di copie, magari nella progettazione della nostra landing page.

E se noi utilizziamo questo concetto di auto layout con il concetto di construct che abbiamo visto prima, tutta la pagina diventa fluida e responsive.

Guardate questo blocco qui vedete che icons Trent sono sinistra in alto.

Chiaramente se adesso vado a stringere la pagina a questo blocco non succede nulla.

Ma se questo blocco a cui abbiamo già dato l'auto degli out delle regole distacco verticale, tutta una serie di regole dentro a questo blocco, noi diciamo che è vincolato a destra e a sinistra rispetto all'interno degli out.

Guardate che succede se vado ad allargarlo.

Il testo scorre.

Se vado a stringerlo, il testo va a capo ed è esattamente come si comporterebbe se io stessi progettando un sito responsivo.

Questo mi aiuta molto.

Intanto perché io riesco così facilmente a declinare tutti, diciamo le varie schermate, le varie grandezze no, ovviamente quando devo andare a creare abbiamo detto va' vari vari that's point.

Io devo disegnare la schermata la devo proprio fisicamente disegnare tre quattro volte a seconda del mio sport, come stiamo vedendo qui.

Ma se noi impostiamo tutto con queste regole vedete che riadattare o creare insomma, delle variazioni di pagina diventa molto più rapido e accessibile proprio perché il tool è pensato per farmi già predisporre in quella modalità.

Li abbiamo visto appunto l'auto layout.

Adesso all'interno di un blog il testo ma potremmo fare una cosa ancora piu' semplice vedere questo auto layout per creare un pulsante dobbiamo dimenticarci che i pulsanti si creano mettendo un rettangolo di fondo è una scritta sopra.

Questo assolutamente non deve accadere perché abbiamo gli strumenti per farlo in maniera molto migliore come li facciamo su film sempre sfruttando questo auto layout.

Il concetto è che noi partiamo dal contenuto e non dal contenitore.

Quindi se devo creare un pulsante io scrivo un testo con scritto pulsante e a questo punto facciamo per avere una dimensione che è veramente reale, che potrebbe essere sedici pixel.

A questo punto io gli vado a dire guarda intorno a questa unica scritta a questo contenitore crea mi scusate a questo contenuto creami un contenitore che possa avere delle regole, soprattutto di padding quello che abbiamo visto prima come lo crea questa troia out o la shark shift che abbiamo visto prima o tasto destro ad auto degli out e questo funziona benissimo anche per un solo è oggetto.

Che cosa mi ha creato questo contenitore al quale io posso dare un colore.

Quindi mettiamo qui, per esempio un colore che ci interessa.

Se facciamo così posso dargli una serie di spaziature diverse.

Per esempio, potrei dirti una buona regola e magari triplicare o raddoppiare il valore che c' è qui in questo caso.

Poiché vediamo un po' l'inter linea non è perfetta.

Posso aumentare un pochino sopra e dargli Facciamo dodici.

Ecco, vedete, in questo caso posso anche arrotondare il mio Fra mandando qui in alto ho creato un pulsante.

La cosa interessante è che con questo ad auto layout, se domani diventa scrivimi tutto il mio oggetto diventa come disse, abbraccia il contenuto.

Vale a dire che se scrivo di più o di meno il pulsante si aggiusta automaticamente.

Questa è una prima, una delle regole del design che devono imparare.

I pulsanti non sono sempre della stessa larghezza, ma è bene che abbiano il pudding fisso, ma che poi possono, come dire, allargarsi e restringersi a secco del contenuto.

Il contenuto la fa da padrona perché quello è flessibile.

Non possiamo ipotizzare di fare pulsanti sempre larghi cento pixel perché se la la ball che va dentro la scritta che va dentro piu' ampia ogni volta dobbiamo metterci a ridisegnare i pulsanti, quindi non pulsante che dimensioni fisse ma disegnate con questo auto layout che prende in considerazione il concetto che il contenuto si estende mentre fissa.

Ci rimangono i padding laterali e diciamo verticali per creare questa costante diciamo di di spazio intorno all' oggetto.

Ora qui non abbiamo visto questo particolare, ma lo vediamo adesso mettendoci un oggetto dentro.

Se all'interno di questo oggetto che ho creato io vado a posteriori mettere mettiamo esempio un'icona c'è un pulsante con un'icona vado a mettercela dentro.

Guardate che cosa succede in automatico e lui mi dice a Ma tu hai creato un'auto lei auto con uno stack orizzontale perché cela la frecciatina in automatico lui tende a mettermi questo oggetto già allineato in linea orizzontale con una spaziatura di dieci.

La cosa interessante è che questi oggetti sono ovviamente intercambiabili.

Basta spostarli e mantiene questo assetto di auto degli Houthi.

La stessa cosa varrebbe anche per questo autore di auto che abbiamo creato qui.

Se a un certo punto non so perché vado.

Se volessimo mettere la cultura action più in alto possiamo o spostarla con il mouse, oppure possiamo andare con le frecce a spostare i nostri oggetti all'interno dell'auto lei out.

Questo vuol dire progettare responsive progettare, ovviamente per un contenuto flessibile e modulare.

Mi raccomando, progettate sempre in questo modo perché sarete sempre pronti ad accogliere tutte le, come dire quelle che in gergo si chiamano workspace, i casi peggiori all'interno del vostro degli out.

Che il testo sia più lungo, più corto o che la risoluzione sia più grande o più piccola, voi avete progettato già per accogliere tutte queste diversità.