datenverdrahten.de

25 Jahre SVG: Am 4. September 2001 erschien die initiale W3C-Spezifikation zu SVG 1.0. SVG steht für Scalable Vector Graphics als XML-basierte Auszeichnungssprache zur Deklaration vektorgrafischer Grundformen mit zusätzlichen Techniken wie Animationen, Filtern, Gradienten und mehr. Das Konzept wurde ursprünglich 1999 von der Firma Adobe konzipiert und dem W3C zur Standardisierung vorgeschlagen. Der erste Kontakt mit SVG ergab sich durch einen im Herbst 2001 auf der tekom-Jahrestagung in Bremen besuchten Vortrag. Dabei wurde schnell klar, welches Potenzial in dieser Technologie steckt.

Mich interessierten direkt die programmatische Code-Generierung mittels XSLT und die Möglichkeiten zur Nutzung in Web-Browsern im Kontext von JavaScript und DOM. Das anfänglich noch nötige Browser-Plugin verzögerte zunächst die weitreichende Verwendung des Standards bis Opera und Firefox mit nativen Implementierungen begannen. Schließlich wurde SVG, wie auch MathML, im Rahmen von HTML5 adoptiert und ist mittlerweile problemlos einsetzbar. Auch in die Lehre wurde SVG frühzeitig integriert. Die 2002 etablierte Seite SVG – Learning by Coding ist als eine Art Spielwiese zu verstehen, welche weiterhin nützlich sein sollte. Eine Reihe veröffentlichte Artikel sowie gehaltene Vorträge dokumentieren die vielfältigen Aktivitäten zu diesem nach wie vor faszinierenden Thema. Happy Birthday, SVG! 🎉

Calliope-Artikel: Der im MNU-Journal 03.26 erschienene Artikel »Externe Datenkommunikation mit Calliope mini« fasst die seit dem Sommer 2025 zum Thema gesammelten Erfahrungen zusammen. Das Ergebnis ist unter der Rubrik Fachartikel verfügbar. Inhaltlich wird auf Möglichkeiten zur seriellen Datenübertragung von Sensordaten und unter Nutzung eines zusätzlichen WLAN-Moduls eingegangen. Der im März 2026 gehaltene Vortrag griff diese Details in erweiterter Form auf, siehe auch den dazu veröffentlichten Bericht und die umfangreiche Projektdokumentation.

Dazu passt die gerade erfolgte Veröffentlichung des Firefox-Browsers in Version 151. Mit der längst überfälligen Unterstützung der Web Serial API schließt Firefox zu den bisher für derartige Zwecke benötigten Chromium-Browsern auf und kann somit auch mit dem Calliope mini als Peripherie kommunizieren.

Calliope @ MNU-Kongress: In der letzten Woche fand an der Universität des Saarlandes in Saarbrücken der 116. MNU-Bundeskongress statt. MNU ist der Verband zur Förderung des MINT-Unterrichts. Ich hatte im letzten Herbst von dieser Veranstaltung erfahren und mich für einen Vortrag beworben. Dieser wurde dankenswerterweise angenommen und schließlich am 27.03.2026 gehalten. Inhaltlich ging des um die auch hier bereits behandelte »Externe Datenkommunikation mit Calliope mini«, speziell zur Abfrage und Verarbeitung typischer Sensordaten. Der Zeitslot von 30 Minuten war ziemlich knapp bemessen. Dennoch ließen sich dem interessierten Publikum die wesentlichen Aspekte vermitteln. Der Vortrag fand zugleich im Rahmen vom 8. Tag des Informatikunterrichts statt.

Als besonders spannend erwies sich ein ebenfalls im Umfeld des Calliope mini ausgerichteter Workshop. Eine Doktorandin der Universität Bielefeld stellte ihr im Bereich Biologie-Didaktik angesiedeltes Forschungsprojekt »Eine digitale Schildkröte für den Unterricht« vor. Dabei ließen sich Teilaspekte selbst nachvollziehen. Zwar war es anfangs etwas ungewohnt, die MakeCode-Programmierung statt mittels JavaScript im Blockmodus vorzunehmen, aber es ist ein einigermaßen passables Ergebnis entstanden. Die Tagung wurde von einer interessanten Ausstellung mit vielfältigen Angeboten im Bereich von Lehrmitteln für Experimente und aktuellen Veröffentlichungen einschlägiger Schulbuchverlage begleitet.

