Es war bisher eines meiner umfangreichsten Projekte in meiner Selbstständigkeit: Im Auftrag meines langjährigen Kunden Streifzug Media aus Kitzbühel realisierte ich eine Top-Immobilienplattform mit Fokus auf Österreich und München. Die Plattform bot Top-Maklern und Bauträgern die optimale Möglichkeit, ihre Premium-Immobilien in Österreich bzw. in und um München auf hochwertigem und ansprechendem Niveau zu präsentieren, um somit gezielt eine kaufkräftige Klientel anzusprechen. Die Premium-Plattform war komplett zweisprachig (deutsch und englisch) ausgeführt und stellte nur Immobilien mit einem Mindestkaufpreis von EUR 500.000 bzw. einem Mindestmietpreis von EUR 2.500 vor.
Premium Immobilienplattform
Die Website beruhte auf der im Mai 2009 online gestellten Plattform für die internationale Luxusimmobilie, die aus organisatorischen Gründen in dieser Form nicht mehr weitergeführt wurde. Im Zuge der Überarbeitung wurde die bestehende Plattform noch in vielen Bereichen optimiert und mit neuen Funktionen ausgestattet. Die Wartungsoberfläche wurde auch komplett aufpoliert und generell die Benutzerfreundlichkeit der Website – im Frontend und Backend – erhöht.
Die strikte Trennung von Design und Inhalt bei Webprojekten führte dazu, dass die HTML-Konstrukte immer einfacher und die CSS-Dokumente immer komplexer wurden. So bringen es sogar die Stylesheets kleiner Websites recht schnell auf über 500 Zeilen Code und werden über den Projektlebenszyklus hinweg immer undurchsichtiger. Bei umfangreicheren Webprojekten stellen die Stylesheets nicht selten ein kleines „Kunstwerk“ dar, das mit vertretbarem Zeitaufwand nur vom ursprünglichen Entwickler komplett durchschaut wird. Diese Tatsache macht es auch sehr schwierig im Team an den Styles einer Website zu arbeiten. Auch eine Wiederverwendung von CSS-Dokumenten für andere Projekte ist nur eingeschränkt möglich.
Die Lösung: OOCSS
Die Webentwicklerin Nicole Sullivan versucht mit ihrer Objektorientiertes CSS (OOCSS) genannten Methode einen Lösungsansatz zu finden. OOCSS versucht die Idee der Objektorientierung auf CSS zu übertragen. Objektorientiertes CSS ist dabei keine neue Technik, sondern vereint eine Reihe von Regeln für die Gestaltung von CSS-Dateien. Grundgerüst von OOCSS ist eine von Nicole Sullivan auf ihrer GitHub Projektseite bereitgestellte Code-Bibliothek im Alpha-Stadium. Um das CSS-Framework einsetzen zu können, müssen wie schon erwähnt einige Regeln beachtet werden. Die zwei wichtigsten:
Trenne Container und Inhalt Gemäß Sullivans Terminologie bildet ein simpler HTML-Tag (z.B. <h1>, <p>, <li>, …) mit zugehörigem CSS einen Inhalt. Komplexere Strukturen bestehend aus mehreren <div>-Elementen werden als Container bezeichnet. Ordnet man diesen Containern jetzt noch über mehrere CSS-Klassen Layout und Design (Skins) zu, dann entstehen Sullivans Objekte.
Trenne Struktur und Design Nicole Sullivan bezieht sich hier auf das CSS von Containern und Inhalten. Durch die Verwendung unterschiedlicher Klassen für Layout- und Design-Elemente wird die Wiederverwendbarkeit von Objekten in anderen Projekten ermöglicht.
In Kooperation mit meinem Partner D-SE7EN aus Wien war ich für die technische Umsetzung der Microsite für die KNORR Kinder-Suppen verantwortlich. Die Website informierte über die Produkte – Dino Suppe, Glückskäfer Suppe und Piraten Suppe – und präsentierte einige Rezeptideen. Weiters fand man auch ein Gewinnspiel und einen Downloadbereich mit Malvorlage, Geburtstagseinladung und Desktop-Hintergrundbildern auf der Microsite.
Besonderheit: Das vom Spielehersteller Ravensburger als Brettspiel produzierte KNORR-Memo-Spiel wurde von uns etwas abgespeckt (12 Paare) als Flash-Variante umgesetzt.
Google Maps ist ein Dienst von Google, der leistungsstarke und nutzerfreundliche Kartentechnologie und Informationen zu Unternehmen wie Standorte, Kontaktinformationen und Routenplaner bietet. Für Webdeveloper wird eine gut dokumentierte API (Application Programming Interface) zur Verfügung gestellt und daher kann man das umfangreiche Kartenmaterial auch in eigene Webprojekte integrieren – maßgeschneidert für die jeweilige Anforderung. Voraussetzung dafür ist ein Google API-Key, der als Zugangsschlüssel zu den Daten fungiert.
Das im 6. Semester eingeplante einsemestrige Berufspraktikum ist ein wesentlicher Bestandteil des Medientechnik und -design Curriculums. Es soll die intensive Ausbildung am FH-Studiengang durch die konkrete Mitarbeit in geeigneten Unternehmen oder Organisationen ergänzen und vertiefen. Nachfolgend ein „Zeitungsartikel“ über das Praktikum, den wir unter anderem im Rahmen der Berufspraktikums-Dokumentation verfassen mussten.
