Benvenuta nel web senza magia nera.
Qui non impari tutto lo sviluppo web. Ma finalmente capisci come si incastrano i pezzi.
Come funziona un sito web?
Immagina un ristorante:
- 🍽️ HTML: Struttura (Il piatto).
- 👗 CSS: Veste (La presentazione).
- 🧠 JavaScript: Fa succedere cose (Il cameriere).
- 👨🍳 PHP: Parla col server (Il cuoco).
Fine della confusione.
Cosa succede quando apri una pagina?
Quando apri una pagina web succedono molte cose. Ma non serve essere sviluppatori per capire il meccanismo.
Questo sito è una guida semplice per vedere:
- ✅ Cosa fa ogni linguaggio
- ✅ Cosa succede nel browser
- ✅ Cosa succede nel server
- ✅ Come nasce davvero una pagina web
Paginella (HTML) 🦴
HTML è lo scheletro della pagina. Dice al browser: "questo è un titolo", "questo è un paragrafo".
Non rende le cose belle. Le rende organizzate e comprensibili.
Titoli (Headings)
<h1> a <h6>Danno gerarchia al contenuto.
Paragrafi
<p>Contiene il testo normale.
Importanza
<strong>Rende il testo importante.
Link
<a href="...">Collega le pagine tra loro.
Immagini
<img src="...">Mostra le immagini.
Liste
<ul>, <ol>Elenchi puntati o numerati.
Contenitori
<div>, <span>Raggruppano gli elementi.
Multimedia
<video>, <audio>Per video e suoni!
Form
<input>, <button>Per far scrivere l'utente.
Vestitino (CSS) 👗
CSS prende lo scheletro HTML e gli mette i vestiti. Senza CSS, il web sembra un documento Word del 1997.
✅ Con CSS decidi:
- 🎨 Colori: Sfondi, testo, gradienti.
- � Font: Caratteri tipografici.
- 📐 Layout: Dove stanno le cose.
- 📏 Dimensioni: Grandezza degli elementi.
- 📱 Responsive: Adattamento ai dispositivi.
❌ Cosa NON puoi fare
- 🧠 Logica: Niente calcoli complessi.
- 💾 Database: Non salva dati.
- 🔒 Sicurezza: Non protegge nulla.
Prova a vedere la differenza!
La Magia di Flexbox 🧘♀️
Quando devi mettere elementi uno accanto all’altro senza litigare con il layout, spesso entra in scena Flexbox.
A cosa serve?
È uno dei modi più semplici per dire al browser:
- ➡️ Metti questi elementi in fila
- ⬇️ Oppure impilali
- 🎯 Allineali bene
- 📏 Lascia spazio giusto tra loro
Esempi pratici
- 📋 Un menu orizzontale
- 🖼️ Una foto e un testo affiancati
- 🃏 Tre card sulla stessa riga
- 🔘 Un bottone perfettamente centrato
Takeaway
Non serve imparare mille proprietà per iniziare. Per i layout semplici, Flexbox è spesso il miglior amico del principiante.
Scriptuccio, ma con più sostanza 🧠
Prima abbiamo visto un alert. Carino, ma un po’ troppo semplice. JavaScript in realtà è quello che permette alla pagina di reagire davvero a quello che fai.
Cosa puoi fare?
- 📝 Cambiare il testo di un titolo dopo un click
- �️ Mostrare o nascondere un contenuto
- 🎨 Cambiare lo stato di una card
- � Far comparire un messaggio nella pagina
Provalo tu stesso!
Titolo in attesa...
PHP dietro le quinte 🐘
PHP vive sul server, quindi non lo vedi lavorare direttamente come JavaScript. Però fa una cosa molto importante: riceve dati, li elabora e rimanda indietro una risposta.
Come funziona?
- 📤 Tu scrivi il tuo nome e invii
- 📥 Il server riceve il dato
- ⚙️ PHP lo legge ed elabora
- 💬 La pagina ti risponde
Simulazione PHP
Parliamo di form 📝
Prima o poi sul web incontri sempre un form. Contatti, login, ricerche, newsletter: quasi tutto passa da lì.
Gli ingredienti
- ⌨️ Input: per scrivere testi brevi
- 📄 Textarea: per testi più lunghi
- 🔽 Select: per scegliere un’opzione
- 🔘 Button: per inviare
- 🏷️ Label: etichetta per spiegare cosa fare
Regole d'oro
- ✅ Etichette comprensibili
- ✅ Pulsanti chiari
- ✅ Messaggi di errore leggibili
- ✅ Feedback quando va tutto bene
Il sito non vive solo su desktop 📱
Una pagina può sembrare perfetta sul computer e diventare scomodissima sul telefono. Per questo esiste il responsive.
Cosa succede?
Responsive significa che il layout si adatta allo schermo. Non è la stessa pagina "rimpicciolita", è riorganizzata.
- ⬇️ Due colonne diventano una
- 🃏 Tre card in fila si impilano
- 📏 Gli spazi cambiano
- 🍔 Il menu cambia forma
Ricorda
Se funziona solo da desktop, non funziona davvero. Il telefono non perdona.
WordPress in parole povere Ⓜ️
Non tutti i siti si costruiscono scrivendo tutto a mano. Molto spesso si usa un CMS come WordPress.
Cosa c'è dentro?
WordPress ti aiuta a gestire contenuti senza programmare tutto da zero.
📄 Pagine
Contenuti stabili (Chi siamo, Home).
📰 Articoli
Contenuti dinamici (Blog, News).
🎨 Tema
La base grafica del sito.
🔌 Plugin
Funzioni extra (es. SEO, Form).
Anche le immagini hanno un cervello 🖼️
Le immagini aiutano tantissimo, ma vanno usate con un minimo di criterio. Non servono solo a riempire spazio.
Checklist Immagine
- 🎯 Coerente con il contenuto
- ⚖️ Proporzionata bene
- 🪶 Abbastanza leggera
- 📱 Leggibile su schermi piccoli
Attenzione
- ❌ Troppo pesante = sito lento
- ❌ Messa a caso = confonde
- ❌ Senza Alt Text = inaccessibile
Dal mockup al sito vero 🎨
Un mockup bello non basta. Uno sviluppatore ha bisogno di sapere spazi, font, breakpoint e stati hover. Un buon mockup è costruibile.
1. La Griglia (Grid System)
Il web non è un foglio bianco, è una griglia! Serve per il layout principale.
- Desktop: Usa sempre 12 colonne.
- Mobile: Usa 4 colonne.
- Gutter (Spazio tra colonne): Di solito 20px o 24px.
2. Flexbox (Allineamenti)
Ideale per allineare elementi in una sola direzione (riga o colonna).
- Direction: Metti gli elementi in riga o uno sotto l'altro.
- Justify (Asse Principale): Allinea al centro, ai lati o distribuisci lo spazio.
- Align (Asse Secondario): Centra verticalmente senza impazzire!
- Gap: Usa sempre
gapper lo spazio, non i margin!
3. Spaziature (8pt Grid)
Non usare numeri a caso! Usa multipli di 8 (o 4).
- ✅ 8px, 16px, 24px, 32px, 40px...
- ❌ 13px, 27px, 7px...
Questo rende tutto armonioso e facile da programmare.
4. Tipografia
Definisci una gerarchia chiara:
- H1 (Titolo Pagina): Grande (es. 48px/3rem). Uno solo per pagina!
- H2 (Sezioni): Medio (es. 32px/2rem).
- Body (Testo): Leggibile (minimo 16px).
- Line-height: Almeno 1.5 per il testo lungo.
5. Accessibilità & Colori
Il bello deve essere anche leggibile.
- Contrasto: Testo scuro su sfondo chiaro (o viceversa).
- Non solo colore: Non usare solo il rosso per gli errori (usa anche icone).
- Stati: Disegna sempre: Default, Hover (al passaggio del mouse), Active (click).
6. Immagini & Icone
- Foto: JPG o WebP (ottimizzate).
- Icone/Loghi: SVG (vettoriali, non sgranano mai!).
- Dimensioni: Esporta sempre in 2x per schermi Retina.
Wireframe
Solo struttura. Niente colori. Focus su "cosa va dove".
Mockup UI
Design finale. Pixel perfect. Colori definitivi.
Prototipo
Collega le schermate. Simula la navigazione.
Handoff
Consegna al dev: font, colori hex, asset e spaziature.
Mini Progetto Completo 🚀
Costruiamo una card vera, step by step. Non è magia, è solo web.
1. HTML (Struttura)
Creiamo il contenitore, l'immagine e i testi.
<img src="avatar.jpg">
<h3>Mario Rossi</h3>
<button>Segui</button>
</div>
2. CSS (Stile)
Aggiungiamo padding, colori e arrotondiamo gli angoli.
button { background: blue; color: white; }
3. JS (Interazione)
Facciamo funzionare il bottone.
4. PHP (Dati)
Salviamo il "Segui" nel database.
SEO Base 🔍
Come farsi trovare da Google.
Title Tag
Il titolo che vedi nella tab del browser e su Google.
Meta Description
Il piccolo riassunto sotto il titolo nei risultati di ricerca.
Alt Text
Descrizione delle immagini per chi non vede e per Google.
H1, H2, H3
Usali in ordine! Non saltare da H1 a H3.
Accessibilità ♿
Il web deve essere per tutti.
Contrasto
Assicurati che il testo si legga bene sullo sfondo.
Navigazione da tastiera
Tutti i bottoni devono essere raggiungibili con il tasto TAB.
Label nei form
Ogni campo di input deve avere un'etichetta chiara.
Statico vs Dinamico vs CMS 📚
Sito Statico (HTML/CSS)
Veloce, sicuro, ma difficile da aggiornare (devi toccare il codice).
Sito Dinamico (PHP)
Il contenuto cambia in base all'utente o al database.
CMS (WordPress)
Un pannello di controllo per gestire i contenuti senza toccare codice.