< Unità 2 - Sviluppo Web ('22-'23)

Lezione 4 - Mini-progetto: pagina Web HTML

45 minuti

Panoramica

Domanda del giorno: come posso usare l'HTML per esprimere un valore personale?

In questo mini-progetto opzionale, gli studenti usano ciò che hanno imparato per creare la propria pagina web personale su un argomento a loro scelta. La lezione inizia con un ripasso dell'HTML che gli studenti hanno imparato. Quindi iniziano il loro progetto progettando una pagina web e identificando quali tag utilizzeranno per implementarla. Quindi creano le loro pagine web in "Sviluppo Web" e le condividono con la classe. Facoltativamente, dopo aver avviato un processo di riscontro formale, possono apportare modifiche finali ai propri siti web prima di riflettere sul processo. Questo progetto può essere completato in un giorno o esteso a diversi giorni, a seconda delle esigenze di pianificazione della classe.

Traguardo di apprendimento

Questo progetto offre agli studenti più tempo per mettere in pratica i contenuti che hanno già appreso. È volutamente aperto e flessibile per consentire alle lezioni di trascorrere uno o più giorni, a seconda delle esigenze di ritmo degli studenti o del calendario scolastico.

Opportunità di valutazione

Usa i Criteri di valutazione del progetto allegati a questa lezione per valutare la padronanza degli obiettivi di apprendimento degli studenti.

Mappatura delle competenze

Mappatura completa del corso
CSTA K-12 Computer Science Standards (2017)
    • 1B-AP-11 - Scompone (suddivide) i problemi in sotto-problemi più piccoli e gestibili per facilitare il processo di sviluppo del programma.
    • 1B-AP-12 - Modifica, rimescola o incorpora parti di un programma esistente, personalizzandolo, per sviluppare qualcosa di nuovo o aggiungere funzionalità più avanzate.
    • 1B-AP-15 - Esegui test e debugging (identificare e correggi errori) di un programma o di un algoritmo per assicurarti che funzioni come previsto.

Pianificazione

Obiettivi

Gli alunni saranno in grado di:
  • creare una pagina Web utilizzando HTML

Preparazione

  • Stampa una copia per ogni studente della Guida al progetto
  • Controlla il forum "Aula insegnanti" per insegnanti verificati per trovare strategie o risorse aggiuntive condivise dagli altri colleghi insegnanti
  • Se stai facendo una lezione virtuale, valuta la possibilità di controllare le nostre Modifiche alla lezione virtuale

Collegamenti

Attenzione! Fai una copia di tutti i documenti che intendi condividere con gli alunni.

Per gli insegnanti
Per gli studenti

Guida didattica

Preparazione (5 minuti)

Diario

Discussione: qual è un valore personale che vorresti condividere con il mondo?

Consenti ai volontari di condividere i valori personali che ritengono importanti.

Scopo della discussione

Questa discussione consente agli studenti di condividere idee per i loro siti web, ma non è necessario che tutti condividano se preferiscono non farlo. L'obiettivo della discussione è far riflettere gli studenti sull'argomento e incoraggiarli a pensare ai siti web come a un modo per esprimersi.

Osservazioni

Abbiamo tutti cose importanti per noi. I siti web ci consentono di condividere queste cose con il mondo intero. Oggi lavoreremo sull'utilizzo di ciò che abbiamo imparato sull'HTML per condividere qualcosa che riteniamo importante.

Domanda del giorno: come posso usare l'HTML per esprimere un valore personale?

Suggerimenti didattici

Facilitazione dei mini-progetti: i mini-progetti fungono da punti di controllo nei piani di studi e coprono il sottoinsieme di competenze che gli studenti hanno visto finora nell'unità. Sono progettati per 1-2 giorni di implementazione per verificare il livello di comprensione dei contenuti del corso da parte degli studenti fino ad ora. Potresti decidere di estendere questi progetti per sostenere o sfidare gli studenti, il che potrebbe consentirti di ripassare concetti difficili o sostenere gli studenti che potrebbero aver perso le lezioni e stanno cercando di recuperare il ritardo. Tuttavia, consigliamo di decidere in anticipo e di concordare con gli studenti quanto tempo hanno a disposizione per ogni progetto, altrimenti è facile che i progetti si trascinino a più giorni e che il lavoro degli studenti vada oltre l'ambito di questo progetto.

