Export statischer HTML-Dateien¶

DaVinci bietet zwei alternative Wege an, um HTML-Seiten zu erzeugen:

• Statische HTML-Seiten durch den HTML-Export über das gleichnamige Dialogfenster in daVinci. Dabei werden eine Reihe von Dateien für die angefragten Stundenpläne bzw. Vertretungspläne erzeugt, die Sie auf Ihre Website hochladen können. Diese Seiten können von CONFIRE SHOWTIME und anderen Anzeigeprogrammen für Info-Bildschirme (Digitales Schwarzes Brett) an Ihrer Schule verwendet werden. Hierfür benötigen Sie eine Lizenz für DaVinci INTERNET.

• Dynamische HTML-Seiten über den DaVinci InfoServer. Der Webbrowser erhält dabei mittels des daVinci InfoServer vom DaVinci Enterprise Server die jeweils angeforderte aktuelle Seite, das ständige Erzeugen und Hochladen von Dateien z.B. bei Planänderungen entfällt. Weitere Informationen finden Sie in der Dokumentation zum DaVinci InfoServer. Hierfür benötigen Sie eine Lizenz für DaVinci InfoServer.

Sie können Pläne mit und ohne Vertretungsplaninformationen sowie Vertretungspläne als HTML-Seiten exportieren und so auf Ihrer Website publizieren. Rufen Sie dazu das HTML-Export-Fenster auf, welches im Wesentlichen die gleichen Einstellungen wie das Drucken-Fenster (siehe Publikation per Ausdruck aufweist, weshalb wir im vorliegenden Kapitel nur auf die Unterschiede eingehen werden.

Klicken Sie auf Publizieren > HTML-Pläne exportieren um das Dialogfenster HTML-Export-zu öffnen.

HTML-Ordner festlegen¶

Bevor Sie mit dem HTML-Export beginnen, müssen Sie im Fenster Extras > Optionen in der Ansicht Internet den Ordner für alle HTML-Exporte eingeben. Beim Exportieren von HTML-Plänen werden diese in diesem Ordner abgelegt und können von dort auf Ihre Website kopiert werden.

Der „HTML Vorlagen Ordner“ enthält die für den HTML-Export wichtigen Unterordner:

• CSS
• HTML
• JS
• Sandbox

Diese Ordner werden in den folgenden Kapiteln erläutert.

HTML-Exportformate¶

Wie auch beim Drucken richtet sich das Aussehen der gedruckten Pläne nach dem im HTML-Export-Fenster unter „HTML-Exportformat“ eingestellten Exportformat. Es wird bei jedem Export eine Indexdatei „index.html“ und eine entsprechende Anzahl von Plandateien erzeugt. Die HTML-Exportvorlage in der Datei daVinci.hfm verweist auf eine HTML-Seitenvorlagedatei für die Inhaltsseiten und eine Seitenvorlagedatei für die Indexseite.

HTML-, JavaScript- und CSS-Vorlagen¶

Der daVinci HTML Präprozessor erzeugt aus

• den DaVinci Plandaten
• einer HTML-Seitenvorlage Datei (das ist die im HTML-Exportformat angegebene HTMLSeitenvorlagedatei aus dem Ordner „HTML“, die Standardvorlagedatei heißt „davinci. content.main.html“)
• einer CSS-Layoutvorlage Datei (das ist die im HTML-Exportformat angegebene CSSVorlagedatei aus dem Ordner „CSS“, die Standardvorlagedatei heißt „davinci. content.main.css“)

• den JavaScript-Dateien aus dem Ordner „JS“ die HTML-Dateien, die in dem im HTML-Exportformat angegebenen Export-Unterordner abgelegt werden. DaVinci erzeugt HTML5 und CSS3 kompatible HTML-Seiten. Im Export-Unterordner werden folgende Dateien bzw. Ordner angelegt:

• Die Indexdatei index.html, die den Index für die nachfolgenden HTML-Dateien enthält

• Die HTML-Dateien für die Pläne bzw. Vertretungspläne
• Den Unterordner „Sandbox“, der die Layout-Dateien enthält, insbesondere die CSS-Datei, die Grafikdateien sowie ggf. JavaScript-Dateien.

Sowohl die HTML-Seitenvorlage-Datei wie auch die CSS-Layoutvorlage Datei kann DaVinci-spezifische Platzhalter enthalten, die vom daVinci HTML-Präprozessor beim Erzeugen der Ausgabedateien entsprechend mit DaVinci-Inhalten ersetzt werden. Ersetzungen werden nur in Dateien mit dem Präfix „davinci.“ durchgeführt. Z.B. wird der Platzhalter %HOMEPAGE% durch den Link zu Ihrer Homepage ersetzt. Die möglichen daVinci Platzhalter sind in den beiden nachfolgenden Kapiteln beschrieben.

Die HTML-Seitenvorlage-Datei¶

Die HTML-Seitenvorlagedatei gibt den Rahmen für alle von DaVinci erzeugten HTML-Seiten vor, also die Index-Datei und alle weiteren HTML-Dateien. Sie enthält die Inhaltsstruktur der HTML-Datei und ggf. Platzhalter, aber keine Layout Informationen. Die Standard Seitenvorlagedatei heißt davinci.content.main.html. Den einzige Platzhalter der zwingend in der HTML-Vorlagedatei verwendet werden muss, ist der Platzhalter %DAVINCICONTENT%, der von DaVinci durch den eigentlichen Inhalt, d.h. den Index, den Plan oder die Vertretungsliste ersetzt wird. Die meisten Platzhalter werden durch die Angaben unter Meine Daten im Optionen-Dialogfenster ersetzt.

Platzhalter für HTML-Seitenvorlage Datei¶

HTML-Vorlagedateien¶

Folgende HTML-Vorlagedateien werden durch die Installation mitgeliefert:

Die CSS-Layoutvorlage¶

Die CSS Layout Vorlage Datei enthält alle Layout Informationen (z.B. Schriftart, Schriftgröße, Farben) für die Anzeige der HTML-Dateien in einem Webbrowser. Standardmäßig sind dies die Dateien davinci.index.main.css und davinci.content.main.css.

Wenn Sie Schriftart, Schriftgröße, Farben usw. verändern möchten, nehmen Sie CSS-Datei und verändern Sie die Attribute entsprechend.

Die JavaScript-Layoutskripte¶

Die JavaScript Dateien werden für diverse Effekte verwendet.

Platzhalter für JavaScript Dateien¶

HTML-Export in eigene Website einbinden¶

Durch die Veränderung der HTML-Seitenvorlage Datei und der CSS-Layoutvorlage Datei können Sie die Gestaltung des DaVinci HTML-Exports frei an die Stilvorgaben Ihrer Website anpassen. Ein gutes Nachschlagewerk für die Themen HTML5, CSS und JavaScript finden Sie z.B. auf der Website http://www.w3schools.com.

HTML-Export für Public Displays¶

Folgende Vorlagen werden spezielle für HTML-Exporte für Public Displays (z.B. CONFIRE SHOWTIME) mitgeliefert:

Der DaVinci InfoServer erlaubt es Ihnen, HTML-Seiten auf Ihrer Website zu publizieren, ohne expliziten HTML-Export. Weitere Informationen hierzu finden Sie unter www.stueber.de oder in unserer Dokumentation.

Vertretungslisten für Public Displays¶

Verwenden Sie die Seitenvorlage davinci.content.showtime.subst.html um Vertretungslisten auf Public Displays anzuzeigen. Die Vertretungslisten per JavaScript werden automatisch weitergeblättert, wenn die Anzahl der Zeilen die angegebene Maximalanzahl für eine Seite überschreitet. Diese Seitenvorlage Datei verweist auf die Dateien:

• davinci.listflip.js
• davinci.content.main.css

Erzeugen Sie einmal einen HTML-Export mit DaVinci. Anschließend befinden sich veränderte Kopien dieser beiden Dateien im Ordner „Sandbox“:

• Die Datei davinci.content.main.css enthält jetzt die angegebene Schriftgröße und die Datei davinci.listflip.js die Anzahl der Zeilen je Seite.
• Kopieren Sie beide Dateien in ein öffentliches Verzeichnis auf Ihrer Website und ändern Sie die URLs auf diese beiden Dateien in der Datei davinci.content.showtime.subst.html.

Ausschnitt aus der Datei "davinci.listflip.js"¶

// davinci.listflip.js -- STÜBER SYSTEMS
//
var reloadFlag = false;
$.fn.scrollUp=function(){
// set vars
var showCount = %MAXROWSPERPAGE%; // rows per page
var newPageTime = 10000; // next page time in 1/1000sec
var tableRows = $(this).children(); // this = tbody
var rowCount = tableRows.length;
// check rowCount
if (rowCount <= showCount) return;
// set startNo, endNo, pageNo, pageCount
var pageCount = Math.ceil(rowCount/showCount);
var startNo = 0, endNo = showCount, pageNo = 1;
// hide all rows, show startNo...endNo and set pageInfo
tableRows.slice(0).hide();
tableRows.slice(startNo, endNo).fadeIn();
$('#PageInfo').text(pageNo + "/" + pageCount);

Datei "davinci.content.showtime.subst.html"¶

//<!DOCTY html>
<!-- daVinci substitution list with SHOWTIME like JavaScript list flipping -- STÜBER SYSTEMS 2013 -->
<html class="no-js">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>daVinci</title>
<meta name="description" content="timetable">
<meta name="GENERATOR" content="%CREATOR%" >
<meta name="Author" content="%AUTHOR%">
<meta name="Keywords" con-tent="daVinci,timetable,timetabler,Stundenplanprogramm,Stundenplansoftware,Stundenplan">
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="page-topic" content="daVinci Stundenplan" >
<meta name="language" content="de, deutsch, at, ch, german" >
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="sandbox/davinci.listflip.js"></script>
<link rel="stylesheet" href="sandbox/davinci.content.main.css">
</head>
<body>
<div id="PageInfo">1/1</div>
%DAVINCICONTENT%
</body>
</html>