Zeitschalter und Diagramme für Websites

Feature: Diagramme im SVG-Format
In Vorträgen nutzen Vortragende oft Diagramme, weil ein Bild mehr als 1000 Worte sagt. Am PC ist ein Diagramm schnell und einfach mit Programmen wie 'Excel' erstellt.
Beim Surfen im Internet finde ich nur selten Diagramme. Warum? Fehlt die Technik?

Diagramme erstellen - heute
Um ein Diagramm auf seiner Webseite zu veröffentlichen, muss ein Anwender meist folgende Schritte abarbeiten.

• Der Anwender überträgt seine Daten in eine Datei.
• Mit einem Programm wie z.B. Excel generiert er aus den Daten ein Diagramm und speichert es als Pixel-Grafik im JPG- oder PNG-Format.
• Das Bild des Diagramms muss er vielleicht noch nacharbeiten, um zum Beispiel ein Firmenlogo einzufügen.
• Dann wird er das Diagrammbild auf seine Webseite hochladen.
• In seinem Content-Management-System (CMS) bestimmt er dann, wo das Diagramm als Bild angezeigt werden soll.

Wenn der Anwender später z.B. statt eines Balkendiagramms lieber ein Säulendiagramm präsentieren möchte, so wird er alle obigen Schritte erneut machen müssen, um das neue Diagramm zu erstellen. Die Erstellungsarbeit kommt auch jedes Mal auf ihn zu, wenn sich seine Daten ändern. Und wenn sich das Firmenlogo ändert, muss er sogar alle Diagramme neu erstellen.

Diagramme erstellen - morgen
Die Weiterentwicklung der Extension 'svt' wird die Erstellung von Diagrammen flexibler machen. Um ein Diagramm auf einer Webseite zu veröffentlichen, wird ein Anwender von TYPO3 vielleicht bald folgende Schritte abarbeiten.

• Der Anwender wird seine Daten in eine Datei übertragen, die er z.B. im Excel-Format speichern wird.
• Er wird diese Datei auf seine Webseite hochladen.
• Für die Seite, wo das Diagramm erscheinen soll, wird er im TYPO3 das Content-Element 'Diagramme' anlegen und mit der hochgeladenen Datendatei verknüpfen.
• Im Content-Element wird er die gewünschte Diagrammform und einige Layout-Details einstellen.

Das erstmalige Erstellen des Diagramms wird 'morgen' ähnlich aufwendig wie 'heute' bleiben. Aber die nachträglichen Änderungen werden einfacher und leichter werden. Wenn sich die Daten ändern, wird der Anwender nur die Datei im Excel-Format austauschen müssen. Wenn eine andere Diagrammform gewünscht wird, wird er nur die Einstellung im Content-Element ändern müssen. Und selbst wenn sich das Firmenlogo ändert, so wird er nur einmalig die Templates der verschiedenen Diagrammformen anpassen müssen. TYPO3 wird dann automatisch die Diagramme im neuen Gewand generieren.

Warum das SVG-Format für Diagramme
Die weiterzuentwickelnde Extension 'svt' wird Diagramme im SVG-Format erzeugen. Dieser Bildstandard bietet verschiedene Vorteile:

• SVG ist die Schwester vom HTML und kann/darf Texte enthalten, die auch Suchroboter leicht lesen und verstehen können. SVG ist gut für die Suchmaschinenoptimierung (SEO).
• SVG steht für die Abkürzung für 'Scalable Vector Graphics'. Diagramme im SVG-Format sind immer responsive.
• Layoutvorgaben wie Farben oder Schriften können wie beim HTML leicht über CSS gesteuert und geändert werden.
• SVG kann direkt in HTML eingebunden werden. Interaktives, wie der 'mouse-hover'-Effekte oder verlinkte Bildelemente, werden einfacher realisierbar sein als bei JPG-Bildern.
• TYPO3 als Service könnte zukünftig insbesondere für Webseiten-Betreiber interessant, die statt TYPO3 ein anderes CMS für ihre Webseite verwenden. (Wordpress, Drupal, ...). Sie könnten weiterhin ihr gewohntes CMS nutzen, aber zukünftig ihre Diagramme als Bilder 'on demand' von TYPO3 erzeugen lassen. [TYPO3 als Service]

