Screencasts im Fernunterricht (JavaScript-Übung/Tutorial)

Dienstag, 05. Oktober 2010 um 17:31 von Marco Emrich in Webentwicklung

Kürzlich haben wir uns entschlossen, in Zukunft begleitend zu den Lernheften Screencasts zur Verfügung zu stellen. Damit bieten wir insbesondere auch Fernstudenten die Möglichkeit, die Lösungen der Selbstlernaufgaben schrittweise nachzuvollziehen. Sicherlich ist es aber auch für den ein oder anderen Präsenzteilnehmer praktisch, um sich den Unterricht nochmal ins Gedächtnis zu rufen.

Meine Aufgabe ist es ja, die Unterrichtsmaterialien für den JavaScript-Grundlagenkurs weiterzuentwickeln. Dieser Kurs ist die erste große Hürde für viele unserer Studenten. Deswegen lag es auf der Hand, den ersten Pilot-Screencast im JavaScript-Bereich anzusiedeln - wodurch natürlich unweigerlich mir diese Aufgabe zufällt ;)

Naiv wie ich war, hatte ich ca. einen halben Tag Arbeitsaufwand kalkuliert. Nach

• 3 Tagen,
• Problemen mit der Audiohardware,
• dem Einsatz von 2 Mikrophonen mit unterschiedlichen Ausrichtungen,
• Experimenten mit dem Pop-Filter,
• unterschiedlichen Verstärkereinstellungen,
• Versuchen auf 2 verschiedenen Rechnern unter
• 3 Betriebssystemen (Windows 7, Ubuntu-Linux, Mac OS X) und
• der Evaluation von ca. 20 verschiedenen Screencast-Tools 

...wurde mir klar, dass es vielleicht doch nicht ganz so einfach ist.

Daraus ein kleiner Auszug: Nachdem ich endlich in der Lage war einen klaren, rausch- und klack-freien Klang zu erhalten, musste ich feststellen, dass mir nach fünf Minuten Aufnahme grundsätzlich Redeverbot erteilt wurde - der Ton war einfach weg. Es mag ja Teilnehmer geben, die sich das hin- und wieder wünschen ... für einen Screencast ist das aber eher unpraktisch. Letztendlich musste ich einen speziellen Treiber installieren, für eine Verstärkerhardware, die eigentlich gar keinen Treiber braucht...

Hier ist nun endlich das Ergebnis, das ich mit BB-Flashback und Camtasia-Studio unter Windows erstellt hab'.

Der Screencast zeigt die Lösung der Aufgabe Drehender Würfel aus der Lektion Funktionsparameter. Es zeigt natürlich nicht die optimale Lösung für das Problem, sondern soll einfach helfen, den Einsatz von Funktionsparametern zu verstehen.

Noch ein Tipp: Am besten betrachten Sie den Screencast im Fullscreen-Modus, da sonst der Code recht schwer zu lesen ist. Den Fullscreen-Modus können Sie über das Icon rechts unterhalb des Videos aktivieren.

Ansonsten wünsche ich allen Schülern und Studenten weiterhin viel Spaß beim Lesen der Lernhefte.

Tags: JavaScript , Uebungen , Lernheft , Screencast

Kommentare

• Wolfgang Bergt

  Vielen Dank für die Mühe, mit der dieser tolle Screencast ermöglicht wurde.
  Ich finde ihn wirklich sehr gut gemacht und äußerst hilfreich.
  Gerade die Schwierigkeiten beim Fernstudium können damit weitgehend überwunden werden. Gegenüber dem Präsenzunterricht hat er sogar noch den Vorteil, dass man ihn sich auch auszugsweise beliebig oft ansehen kann. Sicherlich fehlen immer noch der direkte Kontakt und das unmittelbare Feedback, was beim normalen Unterricht ein großer Vorteil ist.
  Der große Aufwand für den ersten Screencast wird bestimmt dazu führen, dass die nächsten nicht mehr so viel Mühe machen werden.
  Es bleibt die Frage, wo in Zukunft die Screencasts zu finden sein werden. Wird es einen eigenen Menüpunkt unter Fernstudium geben oder werden sie im Online-Campus angeboten? Wenn sie als Videopodcast angeboten werden, dann melde ich mich schon mal als Abbonent an.

  am Mittwoch, 06. Oktober 2010, 20:59

• Thomas Gauck

  Klasse da werden Deja-vus geweckt...! Ich hol mir erst mal einen Kaffee.

  am Mittwoch, 06. Oktober 2010, 21:38

