Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>AWE Lern-Paten</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>AWE Lern-Paten</h1> </header> <section bg="lego.jpg" id="awe-lern-paten" class="slide cover"><div><h2>AWE Lern-Paten</h2> </div></section> <section class="slide shout" id="organisatorisches"><div><h2>Organisatorisches</h2> </div></section> <section class="slide" id="thema"><div><h2>Thema</h2> <p class="center">Das AWE <q>Lern-Paten</q> bietet einen praktischen Einblick in die Computer-Pädagogik. Dabei bekommen die Studierenden didaktische Werkzeuge an die Hand, erarbeiten ein eigenes Konzept zu einem Thema ihrer Wahl und führen dieses im Rahmen der Projektwoche <q>Check your Web – Schülerfachforum für Medienkompetenz</q> im FEZ Berlin mit Schülern der sechsten Klasse durch.</p> <footer> <p>Ich bin letztens auf einen Text gestoßen – <q>Das Zeitalter von Edison</q> – der die Zustände zu Beginn des 20. Jahrhunderts hinsichtlich der Veränderung der Gesellschaft durch elektrischen Strom beschreibt.</p> <p>Wie durch den schnellen Fortschritt Spezialisten entstanden, die sich in Fachbegriffen unterhielten, die Nicht-Experten unverständlich waren und sich damit von der Allgemeinheit distanzierten.</p> <p>Wie Journalisten und Politiker mit halbgarem Verständnis unrealistische Erwartungen und Angst schürten.</p> <p>Größen aus dem Bereich der Elektrizität hielten Bildung für die einzige sinnvolle Lösung gegen irrationale Meinungen. Und das bereits in der Schule.</p> <p>Denn nur so könnten mündig Entscheidungen getroffen werden – im Konsum und in Wahlen.</p> <p>Doch obwohl die Allgemeinheit weiterhin fasziniert von dem Thema war, wurde der Graben zwischen ihr und den Experten immer größer.</p> <p>Über einhundert Jahre später lässt sich Elektrizität durch Informationstechnologie ersetzen und die Muster bleiben.</p> <p>Dieser Kurs hat zwei Ziele: Aufklärung und damit Befähigung der Schüler. Und Befähigung der Studenten hinsichtlich der Vermittlung dessen.</p> </footer> </div></section> <section class="slide" id="zeitplan"><div><h2>Zeitplan</h2> <table> <thead> <tr> <th scope="col">Datum</th> <th scope="col">Thema</th> </tr> </thead> <tbody> <tr> <td>4. November</td> <td>Didaktik</td> </tr> <tr> <td>5. November</td> <td>Eröffnungsveranstaltung im FEZ</td> </tr> <tr> <td>18. November</td> <td>Didaktik</td> </tr> <tr> <td>25. November</td> <td>Didaktik</td> </tr> <tr> <td>19. Dezember</td> <td>Abgabe der Konzepte</td> </tr> <tr> <td>13. Januar</td> <td>Vorstellung der Konzepte</td> </tr> <tr> <td>20. – 22. Januar</td> <td>Projekttage im FEZ</td> </tr> <tr> <td>14. Februar</td> <td>Abgabe der Abschlussberichte</td> </tr> </tbody> </table> <footer>Abschlussbericht: 1 - 2 Seiten, Was war gut? Was schlecht? Wie besser?</footer> </div></section> <section class="slide" id="prüfung"><div><h2>Prüfung</h2> <ul> <li>Beurteilung des Konzepts</li> <li>Beurteilung der Durchführung</li> <li>Beurteilung des Abschlussberichts</li> </ul> </div></section> <section class="slide" id="ansprechpartner"><div><h2>Ansprechpartner</h2> <ul> <li>Max Beier (<a href="mailto:maximilian.beier@htw-berlin.de">maximilian.beier@htw-berlin.de</a>)</li> <li>Maria Odoj (<a href="mailto:m.odoj@fez-berlin.de">m.odoj@fez-berlin.de</a>)</li> </ul> </div></section> <section class="slide shout" id="workshops"><div><h2>Workshops</h2> </div></section> <section class="slide" id="auftaktveranstaltung"><div><h2>Auftaktveranstaltung</h2> <ul> <li>Mittwoch, 5. November 2014, 9.00 – 13.30 Uhr</li> <li>2 Workshops à 70 Minuten</li> <li>Workshops: <ul> <li><a href="https://blockly-demo.appspot.com/static/apps/maze/index.html?lang=de">Blockly</a> – Spiel mit grafischer Programmierumgebung.</li> <li><a href="http://scratch.mit.edu/">Scratch</a> – Mächtige, blockbasierte Programmierumgebung.</li> </ul> </li> <li>Versucht herauszufinden, wofür sich die Kinder interessieren und eure Konzepte darauf anzupassen.</li> </ul> </div></section> <section class="slide" id="ablauf"><div><h2>Ablauf</h2> <table> <tbody> <tr> <td>09.00</td> <td>Eröffnung durch den Senator für Justiz und Verbraucherschutz, Gestalteter Input durch das FEZ-Berlin</td> </tr> <tr> <td>09.30</td> <td>1. Workshop</td> </tr> <tr> <td>10.45</td> <td>Gestaltete Pause (Infostände, Catering für Akteure)</td> </tr> <tr> <td>11.30</td> <td>2. Workshop</td> </tr> <tr> <td>12.45</td> <td>Präsentation ausgewählter Workshops, Internet-QUIZ, Zertifikatsverleihung</td> </tr> <tr> <td>13.30</td> <td>Ende</td> </tr> </tbody> </table> </div></section> <section class="slide" id="workshopideen"><div><h2>Workshopideen</h2> <ul> <li>Scratch</li> <li>Roboter</li> <li>Webentwicklung</li> <li>Minecraft-Mods</li> <li>Verschlüsselung</li> <li>Mobile Anwendungen</li> <li>Computerloses</li> </ul> </div></section> <section class="slide" id="scratch"><div><h2>Scratch</h2> <p><img src="scratch.png" alt="Scratch" /></p> <footer>Vorstellen des Konzepts und einiger Beispiele, die dann geremixt werden oder als Inspiration für eigene Projekte dienen können.</footer> </div></section> <section class="slide" id="scratch-1"><div><h2>Scratch</h2> <ul> <li>Sprache: <a href="http://scratch.mit.edu/">scratch.mit.edu</a></li> <li>Lernmaterialien: <a href="http://scratched.gse.harvard.edu/">scratched.gse.harvard.edu</a></li> <li><a href="http://scratch.mit.edu/help/cards/">Scratch-Lern-Karten</a></li> <li>Weitere Ressourcen: <ul> <li><a href="http://scratch-dach.info/wiki/Hauptseite">deutschsprachiges Scratch-Wiki</a></li> <li><a href="http://projects.codeclubworld.org/en-GB/index.html">CodeClub Scratch Curriculum</a> (<a href="https://github.com/CodeClub/scratch-curriculum">GitHub-Repo</a>)</li> </ul> </li> </ul> </div></section> <section class="slide" id="roboter"><div><h2>Roboter</h2> <ul> <li>z.B. kleine Aufgabe vorgeben, die mit Hilfe eines selbst gebauten Roboters erreicht werden muss</li> <li>ähnlich <a href="https://soinc.org/sites/default/files/StrawTowerChallenge.pdf">Strohalm-Aufgabe</a></li> <li>Vorgefertigte Workshops unter <a href="http://www.makehub.io/#/home">makehub.io</a><br /> (z.B. <a href="http://www.makehub.io/#/project/9674384">Raspberry Pi Rover</a>, Aufwand: 10h)</li> </ul> </div></section> <section class="slide" id="webentwicklung"><div><h2>Webentwicklung</h2> <ul> <li>entwickeln einer kleinen Website (+ Hosting)</li> <li>Beispiele im <a href="https://github.com/CodeClub/webdev-curriculum">CodeClub-GitHub-Repo</a></li> <li>z.B. <a href="http://projects.codeclub.org.uk/en-GB/03_webdev/09/recipe.html">Coding a recipe</a></li> <li>Erstellen und Veröffentlichen mit <a href="https://thimble.webmaker.org/de">Mozillas Thimble</a></li> </ul> </div></section> <section class="slide" id="minecraft"><div><h2>Minecraft</h2> <ul> <li>Entwickeln eines Mince-Craft-Mods</li> <li>z.B. <a href="https://github.com/Yanino/Minecraft-Wetter">Minecraft-Wetter</a></li> <li>siehe <a href="http://www.wired.com/2014/08/learntomod/">Wired: New Minecraft Mod Teaches You Code as You Play</a></li> </ul> </div></section> <section class="slide" id="verschlüsselung"><div><h2>Verschlüsselung</h2> <ul> <li>Vorstellung einfacher Verfahren (ROT13 o.ä.)</li> <li>Exemplarische Implementierung</li> <li>Kombinierbar mit Webentwicklung</li> </ul> </div></section> <section class="slide" id="mobile-anwendungen"><div><h2>Mobile Anwendungen</h2> <p><img src="AppInventor.png" alt="Doodle-App" class="right" width="250" /></p> <ul> <li>Visuelle Entwicklung mit <a href="http://appinventor.mit.edu/explore/">MIT App Inventor</a></li> <li>Beispiele <ul> <li>TalkToMe Text-to-Speech App – Eingabe eines Satzes, der dann vom Gerät vorgelesen wird.</li> <li>DigitalDoodle Drawing App – Foto knipsen und direkt darin zeichnen.</li> </ul> </li> <li>Nur auf Englisch verfügbar?</li> </ul> </div></section> <section class="slide" id="mobile-anwendungen-1"><div><h2>Mobile Anwendungen</h2> <p><img src="appmaker.png" alt="Mozilla Appmaker" class="right" /></p> <ul> <li>Visuelle Entwicklung mobiler Applikationen für den Browser mit <a href="https://webmaker.org/de/appmaker">Mozilla Appmaker</a></li> </ul> </div></section> <section class="slide" id="computerloses"><div><h2>Computerloses</h2> <ul> <li>Spiele wie das <a href="https://juliahivenyc.makes.org/thimble/MTgwOTQ0ODk2/web-mechanics-speed-dating">Web Mechanics Speed Dating</a></li> <li>Internet-Teilnahme-Kompetenz steigern – siehe <a href="https://webmaker.org/de/literacy">Web Literacy Map</a></li> <li>Programmieren für jüngere Kinder: <a href="http://drtechniko.com/2012/04/09/how-to-train-your-robot/">DrTechniko – How to train your robot</a> (… <a href="http://drtechniko.com/2014/02/04/how-to-train-your-robot-to-jump/">to jump</a>)</li> </ul> </div></section> <section class="slide" id="lizenzierung"><div><h2>Lizenzierung</h2> <p>Wir würden uns freuen, wenn die Ergebnisse unter freien Lizenzen veröffentlicht werden.</p> </div></section> <section class="slide" id="erstellen-von-materialien"><div><h2>Erstellen von Materialien</h2> <p><img src="templates.png" alt="Mozilla Appmaker" class="right" /></p> <ul> <li>Vorlagen von <a href="https://webmaker.org/de/make-your-own">Mozillas Webmaker</a> (<a href="https://github.com/mozilla/webmaker-kits">GitHub</a>) <ul> <li><a href="https://mozilla.github.io/webmaker-kits/kit.html">Teaching Kit</a></li> <li><a href="https://mozilla.github.io/webmaker-kits/activity.html">Activity Kit</a></li> <li><a href="https://mozilla.github.io/webmaker-kits/event.html">Event Kit</a></li> </ul> </li> <li><a href="https://github.com/codeclub/lesson_format">CodeClub Lesson formatter</a></li> </ul> </div></section> <section class="slide shout" id="gruppenfindung"><div><h2>Gruppenfindung</h2> </div></section> <section class="slide shout" id="inhaltliches"><div><h2>Inhaltliches</h2> </div></section> <section class="slide" id="ziel"><div><h2>Ziel</h2> <ul> <li>Eine angenehme Lernumgebung für alle Beteiligten zu schaffen.</li> <li>Zu vermitteln, dass Programmieren nicht gruselig oder eigenartig ist und Spaß machen kann.</li> <li>Möglichkeiten der Mitgestaltung und Beteiligung im Internet aufzuzeigen.<br /> <!-- - Das klassische Rollenbild von Programmierern zu erweitern. --></li> </ul> <footer> <ul> <li><q>Computational Thinking</q>, das Denken in formalen Systemen</li> <li>Die Fähigkeit Probleme zu betrachten, in kleinere Teile runter zu brechen und diese mit Hilfe von Computern zu lösen – Die Schönheit zu zeigen, die all dem inne ist</li> </ul> </footer> </div></section> <section class="slide" id="lernen"><div><h2>Lernen</h2> <p><img src="kindergarten_approach.png" alt="The kindergarten approach to learning" class="right" width="333" /></p> <p>Wir glauben daran, dass man am besten lernt, wenn man:</p> <ul> <li>etwas praktisch erfahren kann.</li> <li>erfahrungsorientiert und explorativ¹ arbeiten kann.</li> <li>in seiner eigenen Geschwindigkeit lernen kann.</li> </ul> <p class="note">¹ Beispielsweise erst eine Anweisung mehrmals schreiben und dann den Nutzen von Schleifen entdecken.</p> <p class="note right">Bild: <a href="http://web.media.mit.edu/~mres/papers/kindergarten-learning-approach.pdf">Mitchel Resnick</a></p> </div></section> <section class="slide" id="coachen--lehren"><div><h2>Coachen != Lehren</h2> <p>Wir versuchen, nicht wie vor einer Klasse zu stehen, sondern:</p> <ul> <li>Im Hintergrund.</li> <li>Da zu sein, wenn benötigt.</li> <li>Auf die jeweilige Person konzentrieren.</li> <li>Positiv zu motivieren. <small>(Gutes loben statt Schlechtes zu kritisieren.)</small></li> <li>Versuchen, den Spaß der Lernenden aufrecht zu erhalten.</li> </ul> </div></section> <section class="slide" id="zu-beginn-der-workshops"><div><h2>Zu Beginn der Workshops</h2> <ul> <li>Erzählt kurz etwas über euch. Streut auch triviale Kleinigkeiten ein.</li> <li>Warum mögt ihr Technik?</li> <li>Was können sie von dem Tag erwarten?</li> <li>Wie ist der Zeitplan? Wann sind Pausen? Wann gibt es Essen?</li> <li>Welche Materialien / Ressourcen werden benötigt und wo gibt es sie?</li> <li>Wo sind die Toiletten?</li> </ul> <footer>Triviale Kleinigkeiten: Lieblingseis o.ä.</footer> </div></section> <section class="slide" id="atmosphäre"><div><h2>Atmosphäre</h2> <ul> <li>Lächeln, Augenkontakt halten, höflich sein.</li> <li>Mit Namen ansprechen.</li> <li>Zugeben, wenn man etwas nicht weiß.</li> <li>Erklären, dass es ok ist, Fehler zu machen.</li> <li>Aufgeregtheit ist gut, Stress schlecht – justiert hier.</li> <li>Pausen machen, wenn Frustration steigt.</li> </ul> </div></section> <section class="slide" id="ermunterung"><div><h2>Ermunterung</h2> <ul> <li>Nehmt an, dass jeder null Ahnung aber unendlich viel Verstand hat.</li> <li>Verwendet normale Sprache statt Fachtermini.</li> <li>Versichert euch, dass verstanden wurde, was ihr gesagt habt.</li> <li>Andernfalls erklärt es erneut auf eine andere Weise.</li> <li>Ermutigt, herumzuspielen.</li> <li>Was auch immer sie machen ist schön.</li> </ul> </div></section> <section class="slide" id="ermunterung-1"><div><h2>Ermunterung</h2> <ul> <li>Akzeptiert nicht, dass jemand etwas wegen <em>$grund</em> nicht kann.</li> <li>Gratuliert zum Erreichten und lasst es euch vorstellen.</li> <li>Wenn jemand vom Pfad abkommt, aber Spaß hat, ermuntert, weiter zu machen.</li> <li>Fördert Zusammenarbeit.</li> <li>Fördert Teilen.</li> <li>Ermutigt, Ergebnisse auch vor anderen vorzustellen. Wenn nötig, mehrmals.</li> </ul> <footer> <ul> <li>IKEA-Prinzip – Starke Gefühle zu Selber-Geschaffenem</li> <li>Durch Vorzeigbares verstärkendes Feedback von Dritten</li> </ul> </footer> </div></section> <section class="slide" id="fragen"><div><h2>Fragen</h2> <ul> <li>Ermuntert zu fragen.</li> <li>Fragen sind immer gut, weil sie Ausdruck von Interesse sind.</li> <li>Schaut euch um, wer Hilfe gebrauchen könnte.</li> <li>Einige sind vielleicht zu schüchtern, um zu fragen.</li> <li>Fragt ab und zu, wie es so läuft und redet darüber, was sie machen.</li> <li>Statt <q>Irgendwelche Fragen?</q> versucht <q>Welche Fragen hast du?</q></li> </ul> <footer>Ok, wir wissen, dass es dumme Fragen gibt. Aber zu fragen heißt, Interesse zu haben; und das ist das Wichtigste, was wir haben.</footer> </div></section> <section class="slide" id="reaktionen-auf-fragen"><div><h2>Reaktionen auf Fragen</h2> <ul> <li><q>Schön, dass du fragst.</q>, <q>Interessante Frage!</q></li> <li><q>Hmm, ich bin mir nicht sicher; lass uns nachsehen.</q></li> <li>Fragt aber auch, was sie bisher versucht haben, um zu eigener Arbeit anzuregen.</li> <li>Bei Zweifeln: Schuld ist das Material, nicht der Lernende.</li> <li>Ihre Interpretationen der Materialien sind so gut wie unsere.</li> </ul> </div></section> <section class="slide" id="auswirkung"><div><h2>Auswirkung</h2> <ul> <li>Versucht wichtige Fragen aufzuschreiben, um sie nicht zu vergessen.</li> <li>Versucht die Materialien entsprechend anzupassen.</li> </ul> </div></section> <section class="slide" id="geschwindigkeit"><div><h2>Geschwindigkeit</h2> <ul> <li>Es geht um die Lernenden, nicht uns. Wir gehen in ihrem Tempo.</li> <li>Jeder lernt in seiner Geschwindigkeit. Das ist gut.</li> <li>Redet langsam.</li> <li>Wartet länger auf Fragen oder Antworten als es sich angenehm anfühlt. <small>(Zählt im Kopf bis 10.)</small></li> </ul> </div></section> <section class="slide" id="allgemeine-tipps"><div><h2>Allgemeine Tipps</h2> <ul> <li>Überlegt in der Planung nicht, was <em>ihr</em> machen werdet, sondern was <em>sie</em> machen werden.</li> <li>Lasst euch Dinge in ihren eigenen Worten erklären.</li> <li>Vermeidet geschlossene (<small>binäre</small>) Fragen, stellt offene.</li> <li>Entwurf vor Code</li> <li>Debugging-Techniken (<a href="http://en.wikipedia.org/wiki/Rubber_duck_debugging">Rubber duck</a> und <a href="http://en.wikipedia.org/wiki/Debugging#Techniques">andere</a>)</li> </ul> <footer> <ul> <li>Entwurf vor Code Die meisten Kinder wollen sofort loslegen, wenn sie eine neue Aufgabe bekommen. Und diesen Enthusiasmus in allen Ehren, ist es doch längerfristig sinnvoller, sich vorher mit Stift und Papier hinzusetzen, Ideen zu skizzieren und die Code-Struktur zu planen. Dadurch gibt es auf dem Weg weniger Frust.</li> <li>Debugging Dadurch Zwang, mehr über das Programm nachzudenken und dadurch weniger Fehler.</li> </ul> </footer> </div></section> <section class="slide" id="dinge-die-nicht-funktionieren"><div><h2>Dinge, die nicht funktionieren:</h2> <ul> <li><q>Unterbrich mich, wenn du etwas nicht verstehst.</q><br /> … weil sie vielleicht zu schüchtern sind, es zu tun.</li> <li><q>Hast du das verstanden?</q><br /> … weil es zu einfach ist, zuzustimmen.</li> </ul> </div></section> <section class="slide shout warning" id="donts"><div><h2>Don’ts</h2> </div></section> <section class="slide" id="wir-vermeiden-"><div><h2>Wir vermeiden …</h2> <ul> <li>Jede Art diskriminierenden Verhaltens. (Bis hin zu Dialekten u.ä.)</li> <li>Lachen oder Augenrollen bei Fragen.</li> <li>Spott über irgendetwas. (<small>Auch nicht PHP oder Windows.</small>)</li> <li>Werbung für Firmen o.ä.</li> <li>Debatten darüber, welche Sprachen, Methoden oder Technologien <q>besser</q> sind.</li> <li>Die Tastatur anzufassen.</li> </ul> </div></section> <section class="slide" id="die-tastatur-ist-tabu"><div><h2>Die Tastatur ist tabu!</h2> <ul> <li>Lernende schweifen ab, wenn jemand die Tastatur übernimmt.</li> <li>Wenn es doch einmal unausweichlich ist, fragt, ob es ok ist, selber zu tippen.</li> <li>Erklärt immer, was ihr tut.</li> </ul> </div></section> <section class="slide shout" id="programmieren-lehren"><div><h2>Programmieren lehren</h2> </div></section> <section class="slide" id="ziele"><div><h2>Ziele</h2> <ul> <li>Verstehen und prinzipielle Anwendung von: Abstraktion, Logik, Algorithmen, Datenrepräsentation</li> <li>Analyse von Problemen und Beschreibung in informationstechnischen Begriffen</li> <li>Verantwortung, Kompetenz, Kreativität und Vertrauen hinsichtlich Informationstechnologien aufzubauen</li> </ul> </div></section> <section class="slide" id="begriffe"><div><h2>Begriffe</h2> <ul> <li>Wie würdet ihr folgende Konzepte erklären?<br /><br /> <em>Algorithmus, Variable, Kommentar, Funktion, Bedingung, Schleife</em></li> <li>Was ist der Unterschied zwischen einem String und einem Integer?</li> </ul> </div></section> <section class="slide" id="technisches"><div><h2>Technisches</h2> <ul> <li>Debugging: Versucht Möglichkeiten zu bieten, zu jeder Zeit den Zustand des Systems sichtbar zu machen.</li> <li>Vermeidet <q>Magie</q>, Tricks (<small><code class="language-plaintext highlighter-rouge">a = +(a || b)</code></small>), Weglassen optionaler Parameter etc.</li> <li>Diagramme helfen. Malt.</li> </ul> </div></section> <section class="slide" id="anpassung"><div><h2>Anpassung</h2> <p>Reichert diese Präsentation um eure Gedanken und Erfahrungen an.</p> </div></section> <section class="slide shout" id="ende"><div><h2>Ende</h2> </div></section> <section class="slide" id="credits"><div><h2>Credits</h2> <p>Inhalt basierend auf:</p> <ul> <li><a href="http://opentechschool.github.io/slides/presentations/coaching/">OpenTechSchool Coaching Guide</a></li> <li><a href="http://curriculum.railsbridge.org/workshop/teacher_training">RailsBridge Teacher Training</a>.</li> <li><a href="https://www.axomic.com/blog/article/code-club-lessons-from-the-nerds-of-tomorrow">Code Club: Lessons from the Nerds of Tomorrow</a></li> <li><a href="https://www.gov.uk/government/publications/national-curriculum-in-england-computing-programmes-of-study/national-curriculum-in-england-computing-programmes-of-study">National curriculum in England: computing programmes of study</a></li> <li><a href="http://web.media.mit.edu/~mres/papers/kindergarten-learning-approach.pdf">Mitchel Resnick: All I Really Need to Know (About Creative Thinking) <br /> I Learned (By Studying How Children Learn) in Kindergarten</a></li> </ul> <p>Cover-Bild von der <a href="http://fontsinuse.com/uses/1447/lego-ad-campaign">Lego Group</a>.</p> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>