Lezione 9 - Utilizzo delle immagini
45 minuti
Panoramica
Domanda del giorno: come possiamo aggiungere immagini sui nostri siti web, assicurandoci di rispettare i diritti di tutti?
Gli studenti iniziano la lezione considerando le implicazioni etiche dell'uso delle immagini sui loro siti web, in particolare in termini di proprietà intellettuale. Quindi imparano come aggiungere immagini alle loro pagine web utilizzando il tag <img> e come citare le fonti delle immagini in modo appropriato.
Traguardo di apprendimento
Questa lezione introduce le immagini, che sono diverse dai tag precedenti in quanto si «chiudono automaticamente» e includono attributi. Gli studenti devono capire che questi tag non circondano i contenuti allo stesso modo degli altri tag.
Questa è anche la prima volta che gli studenti sono incoraggiati a utilizzare contenuti di altri e offre loro l'opportunità di mettere in pratica ciò che hanno appreso sulla proprietà intellettuale e sul diritto d'autore.
Opportunità di valutazione
-
Segui la legge sul copyright, fornendo con precisione attribuzione agli altri quando usi le loro opere.
Vedi l'esercizio 7 nella lezione di Code Studio.
-
Aggiungi un'immagine a una pagina web
Vedi il l'esercizio 7 nella lezione di Code Studio.
Mappatura delle competenze
AP - Algorithms & Programming
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 3A-AP-20 - Evaluate licenses that limit or restrict use of computational artifacts when using resources such as libraries.
IC - Impacts of Computing
- 1B-IC-21 - Utilizzare media di pubblico dominio o creative commons e astenersi dal copiare o utilizzare materiale creato da altri senza autorizzazione.
- 2-IC-23 - Describe tradeoffs between allowing information to be public and keeping information private and secure.
Pianificazione
Obiettivi
Gli alunni saranno in grado di:
- aggiungere un'immagine a una pagina web.
- seguire la legge sul copyright, attribuendo con precisione gli altri quando usi la loro opera.
Preparazione
- 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
- Creative Commons Search - Risorse
- Immagini in HTML - Risorse
- Utilizzo delle immagini - Diapositive (Scarica)
Codice introdotto
Guida didattica
Preparazione (5 minuti)
Utilizzo delle immagini
Osservazioni
Oggi aggiungeremo alcune immagini ai nostri siti. Questo può rendere i siti web molto più divertenti, ma significa anche che dovremo fare molta attenzione per assicurarci di essere sicuri e responsabili nel modo in cui li utilizziamo.
Discussione: nel tuo diario, pensa ad alcune linee guida da tenere a mente quando usi le immagini. Come possiamo assicurarci di essere al sicuro e di rispettare i diritti degli altri?
Man mano che gli studenti elaborano le loro linee guida, puoi scegliere di fornire dei suggerimenti ricordando loro le attività recenti che hanno svolto per la condivisione di dati personali e il rispetto del copyright. Molte classi potrebbero anche voler aggiungere altre linee guida, ad esempio definire ciò che è appropriato in un ambiente scolastico o assicurarsi che tutte le persone raffigurate nell'immagine si sentano a proprio agio con l'immagine pubblicata online. Indipendentemente da ciò, prima di andare avanti, assicurati di essere soddisfatto che le linee guida siano adeguate.
Discussione: chiedi agli studenti un diario individualmente, poi condividilo con un compagno e infine discuti con tutta la classe. Puoi scegliere di creare un cartellone con le linee guida create dagli studenti e chiedere loro se nell'elenco sembra mancare qualcosa.
Domanda del giorno: come possiamo aggiungere immagini sui nostri siti web, assicurandoci di rispettare i diritti di tutti?
Attività (35 minuti)
Aggiungere Immagini
Transizione: fai andare gli studenti su Code Studio.
Quando gli studenti iniziano a utilizzare le immagini, potrebbero avere difficoltà a trovare la dimensione giusta per le loro pagine. Nelle due lezioni, gli studenti impareranno a ridimensionare le proprie immagini con i CSS. Per ora, gli studenti possono utilizzare un ridimensionatore di immagini online, come quello disponibile su https://resizeimage.net/, per ridimensionare le proprie immagini. In alternativa, possono usare l'attributo `height` o `width` all'interno del tag `img` per ridimensionarlo man mano che la pagina viene caricata.
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.
Esercizio 1: Gli studenti possono imbattersi in alcuni tag di immagine che includono una barra alla fine, come questo: <img src="imgURL.jpg" alt="my image" />
Queste barre finali servono a indicare che questo tag si chiude automaticamente, ma sono opzionali e non hanno alcun effetto sulla pagina web.
Esercizio 2: A causa del tipo di licenza utilizzata, gli studenti non sono tenuti per legge a includere l'attribuzione, ma è una buona abitudine da adottare quando sviluppano i loro siti web.
Esercizio 5 - Motori di ricerca consigliati: Poiché non possiamo sapere quali siti potrebbero essere bloccati nel tuo distretto, abbiamo evitato di indirizzare gli studenti a un motore di ricerca specifico. Non tutti i motori di ricerca semplificano l'impostazione dei filtri Creative Commons, alcuni dei più semplici includono:
Come qualsiasi sito con contenuti in crowdsourcing , i risultati dei motori di ricerca cambieranno di giorno in giorno e alcuni di questi risultati potrebbero essere inappropriati per la classe. Potresti voler controllare questi siti poco prima di mostrarli in aula e decidere cosa è meglio per la tua classe.
Sebbene questo esercizio possa essere utilizzato per valutare la comprensione da parte degli studenti della sintassi del tag <img>, il suo scopo principale è rendere gli studenti consapevoli dei tipi più comuni di bug che possono incontrare quando aggiungono immagini alle pagine web.
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)
Utilizzo delle immagini
Domanda del giorno: come possiamo aggiungere immagini sui nostri siti web, assicurandoci di rispettare i diritti di tutti?
**Diario 3-2-1: **
- Quali sono i 3 modi in cui puoi usare le immagini per migliorare il tuo sito?
- Quali sono le sfide 2 nell'aggiungere immagini a un sito web?
- Qual è il modo 1 in cui puoi rispettare i diritti delle persone quando usi le immagini?
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.