Mehr zum Calliope mini: In den seit dem vorherigen Kurzbericht vergangenen drei Monaten wurde das Calliope-Projekt weiter ausgebaut. Hinzu kamen Ansätze zum schreibenden Zugriff auf das Gerät vom Browser aus, wiederum über die Web Serial API. Untersetzt wurden diese Versuche mit einer Anwendung zur Ansteuerung der 25 roten LEDs. Außerdem kam ein weiterer externer Sensor mit der Bezeichnung SCD40 zum Einsatz. Dieser misst drei Parameter zur Luftqualität: CO₂-Konzentration, relative Luftfeuchtigkeit und Temperatur. Die Auswertung und Visualisierung der Daten erfolgte nach serieller Übertragung an den Browser analog zur bisherigen Abfrage der internen Sensoren. Naheliegend war schließlich auch die Kombination der SCD40-Daten mit dem IoT-Dienst ThingSpeak via WLAN.

Alle bisherigen Aktivitäten zur Datenkommunikation mit dem Calliope mini sind im zugehörigen Artikel dokumentiert. Aus dem Ergebnis lässt sich kaum schlussfolgern, wie viel Trial & Error dafür nötig war. Natürlich sind es genau diese Erfahrungen, welche erst zu detaillierten Erkenntnissen und funktionierenden Anwendungen führen. Die dabei umgesetzten Ideen sollten für andere an dem faszinierenden Thema Interessierte ebenfalls nützlich und fortführbar sein. Die gesamte Codebasis steht für eigene Experimente zur Verfügung.

Calliope mini sendet Daten: Mein Interesse am Einplatinencomputer Calliope mini wurde bereits Ende 2017 geweckt. Nach ersten Programmiererfahrungen, speziell unter Nutzung der Entwicklungsumgebung MakeCode und JavaScript als Codebasis, kam das Gerät je nach Interessenlage der Studierenden in Kursen zur Web-Entwicklung zum Einsatz. So auch im aktuellen Sommersemester. Dabei wurde ich wiederum selbst getriggert, mir interessante oder sogar neue Dinge anzuschauen. Bekanntlich haben die Geräte aller drei Generationen bereits ab Werk einige Sensoren eingebaut, u. a. für Geräuschpegel, Lichtintensität und Temperatur. Die zugehörigen Werte lassen sich zunächst formal auf dem durch 25 rote LEDs gebildeten Display ausgeben. Über die Web Serial API können serielle Daten an Web-Browser übertragen werden. Somit bot sich eine Kombination von Senden via Calliope sowie Empfangen und grafischer Verarbeitung in geeigneten Browsern an. Aktuell verfügen Chrome und Chromium-Derivate wie Edge und Opera über diese Möglichkeit.

Ein weiteres Experiment bezieht den externen WLAN-Adapter mit der Bezeichnung ESP8266 ein. Die zur Komponente gehörende MakeCode-Erweiterung wurde in ein Calliope-Programm integriert, um die genannten Sensordaten an den IoT-Dienst ThingSpeak zu senden und dort zu visualisieren. Weitere Details beider Umsetzungen beschreibt ein separater Artikel.

Dr.Explain meets XSLT: Wie bereits berichtet, kam im Wintersemester 2024/25 erstmalig das Help Authoring Tool Dr.Explain zur Erstellung von Online-Hilfen und mobilen Dokumentationen zum Einsatz. In diesem Umfeld entstand ein Ansatz zum Postprocessing des an bestimmten Stellen etwas unbefriedigenden HTML-Exports. Zur Anpassung bestimmter Stellen im (X)HTML-Code und zur Integration von Erweiterungen für den mobilen Einsatz wie spezieller Meta-Informationen und eines moderneren WebApp-Manifests wird XSLT 3.0 verwendet.

An den Kursen beteiligte Studierende können den »drex_postproc«-Prozess selbst ausführen und erhalten mit relativ geringem Aufwand die bereinigten bzw. aufgewerteten Dokumente. Technisch sind dafür nur überschaubare Kopieraktionen und die Anpassung eigener Konfigurationsdaten nötig, während der eigentliche Prozess über einen Batchjob gesteuert wird. Neben dem jeweils erzielten praktischen Ergebnis zeigt die entwickelte Anwendung die Mächtigkeit von XSLT und des eingesetzten Prozessors Saxon-HE für solche Problemstellungen. Ein Screencast veranschaulicht detailliert Hintergründe und die praktische Vorgehensweise. Update vom 10.03.2025: Ein weiterführender Artikel ist auf unserer KIW-Plattform erschienen.

Dr.Explain: Im Bereich der Technischen Dokumentation und Kommunikation werden zahlreiche Help Authoring Tools eingesetzt. Oft ist eine steile Lernkurve zu überwinden und die Werkzeuge stehen eher selten zu akzeptablen Konditionen zur Verfügung. Als sehr interessant erwies sich das in der vorlesungsfreien Zeit vor dem aktuellen Wintersemester ausführlich analysierte Produkt Dr.Explain. Es bietet die Möglichkeit zur intuitiven Erstellung vor allem von Online-Dokumentationen in Form von WebHelp, also als Topic-basierte Websites mit den üblichen Funktionen wie navigierbare Inhaltsstruktur, Index mit Schlüsselwörtern und Volltextsuche. Zudem sind Exporte nach CHM, DOCX und PDF möglich.

