Eine digitale Fotosammlung

Seitenaufbau
Verwendete Technologien beim Erstellen der Website: HTML, CSS, JavaScript, jQuery, PHP, MySQL Datenbank und ein eigener Webserver.
Ihre Einsatzgebiete:

Frontend
Die Bildergalerie wird in Form einer Website erstellt. Es wird mit dem Ansatz Mobile-first gearbeitet. Der Webauftritt soll jedoch auch an grossen Bildschirmen problemlos funktionieren. Der Aufbau der Seite ist einfach – ein durch Filter dynamisch erstellter Onepager. Wird die Website geöffnet, werden alle Bilder untereinander angezeigt. Die Reihenfolge der Bilder ändert bei jedem Aufruf oder Refresh der Seite zufällig neu. Die Interaktivität wird durch die Navigation gewährleistet. Die Bilder können ebenfalls gefiltert angezeigt werden. Die Navigation besteht aus drei Filtern: dem Ort des Bildes, der Hauptfarbe sowie der Fotografie-Kategorie.

Backend
Mit einer Login-Seite wird das Backend geschützt. Es dient einzig dazu neue Bilder auf den Webserver zu laden, welche dann im Frontend angezeigt werden. Für die spätere Funktionalität der Filter werden die drei Informationen manuell angegeben. Damit nicht unendlich viele Filtermöglichkeiten entstehen, können nur Werte aus einer Dropdown-Liste ausgewählt werden. Als kleine Hilfe, um die Hauptfarbe in einem Bild herauszufinden, wird das JavaScript Plugin «Color Thief» verwendet. Die Bilddatei wird beim Absenden des Formulars in einem Ordner auf dem Webserver gespeichert. Die manuell verfassten Werte für die Filter werden in einer MySQL-Datenbank gespeichert.

Design
Schlicht, modern und geordnet – so soll die Website wahrgenommen werden. Die Bilder sollen ihre Aufmerksamkeit nicht wegen Schnickschnack auf der Seite verlieren. Das Design zeigt sich minimal: ein weisser Hintergrund, ein Haupttitel und nur ein Button, der die Navigation öffnet, in der die Bilder gefiltert werden können.

Details
Bilder
Alle Bilder auf der Website wurden von mir geschossen. Mein Ziel war, ungefähr 80 Aufnahmen auf der Seite zu haben (für den Anfang). Dies habe ich auch fast erreicht. Jedoch nahm die Suche nach passenden Bildern auf der Festplatte sowie die Bearbeitung in Lightroom und Photoshop etwas mehr Zeit in Anspruch als ursprünglich geplant. Für jedes Foto nahm ich mir gerne genug Zeit, um das bestmögliche Ergebnis zu erhalten. Die Implementation vereinfachte ich, indem dieselbe Breite bei jedem Bild definiert wird: Die längere Kante ist immer 1500px (Hoch- oder Querformat). Diese Skalierung nahm ich in Photoshop vor, ebenfalls minderte ich die Qualität (65-95%). Wegen der Performance ist das absolute Maximum 1MB grosse Bilder. Die meisten sind jedoch um die 500-600kb schwer.

Hosting
Die eingeschränkten Rechte auf dem Webserver sowie der dazugehörigen Datenbank der Schule und die Aussicht, im Sommer mein Portfolio zu erstellen, leitete mich dazu, einen eigenen Webserver inklusive Domain zu kaufen. Die Einrichtung und das Zurechtfinden waren zu meinem Erstaunen kein Problem. Einzig, bis ich den FTP Zugang konfiguriert habe dauerte etwas, weil ich die Rechte der Benutzer zuerst missverstanden habe.

Schwierigkeiten
Grössen im Web
Die Image Gallery ist nicht mein erstes Webprojekt – trotzdem haben mich die verschiedensten Grössen, welche im Web verwendet werden, ein weiteres Mal verunsichert. Ich wollte die Seite grundsätzlich mit den Viewport units vh und vw umsetzen, die Schriftgrösse in rem/em und die max und min Angaben in Pixeln. Jedoch hat das nicht ganz funktioniert. Mit vh/vw hatte ich grosse Probleme, wenn es um Responsive Design ging. Die Abstände wurden auf dem Desktop viel zu gross, während sie in der Mobile Version passten. Ich arbeitete mit Media Queries und griff schlussendlich doch noch auf die %-Angaben zurück. Nun ist es ein bisschen ein Durcheinander. Das wäre sicherlich einheitlicher lösbar.

