Relaunch mit HTML5, CSS3 und responsive Layout

Endlich habe ich es geschafft meinem Blog ein neues Design zu verpassen! Natürlich sollten bei diesem Relaunch die modernsten Techniken zum Einsatz kommen. Das Ganze muss ja schließlich auch auf den diversen mobilen Geräten ordentlich aussehen!

Unter der Haube hat sich einiges getan, so basiert mein neues Theme zwar auf dem Wodpress Standard Theme “Twentyeleven“, allerdings in stark abgewandelter Form. Der Vorteil von Twenty Eleven ist, dass dieses schon von Haus aus massiv auf HTML5 setzt, was man an den vielen neuen, semantischen Tags erkennen kann. Außerdem bietet Twentyeleven ein responive Layout, also ein Layout das sich an die Bildschirmauflösung des Betrachters anpasst, damit auch Leute die die Website mit mobilen Geräten wie Smartphones oder Tablets ansurfen ein optimiertes Design erhalten. Optimiert heißt in diesem Fall, dass Elemente wie z.B. die Randspalte (Sidebar) eine komplett andere Position einnehmen.

Ich habe mir erlaubt das Theme fast ausschließlich mit CSS3 zu stylen. Das hat den Vorteil, dass ich so gut wie keine Grafiken einsetzen musste. Farbverläufe, runde Ecken, Schatten, Transparenz, eingebettete Schriften, und sogar das Muster im Hintergrund  lassen sich ganz ohne lästiges Zusammenschnipseln von zig Grafiken realisieren. Dadurch nimmt natürlich auch die Performance der Website enorm zu. Der Browser muss schließlich wesentlich weniger Requests ausführen, sprich weniger Dateien laden.

Natürlich hat das Ganze auch Nachteile, so wird ein Großteil der CSS3 Funktionen nicht von älteren Internet Explorer Versionen unterstützt und mit älter meine ich IE7 und IE8! Allerdings bin ich der Meinung, dass es völlig in Ordnung ist, wenn die Website in diesen Browsern halt ein bisschen anders aussieht. So lange keine ernsthaften Darstellungsfehler auftreten ist es doch völlig ok, wenn gewisse Elemente halt dann keine runden Ecken haben, oder Ähnliches.

Eine konzeptionelle Änderung meines neuen Layouts ist der Austausch der Kategorienavigation durch die Tagcloud als  zentrale Hauptnavigation. Ich denke, so gelangen meine Besucher schneller und intuitiver zu den Artikeln, die sie interessieren.

Desweiteren habe ich neue Plugins installiert, wie z.B. die “ähnlichen Artikel”. Dieses Plugin bietet dem Leser anhand der vergebenen Tags am Ende des Artikels eine Auswahl von Links zu Artikeln aus dem selben Themengebiet an.

Natürlich mussten auch sämtliche sozialen Netzwerke wieder mit eingebunden werden. Deshalb ist alles total connected mit Google +, Facebook, Twitter und diversen anderen Social Media Plattformen wie Tumblr oder Delicious.

Also, ich hoffe mein neues Design gefällt euch! So long and thanks for all the shoes!

Website mit RDFa

Update 23.02.2011: Habe mich entschieden, das RDFa Plugin wieder zu entfernen, da sich der W3C Validator bei der HTML5 Validierung an den RDF Attributen stört.

Mein Blog läuft seit heute mit RDFa (Resource Description Framework in attributes). RDFa ist eine Empfehlung des W3C um Webdokumente mit Hilfe von Attributen mit Metadaten anzureichern. Im Sinne der Vision des Semantic Web, können Artikel damit mit Semantik, also mit Bedeutung aufgeladen werden, damit die Inhalte einer Webseite auch für Maschinen (z.B. semantische Suchmaschinen) verständlich werden.

Was lange nur in akademischen Kreisen durchdacht wurde, wird zurzeit Realität: Das Semantic Web ist im entstehen. Immer mehr Firmen konzentrieren sich auf die zu Grunde liegenden Technologien, wie RDF, RDFS, OWL, oder SPARQL um Wissensnetze und sogenannte Ontologien aufzubauen. Eine Ontologie definiert das Vokabular und die Konzepte sowie deren Bedeutung, die notwendig sind, um ein Wissensgebiet zu beschreiben (Daconta u. a. 2003, S.185).

Auch für WordPress gibt es schon einige Plugins, welche einem den Einstieg ins semantische Web erleichtern:

Tagaroo, Ontos Feeder und Zemanta verfolgen das gleiche Ziel, automatisch Entitäten (Dinge) im Artikel zu erkennen (z.B. Orte, Personen, Länder, etc.) und diese dann sogleich mit Seiten über weitergehende Informationen zu dieser Entität zu verlinken, z.B. mit Wikipedia.

WP-RDFa verfolgt einen etwas anderen Ansatz. Ich habe mich nun für WP-RDFa entschieden, da sich die anderen Plugins nicht mit meinem Syntaxhighlighter Plugin verstehen und das System auch etwas ausbremsen. Diese Erweiterung reichert die Blogposts mit Attributen aus dem Dublin Core und FOAF Namensraum an, um maschinenverständliche Metadaten zu erzeugen. Im Quellcode kann man das sehr schön daran erkennen, dass dem XHTML, bzw. in meinem Fall HTML5 neue Attribute wie “propery”, “content”, oder “resource” hinzugefügt wurden:

<h2><a href="http://www.mountcrow.de/web/wikirebels/"><span property="dc:date" content="2010-12-14 01:26:40" resource="http://www.mountcrow.de/web/wikirebels/" /><span rel="http://www.mountcrow.de/web/wikirebels/" property="dc:title" resource="http://www.mountcrow.de/web/wikirebels/">WikiRebels</span></a></h2>

RDFa arbeitet nach der Logik der Tripel, eine Ressourcenbeschreibung nach dem Schema Subjekt – Prädikat – Objekt, bspw. Darth Vader hat Sohn Luke. “Darth Vader” ist das Subjekt, “hat Sohn” ist das Prädikat und “Luke” ist das Objekt. Alle 3 Elemente können durch Links repräsentiert werden.

Dies soll nur eine kleine Einführung sein. Ich werde in einem weiteren Post noch genauere Informationen über diese Technologien veröffentlichen.

Quellen:

Daconta, M.C., Obrst, L.J. & Smith, K.T., 2003. The Semantic Web: A Guide to the Future of XML, Web Services and Knowledge Management, Indianapolis, IN: Wiley.

Eigenes WordPress Widget entwickeln

Die Blogsoftware WordPress wird längst nicht mehr nur für Blogs eingesetzt. Ihre modulare Architektur, sowie die zahlreichen Erweiterungsmöglichkeiten haben sicherlich zum Erfolg von WordPress beigetragen. Besonders praktisch sind die sogenannten “Widgets”, kleine Applikationen, die in den Sidebar integriert werden können. WordPress bringt von Haus aus schon einige Widgets mitsich und es gibt auch eine Menge fertige Plugins, die einfach installiert werden können um den Funktionsumfang zu erweitern, ohne in den Code eingreifen zu müssen.  Doch manchmal sind eben etwas speziellere Wünsche gefragt, weshalb man sein eigenes Widget entwickeln muss. Doch wie geht das?

Continue reading