Attività (35 minuti)

Distribuisci: consegna a ogni studente una copia della Guida al progetto.

Fase 1: Definisci - Indica il tuo obiettivo

Gli studenti avranno già dichiarato un valore personale durante la fas di avvio, ma questa è l'occasione per loro di perfezionare ciò che vogliono dire o addirittura cambiare idea sull'argomento del loro sito web.

Fase 2: Preparazione - Progetta la tua pagina

Quando gli studenti rispondono a domande sulla progettazione della pagina, assicurati di distinguere tra il contenuto della pagina e il modo in cui il contenuto è organizzato o strutturato. Dopo aver completato i loro progetti, assicurati che siano in grado di identificare quali tag saranno necessari per i diversi testi sulle pagine web.

Suggerimenti didattici

Valutare la congruità dei progetti degli studenti: gli studenti possono ideare progetti che vanno oltre le competenze che hanno attualmente o che richiederebbero più tempo del tempo assegnato per essere implementati. Invece di chiedere agli studenti di scegliere un progetto diverso, prova a chiedere agli studenti di immaginare una versione più ridotta della loro idea iniziale. Come analogia, se l'idea iniziale degli studenti è il passo "Corri", immagina una versione meno intensa che rappresenti come sarebbe il passo "Cammina". Se necessario, puoi anche continuare a tornare indietro fino a un passaggio di "Vai molto lento".

Scavando più a fondo: questo è a volte indicato come "Prodotto minimo funzionante" (o MVP, da Minimal Viable Product): puoi saperne di più su questo processo e adattarlo alle tue strategie di progetto leggendo questo articolo: Che senso ha il MVP di Henrik Kniberg

Fase 3: Prova a sviluppare la tua pagina

Dopo aver controllato i progetti, consenti agli studenti di accedere a Code Studio e codificare le loro pagine. Avranno la possibilità di rivedere tutti i tag che hanno appreso prima di iniziare a pubblicare sulle loro pagine web. Possono completare queste attività come revisione o utilizzarle come risorse mentre lavorano ai loro progetti.

Suggerimenti didattici

Strategie per il debugging: mentre gli studenti progettano e implementano le proprie idee di progetto, potrebbero trovarsi con nuovi bug da districare e potresti ritrovarti a guardare un codice completamente sconosciuto mentre gli studenti cercano aiuto per risolvere i loro errori. Per semplificare l'esperienza di debugging, prendi in considerazione le seguenti strategie:

Scavare più a fondo: valuta la possibilità di fornire agli studenti un oggetto con cui parlare come parte del processo di debugging. Questo a volte è noto come debugging di Rubber Duck: puoi saperne di più sul sito web https://rubberduckdebugging.com/

Fase 4: Rifletti

Gli studenti dovrebbero avere la possibilità di pensare a ciò che di più è loro piaciuto delle proprie pagine. Potresti anche consentire agli studenti di presentare formalmente o informalmente il proprio lavoro al resto della classe.

Riscontro tra pari

Come parte di questo progetto, puoi dare agli studenti l'opportunità di fornire riscontri ai loro colleghi utilizzando il modulo di revisione tra pari. Questo probabilmente prolungherà il progetto di almeno un giorno.

Conclusione (5 minuti)

Domanda del giorno: come posso usare l'HTML per esprimere un valore personale?

Diario

Discussione: qual è una cosa che potrebbe migliorare la tua pagina web che non sai ancora come fare?

Mentre gli studenti condividono le proproe idee, le appendono alla lavagna o su un cartellone e cercano di evidenziare le competenze che acquisiranno nelle prossime lezioni.

Scopo della discussione

Usa questa condivisione per far appassionare gli studenti alle cose che impareranno nelle prossime lezioni. Se crei un cartellone, potresti anche voler cancellare gli argomenti mentre li insegni. Per gli argomenti che non sono trattati nel programma, puoi indirizzare gli studenti verso argomenti simili trattati o, se del caso, indirizzarli verso risorse esterne che li guideranno nell'apprendimento di tali competenze.

Creative Commons License (CC BY-NC-SA 4.0).

Questo compito è disponibile previa Licenza Creative Commons (CC BY-NC-SA 4.0).

Se sei interessato ad utilizzare i materiali di Code.org per scopi commerciali, contattaci.