Interaktionen im Web

Bei der Erstellung des Layouts für diesen Blog habe ich versucht, die Darstellung und Funktionalität sehr simpel zu halten. Es sollte der Inhalt im Vordergrund stehen und das Layout als Unterstützung dessen fungieren. Da die Blogbeiträge vor allem textueller Natur sind, war so auch die Anpassung für verschiedene Viewport-Breiten und -Höhen sehr gut möglich. Als Ausgangspunkt wurde das Standardlayout von Collabor₁ verwendet. Dieses wurde jedoch komplett überarbeitet.

Anpassung Grundstruktur

Die HTML-Struktur wurde, soweit es mir möglich war, auf valides HTML5 umgestellt. D.h. es wurde der entsprechende Document-Type gesetzt und die bereits vorhandenen Tags angepasst (z.B. erforderliche schließende Tags für XHTML wurden entfernt) oder neue eingeführt (z.B. header, footer, article).

Neue Container wurde etwa für das Menü und weitere Bereiche (Navigationsleisten, Kommentare,...) eingeführt. Teilweise wurde invalider Code vom System durch den Einsatz des Standard-Themes generiert. Dieser wurde ausgebessert (z.B. Zeichen zwischen <ul> und <li> entfernt).

Zur besseren Handhabung der Site wurden wrapper-Container eingeführt. Diese dienen dazu, Elementen eine Breite zu geben.

Das Menü befindet sich nun im oberen Bereich und kann mittels Klick auf ein Menü-Icon eingeblendet werden. Im linken oberen Bereich wurde eine "Socialbar" eigeführt. Dort können Verlinkungen zu bestehenden Socialmedia Plattformen getätigt werden.

Anpassung Styling

Das Stylesheet wurde dahingehend angepasst, dass die Site einen cleanen Aufbau vorweist. Die Standardschriftgröße und -zeilenhöhe wurde erhöht um eine bessere Lesbarkeit zu gewährleisten. Als Fließtext-Schriftarte wurde eine serife Font (PT Serif) verwendet, für die Beitrags-Überschriften eine sans-serife (Lato). Diese werden über Google Fonts₂ bezogen und direkt im Stylesheet importiert.

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,700italic,900italic| PT+Serif:400,700,400italic,700italic);

Grundlegende Formatierungen (allgemeine Schriftgröße, Seiten-Hintergrundfarbe, Schriftfarben,...) können mittels den Möglichkeiten in den "Layout-Einstellungen" angepasst werden. Die dort eingefügten Werte werden dann dementsprechend im Stylesheet eingefügt.

Das Standardlayout verwendet eine Table-Layout sowie einen fixen Aufbau. Dies wurde verworfen. Wie im Abschnitt Anpassungen Styling erwähnt, wurden wrapper-Elemente eingefügt:

width: 80%; max-width: 1150px; margin: 0 auto;

Es wird mit prozentuellen Angaben gearbeitet um eine plattformunabhängige Darstellung zu gewährleisten. Mit Media-Queries wird die optimale Anzeige, z.B. auf kleinen Viewport-Breiten, gesteuert. Es werden hierbei die Schriftgröße und die Breite des Inhaltsbereichs angepasst.

Diverse weitere Formatierungen, welcher der Übersichtlichkeit dienen sollen, wurden vorgenommen (z.B. Kommentare, Buttons, Abstände,...).

Anpassung Funktionalität

Standardmäßig wurde die Javascript Bibliothek jQuery₃ eingebunden. Diese wird unter anderem dazu verwendet, um den Menübereich ein- und auszublenden und diverse gestalterische Anpassungen des Inhalts vor zu nehmen.

Weiters wurde ein Twitter-Feed integriert. Alle Tweets zum Thema #webwi werden hierbei mittels Javascript-Bibliothek Twitter Post Fetcher₄ ausgelesen und im Menübereich angezeigt. Ein Abruf der Tweets erfolgt dann z.B. mittels folgendem Aufruf:

twitterFetcher.fetch('519036261118402560', 'twitter-feed', 3, true, true, true, 'default', false);

Es werden hierbei die letzten drei Beiträge in einen vordefinierten Container (twitter-feed) eingefügt.

Vorteil dieser Methode im Gegensatz zur Verwendung des Twitter-Widgets ist es, die Tweets nahtlos ins bestehende Layout integrieren zu können und so das Styling dem restlichen Blog anzupassen.

Quellen:

1. https://collabor.idv.edu/Alert/stories/27773/ (2014-10-25, 01:15)
2. https://www.google.com/fonts (2014-10-25, 01:15)
3. http://jquery.com/ (2014-10-25, 01:15)
4. https://github.com/jasonmayes/Twitter-Post-Fetcher (2014-10-25, 01:15)