Introduzione ad alcune delle più usate tecnologie per lo sviluppo di contenuti nel Web.

Sviluppo Web

Pubblicato il: 27-8-2025

Ultima Modifica: 1-9-2025

Menù

🖥️ Frontend e Backend: due facce dello stesso sito
🌐 Creare una pagina web con HTML e CSS
⚡ Introduzione a JavaScript: dare vita alle pagine web
🗄️ Database per il web: SQL vs NoSQL
🔐 Sicurezza nel web: le minacce più comuni e come difendersi

🖥️ Frontend e Backend: due facce dello stesso sito

Quando navighiamo su Internet, vediamo pagine, immagini, pulsanti, video… ma dietro a tutto questo c’è molto di più. Un sito web non è solo quello che appare sullo schermo: c’è una parte visibile e una nascosta che lavora “dietro le quinte”. Queste due parti hanno un nome ben preciso: frontend e backend.

🔹 Cos’è il Frontend

Il frontend è la parte del sito che l’utente vede e con cui interagisce.
È l’interfaccia grafica: testi, colori, immagini, bottoni, menu.
In pratica è “la vetrina” del sito.

I principali linguaggi del frontend sono:

HTML – struttura della pagina (titoli, paragrafi, immagini, link).
CSS – stile grafico (colori, dimensioni, font, layout).
JavaScript – interattività (menu a tendina, effetti grafici, pulsanti che reagiscono al click).

👉 Esempio semplice di frontend:


							<!DOCTYPE
							html>
							
<html>
							
<head>
							
<title>Mio 
							primo sito</title>
							
<style>
							
body {
							font-family: 
							Arial; background-color:
							#f0f0f0;
							text-align: 
							center; } h1 
							{ color: blue; }
							</style>
							</head>
							
<body>
							
<h1>Ciao, 
							questo è il frontend!</h1>
							
<button
							onclick="alert('Hai 
			cliccato!">Cliccami</button>
							</body>
							
</html>

Questo piccolo codice mostra una pagina con un titolo blu e un pulsante che risponde al click.

🔹 Cos’è il Backend

Il backend è la parte nascosta del sito, quella che non si vede ma che fa funzionare tutto.
È responsabile di:

Gestire i dati (lettura e scrittura su database).
Controllare l’accesso degli utenti (login, registrazione).
Fornire contenuti aggiornati (notizie, prodotti, post, ecc.).

I linguaggi usati più spesso nel backend sono:

PHP (molto diffuso e usato anche nei CMS come WordPress).
Python (con framework come Django o Flask).
Node.js (JavaScript usato anche lato server).
ASP.NET (molto usato in ambienti Microsoft).

👉 Esempio semplice di backend in PHP:


							<?php
							$nome =
							"Paolo";
							
echo
							"Ciao
							$nome, 
							benvenuto nel backend!"; ?>

Questo codice non è visibile direttamente al browser, ma viene eseguito dal server che genera la pagina HTML finale per l’utente.

🔹 Come lavorano insieme

Un sito moderno funziona così:

L’utente interagisce col frontend (ad esempio, clicca “Accedi”).
Il backend riceve la richiesta, controlla i dati sul database (se l’utente è registrato, se la password è corretta).
Il backend manda una risposta al frontend, che la mostra all’utente (accesso riuscito o messaggio di errore).

In poche parole:

Frontend = ciò che vedi.
Backend = ciò che fa funzionare quello che vedi.

🔹 Schema riassuntivo

🔹 Conclusione

Capire la differenza tra frontend e backend è il primo passo per chi vuole imparare lo sviluppo web.
Il frontend si occupa di come appare il sito, il backend di come funziona.
Insieme creano l’esperienza completa che usiamo ogni giorno quando navighiamo online.

Torna sù

🌐 Creare una pagina web con HTML e CSS

