Webbasierte Technologien im Einsatz

Offene Standards als Grundlage eines Schulbuches

Logo der serverseitigen Skriptsprache PHP - blaue Ellipse mit schwarzen Buchstaben p h p[1]

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.

Logo des W3C Standards HTML5 mit Wortmarke - Orangenes Schild mit weißer Versionsnummer 5, darüber in schwarz der Schriftzug H T M L[2]

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

<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 src="HTML5_logo_and_wordmark.svg" title="HTML5 Logo" 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" original="http://www.w3.org/html/logo/index.html" lizenzurl="https://creativecommons.org/licenses/by/3.0/deed.en" lizenzname="Creative Commons BY 3.0" width="200" class="mitte">

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

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

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

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.

Logo von jQuery - Schriftzug[3]

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.

Logo von AngularJS von Google - Schriftzug[4]

Quellen

X

Fehler melden

X

Suche