IFD:WebApps/Matthias Busse: Difference between revisions

From Medien Wiki
Line 79: Line 79:
[[File:bookle_result_navin.jpg|left|thumb|... und wieder eingeklappt]]
[[File:bookle_result_navin.jpg|left|thumb|... und wieder eingeklappt]]
[[File:bookle_result_lightbox.jpg|left|thumb|Lightbox für die Buchcover]]
[[File:bookle_result_lightbox.jpg|left|thumb|Lightbox für die Buchcover]]
<br clear="all" />
=== Phase IV ===
Seit dem letzten Update hat sich einiges getan. Ich konnte viele Punkte der To-Do-Liste abarbeiten, nur kamen während dessen leider auch immer wieder neue Kleinigkeiten hinzu.
Hier eine Übersicht über die Veränderungen:
<br /><br />
*'''Validierung und Erweiterung des Search- und Add-Formulars'''
**Hierbei frage ich mit unzähligen PHP-Klauseln ab, ob alle geforderten Daten fürs Hinzufügen eines Buches auch eingegeben wurden und natürlich auch ob diese den Anforderungen genügen. Dazu gehört eine ISBN im 13er Format, gültige Jahreszahlen, etc. Dazu muss Sprache, Genre, Erscheinungsdatum und einige neue Optionen wie Emotion, Protagonist oder Seitenzahl ausgewählt sein. Für eine Orientierung habe ich die text-inputs schon vorbelegt, damit der Nutzer eine Art Vorlage hat. Bei Selektion des entsprechenden Feldes verschwindet diese Vorlage automatisch und wird auch wieder eingeblendet, wenn der User nichts eingibt.
**Des Weiteren wird der User nach erfolgreicher Übertragung des Formulars gebeten, ein Cover nach bestimmten Anforderungen (Dateigröße, Bildformat, -größe) hochzuladen. Anschließend wird eine Übersicht erstellt und er kann entweder bestätigen und das Buch abschicken oder seine Daten bearbeiten.
*'''Anpassung der Selects, Radio-Buttons und Checkboxen an das Design'''
**Eine recht schwierige Aufgabe, da hier leider kein CSS hilft. Die Browser stellen sich dumm und lassen nur die standardisierten Inputs zu. Also musste zusätzlich JavaScript und Photoshop herhalten. Nach vielem Gefrikel und Rumdoktorn mit JavaScript war ich endlich zufrieden und die Buttons sind keine Eye-Catcher mehr, so wie Michael es zurecht beanstandete.
*'''My Bookle'''
**Als zusätzliches Feature habe ich einen Login für Bookle implementiert. User haben nach einer Registrierung ein eigenes Benutzerkonto mit zahlreichen Möglichkeiten. So können sie Bücher aus der den Suchresultaten auf eine To-Read Liste oder eine Favoritenliste setzen. Hierzu genügen Klicks auf das Herz- bzw. Buchstapelsymbol neben den Buchcovern. Außerdem kann man Suchanfragen speichern, um mit dem Stöbern auch Tage später fortzufahren. Hat man ein Buch in der To-Read- oder Favoritenliste, kann man sie von dort aus Freunden via Facebook oder Twitter zeigen. Auch hierzu reicht ein Klick auf das jeweilige Faviconsymbol.
**Anhand der gespeicherten Favoriten kann man Bookle erlauben, sich ähnliche Bücher als Empfehlung per Mail schicken zu lassen. Diese Option (und weitere) kann man dann in den Kontoeinstellungen ändern.
**Für die einfache und schnelle Handhabung habe ich zusätzlich ein Quick Login oben auf jeder Seite platziert, der sich mittles jQuery ausklappen lässt und eine Sofortanmeldung/-abmeldung erlaubt.
**Wem Bookle gut gefällt, kann unter "Tell A Friend" die Seite per Facebook, Twitter oder per Mail empfehlen. Dazu waren die "Gefällt mir"-Buttons von den beiden Netzwerken sehr praktisch.
*'''Nicht-JavaScript-Nutzer-freundlich'''
**Hierbei habe ich mir ehrlich gesagt nicht die große Mühe gemacht. Wer JavaScript ausschaltet, hat natürlich trotzdem den vollen Funktionsumfang verdient, nicht jedoch den uneingeschränkten Komfort. Also lasse ich das "Advanced Search"-Menü, den Quick-Login, Accounteinstellungen etc. einfach mit JavaScript ausblenden. Wer es deaktiviert, muss meiner Meinung nach mit voll ausgeklappten Menüs leben können. Solch eine derbe Einschränkung sollte das nicht sein.
==== Screenshots ====
[[File:advsearch-failure.jpg|left|thumb|Ausgeklapptes Formlular mit Fehlermeldun]]
[[File:login.jpg|left|thumb|Login-Bereich]]
[[File:quicklogin.jpg|left|thumb|Quick-Login (oben)]]
[[File:reg-why.jpg|left|thumb|Warum bei Bookle registieren?]]
[[File:mybookle-favored.jpg|left|thumb|My Bookle - Favoritenliste (mit Empfehlung via Facebook & Twitter]]
[[File:mybookle-query.jpg|left|thumb|My Bookle - Gespeicherte Suchanfragen]]
[[File:mybookle-result.jpg|left|thumb|Resultseite im eineloggten Zustand (mit Herz-, Buchsymbol)]]


<br clear="all" />
<br clear="all" />