IFD:WebApps/Ani Jordanowa

Kurzbeschreibung

„Ein E-Book, eingedeutscht E-Buch oder auch Digitalbuch versucht im weitesten Sinne, das Medium Buch mit seinen medientypischen Eigenarten in digitaler Form verfügbar und an die persönlichen Bedürfnisse anpassbar zu machen.“ (Wikipedia) Entgegen dem ausgedruckten und gebundenen Buch weisen eBooks so zahlreiche Vorteile auf, die man als moderner Mensch und PC-Nutzer gerne verwendet. Genau dies stellte schließlich den Hintergrund für die im Rahmen des Kurses umzusetzende WebApp dar. Grundidee dabei war eine App zu erstellen, die eine Art Sammelalbum für Rezepte repräsentiert und dem Nutzer somit die Möglichkeit eines personalisierten, durchweg dem eigenen Geschmack entsprechenden und dank Smartphone und Co. portablen Kochbuches bietet. Schnell fand sich damit auch der passende Name für das Projekt: NoteCook - die optimale Verbindung aus Notizbuch/Sammelalbum (Notebook) und dem Kochen (Cooking).

Umsetzung

Phase I

Ich begann die Umsetzung meiner App ausschließlich mit der grundlegenden Gestaltung der Seite, da ich die genaue Funktionalität mit meinem damaligen Wissensstand noch nicht eindeutig festlegen und so den damit verbundenen technischen Aufwand noch nicht abschätzen konnte. Im Hinblick auf das Design war mir dagegen relativ schnell klar, was ich realisieren wollte. Der Hauptgedanke bestand in der Analogie zum gewöhnlichen gebundenen Buch in der Verbindung mit einem etwas unordentlich wirkendem Hintergrund, um den Aspekt des Sammelalbums zu unterstreichen und einer Handschriftlichen Typografie für den Bezug zum herkömmlichen Kochbuch.

Den so entstandenen ersten Entwurf verwarf ich dennoch relativ schnell, da mir bewusst wurde, dass diese Gestaltung zu sehr in den Vordergrund rückte und den Informationsgehalt und die Funktionalität der Seite zu stark beeinflusste. Die einzelnen Komponenten waren zwar schon den Vorstellungen entsprechend, jedoch im Zusammenspiel noch nicht optimal. So entschloss ich mich, die besagte Analogie zwar keines Falls zu verwerfen, doch stark zu abstrahieren.

Screenshot

erster Entwurf der Seite

Phase II

Die zweite Phase beschäftigte sich ebenfalls mit dem gestalterischen Aspekt der App. Der erste Entwurf wurde überarbeitet und wie erwähnt stark abstrahiert. Ich entschloss mich für einen Schreibblock, um den Bezug zum Kochbuch beizubehalten. Den„unordentliche“ Hintergrund beschränkte ich nur auf eine Seite. Des Weiteren setzte ich einen Header bzw. Footer in Holzoptik. Dies soll zum einen die Analogie weiterführen - ein Buch, das auf dem Tisch liegt - zum anderen verbindet man mit Holz eine gewisse Behaglichkeit, die ich mir für meine Zwecke zu Nutze mache. Das Menü wurde zum farblichen Akzentpunkt der Seite und kann als Reihe von Klebezetteln verstanden werden. Die farbliche Gestaltung soll die Assoziation von frischem Obst und Gemüse erzeugen, um die Komponente des Kochens ins Design einfließen zu lassen. Im Rahmen des neuen Designs habe ich schließlich auch das Logo überarbeitet, da die kursive Eigenschaft nicht mehr zum restlichen Eindruck der Seite passte. Den handschriftliche Stil wollte ich dennoch beibehalten.

Die letztendliche Fassung umfasst neben den gestalterischen auch auf die Bedienbarkeit abgestimmte Besonderheiten.

• Auflösung
  • Die minimale Auflösung ist 768px : 1024px. Damit ist es vor allem für die horizontale Anwendung auf dem i-Pad und dem i-Phone optimal. Die maximale Auflösung ist bewusst auf 1280px beschränkt, da ansonsten das Design unproportional wird.
• Menü
  • Das Menü ist „fixed“ und somit immer verfügbar. Dies vermeidet unnötiges Scrollen auf Ausgabegeräten wie Smartphones und Co.

Screenshots

farbliche Gestaltung des Menüs

erster Entwurf des Logos

noteCook Logo

noteCook Design

Phase III

Nachdem das Design nun feststand, wandte ich mich in der dritten Phase dem funktionalen Aufbau der Seite und den damit verbundenen technischen Faktoren zu. Dabei legte ich mich auf folgenden Funktionsumfang fest: Der Nutzer von noteCook hat die Möglichkeit sich zu registrieren und anschließend in einen privaten Bereich einzuloggen. Dort kann er Screenshots, Fotos oder sonstige als Bilddatei abgespeicherte Rezepte hochladen, die er zuvor ebenfalls über noteCook sammeln und in einem weiteren Bereich verwalten kann. Somit ergaben sich für die weitere Entwicklung des Projekts 4 Hauptbereiche - Das Login- bzw. Registrierungsbereich, der Bereich, indem man aus unterschiedlichen Rezeptseiten seine persönliche Rezeptsammlung erstellt, ein Uploadbereich und schließlich ein Bereich um die Rezepte zu verwalten. Um das Menü abzurunden, kamen noch ein „Home“-Bereich und ein Bereich für nützliche Küchenhilfen hinzu.Bei der Umsetzung der einzelnen Bereiche habe ich fast ausschließlich Php benutzt, da es mir wichtig war, dass die grundlegende Funktionalität auch bei deaktiviertem Javascript gegeben bleibt.

