{"id":63743,"date":"2024-11-27T06:17:55","date_gmt":"2024-11-27T05:17:55","guid":{"rendered":"https:\/\/www.herr-rau.de\/wordpress\/?p=63743"},"modified":"2025-12-29T08:08:36","modified_gmt":"2025-12-29T07:08:36","slug":"wie-der-vertretungsplan-auf-den-monitor-kommt","status":"publish","type":"post","link":"https:\/\/www.herr-rau.de\/wordpress\/2024\/11\/wie-der-vertretungsplan-auf-den-monitor-kommt.htm","title":{"rendered":"Wie der Vertretungsplan auf den Monitor kommt"},"content":{"rendered":"<div style='text-align:right;'><small>(<a href='https:\/\/www.herr-rau.de\/wordpress\/2024\/11\/wie-der-vertretungsplan-auf-den-monitor-kommt.htm#comments'>6 Kommentare.<\/a>)<\/small> <\/div>\n<p>Mit Untis erstelle ich einen Vertretungsplan. Das ist aber nur die halbe Geschichte, denn der sch\u00f6nste Plan nutzt nichts, wenn ihn niemand kennt. Deshalb muss der erstellte Plan auch irgenwie publik werden.<\/p>\n\n\n\n<p>Dazu werden meistens HTML-Dateien erzeugt und exportiert. Das sind sogar meistens mehrere Dateien: f\u00fcr jeden Tag eine, also mindestens f\u00fcr heute und morgen, aber auch das in verschiedenen Fassungen, n\u00e4mlich als Ansicht gedacht f\u00fcr die Sch\u00fclys (mit weniger Informationen), f\u00fcr die Lehrkr\u00e4fte (mit mehr Informationen), f\u00fcr die Anzeige in der App, f\u00fcr die Anzeige auf einem Monitor in der Schule.<\/p>\n\n\n\n<p>Ganz unten in diesem Blogeintrag stehen ein paar Ideen zum Basteln, die sind dann vielleicht wieder f\u00fcr mehr Leute interessant. Denn es wird jetzt eine ganze Weile recht technisch, weil der Weg vom Vertretungsplanprogramm zum Monitor kein so ganz einfacher ist. Vielleicht macht ihn diese Grafik etwas verst\u00e4ndlich? (Draufklicken zum Vergr\u00f6\u00dfern.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur.png\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"702\" src=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur-700x702.png\" alt=\"\" class=\"wp-image-63747\" srcset=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur-700x702.png 700w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur-300x300.png 300w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur-150x150.png 150w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur.png 1400w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/figure>\n\n\n\n<p>Kleiner Scherz. Ich wei\u00df schon, dass das verwirrend aussieht. Das Diagramm ist ein in der Informatik verwendetes <em>Klassendiagramm<\/em>, das ich hier zweckentfremdet habe. Aber ich kann es selber gut lesen, und ich habe die Information auch in einer anderen Diagrammform dargestellt, wo sie mir noch un\u00fcbersichtlicher erscheint.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Wie die HTML-Seiten entstehen<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"292\" src=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_1-700x292.png\" alt=\"\" class=\"wp-image-63768\" srcset=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_1-700x292.png 700w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_1-300x125.png 300w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_1-150x63.png 150w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_1.png 1062w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Das <strong>gr\u00fcne<\/strong>, das ist das Vertretungsplanprogramm Untis. Damit kann man unterschiedliche <em>Vertretungsformate<\/em> erzeugen, und au\u00dferdem unterschiedliche Monitor-HTML. Das hei\u00dft so, weil das HTML produziert f\u00fcr die Ausgabe an einem Monitor. Dabei ist jedem HTML-Format ein Vertretungsformat zugeordnet (da kommen die Informationen her) und ein Ausgabetemplate, eine Art HTML-Vorlage (das bestimmt das Aussehen der HTML-Seite). Diese Zuordnung l\u00e4uft nur, soweit ich das wei\u00df, implizit \u00fcber Namensgleichheit; Untis sucht in einem speziellen Verzeichnis nach einem passenden Template, wenn ein solches Verzeichnis angegeben ist; sonst sucht es in einem Standardverzeichnis danach. Zu jedem Monitor-HTML geh\u00f6rt nun wieder ein eigenes Ausgabeverzeichnis, und in dem landen dann die fertigen HTML-Seiten und die Aufgabe von Untis ist erledigt. Wir haben vorliegen: verschiedene Verzeichnisse mit verschiedenen HTML-Dateien darin, verschiedene Vertretungspl\u00e4ne darstellend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Wie die HTML-Seiten zum Server kommen<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"310\" src=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_2-700x310.png\" alt=\"\" class=\"wp-image-63770\" srcset=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_2-700x310.png 700w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_2-300x133.png 300w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_2-150x67.png 150w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_2.png 1121w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Wenn man die Software DSB (Digitales Schwarzes Brett) nutzt, \u00fcbernimmt ab diesem Zeitpunkt diese. Dazu muss man lokal auf dem Rechner eine Software DSBsync installieren, das ist das <strong>gelbe <\/strong>im Diagramm. DSBsync \u00fcberwacht die angegebenen lokalen Verzeichnisse auf ge\u00e4nderten Inhalt und l\u00e4dt diesen auf einen zentralen Firmenserver hoch. Dazu muss DSBsync wissen, a) welche Verzeichnisse \u00fcberwacht werden sollen und b) wo deren Inhalt auf dem Server landen sollen. Potentielle Landepl\u00e4tze auf dem Server sind hier bereits vorgegeben, das hei\u00dft, man muss davor auf dem Server m\u00f6gliche Landepl\u00e4tze anlegen. Diese Zuordnung von lokalen Verzeichnissen zu serverseitigen Landepl\u00e4tzen ist die Aufgabe des im Hintergrund stets weiter laufenden DSBsync und damit ist dieser Punkt erledigt. (Das orange, das ist der potentielle Landeplatz.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Wie der Monitor wei\u00df, was er anzeigen soll<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"407\" src=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_3-700x407.png\" alt=\"\" class=\"wp-image-63769\" srcset=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_3-700x407.png 700w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_3-300x174.png 300w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_3-150x87.png 150w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_3.png 1400w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Das <strong>orange<\/strong>, das ist jetzt der Server, oder eher: die Webzugangsseite zum Server, mit der man bestimmte Einstellungen vornehmen kann. (Ja, genau da legt man die potentiellen Landepl\u00e4tze f\u00fcr das hochgeladene Zeug aus den lokalen Verzeichnissen, mithin HTML-Dateien, an.)<\/p>\n\n\n\n<p>Man verwaltet auf der Webseite mehrere Digitale Schwarzer Bretter, die entweder App-Zug\u00e4nge sind (jeweils mit eigenen, selbst gew\u00e4hlten Zugangsdaten; die App selber ist vorgegeben) oder Monitore (die im Schulgeb\u00e4ude verteilt und ans Internet angeschlossen sind). Die App-Zug\u00e4nge lasse ich mal weg und konzentriere mich auf die Monitore.<\/p>\n\n\n\n<p>F\u00fcr jeden <strong>Monitor <\/strong>kann man verschiedene <strong>Bildschirmeinteilungen <\/strong>anlegen; immer eine davon ist gerade aktiv, die anderen beh\u00e4lt man f\u00fcr besondere Anl\u00e4sse in der Hinterhand.<\/p>\n\n\n\n<p>Jede <strong>Bildschirmeinteilung <\/strong>kann aus mehreren <strong>Multimediamodulen <\/strong>bestehen, das sind letztlich wohl HTML-Frames. Die k\u00f6nnen nach Belieben platziert sein &#8211; eine kleine Fu\u00dfzeile oben, zwei gro\u00dfe Bereiche nebeneinander darunter, eine etwas gr\u00f6\u00dfere Fu\u00dfzeile darunter, ganz wie man will.-<\/p>\n\n\n\n<p>Jedem <strong>Multimediamodul <\/strong>(jedem Frame) ist ein <strong>Spot<\/strong> zugewiesen. Spots tragen den eigentlichen Inhalt. Derselbe Spot kan in verschiedenen Modulen in verschiedenen Bildschirmeinteilungen f\u00fcr verschiedene Monitore verwendet werden. Es gibt verschiedene Arten von Spots: Bild, Diashow, Powerpointdatei, Videodatei, Webseite. Im Kopfzeilen-Frame k\u00f6nnte man einen Bild-Spot zeigen, im Fu\u00dfzeilen-Frame einen Film- oder Diashow-Spot. Das sind alles relativ statische Inhalte, die man nur \u00e4ndern kann, indem man sich auf der Webseite einloggt und manuell etwas umstellt. F\u00fcr den Vertretungsplan w\u00e4re das umst\u00e4ndlich. (Gut, \u00fcber eine eingebundene Webseite l\u00e4sst sich auch immer Verschiedenes zeigen.)<\/p>\n\n\n\n<p>Und dann gibt es eine besondere Art Spot, den <strong>DSBSync-Spot.<\/strong> Das ist der Spot, dessen Inhalt man \u00e4ndern kann, ohne sich eigens einloggen zu m\u00fcssen. Denn das ist der Spot, der seine Informationen aus dem mit DSBsync synchronisierten lokalen Verzeichnis erh\u00e4lt. Ein DSBSync-Spot fragt etwa min\u00fctlich beim Firmenserver nach, ob dort neue Inhalte angekommen sind, l\u00e4sst sie sich schicken und zeigt sie dann an. Das k\u00f6nnen \u00fcbrigens auch Video- oder Bilddateien sein, oder eben, wie im Fall des Vertretungsplans, die von Untis erzeugten HTML-Seiten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Geht das nicht auch einfacher?<\/h2>\n\n\n\n<p>Kriege ich die HTML-Dateien nicht auch ohne DSB auf den Monitor? Klar. Also, ich nicht, aber jemand, der sich ein wenig auskennt, kann das sicher gut machen. Zu jedem Monitor braucht man einen Rechner, der im Netzwerk h\u00e4ngt und auf dem ein Browser die in einem zentral zug\u00e4nglichen Verzeichnis gespeicherten HTML-Dateien anzeigt und dabei die Seite jede Minute aktualisiert, weil ja inzwischen die Datei durch eine neue Fassung ersetzt worden sein k\u00f6nnte. Man m\u00fcsste einmal ein HTML-Frame-Ger\u00fcst bauen mit einer linken Seiten f\u00fcr &#8222;heute.htm&#8220; und einer rechten f\u00fcr &#8222;morgen.htm&#8220;. Automatisches Scrolling noch irgendwie dazu, wenn die Seite mal zu lang f\u00fcr den Platz werden sollte. Und halt die beiden Dateien regelm\u00e4\u00dfig ersetzen, das ginge wohl wie bisher.<\/p>\n\n\n\n<p>Am umst\u00e4ndlichsten scheint auf den ersten Blick die DSBsync-Br\u00fccke. Aber da f\u00e4llt mir keine andere gangbare L\u00f6sung ein. Vor allen kann ich so von der Schule aus eine DSBsync-Verbindung anlegen, die mein B\u00fcro-Verzeichnis S:\/ mit dem Sync-Spot &#8222;Plan Lehrkr\u00e4fte heute&#8220; verbindet, und von zuhause aus eine DSBsync-Verbindung anlegen, die mein Verzeichnis Z:\/ mit demselben Sync-Sport verbindet. Hei\u00dft, ich kann den Vertretungsplan dann nicht nur zuhause machen, das geht ja leicht, sondern auch die Monitore und die App von zuhause aus mit diesem Plan bef\u00fcllen. Theoretisch.<\/p>\n\n\n\n<p>Das nur f\u00fcr den Fall, dass ich doch mal wegen Corona oder so zuhause bleiben m\u00fcsste. Die Informationen dar\u00fcber, wer neu erkrankt ist und wer welche W\u00fcnsche hat, m\u00fcssten dann nur noch auf einem geeigneten Weg zu mir kommen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Bastelideen<\/h2>\n\n\n\n<p><strong>Man kann Schneeflocken \u00fcber den Vertretungsplan rieseln lassen,<\/strong> so wie wir in unseren Blogs vor zwanzig Jahren. Bei uns ein alter Hut, auf dem Vertretungsplan vielleicht noch originell. Muss man nur ein bisschen Javascript ins Untis-Template packen. Eine verlinkte js-Datei funktioniert vielleicht nicht, das habe ich aber noch nicht ausprobiert.<\/p>\n\n\n\n<p><strong>Man kann Bilder unterhalb der Vertretungsstunden anzeigen, <\/strong>zum Beispiel jeden Tag ein neues als Adventskalender, oder einen Adventskranz mit brennenden Kerzen als Video. (Gif ging bei mir nicht; vielleicht wird die Gr\u00f6\u00dfe konvertiert und dabei geht die ANimation verloren.) Das geht \u00fcber einen Sync-Spot.<\/p>\n\n\n\n<p><strong>Man kann den Vertretungsplan in einer neuen Schriftart darstellen,<\/strong> passend zu Weihnachten oder Halloween. (Auf offene Lizenzen achten, Urheberrecht.) <em>Eigentlich<\/em> ist es nicht schwer, eine Schriftart mitzuschicken, man schreibt dazu nur in einem &lt;style&gt;-Block:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: Schriftartname;\n  src:url('schriftartdatei.otf');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n\n\n\n<p>und w\u00e4hlt dann, immer noch bei den style-Angaben, f\u00fcr Body als Stil:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body: Schriftartname, Arial, Helvetica, sans-serif;<\/code><\/pre>\n\n\n\n<p>Dazu muss die URL der eingebetteten Schriftart stimmen, hier ist es ein relativer Pfad. Am DSB funktioniert das aber nicht. (Ich glaube, das liegt daran, dass Schriftartendateien gar nicht erst in die Sync-Spots hochgeladen werden. Au\u00dferdem w\u00fcrden sie ohnehin wie alle anderen dort hochgeladenen Dateien umbenannt in gehashte Form und w\u00e4ren dann auch nicht verf\u00fcgbar.) Absolute Pfade zu anderen URLs gehen auch nicht.<\/p>\n\n\n\n<p>Also muss man die Schriftart in die HTML-Datei selber einbauen, dann wird sie auf jeden Fall mitgeschickt. Das geht, indem man die Schriftart in Base64 als Textzeichen kodiert und so einbaut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Schriftartname';\n  src: url(data:application\/font-woff;\ncharset=iso-8859-1;base64,......................) format('woff');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n\n\n\n<p>Da, wo die vielen Punkte stehen, steht stattdessen eine laaaaaaaaange Folge der Zeichen A-Z, a-z, 0-9, \/ und + (und ganz am Ende =) &#8211; in meinem Schriftartenbeispiel etwa 115.000 solcher Zeichen. Klingt viel, sind aber immer noch nur etwa 115 KB. Diese Zeichenfolge ist die Repr\u00e4sentation der Schriftart-Datei in einem speziellen 64er-Stellenwertsystem. (Und das charset muss zur Seite passen, kann also auch utf-8 sein.)<\/p>\n\n\n\n<p>Das Ergebnis sieht dann so aus, oben die neue Schriftart, unten das Standard-Arial:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"380\" src=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_ausgabe_font-700x380.png\" alt=\"\" class=\"wp-image-63777\" srcset=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_ausgabe_font-700x380.png 700w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_ausgabe_font-300x163.png 300w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_ausgabe_font-150x81.png 150w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_ausgabe_font.png 1067w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Nichts f\u00fcr jeden Tag, aber kann man doch mal machen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Warum das alles?<\/h2>\n\n\n\n<p>Ich wollte nur mal herausfinden, wie das funktioniert. Auch weil ich die M\u00f6glichkeit haben wollte, von zuhause aus auf die Monitore zuzugreifen. Und weil ich sonst h\u00e4tte korrigieren m\u00fcssen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>(6 Kommentare.) Mit Untis erstelle ich einen Vertretungsplan. Das ist aber nur die halbe Geschichte, denn der sch\u00f6nste Plan nutzt nichts, wenn ihn niemand kennt. Deshalb muss der erstellte Plan auch irgenwie publik werden. Dazu werden meistens HTML-Dateien erzeugt und exportiert. Das sind sogar meistens mehrere Dateien: f\u00fcr jeden Tag eine, also mindestens f\u00fcr heute [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":63769,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[313],"tags":[142,227,335],"class_list":["post-63743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tagebuch","tag-blogbasteln","tag-informatik","tag-vertretungsplan"],"jetpack_featured_media_url":"https:\/\/www.herr-rau.de\/wordpress\/archiv\/untis_dsb_struktur_3.png","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/63743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/comments?post=63743"}],"version-history":[{"count":3,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/63743\/revisions"}],"predecessor-version":[{"id":63792,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/63743\/revisions\/63792"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/media\/63769"}],"wp:attachment":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/media?parent=63743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/categories?post=63743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/tags?post=63743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}