Ausgangssituation für das Design des Collabor-Lernblogs war das Standardlayout. Die Seite layouts.antville.org bietet einige Layouts für den Lernblog an. Von dieser Seite habe ich mir das Layout „Sommerlich“ heruntergeladen und in meinen Lernblog importiert. Anschließend habe ich das Bannerbild durch ein eigenes Bild ersetzt, um den Lernblog einen persönlichen Charakter zu geben. Das Foto wurde in Adobe Photoshop bearbeitet und der Titel des Lernblogs kam direkt auf das Foto, sodass ich die Schrift so gestalten konnte, dass sie auch gut lesbar ist.
Im Internet suchte ich mir eine Liste von safe Webfonts, die mir eine Auswahl von serifenlosen und serifen-Schriften gab.
“Im Prinzip sollte man auch hier Serifenschriftarten für den Fließtext verwenden und Groteske für Kleingedrucktes und Überschriften.”(Q2)
Obwohl ich bis jetzt die Kombination von serifenlosen und serifen-Schriften meidete, habe ich mich dafür entschieden für Überschriften die serifenlose Schriftartenfamilie 'Trebuchet MS', Arial, Helvetica und für den Fließtext die Schriftenfamilie mit Serifen Palatino Linotype, Book Antiqua3, Palatino zu verwenden. Außerdem wurden die Textfarben, sowie Linkfarben dem Design angepasst.
Außerdem wurden noch kleinere Änderungen durchgeführt, da zum Beispiel durch das Ändern des Design die Backlinks verloren gingen. Dafür muss im Code von Full Story View (Layouts - Skins - Stories - Full Story View) nur die Zeile <% story.backlinks %> eingefügt werden und schon sind sie wieder sichtbar. Um den Text in Blocksatz anzuzeigen, habe ich in der CSS-Datei das Attribut text-align auf justify gesetzt.
Das Twitter-Widget wurde auf mit dem twittereigenen Erstellungstool erstellt. Die Suchanfrage wurde mit #webwi festgelegt, sodass die aktuellen Meldungen zum Thema Webwissenschaften angezeigt werden. Es wurde die geringste Höhe, die möglich ist, 350 Pixel, festgelegt. Als Design wählte ich „light“, da dies besser in mein Lernbloglayout passt. Außerdem wurde die selbe Linkfarbe des Lernblogs auch für das Twitterwidget verwendet: #131513.
Da das Widget trotz der kleinsten Größe, die Navigationsleiste des Lernblogs sprengt, wurden die Maße in den Stylesheet-Einstellungen des Lernblogs angepasst, sodass auch für das Twitter-Widget genügend Platz ist.
Q1: Letzter Abruf am 18. Oktober 2012 von http://blog.antikoerperchen.de/beitrag/43/serifen-oder-serifenlos-groteske-sans-serif.html
Safe Web Fonts: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Twitter Widgets: https://twitter.com/settings/widgets