Zurück zu meine Arbeiten
Konzept
Meine Portfolio-Website ist eine präsentable Übersicht meiner Arbeiten. Hinter einzelnen Projekten führe ich ebenfalls den Gedanken-, und Arbeitsprozess auf. So kann der Benutzer einen erweiternden Einblick zu meinen Entscheidungen und deren Vorgehensweise erlangen.
Neben den Arbeiten gibt es die Möglichkeit, mich per E-Mail zu kontaktieren. Diese Page beherbergt ausserdem alle Verlinkungen zu meinen Kontaktdaten und Sozialen Medien Profilen.
Arbeitsprozess
Die Grundstruktur
Um die Grundstruktur der Seite zu visualisieren, erstellte ich ein Flowchart in Form eines UML (Unified Modeling Language) Diagramms. Dieser Diagrammtyp zeigt die Struktur einer Seite mitsamt ihren Unterseiten (Subpages) an. Mithilfe dieses Diagramms kann ich folgend ein Mock Up erstellen.
Mock Up
Adobe XD ist ein Mock Up Programm und darin erstellte ich ein Prototyp. Diese Darstellung dient mir als Referenz für das Codieren. In diesem Mock Up gestaltete ich alle visuellen Komponente wie auch die gesamte Typografie. Ausserdem kann ich als Ansicht in Adobe XD ein Raster von 12 Balken einblenden. Passend, wenn ich Bootstraps Grid System während dem Codieren anwende.
Jede Page erhielt dazu noch eine Smartphone Version. "Mobile First" beschreibt in der Informatik die Beforzugung der Smartphone Ansicht, weswegen dieser Schritt essentiel war, um die User Experience zu verbessern.
Für ein Kundenprojekt hätte ich alle Buttons verlinkt, jedoch war mir vor allem die Gestaltung wichtig. Mir war ebenfalls bewusst, wie ich durch die Seite Navigiere, weshalb die Verlinkungen für mich überflüssig waren.
Codieren
Zum Programmieren benutzte ich das Programm Brackets. Wie bereits vorhin erwähnt, mache ich von der Library Bootstrap gebrauch. Zum einen nahm ich Buttons, Progress Bars und weiteres und passte sie in meinem Stylesheet an meinem Look and Feel an. Zum anderen nutze ich Bootstrap vor allem wegen seinem nützlichen Grid System.
Mithilfe dieses Grid Systems kann ich den Seitencontent in 12 Spalten unterteilen. Die Anzahl Spalten, welche ein Objekt einnimmt, kann ich manuell anpassen. Mit der Smartphone Ansicht verändert sich der Wert, um die Bedienung am Handy User Friendly zu gestalten.
Für das Kontaktformular verwendete ich die Skriptsprache PHP. Nach dem Absenden der Daten triggered der Submitbutton die PHP Commands und eine E-Mail mitsamt Inhalt wird mir zugesendet. Um das Risiko eines Betruges und von Missbrauch zu minimieren, implementierte ich den Google Service reCaptcha.
Upload
Um zugriff auf meinen FTP Server zu bekommen, nutze ich den FTP Client FileZilla. Darauf uploade ich die HTML, CSS, PHP und JS Files inklusive allen Fotos und Videos. Diese Dateien kann ich auch downloaden, um sie zu bearbeiten.
Siehe Auch
CO2 wemmer kei
Fotogalerie
Claustrophobia
