IFD:WebApps/Ani Jordanowa: Difference between revisions

← Older edit

IFD:WebApps/Ani Jordanowa (view source)

Revision as of 17:17, 23 March 2011

4,908 bytes added , 23 March 2011

→‎Screenshot

Ani Jordanowa

48

edits

@@ Line 40: / Line 40: @@
 === 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.<br /><br />
+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.<br /><br />
-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.
 <br /><br />
-*'''Login/Registrierung'''
+==== Login/Registrierung ====
-** Loginformular mit Session-ID und Cookies
+**Loginformular mit Session-ID und Cookies
-** beim Falle einer Registrierung wird nur das Formular ausgetauscht, nicht die Seite neu geladen
+**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
+**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
+**MD5 - Verschlüsselung des Passwortes
-**  benutzerfreundliche Bedienung (spezifische Fehlermeldungen bei falschem Verhalten, ausgefüllte Felder bleiben bei Fehlerverhalten ausgefüllt)
+**benutzerfreundliche Bedienung (spezifische Fehlermeldungen bei falschem Verhalten, ausgefüllte Felder bleiben bei Fehlerverhalten ausgefüllt)
-<br />
+**Schwierigkeiten:
+***Anfängerschwierigkeiten beim Umgang mit Datenbanken
+==== Code ====
+Datenbankanbindung:
+<source lang="php" line start="1">
+<?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);
+	}
+?>
+</source>
+<br clear="all" />
+==== Screenshots ====
+[[File:login.png|left|thumb|Login-Formular]]
+[[File:registrierung.png|left|thumb|Registrierungsformular]]
+<br clear="all" />
+==== 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 ====
+[[File:upload.png|left|thumb|Upload-Formular und Rezeptrelation]]
+<br clear="all" />
+=== 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 ====
+[[File:noteCook_bereich.png|left|thumb|noteCook-Bereich]]
+[[File:eintrag.png|left|thumb| Eintrag im noteCook-Bereich]]
+<br clear="all" />
+==== Rezepte finden ====
+**  Auswahl zwischen zwei großen Rezeptportalen
+**  Rezeptsammlung öffnet sich in FancyBox, das Finden von Rezepten ist also möglich, ohne noteCook zu verlassen
+** Schwierigkeiten:
+*** Fanybox ließ sich nicht in Verbindung eines Formulars, das mittels Php ausgelesen und verarbeitet wird bzw. einem Datenbankeintrag zum Laufen bringen
+==== Screenshot ====
+[[File:suchen.png|left|thumb|Rezepte finden]]
+<br clear="all" />
+=== Nachtrag ===
+Das Projekt mit derzeitigem Umfang wurde mit folgenden Browsern bzw. Endgeräten getestet und garantiert nur dortige optimale Funktionsweise:
+** Safari 5.0
+** Firefox/3.6.15
+** Google Chrome 10.0.648.151
+** Internet Explorer 8.0
+** iPad (iOS-Simulator Version 4.2)
+** iPhone (iOS-Simulator Version 4.2)
+=== Ausblick ===
+noteCook befindet sich in keinem Fall in einem rundum fertigen und zufrieden stellenden Zustand.
+** die Funktionalität von Jeditable, die „Tipps & Tricks“-Seite, die FAQ-Liste und das Kontaktformular sind noch nicht implementiert.
+** viele Kleinigkeiten können sicherlich noch verbessert werden
+** aus Zeitmangel konnte ich der Optimierung im Hinblick auf die Benutzung mit Smarphones und Co. mittels phoneGap nicht die gewünschte Aufmerksamkeit und Zuwendung schenken. Dies wäre sicherlich eine für die Zukunft erstrebsame Fortführung des Projekts.