'svt' ist schon verfügbar,oder? Ja, aber ..!
Die Extension 'svt' ist schon veröffentlicht und kann zum Beispiel kostenlos aus dem Repository der TYPO3-Seite heruntergeladen werden. Die aktuelle Version ist aber nur ein 'experimenteller' Prototyp.
Diese experimentelle Version enthält ein Plugin, welches beispielhaft einen Teil der zukünftigen Technik vorstellt. Auf der Seite http://www.düddelei.de/2018/test-von-svt/ können sie das Plugin in Aktion zu sehen. Es erzeugt zufällig Zahlen und generiert daraus im SVG-Format automatisch Balken- oder Torten-Diagramme.
Wenn sie auf der Beispielseite kein Torten-Diagramm finden, dann müssen sie einfach ein bis zwei Minuten warten, weil der Zeitschalter automatischen zwischen Torten- und Balkendiagrammen umschaltet. Der Zeitschalter wurde als Beispiel eingefügt. Das Plugin zeigt, wie das Überladens von Standardtemplates durch Schmucktemplates in Kombination mit dem Zeitschalter funktionieren kann.

Feature: Zeitschalter aushärten
Die Idee des Zeitschalters berührt das zweite Funding-Ziel. Grundsätzlich funktioniert der Zeitschalter. Aber er braucht immer die Timer-Klasse. Die Timer-Klasse selbst ist bislang nur an Hand weniger Testfälle geprüft worden. Die Klasse wird vermutlich noch Fehler enthalten. Sie soll durch Unit-Tests ausgehärtet werden. Die Programmierung dieser Tests sind das Ziel der zweiten Funding-Stufe.
Es gibt noch eine weitere Optimierungsideen. Wenn ich noch Entwicklungszeit übrig habe, werde ich diese umzusetzen versuchen.

Begleitaktivitäten zusätzlich zum Programmieren
Die zeitliche Steuerung von Inhalten könnte Seiteneffekte für die Suchmaschinenoptimierung (SEO) mit sich bringen. Ich möchte dies mit einem Beispiel illustrieren.
Flexibilität contra Suchmaschinenoptimierung
Der Betreiber der Webseite 'tageszeiten' hat auf seiner Seite morgens andere Besucher als nachmittags oder abends. Mit dem Zeitschalter steuert er deshalb zu verschiedenen Tageszeiten die Inhalte und das Aussehen seiner Webseite. So hat er seine Seite für seine Besucher optimiert.
Der Betreiber einer Suchmaschine möchte seine Besucher möglichst gut bedienen. Da die Suchroboter seiner Suchmaschine die Webseite 'tageszeiten' zu verschiedenen Tageszeiten besucht, werden ständig wechselnde Inhalte festgestellt. Die Suchmaschine indexiert die Webseite entsprechend schlecht, weil sich die Inhalte häufig und 'unvorhersehbar' ändern.
Der Betreiber der Webseite 'tageszeiten' wird also für die Optimierung seines Informationsangebots durch den Suchmaschine-Betreiber 'bestraft'.
Ursache: fehlende Kennzeichnungskonvention
Ähnlich wie beim Problem des doppelten Contents gibt es für dieses Dilemma eine technische Lösung. Denkbar wären Kennzeichnungskonventionen. Der Webseitenbetreiber von 'tageszeiten' kann nicht kennzeichnen, was sich zu verschiedenen Tageszeiten ändert und was von seinen Inhalten statisch ist. Der Suchroboter der Suchmaschine kann wegen fehlender Kennzeichnung beim Indexieren nicht zwischen variablen und statischen Inhalten unterscheiden. Wenn das zweite Funding-Ziel erreicht wird, werde ich auch versuchen, eine Diskussion zur Normung der Kennzeichnung von temporär-variablen Inhalte anzuregen.

Ziele:

• Eine TYPO3-Webseite soll mit Daten aus einer Datei im Excel-Format verschiedene Diagrammformen im SVG-Format erzeugen können.
• Ein neues Content-Element 'Diagramm' soll definiert werden.
• Die Timer-Klasse für den Zeitschalter soll durch Unittests ausgehärtet werden.
• Der Zeitschalter und die Diagrammgenerierung in der Extension 'svt' für TYPO3 8.7 soll weiterentwickelt werden.

Zielgruppen:

• TYPO3-Anwender, die ihre Leser mit ansprechenden Diagrammen überzeugen wollen,
• Anwender anderer CMS, die über 'TYPO3 als Service' ihre Leser mit Diagrammen überzeugen wollen,
• Anwender, die Tabellen für die Webseite statt des mühevoller Tipparbeit im RTE-Editor lieber aus Dateien im Excel-Format auslesen lassen wollen,
• Anwender, die ihre Webseite zu Weihnachten oder für periodische wiederkehrende Aktionen schmücken wollen.

