Sviluppo web moderno: fon­da­men­ti e strumenti

Gli svi­lup­pa­to­ri e le svi­lup­pa­tri­ci web possono uti­liz­za­re vari strumenti per integrare contenuti dinamici nel progetto web de­si­de­ra­to e per­so­na­liz­zar­lo in base alle esigenze degli utenti. Ciò richiede un web hosting pro­fes­sio­na­le che fornisca le risorse ne­ces­sa­rie per con­sen­ti­re uno sviluppo web moderno.

Requisiti tecnici di un sito web

La base di un sito è un server adatto. L’offerta di un provider di web hosting affermato include di regola pacchetti completi che insieme allo spazio ne­ces­sa­rio com­pren­do­no altri servizi come RAM, un proprio dominio, banche dati e gli strumenti necessari per lo sviluppo web. Ov­via­men­te puoi sod­di­sfa­re questi requisiti tecnici anche au­to­no­ma­men­te.

Dominio

È possibile ri­chia­ma­re ogni progetto nel World Wide Web uti­liz­zan­do un nome univoco. Questi co­sid­det­ti domini rientrano tra gli elementi base di un sito web. Essi seguono in maniera precisa la struttura ge­rar­chi­ca del Domain Name System e sono formati da un dominio di primo livello (per esempio .it), definito dallo spazio dei nomi, un nome del dominio scelto li­be­ra­men­te (dominio di secondo livello) e sot­to­do­mi­ni fa­col­ta­ti­vi. La re­gi­stra­zio­ne dei domini avviene tramite un provider, che inoltra la richiesta agli organi com­pe­ten­ti per la gestione. Nella scelta del dominio ci sono for­mu­la­zio­ni brevi e concise e domini di primo livello comuni.

Spazio web

Ogni pagina web è co­sti­tui­ta da dati che vengono messi a di­spo­si­zio­ne per l’apertura delle pagine su internet. I pacchetti di hosting com­pren­do­no pertanto sempre un certo spazio di ar­chi­via­zio­ne per documenti HTML, fogli di stile, immagini, video, banche dati e tutti gli altri file di un sito. Il ca­ri­ca­men­to dei dati avviene di regola tramite il File Transfer Protocol (FTP) o il pro­to­col­lo crit­to­gra­fa­to SFTP (SSH File Transfer Protocol) e un programma FTP ap­pro­pria­to come FileZilla o WinSCP. Per la sca­la­bi­li­tà del progetto web è im­por­tan­te che lo spazio web si possa ampliare in ogni momento in caso di necessità.

Database

I siti web moderni uti­liz­za­no spesso database per fornire contenuti in modo dinamico e gestire i dati degli utenti. Invece di pagine HTML statiche me­mo­riz­za­te sul server, i progetti sup­por­ta­ti da database generano le singole pagine web in modo dinamico ogni volta che vengono ri­chia­ma­te. A seconda dell’ap­pli­ca­zio­ne, gli svi­lup­pa­to­ri e le svi­lup­pa­tri­ci web si affidano a database re­la­zio­na­li (SQL) o NoSQL.

I database re­la­zio­na­li come MySQL, MariaDB o Post­gre­SQL me­mo­riz­za­no le in­for­ma­zio­ni in forma tabellare e le collegano l’una all’altra uti­liz­zan­do chiavi univoche (ID). Ciò è par­ti­co­lar­men­te adatto per le ap­pli­ca­zio­ni che ri­chie­do­no relazioni ben definite tra i dati, come gli account degli utenti, gli ordini o i cataloghi di articoli. I database NoSQL come MongoDB, Firebase o Redis offrono una per­so­na­liz­za­zio­ne dinamica dello schema, che li rende par­ti­co­lar­men­te in­te­res­san­ti per le web app scalabili o che ri­chie­do­no pre­sta­zio­ni e per le ap­pli­ca­zio­ni in tempo reale.

Server web

A seconda del modello di hosting, il server può essere condiviso (hosting condiviso) o dedicato (hardware, VPS o cloud personali). I grandi progetti web uti­liz­za­no spesso tec­no­lo­gie ag­giun­ti­ve come i load balancer e le Content Delivery Network (CDN) per mi­glio­ra­re le pre­sta­zio­ni. Le ap­pli­ca­zio­ni moderne si affidano anche a tec­no­lo­gie di container come Docker e Ku­ber­ne­tes per fornire ap­pli­ca­zio­ni server fles­si­bi­li e scalabili.