Da ich im Umgang mit Php keinerlei Erfahrung besaß und zudem eine tiefgründige Einarbeitung in die Umsetzung und Verwendung von Datenbanken, genauer SQL, MAMP und myPHPadmin , in Hinblick auf die geplante Funktionalität von noteCook unumgänglich war, beanspruchte Phase III die meiste Zeit während der Projektbearbeitung.

Login/Registrierung

• • Loginformular mit Session-ID und Cookies
  • beim Falle einer Registrierung wird nur das Formular ausgetauscht, nicht die Seite neu geladen
  • bei einer Registrierung werden bewusst keine unnötigen Daten abgefragt, um dem Nutzer die Entscheidung für noteCook zu erleichtern
  • MD5 - Verschlüsselung des Passwortes
  • benutzerfreundliche Bedienung (spezifische Fehlermeldungen bei falschem Verhalten, ausgefüllte Felder bleiben bei Fehlerverhalten ausgefüllt)
  • Schwierigkeiten:
    • Anfängerschwierigkeiten beim Umgang mit Datenbanken

Code

Datenbankanbindung:

<?php
	//Verbindung zur Datenbank
	$server = 'localhost';
	$user = 'root';
	$pwd = 'root';
	$datenbank = 'NoteCook';

	$verbindung = mysqli_connect($server, $user, $pwd);
	
	//Verbindung zu MySQL erfolgreich?
	if ($verbindung){
		mysqli_select_db($verbindung, $datenbank);
		
		//Verbindung zur Datebank erfolgreich?
		if(mysqli_error($verbindung)){
			echo 'Fehler:' . mysqli_error($verbindung);
		}
		else{
			//echo 'Verbindung zur Datenbank erfolgreich <br/>';
		}
	}
	else{
		//echo 'Verbindungsfehler:' . mysqli_connect_error($verbindung);
	}
?>

Screenshots

Login-Formular

Registrierungsformular

Upload

• • Dateiupload-Formular mit Angabe von Rezeptname, Gang und Kategorie
  • mit Hilfe von Javascript ist das Formular dynamisch und man kann bis zu 3 Rezepte gleichzeitig uploaden
  • auch hier gibt es benutzerfreundliche Fehlermeldungen
  • Beschränkung auf max. 2MB große Bilddateien
  • Schwierigkeiten:
    • anfängliche Schwierigkeiten beim Gestalten eines dynamischen Formulars mit Datenbankeintrag
    • die in MySQL standardmäßig verwendete Storage-Engine unterstützt keine Fremdschlüsselbeziehungen, somit bin ich auf InnoDB umgestiegen
    • ich habe für den Anfang bewusst nur Bilddateien zugelassen, obwohl dies eine geringfügige Beeinträchtigung in dem Umgang mit noteCook darstellt, da ich pdf-Dateien nicht dem Design entsprechend darstellen kann (z.B. Vorschaubild)

Screenshot

Upload-Formular und Rezeptrelation

Phase IV

Um den Bereich für die Rezeptverwaltung und dem Rezepte finden möglichst intuitiv und benutzerfreundlich zu gestalten habe ich mich in der letzten Phase dafür entschieden ein paar Optimierungen mit Hilfe von jQuery und ein folgenden Plugins vorzunehmen.

• Anything-Slider
  • um die unterschiedlichen Sortierkriterien bestmöglich darzustellen und die Bedienung zu erleichter
• FancyBox
  • Vergrößerung der Vorschaubilder und Verdunkelung des Hintergrundes um sich auf das jeweilige Rezept konzentrieren zu können; ermöglicht das Finden von Rezepten aus fremden Rezeptsammlungen ohne noteCook zu verlassen
• Jeditable
  • ermöglicht Rezepte mit persönlichen und intuitiven Notizen zu versehen

noteCook-Bereich

• • das Austauschen des Inhalts ist ausschließlich mit Php realisiert und somit auch bei deaktiviertem Javascript voll funktionsfähig
  • Rezepte können alphabetisch, nach Gang, nach Kategorie und nach Datum sortiert werden
  • jeder Eintrag besteht aus einem Vorschaubild, einem Rezeptnamen und der Möglichkeit direkt in den Inhalt der Seite eine persönliche Notiz einzufügen (Framework eingebunden, Funktionalität ersichtlich, Php-Funktion im Hintergrund jedoch noch nicht implementiert)
  • Vorschaubilder können mit einem Klick vergrößert werden
  • die Navigation ist auch mit den Pfeiltasten möglich
  • Schwierigkeiten:
    • die Panele von Anything-Slider lassen keinen dynamischen Inhalt zu und können nur mit einer festen Höhe angegeben werden
    • beim Navigieren mittels den Pfeiltasten wird der Hash in der Url leider nicht mit erneuert

Screenshots

noteCook-Bereich

Eintrag im noteCook-Bereich