Propädeutikum Webwissenschaften

Wie in meinem vorherigen Artikel bereits beschrieben ist die Wahrnehmen von Usern und Künstlern beim Webdesign nicht wegzudenken. Daher ist auch mein Blogdesign stark von meiner Einstellung und meinen Vorlieben im Web beeinflusst. Ich liebe einfache, klare und geradlinige Designs. Für mich sollte bei einem Blog der Content im Vordergrund stehen und nicht komplexe Funktionalität. Bei anderen Webseiten sich nicht unwichtig aber gerade bei einem Lernblog sollte die Information zählen. Daher nun Schritt für Schritt zu meinen Adaptionen:

1. Theme downloaden

Viele CMS Systeme haben bereits einige unterschiedliche Layout-Vorlagen, so genannte Themes. Für unser verwendetes System antville findet man diese auf der Themes-Seite des Unternehmens. Die Themes, die hier zur Verfügung stehen sind kostenlos und können für nicht kommerzielle Websites genutzt werden. 

Für meinen Blog habe ich mich für das Theme Sommerlich entschieden! Dieses habe ich runtergeladen und in meinem eigenen Backend als Theme installiert. 

2. Designanpassungen

Nachdem ich das Theme installiert und als aktiv geschaltet habe, mussten einige Designanpassungen passieren. Um Änderungen am Layout Design zu machen geht man in den Punkt Layouts -->Skins (des aktiven Layouts) --> Site Layout --> Main Page. Hier wird nun ein Texteingabefeld mit dem Code für die Hauptseite angeziegt. 

Folgende Dinge habe ich geändert:

2.1 Bannerbild

Ich habe mir im Photoshop ein passendes Bild zurechtgelegt. Die Maße des Bildes habe vom alten Bild abgelesen. Das neue Bild hab ich auf meinen persönlichen Webserver mithilfe von Filezilla raufgeladen. Danach habe ich unter dem Punkt Layouts -->Skins (des aktiven Layouts) --> Site Layout --> Stylesheet das Bild bei der id bannertitle geändert. Der neue Pfad ist wie folgt:

/* ------------ Titelbild einfuegen ------------------------------------*/

#bannertitle 

{ background: url(http://www.oliviaulbing.com/lernblog/lernblog.png) no-repeat center center;  }

Weiters habe ich die Position der Überschrift geändert.

/* ------------ Titeltext positionieren -------------------------------*/

#bannertitle h1 { position: relative; left: 90px; top: 200px; }

/* ------------------------------------------------------------------------*/

2.2 Schriftart ändern

Die Schriftart habe ich mithilfe von Google Webfonts geändert. Dazu habe ich diesen Link im Header-Bereich der Main Page eingefügt:

<link href='http://fonts.googleapis.com/css?family=Raleway+Dots' rel='stylesheet' type='text/css'>

Dieser Beinhaltet bereits die ausgewählte Schriftart "Raleway Dots". Nun musste ich nur noch den Überschriften die neue Schriftart zuweisen im Stylesheet:

h1, h2, h3 {

margin: 0;
font-weight: normal;
color: <% layout.titlecolor %>;
font-family: 'Raleway Dots', cursive;
}

Dadurch habe ich die Schrift allen Überschriften der Wertigkeit 1, 2 und 3 diese Schriftart zugewiesen.

2.3 Social Media

Neben der Integration des Twitterfeeds zum Hashtag #webwi (Anleitung gibt es schon im Blog, daher keine extra Ausführung zu diesem Punkt) habe ich weiters meine Social Media Profile als Socia Media Icons in der rechten Seitenleiste integriert. Dazu habe ich durch eien Google Recherche mit ein Set Social Media Icons ausgesucht und diese auf meinen Webserver mittels Filezilla raufgeladen. Integriert habe ich folgenden Code im Main-Page Bereich.

<div class="socialmedia">

<h2>Social Media</h2>

<a class="social_media_links"  href="https://www.facebook.com/olivia.ulbing" target="_blank"><img src="http://www.oliviaulbing.com/lernblog/Facebook.png" style="border:none;" /></a>

<a class="social_media_links"  href="https://twitter.com/theOlivchen" target="_blank"><img src="http://www.oliviaulbing.com/lernblog/Twitter.png" style="border:none;" /></a>

<a class="social_media_links"  href="http://pinterest.com/olivchen" target="_blank"><img src="http://www.oliviaulbing.com/lernblog/Pinterest.png" style="border:none;" /></a>

</div>

2.4 Anordnung der rechten Spalte

Als letzte Änderung habe ich die Anordnung der Elemente in der rechten Seitenspalte geändert. Für mich hatten die Elemente "Suchfunktion", "Social Media" und "Neu" eine höhere Wertigkeit, sodass ich Sie untereinander angeordnet habe. Die Navigation und der Bereich Meta wird nur von mir genutzt und ist daher weiter unten zu finden. Die RSS und Archiv Funktion habe ich komplett aus meinem Design rausgenommen, weil ich sie in dieser Form als Wertlos erachte.

3. WYSIWYG Editor

Zuletzt ist mir noch aufgefallen, dass dieses Theme den WYSIWIG Editor nicht unterstützt, was es schwer macht den Content zu verlinken. Unser Tutor hat mir diesen Link empfohlen woraufhin ich einfach nur diesen Code im Header-Bereich meiner Main-Page eingefügt habe und danach alles wieder möglich war. 

<script type="text/javascript" src="/static/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/static/jscripts/tinymce_init.js"></script>

Solltet ihr noch Fragen zu meinen Änderungen haben, freue ich mich über euer Feedback!