WebWie?

Im Rahmen der dritten Aufgabe habe ich meinen Lernblog ausgehend vom collabor Standard-Layout ein wenig adaptiert. Die Anpassungen lassen sich unterteilen in:

• Layout-Anpassungen
• inhaltliche Erweiterungen

Nachfolgend habe ich die Anpassungen dokumentiert:

Layout-Anpassungen

Zentrierung und strukturelle Änderungen

Eine der offensichtlichsten Änderungen war die Zentrierung der gesamten Seite. Dies konnte durch eine ganz einfache Änderung im Stylesheet erreicht werden, indem den 3 äußeren Elemente der Seite (#header, #statusTop, .divContainer) ein automatischer seitlicher Außenabstand (margin) verpasst wurde.

Die Entscheidung, die beiden Spalten anstatt der vorgegebenen absoluten Positionierung mit Floats zu positionieren, war nicht notwendig. Dennoch habe ich es gemacht, da dies Best Practice bei den Grid Frameworks ist und außerdem den Vorteil hat, dass der Eltern-Container (.divContainer) nach Anwendung des sogenannten "clearfix hack" auch ihre Inhalte umschließt und angezeigt wird (sonst hätte es eine Höhe von 0px und würde nur zur Ausrichtung der Kinder-Elemente verwendet)

Die einzige strukturelle Änderung, die ich im HTML Template vorgenommen habe, war, dass ich die einzelnen Module, die sich in der Seitenleiste befinden (Kategorien, Menü, etc), jeweils in ein <div> Element mit dem class Attribut "box" verpackt habe. Das war die notwendige Vorarbeit, um die Module in einzelnen Boxen mit grauen Hintergrund darstellen zu können.

Das Layout bleibt aber weiterhin elastisch, da ich an der Verwendung von 'em' als Breitenangabe festgehalten habe.

Farbschema

Ich habe mich dafür entschieden, den Grün-Ton durch ein Orange zu ersetzen, das sowohl für die Überschriften als auch für den Hintergrund im Header und im Twitter-Widget verwendet wird.

Den Seitenhintergrund habe ich vom reinen Weiß in einen leichten Grauton verändert. Die Trennlinien zw. Inhalt und Seitenleiste bzw Header und Inhalt habe ich ersatzlos entfernt. Stattdessen habe ich wie bereits erwähnt die Einzelteile der Seitenleiste in einzelne Boxen unterteilt, die sich vom Seitenhintergrund und den anderen Seitenelementen durch einen vergleichsweise dunkleren Grauton als Hintergrundfarbe absetzen.

Typografie

Um dem Lernblog einerseits einen moderneren Touch zu geben, und andererseits zu Demonstrationszwecken, welch tolle kostenlose Services das Web bietet, die jeder für seine eigene Webseite verwenden kann und darf, habe ich mich entschieden, von den Standardschriftarten abzuweichen und mittels @font-face eigene Schriftarten in den Blog einzubetten.

Anstatt die Schriftarten selbst hochzuladen, habe ich das kostenlose und sehr empfehlenswerte Google Webfonts Service verwendet. Dort kann man aus fast 500 verschiedenen Open Source Schriftarten auswählen, sie miteinander vergleichen und sie letztendlich mit einer einzigen Zeile HTML-Code - einer Referenz auf ein von Google gehostetes Stylesheet - verwenden. Für die Überschriften habe ich mich für die Schriftart "Yanone Kaffeesatz" entschieden. Im normalen Text verwende ich die Schriftart "Droid Sans". Die Überschriften habe ich in Kapitälchen umgewandelt (font-variant: small-caps).

weitere Details

Um die Seite noch etwas weiter aufzulockern, habe ich der Seite mit ein paar CSS3-Anweisungen einen Feinschliff verpasst. Dazu zählen leicht abgerundete Ecken (border-radius) im Header und in den Boxen der Seitenleiste, Farbverlauf (linear-gradient) und Schlagschatten (box-shadow) im Header. Der Blog-Hauptüberschrift und der Beitragsüberschrift habe ich zudem noch einen Textschatten (text-shadow) zugewiesen.

Diese Eigenschaften demonstrieren zudem auch, dass eine Webseite nicht zwangsweise auf jedem Endgerät und jedem Internetbrowser gleich aussehen müssen. Denn gerade beim Einsatz von CSS3-Anweisungen muss man stets beachten, dass nicht jeder Browser alle Anweisungen versteht. Moderne Browser wie Firefox, Google Chrome, Opera und Safari verstehen alle oben genannten Anweisungen. Microsofts Internet Explorer war bis inklusive der Vorgängerversion 8 ein Steinzeit-Browser und Problemkind für jeden Webentwickler. In der momentan aktuellen Version 9 wird bereits vieles unterstützt, jedoch dennoch weniger als bei der Konkurrenz. So kann z.B. der Textschatten nicht angezeigt werden und auch die Hintegrund-Verläufe entsprechen noch nicht den Standards. Der hier angewandte proprietäre Filter verhindert z.B. dass die abgerundeten Ecken angezeigt werden. Einen Workaround mit eingebetteten SVG-Bildern gäbe es, wäre an dieser Stelle aber zu umständlich (eigenes zusätzl. Stylesheet für IE9).

inhaltliche Erweiterungen

Ein Merkmal des sogenannten Web 2.0 ist der hohe Vernetzungsgrad und die Verfügbarkeit von Webservices, die vereinfacht formuliert auf Anfrage Daten zur Verfügung stellen, die man in seine eigene Website oder Webapplikation einbinden kann. Tagtäglich begegnen wir z.B. Facebook Like Buttons und Boxes und deren Äquivalente von Google+ und Twitter auf irgendwelchen Webseiten, die wir ansteuern. Für eine Social Web Plattform sind solche Dienste bereits zum Standard geworden. Darüberhinaus gibt es noch unzählige weitere Möglichkeiten, Informationen von Dritten in die eigene Seite einzubinden, egal ob Wetterprognose, Aktienkurse, Postleitzahlen-Abfrage, Foto-Streams, usw.

Ich habe als Beispiel zwei eigene kleine Widgets implementiert, die angebotenen Webservices konsumieren und die Daten hier anzeigen.

Twitter-Widget

Das war Teil der allgemeinen Aufgabenstellung und ist dort bereits hinreichend dokumentiert.

Wetter-Prognose für Linz

Yahoo bietet wie Google eine Reihe Services an, die Webentwickler verwenden können, u.a. eine Wetterabfrage. Außerdem hat Yahoo eine eigene Abfragesprache namens YQL für Webservices entwickelt, die nicht nur namentlich jener von Datenbanken (SQL) sehr ähnelt. Damit will man den Zugriff auf diese Services weiter vereinfachen und vereinheitlichen. Yahoo bietet natürlich auch seine eigenen Webservices in einer YQL-tauglichen Variante an.

Mit Hilfe des fast schon unverzichtbaren jQuery Javascript Frameworks konnte ich eine auf YQL basierende Wetterabfrage mit nur wenigen Zeilen Code realisieren. Das Wetter-Widget habe ich in der Seitenleiste ganz unten angezeigt.

Flickr Fotostream

Die Fotoplattform flickr bietet ebenfalls einige Webservices an, mit denen man z.B. eine Suche nach Fotos absetzen und das Resultat anzeigen kann. Da flickr zu Yahoo gehört, haben auch sie dafür gesorgt, dass sie mit YQL verwendet werden können. Dadurch konnte ich die Funkionen, die ich für die Wetterabfrage geschrieben habe, für flickr wiederverwenden und musste nur wenige Zeilen Code ergänzen.

Das Ergebnis davon kann man auf jeder Seite meines Blogs sehen. Unterhalb des Seiteninhalts habe ich ein kl Widget eingefügt, das 6 zufällig ausgewählte flickr Bilder anzeigt, die mit dem Tag "Internet" versehen wurden.