Da die Erstellung von Dokumentationen über eine an Office-Programme angelehnte Oberfläche ohne spezifische HTML-Vorkenntnisse erfolgt, entstehen sehr schnell und komfortabel entsprechende Ergebnisse. Die automatisierte Generierung der Ausgaben ist natürlich von den seitens des Anbieters zugrunde gelegten Coding-Techniken abhängig. Allerdings sind eigene Anpassungen von CSS und JavaScript möglich, um zusätzliche Anforderungen und Ideen umzusetzen. Die bisherigen Erfahrungen sind überraschend positiv und speziell die Nutzung der dankenswerterweise zur Verfügung gestellten Bildungslizenz ermöglicht den Studierenden produktives Arbeiten an Projekten im Bereich Softwaredokumentation.

Vimeo-Tutorials: Im März 2023 habe ich mir einen einfachen Vimeo-Account mit monatlich zwei Uploads eingerichtet, um einige der in den Onlinesemestern von 2020/2021 entstandenen Tutorials primär nachfolgenden Studierenden als Additiv zu Präsenzkursen und darüber hinaus Interessierten zugänglich zu machen. Es handelt sich im Wesentlichen um live aufgenommene Mitschnitte von BigBlueButton-Kursen mit all den hoffentlich verschmerzbaren Sprachartefakten wie ähm, sozusagen und tatsächlich ;).

Inhaltlich orientieren sich die aktuell 17 ausgewählten Videos an Standards und Technologien rund um XML & Co. von den Grundlagen bis hin zu spezialisierten Themen wie DITA, DocBook, MathML, SVG und XSLT.

MathML-Artikel: Die Mathematical Markup Language, kurz MathML, gehört zu den ältesten der im XML-Universum ansässigen Technologien. Die erste Spezifikation wurde vor 25 Jahren veröffentlicht. Ja, das klingt durchaus alt und leider war der Weg in die handelsüblichen Browser ebenso lang. Zwar haben Firefox und Safari ihre Hausaufgaben frühzeitig gemacht, aber andere verließen sich auf die Möglichkeit der HTML-Einbindung mittels MathJax, einer durchaus mächtigen JavaScript-Bibliothek (künftig ggf. noch für Formel-Einbindung über TeX/LaTeX nützlich).

MathML ist auch nach wie vor Teil meiner Kurse im Umfeld der Technischen Kommunikation. Dieses ᐅ Vorlesungsvideo aus einem der hinter uns liegenden Onlinesemester beschreibt die wesentlichen Grundlagen. Mit der neu aufgelegten W3C-Initiative MathML Core und der Anfang 2023 gestarteten Implementierung in Chrome sowie Chromium-Ableger wie Edge und Opera kommt MathML zu neuen, längst fälligen, Ehren. Meinen auf der tekom-Frühjahrstagung gehaltenen Vortrag konnte ich nun mit dem umfangreichen Fachartikel »Fabelhafte Formeln« ergänzen. Dieser ist im Entwickler Magazin 7.2023 erschienen (Artikel-Teaser, Volltext unter Fachartikel). Diese Demonstration bildet die Basis der Erläuterungen im Rahmen von 19 daraus abgeleiteten Listings. Danke an die Redaktion für das Interesse am Thema und die gelungene inhaltliche Umsetzung. <👍/>

SVG-Funktionsplotter: Für den im April 2023 zum Thema MathML (Core) gehaltenen Vortrag wurden einige Demos entwickelt, u. a. die Umsetzung einer alten Abituraufgabe. Daraus entstand die Idee für einen erweiterten Funktionsplotter. Die jeweils ausgewählte Formel wird mittels MathML (<math>…</math>) in den HTML5-Code integriert und ebenso der zugehörige Funktionsgraph, welcher durch punktweise Berechnung als SVG-Polyline entsteht (<polyline points="x1,y1 … xn,yn"/>). Über die Inspektor-Funktion des Browsers, üblicherweise via F12 aufrufbar, kann der relevante Code eingesehen werden. Zudem sind Optionen zur Berechnung und Anzeige von Extrema, Wendepunkten und Nullstellen sowie zur numerischen Integration mit Darstellung der zugehörigen Flächenstücke als SVG-Polygon vorhanden (<polygon points="…"/>, hier veranschaulicht).

Die Anwendung wurde mit 3000 Zeilen XSLT 3.0 auf der Basis von SaxonJS 2 und den dort verfügbaren Interactive-XSLT-Erweiterungen für das Event-Handling in der Browseranwendung umgesetzt. Das Projekt soll auch in meinem Lehrumfeld zur vertiefenden Beschäftigung mit XML- und Web-Technologien motivieren und ihre Attraktivität erhöhen.