Webprojekte

Auf dieser Seite sind alle Webprojekte zusammengefasst, an denen ich bisher gearbeitet habe. Das geht von beruflichen Projekten bis hin zu Schulungsprojekten. Bei erstmaligen Klick auf einen Bildlink wird eine neue Seite/Reiter geöffnet in dem dann alle weiteren Linkklicks angezeigt werden.

Berufliche Projekte

An diesen Seiten habe ich für Firmen gearbeitet. Bei (fast) all diesen Projekten habe ich das Layout anhand von Kundenwünschen erstellt.

Tischlerei Hofer
Tischlerei Hofer
Tischlerei Hofer

Informationsseite der Tischlerei Hofer in Winzendorf, auf der die Dienstleistungen und Kontaktmöglichkeiten zur Verfügung stehen.

Meine Aufgaben:

  • Erstellung des Layouts
  • Umsetzung in HTML5 und CSS
  • Textbearbeitung
  • Grafikbearbeitung
  • Bildbearbeitung
Tello Abdichtungstechnik
Tello Abdichtungstechnik
Tello Abdichtungstechnik

Informationsseite der Firma Tello Abdichtungstechnik in Unterpetersdorf, auf der die Dienstleistungen beschrieben sind und Kontaktmöglichkeiten zur Verfügung stehen.

Seite nicht mehr online!!!

Meine Aufgaben:

  • Erstellung des Layouts
  • Umsetzung des Grundlayouts in HTML5 und CSS
  • Umwandlung in PHP
  • Textbearbeitung
  • Grafikbearbeitung
  • Bildbearbeitung
  • Kontaktformular inkl. Captcha
SSIT Solutions
SSIT Solutions
SSIT Solutions

Informationsseite der Firma SSIT Solutions in Ternitz, auf der alle Dienstleistungen am IT-Sektor aufgeführt sind und Kontaktmöglichkeiten zur Verfügung stehen.

Meine Aufgaben:

  • Analyse der Seite
  • Ersetzung des bestehenden Tabellenlayouts in HTML5 und Styling in CSS
  • Umwandlung in PHP
  • Textbearbeitung
  • Grafikbearbeitung
  • Bildbearbeitung
  • Kontaktformular inkl. Captcha
Unisan Universalsanierung
Unisan Universalsanierung
Unisan Universalsanierung

Informationsseite der Firma Unisan Universalsanierung in Wien, auf der alle Dienstleistungen rund ums Sanieren aufgeführt sind und Kontaktmöglichkeiten zur Verfügung stehen.

Firma nicht mehr online!!!

Meine Aufgaben:

  • Erstellung des Layouts
  • Umsetzung des Grundlayouts in HTML5 und CSS
  • Umwandlung in PHP
  • Logovektorisierung
  • Textbearbeitung
  • Grafikbearbeitung
  • Bildbearbeitung
  • Kontaktformular inkl. Captcha
Mareg Group
Mareg Group
Mareg Group

Gesamtseite meiner eigenen Firma Mareg Group in Wien, auf der eine kurze Vorstellung meiner Person und Firma zur Verfügung steht.

Meine Aufgaben:

  • Erstellung des Layouts
  • Umsetzung in HTML5 und CSS
  • Logoerstellung
  • Texterstellung- und bearbeitung
  • Grafikerstellung- und bearbeitung
  • Bildbearbeitung
  • Responsive Design
Mareg Assembling
Mareg Assembling
Mareg Assembling

Informationsseite meiner eigenen Firma Mareg Assembling in Wien, auf der die Dienstleistungen beschrieben sind und Kontaktmöglichkeiten zur Verfügung steht.

Meine Aufgaben:

  • Erstellung des Layouts
  • Umsetzung in HTML5 und CSS
  • Logoerstellung
  • Texterstellung- und bearbeitung
  • Grafikerstellung- und bearbeitung
  • Bildbearbeitung
  • Responsive Design
Mareg Design
Mareg Design
Mareg Design

