Wer mit Schülern – oder auch sonst – Webseiten erstellen, mit CSS und Javascript experimentieren oder auch deren Grundlagen lernen möchte, ist mit Code-Playgrounds sehr gut bedient. Solche Online-Sandkästen bieten die Möglichkeit, Webseiten-Code auszuprobieren und live zu beobachten, wie sich das Resultat verändert.
Wenn man selbst mal schnell ausprobieren möchte, ob eine CSS-Einstellung oder ein kleiner Javascript-Abschnitt funktioniert, benötigt man sehr schnell einen Webserver oder ähnliches. Abhilfe schaffen hier Code-Playgrounds. Dort lässt sich schnell und einfach Code eingeben. Das Resultat wird sofort ersichtlich. Für die Entwicklung von Webseiten kann das sehr hilfreich sein.
Für den Programmier-Unterricht sind Playgrounds sehr nützlich, weil man als Lehrerin oder Lehrer seine eigenen Code-Beispiele speichern kann. Danach haben die Lernenden selbst die Möglichkeit, den vorgegebenen Code zu verändern und damit zu experimentieren.
Code-Pen
Code-Pen hat eine sehr überischtliche Darstellung und das Resultat der Veränderungen ist sofot sichtbar. Die Aufteilung des Bildschirms ist sehr übersichtlich.
Das Teilen des Codes ist sehr einfach. Code-Pen kann zudem auf jeder beliebigen Seite eingebettet werden.
In der Pro-Version für 9$ pro Monat gibt es auch noch einen Professor-Modus, bei dem man auch noch chatten kann. Den habe ich aber nicht ausprobiert.
JS-Fiddle
JS-Fiddle ist einer der ältesten Playgrounds. Er ist immer noch Quasi-Standard und bietet sämtliche Features, die auch Code-Pen und andere bieten. Die Benutzer-Oberfläche sieht etwas technisch aus. Aber man hat schnell begriffen wie es funktioniert.
Auch in JS-Fiddle gibt es die Möglichkeit, andere Benutzer einzuladen und zu chatten. Eine Pro-Version ist nicht mal nötig.
JSBin
JS Bin on jsbin.com
Auch JSBin bietet die gleichen Features, wie die oben erwähnten Playgrounds. Allerding gibt es hier auch noch eine Java-Script-Konsole. Diese ist sehr nützlich beim Ausprobieren und Debuggen.