• Denis Blümke

  Find ich klasse sowas.

  Solche Lehrvideos geben mir viel und ich kann einiges schneller und besser Nachvollziehen.

  Auch wenn es für Marco bestimmt eine heiden Arbeit ist, ich will mehr davon.

  Danke
  Denis @ Pix

  am Mittwoch, 06. Oktober 2010, 22:25

• Marco Emrich

  @Wolfgang Bergt:

  > Es bleibt die Frage, wo in Zukunft die Screencasts zu finden sein werden. Wird es einen eigenen Menüpunkt unter Fernstudium geben oder werden sie im Online-Campus angeboten?

  Wie wir das technisch lösen, ist noch nicht ganz klar. Vermutlich werden die Screencasts in irgendeiner Form in den Online-Campus einfließen. Auf jeden Fall werden sie unseren Studenten (Fern- und Präsenz- und auch ehemaligen) frei zur Verfügung gestellt. Sie sind quasi Teil des Curriculums und ergänzen die Lernhefte. Möglicherweise werden wir zusätzlich ausgesuchte Screencasts für ein breiteres Publikum hier im Blog veröffentlichen.

  
  

  am Donnerstag, 07. Oktober 2010, 13:11

• Aida Kaeser

  Ich finde den Screencast wunderbar!
  Ist sehr gut gelungen und trägt deutlich zum besserem Verständnis der Lektion bei. Ich wünsche mir in absehbarer Zukunft mehr davon.

  Viele Grüße,
  Aida
  

  am Donnerstag, 07. Oktober 2010, 14:28

• Holger Back

  Habe mir den Screencast gerade angeschaut und bin begeistert. Ich muss Aida da in vollem Umfang zustimmen und freue mich auf neue Screencasts.

  Viele Grüße
  Holger

  am Freitag, 08. Oktober 2010, 09:29

• Sabine Niemann

  Auch ich bin begeistert von diesem Screencast! Ich hatte die Übung zwar schon im Heft durchgenommen, aber durch die 'live'-Vorführung wird das alles noch einmal viel verständlicher. Vielen Dank!

  Viele Grüße
  Sabine

  am Freitag, 08. Oktober 2010, 12:49

• Andreas Lutz

  Ist zwar bemerkenswert aber vermittelt genau das Falsche.
  (wie Sie sagen, nicht sehr elegant)
  Dass in jedes DIV ein neuer Parameter geschrieben werden muss.
  Ich würde sagen: Leider nicht modernes JavaScript. Nicht mal vormodern.
  Sie sollten den Leuten eher sagen: Ich habe sechs Bilder. Schreibe mir eine Funktion, welche diese sechs Bilder in einer Funktion darstellt, welches (mit der Anzahl der Bilder) sechs DIVs herstellt und diese Bilder darstellt.
  Das wäre etwas moderner, weil der Code dazu einfach zu verstehen ist.
  Ich würde Ihnen gerne ein Beispiel mit vorbereiteten Elementen oder eben (create) unvorbereiteten Elementen liefen.

  
  

  am Freitag, 08. Oktober 2010, 14:46

• Marco Emrich

  @Andreas Lutz

  Natürlich ist es nicht die eleganteste Lösung für die gestellte Aufgabe, aber darum geht es an dieser Stelle auch gar nicht. Es handelt sich um eine Übung im Lernheft, die ganz bewusst aus didaktischen Gründen an dieser Stelle das Konzept von Funktionsparametern vermittelt.

  Natürlich würde ich in der Praxis keine 30 Event-Handler in DIVs kopieren, sondern diese programmatisch per unobtrusive JavaScript erzeugen - und evtl die DIV's selbst per DOM-Scripting generieren. Aber dass ist nicht mehr Teil des Grundlagen-Kurses!

  Dazu benötigt man

  * das Verständnis über anonyme literale Funktionen
  * das Konzept Event-Handler programmatisch zu setzen (und muss sich vorher für eines der Event-Modelle entscheiden: W3C/klassisch/per Bibliothek etc.)
  * evtl. das DOM-Scripting-Konzept des node-Objektes
  * Idealerweise eine Bibliothek wie jQuery oder Prototype

  Den resultierenden Code würde ein Anfänger sicherlich nicht mehr als "einfach zu verstehen" bezeichnen.

  Ich schau mir das Beispiel aber natürlich gerne mal an - vielleicht lässt es sich an anderer Stelle einsetzen.

  am Freitag, 08. Oktober 2010, 15:55

