Das Internet – eines der wichtigsten Informationsquellen in unserem Zeitalter. Tagtäglich surfen Millionen von Menschen im Internet, und täglich kommen neue Webseiten hinzu. Ob diese natürlich „gut“ sind ist eine andere Frage. Doch was unterscheidet eine gute Webseite von einer schlechten Webseite? – Googelt man den Begriff „Gute Webseite Merkmale“ werden ca 773.000 Vorschläge angezeigt, die alle wiederum erklären was denn eine „gute“ Webseite ausmacht.
Eine kurze Übersicht bietet die Webseite „Kriterien für eine gute Webseite“, darin werden Themen wie Layout, Farbe, Grafiken und Sprache vorgestellt, sowie Anleitung wie Webseiten nicht gestaltet werden sollen. Im Rahmen der Lehrveranstaltung war die Aufgabe den Blog zu personalisieren und eine Twitter-Verlinkung einzubinden. Im Folgenden möchte ich nun einen Überblick verschaffen, welche Änderungen ich vorgenommen habe.
Um ein neues Layout zu erstellen, wird in der Rubrik Menü die Verlinkung Layouts genutzt. Hier gibt es folgende drei Möglichkeiten:
Für das neue Design meines Lernblogs entschied ich mich für ein bereits erstelltes Layout der Homepage Layouts Antville. Dieses wird über Layout importieren eingefügt und über Aktivierung online gestellt. Nun können persönliche Anpassungen vorgenommen werden. Das Farbschema sowie die Schriftarten wurden über Layouts - preferences verändert.
Als nächsten Schritt wurde die Anordnung der Rubriken verändert sowie ein neuer Editor erstellt. Hierzu wird im Menü Layout - Skins - Site Layout - Main Page aufgerufen. Um die Reihenfolge der Rubriken und Inhalte zu ändern wird der jeweilige Code im HTML - Dokument mit cut & paste an die vorgesehene Stelle verschoben. Mit save & close wird die Veränderung gespeichert und online gestellt.
Die Hauptänderungen wurden allerding in der CSS-Datei "Stylesheet" vorgenommen. Dabei wurden verschiedene Formatierungen bzgl. der Layout-Farbe, Textausrichtung sowie Seitenbreite geändert.
Als Beispiel wird der Bereich '#page' hervorgehoben.
Die auskommentierten Zeilen wurden durch neue Befehle ersetzt, z.B. die Breite des Blogs. Desweiteren wurde ein Rahmen eingefügt, der den Informationsbereich vom Hintergrund der Webseite abgrenzt. Dies soll das Lesen vereinfachen, da der Informationsbereich klar definiert. ist.
Eine weitere größere Änderung war das 'Titelbild' des Blogs zu ändern. Dafür wurde über "images" ein selbstgestaltetes Bild eingefügt. Die Bezeichnung 'header' wurde beibehalten um Probleme im Quellcode zu vermeiden. Das neue Layout stellt den Titel des Blogs "Webwissenschaften" dar. Die beiden Kreise symbolisieren die Verbindung von Web, als virtuelle Welt, mit der realen Welt.
Abschließend wird in den vorher genannten HMTL - Code der Editor hinzugefügt. Mit diesem Editor können neue Beiträge erstellt und formatiert werden. Der nachfolgende Quellcode wird in den 'Head-Tag' des HTML-Dokuments eingebunden.
Da das Layout nun erstellt wird, wird die Seite mit Twitter verknüpft. Hierzu wird die Webseite "Twitter Widgets" aufgerufen und über Widgets - neu erstellen ein neues Widget angelegt. In dem Menüpunkt wird die Suchanfrage #webwi eingegeben, sodass die Verküpfung über diesen Hashtag läuft. Desweiteren können noch gestalterische Anpassungen vorgenommen werden, wie die Größe sowie die Themenfarbe. Für weitere Änderungen wird von Twitter eine Dokumentation zur Verfügung gestellt.
Um Twitter mit dem Lernblog zu verbinden, wird der erstellte Quellcode kopiert und über Layout - Skins - Site Layout - Main Page in HTML eingebunden. Damit Twitter eine eigene Rubrik erhält wird diese über HTML neu definiert und angepasst.
Die neugestaltete Webseite kann entgültig online gestellt werden. Für weitere Informationen über das Erstellen eines Layouts sowie Einbinden von Widgets können nachfolgende Links verwendet werden.
____________________________________________
http://collarbor.idv.edu/0521924/stories/36868/
http://collarbor.idv.edu/Alert/stories/23502
Kategorien
Twitter-News
Tweets über "#webkomm"