Blog #Harry #Propädeutikum

Ziel der Aufgabe war das Anpassen des Weblogs, um diesem ein persönliches Layout zu verpassen. Hierbei habe ich mich vor allem auf folgende Dinge gekümmert:

• Prozentuelle Breiten-Angaben (und keine statischen)
• Einbetten des Twitter-Feeds
• Styling der verschiedenen Bereiche und Abgrenzung dieser
• Verstecken/Deaktivieren nicht benötigter Elemente

Prozentuelle Breiten-Angabe

Zuerst habe ich also begonnen den Content-Bereich, der im Wesentlichen in wenige Dividern geteilt ist flexibler zu gestalten (prozentuelle Breitenangaben). Zuerst habe ich dem body Element also eine width von 100% gegeben. Danach habe ich dem Header eine Breite von 76.7% gegeben, und margin : auto, damit sich die Seite immer genau in der Mitte befindet. Durch margin: auto wird bezweckt, dass der Browser automatisch links und rechts immer den gleichen Abstand wählt, egal wie groß die Displaygröße/Viewport ist.

Den main-content-Bereich habe ich von der Aufteilung so gelassen. Der Content (die Vorschau der Blogs) sind immer links, und das Menü und der Twitter-Feed rechts. Dies habe ich auch wieder mit einer dynamischen Breite gestaltet – der Content hat immer 80% und das Menü bzw. der Twitter-Feed nur 20%.

Ein weiteres Problem war vorerst noch die Höhe des divs, welcher das Menü und den Content enthält, dynamisch zu gestalten. Mittels der css-Property overflow:hidden kann dies allerdings leicht gelöst werden. So passt sich die Höhe des divs automatisch an die Höhe der divs an, welche er beinhaltet.

Style-Anpassungen und Suchfunktion

Also nächstes habe ich den Blog etwas schöner gemacht, und mittels border und background-color die Elemente untereinander klar geteilt (header, top-menu, content, menü und twitter-feed). Im Header-Bereich habe ich die Suche eingebettet, da ich finde, die Suche sollte immer oben sein, da sicher der Benutzer so besser zurecht findet.

Ich habe das Widget für die Suche im Layout des Blogs in den Headerbereich hochgezogen. Danach musste ich noch direkt etwas beim Suchformular anpassen, da hier direkt Style-Attribute angegeben wurden. Dies ist eine Sache die man unbedingt vermeiden sollte, da das überschreibt dieser Attribute schnell zu Problemen führen kann(Heißt HTML und CSS strikt trennen). Danach habe ich dem Suchfeld mittels display= inline mitgeteilt, dass es ein inline-Element ist, also das paragraph davor und das input-Feld in einer Zeile stehen.

Einbetten Twitter-Feed

Der Twitter-Feed wurde wie bereits in mehreren Tutorial und im Propädeutikum besprochen über das Widget-Element eingefügt. Ich denke dies braucht an dieser Stelle keine weitere genauere Beschreibung mehr.

Weiteres Styling

Weiters wurden mittels Media-Queries noch der Titel und das Menü angepasst. Falls die Website auf einem Smartphone oder einem Tablet betrachtet wird, kann es sein, dass der Titel nur sehr unschön umgebrochen wird. Dadurch wird dieser mittels eines Media-Queries deaktiviert, falls die Breite eine gewisse Grenze unterschreitet. Hierbei wurde, falls die Displaygröße eine Pixelbreite von 1000 unterschreitet, werden mittels display:none die Hashtags im Titel(#Harry, #Propädeutikum) deaktiviert, also verborgen.

Dasselbe gilt für das Menü: Wird eine Breite von 700 Pixel überschritten, gehe ich davon aus, dass der Benutzer am Handy nur den Inhalt meines Blogs sehen will, und deaktiviere somit das Menü. Somit hat der Benutzer die gesamte Bildschirmbreite zur Verfügung, um den Inhalt zu lesen. Das Twitter Modul rutscht automatisch unter den Artikel bzw. die Vorschau der Artikel.

Nützliche Tools

Zum Entwickeln von Websiten verwende ich immer das Tool Firebug, welches als Plugin für Firefox und Chrome erhältlich ist. Damit kann man direkt das HTML und CSS einer Website  bearbeiten. Außerdem kann man einfach Attribute de- und aktivieren, und hat automatisch eine Live-Vorschau der Seite. Darüber hinaus bietet dieses Plugin noch viele weitere Möglichkeiten, zBsp. den gesamten Datenverkehr anzuzeigen, JavaScript zu debuggen, Ansehen des Box-Models, und vieles mehr.

Ich habe meinen Blog der einfachhalber nur in Chrome und Firefox getestet (in den aktuellen Versionen und am Desktop).

Quellenangabe

• http://wiki.selfhtml.org/wiki/CSS/Media_Queries
• http://www.responsive-webdesign.mobi/
• https://addons.mozilla.org/de/firefox/addon/firebug/
• http://de.selfhtml.org/