Ora entriamo in una parte molto importante del sito internet, ovvero la costruzione dell'arte tipografica che ci aiuta chiaramente per andare a definire quelli che sono i titoli, i paragrafi, i link, i test, i test block è il block watt.

Infine il mix tra i principali anche qua che utilizzeremo quasi sempre saranno questi tre, forse questi quattro normale inserire prima le ding ding, come avevo detto già in precedenza ne abbiamo già definiti eh? Uno, due, tre, quattro, cinque, sei e se vedete sono gli stessi che noi abbiamo creato all'interno di questo file uguali.

Come vedete h una accadere accadrà quattro, cinque sei sono quelli che voi vi ritroverete a dover stilizzate all'interno di questo fai il film, ma una volta stilizzati decisi quelli che sono i parametri.

Quindi mettiamo caso che io qua voglio avere un unito font.

Anzi, mettiamo un inter, ok? Un fonte a sessantaquattro pixel e voglio che su mobile questo sia inter a trentasei pixel e voglio che il primo abbia meno un pixel di haters passing.

Quindi questa proprietà l'auto e quindi la proprietà della linea viene automaticamente ereditata da il font.

Invece qua voglio che questo sia a meno zero punto cinque pixel scusate uno zero punto cinque pixel non percentuale.

La differenza del fatto è perché ho messo zero punto cinque rispetto a uno è perché essendo il fan piu' piccolo, se io andassi a mettere un pixel sarebbe molto tutto quanto molto più vicino, cosa che è diversa dalla tipografia che è più grande.

Questo perché a livello visivo vediamo sempre gli elementi piu' grandi con piu' spaziature rispetto a quelli più piccoli.

Quindi tornando indietro il nostro programma quindi su io voglio tornare ad avere queste due senza queste due tipologie di heading heading uno da una parte l'ex top e d'altra parte per il mobile portrait, quindi cosa vado a fare? Andiamo a trasformare i nostri elementi dentro prendo le lending uno lo stilizzato quindi gli do una classe io quello che preferisco solitamente scrivere le classi in minuscolo col trattino, quindi kebab di utilizzo questo trattino da una parte all'altra credo creo ledeen zero uno.

In questo caso lo chiamo in questa maniera, ma potrei chiamarlo anche h una utilizzare qualsiasi tipo di naming convention che io voglio è importante dare un nome che in qualche modo rappresenti l' oggetto.

In questo caso vado a selezionare già il font.

In questo caso non ho il l'inter, quindi apro il nostro.

Il nostro sito é questo sono un pannello che vedremo dopo nel dettaglio, ma qui all'interno vado a selezionare tutte le tipologie di fondo che mi servono, quindi in questo caso vuole selezionare l'inter.

Eccolo trovato qua.

Poi mi fa scegliere che tipo di varianti voglio avere voglio avere regular, seicento, ottocento, eccetera eccetera.

Inizio aggiungere questi regola seicento ottocento dovrebbero corrispondere a circa regular medium bold ok, li carico all'interno e ritorno all'interno del mio.

Quindi scappo su designer e mi ritrovo dove ero prima.

Qui all'interno comparirà all'interno di questa di questa selezione il font che appena selezionato normalmente voi avete selezionato solamente una serie di google font che Wolf ti mette a disposizione e inoltre, andando semplicemente in over, possiamo vedere come il font cambia in tempo reale.

In questo modo possiamo anche vederlo come visivamente sia effettivamente funziona oppure no, ma il consiglio già iniziale è quello di progettare sempre per prima dentro Fig.

Ma una volta fatto dentro fig.

Ma come ho appena fatto io passato direttamente acqua.

In questo caso prendo inter, seleziono il seme bold ok, in questo caso ho anche l'ex tra questo sarebbe extra bold.

Poi abbiamo i settecento vedete che qua sono tutte le tipografie andate a definire quindi non partono dal finn extra light light normal medium semi bold bold extra bold black in questo caso il sistema mi ama solamente inserito questi tre perché sono quelli che ho selezionato.

Dovesse di nuovo tornare indietro potrei andare all'interno di tutta la tipografia come in questo caso di andare su fox direttamente da qua qua all'interno di alfons io quello che faccio è rise lezionario l'inter anni vado qui all'interno e invece di aggiungere solamente in regular aggiungo anche tutte le altre famiglie all'interno no ha aggiunto seicento volevo aggiungero' cinquecento settecento font come vedete anche questi fondi sono stati aggiunti all'interno quindi andando qui io posso vedere come facendo un refresh posso vedere come l'elemento sia aggiornato, quindi vedro' che c' è extra bold bold qui all'interno tornando indietro elimino questi e ne crea di nuovo direzione inter selezioni in questo caso tutte le varianti definite aggiunge tutti i font e tutti sono stati pubblicati all'interno e adesso tornando indietro andrò a fare un contro le r per riuscire a rivedere tutti quanti, quindi sito viene ricaricato e qui all'interno.

