{"id":579,"date":"2021-04-23T20:37:50","date_gmt":"2021-04-23T20:37:50","guid":{"rendered":"https:\/\/gigers.com\/blog\/?p=579"},"modified":"2024-06-24T17:33:33","modified_gmt":"2024-06-24T17:33:33","slug":"open-education-day-zahlen-daten-und-medien","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/open-education-day-zahlen-daten-und-medien\/","title":{"rendered":"Open Education Day: Zahlen, Daten und Medien"},"content":{"rendered":"<p>Dieser Beitrag ist ein Entwurf zum Workshop &#8222;Zahlen, Daten und Medien&#8220; am Open Education Day vom 24. April 2021.\u00a0 Er dient als Arbeitsgrundlage und Dokumentation und wird nach der Durchf\u00fchrung noch einmal \u00fcberarbeitet.<\/p>\n<h2>Ausschreibung des Workshops<\/h2>\n<p>Mit Hilfe der blockbasierten Programmierumgebung Snap! (<a href=\"https:\/\/snap.berkeley.edu\" target=\"_blank\" rel=\"noopener\">https:\/\/snap.berkeley.edu<\/a>) lernen die Teilnehmenden M\u00f6glichkeiten kennen, wie informatische Kenntnisse in den Bereichen Zahlen, Daten (Visualisierungen) und Medien (Musik, Grafik und Video) mit Lernenden der Sekundarstufe I auf eine motivierende Weise umgesetzt werden k\u00f6nnen (siehe auch <a href=\"https:\/\/gigers.com\/blog\/?s=snap\" target=\"_blank\" rel=\"noopener\">https:\/\/gigers.com\/blog\/?s=snap<\/a>). Die vorgestellten Beispiele k\u00f6nnen von den Teilnehmenden ausprobiert und erweitert werden, dabei sollen theoretische Kenntnisse, praktische Anwendung und kreative Umsetzung verkn\u00fcpft werden.<\/p>\n<p>Snap! ist eine Programmiersprache, welche nach dem Prinzip &#8222;low floor &#8211; high ceiling&#8220; entwickelt wurde, damit erm\u00f6glicht sie einerseits einen leichten Einstieg, erlaubt aber auch die Umsetzung fortgeschrittener Programmiertechniken. In den USA wird Snap! u.a. im Leistungskurs &#8222;The Beauty and Joy of Computing&#8220; (<a href=\"https:\/\/bjc.edc.org\" target=\"_blank\" rel=\"noopener\">https:\/\/bjc.edc.org<\/a>) eingesetzt und mit &#8222;Informatik mit Snap!&#8220; (<a href=\"http:\/\/ddi-mod.uni-goettingen.de\/InformatikMitSnap.pdf\" target=\"_blank\" rel=\"noopener\">http:\/\/ddi-mod.uni-goettingen.de\/InformatikMitSnap.pdf<\/a>) existiert auch ein deutsches Lehrmittel f\u00fcr die Hochschulstufe.<\/p>\n<h2>Planung f\u00fcr den Workshop<\/h2>\n<p>Geplant ist eine Aufteilung des Workshops in drei Abschnitte:<\/p>\n<ol>\n<li>Zahlen und Daten<br \/>\nAm Beispiel eines Datensatzes wird gezeigt, wie Informationen in Snap! visualisiert werden k\u00f6nnen. Wenn m\u00f6glich werden noch weitere Beispiele gezeigt.<\/li>\n<li>T\u00f6ne erzeugen und Ger\u00e4usche visualisieren<br \/>\nAus ein paar Zahlen entstehen T\u00f6ne und \u00fcber das Mikrofon werden Ger\u00e4usche visualisiert.<\/li>\n<li>Grundlagen der Bildbearbeitung<br \/>\nBilder sagen mehr als tausend Worte und bestehen meist aus noch mehr Zahlen. Diese werden mit den in den ersten beiden Teilen erarbeiteten Techniken bearbeitet.<\/li>\n<\/ol>\n<p>Wie viel davon in den 90 Minuten Workshop umgesetzt werden kann, wird sich zeigen. Alle Beispiele werden aber in den folgenden Abschnitten detailliert dokumentiert.<\/p>\n<h2>Teil 1: Zahlen und Daten<\/h2>\n<p>Am Beispiel eines Datensatzes zu <a href=\"https:\/\/corgis-edu.github.io\/corgis\/csv\/skyscrapers\/\" target=\"_blank\" rel=\"noopener\">Wolkenkratzern<\/a> (via Corgis-Edu) wird gezeigt, wie man mit vorhandenen und selbstgeschriebenen Bl\u00f6cken (stehen zu Verf\u00fcgung) einen Blick in gr\u00f6ssere Datens\u00e4tze werfen kann.<\/p>\n<p>Link: <a href=\"https:\/\/snap.berkeley.edu\/snap\/snap.html#present:Username=mattgig&amp;ProjectName=Vorlage%20Wolkenkratzer&amp;editMode&amp;noRun\" target=\"_blank\" rel=\"noopener\">Vorlage Wolkenkratzer<\/a><\/p>\n<p>Mit einigen Bl\u00f6cken wird der Datensatz darauf untersucht, aus welchen Materialien die Wolkenkratzer gebaut wurden und wie h\u00e4ufig die entsprechenden Materialien zum Einsatz kamen. Dazu werden folgende Bl\u00f6cke verwendet:<\/p>\n<figure id=\"attachment_583\" aria-describedby=\"caption-attachment-583\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-583\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/analyze_skyscraper_data-1024x583.png\" alt=\"\" width=\"525\" height=\"299\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/analyze_skyscraper_data-1024x583.png 1024w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/analyze_skyscraper_data-300x171.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/analyze_skyscraper_data-768x437.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/analyze_skyscraper_data.png 1422w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-583\" class=\"wp-caption-text\">Mit diesen Befehlen k\u00f6nnen die Wolkenkratzerdaten auf die Baumaterialien der Geb\u00e4ude hin analysiert werden.<\/figcaption><\/figure>\n<p>Bei den grauen Bl\u00f6cken handelt es sich um zus\u00e4tzliche Bl\u00f6cke, die orangen Bl\u00f6cke stehen nach dem Import der Bibliotheken &#8222;Frequency Distribution Analysis&#8220; und &#8222;List utilities&#8220; zu Verf\u00fcgung.<\/p>\n<p>Im Workshop dient diese erste \u00dcbung auch dazu, mit ersten Merkmalen der Snap!-Entwicklungsumgebung vertraut zu werden. Mehr dazu ist im Beitrag &#8222;<a href=\"https:\/\/gigers.com\/blog\/?p=571\" target=\"_blank\" rel=\"noopener\">Interaktive Erkl\u00e4rungen mit H5P Image Hotspots<\/a>&#8220; zu erfahren.<\/p>\n<p>Im n\u00e4chsten Schritt geht es darum, die Wolkenkratzer auf einer Weltkarte zu visualisieren. Die Programmierung dieses Beispiels erfolgt in den folgenden Schritten:<\/p>\n<ol>\n<li>Weltkarte als Hintergrund festlegen;<\/li>\n<li>Den eigenen Standort anzeigen;<\/li>\n<li>Wolkenkratzer auf der Weltkarte eintragen;<\/li>\n<li>Einzelne Wolkenkratzer gestalten.<\/li>\n<\/ol>\n<p>Im Gegensatz zu den im Workshop durchgef\u00fchrten &#8222;Live Coding&#8220; werden hier bei der schriftlichen Dokumentation schon die fertigen Bl\u00f6cke dargestellt. Auf einen schrittweisen Aufbau der einzelnen Befehlsbl\u00f6cke wird hier also verzichtet.<\/p>\n<h3>Weltkarte als Hintergrund festlegen<\/h3>\n<p>Die Befehle zur Darstellung der Weltkarte werden aus der Bibliothek &#8222;World Map&#8220; importiert. Anschliessend kann die Weltkarte auf der B\u00fchne dargestellt werden.<\/p>\n<figure id=\"attachment_585\" aria-describedby=\"caption-attachment-585\" style=\"width: 654px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-585\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/script_world_map.png\" alt=\"\" width=\"654\" height=\"378\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/script_world_map.png 654w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/script_world_map-300x173.png 300w\" sizes=\"auto, (max-width: 654px) 100vw, 654px\" \/><figcaption id=\"caption-attachment-585\" class=\"wp-caption-text\">Um eine Karte darzustellen, m\u00fcssen die entsprechenden Parameter gesetzt werden.<\/figcaption><\/figure>\n<p>Folgende Parameter k\u00f6nnen f\u00fcr die Karte gesetzt werden:<\/p>\n<ul>\n<li>style: bestimmt das Aussehen der Karte;<\/li>\n<li>zoom: bestimmt, wie gross der Ausschnitt der gezeigten Karte ist, wobei bei 0 die ganze Welt und bei 15 die Nachbarschaft gezeigt werden;<\/li>\n<li>set to: bestimmt das Zentrum der Karte (die Voreinstellung 0, 0 ist meistens nicht optimal)<\/li>\n<\/ul>\n<p>Anschliessend muss sich die B\u00fchne mit &#8222;switch to costume&#8220; die entsprechende Karte noch \u00fcberwerfen.<\/p>\n<p>Das Setzen dieser Bl\u00f6cke belohnt einem mit einem Hintergrund, der etwa so aussieht:<\/p>\n<figure id=\"attachment_587\" aria-describedby=\"caption-attachment-587\" style=\"width: 699px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-587\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/world_map.png\" alt=\"\" width=\"699\" height=\"525\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/world_map.png 699w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/world_map-300x225.png 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><figcaption id=\"caption-attachment-587\" class=\"wp-caption-text\">Das Beispiel zeigt den Stil &#8222;watercolor&#8220;.<\/figcaption><\/figure>\n<p>Mehr zu den M\u00f6glichkeiten der Bibliothek &#8222;World Map&#8220; ist im Beitrag &#8222;<a href=\"https:\/\/gigers.com\/blog\/?p=197\" target=\"_blank\" rel=\"noopener\">Landkarten mit Snap!<\/a>&#8220; beschrieben.<\/p>\n<p>Damit das Programm letztlich funktioniert, muss sp\u00e4ter noch folgender Block hinzugef\u00fcgt werden:<\/p>\n<figure id=\"attachment_617\" aria-describedby=\"caption-attachment-617\" style=\"width: 496px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-617\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/corrected_block.png\" alt=\"\" width=\"496\" height=\"210\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/corrected_block.png 496w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/corrected_block-300x127.png 300w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><figcaption id=\"caption-attachment-617\" class=\"wp-caption-text\">Diese Befehle sorgen daf\u00fcr, dass das Aussehen der Karte von einem anderen Objekt aus gesteuert werden kann.<\/figcaption><\/figure>\n<p>Damit kann die Karte auf den Befehl von anderen Objekten hin angepasst werden, wobei hier das Werkzeug der Mitteilungen verwendet wird. Bei komplexeren Programmen k\u00f6nnen damit Abl\u00e4ufe einfach gesteuert werden.<\/p>\n<p>Das ist aber erst m\u00f6glich, nachdem der n\u00e4chste Teil des Programms geschrieben wurde.<\/p>\n<h3>Den eigenen Standort anzeigen<\/h3>\n<p>Damit der eigene Standort auf der Karte angezeigt werden m\u00fcssen erst einmal die entsprechenden Koordinaten (L\u00e4nge und Breite) bekannt sein. Am schnellsten findet man diese mit Google Maps, indem man auf der Karte am gew\u00fcnschten Ort einen Rechtsklick mit der Maus ausf\u00fchrt. Dabei muss man allerdings beachten, dass die Reihenfolge bei Google Maps und Snap! nicht gleich ist.<\/p>\n<figure id=\"attachment_589\" aria-describedby=\"caption-attachment-589\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-589\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/place_on_map-1024x698.png\" alt=\"\" width=\"525\" height=\"358\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/place_on_map-1024x698.png 1024w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/place_on_map-300x205.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/place_on_map-768x524.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/place_on_map.png 1104w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-589\" class=\"wp-caption-text\">Den eigenen Standort, kann man mit den Bl\u00f6cken &#8222;x of longitude&#8220; und &#8222;y of latitude&#8220; auf der Karte eintragen.<\/figcaption><\/figure>\n<p>Die oben abgebildeten Bl\u00f6cke werden nicht mehr im B\u00fchnenbereich ausgef\u00fchrt, sondern in einem eigenen Objekt.<\/p>\n<p>Dabei werden folgende Befehle abgearbeitet:<\/p>\n<ol>\n<li>den Bildschirm l\u00f6schen;<\/li>\n<li>die Stiftdicke auf 30 setzen;<\/li>\n<li>zur gew\u00fcnschten Koordinate gehen;<\/li>\n<li>den Stift auf das Papier setzen;<\/li>\n<li>einen Kreis zeichnen;<\/li>\n<li>den Stift von Papier abheben.<\/li>\n<\/ol>\n<p>Die unteren vier Bl\u00f6cke dienen dazu den Ausschnitt der Karte anzupassen, denn wenn man in der Schweiz lebt, ist der Standort auf einer Weltkarte nicht besonders aussagekr\u00e4ftig. Je nach Genauigkeit der eingegebenen Koordinaten kann man den eigenen Standort so auch metergenau auf der Karte eintragen lassen und die n\u00e4here Nachbarschaft virtuell bewundern.<\/p>\n<h3>Wolkenkratzer auf der Karte eintragen<\/h3>\n<p>W\u00e4hrend bei Menschen bei mehrfacher Ausf\u00fchrung der gleichen T\u00e4tigkeit schnell einmal Langeweile auftauchen kann, sind solche repetitive Aufgaben das Spezialgebiet von Computern. Und deshalb gilt hier: Was einmal gelungen ist, kann nun viele Male ausgef\u00fchrt werden.<\/p>\n<figure id=\"attachment_591\" aria-describedby=\"caption-attachment-591\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-591\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/map_skyscrapers-1024x706.png\" alt=\"\" width=\"525\" height=\"362\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/map_skyscrapers-1024x706.png 1024w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/map_skyscrapers-300x207.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/map_skyscrapers-768x530.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/map_skyscrapers.png 1296w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-591\" class=\"wp-caption-text\">F\u00fcr die Darstellung des Wolkenkratzers werden im Wesentlichen die gleichen Befehle ben\u00f6tigt, wie bei der Darstellung eines einzelnen Standorts<\/figcaption><\/figure>\n<p>Im Wesentlichen werden hier die gleichen Befehle wie bei der Eintragung des Einzelstandorts verwendet, nur wird jetzt mit einer &#8222;forEach&#8220;-Schleife durch eine Liste iteriert. Die etwas komplexeren Befehle ergeben sich aus der von den Eigenschaften der einzelnen Objekte abh\u00e4ngigen unterschiedlichen Darstellung der Wolkenkratzer auf der Karte.<\/p>\n<h3>Einzelne Wolkenkratzer gestalten<\/h3>\n<p>Um insbesondere die Farbgebung noch etwas besser zu verstehen, lohnt es sich auch hier, zuerst wieder einige Experimente durchzuf\u00fchren. Die folgenden Bl\u00f6cke leisten genau dies:<\/p>\n<figure id=\"attachment_592\" aria-describedby=\"caption-attachment-592\" style=\"width: 588px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-592\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/define_colours.png\" alt=\"\" width=\"588\" height=\"567\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/define_colours.png 588w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/define_colours-300x289.png 300w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><figcaption id=\"caption-attachment-592\" class=\"wp-caption-text\">Mit diesen Bl\u00f6cken k\u00f6nnen unterschiedliche Farbt\u00f6ne erzeugt werden.<\/figcaption><\/figure>\n<p>Um die Farbe anzupassen, kommt eine Variante des <a href=\"https:\/\/de.wikipedia.org\/wiki\/HSV-Farbraum\" target=\"_blank\" rel=\"noopener\">HSV-Farbmodels<\/a> zum Einsatz, wobei mit dem H-Wert (hue) der Farbwert selbst beeinflusst wird. In Snap! wird daf\u00fcr ein Bereich von 0 bis 100 verwendet.<\/p>\n<figure id=\"attachment_594\" aria-describedby=\"caption-attachment-594\" style=\"width: 744px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-594\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hsb_farbraum.png\" alt=\"\" width=\"744\" height=\"304\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hsb_farbraum.png 744w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hsb_farbraum-300x123.png 300w\" sizes=\"auto, (max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><figcaption id=\"caption-attachment-594\" class=\"wp-caption-text\">Mit den entsprechenden Parametern k\u00f6nnen Regenbogenfarben erzeugt werden.<\/figcaption><\/figure>\n<p>Hat man die Koordinaten f\u00fcr die Karten entsprechend eingestellt, kann man sich nur beispielsweise die Wolkenkratzer in New York anzeigen lassen.<\/p>\n<figure id=\"attachment_595\" aria-describedby=\"caption-attachment-595\" style=\"width: 870px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-595\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/skyscrapers_in_NY.png\" alt=\"\" width=\"870\" height=\"654\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/skyscrapers_in_NY.png 870w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/skyscrapers_in_NY-300x226.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/skyscrapers_in_NY-768x577.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-595\" class=\"wp-caption-text\">Die im Datensatz enthaltenen Wolkenkratzer werden gem\u00e4ss den vorgenommenen Einstellungen angezeigt.<\/figcaption><\/figure>\n<h3>Weitere Beispiele f\u00fcr Visualisierungen<\/h3>\n<p>Ohne weiter auf die Programmierung einzugehen, sollen hier noch die Resultate weiterer Visualisierungen gezeigt werden, die mit Snap? erzeugt wurden.\u00a0Siehe dazu auch &#8222;<a href=\"https:\/\/gigers.com\/blog\/?p=187\" target=\"_blank\" rel=\"noopener\">H\u00f6henmodell mit Snap<\/a>&#8222;.<\/p>\n<figure id=\"attachment_596\" aria-describedby=\"caption-attachment-596\" style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-596\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/Geburten_und_Todesfaelle.png\" alt=\"\" width=\"960\" height=\"720\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/Geburten_und_Todesfaelle.png 960w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/Geburten_und_Todesfaelle-300x225.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/Geburten_und_Todesfaelle-768x576.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-596\" class=\"wp-caption-text\">Die Grafik zeigt an, wie viele Personen in einem bestimmten Zeitraum jeweils geboren wurden oder gestorben sind.<\/figcaption><\/figure>\n<p>Link: <a href=\"https:\/\/snap.berkeley.edu\/snap\/snap.html#present:Username=mattgig&amp;ProjectName=population_graph&amp;editMode&amp;noRun\" target=\"_blank\" rel=\"noopener\">Births and Deaths in Switzerland<\/a><\/p>\n<figure id=\"attachment_597\" aria-describedby=\"caption-attachment-597\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-597\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/CO2_Konzentrationen-1024x576.png\" alt=\"\" width=\"525\" height=\"295\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/CO2_Konzentrationen-1024x576.png 1024w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/CO2_Konzentrationen-300x169.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/CO2_Konzentrationen-768x432.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/CO2_Konzentrationen-1536x864.png 1536w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/CO2_Konzentrationen.png 1600w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-597\" class=\"wp-caption-text\">Die CO2-Konzentration in der Atmosph\u00e4re wird \u00fcber die letzten rund 800&#8217;000 Jahre aufgetragen. Der rasante Anstieg in den letzten Jahren ist am rechten Rand der Grafik klar zu erkennen.<\/figcaption><\/figure>\n<p>Link: <a href=\"https:\/\/snap.berkeley.edu\/snap\/snap.html#present:Username=mattgig&amp;ProjectName=CO2%20-%20long%20time%20-%20improved%202&amp;editMode&amp;noRun\" target=\"_blank\" rel=\"noopener\">CO2-Konzentrationen<\/a><\/p>\n<h3>Weitere Datens\u00e4tze<\/h3>\n<p>Wenn man selbst mit weiteren Datens\u00e4tzen experimentieren m\u00f6chte, sind folgende Webseiten empfehlenswert:<\/p>\n<ul>\n<li><a href=\"https:\/\/corgis-edu.github.io\/corgis\/csv\/\" target=\"_blank\" rel=\"noopener\">https:\/\/corgis-edu.github.io\/corgis\/csv\/<\/a> (gut f\u00fcr den Unterricht geeignet)<\/li>\n<li><a href=\"https:\/\/opendata.swiss\/de\/\" target=\"_blank\" rel=\"noopener\">https:\/\/opendata.swiss\/de\/<\/a> (Daten aus der Schweiz)<\/li>\n<li><a href=\"https:\/\/github.com\/awesomedata\/awesome-public-datasets\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/awesomedata\/awesome-public-datasets<\/a> (grosse Sammlung von Datens\u00e4tzen)<\/li>\n<\/ul>\n<p>Es kann sich aber auch lohnen, zusammen mit den Lernenden selbst Daten zu erheben, z.B. zum Schulweg, Medienkonsum etc.<\/p>\n<h2>Musikalische Experimente mit Snap!<\/h2>\n<p>In diesem Teil des Workshops wird zuerst gezeigt, wie aus Zahlen T\u00f6ne entstehen k\u00f6nnen und dann soll das Mikrofon zum Einsatz kommen, um Ger\u00e4usche zu visualisieren.<\/p>\n<h3>Von der Zahl zum Ton<\/h3>\n<p>In Snap! werden Musikdateien als Listen mit Zahlen zwischen -1 und 1 repr\u00e4sentiert, wobei pro Sekunde in der Regel mehr als 40&#8217;000 Zahlen ben\u00f6tigt werden. Im Gegensatz zu den im Teil &#8222;Zahlen und Daten&#8220; verwendeten Daten des Workshops, sind die Datens\u00e4tze nun zwar einfacher strukturiert, daf\u00fcr aber wesentlich gr\u00f6sser.<\/p>\n<p>In einem ersten Schritt soll untersucht werden, was passiert, wenn einfach gen\u00fcgend viele Zufallszahlen erzeugt und diese dann abgespielt werden.<\/p>\n<figure id=\"attachment_598\" aria-describedby=\"caption-attachment-598\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-598\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound01.png\" alt=\"\" width=\"928\" height=\"126\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound01.png 928w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound01-300x41.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound01-768x104.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-598\" class=\"wp-caption-text\">Da die Zahlen v\u00f6llig zuf\u00e4llig erzeugt werden, entsteht ein sogenanntes Weisses Rauschen.<\/figcaption><\/figure>\n<p>Das entstehende Weisse Rauschen unterscheidet sich von einem Ton dadurch, dass keinerlei Ordnung zu erkennen ist. Visualisieren l\u00e4sst sich dies mit einem Block aus der Bibliothek &#8222;Audio Comp&#8220;.<\/p>\n<figure id=\"attachment_599\" aria-describedby=\"caption-attachment-599\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-599\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound02.png\" alt=\"\" width=\"928\" height=\"98\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound02.png 928w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound02-300x32.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound02-768x81.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-599\" class=\"wp-caption-text\">Der Block bietet eine einfache M\u00f6glichkeit, einen Blick in Audiodateien zu werfen.<\/figcaption><\/figure>\n<p>Ordnung kann man auch als Wiederholung von bestimmten Mustern verstehen. Aus der Unordnung entsteht also Ordnung, indem wir einen kleinen Teil der Unordnung mehrfach wiederholen.<\/p>\n<p>Die folgenden Befehle zeigen die Schritte auf, die zum Ziel f\u00fchren.<\/p>\n<figure id=\"attachment_600\" aria-describedby=\"caption-attachment-600\" style=\"width: 906px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-600\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound03.png\" alt=\"\" width=\"906\" height=\"910\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound03.png 906w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound03-300x300.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound03-150x150.png 150w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound03-768x771.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound03-100x100.png 100w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-600\" class=\"wp-caption-text\">Mit einer Variablen und wenigen Befehlen bringt man durch Wiederholung Ordnung in das Chaos. Diese Ordnung ist sowohl h\u00f6r- als auch sichtbar.<\/figcaption><\/figure>\n<p>Der Ablauf wird in den oben gezeigten Bl\u00f6cken wieder verdichtet dargestellt. Im Wesentlichen wird aber einfach ein Zahlenblock von 441 Zahlen 100-mal wiederholt. Die Bl\u00f6cke &#8222;columns of&#8220; und &#8222;flatten of&#8220; werden nur ben\u00f6tigt, damit Snap! jeweils eine Liste im erwarteten Format vorfindet.<\/p>\n<p>Nachdem es gelungen ist, einen \u00e4usserst reichen Ton zu generieren, kann man sich noch Gedanken dar\u00fcber machen, wie die Tonh\u00f6he und Tondauer angepasst werden k\u00f6nnen. Die Tondauer wird einfach durch die Anzahl aller Zahlen bestimmt und diese wiederum ist abh\u00e4ngig von der L\u00e4nge des &#8222;Chaos&#8220; und der Anzahl der Repetitionen. Wenn also die Zahl der Repetitionen vergr\u00f6ssert oder verk\u00fcrzt wird, ver\u00e4ndert sich auch die Tondauer.<\/p>\n<p>F\u00fcr die Tonh\u00f6he ist die Zahl der Repetitionen innerhalb eines Zeitintervals (beispielsweise in Hertz gemessen) ausschlaggebend und diese wird durch die L\u00e4nge des &#8222;Chaos&#8220; bestimmt.<\/p>\n<p>Wenn also in der &#8222;sound&#8220;-Variable nur wenige Zahlen gespeichert werden, dann f\u00fchrt dies innerhalb einer Sekunde zu vielen Wiederholungen und damit zu einer grossen Frequenz und einem hohen Ton.<\/p>\n<figure id=\"attachment_601\" aria-describedby=\"caption-attachment-601\" style=\"width: 938px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-601\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound04.png\" alt=\"\" width=\"938\" height=\"536\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound04.png 938w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound04-300x171.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OEDsound04-768x439.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-601\" class=\"wp-caption-text\">Die Tonh\u00f6he und -dauer kann mittels grundlegender Arithmetik gesteuert werden.<\/figcaption><\/figure>\n<p>Damit ist es nun m\u00f6glich, T\u00f6ne beliebiger L\u00e4nge und Frequenz zu erzeugen. Allerdings ist die Nutzung noch nicht besonders komfortabel. In einem n\u00e4chsten Schritt m\u00fcsste die Schnittstelle f\u00fcr die Benutzer durch Abstraktion vereinfacht werden. Aus Zeitgr\u00fcnden wird darauf im Workshop aber verzichtet, denn nun sollen mit dem Mikrofon gemessene Ger\u00e4usche visualisiert werden.<\/p>\n<h3>Ger\u00e4usche Visualisieren<\/h3>\n<p>Damit die Aufnahme mit einem Mikrofon in Snap! gelingt, muss die Aufnahme \u00fcber die Webseite im Browser erlaubt werden. Da die entsprechenden Schritte sich von Browser zu Browser unterscheiden, sucht man bei Problemen am besten mit einer Suchmaschine nach einer entsprechenden Anleitung. Dabei helfen die Begriffe &#8222;Mikrofon&#8220;, &#8222;Browser&#8220; und &#8222;erlauben&#8220;, &#8222;zulassen&#8220; oder &#8222;freigeben&#8220;.<\/p>\n<p>Ob das Mikrofon in Snap! wie gew\u00fcnscht funktioniert, kann man mit folgendem kleinen Programm \u00fcberpr\u00fcfen:<\/p>\n<figure id=\"attachment_602\" aria-describedby=\"caption-attachment-602\" style=\"width: 348px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-602\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme01.png\" alt=\"\" width=\"348\" height=\"190\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme01.png 348w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme01-300x164.png 300w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><figcaption id=\"caption-attachment-602\" class=\"wp-caption-text\">Dieses Programm \u00fcberpr\u00fcft laufend das Eingangssignal des Mikrofons.<\/figcaption><\/figure>\n<p>Der &#8222;microphone&#8220;-Block kann ganz unterschiedliche Informationen zur\u00fcckliefern. Damit ist es beispielweise m\u00f6glich, mit wenigen Befehlen ein Spektrum zu erzeugen, wobei hier wieder das fertige Programm abgebildet wird.<\/p>\n<figure id=\"attachment_603\" aria-describedby=\"caption-attachment-603\" style=\"width: 948px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-603\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme02.png\" alt=\"\" width=\"948\" height=\"396\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme02.png 948w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme02-300x125.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme02-768x321.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-603\" class=\"wp-caption-text\">In Snap! lassen sich mit wenigen Befehlen ein Audiospektrum erzeugen.<\/figcaption><\/figure>\n<p>Dieses so programmierte Spektrum kann nun benutzt werden, um herauszufinden, wie der Klang verschiedener Instrumente oder aber die Vokalf\u00e4rbung bei der menschlichen Stimme zustande kommt. Bei den sichtbar werdenden Spitzen im rechten Bereich des Spektrums handelt es sich um Obert\u00f6ne, die verantwortlich f\u00fcr die Klangfarbe sind.<\/p>\n<figure id=\"attachment_604\" aria-describedby=\"caption-attachment-604\" style=\"width: 464px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-604\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme03.png\" alt=\"\" width=\"464\" height=\"348\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme03.png 464w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/aufnahme03-300x225.png 300w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><figcaption id=\"caption-attachment-604\" class=\"wp-caption-text\">Das Spektrum veranschaulicht den Klang einer nasalen menschlichen Stimme.<\/figcaption><\/figure>\n<p>Das gleiche Ph\u00e4nomen konnte man schon aus den mithilfe von Zufallszahlen generierten T\u00f6nen erleben, auch diese verdanken ihre Klangfarbe dem Obertonreichtum.<\/p>\n<h2>Sonagramm<\/h2>\n<p>Das Spektrum zeigt immer nur eine Momentaufnahme. Wenn man die Daten auch \u00fcber einen l\u00e4ngeren Zeitraum aufzeichnen m\u00f6chte, eignet sich daf\u00fcr das Sonagramm. Dort werden die Lautst\u00e4rken der einzelnen Frequenzen nicht mehr als Balken dargestellt, sondern in Farbwerte umgesetzt.<\/p>\n<figure id=\"attachment_608\" aria-describedby=\"caption-attachment-608\" style=\"width: 726px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-608\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OED_sona01.png\" alt=\"\" width=\"726\" height=\"570\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OED_sona01.png 726w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OED_sona01-300x236.png 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><figcaption id=\"caption-attachment-608\" class=\"wp-caption-text\">Das Programm kodiert die Schallintensit\u00e4t in den verschiedenen Frequenzbereichen farblich.<\/figcaption><\/figure>\n<figure id=\"attachment_609\" aria-describedby=\"caption-attachment-609\" style=\"width: 571px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-609\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/spektrum_farbe.png\" alt=\"\" width=\"571\" height=\"58\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/spektrum_farbe.png 571w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/spektrum_farbe-300x30.png 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><figcaption id=\"caption-attachment-609\" class=\"wp-caption-text\">Hohe Schallwerte werden durch hellere Farben dargestellt.<\/figcaption><\/figure>\n<p>Solche Farbstreifen kann man nun um 90\u00b0 drehen, schmaler gestalten und nacheinander aufzeichnen. Dazu muss das bisher bestehende Programm umgeschrieben werden.<\/p>\n<figure id=\"attachment_611\" aria-describedby=\"caption-attachment-611\" style=\"width: 854px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-611\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OED_sona02.png\" alt=\"\" width=\"854\" height=\"642\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OED_sona02.png 854w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OED_sona02-300x226.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/OED_sona02-768x577.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-611\" class=\"wp-caption-text\">Im Programm werden die Signale des Mikrofons f\u00fcr die Farbkan\u00e4le mit unterschiedlichen Werten multipliziert.<\/figcaption><\/figure>\n<p>Da der &#8222;microphone&#8220;-Block jeweils 512 Werte liefert, lohnt es sich, die Ausgabegr\u00f6sse der B\u00fchne noch anzupassen. Dies funktioniert \u00fcber die die Einstellungen der Snap!-Umgebung.<\/p>\n<figure id=\"attachment_610\" aria-describedby=\"caption-attachment-610\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-610\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/sonagramm-1024x1024.png\" alt=\"\" width=\"525\" height=\"525\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/sonagramm.png 1024w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/sonagramm-300x300.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/sonagramm-150x150.png 150w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/sonagramm-768x768.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/sonagramm-100x100.png 100w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-610\" class=\"wp-caption-text\">Das Sonagramm bildet das akustische Geschehen \u00fcber einen bestimmten Zeitraum ab.<\/figcaption><\/figure>\n<h2>Grundlagen der Bildbearbeitung<\/h2>\n<p>Im dritten Teil des Workshops geht es um die Grundlagen der Bildbearbeitung. Bei hilft der Umstand, dass auch Grafiken in Snap! nur aus Zahlen bestehen. F\u00fcr die folgenden Schritte kann entweder ein eigenes Bild verwendet werden, welches man einfach auf die Oberfl\u00e4che zieht oder man steigt \u00fcber die zu Verf\u00fcgung gestellte Datei ein.<\/p>\n<p>Link: <a href=\"https:\/\/snap.berkeley.edu\/snap\/snap.html#present:Username=mattgig&amp;ProjectName=OED%202021%20Bildbearbeitung&amp;editMode&amp;noRun\" target=\"_blank\" rel=\"noopener\">Bildbearbeitung<\/a> (enth\u00e4lt nur ein Bild)<\/p>\n<h3>Fotofilter programmieren<\/h3>\n<p>Snap! verf\u00fcgt mit den Hyperblocks \u00fcber ein sehr m\u00e4chtiges Werkzeug, um grosse Datenmengen effizient zu bearbeiten. Hyperblocks erlauben es n\u00e4mlich, eine arithmetische Funktion \u00fcber alle Elemente einer Liste auszuf\u00fchren, ohne dass daf\u00fcr erste eine Schleife programmiert werden muss.<\/p>\n<figure id=\"attachment_613\" aria-describedby=\"caption-attachment-613\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-613\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder01-701x1024.png\" alt=\"\" width=\"525\" height=\"767\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder01-701x1024.png 701w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder01-205x300.png 205w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder01-768x1123.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder01-1051x1536.png 1051w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder01-1401x2048.png 1401w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder01.png 1449w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-613\" class=\"wp-caption-text\">Die einzelnen Pixel jedes Farbkanals k\u00f6nnen mit vorhandenen Snap!-Befehlen schnell bearbeitet werden.<\/figcaption><\/figure>\n<p>Mit den Hyperblocks und dem schon von den Audiodateien bekannten map-Block k\u00f6nnen bereits verschiedene Grafikfilter programmiert werden.<\/p>\n<h3>Den Zufall einbeziehen<\/h3>\n<p>Im letzten Teil zur Grafikbearbeitung wird ein Wechsel von Berechnungen hin zur Arbeit mit dem Zufall vollzogen. Gleichzeitig erfolgt ein Wechsel von der Zahlen- auf die Bildebene. Damit wird gezeigt, dass bei Snap! unterschiedliche Zug\u00e4nge zu einem Thema m\u00f6glich sind.<\/p>\n<p>Als Grundlage dient wieder das Katzenbild. Dieses soll in ein impressionistisches Gem\u00e4lde umgestaltet werden, indem an zuf\u00e4lligen Orten im Bild der Farbwert ausgelesen und dann an der gleichen Stelle ein Farbklecks gemalt wird.<\/p>\n<p>Auch hier wird wieder die Endfassung gezeigt, welche im Workshop schrittweise mit verschiedenen Varianten aufgebaut wird.<\/p>\n<figure id=\"attachment_614\" aria-describedby=\"caption-attachment-614\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-614\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder02-1024x732.png\" alt=\"\" width=\"525\" height=\"375\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder02-1024x732.png 1024w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder02-300x214.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder02-768x549.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/bilder02.png 1398w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-614\" class=\"wp-caption-text\">Das Programm zaubert aus einem Foto ein Kunstwerk mit interessanten Effekten.<\/figcaption><\/figure>\n<p>F\u00fcr weitere Beispiele und Details der Programmierung siehe auch &#8222;<a href=\"https:\/\/gigers.com\/blog\/?p=414\" target=\"_blank\" rel=\"noopener\">K\u00fcnstlerische Bildeffekte mit Snap!<\/a>&#8220;<\/p>\n<h2>R\u00fcckblick auf den Workshop<\/h2>\n<p>Urspr\u00fcnglich hatten sich etwa 25 Personen zum Workshop angemeldet. Die meisten \u00e4ussersten sich w\u00e4hrend des Workshops weder schriftlich noch m\u00fcndlich. Wer sich meldete, gab an, noch \u00fcber wenig bis keine Erfahrung mit Snap! zu verf\u00fcgen. Am Schluss des Workshops gaben vier Teilnehmende schriftlich an, sie k\u00f6nnten sich vorstellen, Snap! im Unterricht zu verwenden.<\/p>\n<p>Die Bef\u00fcrchtung, zu wenig Material dokumentiert zu haben, erf\u00fcllte sich nicht. Im Gegenteil: Insgesamt konnte aus Zeitgr\u00fcnden nur etwa die H\u00e4lfte der geplanten Beispiele demonstriert werden.<\/p>\n<p><strong>Nachtrag vom 11. Mai 2021<\/strong>: Die Organisatoren des Open Education Days haben die <a href=\"https:\/\/tube.switch.ch\/videos\/L0wWDKAGy3\" target=\"_blank\" rel=\"noopener\">Videoaufzeichnung<\/a> online gestellt.<\/p>\n<h2>Weitere Ressourcen rund um Snap!<\/h2>\n<p>Erste Anlaufstelle zu allen Fragen rund um Snap! ist die <a href=\"https:\/\/snap.berkeley.edu\" target=\"_blank\" rel=\"noopener\">offizielle Webseite<\/a>.<\/p>\n<figure id=\"attachment_580\" aria-describedby=\"caption-attachment-580\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-580\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/snap_webseite-1024x446.png\" alt=\"\" width=\"525\" height=\"229\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/snap_webseite-1024x446.png 1024w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/snap_webseite-300x131.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/snap_webseite-768x335.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/snap_webseite-1536x669.png 1536w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/snap_webseite.png 1900w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-580\" class=\"wp-caption-text\">Auf der offiziellen Webseite werden Beispiele zur Programmierung mit Snap! vorgestellt. Allf\u00e4llige Fragen stellt man \u00fcber ein Forum an die engagierte und hilfsbereite Snap!-Gemeinschaft.<\/figcaption><\/figure>\n<p>Es lohnt sich, auf der Seite ganz nach unten zu gehen, denn dort finden sich die Links zu ausgew\u00e4hlten Beispielen und einer hervorragenden und regelm\u00e4ssig aktualisierten Dokumentation zur Programmiersprache Snap!.<\/p>\n<h3>Online-Kurse<\/h3>\n<p>Zu Snap! gibt es unterdessen eine Reihe von hervorragenden Onlinekursen \u00fcber die MOOC-Plattform <a href=\"https:\/\/open.sap.com\/?locale=de\" target=\"_blank\" rel=\"noopener\">openSAP<\/a>:<\/p>\n<ul>\n<li><a href=\"https:\/\/open.sap.com\/courses\/snap1-ttt\/\" target=\"_blank\" rel=\"noopener\">Build your own Snap! Workshop<\/a> (Jadga Huegle und Jens M\u00f6nig) zeigt auf, wie Snap! in der Arbeit mit Kindern und Jugendlichen verwendet werden kann.<\/li>\n<li><a href=\"https:\/\/open.sap.com\/courses\/snap1-1-de\" target=\"_blank\" rel=\"noopener\">Programmieren mit Snap!<\/a> (Jadga Huegle und Jens M\u00f6nig) bietet eine gute Einf\u00fchrung in Snap! und Grundlagen der Informatik f\u00fcr Kinder und Jugendliche.<\/li>\n<li><a href=\"https:\/\/open.sap.com\/courses\/ct1-2\" target=\"_blank\" rel=\"noopener\">Informatik f\u00fcr Einsteiger<\/a> (Eckart Modrow, Verfasser des gleichnamigen Buches) f\u00fchrt mit Snap! in die Informatik ein und richtet sich an \u00e4ltere Jugendliche oder Erwachsene.<\/li>\n<li><a href=\"https:\/\/open.sap.com\/courses\/snap2\" target=\"_blank\" rel=\"noopener\">From Media Computation to Data Science\u00a0<\/a>(Jadga Huegle und Jens M\u00f6nig)\u00a0erkl\u00e4rt die Verarbeitung und Repr\u00e4sentation von Daten mithilfe von Snap! Dieser Kurs hat den Workshop &#8222;Zahlen, Daten und Medien&#8220; wesentlich angeregt.<\/li>\n<li><a href=\"https:\/\/open.sap.com\/courses\/ai1-de\" target=\"_blank\" rel=\"noopener\">Die Welt der KI entdecken<\/a> (Stefan Seegerer und Tilman Michaeli) f\u00fchrt in die Thematik der k\u00fcnstlichen Intelligenz ein und nutzt Snap! f\u00fcr praktische Beispiele.<\/li>\n<\/ul>\n<h3>Snap!Con<\/h3>\n<p>Seit dem Ausbruch der COVID-19 Pandemie findet die <a href=\"https:\/\/www.snapcon.org\/conferences\/2021\" target=\"_blank\" rel=\"noopener\">Snap!Con<\/a> und daran angebundene Veranstaltungen (auch) online statt. Die n\u00e4chste Snap!Con dauert f\u00fcnf Tage und wird vom 29. Juli bis 1. August 2021 durchgef\u00fchrt. Meist bietet die Snap!Con eine Mischung von Beitr\u00e4gen, die von Anf\u00e4ngerveranstaltungen bis zum Austausch von Experten reichen. Allen ist gemeinsam, dass die Teilnehmenden sich dar\u00fcber austauschen, wie die Programmierung (und der Unterricht) mit Snap! verbessert werden kann.<\/p>\n<h3>YouTube-Videos<\/h3>\n<p>Auf YouTube finden sich hervorragende Videos zu Snap! Diese sind teilweise im Rahmen von Snap!Con-Beitr\u00e4gen entstanden. Da der Begriff &#8222;Snap&#8220; auch im anderen Zusammenhang h\u00e4ufig verwendet wird, lohnt es sich, nach &#8222;Snap!Con&#8220; oder &#8222;Jens M\u00f6nig&#8220; zu suchen.<\/p>\n<p>Wer kein Problem mit Englisch hat, dem seien die folgenden zwei l\u00e4ngeren Vortr\u00e4ge von Jens M\u00f6nig empfohlen:<\/p>\n<ul>\n<li>In <a href=\"https:\/\/youtu.be\/0_x5zsuu5jY\" target=\"_blank\" rel=\"noopener\">The music comes out of the piano<\/a> r\u00e4umt Jens M\u00f6nig mit der Vorstellung auf, Informatik k\u00f6nne nur durch maximale Abstraktion und m\u00f6glichst weit weg von Computern unterrichtet werden.<\/li>\n<li>In <a href=\"https:\/\/youtu.be\/XOyXPmcdDcc\" target=\"_blank\" rel=\"noopener\">No code, no limit<\/a> zeigt Jens M\u00f6nig, wie mit Snap! Algorithmen einfach umgesetzt werden k\u00f6nnen.<\/li>\n<\/ul>\n<h3>Twitter<\/h3>\n<p>Eine ganze Reihe von Personen, die sich stark f\u00fcr und rund um Snap! organisieren, berichten regelm\u00e4ssig \u00fcber ihre Arbeit auf Twitter. Folgende Twitteraccounts sollte man bei Interesse deshalb regelm\u00e4ssig konsultieren:<\/p>\n<p>Jens M\u00f6nig: <a href=\"https:\/\/twitter.com\/moenig\" target=\"_blank\" rel=\"noopener\">https:\/\/twitter.com\/moenig<\/a> ist hauptverantwortlich f\u00fcr die Programmierung von Snap! und freut sich \u00fcber alle Beitr\u00e4ge zum Thema.<\/p>\n<p>Jagda H\u00fcegle: <a href=\"https:\/\/twitter.com\/jadga_h\" target=\"_blank\" rel=\"noopener\">https:\/\/twitter.com\/jadga_h<\/a> \u00fcberlegt sich unerm\u00fcdlich, wie Snap! in und ausserhalb des Unterrichts eingesetzt werden kann.<\/p>\n<p>Bernat Romagosa: <a href=\"https:\/\/twitter.com\/bromagosa\" target=\"_blank\" rel=\"noopener\">https:\/\/twitter.com\/bromagosa<\/a> engagiert sich allgemein f\u00fcr blockbasierte Sprachen und findet immer wieder verbl\u00fcffende Anwendungen daf\u00fcr.<\/p>\n<p>Joachim Wedekind: <a href=\"https:\/\/twitter.com\/jowede\" target=\"_blank\" rel=\"noopener\">https:\/\/twitter.com\/jowede<\/a> <span style=\"font-size: 1rem;\">besch\u00e4ftigt sich vor allem mit Computerkunst und optischen Illusionen.<\/span><\/p>\n<h3>Moodle und Snap!<\/h3>\n<p>Dank der Arbeit von Joan Guill\u00e9n kann Snap! nahtlos in Moodle integriert werden. Das entsprechende Plugin findet sich unter <a href=\"https:\/\/moodle.org\/plugins\/assignsubmission_snap\" target=\"_blank\" rel=\"noopener\">https:\/\/moodle.org\/plugins\/assignsubmission_snap<\/a> .<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dieser Beitrag ist ein Entwurf zum Workshop &#8222;Zahlen, Daten und Medien&#8220; am Open Education Day vom 24. April 2021.\u00a0 Er dient als Arbeitsgrundlage und Dokumentation und wird nach der Durchf\u00fchrung noch einmal \u00fcberarbeitet. Ausschreibung des Workshops Mit Hilfe der blockbasierten Programmierumgebung Snap! (https:\/\/snap.berkeley.edu) lernen die Teilnehmenden M\u00f6glichkeiten kennen, wie informatische Kenntnisse in den Bereichen Zahlen, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/gigers.com\/blog\/open-education-day-zahlen-daten-und-medien\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eOpen Education Day: Zahlen, Daten und Medien\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-579","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/comments?post=579"}],"version-history":[{"count":15,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/579\/revisions"}],"predecessor-version":[{"id":657,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/579\/revisions\/657"}],"wp:attachment":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/media?parent=579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/categories?post=579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/tags?post=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}