Dopo aver visto la differenza tra frontend e backend, iniziamo con la pratica: realizziamo insieme una semplice pagina web.
Useremo due linguaggi fondamentali:

HTML (HyperText Markup Language) → la struttura della pagina.
CSS (Cascading Style Sheets) → lo stile grafico (colori, font, layout).

🔹 La struttura base di una pagina HTML

Ogni pagina web parte da una struttura base come questa:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>La mia prima pagina web</title>
</head>
<body>
<h1>Ciao, mondo!</h1>
<p>Questa è la mia prima pagina HTML.</p>
</body>
</html>

<h1> è un titolo grande.
<p> è un paragrafo di testo.
Tutto ciò che metti tra <body> ... </body> è quello che l’utente vedrà nel browser.

Se salvi questo codice in un file chiamato index.html e lo apri col browser, vedrai la tua prima pagina web. 🎉

🔹 Aggiungere un po’ di stile con CSS

Adesso rendiamola più carina aggiungendo i CSS.
Si possono inserire direttamente dentro il file HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>La mia prima pagina web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 50px;
}
h1 {
color: darkblue;
}
p {
color: #333;
font-size: 18px;
}
.bottone {
display: inline-block;
background-color: #007BFF;
color: white;
padding: 10px 20px;
margin-top: 20px;
text-decoration: none;
border-radius: 5px;
}
.bottone:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Ciao, mondo!</h1>
<p>Questa è la mia prima pagina HTML con un po’ di stile CSS.</p>
<a href="#" class="bottone">Cliccami</a>
</body>
</html>

Ho cambiato il colore di sfondo.
Ho reso il testo centrato e più leggibile.
Ho aggiunto un bottone in stile moderno con effetto al passaggio del mouse.

🔹 Separare HTML e CSS (opzionale)

Nella pratica professionale, l’HTML e il CSS stanno in file separati.
Esempio:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pagina con CSS esterno</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<h1>Ciao, mondo!</h1>
<p>Questa pagina usa un file CSS esterno.</p>
<a href="#" class="bottone">Cliccami</a>
</body>
</html>

stile.css

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding: 50px;
}
h1 {
color: darkblue;
}
p {
color: #333;
font-size: 18px;
}
.bottone {
display: inline-block;
background-color: #007BFF;
color: white;
padding: 10px 20px;
margin-top: 20px;
text-decoration: none;
border-radius: 5px;
}
.bottone:hover {
background-color: #0056b3;
}

In questo modo il codice HTML rimane pulito e il CSS gestisce tutta la parte grafica.

🔹 Conclusione

Con soli due file (HTML + CSS) puoi già costruire una pagina web dall’aspetto moderno.
Hai visto come creare:
✔️ Una struttura base in HTML
✔️ Un po’ di stile con i CSS
✔️ Un bottone interattivo

Questo è il primo passo per costruire un sito web completo.

Torna sù

⚡ Introduzione a JavaScript: dare vita alle pagine web

Abbiamo visto come creare una pagina con HTML e darle stile con CSS.
Ora è il momento di aggiungere un po’ di interattività con JavaScript (JS), il linguaggio che trasforma una pagina statica in una pagina dinamica.

🔹 Cos’è JavaScript?

JavaScript è un linguaggio di programmazione che gira direttamente nel browser.
Con JS possiamo:

Far comparire messaggi,
Cambiare il contenuto della pagina senza ricaricarla,
Aggiungere animazioni ed effetti,
Creare applicazioni web complete (come Gmail o Facebook).

🔹 Primo esempio: un messaggio al click

Aggiungiamo un pulsante che, quando cliccato, mostra un messaggio.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Primo esempio JavaScript</title>
</head>
<body>
<h1>Proviamo JavaScript</h1>
<button onclick="alert('Hai cliccato il pulsante!')">Cliccami</button>
</body>
</html>

👉 Quando l’utente clicca il bottone, compare una finestra di avviso.

🔹 Modificare lo stile con JS

