Nikolaus animiert

Beschreibung des Moduls

Ein schönes Beispiel zum Einsatz von SVG, SMIL und HTML, mit SMIL nur mit XML-markup(deklarativ) animiert: Das Haus vom Nikolaus. Mit Maus.

Habe ich für JOHAN (10) gemacht, um ihn für "Graphentheorie" zu erwärmen ;-) Also die klassische

Aufgabe: Finde EULER-Weg von Start nach Ende!

Dabei kann Kind motiviert werden verschiedene Lösungsstrategien zu entwickeln durch (a) Ausprobieren und (b) Nachdenken, Erforschen. Z.B. mal die Eckengrade zählen und beobachten, dass bis auf genau zwei sonst alle gerade sind. Welche Ecken haben ungerade Eckengrade und wo fängt man eigentlich an/hört auf (START/FINISH-nodes)?

Leider steht SMIL bei Google Chrome auf der Abschussliste! Hier Screenshot von Chrome 49 auf Windows XP/SP3(!!!) — da läuft es aber; auf Linux (Debian7/LXDE) ebenfalls. Besser wie empfohlen alles skripten statt SMIL. Dennoch feine Sache, wie man recht komplexes Verhalten rein mit Markup (XML/SMIL) deklarieren kann. Schade, dass SMIL aufgegeben wird.

Abb. 1: Screenshot Google Chrome 49

Und das passiert auf meinem Uralt-Test-Rechner bei Firefox 52:

Abb. 2: Screenshot Firefox 52

Ach schöne neue Welt, mit all dieser modernen Technik...

Immerhin, in Chrome läuft es auch mit SMIL unter gewissen Voraussetzungen, die Experten werden mehr wissen (Safari?, Edge?, ...) — Beweis:

Abb. 3: Screenshot Laufende App in Chrome 49

TODO: Animation besser nur mit JS statt SMIL markup
TODO: Interaktion wie "Welchen Weg an Kreuzung nehmen" (Kante im EULER-Weg)
...