Digitalisierung @home oder wie wird die eigene Rezeptsammlung mit XML digital

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.

Hauptsturktur Rezept nach recipeML. Ein Rezept (recipe) besteht aus Kopf-Informationen (head), Zutaten (ingredients), Zubereitung (directions) und Informationen zur Ernährung (nutrition)

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.
Mehrfache Rezepte, das Bildelement im Titel und die Rezeptkategorien in der angepassten recipeML

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
Auswahl der Rezepte in der Webanwendung nach Kategorien zeigt die Rezepte der ausgwählten Kategorie in der Rezepteliste an und die Details zu den Rezepten.

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)

Stylesheet für die Übersicht der Rezeptkategorien

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.

Ein- und ausschalten der Sichtbarkeit der Rezepte

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.

Screenshot des html Codes der Webseite der Entwickleransicht des Brwosers. Im gezeigten Screenshot ist die Kategorie Kuchen angeklickt
der html Code im Browser
Der html Code im Browser: die Rezepte der Kategorie Kuchen werden dargestellt.

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*