Höchste Zeit für die Digitalisierung meiner Rezepte: meine gesammelten Lieblingsrezepte digitalisieren und nach Kategorien mit dem Tablet in der Küche auswählen, das ist mein Wunsch. Schluss mit handschriftlichen Zetteln oder Zeitschriftenseiten die fast nicht mehr lesbar sind, deren Lochung ausgerissen ist und dem misslungenen Versuch Ordnung zu schaffen.
XML macht es möglich: Rezepte sind strukturierte Informationen, bestens geeignet sie in einer XML-Datei mit Rezeptstruktur zu speichern. Javascript und Saxon JS ermöglichen es Inhalte einer XML-Datei dynamisch im Browser auszulesen.
Geplant – getan. Die ersten meiner gesammelten digitalen Rezepte sind in einer XML-Datei gespeichert und in einer Online-Webanwendung wird diese Rezepte XML-Datei dynamisch verarbeitet. Die Schritte sind im einzelnen:
- Die Rezepte in einer XML-Datei erfassen
- Eine Webseite aufbauen, die aus der Rezepte XML-Datei dynamisch die Rezepte ausliest und darstellt
- Notwendige Technik: Javascript und SaxonJS
- mysql und php sind nicht notwendig!
Die XML-Datei mit den Rezepten
Die Struktur der XML-Datei für die Rezepte wollte ich nicht neu erfinden, es gibt bereits eine DTD für Rezepte: recipeML. Ein Beispielrezept basierend auf dieser DTD zeigt die Struktur.
Notwendige Anpassungen
Um die DTD für meine Anwendung nutzen zu können musste ich zwei Punkte anpassen:
- Foto zum Rezept. Dieses habe ich als Attribut img_ref im Titelelement des Head-Elements aufgenommen
- Mehrere Rezepte in einer XML-Datei speichern. Das Element recipe darf nun mehrfach in der XML-Datei vorkommen. Es war in der ursprünglichen DTD nur einmal erlaubt.
Im Head eines Rezeptes nach recipeML können Rezeptkategorien definiert werden. Folgende drei Kategorien habe ich für die Erfassung meiner Rezepte definiert. Für jede Kategorie habe ich eine Liste von Werten definiert und vorgegeben.
- Rezeptkategorie: Beschreibt die Art des Rezeptes
- Eigenschaft: Was ist ist die besondere Eigenschaft des Rezeptes
- Ernährungstyp: Welche Ernährungsart deckt das Rezept ab
Die Webseite
Wie der Inhalt einer XML-Datei dynamisch im Browser verarbeitet werden kann war Thema eines Vortrags bei der Tekom-Tagung. Angewandt auf meine Rezepte habe ich folgendes geplant:
- Die Rezepte sollen nach Rezeptkategorien auswählbar sein
- Mit der Auswahl werden die Rezepte dieser Kategorien als Liste und im Detail angezeigt
- Die Anzeige des einzelnen Rezepts ist über die Rezepteliste steuerbar
Technik um XML-Inhalte im Browser dynamisch auszulesen
Für die Realisierung wird folgendes benötigt:
- Die Saxon-JS Bibliothek
- Eine action.js Datei
- Die HTML-Datei (Webseite)
- Die Rezeptesammlung als XML-Datei
- Das Stylesheet Export Files (SEF), erzeugt aus dem XSL-Stylesheet
JavaScript führt XSL-Stylesheets im Browser aus. Diese Stylesheets können auf XML- oder JSON-Dateien angewendet werden.
„Saxon-JS ist eine XSLT 3.0-Laufzeitumgebung, die in reinem JavaScript geschrieben wurde. Es wurde entwickelt, um Stylesheets, die von Saxon-EE zusammengestellt wurden, in einem Zwischenformat (genannt Stylesheet Export File oder SEF) auszuführen.“
http://www.saxonica.com/saxon-js/documentation/index.html#!about
Saxon-JS läuft im Browser, liest das Stylesheet Export File (SEF) ein und führt es aus.
Um interaktive clientseitige Anwendungen zu realisieren kann das Stylesheet Regeln enthalten, wie auf Benutzereingaben zu reagieren ist, z. B. auf das Klicken auf Schaltflächen. Die im Stylesheet hinterlegten Regeln legen fest, wie damit Inhalte der HTML-Seite geändert werden.
Das Stylesheet Export File (SEF) kann aus dem XSL-Stylesheet mit Saxon-EE erzeugt werden. Saxon-EE ist kostenpflichtig.
Alternativ kann der Oxygen XML-Editor zur Erzeugung des Stylesheet Export Files (SEF) genutzt werden. Im Oxygen XML Editor ist Saxon-EE enthalten.
Die action.js Datei
Diese Datei definiert, welche Datenquelle (XML-Rezepte-Datei) mit welchem Stylsheet Export File (SEF) ausgelesen werden soll.
Die HTML-Datei
In der HTML-Datei sind die div mit einer ID versehen, die dynamisch aus der XML-Datei befüllt werden. Beispiel: in die div mit der ID „kategorien“ wird der dynamisch aus der Rezepte-XML-Datei gelesene Inhalt dargestellt.
Das Stylesheet (XSLT)
Die Rezepte werden im Stylsheet nach Kategorien gruppiert. In einer Tabelle wird in der linken Spalte die Kategorie, in der rechten Spalte die Checkbox dargestellt.
Im Browser wird durch klicken der Checkbox der Wert des style-Attributs display geändert.
Alle Rezepte der XML-Datei werden in die HTML-Seite geladen. Dass nur die ausgewählten sichtbar sind wird über die css-Attribut style:display gesteuert. Die Umsetzung für die Details der Rezepte ist analog.
Erweiterbarkeit
Für weitere Rezepte muss nur die XML-Datei erweitert, validiert und hochgeladen werden. Die Digitalisierung meiner Rezeptesammlung hat begonnen.
Downloads
Im Download-Paket sind folgende Dateien enthalten:
- Datei action.js
- Datei ca_rezepte.xml mit den Rezepten
- Datei ca_rezepte.sef, das erzeugte Stylesheet Export File
- Datei ca_rezepte.xsl, das XSL-Stylesheet
- Datei rezepte.html, die HTML-Seite der Rezepte
- Datei recipeml_plus.dtd, die angepasste DTD-Datei
- Die Fotos der Rezepte
Die Saxon-JS Bibliothek muss zustäzlich hier heruntergeladen werden. Die css-Dateien sind nicht im Paket enthalten.