Sauberer Code

Bei dynamischen Inhalten, die Sie mittels Javascript, PHP, Perl oder Python bereitstellen, empfiehlt es sich, dafür die jeweils effektivste Sprache einzusetzen, die für die Webseite infrage kommt. Wenn möglich, nutzen Sie stets die aktuellste verfügbare Version. Berücksichtigen Sie dabei die üblichen Prinzipien der Programmentwicklung – Lesbarkeit, Dokumentation und Modularisierung der genutzten Komponenten. Das Verwenden von Vorlagen verringert die Fehlerquote und ermöglicht eine übergreifende Einheitlichkeit, die Ihnen die spätere Pflege der Webpräsenz erleichtert.

Sorgten früher komplexe Browserweichen für zusätzlichen Aufwand und graue Haare, müssen Sie als Entwickler heute die unterschiedlichen Ausgabegeräte im Auge behalten. Ein Leser mit einem Smartphone in der Hand hat andere Anforderungen an die Webseite als der Anwender vor dem PC. Mit ein wenig PHP-Code wie in Listing 3 identifizieren Sie das genutzte Gerät und senden eine spezifische Formatvorlage zurück. Nutzen Sie mehrere unterschiedliche Formatvorlagen, referenzieren Sie diese bei HTML5 analog zu Listing 4.

Listing 3

if(strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))
{
   // Anweisungen für Besucher mit einem iPhone
}

Listing 4

<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)">
<link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)">
<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)">

Auch beim Verwenden von Größenangaben in Formatvorlagen lauern kleine Stolperfallen. Um die Vorlagen für die verschiedenen Ausgabegeräte skalierbar zu machen, benutzen Sie darin am besten stets die Angabe em [31]. Die Einheit besitzt in der Typografie eine lange Tradition und bezeichnet die Geviertgröße, um darüber die horizontale Breite und die Anzahl der Lettern zu messen. Im Rahmen von CSS definiert sie die Anzahl der Pixel und erlaubt das Messen von Breite und Höhe, wobei hier lediglich die Proportionen der Seitenelemente von Interesse sind.

Haben Sie in der Formatvorlage die Größe des Seiteninhalts nicht über den BODY-Tag spezifiziert, kommen stattdessen die Einstellungen des Benutzers zur Geltung. Ähnliches gilt für die Angaben über Art und Größe der Schrift. Geben Sie stets eine generische Schrift als Notlösung mit an, wie etwa sans oder sans-serif. Fehlt die gewünschte Schrift im System des Besuchers, lädt der Browser wenigstens eine brauchbare Alternative.

Kompakter Code

Während die Form des HTML-Quelltexts für Sie als Webentwickler oder Redakteur durchaus von Relevanz sein dürfte, ist sie dem Webbrowser im Endeffekt egal: Leerzeichen, Einrückungen und Zeilenumbrüche ignoriert er. Es ergibt daher durchaus Sinn, auf dem Webserver eine kompakte und bereinigte Variante der Webpräsenz einzustellen. Damit verringern sich die zu transferierenden Datenmenge und die Aufbereitungszeit der Webseite erheblich.

Für diesen Schritt gibt es rund um das bereits angesprochene HTML-Tidy-Projekt eine Reihe nützlicher Werkzeuge, wie etwa das javabasierte JTidy [32], die Perl-Variante PTidy [33] sowie die Python-Schnittstelle für TidyLib [34]. Benutzer von Distributionen, die auf Debian basieren, kommen über das Paket libhtml-clean-perl in den Genuss des Programms htmlclean, das diese Aufgabe mit einer ansprechenden Ausgabe übernimmt (Listing 5). Dabei enthalten die Spalten nacheinander die Originalgröße der Datei, die Größe der komprimierten Version, den Grad der Reduktion und am Schluss den Dateinamen. Htmlclean legt zusätzlich eine Archivdatei mit der Erweiterung .bak an, sodass stets die Originaldatei erhalten bleibt.

Um die Komprimierung nicht stets von Hand ausführen zu müssen, steht mit mod_tidy [35] auch ein entsprechendes Modul für den Apache-Webserver zur Verfügung. Darauf geht der dritte Teil dieser Serie noch im Detail ein.

Listing 5

$ htmlclean -v *.html
  2317   1999 13% impressum.html
  3669   3276 10% index.html
 15361  13823 10% neuigkeiten.html

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • out of the box
    Unsicher, ob das HTML der eigenen Webseiten richtig ist? Hat der HTML-Export der Textverarbeitung oder der HTML-Editor Unfug produziert? Mit tidy räumen Sie auf.
  • Expressversand
    Durchdachte Einstellungen beim Webserver und kleine Tricks beim Optimieren machen lahmen Webseiten Beine.
  • Links auf Webseiten überprüfen mit Linkchecker
    Manche Domains sterben einen leisen Tod – zurück bleiben verwaiste Links, die dorthin zeigen. Mit Linkchecker identifizieren Sie solche Sackgassen in Ihrer Webpräsenz.
  • HTML-Editoren
    Der Weg zur eigenen Internetseite gerät ohne passendes Werkzeug recht steinig. Während Einsteiger ohne HTML-Kenntnisse nach einer komfortablen Layout-Hilfe verlangen, stoßen Kenner schnell an die Grenzen eines einfachen Texteditors. Für beide Welten stehen unter Linux gleich mehrere Programme bereit, die antreten das Designerleben zu erleichtern.
  • Interessante Tool für HTML5-Entwickler
    "HMTL5 rocks" – das findet nicht nur Google, und so gibt es bereits eine erkleckliche Anzahl von Ressourcen, Frameworks und Werkzeugen rund um den brandneuen Web-Standard.
Kommentare

Infos zur Publikation

LU 12/2017: Perfekte Videos

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Broadcom Adapter 802.11n nachinstallieren
Thomas Mengel, 31.10.2017 20:06, 2 Antworten
Hallo, kann man nachträglich auf einer Liveversion, MX Linux auf einem USB-Stick, nachträglich...
RUN fsck Manually / Stromausfall
Arno Krug, 29.10.2017 12:51, 1 Antworten
Hallo, nach Absturz des Rechners aufgrund fehlendem Stroms startet Linux nicht mehr wie gewohn...
source.list öffnet sich nicht
sebastian reimann, 27.10.2017 09:32, 2 Antworten
hallo Zusammen Ich habe das problem Das ich meine source.list nicht öffnen kann weiß vlt jemman...
Lieber Linux oder Windows- Betriebssystem?
Sina Kaul, 13.10.2017 16:17, 6 Antworten
Hallo, bis jetzt hatte ich immer nur mit
IT-Kurse
Alice Trader, 26.09.2017 11:35, 2 Antworten
Hallo liebe Community, ich brauche Hilfe und bin sehr verzweifelt. Ih bin noch sehr neu in eure...