Einleitung

Im folgenden Tutorial stelle ich den Aufbau und die Struktur eines kleinen Online-Portfolios vor. Erläutert werden sämtliche Codeabschnitte und der Zusammenhang verschiedener Scriptsprachen. Die Portfolio-Webseite arbeitet mit der Metapher eines unsortierten Fototisches. Per Zufall werden verschiedenste Dateien aus einem Ordner auf dem Webserver ausgelesen und willkürlich auf der Arbeistfläche verteilt. Fotos werden als Miniaturen abgebildet und beim „Drüberfahren“ mit der Maus werden diese vergrößert. Das Miniportfolio dient mehr dazu, einen kleinen Einblick einer Auswahl an Arbeiten zu verschaffen, als eine strukturierte Präsentation sämtlicher Projekte zu bieten.

Das Miniportfolio arbeitet grundsätzlich mit drei bekannten Script- und Programmiersprachen. HTML(5) und CSS, PHP, Javascript.

Der Schwerpunkt der Programmierarbeiten liegt in diesem Fall sicherlich im Bereich PHP. PHP ist eine serverseitige Scriptsprache, d.h. sie kann nur am Server ausgeführt werden. Siehe http://php.net/manual

Voraussetzungen:
Da ein Großteil der Programmierarbeiten mit PHP realisiert werden muss, wird dazu geraten sich eine lokale Testumgebung einzurichten. Anleitungen und Tutorials im Einsatz rund um MAMP (Mac) und XAMPP (Windows) finden Sie hier:

http://www.mamp.info
http://www.apachefriends.org

Weiters wird ein grundlegendes Wissen diverser HTML Entities und CSS Selektoren vorausgesetzt.
http://www.w3schools.com/css
http://www.w3schools.com/html

Struktur

 

Ein Beispiel des Miniportfolios findet man auf meiner persönlichen Webseite.

Das gesamte Projekt kann als .zip-Datei hier heruntergeladen werden.