Die große Stärke von HTML5

Verfasst am 28.03.2010 von Felix de Ruiter

HTML5 ist zurzeit in aller Munde und als Amateur-Webentwickler musste ich mich zwangsläufig auch irgendwann einmal damit auseinandersetzen. Zuerst habe mich sehr dagegen gesträubt, weil mir das mittlerweile längst wieder aufgegebene XHTML 2 vom Ansatz her deutlich besser gefallen hatte.

Was mich an HTML5 gestört hat:

  • keine Namespaces
  • kein RDFa
  • inkonsequenter Gebrauch des role-Attributs

So, das finde ich zwar auch heute noch doof an HTML5, aber ich bin ein Mensch, der sich lieber mit den Dingen, die er sowieso nicht zu ändern imstande ist, arrangiert, anstatt sich darüber aufzuregen. Irgendwann Mitte letzten Jahres habe ich dann damit begonnen, HTML5 näher unter die Lupe zu nehmen und bin kurze Zeit später vollständig von XHTML+RDFa, welches meiner Vorstellung von einer perfekten Auszeichnungssprache schon recht nahe kam, zu HTML5 gewechselt.

Meine Vorliebe für die strikte XML-Syntax musste ich nicht links liegen lassen, denn HTML5 unterstützt bekanntlich sowohl die Syntax von SGML als auch die von XML.

Und das ist super, denn so kann ich als Enwickler das Markup mit strikter Syntax schreiben und dann per Skript alles rausnehmen, was ich notwendig ist. Meine CMS-Eigenentwicklung Globacs entfernt während der Laufzeit alle unnötigen Anführungszeichen (<meta charset="UTF-8">), Slashes (<img />) und reduziert HTTP-Adressen in allen Links auf <a href="//example.org/">. Zusätzlich werden sämtliche Einrückungen und sinnlose Zeilenumbrüche entfernt.

So wird aus:

<DOCTYPE html>

<html lang="de">

	<head>

		<meta charset="UTF-8" />
		<title>Template</title>

	</head>

	<body>

		<p><a href="http://example.org/">Beispiellink</a></p>

	</body>

</html>

Letztendlich das:

<DOCTYPE html><html lang=de><head><meta charset=UTF8><title>Template</title></head><body><p><a href=//example.org/>Beispiellink</a></p></body></html>

Das Ganze kann dann zwar am Ende kein Mensch mehr lesen, aber dafür reduziert sich die Dateigröße jeder Seite auf ein Minimum und dem Anwender ist es eh egal, was im Quelltext steht. Und meine Templates bleiben sauber eingerückt und schön, wie ich sie haben möchte. :-)

Schlagwörter: , , , | Kategorien: Markup | 4 Kommentare »

Gutes CSS = besseres HTML

Verfasst am 11.02.2010 von Felix de Ruiter

Wenn man CSS-Selektoren geschickt einsetzt, kann man viele Klassen, und IDs einsparen, was letztendlich zu einem deutlich schlankeren und besser übersichtlichen Quelltext führt. Das neue Layout meines Online-Portfolios enthält nicht eine einzige Klasse oder ID. Das Stylesheet spricht die einzelnen Bereiche (Banner, Hauptnavigation, Inhalt, Seitenfuß usw.) einzig durch das semantische Attribut role an, welches Teil der HTML5-Spezifikation ist.

Aus diesem Code …

#header { ... }

… wird ganz einfach

header[role=banner] { ... }

… was im besten Falle zu

[role=banner] { ... }

… wird.

Dies lästt das Stylesheet zwar meist etwas umfangreicher werden, verhilft allerdings der Webseite zu einem auf Semantik und Leistung reduzierten Markup.

Beispiel:

<section id="wrapper">

  <header id="banner">

    <h1 id="logo">Titel der Website</h1>

  </header>

</section>

Kann auf Folgendes reduziert werden:

<section>

  <header role="banner">

    <h1>Titel der Website</h1>

  </header>

</section>

Der Layout-Umschlag (Wrapper) kann auf mehrere Arten angesprochen werden:

  • body > section { ... }
  • body section:first-child { ... }
  • body section:nth-child(1) { ... }

Soviel dazu. ;-)

Schlagwörter: , , , , , | Kategorien: Gestaltung | Markup | 1 Kommentar »

Grenzphilosophie v5.0

Verfasst am 9.02.2010 von Felix de Ruiter

Im Jahr 2008 entwickelte ich mein erstes richtiges Online-Portfolio mit dem Titel Grenzphilosophie. 2009 nahm ich die Website wieder aus dem Netz. Nun bastele ich an einem Relaunch der guten alten Grenzphilosophie und ein erster Entwurf ist bereits unter der bekannten Adresse (http://grenzphilosophie.de/) zu finden. Die kommenden Wochen werde ich dazu nutzen, die neue Site fertigzustellen und die Inhalte einzupflegen.

Die Grenzphilosophie v5.0 basiert auf HTML5 und CSS3. Das Layout entwickelte ich auf der Grundlage meines Mini-Frameworks Gloframe. Sobald alle Inhalte fertig sind, werde ich die Site auf meine Template-Engine Glogine aufsetzen und später mit meinem CMS Globacs, welches mit Gloframe und Glogine eine Einheit bildet, pflegen.

Schlagwörter: , , , , , , , | Kategorien: In eigener Sache | Keine Kommentare »