Lezione gratuita dal corso Web Development
Andiamo adesso a mettere in pratica tutto quello che abbiamo imparato per realizzare un vero e proprio progetto web.
Quindi andremo a creare una pagina.
Sarà la pagina di un portfolio di un portfolio di un fotografo dove avremo delle informazioni.
Avremmo delle immagini che mostreremo e sarà un design a single page.
Quindi una singola pagina scroll abile verticalmente.
La prima cosa che possiamo fare è andare a vedere il design è stato fornito un design da da chi, appunto, si è occupato di studiare la grafica e l'aspetto visivo.
E andiamo adesso a vedere tramite tramite Fig.
Ma che sarebbe lo strumento che utilizzano i designer per però Toti pare per disegnare quello che il contenuto di una pagina web.
Ce ne sono molti altri strumenti, ma Phil ma è uno di quelli più comuni.
Esiste anche Sketch a Dobbs di Andiamo a vedere adesso all'interno di film.
Ma il design che è stato realizzato Apro l'applicazione, eh? Clicco su la landing page.
Andiamo a vederlo insieme al disco.
Un po' l'immagine.
Ok, qui abbiamo una prima overview di tutto quello che è ebrea, la superficie del design.
Io andrei a zoomare diretto alla design, quello completo.
Poi vedremo le altre singole parti.
Intanto comincerei ad analizzare un po' il dettaglio questa sarà la pagina che andremo a realizzare, costituita da dei blocchi orizzontali che si succedono tra loro verticalmente e ogni blocco ha un suo scopo.
È un suo contenuto ben preciso.
Andremo a realizzare ogni singolo blocco man mano che procediamo è un primo esercizio che possiamo provare a fare è quello di cominciare a ragionare su sui componenti del design.
Quindi andare a scomporre, aspettare quelli che saranno poi i micro componenti che andremo andremo a realizzare in maniera isolata per poi assemblarli assieme e comporre l'intera pagina.
Io ho gia' esportato a ce l'ho.
Qui sul mio testo ho gia' esportato un un semplice jpeg della della pagina dov'é.
Adesso andremo a vedere, magari andiamo a fare un pò questo esercizio di di individuazione di splitting un po' dei componenti dicevamo la prima cosa che salta sono le sezioni che si alternano verticalmente.
Abbiamo sicuramente Lehder.
Abbiamo poi un grande blocco principale che è quello che in gergo viene chiamato tiro, che è quello che accoglie i visitatori che atterrano sulla pagina e contiene, diciamo, le informazioni principali, quelle che devono risaltare poi c'è un altro piccolo blocco di navigazione con i link diretti ai singoli lavori del portfolio.
A seguire si succedono i vari hit del portfolio, quindi abbiamo ai singoli elementi con il loro titolo, il loro tag, le loro info e ovviamente le fotografie a corredo.
Perché si tratta di un portfolio di un fotografo.
Abbiamo diversi elementi, poi sono diversi tra di loro.
Gli svilupperemo sia strutturalmente che visivamente e poi c' è un ultimo blocco.
A seguire c'è la bout me.
Quindi blocco contatti con un po' di info, una forma e per chiudere l'ultima l'ultima section l'ultima sezione finale che è quella del footer con un piccolo disclaimer quindi questo sarà il layout nella sua interezza, facendo però questo esercizio di scomposizione è una cosa che mi piace fare perché è importante, ma già dal design è già dal dall'inizio.
Quando un designer si approccia un progetto, cercare di razionalizzare quella che è la struttura di un appunto, di un progetto per cercare delle regole comuni per cercare di assemblare quelli che sono i blocchi base che poi useremo in ottica di' di realizzazione dell' intero design.
In questo modo abbiamo una certa consistenza anche nel design che è anche l'obiettivo principale, no? Cercare di dare una una consistenza, una coerenza a quella che è la nostra.
Quindi gli user interface è che l'utente poi riconoscerà, per cui proviamo a fare un po' il problema ad evidenziare un po' qualche elemento io prendo qua lo strumento di evidenziazione.
Potrei cominciare a dire che abbiamo sicuramente un componente che all'interno della section del the ledger abbiamo il luogo, abbiamo poi il componente di navigazione con i suoi hit okay, ora mi sto divertendo a evidenziarlo un po' ma dopo li vedremo poi più in dettaglio all'interno della section hiro a sua volta individuiamo dei sotto componenti? No, provo a cambiare colore.
Prendo faccio dei blocchi, magari adesso gialli.
Ah, ok, beh, dicevamo, ci sono dei sotto componenti all'interno della del liro, come per esempio il titolo abbiamo un sottotitolo e anche il il link rapido che ci rimanda al al discover many worlds.
Ok, vado veloce, ne vediamo altri.
Abbiamo per esempio nella nel blocco della navigazione dei lavori degli degli ai team della sezione lavori abbiamo un pulsante.
Ok, quindi abbiamo un elemento che si ripete, che è rappresentato appunto da questo pulsante che utilizzeremo più volte nella tua vedremo dopo, anche nella forma riusciamo a identificare se all'interno del the light em all'interno dell'elemento dell'elemento lavoro, quindi l'elemento di portfolio individuiamo per esempio i tag che caratterizzano quel lavoro.
A sua volta ci sarà anche un titolo assegnato a quella a quell' elemento.
Abbiamo anche una sezione con le informazioni principali.
È tra l'altro, una sezione che si struttura in questo modo.
Abbiamo due colonne con l'hubble e il contenuto é che si ripetono quindi infinite volte.
Quindi c' è anche la possibilità di replicare all'interno dello stesso hit e poi andando avanti.
Insomma, abbiamo la carrellata di fotografie di immagini.
Vado veloce, vado, vado direttamente al blocco Abbot mi dove anche qui riusciamo a identificare in questa section una parte di contenuto, anche qui rappresentata da un titolo e un un paragrafo.
E poi per chiudere abbiamo anche la forma in cui al suo interno però riusciremo a identificare anche i singoli elementi della forma.
Quindi anche anche il campo.
Adesso magari cambio colore, così lo distinguiamo meglio.
Prendo ma facciamo un verde, ok, dicevamo.
Il singolo campo che rappresenta la forma a sua volta un componente, un micro componente che realizzeremo a parte, che poi useremo più volte per realizzare gli interi campi, gli altri campi della della forma.
Quindi, in definitiva, abbiamo visto che all'interno di un layout.
Quello che dobbiamo riuscire a identificare sono degli elementi ricorrenti.
L'idea è quella di partire con lo sviluppo di gli elementi base del design, in modo da poter poi riutilizzarli più volte nello sviluppo delle varie sections action.
Avrà le sue peculiarità, ma le andremo li' a sviluppare man mano che procediamo, quindi direi iniziamo.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.