Tutti i pesi sono stati caricati dal primo all'ultimo film, straight light, normal, medium, semi bold, eccetera eccetera.

Quindi in questo caso, riprendendo quello che abbiamo visto qui, inizio a inserire bold sessantaquattro pixel con un writers passing che possiamo trovare in molti options qua meno pixel e vedete che si crea questo elemento che è simile a quello che ho presentato qui dall'altra parte.

È chiaro che qui lo vediamo molto più grande rispetto a quello che è nel contesto reale ed è normalissimo perché sono due modi di visualizzare le informazioni.

Diversamente è qui all'interno Fig, ma ti rende liza un testo al vivo, quindi è praticamente un per qua.

Invece ti visualizza quello che è realmente i pixel come dovrebbero vedersi, quindi ti faccio vedere poi come sarà all'interno vedete che il mobile e tutto è sempre uguale, identico non cambia questo perché una volta che tu costruisci un elemento su backstop automaticamente, tutti gli altri media qui lo ereditano.

Se tu non lo vai a cambiare, anche gli altri media inquiry avranno lo stesso se io qua inserisco le ding.

Io vorrei che il mio fosse diverso perché avevo messo come trentasei pixel qua dentro pixel voglio inserire qui, quindi molto più piccolino, vedete come cela stacco tra i trentasei pixel okay? E questi sessantaquattro pixel tacche è molto più grande, quindi io volendo questo posso aumentarlo anche centoventi pixel dall'altra parte anche centoventi pixel così sessantaquattro pixel.

In questo caso ripassando dall'altra parte rimango trentasei pixel perché chiaramente non ha suonato a definirlo.

Posso anche andare a cambiare effettivamente la famiglia, quindi fare un semi bold e qua avere un boldi invece in index top posso anche definire gli altri stili di testo, quindi sì, voglio che il tablet sia leggermente piu' grande del mobile ma più piccolo del dexter.

Posso comunque fare uguale per la moneta del land scape, quindi in questo caso vede tutte le differenti tipografia che ho creato, che sono sempre l'account e lo stile è sempre rimasto questo, ma è differente in tutti i diversi casi mobile portrait, bob dylan, skip tablet e infine il backstop.

Se noi volessimo inoltre aggiungere un'altra tipologia di black point, possiamo farlo e cosa vuol dire? Black point è semplicemente il web che ci permette di avere una visualizzazione più definita, quindi più ad hoc per una tipologia di risoluzione.

Quindi solitamente questo è il fine di mille e due ottanta.

Se io voglio che diventi piu' grande, quindi voglio poter progettare su un contenitore a vasta scala.

Posso aggiungere questi una volta che però avete aggiunti questi, non riuscite poi a toglierli.

Quindi ci sono dei blog che vedremo alla fine con cui andare contro queste cose, ma in generale create lo solo quando pensate veramente che vi serva e non prima.

Anche qui la regola è quella del disegnare prima su fig, ma decidere prima cosa si vuol fare e poi passare qua all'interno di più.

Infine possiamo avere alle tipologie come il paragrafo come qua lo farò in inter questo centrato magari solamente al cinquanta per cento cinquanta per cento e qui iniziano a fare il primo il primo degli out, ovvero vado a inserire una section all'interno, anzi posso andare a inserire anche un block così vediamo effettivamente come sta il d block all'interno e dentro ci metto le ling, il paragrafo il dibba lo blocchiamo text gruppo quindi vuol dire che raggruppa il testo, gli dico di avere di essere influx, quindi come l'auto layout simile orizzontale no verticale, quindi uno sotto l'altro gli dico tutti quanti di stare in mezzo.

Vedete che quando dico di stare in mezzo al centro, a destra, tutto il contenitore si va a muovere insieme a me.

Se io avessi questo al cento per cento come elemento e vado a selezionare destra sinistra, vedete che elemento in mezzo che al cento per cento non cambia mai, ma diventa sempre al secondo di dove io sto dando la direzione.