Il termine “server web” si riferisce a sua volta al com­po­nen­te software centrale che fornisce siti e ap­pli­ca­zio­ni web. I server web elaborano le richieste dei browser tramite il pro­to­col­lo HTTP(S) e inviano il contenuto cor­ri­spon­den­te. Le soluzioni più note sono Apache, NGINX e LiteSpeed.

Gli strumenti più im­por­tan­ti per la pro­gram­ma­zio­ne web moderna

Dopo aver rea­liz­za­to la base del progetto web, hai diverse pos­si­bi­li­tà per creare una pagina web. La gamma spazia da software di siti web intuitivi con opzioni di design limitate a sistemi di gestione dei contenuti (CMS) fles­si­bi­li fino al codice sorgente scritto au­to­no­ma­men­te. Mentre i siti già pronti si basano sul principio WYSIWYG (“What You See Is What You Get”) e si rivolgono prin­ci­pal­men­te a chi è agli inizi, l’utilizzo di un CMS richiede una certa co­no­scen­za di base. Nel pro­gram­ma­re i loro siti da zero (spesso ser­ven­do­si di un framework) gli svi­lup­pa­to­ri e le svi­lup­pa­tri­ci web si as­si­cu­ra­no la massima libertà. Tuttavia, questo pre­sup­po­ne co­no­scen­ze di linguaggi di pro­gram­ma­zio­ne di base come HTML, CSS, Ja­va­Script e PHP, mentre soluzioni pratiche come framework di codice pronti all’uso o strumenti per pro­gram­ma­re con l’IA fa­ci­li­ta­no no­te­vol­men­te il lavoro.

HTML

HTML (Hypertext Markup Language) nello sviluppo web serve per l’or­ga­niz­za­zio­ne semantica di contenuti digitali at­tra­ver­so i co­sid­det­ti tag. In questo modo è possibile definire sezioni di testo, titoli, grafici o col­le­ga­men­ti iper­te­stua­li. Un codice sorgente simile è alla base di ogni pagina web. Un semplice sito web statico non è altro che una selezione di documenti HTML collegati tra di loro. Lo standard attuale HTML5 amplia il lin­guag­gio di markup a tag per elementi audio e video.

CSS

La vi­sua­liz­za­zio­ne dei contenuti, al contrario, viene definita in CSS (Cascading Style Sheets), che definisce il lin­guag­gio di for­mat­ta­zio­ne standard per documenti HTML. Gli svi­lup­pa­to­ri e le svi­lup­pa­tri­ci web uti­liz­za­no i CSS per assegnare agli elementi definiti nel codice HTML delle regole per la vi­sua­liz­za­zio­ne sul browser. Insieme alle in­di­ca­zio­ni per il layout, la co­lo­ra­zio­ne e la ti­po­gra­fia, lo standard attuale CSS3 comprende anche ani­ma­zio­ni, va­ria­zio­ni di colori e om­breg­gia­tu­re.

Ja­va­Script/Ty­pe­Script

Le vi­si­ta­tri­ci e i vi­si­ta­to­ri in­te­ra­gi­sco­no con i siti moderni grazie a campi in­te­rat­ti­vi, menu a tendina o slideshow. Se i contenuti dinamici di questo tipo vengono integrati in una pagina HTML, allora entra in gioco Ja­va­Script o l’esten­sio­ne Ty­pe­Script. I linguaggi di scripting ampliano la struttura di base a partire da HTML e CSS, valutando le in­te­ra­zio­ni degli utenti, caricando, ag­gior­nan­do o mo­di­fi­can­do i contenuti.

PHP

