Lezione 3 - Aggiornamento delle schermate
45 minuti
Panoramica
Gli studenti dovrebbero già avere familiarità con la programmazione in Sviluppo App, in particolare con la "Modalità interfaccia" per creare elementi sullo schermo e con i blocchi onEvent per creare eventi con clic sui pulsanti. Per ampliare il tipo di app che gli studenti possono creare e per incoraggiarli a pensare in un modo nuovo a come gli utenti interagiscono con le app, introduciamo i blocchi setProperty() e setText() che consentono agli utenti di modificare le proprietà e il contenuto di vari elementi dell'interfaccia utente. In questa lezione gli studenti esplorano come utilizzare gli eventi per aggiornare gli elementi sullo schermo
Domanda del giorno: come si possono aggiornare gli elementi di progettazione di un'app?
Opportunità di valutazione
-
Impostare le proprietà degli elementi dell'interfaccia utente utilizzando il codice
Code Studio: vedi la tabella sull'esercizio di valutazione
-
Modificare il testo sullo schermo utilizzando il codice
Code Studio: vedi la tabella sull'esercizio di valutazione
-
Reagire all'input dell'utente utilizzando i gestori di eventi
Code Studio: vedi la tabella sull'esercizio di valutazione
Mappatura delle competenze
AP - Algorithms & Programming
- 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
Pianificazione
Obiettivi
Gli alunni saranno in grado di:
- modificare il testo sullo schermo utilizzando il codice
- reagire all'input dell'utente utilizzando i gestori di eventi
- impostare le proprietà degli elementi dell'interfaccia utente utilizzando il codice
Preparazione
- Per questa lezione non è necessario che gli studenti dispongano di Circuit Playgrounds e consigliamo anzi di svolgere la lezione senza dispositivi così da evitare distrazioni
- Consulta il forum "Aula insegnanti" per insegnanti verificati per trovare strategie o risorse aggiuntive condivise dagli altri insegnanti
Collegamenti
Attenzione! Fai una copia di tutti i documenti che intendi condividere con gli alunni.
Per gli insegnanti
- Reazione all'input dell'utente - Risorse
- Aggiornamento delle schermate - Diapositive
Per gli studenti
- Progettare schermate in modalità codice - Risorse
- Numeri Casuali - Risorse
Codice introdotto
Guida didattica
Preparazione (5 minuti)
Aggiornamento delle proprietà degli elementi dell'interfaccia utente
Mostra agli studenti questa immagine di esempio
Discussione: come spiegheresti a qualcun altro come ricreare questa schermata? Quali dettagli specifici ci sarebbe bisogno di sapere su ogni elemento di progettazione?
Obiettivo della discussione: l'obiettivo di questa discussione è indurre gli studenti a riflettere sulle proprietà dei vari elementi di progettazione che, più avanti in questa lezione, impareranno a modificare con il codice. Gli studenti dovrebbero fare affidamento sulle loro esperienze precedenti con la Modalità interfaccia e, se necessario, puoi utilizzarla per ripassare Sviluppo App.
Attività (35 minuti)
Transizione: fai andare gli studenti su Code Studio
Guida agli esercizi di programmazione: ulteriori indicazioni per gli esercizi di programmazione sono fornite nella Guida CSD agli esercizi di programmazione. Questo documento include strategie e buone pratiche per agevolare lo svolgimento degli esercizi di programmazione con gli studenti.
Gli studenti hanno familiarità con la modalità Interfaccia per configurare l'interfaccia utente della loro app, ma questo esercizio introduce come modificare gli elementi di progettazione con il codice. Gli studenti possono passare il mouse sugli elementi per visualizzare i propri ID e utilizzarli per formulare ipotesi. Quando premono Esegui, il programma verrà eseguito lentamente ed evidenzierà ogni riga durante l'esecuzione in modo che gli studenti possano vedere passo dopo passo cosa fa ciascuna riga. Questo può essere utile quando si discute della loro previsione e si associa il risultato a righe di codice specifiche.
Ripasso della Modalità interfaccia: se gli studenti necessitano di una revisione della Modalità interfaccia e degli eventi in Sviluppo App, potresti mostrare agli studenti i seguenti video:
Come risorsa continuativa per gli studenti, prendi in considerazione la possibilità di stampare o visualizzare le seguenti pagine della guida e dei suggerimenti per gli studenti:
Normalizzazione degli errori e supporto al debugging: man mano che gli esercizi di programmazione diventano più complessi, gli studenti potrebbero ritrovarsi nel codice dei bug che devono risolvere. Se ciò accade frequentemente, questa può essere un'esperienza demoralizzante per gli studenti e può influire sulla loro percezione di sé delle loro capacità in classe.
Per ovviare a ciò, consigliamo di normalizzare i bug e gli errori in quanto si tratta di una circostanza che accade a tutti: è solo una parte del processo. Puoi mostrare agli studenti il nostro Video sul debugging, che include diversi studenti che normalizzano gli errori e discutono delle strategie di debugging che gli studenti possono utilizzare. Inoltre, prendi in considerazione la possibilità di esporre la Guida per gli studenti al debugging a cui gli studenti possano fare riferimento in tutta l'unità e di avere Quaderni di reportistica per i bug a disposizione degli studenti.
Valutazione formativa: questo esercizio può essere utilizzato come valutazione formativa. Nell'esercizio viene fornita una tabella con i criteri di valutazione e agli studenti può essere fornito un riscontro scritto. Clicca qui per saperne di più su come fornire riscontri agli studenti.
Conclusione (5 minuti)
Discussione: immagina di creare un'app e di dover rappresentare un «errore» per l'utente. Pensando alla lezione di oggi e a quella di ieri, come possiamo mostrare un «errore» all'utente sia sulla schermata sia sul Circuit Playground
Condividi: chiedi agli studenti di condividere le proprie conclusioni prima con un compagno e successivamente con tutta la classe
Obiettivo della discussione: gli studenti dovrebbero fare una riflessione libera sulla varietà di opzioni che possono utilizzare per rappresentare agli utenti la presenza di un errore. Ad esempio:
- Modifica del colore rosso del testo o dello sfondo
- Far suonare il Circuit Playground
- Accendere il LED rosso del Circuit Playground
- Modificareil testo sullo schermo per dire «Errore!»
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.