Grid
Die Website ist mit dem Mobile-First Ansatz entstanden. Mich hat dieses Problem erst etwas später im Prozess beschäftigt, nämlich als ich die Website für grössere Bildschirme angepasst habe. In der Mobile Version gibt es nur eine Spalte und die Bilder werden untereinander angezeigt. Auf grossen Bildschirmen musste ein Raster hinzugefügt werden. Zuerst versuchte ich es selbst zu kreieren, doch zeigte sich kein befriedigendes. Deshalb entschied ich mich ein vorgefertigtes Grid zu verwenden und manuell anzupassen. Dies löste meine Probleme sofort und es funktioniert einwandfrei.

Sicherheit
Mein Wissen betreffend Websicherheit ist etwas veraltet und nicht besonders tief. Das Erstellen vom Login funktionierte trotz Anleitungen aus dem Internet nicht wirklich. Glücklicherweise hatten wir im Major «Media Applications» eine Vorlesung zur Sicherheit im Web. Diese half mir dabei, Schwachstellen zu erkennen. Mein letztes Login erstellt ich noch mit dem md5 Algorithmus, und dieser ist heute überholt.

Zukunft und Skalierbarkeit
Die Website ist noch nicht fertig. Es fehlen aus meiner Sicht noch Details, welche in den nächsten Monaten eingebaut werden:
– Mein Ziel, 80 Bilder zu bearbeiten und auf die Website zu stellen ist gut für den Anfang, jedoch sollen es mehr Bilder werden. Denn es gibt noch viele, die ich weiterverarbeiten will.
– Der Ort, wo Aufnahme geschossen wurde, sollte ersichtlich sein, z.B. in der Slideshow.
– Die Navigation der Slideshow ist noch nicht benutzerfreundlich. Es sollte mit einem Swipe zum nächsten Bild gewechselt werden können und nicht nur wenn der Button geklickt wird. Ebenfalls sollte sich die Slideshow schliessen, wenn ausserhalb des Bildes geklickt oder getippt wird.
– Einen Algorithmus einbauen, welcher einige Bilder grösser als andere anzeigen lässt.
– Der User kann seine Filter selbst im Backend konfigurieren.
– Das Grundgerüst der Website online zur Verfügung stellen oder noch besser, verkaufen. Somit könnten auch andere Leute ihre persönliche Galerie erstellen, wer weiss…

Fazit
Es ist nun schon das zweite Semester, in dem ich mich im Rahmen von Digezz auf ein Webprojekt fokussiert habe. Die Arbeit an meinem JavaScript Game flyingmoon hat mir sicherlich vieles erleichtert. Mittlerweile fühle ich mich im Umgang mit HTML, CSS und JavaScript sicher. Ebenfalls fiel es mir nicht so schwer eine Datenbank anzubinden. Die komplexere Funktionalität mit PHP war mithilfe von Google auch gut möglich. Insgesamt bin ich zufrieden mit dem Arbeitsprozess. Einzig ein klareres Konzept von Beginn an wäre hilfreich gewesen. Viel Projektzeit ging durch Umkrempeln der Idee und Einbauen neuer neuen Einfälle verloren.

Gerne hätte ich noch etwas mehr Zeit gehabt für kleine Details. Zum Beispiel eine smoothere Art die Bilder zu laden, die Möglichkeit das Land von einem Foto in der Slideshow anzuzeigen etc. Es wären kleine Finessen, die dann doch mehr Zeit in Anspruch nehmen als man denkt. Ich habe vor, die Gallery weiterzuentwickeln und neue Bilder heraufzuladen.

Learnings
– Trotz dem Wissen, dass die Zeit beim Programmieren schnell vergeht, vergeht die Zeit tatsächlich wie im Flug.
– Ein sauber durchdachtes Konzept erspart viel Zeit.
– Datenbanken immer zuerst auf Papier modellieren, bevor sie digital umgesetzt werden.
– Die JavaScript Bibliothek jQuery werde ich öfters nutzen.
– Unterschiede von MySQLi und PDO sind mir bekannt.
– Sicherheitsvorkehrungen auf einer Website kenne ich nun besser.
– JavaScript Plugins ersparen viel Zeit.