Mentre le pagine statiche sono a di­spo­si­zio­ne del server web, le pagine web dinamiche vengono generate da un browser soltanto su richiesta, il che è reso possibile dai linguaggi di scripting come PHP. La pro­gram­ma­zio­ne PHP viene in­ter­pre­ta­ta lato server. Invece di con­se­gna­re il codice sorgente di­ret­ta­men­te a siti web dinamici, il server web comunica il file a un in­ter­pre­te PHP il quale genera il sito richiesto (spesso sulla base di in­for­ma­zio­ni inserite nelle banche dati) e lo re­sti­tui­sce al server, che invia infine i dati al browser. Altri linguaggi di scripting per lo sviluppo di siti dinamici sono Perl e Python.

Framework

Lo sviluppo web moderno si affida sempre più ai framework, che ac­ce­le­ra­no i processi di sviluppo e offrono strutture col­lau­da­te. I framework front end come Angular o React fa­ci­li­ta­no la creazione di in­ter­fac­ce utente dinamiche e in­te­rat­ti­ve. Con­sen­to­no un’ar­chi­tet­tu­ra basata su com­po­nen­ti e mi­glio­ra­no le pre­sta­zio­ni grazie a DOM virtuali.

I framework back end come Flask o Django sup­por­ta­no lo sviluppo lato server fornendo anche funzioni di routing, con­nes­sio­ni al database, gestione delle API e sicurezza. La com­bi­na­zio­ne di framework front end e back end crea ap­pli­ca­zio­ni web scalabili con tempi di sviluppo ot­ti­miz­za­ti.

API

Le API (Ap­pli­ca­tion Pro­gram­ming In­ter­fa­ces) sono in­ter­fac­ce at­tra­ver­so le quali i progetti web possono co­mu­ni­ca­re con altre ap­pli­ca­zio­ni. In questo modo, un sito web può, ad esempio, re­cu­pe­ra­re dati da un server o col­le­gar­si a servizi di terze parti, come fornitori di pagamenti o servizi di mappe. Esistono diversi tipi di API, tra cui REST e GraphQL, che for­ni­sco­no dati in un formato specifico. Molte ap­pli­ca­zio­ni web moderne uti­liz­za­no le API per contenuti dinamici o per l’im­ple­men­ta­zio­ne di funzioni ag­giun­ti­ve.

Design web re­spon­si­ve e ot­ti­miz­za­zio­ne delle pre­sta­zio­ni

I siti web moderni devono adattarsi in modo fles­si­bi­le alle diverse di­men­sio­ni dello schermo. il design re­spon­si­ve ga­ran­ti­sce una vi­sua­liz­za­zio­ne ottimale dei contenuti su smart­pho­ne, tablet e desktop. Ciò si ottiene grazie a layout fles­si­bi­li, media queries (CSS) e approcci di pro­get­ta­zio­ne mobile first. A seconda del progetto, tuttavia, può essere opportuno valutare se sia più adatto il classico design re­spon­si­ve, un sito per i di­spo­si­ti­vi mobili o un’app.

Oltre alla pre­sen­ta­zio­ne, anche il tempo di ca­ri­ca­men­to è fon­da­men­ta­le. L’ot­ti­miz­za­zio­ne delle pre­sta­zio­ni è una delle di­sci­pli­ne più im­por­tan­ti dello sviluppo web moderno. Comprende tecniche quali:

• Com­pres­sio­ne delle immagini
• Caching
• Com­pres­sio­ne del codice CSS
• Mi­ni­miz­za­zio­ne di Ja­va­Script/Ty­pe­Script
• Lazy loading

Misure di sicurezza e test

La sicurezza è un aspetto centrale di un progetto web di successo che dovrebbe essere preso in con­si­de­ra­zio­ne nell’ambito dello sviluppo web. I siti web do­vreb­be­ro essere protetti da crit­to­gra­fia SSL/TLS, password sicure e mec­ca­ni­smi di pro­te­zio­ne contro attacchi come XSS o SQL injection. Sono inoltre es­sen­zia­li ag­gior­na­men­ti e backup regolari.

Anche i test sono una parte im­por­tan­te del controllo qualità, so­prat­tut­to quando si pro­gram­ma­no progetti web più complessi. Per lo sviluppo web sono di­spo­ni­bi­li diversi strumenti di test. Se si vogliono testare solo i com­po­nen­ti del progetto web pro­gram­ma­to, si possono usare i test dei moduli. Esistono vari framework di test, come PHPUnit per PHP o JSUnit per Ja­va­Script.