Webbasierte Technologien im Einsatz

Offene Standards als Grundlage eines Schulbuches

Inf-Schule.de verwendet offen zugängliche Webtechnologien. Serverseitig setzt das Schulbuch auf die weit verbreitete Skriptsprache PHP. Dabei werden spezifisch für Inf-Schule.de entwickelte Routinen verwendet, um die Seiten schnellstmöglich an Besucher auszuliefern. PHP bietet trotz zahlreicher Kritik aus der Programmierszene viele Möglichkeiten und kann auf nahezu jedem Webserver ausgeführt werden. Zusätzlich ermöglicht es die Sprache den Autoren eine Kopie der gesamtem Seite auf ihrem Computer laufen zu lassen um an neuen Kapiteln zu arbeiten oder Verbesserungen einzupflegen. Im Bereich Infrastruktur ist geschildert, wie hier mit Problemen umgegangen wird.

Die Auslieferung der Seiten erfolgt in HTML, viele der Seiten verwenden bereits HTML5-Technologien, wie etwa SVG-Dateien für Bilder, sodass diese geräteunabhängig verlustfrei skalierbar sind. Zusätzlich setzt das Layout der Seite in großen Teilen auf CSS3 - etwa bei der Anpassung der Seite auf Geräte mit unterschiedlichen Bildschirmgrößen.

Damit die Auslieferung möglichst schnell erfolgen kann und unsere Autoren leicht vorhersehen können, wie sich die Elemente auf der Seite verhalten, verwenden sie direkt HTML um die Inhalte zu schreiben. Hilfe erhalten Sie in unserem Kapitel "Dokumentation". Dieses Kapitel ist ebenfalls auf Inf-Schule.de zu finden. An dieser Stelle sind alle für Autoren wichtige Elemente an einem Ort zusammengefasst und dokumentiert.

Der HTML Quelltext dieser Seite (Texte gekürzt) sieht dann wiefolgt aus:

<h2>Webbasierte Technologien im Einsatz</h2>

<img alt="Logo der serverseitigen Skriptsprache PHP - blaue Ellipse mit schwarzen Buchstaben p h p" autor="Biktora" class="mitte" height="106" lizenzcode="publicdomain" original="http://commons.wikimedia.org/wiki/File:PHP-logo.svg" src="php-logo.svg" title="Logo der serverseitigen Skriptsprache PHP" width="200"/>

<p>
	Inf-Schule.de verwendet ...
	<a href="http://www.php.net" title="Offizielle PHP Website">PHP</a>.
	Dabei werden ...
</p>

<p>
	Die Auslieferung der Seiten ...
</p>

<img alt="Logo des W3C Standards HTML5 mit Wortmarke - Orangenes Schild mit weißer Versionsnummer 5, darüber in schwarz der Schriftzug H T M L" autor="www.w3.org" class="mitte" lizenzname="Creative Commons BY 3.0" lizenzurl="https://creativecommons.org/licenses/by/3.0/deed.en" original="http://www.w3.org/html/logo/index.html" src="HTML5_logo_and_wordmark.svg" title="HTML5 Logo" width="200"/>

<p>
	Damit ... Kapitel zur
	<a href="infschule/dokumentation" title="Gehe zur Dokumentation">"Dokumentation"</a>.
	Dieses Kapitel ist ... <a href="infschule/dokumentation" title="Gehe zur Dokumentation">zu finden</a>.
	An ... und dokumentiert.
</p>

<p>
	Der HTML Quelltext dieser Seite (Texte gekürzt) sieht dann wiefolgt aus:
</p>

<p>
	Für das sogenannte Frontend - ...
	<a href="http://www.jquery.org" title="jQuery Projekthomepage">jQuery</a>
	...
</p>

<img alt="Logo von jQuery - Schriftzug" autor="The jQuery Foundation" class="mitte" lizenzname="MIT License" lizenzurl="http://en.wikipedia.org/wiki/MIT_License" original="http://brand.jquery.org/logos/#the-mark" src="jquery-logo.svg" title="jQuery Logo" width="400"/>

<p>
	Zukünftig soll für ...
	<a href="https://angularjs.org" title="AngularJS Homepage">AngularJS</a>
	zum ...
</p>

<img alt="Logo von AngularJS von Google - Schriftzug" autor="Google Inc." class="mitte" lizenzname="MIT License" lizenzurl="https://github.com/angular/angular.js/blob/master/LICENSE" original="https://angularjs.org" src="AngularJS-large.png" title="AngularJS by Google Logo" width="200"/>

Für das sogenannte Frontend - die dem Besucher zur Verfügung stehende Oberfläche - wird an vielen Stellen JavaScript für interaktive Elemente verwendet. Dabei hilft jQuery die Verwendung von JavaScript zu vereinfachen.

Zukünftig soll für mehr interaktive Elemente AngularJS zum Einsatz kommen. Für die interaktiven Elemente des Bonsai Modellrechners wird das Framework bereits verwendet.