Webdevelopment

Fabio Pritschet offizielle Webseite| Webdevelopment

fabio-pritschet-webseite

Servus Leute, Hier ist ein Artikel über die Webseite von Fabio Pritschet.

warum brauchen wir eine Webseite ?

ich hatte ja bereits mehrere Male was mit Fabio Pritschet gemacht. Er ist einfach ein talentierter Fahrer der viel Potential hat. Auf der Plattform Youtube veröffentlicht er regelmäßig auf seinem Kanal Fabio Pritschet Videos von seinen Fahrten die er mit der Gopro auf nimmt und ich diese nur bearbeite und zusammenscheide. Manchmal aber bin ich selber mit der Dslr und filme was für ihn, auch das landet auf seinem Youtube Kanal. Mit Akutell 480 Abonnenten auf Youtube und zusätzlich 682 Follower auf Instagram hat er eine etwas kleine Reichweite. Daher haben wir beschlossen eine Webseite für ihn zu bauen, damit Sponsoren, Firmen und Leute die nach Fabio Pritschet suchten, ihn leichter finden.

Was haben wir gemacht ?

Ich habe habe ungelogen sehr lange nach dem richtigen Template auf css-free gesucht bist ich das Run Charity Lite von wowthemes.net gefunden habe. Es ist in erster Line dank den JQuery skript sehr smooth vom Scollen her, auch auf dem Handy. Es lassen sich sehr leicht Bilder integrieren sowohl bei der Gallerie als auch die Hintergrundbilder. Dank den Sektionen About wo man einige Informationen über Fabio Pritschet preisgeben kann, einen Testimonial wo andere Fahrer was über ihn sagen können und dem FAQ Bereich, ist dieses Template bestens dafür gedacht um einen Fahrer zu präsentieren.

erste Schritte

Wie bin ich vor gegangen, nun ich wollte zunächst einmal eine andere Schrift für die Webseite verwenden, eine die auch vielleicht nicht so häufig verwendet wird aber dennoch gut lesbar ist und akzeptable Ladezeiten der Seite ermöglicht. Nach langen suchen bei font.google.com habe ich mich für Shadow Into Light entscheiden. Die Schrift sieht sehr Unique und Freestylemäßig aus. Dannach ging es um die eigentliche Webseite. Im Head Bereich der html index datei habe ich den Titel geändert und habe ein Favicon hinzugefügt. Ich wollte statt einem Parallaxen Hintergrundbild im Header eher ein Video hinzufügen, welches einige Szenen beinhaltet und sich lautlos immer wieder wiederholt. Also schnitt ich schnell was mit Premiere Pro zusammen, lud es auf den Server hoch und suchte nach Möglichkeiten wie man es als Parallax Hintergrundvideo einbaut. Nach einigen Versuchen hat es auch dann geklappt. Den Headertext und was darunter steht habe ich abgeändert aber an gleicher Stelle stehen lassen, nur habe ich aus dem „Find A Cause“ Button ein About und ich mit den Ankerpunkten auf die Über uns Sektion verwiesen.

In der Über uns Abteilung habe ich einen kleinen Steckbrief über Fabio Pritschet verfasst. Dort erfährt man Informationen welche im Sportbereich Interessant sind, wie zum Beispiel das Alter, Herkunft Größe und Gewicht. Der „erfahre mehr“ Button bringt einen zum FAQ Bereich der Webseite. Ich wollte die auf der rechten Seiten befindlichen Kästen dahingehend nutzen um Statistiken wie Punkte bei Meisterschaften, Anzahl an gefahrenen Rennen, Anzahl an diesjährigen Roadtrips usw. hinzufügen. Durchs Copy und Paste habe herausgefunden, dass man sogar diese Sektion erweitern kann, aber mehr als sechs Sachen sind uns aber nicht eingefallen.