Freie Open-Source-Software wie TYPO3 kann von jedem jederzeit kostenfrei benutzt und weiterentwickelt werden. Das Gleiche gilt auch für die geplante Weiterentwicklung der TYPO3-Extension 'svt', die über das vorliegende Crowdfunding finaziert werden soll. Wegen der gewählten Lizenzform wird die auch in Zukunft gelten.

Auch Open-Source-Software kostet
Eine Software, die mehr als ein Prototypen sein soll, braucht viele Stunden Zeit für das Testen, Optimieren und Aushärten. Gute Software entwickelt sich wie ein gutes Buch nur durch stete Überarbeitung.
Gleichzeitig ist freie Software für 'alle' kostenlos verfügbar und kann ohne Lizenz-Gebühren genutzt werden. Staatliche Programme zur Förderung der digitalen Open-Source-Infrastruktur sind mir nicht bekannt. Deshalb bleibt mir nur der Weg über das Crowdfunding.
Ich möchte meine Zeit ordentlich bezahlt bekommen, die ich zum Nutzen der Allgemeinheit aufwenden werde.

Sie finanzieren über diesey Crowdfunding die Weiterentwicklung der TYPO3-Extension 'svt'. Die neue Version der Extension wird genauso wie TYPO3 unter der GPL-Lizenz veröffentlicht werden. Sie garantiert, dass die Extension von jedermann kostenfrei genutzt und weiterentwickelt werden.

Erstes Funding-Ziel - Diagramme
Beim Erreichen der ersten Funding-Stufe werden bis zur Veröffentlichung noch viele Arbeiten nötig werden:

• Eine im Internet verfügbare Programmklasse zur Einbindung von Excel-Dateien muss integriert werden.
• Für die Konstruktion des Diagramme werden die Hilfsrechnungen schneller werden müssen.
• Es wird eine Schnittstelle für Entwickler geben müssen, über welche diese eigene Zusatzberechnungen für individuelle Diagramme ausführen können.
• Die Klasse der vordefinierten Zusatzberechnungen sollte durch Unittests abgesichert werden.
• Für die Extension werde ich ein Content-Element entwickeln müssen, das in möglichst einfach die Auswahl der Diagrammform, die Festlegung von Layouts und das Einbinden der Daten-Datei erlaubt.
• Zu einem Diagramm gehören Titel und Skalen, für die ich noch modular zuschaltbare Templates entwerfen muss.
• Für eigene Tests werde ich auch ein 'Tabellen-Template entwickeln müssen, dass Anwendern die einfache Veröffentlichung von Tabellendaten aus Dateien erlauben könnte.
• Für verschiedene Diagramm-Typen sind Templates zu entwickeln.
• Die Templates sind mit Browsern wie Edge, Chrome, Firefox und Opera zu testen.
• Ein Page-Type für Anwendungen von "TYPO3 als Service" sollte exemplarisch definiert werden.
• ...

Zweite Fundingziel - Zeitschalter
Ich bin Optimist. Ich glaube, dass auch die zweite Funding-Stufe locker erreicht wird. Dann kommen weitere Arbeiten auf mich zu:

• Die Unittests für die Timer-Klasse sind zu entwerfen.
• Ich werde versuchen, eine Diskussion anzustoßen, wie zeitlich variable Bereiche im HTML und SVG zu kennzeichnen sind.
• Die etwas komplexere Logik des Zeitschalters wird in einer Dokumentation zu beschreiben sein.
• Das Beispielplugin ist weiterzuentwickeln. Es wird exemplarisch zeigen, wie man den Zeitschalter nutzen kann.
• Falls genügend Zeit bleibt, wird eine User-Function für den Zeitschalter zu entwickeln sein, um auch Inhalte Inhalte zeitlich steuerbar zu machen.
• Falls genügend Zeit bleibt, werde ich die Extension schon auf das kommende TYPO3 9LTS anpassen.
• ...

Wenn das erste Funding-Ziel erreicht wird aber das zweite Funding-Ziel verfehlt wird, werde ich den Zeitschalter aus der Extension 'svt' entfernen.

Laufzeit
Da das Projekt in Nebentätigkeit erfolgt, rechne ich mit einer Entwicklungszeit von zirka 3 Monaten. Einige der Sponsoren bekommen als Dankeschön eine Kopie der Extension schon bis zu drei Monate vor der offiziellen Veröffentlichung im TER (TYPO3-Extenstion-Repository).
Als eigentlicher Veröffentlichungstermin im TER ist deshalb der 1.1.2019 geplant.