Informationsseite meiner eigenen Firma Mareg Design in Wien, auf der die Dienstleistungen beschrieben sind und Kontaktmöglichkeiten zur Verfügung steht.

Meine Aufgaben:

  • Erstellung des Layouts
  • Umsetzung in HTML5 und CSS
  • Logoerstellung
  • Texterstellung- und bearbeitung
  • Grafikerstellung- und bearbeitung
  • Bildbearbeitung
  • Responsive Design
Mareg Shirts
Mareg Shirts
Mareg Shirts

Informationsseite meiner eigenen Firma Mareg Shirts in Wien, auf der die Dienstleistungen beschrieben sind und Kontaktmöglichkeiten zur Verfügung steht.

Meine Aufgaben:

  • Erstellung des Layouts
  • Umsetzung in HTML5 und CSS
  • Logoerstellung
  • Texterstellung- und bearbeitung
  • Grafikerstellung- und bearbeitung
  • Bildbearbeitung

Berufliche Vorschläge

Dies waren Vorschläge für Kunden. Diese enstanden nach kurzer Erläuterung, was sich der Kunde so vorstellt.

Vorschlag Glas Express
Glas Express
Vorschlag für die Firma Glas Express:

  • Erstellung eines einspaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Hintergrundslideshow
  • Inhalt ausblendbar
  • Bildbearbeitung
Vorschlag Chinarestaurant Kleewok
Chinarestaurant Kleewok
Vorschlag für Chinarestaurant Kleewok:

  • Erstellung eines zweispaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Responsive Design
Vorschlag OTC Classics
OTC Classics
Vorschlag für OTC Classics:

  • Erstellung eines einspaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Fixed Header
Vorschlag OTC Classics
Tello Abdichtungstechnik 1
Vorschlag 1 für Tello Abdichtungstechnik:

  • Erstellung eines einspaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Logovorschlag
  • Hitergrundbild
  • Fixed Header
  • Teilvorbereitet Responsive Design
Vorschlag OTC Classics
Tello Abdichtungstechnik 2
Vorschlag 2 für Tello Abdichtungstechnik:

  • Erstellung eines dreispaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Logovorschlag
  • Teilvorbereitet Responsive Design
Vorschlag OTC Classics
Tello Abdichtungstechnik 3
Vorschlag 3 für Tello Abdichtungstechnik:

  • Erstellung eines zweispaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Hintergrundslideshow
  • Inhalt ausblendbar
  • Logovorschlag
  • Teilvorbereitet Responsive Design
Vorschlag VAS Team
VAS Team
Vorschlag für Firma VAS Team:

  • Erstellung eines einspaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Einbindung jQuery
  • Bildbearbeitung
Vorschlag Noble Steels
Noble Steels
Vorschlag für Firma Noble Steels:

  • Erstellung eines zweispaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Hintergrundbild
  • Einbindung jQuery
  • Bildbearbeitung

Private Projekte

Hier sind meine privaten Webprojekte.

Communityseite BRP
Communityseite BRP
Communityseite BRP

