Technica

Die Website der Sch√ľlerfirma Technica Light & Sound durchging viele √Ąnderungen √ľber die Zeit, wobei die Grundidee gleich blieb. In diesem Beitrag werde ich n√§cher auf die Grundfunktionen eingehen:

Landingpage

Die Landingpage soll √ľber alle Unternehmensbereiche der Sch√ľlerfirma hinweisen. Um dies, ohne jegliche Ablenkung, zu erreichen, entschied ich mich f√ľr ein Hero-Image (Bild, welches sich √ľber die Komplette Bildschirmfl√§che zieht) mit passendem Themenbezogenem Text, welches Galerieartig gewechselt wird.

Kompetenzen werden untereinander mit seitenwechselnden Bildern dargestellt. Direkt unter der √úberschrift sind Anker-Links womit man direkt zu einer bestimmten Kompetenz kommt.
Im Hintergrund werden stripes angezeigt, welche durch einen CSS Parameter transform: skewX(-12deg); um -12¬į gedreht wird. Einige dieser Stripes sind Farbneutral, sprich grau bzw wird nur eine Outline angezeigt. Die Farbigen Stripes nehmen die Farben an, welche auch im aktuellen Hero Image angezeigt werden. Dadurch entsteht eine Verbindung zwischen den obrigen Elementen der Webseite und den unteren.

Die Geschäftspartner werden in einem 3*x Grid angezeigt. Die aktuelle Auswahl eines Geschäftspartners wird durch eine Transition dargestellt. Dabei wird das ausgewählte Element leicht vergrößert und die anderen werden weichgezeichnet.

Veranstlatungen

Veranstaltungen sind das wichtigste Thema einer Veranstaltungsfirma, daher liegt auf dieser Unterseite auch ein hoher Wert.

Direkt am Seitenanfang werden die Aktuellen Projekte und Veranstaltungen angezeigt. Die Wichtigsten in einem 2*x Grid, darunter eine Auflistung von allen. So wird ein Fokus darauf gesetzt, was am wichtigsten ist.

Darauf folgt eine Auflistung von vergangen Veranstlatungen. Blogartig wird ein Text (im Bild gek√ľrzt) und Bilder angezeigt. Die Bilder sind anklickbar, und sowohl am Desktop, als auch auf dem Mobilen Endger√§t wie eine normale Gallerie nutzbar. Die benutzte Liberary ist PhotoSwipe.

Leihsystem

Das Leihsystem ist bei weitem das Komplexeste auf der Webseite. Quasi ein Online-Shop System, nur zum Ausleihen von Veranstaltungstechnik. Gegliedert ist dieser Shop in 4 Teile: Vorschläge und Sets, Tontechnik, Lichttechnik und Zubehör.

F√ľr eine √úbersichtliche Darstellung gibt es sowohl eine normale Auflistung der Gegenst√§nde, als auch eine Grid-Auflistung. Auf Mobilen Ger√§ten ist diese Auswahl nicht vorhanden, da dies platztechnisch unn√∂tig w√§re.

Nach einer Auswahl von der Technik wird durch Javascript Verarbeitungen und Datenbankabfragen eine Zusammenfassung erstellt bei welcher man auch gleichzeitig die Anfrage absenden kann.

Nach einer Anfrage werden vom Nutzer eingegebene Daten und ausgew√§hlte Technik zuerst in eine Datenbank hinzugef√ľgt. Von dort aus wird eine Email an konfigurierbare Adressen mit den wichtigsten Informationen gesendet. Somit wird eine sichere Datenverarbeitung und schnelle Antwortm√∂glichkeit geboten.