Stefan's Lernblog

Neuer Inhalt

Da im Juli 2013 einige neue Board- und Kitemodelle der 2014er Serie veröffentlicht wurden, musste ich die Seiten "Rally", "Fuel" und "Kiteboards" natürlich mit den neuen Texten, Bildern und Videos updaten. Ganz neu erstellt habe ich die Seite "Kite Wave Boards", welche im Menü die Seite "Facebook" ersetzt. Vom Aufbau habe ich die Seite gleich wie "Slingshot Kiteboards" aufgebaut um die Übersichtlichkeit zu behalten. Die alte Facebook Seite war schon zu Beginn eher als Platzhalter gedacht, da man sowieso durch den gut sichtbaren Link in blauer Schrift (gleich unter den Menüpunkten) von jeder Seite aus auf die Facebook Fanpage weitergeleitet wird.

Bilder

Neu eingefügt habe ich auch die verschiedenen Bilder im Header auf den allen Seiten.
Bei den Kite Modellen habe ich Bilder des jeweiligen Kites ausgewählt. Bei den anderen Bildern handelt es sich um Assoziationen mit Südafrika und Kiten (siehe Beitrag "weitere Überlegungen): Wellen, Wind, Sonnenutergang, Tafelberg. Dazu einfach noch Fotos wo man die Marke Slingshot schön identifizieren kann.

Video

Das das fertige Video auf index.html kommt, war für von Anfang an klar, bei der Einbindung des Videos stellte sich für mich jedoch die Frage ob ich es auf eine Plattform (youtube, vimeo) hochlade und auf die Homepage einbette, oder ob ich direkt mit mittels <video> tag per html5 einbinde. Habe mich schlussendlich für die HTML5 Variante entschieden und mit dem Attribut portrait noch ein Titelbild hinzugefügt.
Erstellt habe ich das Video mit dem Programm "Adobe Premiere". 

HTML 5 

Da ich zu Beginn die Homepage auf HTML 4 erstellt habe, musste ich natürlich alles umändern, was mich zu einigen unerwarteten Problemen führte. Das gravierendste war, das sich bei HTML5 zwischen zwei oder mehreren aufeinanderfolgenden Bildern automatisch ein minimaler (ca 2 px) weißer Abstand einfügt. Dies führte dazu das die Hälfte von meinem Menü um 2px nach unten verschoben war und somit unansehlich wurde. Nach langer Recherche fand ich herauß das man das Attribut "vertical-align:middle" beim Bild einfügen muss um diesen Abstand zu verhindern. Zuerst wollte ich dies über CSS lösen, was jedoch nicht funktionierte. Wie sich heraus stellte muss ich dieses Attribut direkt in den HTML Code einfügen um die Bilder wie gewollt darzustellen.