A destra, sinistra o in centro mettiamo la casistica dove io non ho definito la percentuale, quindi si prende automaticamente il contenitore e anche qua va talmente di pranzo mettiamola cinquanta per anzi qua togliamolo e io prendo il mio di block e all'interno del the block.

Mi chiedevo del padding interno.

Vedete che il padre si è creato e si è ottenuto lo stesso.

Fa lo stesso effetto visivo di quello che ho fatto prima.

Se io prendo il pubblico, questo e poi questo lo chiamo Tex Group.

Variante.

Ok, posso avere la stessa cosa che abbiamo visto prima? Quindi in questo caso vado a selezionare il group variante.

Ok? E qui Io vado a definire quello che vi dicevo prima.

Ovvero lavoro solamente sul padding interno e questo sotto invece lo cambio rispetto a prima.

Esatto.

Esatto.

E qui li do io direttamente una larghezza a questo contenitore.

Quindi voglio che il paragrafo sia grande.

Settecento venti pixel.

Vedete, questo risultato è molto simile se io qui volessi avere tutte le cose centrate in space incentrato Ok, devo prendere questo paragrafo e andare a selezionarlo all'interno del nostro contenitore per poter utilizzare due cose posso utilizzare Grid per avere questo stile.

Quindi in questo caso ho un paragrafo a sinistra e poi l'altra destra.

Posso togliere anche delle row, come ad esempio la seconda.

Può togliere anche delle colonne e avere un elemento uno sotto l'altro.

In questo caso, una volta che io ho questo, do direttamente una spaziatura interna.

Ok, ok di avere tutto il testo centrato all'interno di quella griglia.

Se io poi edito la griglia, dite che posso andare a vederla bene, All'interno come andrà a lavorare? Volendo posso aggiungere anche un'area.

Posso espanderla, Posso cambiarlo.

Effettivamente rispetto a prima, posso creare un'altra altra row e vedete che man mano che io le credo, anche se non esiste un contenuto, il contenitore spinge quello sotto un po' come se fossero appunto di Lego che si spostano uno sotto l'altro.

In questo caso prendo seleziono uno di questi eleva ad inserire man mano che voi inserite continuamente il sistema inserisce degli altri robot.

Quindi se io continuo a scrivere mela ci meraviglia.

Continuerò a vedere questi elementi che si continuano a creare e così via.

Stiamo qua e possiamo avere una visualizzazione di come replicare un layout si può benissimo fare con differenti soluzioni di qualsiasi tipo.

Nella prossima lezione vedremo un attimo quali sono i vantaggi di utilizzare ad esempio un flex in molti casi rispetto a utilizzare il grid? Quello che io consiglio sempre utilizzare Flex perché è molto più accessibile, è molto più simile a quella che è la definizione dell'auto bailout e quindi diciamo che se noi siamo bravi a lavorare bene qui all'interno dell'auto degli out, quindi nel nostro prototipo che abbiamo creato.

Quindi, come vedete anche questo elemento che vi faccio vedere prima in auto degli out in mano che lo sposto, tutto si sposta con me uguale anche ad esempio questi lo ci permette di capire quanto già il contenitore dovrà avere a livello di spaziatura.

Voi vedete a sessantacinque cento ottantacinque di padding interno alla sua sinistra il visual pro che il fondo utilizzato grande settecentocinquanta pixel e poi sotto questo big title e la spaziatura tra questi due elementi di quarantotto pixel.

Quindi una cosa che ho inoltre utilizzo sempre molto spesso è proprio i multipli di quattro di otto all'interno dell'interfaccia perché così si permette di dire voglio delle voglio salire di sedici pixel otto pixel quattro pixel ma alla fine in questo modo tutti quanti possono essere allineati su cosa progettare, come disegnare e anche tu stesso quando stai progettando per questo tipo di di output possiamo utilizzare direttamente la regola del lotto pixel o dei quattro pixel di maggiora mento da una parte all'altra altro tipo che vi do qui all'interno di mme il menu del nord mount quindi preferences mount io posso inserire ad esempio otto pixel in questo caso quando io vado a ingrandire vedete che ho questo contenuto magari a sedici pixel okay a livello di larghezza e voglio che sia il doppio il doppio voglio che sia di otto pixel, quindi sale ventiquattro di quattro trentadue, quaranta quarantotto, quarantasei e così via.

In questo modo sono sempre sicuro che anche con gli incrementi che faccio io le faccio di otto in otto.

In questo modo posso sempre avere una regola che io mi do al livello di spaziature che devo avere all'interno del sito.