Come funziona un sito web?

Per spiegare da cosa è composta una pagina web utilizzamo una metafora culinaria.

‍

Immaginiamo di dover preparare un piatto di pasta con il pomodoro.

Per comporre il nostro piatto è importante avere la ricetta, con i relativi strumenti e ingredienti, prima di mettersi ai fornelli.

‍

Maggiore sarà la nostra conoscenza del procedimento e degli ingredienti che lo compongono, maggiore sarà la manualità e destrezza con la quale ci muoveremo in mezzo ai fuochi.

‍

Proseguendo il nostro piatto, la ricetta sarà:

1. Una pentola per bollire l’acqua
2. La pasta
3. E il pomodoro per condirla

‍

‍

Quando sviluppiamo un sito web, il concetto è lo stesso. Abbiamo bisogno di una ricetta con ingredienti e strumenti.

‍

La ricetta per il sito web sarà:

1. Piattaforma di sviluppo (Webflow)
2. Elementi da inserire nel nostro sito web (titoli, paragrafo, immagini, etc)
3. Abbellire gli elementi inseriti nel nostro sito web

‍

CODICE

Come accennato nella lezione precedente, originariamente i siti web erano scritti attraverso il codice.

Con l’avvento dei CMS le cose sono cambiate, e di molto, perché sono le piattaforme che scrivono il codice per noi.

‍

Negli ultimi anni infatti si è iniziato a parlare sempre più spesso di movimenti no-code. La stessa Webflow ha dedicato un interessante articolo a riguardo. L’abbiamo riportato in questo articolo.

‍

Il funzionamento di base dei siti web, però, non è cambiato. Tutti i siti web che vediamo in giro per il web girano sempre attraverso un codice. É cambiato solo chi scrive il codice, o meglio, è cambiato chi traduce il codice per noi.

‍

In questo caso Webflow.

‍

Questo è un primo pezzo del puzzle che è bene capire se vogliamo sviluppare siti web degni di nota.

‍

HTML & CSS

Appurato che il codice lo scriva una macchina al posto dell’umano, facciamo un esempio un pò più concreto.

‍

Se per esempio, volessimo inserire un quadrato, all’interno del codice dovremmo scrivere queste istruzioni:

1. Inserisci quadrato
2. Posizionalo a destra
3. Coloralo di colore verde

‍

All’interno di queste 3 semplici regole troviamo 2 codici differenti. Ovvero:

1. HTML con la quale inseriamo il quadrato
2. CSS con la quale spostiamo il quadrato (a destra)
3. CSS con la quale coloriamo il quadrato (di verde)

‍

Abbiamo voluto semplificare il concetto il più possibile. Ma il funzionamento di base è proprio questo: con il codice HTML abbiamo inserito un elemento (il quadrato) e con il codice CSS possiamo modificare lo stile e altre caratteristiche molto importanti come font, posizione.

‍

Riassumendo:

Con il codice HTML gestiamo i contenuti che inseriamo all'interno della pagina (Elementi come testo, paragrafi, form, etc)

Con il CSS gestiamo l’aspetto visivo (Design che modifica gli elementi. Es. testo giallo)

‍

Per completezza citiamo, senza addentrarci, anche Javascript. Altro linguaggio che si unisce a HTML e CSS, utilizzato per la gestione dell’aspetto dinamico del sito web. Per esempio Javascript può essere utilizzato per muovere contenuti nella pagina, verificare i dati inseriti in un form, etc.

‍

Se ancora non sei sazio di esempi, di sotto ne riportiamo un altro.

ESEMPIO: AUTO, HTML & CSS

Immaginiamoci di dover costruire un auto.

Avremo bisogno di tutte le componenti come ruote, telaio, freni, parti elettroniche, motore, etc.

‍

Una volta costruito il cuore dell’auto, ovvero la parte interna, composta da tutti i componenti, l’auto avrà bisogno di una carrozzeria che andrà a definire l’estetica dell’auto, le cuciture dei sedili etc.

‍

In questo breve esempio sono spiegati, nuovamente,  HTML e CSS.

‍

‍

I pezzi dell’auto come ruote, telaio, etc vengono inseriti tramite il codice HTML mentre la vernice della carrozzeria, gli specchietti cromati vengono inseriti attraverso il codice CSS.

‍

Ancora una volta: i siti web funzionano allo stesso modo. Abbiamo delle componenti come testi, titoli, immagini, form, etc. Tutte queste componenti è possibile modificarle esteticamente, ad esempio colorando un titolo in verde e inserendo un grandezza del font più grande.

‍

Perché è importante capire questa differenza?

‍

Una volta entrato in piattaforma inizierai ad utilizzare sia HTML che CSS senza che tu te ne accorga. Sarà Webflow che scriverà il codice HTML e CSS per te. 

‍

Dovrai solo selezionare gli elementi che vuoi inserire nel tuo sito web e applicare lo stile, attraverso l’interfaccia (chiamata Designer che approfondiremo nella lezione 5) che la piattaforma mette a disposizione.

‍

CONCLUSIONI

‍

É importante capire, a grandi linee, la logica che sta dietro alla costruzione di una pagina web così da avere una visione completa delle componenti che fanno muovere il motore.

‍

Diciamo a grandi linee perchè una volta che inizieremo ad utilizzare lo strumento Designer di Webflow faremo tutto ciò senza accorgercene. É proprio questo, se vogliamo il bello del mondo no-code. Inseriremo componenti di HTML alle nostre pagine web e le abbelliremo attraverso l’utilizzo di codice CSS.

‍

Potremmo anche bypassare questa parte, ma avere una conoscenza più approfondita dell’intero funzionamento ci permetterà di capire meglio l’intero sistema che permette la costruzione dei siti web.

‍

PENSARE COME I SITI WEB

Nella lezione successiva spieghiamo come pensa un sito web. Questo servirà a capire come vengono ordinati (e quindi come spostare) gli elementi all’interno di una pagina web.

Per andare alla lezione successiva clicca nel bottone in basso.