Eine von mir erstellte Communityseite für die Berufsreifeprüfung. Leider war Facebook stärker :(.

  • Erstellung eines einspaltigen Layouts
  • Grundlayout in HTML5 und CSS erzeugt
  • Umwandlung in PHP
  • Login / Logout mittels PHP
  • Datenbankanbindung mittels PHP
  • Texterstellung und -bearbeitung
  • Bilderstellung und -bearbeitung
  • Grafikerstellung und -bearbeitung
  • Kachelbares Hintergrundbild
Meine private Homepage
Private Homepage alt 1
Meine private Homepage:

  • Erstellung eines zweispaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Dropdownmenü mit CSS
  • Einbindung jQuery
  • Inhalt wird mit AJAX nachgeladen
  • Texterstellung und -bearbeitung
  • Bilderstellung und -bearbeitung
  • Grafikerstellung und -bearbeitung
Meine private Homepage
Private Homepage alt 2
Meine private Homepage:

  • Erstellung eines zweispaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Dropdownmenü mit CSS
  • Texterstellung und -bearbeitung
  • Bilderstellung und -bearbeitung
  • Grafikerstellung und -bearbeitung
Meine private Homepage
Private Homepage alt 3
Meine private Homepage:

  • Erstellung eines zweispaltigen Layouts
  • Umsetzung in HTML5 und CSS
  • Texterstellung und -bearbeitung
  • Bilderstellung und -bearbeitung
  • Grafikerstellung und -bearbeitung
  • Feedbackformular mit PHP (deaktiviert)

Schulungsprojekte

Das sind die Projekte, an denen ich mit Schulungsmaterial gearbeitet habe. Diese sind in englischer Sprache gehalten, da die Schulungsbücher in Englisch waren. An dieser Stelle möchte ich ein Danke an die Fa. O'Reilly für ihre 'Head First' Buchreihe anbringen.

Head First AJAX

Dies sind die Projekte, welche ich mit 'Head First Ajax' durchgearbeitet habe. Diese sind in englischer Sprache. Bei Script 1 handelt es sich um die Utilityfunktionen, alle Scripte mit höherer Nummer sind die Logik der Seite.

Ab Kapitel09 werden auch externe Scripte mit eingebunden. Diese werden nicht angezeigt, da sie nicht selbst geschrieben sind.

Head First Ajax Kapitel 01
Head First Ajax Kapitel01
Rob's Rock'n Roll Memorabilia

Bei einem Klick auf ein Bild auf der linken Seite sollen rechts asynchron Daten abgerufen und angezeigt werden.

Scriptcode anzeigen
Head First Ajax Kapitel 02
Head First Ajax Kapitel02
Mike's Movies

Während der Eingabe von Daten in ein Formular soll asynchron der Benutzername daraufhin geprüft werden, ob dieser bereits vorhanden sind. Datenbankabfrage durch PHP Dateien simuliert.

Scriptcode 1 anzeigen Scriptcode 2 anzeigen
Head First Ajax Kapitel 03
Head First Ajax Kapitel03
Yoga for Programmers

Bei den Events Mouseover und Mouseleave sollen Hinweise dynamisch in der Webseite ein- bzw. ausgeblendet werden. Bei Klick auf einen Link soll für die entsprechende Stufe ein Kursplan gezeigt werden.

Scriptcode 1 anzeigen Scriptcode 2 anzeigen
Head First Ajax Kapitel 04
Head First Ajax Kapitel04
Yoga for Programmers 2

Das gleiche Szenario wie in Kapitel 3, jedoch mit weiteren Verbesserungen (z.B. mit multiplen Eventhandlern) und Erweiterung an Utilityfunktionen (Script1).

Scriptcode 1 anzeigen Scriptcode 2 anzeigen
Head First Ajax Kapitel 05
Head First Ajax Kapitel05
Mike's Movies 2

Erweiterung der Seite Mike's Movies. Nun werden zusätzlich zur Überprüfung des Benutzernamens auch eine Passwortüberprüfung durchgeführt. Während der Registrierung wird das gesamte Formular deaktiviert und eine Bildershow mit Covern eingeblendet.

Scriptcode 1 anzeigen Scriptcode 2 anzeigen
Head First Ajax Kapitel 06
Head First Ajax Kapitel06
Webville Puzzels

Kleines Knobelspiel mit 15 Zahlen und einem leeren Feld. Bei Klick auf eine Zahl wird diese verschoben, sofern in unmittelbarer Umgebung ein Feld frei ist.

Scriptcode anzeigen
Head First Ajax Kapitel 07
Head First Ajax Kapitel07
Webville Puzzels 2

Ein weiteres Knobelspiel, diesmal in Kombination mit PHP. Es wird ein Set von 16 Buchstaben zur Verfügung gestellt. Aus diesen müssen (englische) Wörter gebildet werden. Jeder Buchstabe kann bis zur Übermittlung des Wortes nur einmal geklickt werden.

Scriptcode 1 anzeigen Scriptcode 2 anzeigen
Head First Ajax Kapitel 09
Head First Ajax Kapitel09
Rob's Rock'n Roll Memorabilia 2

Das selbe Szenario wie in Kapitel 1, jedoch werden hier verschiedene Responsemöglichkeiten durchgearbeitet (alle unterschiedlichen Möglichkeiten in der Scriptdatei enthalten).

Scriptcode anzeigen
Head First Ajax Kapitel 10
Head First Ajax Kapitel10
Rob's Rock'n Roll Memorabilia 3

Hier wird nochmals, diesmal ein wenig detaillierter auf die unterschiedlichen Responsmöglichkeiten eingegangen. Explizit handelt es sich um Responses in CSV, XML und JSON.

Scriptcode 1 anzeigen Scriptcode 2 anzeigen Scriptcode 3 anzeigen Scriptcode 4 anzeigen Scriptcode 5 anzeigen
Head First Ajax Kapitel 11
Head First Ajax Kapitel11
Yoga for Programmers 3

In diesem Kapitel geht es um Formularvalidation. Dabei werden verschiedene Aspekte behandelt (Kontrolle auf Nummern oder nur Buchstaben, RegEx,...).

Scriptcode 1 anzeigen Scriptcode 2 anzeigen
Head First Ajax Kapitel 12
Head First Ajax Kapitel12
Mike's Movies 3

Im Schlusskapitel geht es um die asynchrone Übermittlung von Daten mittels POST anstatt GET. Dabei wird nochmals Mike's Movies bemüht.

Scriptcode 1 anzeigen Scriptcode 2 anzeigen

Head First PHP & MySQL

Dies sind die Projekte, welche ich mit 'Head First PHP & MySQL' durchgearbeitet habe. Auch diese sind in englischer Sprache. Wenn bei einer Erläuterung ein Dateiname in Klammer eingefügt ist, ist dieser nach Aufruf des Programms manuell anzuhängen.

Head First PHP & MySQL Kapitel 01
Head First PHP & MySQL Kapitel01
Entführt von Außerirdischen - E-Mail

Es wird ein Formular ausgefüllt und beim Absenden wird eine Bestätigungsseite dargestellt und eine Mail verschickt, mit Hilfe von PHP.

PHP-Code 1 anzeigen
Head First PHP & MySQL Kapitel 02
Head First PHP & MySQL Kapitel02
Entführt von Außerirdischen - Datenbank

Es wird ein Formular ausgefüllt und beim Absenden wird eine Bestätigungsseite dargestellt und die Daten werden in eine Datenbank eingetragen.

PHP-Code 1 anzeigen
Head First PHP & MySQL Kapitel 03
Head First PHP & MySQL Kapitel03
Elvis Shop

Eine Mini-App, bestehend aus einer Datenbank und drei Modulen: E-Mail-Adresse hinzufügen, E-Mail senden und E-Mail-Adresse löschen.

PHP-Code 1 anzeigen PHP-Code 2 anzeigen PHP-Code 3 anzeigen
Head First PHP & MySQL Kapitel 04
Head First PHP & MySQL Kapitel04
Elvis Shop

Dieselbe Anwendung wie in Kapitel 03, jetzt jedoch mit Validierung und Sebstreferenzierung (Sendemail, Removeemail)

PHP-Code 1 anzeigen PHP-Code 2 anzeigen PHP-Code 3 anzeigen
Head First PHP & MySQL Kapitel 05
Head First PHP & MySQL Kapitel05
Guitar Wars - High scores

High-Score Seite für Guitar Wars. Hochladen des High-Scores mit Bildbeweis (inkl. MIME-Type und Größen-Prüfung). Adminseite zum Löschen von Scores (admin.php).

PHP-Code 1 anzeigen PHP-Code 2 anzeigen PHP-Code 3 anzeigen PHP-Code 4 anzeigen

Weiterhin im Aufbau...

Der Abschnitt Schulungsprojekte wird in nächster Zeit weiter aufgebaut werden. Leider habe ich bei einer Neustrukturierung meiner Daten viele Schulungsprojekte verloren. Also wieder aufbauen, dann kann es hier weiter gehen.