Possiamo usare JavaScript per cambiare i colori o il contenuto della pagina.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cambia colore</title>
<style>
body { text-align: center; padding: 50px; }
#testo { font-size: 20px; color: black; }
</style>
</head>
<body>
<h1 id="titolo">Ciao!</h1>
<p id="testo">Questo è un paragrafo.</p>
<button onclick="document.getElementById('testo').style.color='red'">
Cambia colore
</button>
</body>
</html>

👉 Qui usiamo document.getElementById() per selezionare un elemento della pagina e cambiarne lo stile.

🔹 Usare uno script esterno

Come per i CSS, anche il JavaScript può essere messo in un file separato.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Script esterno</title>
<script src="script.js"></script>
</head>
<body>
<h1>Pagina con JavaScript esterno</h1>
<button onclick="mostraMessaggio()">Cliccami</button>
</body>
</html>

script.js

function mostraMessaggio() {
alert("Questo messaggio viene da un file esterno!");
}

👉 Separare il codice rende la pagina più ordinata e professionale.

🔹 Conclusione

JavaScript è il terzo pilastro dello sviluppo web insieme a HTML e CSS.
Con pochi comandi puoi:
✔️ Mostrare messaggi,
✔️ Modificare il contenuto della pagina,
✔️ Creare interazioni con l’utente.

È il primo passo verso applicazioni web più complesse.

Torna sù

🗄️ Database per il web: SQL vs NoSQL

Un sito web non è fatto solo di pagine statiche: spesso deve gestire dati.
Pensa a:

utenti registrati,
prodotti in un negozio online,
articoli di un blog,
messaggi di una chat.

Per memorizzare e recuperare queste informazioni, i siti usano i database.
Esistono due grandi famiglie: SQL e NoSQL.

🔹 Database SQL

SQL (Structured Query Language) è il linguaggio standard per lavorare con i database relazionali.
I dati vengono organizzati in tabelle (righe e colonne), simili a un foglio Excel.

Esempio tabella `utenti`:

id	nome	email	password
1	Paolo	paolo@mail.com	****
2	Maria	maria@mail.com	****

Esempio di query SQL:

-- Inserire un nuovo utente
INSERT INTO utenti (nome, email, password)
VALUES ('Luca', 'luca@mail.com', '1234');

-- Cercare un utente con nome Paolo
SELECT * FROM utenti WHERE nome = 'Paolo';

👉 Con SQL puoi facilmente filtrare, ordinare e collegare i dati tra più tabelle.

I database SQL più diffusi sono:

MySQL (molto usato nei siti web, anche con PHP e WordPress),
PostgreSQL (potente e avanzato),
SQLite (leggero, ottimo per piccole applicazioni).

🔹 Database NoSQL

I database NoSQL non usano tabelle rigide, ma salvano i dati in forma più flessibile (per esempio, documenti JSON).
Sono molto usati in applicazioni moderne e scalabili, come social network e app in tempo reale.

Esempio di documento JSON (utente):

{
"id": 1,
"nome": "Paolo",
"email": "paolo@mail.com",
"hobby": ["tennis", "informatica"]
}

👉 Qui non servono tabelle predefinite: ogni utente può avere campi diversi.

I database NoSQL più famosi sono:

MongoDB (archivia i dati come documenti JSON),
Cassandra (ottimo per grandi quantità di dati distribuiti),
Redis (velocissimo, usato per cache e dati temporanei).

🔹 Differenze principali

Caratteristica	SQL	NoSQL
Struttura dati	Tabelle (righe e colonne)	Documenti, chiave-valore, grafi
Flessibilità	Schema rigido	Schema flessibile
Esempi d’uso	Siti web tradizionali, e-commerce, gestionali	Social, big data, app in tempo reale
Esempi di DB	MySQL, PostgreSQL, SQLite	MongoDB, Cassandra, Redis

🔹 Quale scegliere?