Scollt man weiter kommt zunächst ein weiteres Parallax bild wo er sich gerade die verspiegelte Brille überzieht. Darüber findet man ein Zitat von ihm welches die Gefühle vor einer Abfahrt beschreibt. Anschließend kommt man zur Gallerie, wo wir auch einige coole Bilder rausgesucht haben. Die meisten sind allerdings Screenshots aus Fabios Videos. Ich legte großen Wert darauf, dass man unterschiedliche Bilder sieht, sprich einmal aus der POV, einmal beim Rennen, einmal beim Bikepark usw. Hier könnten wir auch mehr Bilder hinzufügen. Schöner fände ich es wenn man zwei oder drei Galerien hat welche mehrere Bilder besitzen. So wie diese Sektion aber aussieht ist aber dennoch in Ordnung. Unter die Vorschaufotos haben wir auch versucht diese mit zwei bis drei Wörtern zu beschrieben und dazu auch noch mit einem Fonts Awesome Icon etwas interessanter zu machen. Ruft man das Bild auf, öffnet es sich in einer Lightbox und man hat eine längere Bildbeschreibung zu Gesicht.

Weiter geht es mit den Testimonials, welche wir einfach in „Meinugen“ umgeändert haben. Dort sollen einige Fahrer ihre Meinung über Fabio Pritschet loswerden. Dazu haben wir Maxi Kuchling, Tim Spona und Timo Hahn ausgesucht. Kuchling ist eine gute Freundin von Fabio und fährt ebenfalls in seiner Klasse U15. Tim Spona ist auch ein sehr guter Fahrer und Timo Hahn ist der Gewinner des RDC 2017 in seiner Klasse. Ich wollte um jeden Preis den Einzelnen Stimmen ein Bild hinzufügen, wobei aber lange warten musste, da ich die Bildinhaber erst um Erlaubnis bitten musste diese auf der Webseite zu veröffentlichen. Nach dem ich von allen drei die Erlaubnis hatte fügte ich auch diese ein und formte sie in css so das sie in einem Kreis mit einem weißen Rand zu sehen sind. Darunter kommt ihr Zitat, darunter der Name und die Social Media´s der jeweiligen Personen. Diese wechseln sich automatisch alle paar Sekunden, man kann sie jedoch alleine mit den Pfeilen rechts und links steuern. Hinter den Meinugssektion ist ein cooler Screenshot aus einem leider nicht gelungen Filmprojekt mit Fabio Pritschet wo er kurz vor einer Abfahrt nachdenklich steht und in die Ferne schaut.

Dannach kommt die FAQ Sektion wo er einige von mir ausgedachte Fragen beantwortet. Häufig aber allgemeine Fragen wie: wie lange er fahre oder wer seine Vorbilder sind. Es sieht fertig sehr schön aus da man wenig Text auf dem Bildschirm hat, da man erst beim draufklicken der Frage eine Antwort bekommt und diese auch wieder verstecken kann. Hier wären auch mehr Fragen möglich aber diese andern wir erst wenn man in den Mails, Kommentaren etc. häufiger eine Frage gestellt bekommt für die es eine einfache Antwort gibt. Weiter kommt ein weiteres Parallaxbild welches ich vor langer Zeit gemacht hab mit der Überschrift „Biking and love are the same“ aber auch einfach aus dem Grund weil uns nichts besseres eingefallen ist, als das Charity einfach druchs Biking zu ersetzen. Darunter kommt man zum Kontakt Formular durch das man Fabio eine Email schrieben kann. Dieses habe ich auch schon oft ausprobiert und funktioniert sehr schnell und einfach. Der Absender muss nur Namen und Email angeben, also sehr einfach und unkompliziert gehalten das Ganze.

Im Footerbereich, findet man dann noch die Social Media Kannele von Fabio, unteranderen aber auch die Ixs Fahrerprofil für das es kein FA Icon gab und ich es als Png Bild hochladen musste. Darunter gibt es noch einige Copyright Hinweise von mir und die Datenschutz, Impressum und Haftungsausschluss Seite. Dazu habe ich eine JQuery Datei hinzugefügt, welche für den Erstbesuchernden sich ein Popup öffnet wo er auf die Verwendung von Cookies hingewiesen wird. Schaut euch die fertige Seite an und schreibt mir in die Kommentare wie ihr die Seite findet und was man noch ändern könnte/sollte.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

5 × eins =

*