Open Roberta Lab ist eine frei verfügbare Open-Source-Plattform, auf der Nutzerinnen und Nutzer Roboter, Mikrocontroller und virtuelle Systeme in blockbasierter Programmiersprache per Drag-and-Drop programmieren können.
Entwickelt wurde das Open Roberta Lab als Open Source Projekt vom Fraunhofer-Institut für Intelligente Analyse- und Informationssysteme (IAIS). Die Programmierung erfolgt mit der grafischen Sprache NEPO. Programmbausteine werden ähnlich wie Puzzleteile zusammengesetzt, sodass keine Programmiervorkenntnisse erforderlich sind, wodurch sich Open Roberta Lab ideal zum Einstieg in die Programmierung eignet.
Die Plattform funktioniert browserbasiert und kann ohne Benutzerkonten genutzt werden. Möchte man jedoch Programme speichern oder mit anderen Nutzerinnen und Nutzern teilen, ist ein Benutzerkonto (kostenlos) notwendig. Schülerinnen und Schüler unter 16 Jahren tragen bei der Anlage eines Kontos die Mailadresse ihrer Eltern bzw. Erziehungsberechtigten ein, die das Nutzerkonto erst bestätigen müssen.
Viele unterstützte Systeme
Open Roberta Lab bietet eine Vielzahl an Programmiermöglichkeiten. Im Lab können unterschiedliche Robotersysteme und Mikrocontroller programmiert werden, wie z. B. micro:bit, Callipe mini, LEGO Mindstorms EV3, LEGO WeDo uvm.
Screenshot Open Roberta Lab – Überblick Robotersysteme und Mikrocontroller
Programmieren ohne Hardware möglich
Ein besonderer Vorteil von Open Roberta Lab: Auch ohne eigene Roboter können Schülerinnen und Schüler programmieren, da direkt in der Plattform eine Simulation zur Verfügung steht. Die einzelnen Blöcke werden somit nach dem Baukastenprinzip zu einem Programm aneinandergereiht und dieses lässt sich gleich virtuell testen – wie hier am Beispiel des Calliope mini.
Screenshot Open Roberta Lab – Programmierumgebung und Simulation zum Calliope mini
Die Programme können auch heruntergeladen werden und, im Fall, dass ein physischer Mikrocontroller oder ein entsprechender Roboter zur Verfügung steht, auf diesen übertragen werden. Auch der Quellcode kann direkt eingesehen werden.
Open Roberta Wiki und FAQ-Sammlung
In einem umfangreichen Wiki finden Nutzerinnen und Nutzer hilfreiche Antworten – angefangen von Tipps zum Einstieg in die blockbasierte Programmierung bis hin zu Hilfestellungen bei komplexeren Programmieraufgaben.
Open Roberta Lab + datensparsam – keine Nutzerkonten notwendig + niedrigschwelliger Einstieg in die blockbasierte Programmierung + keine Hardware notwendig, da integrierte Simulation + kostenlos nutzbar + Open Source Projekt
erläutern die Struktur und Funktionsweise des Internets sowie die damit verbundene Adressierung von Geräten.
strukturieren Kommunikationsvorgänge im Internet in aufeinander aufbauende Schichten und beschreiben so die Übermittlung elektronischer Daten; dabei erlangen sie ein grundlegendes Verständnis für die Bedeutung von Protokollen.
beschreiben das Zusammenspiel von Client und Server bei Webanwendungen, z. B. bei einer Fahrplanauskunft.
erläutern Chancen und Risiken des Internets, beurteilen ihren eigenen Umgang mit dessen Diensten und reflektieren dabei, wodurch der Schutz persönlicher Daten erhöht und die Gefahr des Missbrauchs minimiert werden kann.
Inhalte zu den Kompetenzen:
Struktur und Funktionsweise des Internets: Client, Server, Router; Adressierung im Internet (MAC-Adresse, IP-Adresse, DNS, Port)
Protokolle zur Beschreibung der Kommunikation im Internet
WWW als Beispiel eines Dienstes, Browser, HTML, Cookies
Datenschutz
Für 9 Stunden ist das ziemlich viel. Ich habe schon voller Schwung und mit der Erfahrung aus dem letzten Schuljahr alles verplant (für deutlich mehr Stunden; ich werde kürzen müssen) und vor allem diesen Lehrplanabschnitt 3 vorangestellt, um erst von diesem aus später zu den weiteren zu gelangen.
Stunde 1: Das Client-Server-Prinzip im Web
1. Das Client-Server-Prinzip
Client-Programm (auf Rechner, ebenfalls Client genannt) stellt Anfrage an Server-Programm (auf Server-Rechner) und erhält Antwort.
Das Client-Server-Prinzip ist für viele Vorgänge bei Computern und vor allem in Netzwerken wichtig. Es ist eigentlich sehr einfach: Ein Client (ein Programm, das auf einem Rechner läuft, der ebenfalls Client genannt wird) stellt eine Anfrage (Request) an einen Server (ein Programm, das auf einem Rechner läuft, der ebenfalls Server genannt wird) und erhält darauf eine Antwort (Response).
Ein Web-Server ist ein Programm, das auf Anfrage Webseiten ausliefert. Ein E-Mail-Server ist ein Programm, das auf Anfrage E-Mail versendet oder empfängt. Ein Drucker-Server ist ein Programm, das Druckaufträge entgegennimmt und verarbeitet. Ein Datei-Server ist ein Programm, das auf Anfrage Dateien verschickt.
Damit die Kommunikation ohne Missverständnisse abläuft, müssen in allen Fällen sowohl die Anfrage als auch die Antwort einem bestimmten Schema, einem Protokoll, entsprechen.
Wir werden uns später Anfrage und Antwort bei einem Webserver genauer anschauen.
2. Beispiel: Webseiten-Anfrage
2.1 Anfrage und Ergebnis im Browser
Man stellt eine Anfrage (links) und erhält eine Antwort (rechts).
2.2 Webseite ohne CSS und Bilder
Manchmal sehen Webseiten nicht so aus wie links, sondern wie rechts: Da fehlt etwas. Rechs ist das Bild nicht mitgeladen worden, etwa weil die Verbindung abgebrochen oder zu schlecht ist, und auch das Design sieht unvollständig oder jedenfalls anders aus.
Das liegt daran, dass zu einem Webseitenaufruf nicht nur eine Anfrage (und Antwort) gehört, sondern üblicherweise mehrere Ressourcen angefragt werden. Wenn da etwas dazwischen kommt, kommt es zu solchen unvollständigen Darstellungen.
2.3 Was tatsächlich geschieht
Meist mehrfache Anfragen und Antworten, nämlich:
die HTML-Datei (=Inhalt und Struktur) mit Informationen zu weiteren Dateien, etwa:
CSS-Dateien (=Design)
Bilddateien
JavaScript-Dateien (=Programm)
Dateien mit eingebetteter Werbung
Cookies
…
Wenn man eine Webseite aufruft, wird zuerst eine HTML-Seite angefragt und zurückgegeben. In der 7. Klasse erstellt man selber HTML-Seiten, vielleicht erinnerst du dich. So eine HTML-Seite ist das das Grundgerüst, sie enthält meistens, aber nicht unbedingt, den Text der Seite, die Überschriften, und Informationen über weitere Dateien, die dann in weiteren Aufrufen angefragt und geladen werden. Wenn alle diese Dateien geladen sind, kann die Seite vollständig dargestellt werden.
Diese zusätzlichen Dateien sind vor allem:
Bildddateien
eine oder mehrere CSS-Dateien, die Informationen über das Design enthalten (Schriftart, Schriftfarbe, Zeilenabstand, Platzierung der Elemente).
JavaScript-Dateien, das sind kleine Programme, die auf dem Rechner der Anfragenden ausgeführt werden und für mehr Interaktivität sorgen
Dateien mit eingebetteter Werbung (wäre es nicht schön, wenn man die, und nur die, blockieren könnte? Man kann!)
Cookies, also kleine Textschnipsel, die Information über den Webseitenbesuch enthalten und die in deinem Browser gespeichert werden
Die Aufzählung ist unvollständig, es kann noch mehr geben.
Für Interessierte: Unter https://csszengarden.com/ kann man mit CSS experimentieren und schauen, wie die gleiche HTML-Datei unterschiedlich dargestellt wird, je nach ausgewähltem CSS.
2.4 Exkurs: Kommandozeile und curl
suche und starte das Programm cmd (Kommandozeile/ Terminal/ Eingabeaufforderung/ Konsole)
gib dort diesen Befehl ein: curl https://www.sueddeutsche.de
versuche auch diese Befehle, und weitere Adressen:
curl spiegel.de
curl www.spiegel.de
curl https://www.spiegel.de
Jetzt geht es ums Ausprobieren. Meistens benutzt man einen Browser (Firefox, Safari, Edge, Chrome), um Webseiten anzufragen und darzustellen. Weil wir uns das etwas genauer anschauen wollen, benutzen wir das Kommandozeilenwerkzeug curl.
Die Kommandozeile (auch Terminal) startest du, indem du das Programm cmd suchst. So heißt es bei Windows, aber du findest es auch bei Linux unter diesem Namen; bei MacOS heißt es Terminalund ist bei den Dienstprogrammen zu finden.
Die Kommandozeile ist rein textbasiert: Man tippt Text ein und kriegt als Antwort auch nur Text. Dennoch kann man dort programmieren und Textbearbeitung machen und vieles mehr; als Computer anfingen, gab es nichts anderes als die Kommandozeile.
Du sollst das Programm curl kennenlernen und benutzen. Mit curl gefolgt von einer Adresse forderst du die Ressource an, die unter dieser Adresse von einem Webserver bereitgestellt wird.
Bei curl wird aber nur die angeforderte Ressource geladen, also etwa die HTML-Seite; die weiteren Dateien, die in ihr eventuell angegeben werden, werden nicht geladen.
Die Adresse kann verschiedene Formate haben, dazu später mehr. Es macht jedenfalls einen Unterschied, ob du http://oder https:// oder nichts voranstellst, ob da www steht oder nicht. Das führt dazu, dass manchmal keine oder eine unerwartete Antwort kommt.
(Ein paar Schüler wussten doch tatsächlich, wie man die Farbeinstellungen der Konsole ändert, also etwa auf cooles grün auf schwarz statt wie voreingestellt weiß auf schwarz. Das sprach sich schnell herum und brachte Respekt.)
2.5 Fehlermeldungen
301 Moved Permanently
curl luitpold-gymnasium.eu → keine Antwort
curl http://luitpold-gymnasium.eu → keine Antwort
curl https://luitpold-gymnasium.eu → nur hier Antwort!
äufig erhält man als Antwort statt der gewünschten Ressource nur einige wenige Zeilen, an deren Anfang etwas steht wie 301 Moved Permanently. Das heißt, dass die gewünschte Adresse nicht mehr aktuell und an eine andere Adresse umgezogen ist. Manchmal kommt auch einfach gar keine Antwort. Manchmal ist die neue Adresse sichtbar angegeben, manchmal nicht.
Im Browser wird automatisch zu der anderen Adresse gewechselt; curl macht das nicht.
Ein Beispiel:
curl sueddeutsche.de ist unvollständig
curl www.sueddeutsche.de ist besser, weil zufälligerweise, aber oft, die Adresse mit www beginnt, aber immer noch unvollständig
curl https://www.sueddeutsche.de ist erst die Angabe, die zum gewünschten Ergebnis führt
2.6 Mehr zu curl
Mit:
curl https://www.sueddeutsche.de > seite.html
leitest du die Ausgabe statt auf den Bildschirm in eine Datei um (Name frei wählbar, Webseiten am besten mit .html hinten).
Mehr Informationen zur Kommandozeile oder zu curlstehen in einer separaten Datei. Hier nur kurz: Wenn man das Ergebnis nicht als Text angezeigt bekommen will, sondern als Datei speichern will, schreibt man, als eine von mehreren Möglichkeiten:
curl https://www.sueddeutsche.de > seite.html speichert die Ausgabe in einer Datei namens „seite.html“. Den Dateinamen kannst du dir aussuchen, Webseiten enden Konventionell auf „.html“.
curl -v https://sueddeutsche.degibt dir mehr Informationen darüber, was im Hintergrund geschieht.
Von dieser schönen Seite habe ich erst nach der Stunde erfahren, das hole ich nächstes Mal schnell nach. Kann man gleich anknüpfen: Von welchem Ort erhält man das Wetter, wenn man nur curl wttr.in eingibt, und warum?
(Fortsetzung folgt. Dann mit HTTP und anderen Protokollen.)
Elfte Klasse Informatik, sprachlicher Zweig: Die Schüler und Schülerinnen haben seit der 7. Klasse kein Informatik gehabt und auch sonst – je nachdem – nicht viel mit einem Tastaturcomputer gearbeitet. Informatik in 11 ist demnach erst einmal fremd, zumal es eben um Informatik geht und nicht um praktisches Arbeiten an Computern. (Das wäre übrigens so viel notwendiger als: „Wir bringen den Klassen das Prompten bei.“ Was ein Unfug.)
Ich fragte zum Einstieg, was sie machen wollten; sie sagten „Photoshop“; ich vergaß zu fragen, was sie damit meinten, und brachte für die nächstes Stunde eine Reihe Aufgaben zum Einstieg ein. Und natürlich GIMP statt Photoshop.
0. Bildbearbeitung Grundlagen
Hatte ich als Arbeitsblatt dabei und digital verfügbar gemacht; aber wenig Hoffnung, dass jemand so viel lesen würde. Jedenfalls zeigte ich am Beispiel zumindest die ersten dieser Konzepte:
Ebenen
Auswahl (Rechteck, Ellipse, Zauberstab, Lasso, Schere, nach Farbe)
Bildgröße und Lupe
Filter
Bildformate/Dateiformate (xcf, jpg, png)
1. Bildbearbeitung Aufgaben
Vorlagen und Beispiele standen jeweils zur Verfügung.
1.1 Ausschneidecollage
In Berlin mal im Museum fotografiert: Jiří Kolář, Busard Saint-Martin, davon inspiriert das hier:
Mit dem Lasso-Auswahlwerkzeug einen Bereich ausschneiden
Ein anderes Bild dahinter in einer neuen Ebene legen
1.2 Ein neues Lächeln
Ein Lächeln aus einem Bild mit der Recht-Auswahl ausschneiden
Über ein anderes Bild als neue Ebene legen
Das soll verfremdet aussehen, aber man könnte natürlich auch versuchen, das weniger sichtbar einzubauen
1.3 Old Man Yells At Claude (schwierig)
Das hatte ich eine Woche zuvor für meine Bürotür selber gemacht:
einzelne Buchstaben (A, E) ausschneiden und einfügen
alte Flächen eventuell vorher grau einfärben
die Buchstaben etwas in der Größe oder Neigung anpassen
1.4 Schön verpixeln
Links ein Bild von einer Party (na ja, Star-Wars-Convention) 1984, einer der jungen Männer bin ich.
Mehrfachauswahl mit Ellipsen über die Gesichter
Rand etwas ausblenden
auf die Auswahl einen Filter anwenden, mein Favorit: Künstlerisch/Wasserpixel
1.5 Abgewandelte Werbekampagne
Hier im Blog vor Jahren mal gezeigt:
Ein neues Bild ausschneiden und als neue Ebene über das alte Bild legen
1.6 Tätowierungen
Das ist das Beispiel, das ich vorgemacht und an dem ich die Konzepte kurz gezeigt habe – und das sofort am besten ankam. Die anderen Aufgaben waren deutlich weniger attraktiv. Es ging darum, Angelina Jolie oder David Beckham eine Tätowierung zu verpassen.
(Idee und Material habe ich von Anja, Realschuldidaktik, ich habe das damals auch in der Vorlesung immer wieder mal gezeigt. Die Jolie/Beckham-Bilder kann ich hier nicht veröffentlichen; auch bei den Tätowierungen habe ich keine Quelle, so dass ich hier andere zeige, die ähnlich aussehen, aber sicherer gemeinfrei sein müssten. Außerdem habe ich mal fürs Blog mich genommen statt konventionell schönen Berühmtheiten. Im Unterricht war das nicht so!)
Eines der vorbereiten Bilder öffnen.
Das Bild mit den Tätowierungen öffnen, ein Motiv auswählen und als neue Ebene – mit Drehen, Stauchen, Verbiegen, Anpassen der Größe – auf einen nackten Oberarm legen.
Die Schwierigkeiten beim Auswählen: Die Bilder habe ich eigens nicht als PNG mit durchsichtigem Hintergrund vorgegeben, so dass die Motive ausgewählt werden müssen mit Zauberstab, Mehrfachauswahl oder Auswahl nach Farbe.
Am Ende noch über sexualisierte Fotos, Deepfakes, Recht am eigenen Bild und Urheberrecht gesprochen.
„The Imitation Game“ wurde 2013 in England gedreht, unter anderem in London und dem echten „Bletchley Park”, wo während des Zweiten Weltkriegs unter der Tarnung einer Radiofabrik versucht wurde, die deutschen Funksprüche zu entschlüsseln. Veröffentlicht wurde der Film im Herbst 2014. Der Film machte Alan Turings Lebenswerk einer breiteren Öffentlichkeit zugänglich, sodass Kritiker besonders hervorhoben, […]
Anmelden