Se hai un sito tradizionale (blog, e-commerce, gestionale) → SQL è la scelta più naturale.
Se hai un’app che deve gestire tanti dati diversi e in tempo reale (chat, social, IoT) → NoSQL può essere più adatto.

Molti progetti moderni usano entrambi, combinando SQL per i dati strutturati e NoSQL per la parte dinamica.

🔹 Conclusione

I database sono fondamentali per qualunque sito o applicazione.
✔️ SQL = ordine e struttura (tabella utenti, ordini, prodotti).
✔️ NoSQL = velocità e flessibilità (dati non sempre uguali).

Conoscerli entrambi ti permette di scegliere lo strumento giusto per ogni progetto.

Torna sù

🔐 Sicurezza nel web: le minacce più comuni e come difendersi

Quando creiamo un sito web, non dobbiamo pensare solo a come appare o funziona, ma anche a come proteggerlo.
Un sito non sicuro può subire attacchi che rubano dati sensibili, modificano le pagine o lo rendono inutilizzabile.

Vediamo insieme le 3 minacce più comuni e come difendersi.

🔹 1. SQL Injection

L’SQL Injection è uno degli attacchi più famosi.
Succede quando un utente malintenzionato inserisce comandi SQL dentro i campi di un sito (per esempio nel login) per accedere ai dati del database.

Esempio:

SELECT * FROM utenti WHERE nome = 'Paolo' AND password = '1234';

Un hacker potrebbe inserire al posto della password:

' OR '1'='1

e la query diventerebbe:

SELECT * FROM utenti WHERE nome = 'Paolo' AND password = '' OR '1'='1';

👉 Risultato: accesso a tutti gli utenti senza conoscere la password! 😱

Difesa:

Usare query parametrizzate (prepared statements).
Validare sempre l’input dell’utente.

🔹 2. XSS (Cross-Site Scripting)

L’XSS avviene quando un sito permette di inserire codice JavaScript dannoso che poi viene eseguito dagli altri utenti.

Esempio:

Se un forum non controlla i messaggi, un utente potrebbe scrivere:

Ogni volta che qualcuno legge quel messaggio, il codice viene eseguito nel browser.
In casi più gravi, può rubare cookie o dati personali.

Difesa:

Bloccare l’inserimento di script non autorizzati.
Usare funzioni che “sanitizzano” l’input (es. convertire < in <).
Usare Content Security Policy (CSP).

🔹 3. Gestione delle password

Molti siti commettono l’errore di salvare le password in chiaro nel database.
Se il database viene rubato, gli hacker leggono subito tutte le password.

Difesa:

Mai salvare le password in chiaro.
Usare algoritmi di hashing sicuri come bcrypt, scrypt o Argon2.
Aggiungere un salt (stringa casuale) per ogni password.

🔹 Altre buone pratiche

Usare HTTPS per criptare la comunicazione tra utente e server.
Aggiornare sempre CMS, plugin e framework.
Limitare i permessi agli utenti e al database.
Fare backup regolari.

🔹 Conclusione

La sicurezza non è un optional: un piccolo errore può aprire la porta ad attacchi seri.
✔️ Evita SQL Injection con query sicure.
✔️ Proteggi da XSS validando l’input.
✔️ Conserva le password in modo sicuro.

Ricorda: un sito sicuro è un sito affidabile.

8. Introduzione alla sicurezza nello sviluppo web

Quando si parla di siti e applicazioni web, la sicurezza è un aspetto fondamentale, perché ogni pagina online può essere esposta a tentativi di attacco. Un sito vulnerabile rischia di subire furti di dati, manipolazioni dei contenuti o persino di essere bloccato dai provider.

8.1 Le minacce più comuni

SQL Injection (SQLi)
Avviene quando un utente malintenzionato inserisce codice SQL all’interno di un form o URL non protetto.
Esempio:

SELECT * FROM utenti WHERE username = 'input' AND password = 'input';

