In pochi minuti realizzeremo qualcosa e lo metteremo online.

Partiamo quindi con l'interfaccia grafica.

Questo è il canva del nostro sito, che se non facciamo nulla sarà come i siti degli anni boh 90, quelli che sul telefono si vedeva tutto rimpicciolito in modo fisso.

Come prima cosa dobbiamo dirgli che vogliamo un comportamento irresponsible.

Questa cosa la facciamo facendo doppio click nel centro della pagina e andando su questo pannello con cui prenderete poi familiarità nella sezione layout.

Ora vedete che il container layout è fixed, cioè dove metto le cose stanno e se rimpicciolisco, lo schermo o lo ingrandisco, stanno in quella posizione.

Io invece voglio in questo caso un layout di tipo colonna, cioè in cui tutti gli elementi che io vado a mettere dentro il sito vanno a finire uno sotto all'altro.

Vi faccio adesso un esempio, in cui trascino degli elementi sulla mia pagina, ci metto dentro ad esempio, un elemento di testo e un bottone.

Vedete che sono andati a finire uno sotto all'altro.

Ora li voglio mettere centrati, quindi vi faccio vedere, ad esempio come si fa a cambiare l'allineamento di questi elementi.

Li seleziono tutti e due cliccando prima su uno e poi tenendo per moto il tasto maiuscolo anche sull'altro.

Mi posiziono sempre su layout e in questo caso gli vado a dire che voglio un horizontal alignment centrato.

Okay, Quindi avete visto che abbiamo già messo due elementi, e li abbiamo posizionati come vogliamo e abbiamo già dato un comportamento responsive alla nostra pagina.

Nel momento in cui voglio testare, come si comporta effettivamente la mia pagina al variare della dimensione dello schermo, posso schiacciare qua in alto a sinistra su Responsip.

Questo mi permette di vedere come si comporta il mio sito al variare della dimensione dello schermo.

In questo caso non ci sono grosse evoluzioni se non il fatto che il testo per un'impostazione probabilmente predefinita, si rimpicciolisce un pochettino nel momento in cui vado a mettere uno schermo molto piccolo.

Questa impostazione ora ci sembra di non grande utilità, ma appena inizieremo ad avere un po' di elementi sulla pagina ci sarà veramente utile per testare tutto ciò che facciamo.

Per tornare a realizzare cose dobbiamo ritornare dalla funzionalità responsive alla funzionalità UI builder.

Già che ci troviamo in questo quadrante ne approfitto per mostrarti che tutto ciò che mettiamo sulla pagina, quindi ad esempio questo testo, che si è automaticamente chiamato text A, che questo bottone che si autom.

automaticamente chiamato button A vengono riportati anche in questo ordine gerarchico qua nel margine a sinistra, dove ci può essere più semplice magari a volte selezionare gli elementi e ci è possibile anche cliccando su questo occhietto, eventualmente nasconderli o mostrarli per simulare comportamenti del sito.

Aggiungiamo adesso un'immagine, quindi vedete che ogni volta che io voglio aggiungere qualcosa mi reco in questo pannello qua a sinistra e lo trascino sulla mia pagina.

Okay, ci sono elementi um di tantissimi tipi, ed è possibile aggiungere elementi più specializzati andandoli ad installare dalla sezione plug-in che vedremo successivamente.

Ora metto anche questa immagine centrata, vado a modificare quello che sta scritto nei miei vari testi, ad esempio in questo testo scrivo, um nuovo spazio.

Di coworking.

In Isola? Milà.

Qua sotto vado a caricare un'immagine, che prendo in questo caso da Pixels.

Coprendo un'immagine a caso.

Ovviamente poi quando farò il mio sito sceglierò l'immagine con cura.

In questo caso vedo che l'immagine si deforma in modo particolarmente brutto.

Per andare a correggere questo mi reco sulla sezione layout.

In questo caso cosa vedo che è successo? Vedo che ho un vincolo sulla larghezza, quindi fixed w e 70320.

Dopodiché non ho invece il vincolo sul mantenere le proporzioni dell'elemento, e um ho l'altezza libera.

Quindi succede che questo elemento immagine si comporta in modo totalmente casuale.

Cosa posso fare? Posso fare ad esempio che gli dico mantieni fisso, le proporzioni del dell'elemento.

In questo modo lui prende il vincolo della larghezza di 320 pixel e poi mi proporziona l'altezza sulla base dell'immagine che gli ho messo dentro.

Su questo bottone edit me, cosa posso scriverci? Lasciaci la tua mail, bruttissimo, però intanto iniziamo a predisporre la pagina.

Ci manca il posto proprio dove fargliela mettere questa mail.

Prendiamo quindi un elemento, chiudo questo così vedi meglio, di tipo input.

Quindi vado a scegliere qua un elemento di tipo input e lo metto qua.

Anche in questo caso dovrò centrarlo.

E qua posso mettergli un placeholder, quindi in questo caso, dato che non stiamo più parlando del posizionamento, o del comportamento della pagina, nella pagina dell'elemento non ci interessa la parte layout ma ci interessa la parte appearance che ci dice come appare il nostro elemento.

In questo caso il placeholder è il testo in grigino chiaro che viene scritto um prima che um l'elemento sia riempito.

In questo caso ci scrivo, inserisci la tua mail qua.

Dopodiché qua ci chiede che tipo di contenuto ci aspettiamo che ci sia qua dentro, in questo caso contenuto di tipo testo va benissimo.

A seconda del contenuto che gli dichiariamo lui poi ci permetterà di eseguire diversi tipi di azione.

Ad esempio se gli diciamo che qua dentro ci sarà un contenuto di tipo numero, poi nei nostri flussi ci permetterà di utilizzare questo input per fare ad esempio delle operazioni matematiche.

In questo caso va benissimo un campo di tipo testo.

L'animazione delle funzionalità di questa pagina le vedremo, nella lezione dedicata ai workflows, quindi in questo momento ci limitiamo a fare un sito che, Abbia una grafica.

Ti faccio vedere ora, che questo sito è già online, questo è una cosa molto bella e molto rapida.

Quindi se tu schiacci qua su preview, ti condivido la nuova scheda che stai caricando, vedi che il tuo sito è già online.

Posso fare ispeziona per vedere come rende sul mobile um in un ambiente, reale, ricarico la pagina.

E questo è come rende su Mobile.

Quindi molto brutto, ma quanto ci abbiamo messo, quattro minuti.

In pochi minuti di più riesce a fare qualcosa di veramente carino.