Lezione 10 - Schede modello in Sviluppo App
45 minuti
Panoramica
In questa lezione, gli studenti si esercitano a importare i propri modelli in Sviluppo App, questa volta includendo modelli con dati numerici e utilizzando schede modello per migliorare l'esperienza utente nella compilazione del modulo. Impareranno quindi a visualizzare la scheda modello in Sviluppo App e a utilizzarla per aggiungere altri elementi descrittivi a un'app. Successivamente, si concentrano sul miglioramento dell'esperienza utente aggiungendo testo informativo per guidare gli utenti nella compilazione del modulo e aggiungendo uno stile alla loro app per migliorare l'esperienza utente.
Domanda del giorno: come posso usare una Scheda Modello per migliorare la mia app?
Opportunità di valutazione
-
Utilizzare una scheda modello per aggiornare l'interfaccia utente di un'app
L'esercizio 9 contiene una mini-tabella con i criteri di valutazione che può essere utilizzata per valutare questo obiettivo.
-
Usare le istruzioni condizionali per modificare il comportamento di un'app
L'esercizio 9 contiene una mini-tabella con i criteri di valutazione che può essere utilizzata per valutare questo obiettivo.
Mappatura delle competenze
AP - Algorithms & Programming
- 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
- 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
- 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:
- utilizzare una scheda modello per aggiornare l'interfaccia utente di un'app
- usare le istruzioni condizionali per modificare il comportamento di un'app
Preparazione
- Ripassa gli esercizi di Code Studio prima della lezione
- Consulta il forum "Aula insegnanti" per gli 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
- Schede modello in Sviluppo App - Diapositive (Scarica)
- Schede modello stampabili - Risorse (Scarica)
Per gli studenti
Codice introdotto
Guida didattica
Preparazione (5 minuti)
Diario
Mostra lo screenshot di un'app che ha importato un modello in Sviluppo App senza modifiche alla "modalità interfaccia".
Discussione: quali modifiche potresti apportare a questa app per renderla più facile da usare per le persone? Scrivi un elenco delle modifiche alla progettazione o al flusso dell'app che consiglieresti per questa app.
Chiedi agli studenti di scrivere un diario individualmente, poi condividilo in piccoli gruppi prima di riunire l'intera classe.
Obiettivo della discussione: gli studenti possono commentare elementi di stile, come usare i colori per ravvivare la pagina. Gli studenti possono commentare le descrizioni all'utente, ad esempio perché ile richieste all'utente generate non sono molto descrittive. Gli studenti possono commentare il flusso dell'app, ad esempio suggerendo di suddividerla in più schermate o aggiungendo una schermata di «benvenuto» all'inizio. Tutte queste sono idee preziose per una riflessione libera che confluirà nella lezione di oggi.
Code Studio: chiedi agli studenti di accedere a Code Studio. Il primo esercizio prevede che gli studenti esplorino una versione migliorata di questa stessa app, con molti dei miglioramenti implementati. Man mano che la classe esplora, evidenzia eventuali miglioramenti che corrispondono ai loro suggerimenti. Sottolinea che questa app fa una cosa che non abbiamo mai visto prima: cambia schermata in base all'animale previsto.
Osservazioni
Come possiamo vedere, ci sono molti modi per migliorare la nostra app e tutti voi avete previsto molti dei miglioramenti che vediamo qui. Alcuni miglioramenti non riguardano solo la progettazione: anche l'inserimento di informazioni aggiuntive può rendere un'app più utile per i suoi utenti. Oggi impareremo di più su come rendere le nostre app più facili da usare con l'aiuto di una Scheda modello.
Domanda del giorno: come posso usare una scheda modello per migliorare la mia app?
Attività (35 minuti)
Schede modello nelle app (15 minuti)
Code Studio: chiedi agli studenti di passare all'esercizio successivo in Code Studio. In questa prima sequenza di esercizi, gli studenti vedranno come utilizzare una scheda modello per aggiornare la loro app.
Volutamente misteriosa: questa app è volutamente misteriosa e richiede molte supposizioni per essere compresa. Questo è utile, poiché lavoreremo per migliorare questa app nei prossimi esercizi. Se gli studenti fanno domande o esprimono incertezze sul funzionamento dell'app: convalida le loro intuizioni, ma evita di rivelare troppo sull'app, incoraggiali invece a tenere a mente questi pensieri man mano che la lezione continua.
Discussione: alcune caratteristiche utilizzano menu a discesa e altre caselle di testo. Quale pensi sia la differenza tra questi due tipi di caratteristiche?
Obiettivo della discussione: guida gli studenti a notare che le caselle di testo richiedono numeri e le caselle a discesa utilizzano parole. Una volta fatto questo punto, passa alla diapositiva successiva con le definizioni dei dati categoriali e numerici.
Glossario: mostra agli studenti il vocabolario della lezione, che include il nuovo termine per i dati numerici.
- Dati categoriali: dati che possono essere suddivisi in gruppi o categorie
- Dati numerici: dati che possono essere contati o misurati
Numeri nei menu a discesa: gli studenti potrebbero notare che la caratteristica NO ha un menu a discesa che contiene i numeri da 1 a 4 e potrebbero chiedere perché questo è rappresentato come un menu a discesa anziché come input di testo. Questa è una domanda valida che verrà chiarita nel livello successivo: per ora, conferma agli studenti che questo sembra confuso e spingili a considerare: quali informazioni extra vorresti avere per aiutare a capire cosa sta succedendo qui?
Discussione: questa app non è molto facile da capire. Cosa pensi rappresentino le caratteristiche? Quanti animali domestici può consigliare?
Lascia che gli studenti condividano le loro ipotesi, ma fai attenzione a non convalidarle come «giuste» o «sbagliate». Lascia invece che la classe giunga alle proprie conclusioni prima di continuare.
Osservazioni
Se intendiamo creare questa app, avremo bisogno di aggiungere ulteriori informazioni per consentire all'utente di capire più facilmente come l'app prende le sue decisioni. Fortunatamente, abbiamo una Scheda modello inclusa nella nostra app e contiene queste informazioni. Diamo un'occhiata alla scheda modello e vediamo quali informazioni aggiuntive può fornirci sulle nostre caratteristiche e sull'etichetta.
Code Studio: chiedi agli studenti di passare all'esercizio successivo in Code Studio, che mostra la scheda modello. Chiedi agli studenti di leggere le etichette e le funzionalità per capire meglio come funziona l'app. Se gli studenti hanno indovinato una di queste risposte nella discussione precedente, torna indietro e convalida le risposte di prima.
Stampa di schede modello: puoi decidere di stampare anche la scheda modello in modo che gli studenti possano leggerla su carta. Se possibile, la scheda modello è progettata per essere stampata su entrambi i lati in modo da apparire come un unico foglio di carta che puoi capovolgere avanti e indietro.
Discussione: come si può distinguere tra caratteristiche categoriali e caratteristiche numeriche nella scheda modello?
Obiettivo della discussione: gli studenti devono notare che le caratteristiche numeriche hanno un minimo e un massimo sulla scheda, mentre le caratteristiche categoriali hanno un elenco puntato dei valori possibili.
Osservazioni
Usiamo le informazioni di questa scheda modello per migliorare la nostra app, in particolare le domande relative a ciascuna caratteristica. Inizieremo anche a migliorare l'aspetto e la progettazione dell'interfaccia della nostra app per renderla più facile da usare nei prossimi esercizi.
Code Studio: chiedi agli studenti di passare all'esercizio successivo, dove possono ancora accedere alla scheda modello di questa app e utilizzarla per aggiornare l'interfaccia utente.
Girando tra i banchi: monitora gli studenti mentre aggiornano la loro app, assicurandoti che possano accedere alla scheda modello per determinare le etichette corrette
Aggiornamento delle sole etichette: gli studenti devono aggiornare solo l'interfaccia della loro app: non è necessario aggiornare il programma, che utilizza comunque le abbreviazioni più brevi di una o due lettere dell'app originale. Questo perché è comune utilizzare abbreviazioni molto più brevi per i dati e utilizzare spiegazioni più lunghe in luoghi come la scheda modello. Se uno studente aggiorna la sezione `addPair()`(#BB77C7) del proprio programma, può causare errori nella sua app.
Istruzioni condizionali `if` nelle app (20 minuti)
Osservazioni
Avrai notato che in questa app la previsione appare nella schermata principale. Ma nell'app che abbiamo testato, siamo passati a una schermata completamente nuova in base al risultato! Affinché la nostra app cambi schermata, dobbiamo controllare il risultato della nostra previsione. Ciò significa che il nostro programma dovrà utilizzare un nuovo tipo di blocco condizionale: l'istruzione if.
Video: mostra il video delle istruzioni condizionali nelle diapositive.
Video per studenti: i video sono pensati per essere guardati e discussi in classe e quindi non sono forniti come esercizi individuali su Code Studio. Se uno studente ha bisogno di guardare nuovamente un video, può trovarlo nella sezione Aiuto e suggerimenti degli esercizi o visitando la pagina Risorse per gli studenti di ogni lezione.
Code Studio: chiedi agli studenti di passare all'esercizio successivo in Code Studio, dove aggiungeranno l'istruzione condizionale "if-statement" al codice per cambiare la schermata. Continueranno a lavorare anche sugli esercizi rimanenti, aggiungendo nuovi elementi alla loro app lungo il percorso.
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.
Esercizi pratici: chiedi agli studenti di scegliere uno o due esercizi pratici da completare per approfondire la loro comprensione delle schede modello e delle istruzioni condizionali. Gli studenti non devono completare tutti gli esercizi pratici: una volta che si sentono a proprio agio, possono passare all'esercizio successivo per vedere se hanno padroneggiato i concetti di questa lezione.
Scelte dello studente ed esercizi pratici: far scegliere agli studenti i propri esercizi di pratica è un modo per differenziare l'istruzione con i tuoi studenti. Per saperne di più su come questi esercizi supportano la differenziazione, così come altre strategie, puoi consultare la Alla scoperta dell'informatica - Guida alla differenziazione
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.
Esercizi di scelta: appena gli studenti hanno creato la loro app "Animali consigliati", possono scegliere tra diverse attività di esempio per continuare a migliorare la propria app. Ogni esercizio utilizza la stessa app "Animali consigliati" che ha già creato come modello da aggiungere. Gli studenti possono scegliere di completare tutti gli esercizi che desiderano: ognuno consente loro di continuare a personalizzare e migliorare la propria app.
Deja Vu? gli studenti potrebbero notare che igli esercizi di scelta sembrano familiari in questa lezione: sono gli stessi esercizi tra cui gli studenti potevano scegliere nella Lezione 7. Questo è intenzionale, poiché offre agli studenti la possibilità di imparare un codice diverso da quello appreso in precedenza. Per gli studenti che hanno già esplorato ciascuna opzione, incoraggiali ad applicare le loro conoscenze a questa nuova app.
Conclusione (5 minuti)
Diario
Discussione: qual è un esempio di come una scheda modello possa essere utile quando si crea un'app?
Obiettivo della discussione: cerca risposte che evidenziino come una scheda modello possa aiutare a comunicare lo scopo di un'app a un utente. Alcuni esempi di oggi possono includere:
- Utilizzo delle descrizioni delle etichette o delle caratteristiche per chiarire le scelte in un'app
- Utilizzo della sezione «Utilizzi previsti» per creare una schermata di benvenuto per un'app
- Inclusione dei possibili valori per le caratteristiche categoriali in un'app
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.