Simulazione di lezione. Disciplina: Informatica
Classe: IV Istituto Tecnico – Indirizzo Informatica e Telecomunicazioni
Argomento: Struttura di una pagina HTML
Durata: 2 ore
1. Contesto classe (ipotesi).
La classe è composta da 22 studenti con livelli di competenza eterogenei.
Prerequisiti.
Gli studenti conoscono:
- Concetto di Internet e Web
- Struttura client-server
- Concetto di linguaggio di markup
- Uso base di editor di testo
- Nozioni preliminari di siti web statici
2. Obiettivi didattici.
Obiettivi generali.
Comprendere la struttura logica e sintattica di una pagina HTML e saper realizzare una semplice pagina web.
Conoscenze.
Gli studenti dovranno conoscere:
- Cos’è HTML
- Struttura di base di un documento HTML
- Tag principali
- Concetto di annidamento dei tag
- Differenza tra head e body
- Metadati
- Tag semantici principali
Abilità.
Gli studenti dovranno essere in grado di:
- Scrivere una pagina HTML valida
- Utilizzare i principali tag
- Organizzare contenuti in modo gerarchico
- Interpretare il codice HTML
Competenze.
- Progettare semplici interfacce web
- Applicare standard di sviluppo web
- Utilizzare strumenti di sviluppo web
3. Metodologie didattiche.
- Lezione dialogata
- Problem solving
- Learning by doing
- Cooperative learning
- Attività laboratoriale
4. Strumenti.
- Laboratorio informatico
- Editor di codice (VS Code, Notepad++, ecc.)
- Browser web
- LIM o proiettore
- Validatore HTML online
5. Articolazione della lezione.
Fase 1 – Motivazione e attivazione (15 minuti).
Stimolo iniziale. Il docente pone la domanda:
“Cosa succede quando apriamo una pagina web nel browser?”
Discussione guidata:
- Il browser interpreta codice
- Le pagine web sono documenti strutturati
Il docente introduce HTML come linguaggio di markup.
Fase 2 – Introduzione teorica (35 minuti).
Cos’è HTML.
HTML (HyperText Markup Language) è un linguaggio utilizzato per descrivere la struttura dei contenuti di una pagina web. Non è un linguaggio di programmazione, ma di markup.
Struttura base di una pagina HTML. Il docente presenta lo schema generale.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
Contenuto della pagina
</body>
</html>
Analisi dei principali elementi
DOCTYPE
Indica al browser la versione HTML utilizzata.
Tag <html>
Contiene l’intero documento.
Sezione <head>
Contiene:
- metadati
- titolo pagina
- collegamenti a file esterni
- informazioni SEO
Tag <title>
Definisce il titolo mostrato nella scheda del browser.
Sezione <body>
Contiene tutti i contenuti visibili della pagina:
- testo
- immagini
- collegamenti
- tabelle
- form
Concetto di Tag.
Caratteristiche:
- apertura e chiusura
- annidamento
- attributi
Esempio:
<p class=”testo”>Questo è un paragrafo</p>
Fase 3 – Tag principali e struttura semantica (25 minuti).
Tag di contenuto base
- <h1> … <h6> → titoli
- <p> → paragrafo
- <a> → collegamento
- <img> → immagine
- <ul> <ol> <li> → liste
Struttura semantica HTML5.
Il docente introduce:
- <header>
- <nav>
- <section>
- <article>
- <footer>
Si spiega il concetto di semantica e accessibilità.
Fase 4 – Attività laboratoriale guidata (35 minuti).
Esercizio.
Gli studenti realizzano una pagina HTML personale.
Requisiti
- Titolo pagina
- Intestazione principale
- Paragrafo descrittivo
- Immagine
- Collegamento ipertestuale
- Struttura semantica base
Esempio guidato.
<!DOCTYPE html>
<html>
<head>
<title>La mia pagina</title>
</head>
<body>
<header>
<h1>Presentazione personale</h1>
</header>
<section>
<p>Sono uno studente di informatica.</p>
</section>
<footer>
<p>Contatti</p>
</footer>
</body>
</html>
Fase 5 – Verifica formativa (10 minuti).
Domande guida:
- Qual è la funzione del tag <head>?
- Qual è la differenza tra <head> e <body>?
- Cosa significa annidamento dei tag?
6. Strategie inclusive.
- Uso di schemi visivi
- Codice commentato
- Esempi pratici
- Lavoro cooperativo
- Suddivisione esercizi in step
7. Verifica e valutazione.
Verifica formativa.
- Osservazione durante attività laboratoriale
- Interazione orale
Verifica sommativa.
Realizzazione di una pagina HTML completa con:
- struttura corretta
- utilizzo tag principali
- organizzazione contenuti
8. Compiti per casa.
Creare una pagina HTML su un argomento a scelta contenente:
- almeno tre sezioni
- immagini
- collegamenti
- uso di tag semantici
9. Collegamenti interdisciplinari.
- TPSIT → sviluppo applicazioni web
- Sistemi e reti → architettura web
- Italiano → organizzazione dei contenuti
10. Sviluppi futuri.
- CSS e formattazione
- Layout responsive
- JavaScript
- Accessibilità web
- Validazione codice
Simulazione di lezione inclusiva BES/DSA.
Disciplina: Informatica
Classe: IV Istituto Tecnico – Indirizzo Informatica e Telecomunicazioni
Argomento: Struttura di una pagina HTML
Durata: 2 ore
1. Analisi del contesto classe.
Classe composta da 22 studenti con livelli di competenza differenziati.
Presenza ipotizzata di:
- 1 studente con DSA (dislessia e difficoltà nella lettura di codice strutturato)
- 1 studente con BES legato a difficoltà attentive
- Alcuni studenti con stili cognitivi prevalentemente visivi e operativi
2. Prerequisiti.
Gli studenti conoscono:
- Funzionamento base del Web
- Concetto di browser
- Utilizzo base del computer
- Elementi introduttivi sui linguaggi di markup
3. Finalità didattiche.
Favorire la comprensione della struttura di una pagina HTML attraverso:
- Approccio pratico e visuale
- Riduzione del carico cognitivo
- Apprendimento cooperativo
- Uso di strumenti compensativi
4. Obiettivi didattici.
Conoscenze
- Struttura base di una pagina HTML
- Funzione dei principali tag
- Differenza tra head e body
- Concetto di annidamento
Abilità.
- Scrivere una semplice pagina HTML
- Organizzare contenuti tramite tag
- Interpretare la struttura del codice
Competenze.
- Progettare contenuti web essenziali
- Utilizzare strumenti digitali per lo sviluppo web
5. Metodologie inclusive.
Strategie didattiche
– Lezione dialogata guidata
– Cooperative learning
– Peer tutoring
– Learning by doing
– Problem solving guidato
Strategie UDL.
- Presentazione multimodale (testo, schema, codice, spiegazione orale)
- Attività differenziate per livello
- Possibilità di espressione alternativa degli apprendimenti
- Uso di mediatori visivi
6. Strumenti e mediatori didattici.
- LIM
- Editor di codice semplificato
- Browser web
- Mappe concettuali
- Schemi riassuntivi
- Glossario termini tecnici
- Video tutorial brevi
7. Articolazione della lezione.
Fase 1 – Attivazione delle conoscenze pregresse (15 minuti).
Attività stimolo.
Il docente mostra una pagina web e chiede:
“Secondo voi da cosa è composta una pagina web?”
Gli studenti lavorano in piccoli gruppi.
Supporti inclusivi.
- Scheda guida con domande facilitanti
- Possibilità di risposta orale
- Uso di immagini esplicative
Fase 2 – Presentazione semplificata dei contenuti (30 minuti).
Introduzione a HTML.
Definizione facilitata:
HTML è il linguaggio che serve per organizzare i contenuti di una pagina web.
Presentazione della struttura base.
Schema visivo guidato:
Pagina HTML
│
├── HEAD → informazioni tecniche
└── BODY → contenuto visibile
Codice facilitato.
<!DOCTYPE html>
<html>
<head>
<title>La mia pagina</title>
</head>
<body>
<h1>Titolo</h1>
<p>Testo della pagina</p>
</body>
</html>
Strategie inclusive.
– Uso colori per distinguere le parti
– Lettura guidata del codice
– Spiegazione passo-passo
– Segmentazione del contenuto
Fase 3 – Concetti fondamentali con semplificazione cognitiva (25 minuti).
Concetto di Tag.
Spiegazione tramite metafora:
I tag sono contenitori che racchiudono informazioni.
Annidamento dei tag.
Rappresentazione grafica a scatole.
Differenza tra Head e Body.
Uso di tabella comparativa semplificata.
8. Attività laboratoriale inclusiva (35 minuti).
Esercizio differenziato.
Livello base.
Completare una pagina HTML già predisposta inserendo:
- Titolo
- Paragrafo
Livello intermedio.
Creare una pagina HTML con:
- Titolo
- Paragrafo
- Immagine
Livello avanzato.
Aggiungere:
- Struttura semantica
- Collegamenti ipertestuali
Supporti BES/DSA.
– Template di codice
– Checklist operativa
– Lavoro a coppie
– Guida passo-passo
– Codice commentato
9. Verifica formativa inclusiva (15 minuti).
Modalità differenziate
- Domande orali
- Quiz strutturato
- Produzione mappa concettuale
- Piccolo esercizio pratico
10. Strumenti compensativi.
Per studenti DSA:
- Mappe concettuali
- Codice con font ad alta leggibilità
- Glossario dei tag HTML
- Video registrazioni della spiegazione
11. Misure dispensative.
- Riduzione quantità codice richiesto
- Tempi aggiuntivi nelle esercitazioni
- Valutazione focalizzata sulla comprensione dei concetti
12. Valutazione.
Indicatori
- Comprensione struttura HTML
- Uso corretto dei tag
- Organizzazione logica dei contenuti
- Partecipazione collaborativa
13. Compito autentico inclusivo (homework).
Realizzare una pagina HTML su un argomento personale.
Possibilità di consegna:
– Codice HTML
– Schema della struttura
– Presentazione orale
14. Collegamenti interdisciplinari.
- TPSIT → sviluppo web
- Sistemi e Reti → architettura Internet
- Italiano → organizzazione dei contenuti digitali
15. Autovalutazione studenti.
Scheda con domande guida:
- Ho capito cos’è HTML?
- So distinguere head e body?
- Riesco a scrivere una pagina semplice?
- Ho collaborato con i compagni?
16. Sviluppi futuri.
- CSS e stile grafico
- Layout responsive
- Accessibilità web
- Introduzione a JavaScript