Der Anfang

Als blutiger Einsteiger in die Thematik "Web Engineering" habe ich mich eine Zeit lang damit beschäftigt, mich auf dieser Plattform, durch herum spielen und mehrmaligen "zerstören" des Standardlayouts, zurechtzufinden, was sich als eine doch sehr Zeit intensive Aufgabe herausstellte. Tatsächlich wurden mir auf diesem Wege schlussendlich Schritt für Schritt Erfolgserlebnisse zu Teil, die ich in diesem Blog Beitrag nun versuche, zu dokumentieren, um euch einen kleinen Einblick in meine Vorgehensweise zu ermöglichen:

Twitter Widget

Die eigentliche Vorgabe dieser Aufgabe 3, den twitter widget, welcher die tweets des Hash-Tag "webwi" listet, wurde noch in der Lehrveranstaltung selbst nach der Anleitung zur Einbettung von Robert Markus durchgeführt. Jedoch mussten die Lehrveranstaltungsteilnehmer feststellen, dass in Zwischenzeit die Nutzeroberfläche von twitter bereits grafisch, sowie auch funktionell überholt wurde. Dies stellte aber keine besondere Herausforderung dar.

Die anschließende Personalisierung des Widgets bei twitter erfolgte lediglich durch Größenveränderungen der Höhe und der Breite.

Der HTML Code, welcher automatisiert vom Widgets Konfigurator auf twitter ausgegeben wird, wurde im eigenen Blog unter dem gewählten Layouts -> Skins -> Site Layout -> Mainpage oberhalb des HTML Codes für den integrierten Kalender eingefügt und anschließend gespeichert.

Einblick in die Layout Konstruktion

Durch eine Kollegin wurde ich im weiteren Verlauf der Lehrveranstaltung auf ein Add-on welches im Firefox Browser verwendet werden kann aufmerksam. Es handelt sich um Firebug, welches das Monitoring von HTML, CSS und JavaScript Codes ermöglicht.

Damit erhält auch ein Blogbenutzer, der keine Vorstellung von der Abänderung des Layouts besitzt, erste Einblicke in diese Bereiche.

Da ich nun, durch das Einbetten des twitter Widgets, wusste, dass die relevanten Codes unter dem gewählten Layouts -> Skins -> Site Layout -> Mainpage/Stylesheet zu finden waren, habe ich, frei nach dem Motto "learning by doing" begonnen, mit Farben, Schriftgrößen und Seitenverhältnissen zu experimentieren.

Vorgefertigte Layouts

Das endgültige Layout, in welchem mein Blog nun dargestellt wird, stammt von layouts.antville.org und wird unter der Bezeichnung "Brownie" geführt. (Voransicht)

Zu diesem Schritt hatte ich mich entschlossen, da meine Fertigkeiten nicht ausreichen, um mir selbst ein professionelles Layout zu gestalten, welches meinen Blog genügend personalisiert.

Weiters wurde von mir im Layout "Brownie" ein persönliches Titelbild, der twitter Widget und eine Kategorie-Auswahl für die Blogbeiträge an der rechten Seite der Darstellung hinzugefügt.

Als letzte Veränderung des Layouts habe ich an der rechten Seite der Darstellung, unter Links, alle vor eingestellten Werbelinks entfernt und lediglich die Verlinkung zur Collabor Hauptseite belassen.

Soweit der Einblick in meine ersten Versuche, mit HTML und CSS Codes herum zu werken. Ich hoffe, für euch war meine Schilderung nachvollziehbar.