• Andreas Lutz

  Weshalb lehrt man den Leuten etwas Falsches , wenn man weiss, dass man es nicht tun sollte ?

  am Freitag, 08. Oktober 2010, 16:56

• Wolfgang Bergt

  @Andreas Lutz

  Nein, der Screencast vermittelt nicht genau das Falsche. Ich meine im Gegenteil, der Sinn dieses Videos ist ja gerade die schrittweise Vorgehensweise, die das Verständnis fördert.. Es geht nicht darum, sehr schnell zu modernem Code zu kommen, sondern die Grundlagen von JavaScript zu lernen. Deshalb sind ja auch immer wieder Zwischenschritte eingebaut, mit denen überprüft wird, ob und wie der letzte Schritt funktioniert. Diese Feedback-Aufrufe werden dann natürlich wieder gelöscht, bevor es zum nächsten Schritt weitergeht.
  Sicherlich ist in diesem Sinne vorgesehen, dass später die vielen Stellen mit Redundanz als Motivation dazu benutzt werden, schlankeren und moderneren Code schreiben zu wollen. Aber man kann eben die neue Version nur dann richtig würdigen, wenn man vorher die zwar simplere aber mühseligere Version erlitten hat.
  Die Aufgaben können sicher mit ganz unterschiedlichen Methoden gelöst werden: mit genialen, mit modernen aber eben auch mit didaktisch klugen.
  
  

  am Freitag, 08. Oktober 2010, 17:03

• Andreas Lutz

  Teilweise akzeptiert. Bis ich etwas besseres vorlegen kann - was geschehen wird.
  Der Marco hat übrigends ein Script vorgelegt das heisst: "Datenentwicklung für Webanwendungen mit MySql"
  Dazu muss ich sagen: es ist das Beste was ich je gelesen und in Kursen vermittelt habe. Im JavaScript ist er zwar noch etwas unsicher, weil er noch kämpft mit dem modernen JavaScript und seiner Vermittlung - was allerdings keineswegs heisst, dass er das nicht in den Griff bekommen wird.
  Übrigends: Ich würde bei ihm sofort einen Kurs über Ruby on Rails besuchen, wenn er mir einen anbietet - natürlich am liebsten online.

  am Freitag, 08. Oktober 2010, 18:03

• Wolfgang Bergt

  Zu dem Lernheft "Datenbankentwicklung für Webanwendungen mit MySQL" von Marco bin ich übrigens der gleichen Meinung wie Andreas Lutz, und das wollte ich Marco schon lange einmal sagen: Es ist das beste Lehrbuch zu Datenbanken in diesem Zusammenhang, das mir bisher in die Hand gekommen ist, sogar brauchbarer als die Datenbankvorlesung an der Uni.
  Nachdem ich es vor ein paar Monaten durchgearbeitet hatte, habe ich meine eigenen Seminare vom Schwerpunkt ERM auf UML umgestellt.

  am Freitag, 08. Oktober 2010, 20:09

• Stefan Mangstl

  Danke für den Screencast, freue mich schon auf neue Lektionen. Bloß aus den Lernheft ist Java für mich nicht sonderlich verständlich. Geschweige denn die Einsendeaufgaben lösbar.

  am Mittwoch, 13. Oktober 2010, 23:19

• Philipp Kremer

  cool echt gut geworden und sehr verständlich.
  weiter so ^^.

  am Mittwoch, 13. Oktober 2010, 23:46

• Ron Starc

  My Screen Recorder ist eine ausgezeichnete Bildschirm Aufnahme Werkzeug. Zeichnet den Bildschirm und Audio von den Lautsprechern oder Ihre Stimme aus dem Mikrofon - oder beides gleichzeitig. Die Aufnahmen sind klar und sehen toll aus, wenn wieder auf Ihrem PC abgespielt oder auf YouTube hochgeladen. Es wird direkt in AVI, WMV, MP4, FLV oder aufzeichnen. Einfach perfekt für die Erstellung von Demos und Tutorials.
  http://www.deskshare.com/screen-recorder.aspx

  am Montag, 14. Juli 2014, 16:04

• Zenasni

  Hallo,
  Supere Erklärung, danke für das Video.
  Bitte noch so weitere Videos veröffentlichen.
  LG Zenasni.

  am Montag, 16. November 2015, 13:21

Hinterlasse einen Kommentar: