Martins Webprojekte

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

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
Geschrieben mit Notepad++

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
Geschrieben mit Notepad++

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
Geschrieben mit Notepad++

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
Geschrieben mit Notepad++

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
Geschrieben mit Notepad++

Berufliche Vorschläge

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

Glas Express Vorschlag für die Firma Glas Express:

Erstellung eines einspaltigen Layouts
Umsetzung in HTML5 und CSS
Hintergrundslideshow
Inhalt ausblendbar
Bildbearbeitung
Geschrieben mit Notepad++

Chinarestaurant Kleewok Vorschlag für Chinarestaurant Kleewok:

Erstellung eines zweispaltigen Layouts
Umsetzung in HTML5 und CSS
Responsive Design
Geschrieben mit Notepad++

OTC Classics Vorschlag für OTC Classics:

Erstellung eines einspaltigen Layouts
Umsetzung in HTML5 und CSS
Fixed Header
Geschrieben mit Notepad++

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
Geschrieben mit Notepad++

Tello Abdichtungstechnik 2 Vorschlag 2 für Tello Abdichtungstechnik:

Erstellung eines dreispaltigen Layouts
Umsetzung in HTML5 und CSS
Logovorschlag
Teilvorbereitet Responsive Design
Geschrieben mit Notepad++

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
Geschrieben mit Notepad++

VAS Team Vorschlag für Firma VAS Team:

Erstellung eines einspaltigen Layouts
Umsetzung in HTML5 und CSS
Einbindung jQuery
Bildbearbeitung
Geschrieben mit Notepad++

Noble Steels Vorschlag für Firma Noble Steels:

Erstellung eines zweispaltigen Layouts
Umsetzung in HTML5 und CSS
Hintergrundbild
Einbindung jQuery
Bildbearbeitung
Geschrieben mit Notepad++

Private Projekte

Hier sind meine privaten Webprojekte.

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
MySQL Datenbankanbindung mittels PHP
Texterstellung und -bearbeitung
Bilderstellung und -bearbeitung
Grafikerstellung und -bearbeitung
Kachelbares Hintergrundbild
Geschrieben mit Notepad++

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
Geschrieben mit Notepad++

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
Geschrieben mit Notepad++

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)
Geschrieben mit Notepad++

Archiv Ressourcenbasierte Wirtschaft Archiv RBW:

Erstellung des Designs
Texterstellung und -bearbeitung
Bilderstellung und -bearbeitung
Grafikerstellung und -bearbeitung
Umsetzung in HTML5, PHP und CSS
Mediaabschnitt dieser Seiten sind nicht hard-coded, PHP-Script liest XML-Datei ein
Responsive Design
Geschrieben mit Adobe Brackets

Schulungsprojekte Head First

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. Sämtliche Projekte sind mit Notepad++ geschrieben.

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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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.