Se non viene filtrato, l’input potrebbe diventare:
' OR '1'='1 → che permette di accedere senza credenziali.
Cross-Site Scripting (XSS)
Inserimento di codice JavaScript malevolo in campi di input o commenti, che viene poi eseguito dai browser di altri utenti.
Cross-Site Request Forgery (CSRF)
Consiste nell’indurre un utente autenticato a compiere azioni non volute (per esempio: cambiare password o inviare denaro).
Brute force e attacchi a dizionario
Tentativi ripetuti di indovinare username e password.

8.2 Buone pratiche di sicurezza

Validazione e sanificazione degli input
Mai fidarsi di ciò che inserisce l’utente. Usare funzioni di escape o prepared statements.
- In PHP: mysqli_prepare() o PDO con query parametrizzate.
- In ASP classico: usare Parameters negli oggetti Command.
Gestione sicura delle password
- Mai salvare password in chiaro.
- Usare hashing con algoritmi robusti (bcrypt, argon2).
- Aggiungere sempre un “salt” casuale.
Uso di HTTPS
Un certificato SSL/TLS è oggi indispensabile per proteggere la comunicazione tra server e client.
Limitare i privilegi del database
L’utente che l’applicazione utilizza per collegarsi al DB deve avere solo i permessi strettamente necessari.
Protezione contro CSRF
Usare token unici e temporanei nei form HTML.

8.3 Strumenti utili

OWASP Cheat Sheets → raccolta di linee guida sulla sicurezza.
Burp Suite → per testare la sicurezza delle applicazioni web.
Hashing Libraries → disponibili in PHP, Python, Node.js ecc. per gestire le password correttamente.
Torna sù

Menù 🖥️ Frontend e Backend: due facce dello stesso sito 🌐 Creare una pagina web con HTML e CSS ⚡ Introduzione a JavaScript: dare vita alle pagine web 🗄️ Database per il web: SQL vs NoSQL 🔐 Sicurezza nel web: le minacce più comuni e come difendersi

🖥️ Frontend e Backend: due facce dello stesso sito

🔹 Cos’è il Frontend

🔹 Cos’è il Backend

🔹 Come lavorano insieme

🔹 Schema riassuntivo

🔹 Conclusione

🌐 Creare una pagina web con HTML e CSS

🔹 La struttura base di una pagina HTML

🔹 Aggiungere un po’ di stile con CSS

🔹 Separare HTML e CSS (opzionale)

🔹 Conclusione

⚡ Introduzione a JavaScript: dare vita alle pagine web

🔹 Cos’è JavaScript?

🔹 Primo esempio: un messaggio al click

🔹 Modificare lo stile con JS

🔹 Usare uno script esterno

🔹 Conclusione

🗄️ Database per il web: SQL vs NoSQL

🔹 Database SQL

Esempio tabella utenti:

Esempio di query SQL:

🔹 Database NoSQL

Esempio di documento JSON (utente):

🔹 Differenze principali

🔹 Quale scegliere?

🔹 Conclusione

🔐 Sicurezza nel web: le minacce più comuni e come difendersi

🔹 1. SQL Injection

Esempio:

Difesa:

🔹 2. XSS (Cross-Site Scripting)

Esempio:

Difesa:

🔹 3. Gestione delle password

Difesa:

🔹 Altre buone pratiche

🔹 Conclusione

8. Introduzione alla sicurezza nello sviluppo web

8.1 Le minacce più comuni

8.2 Buone pratiche di sicurezza

8.3 Strumenti utili

Menù

🖥️ Frontend e Backend: due facce dello stesso sito
🌐 Creare una pagina web con HTML e CSS
⚡ Introduzione a JavaScript: dare vita alle pagine web
🗄️ Database per il web: SQL vs NoSQL
🔐 Sicurezza nel web: le minacce più comuni e come difendersi

Esempio tabella `utenti`: