D O K U M E N T A T I O N Z U M W E B D E S I G N P R O J EKT G E T A J O K E

DOKUMENTATION ZUM WEBDESIGN PROJEKT „GET A JOKE“ DHBW-Stuttgart Kurs: WWIB2010 Projektverantwortlicher: Joachim Wetzel INHALTSVERZEICHNIS 1. Einlei...
Author: Adam Gehrig
3 downloads 1 Views 2MB Size
DOKUMENTATION ZUM WEBDESIGN PROJEKT „GET A JOKE“

DHBW-Stuttgart Kurs: WWIB2010 Projektverantwortlicher: Joachim Wetzel INHALTSVERZEICHNIS

1. Einleitung..........................................................................................................................................................................3 2. Grundidee .........................................................................................................................................................................4 3. Graphisches Grundkonzept .......................................................................................................................................5 3.1 Technik.......................................................................................................................................................................5 3.1.1 HTML ...................................................................................................................................................................5 3.1.2 Javascript ..........................................................................................................................................................6 3.1.3 CSS .......................................................................................................................................................................7 3.1.4 PHP ......................................................................................................................................................................7 3.1.5 MYSQLi...............................................................................................................................................................8 3.1.6 Facebook-SDK .................................................................................................................................................9 3.2 Design ...................................................................................................................................................................... 10 3.3 Wahrnehmung ..................................................................................................................................................... 14 4. Ergonomie ..................................................................................................................................................................... 15 5. Die Seite .......................................................................................................................................................................... 16 6. Evolution ........................................................................................................................................................................ 23

2

1. EINLEITUNG

Zahllose Webseiten sprießen aus dem Boden. Alles Mögliche wird im Internet bereits publiziert und verbreitet. Von Wissensseiten wie Wikipedia über Nachrichtenportale, bspw. Stern, als auch HTML Konzepte mit humoristischem Hintergrund, hier sei Webfail als eine der größten deutschsprachigen Seiten genannt – alles findet im Internet seinen Platz. Jedoch gibt es nur sehr wenige Seiten mit anspruchsvollem Layout, die sich komplett mit dem Witz als solchen in seiner reinsten Form beschäftigen. Hier ist vor allem die Benutzerintegration oft stark vernachlässigt. Als einer der Vorreiter von „getajoke“ kann der Englische Psychologe Richard Wiseman betrachtet werden. Dieser baute im September 2001 eine ähnliche Webseite auf internationaler Ebene, um den besten Witz ausfindig zu machen. Nach insg. 1,5 millionen Bewertungen kam es zu folgendem Ergebnis: „Zwei Jäger sind im Wald unterwegs, als einer von ihnen zusammenbricht. Er scheint nicht mehr zu atmen, und seine Augen sind glasig. Der andere Typ zückt sein Telefon, ruft den Notdienst an und stößt hervor: ‚Mein Freund ist tot! Was kann ich nur machen?‘ - Darauf der Telefonist: ‚Beruhigen Sie sich. Ich kann Ihnen helfen. Zuerst sollten wir sicherstellen, dass er tot ist.‘ Kurze Pause, dann ein Schuss. Zurück am Telefon sagt er: ‚OK, was jetzt?‘“ 1 Weiter führt Wikipedia2 auf, dass für den Sieg des Witzes ausschlaggebend war, dass dieser in allen Sprachen verstanden werden konnte und die Pointe immer die Selbe war. Dies ist aufgrund der Ausrichtung auf nur einen Sprachraum einer der großen Vorteile von „getajoke.de“. Mit der Fokussierung auf die Deutsche Sprache wird es mehr Varianz der eingesendeten Witze geben. Außerdem wird dieses Projekt niemals beendet, es ist im Endeffekt wie bei einer humoristischen englischsprachigen Seite namens 9gag3. Dort werden Bilder (und weit weniger häufig Videos) bewertet und dann die „Heißen“, also die besonders gut bewerteten, einer gewissen vergangenen Periode aufgelistet. Ähnliches versucht nun auch dieses Projekt – nur für Witze, statt für Bilder. http://de.wikipedia.org/wiki/Witz#Witze_in_verschiedenen_Kulturen http://de.wikipedia.org Größte Enzyklopädie der Welt, die ihren Inhalt nur von Benutzern bekommt 3 http://9gag.com 1 2

3

2. GRUNDIDEE

Die bereits in der Einleitung teilweise angesprochene Idee hinter „getajoke“ wird ergänzt durch viele interessante Features. Diese im Neudeutschen Features genannten Funktionen sollen den Besuchern maximales Entertainment bieten. Hier sind die wichtigsten in absteigender Reihenfolge ihrer Wichtigkeit mit einer kurzen Erläuterung genannt: 

Audioupload (Man erzählt den Witz den Benutzern, statt dass diese ihn lesen. Mit einigem programmiertechnischen Aufwand soll auch noch eine direkte Aufnahmefunktion für das Mikrofon eingebaut werden, die ähnlich funktioniert wie auf YouTube4 für die Webcam)



Hotpage (Die bestbewerteten Witze der letzten Woche werden, in nach Bewertung absteigender Reihenfolge, auf der Hauptseite angezeigt)



Witz des Tages (Der bestbewertete Witz des letzten Tages wird in einem festen Bereich rechts angezeigt)



Awards (Wer lustige Witze hochlädt, wird mit Trophäen belohnt – z.B. Witz des Tages-Trophäe – diese werden dann im Benutzeraccount angezeigt (inkl. der erzählten Witze))



Usercloak (Die Seite nutzt zwar das Facebook-SDK5 zum Login für den Benutzer, allerdings soll man sich trotzdem anonym auf der Seite bewegen können. Hierfür wird es möglich sein einen Avatar 6 einzustellen, der alle Facebook-Daten „überschreibt“, sprich nur diese Avatardaten nach außen hin darstellt und keine Verknüpfungen zu FB (Kurzform für Facebook) herstellt – falls diese Verschleierung ausdrücklich, mit einem Häkchen bei der Registrierung bzw. den Benutzereinstellungen, gewünscht wird.)

http://youtube.com http://developers.facebook.com 6 Bezeichnet ein Alterego für das Internet, um anonym zu bleiben 4 5

4

3. GRAPHISCHES GRUNDKONZEPT

3.1 TECHNIK

3.1.1 HTML

Das Designkonzept der Seite beruht auf einem oft verwendeten und daher sehr leicht verständlichen Standarddesign (leichte Handhabung für den Layouter, als auch für den Programmierer und besonders für den Endanwender). Im Prinzip wird nur eine Table eröffnet, die zentriert wird. Äußere Bereiche werden wie fast alle anderen einfarbigen Bereiche per Hintergrundfarbe dem Layout angepasst. Das Logo und alle weiteren Bilder sind per Hintergrundgrafik in ihre eigene Tabelle integriert. Lediglich der wichtigste Bereich der Seite, die Witzeansicht in der Mitte, wird per Div-Layern realisiert, da dynamisch gesehen, Div-Layer einen immensen Vorteil gegenüber dem veralteten Table-Element von HTML7 haben. Über kurz oder lang sollte mit einigem Aufwand das Design der Webseite generell in ein Div-Layout immigriert werden. Sobald sich der Autor in ausreichendem Maß mit der Materie beschäftigt und sich erfolgreich eingelesen hat, wird dies auch passieren. Für eine erste Präsentation der Seite, um zu veranschaulichen, welche Funktionen diese hat und wie das Layout im Endeffekt aussehen soll, ist eine per Table gebaute Webseite aber ausreichend. Als Software zur Erstellung des Designs wurde Photoshop eingesetzt, in welchem das fertige Bild einfach nur „gesliced“8 wurde, um es dann als Web exportieren zu können. Leider ist da auch ein Hauptproblem der technischen Seite. Photoshop erstellt beim Export viel zu viele Tabellen bzw. auf Wunsch auch Layer, die aber eine Nachvollziehbarkeit des Sourcecodes9 fast unmöglich machen. Hierzu ein Auszug aus dem Buch Dreamweaver 8: „… für die Slicemap gleich eine HTMLDatei zu erstellen, mit allen Rollover-Effekten usw. klingt gut, ist es aber nicht. Das einzig

http://de.html.net Hypertext Markup Language Aufgeteilt / geschnitten und danach als Einzelbilder exportiert 9 Quellcode – der Text, der das Layout und alle Funktionen der Webseite oder eines Programmes umfasst 7 8

5

wirklich Brauchbare sind die erstellten Grafiken. Alles andere können Sie getrost in den Mülleimer ziehen oder gleich von Anfang an unterbinden.“10 Dies ist ein weiterer Grund für die baldige Immigration in ein selbsterstelltes DivLayout! Für die Bearbeitung des Quelltextes wurden sowohl PSPad11 als auch Dreamweaver12 verwendet. Beides sind gängige Tools für Webdesigner und ihre Funktion für die Erstellung eines Webprojektes sollte jedem, der sich ein bisschen mit Webdesign auskennt, klar sein. Zu erwähnen sei nur, dass Dreamweaver im Gegensatz zu PSPad eine Designansicht anbietet, also einem die Ergebnisse der HTML-Änderungen sofort im Programm anzeigt, ohne dass man diese erst extra in einem Browser testen muss. Vorteile von PSPad auf der anderen Seite sind die freie Verfügbarkeit (es ist Freeware) sowie die entschlackte Benutzeroberfläche, die das Arbeiten insgesamt etwas beschleunigt. Nachtrag vom 28.09.2012: Mittlerweile wurde die Seite komplett in ein Div-Layout migriert. Dabei wurde ein 846 Pixel breiter Hauptcontainer erstellt, in den verschiedenste Einzellayer für die Navigation oben rechts und in der Mitte unter dem Banner generiert werden. Die Übersichtlichkeit im Sourcecode, die sich daraus ergibt, ist nicht zu vergleichen mit dem von Photoshop gelieferten. Die Anpassungsmöglichkeiten sind außerdem enorm hoch, da sich nicht wie bei Tabellen alles verschiebt, sondern man relative und absolute Positionen definieren kann und mit float zudem die automatische Ausrichtung untereinander bestimmen darf. 3.1.2 JAVASCRIPT Per Javascript

13

werden

die

Button-Hovereffekte

14

der Navigation

und des

Loginbereiches gesteuert. Außerdem läuft das Facebook-SDK zum Teil über Javascript und Java15 und ist an zahlreichen Stellen auf der Seite verbaut – z.B. auf der „tellajoke“-

Dreamweaver 8 von Richard Beer, Susann Gailus (Kapitel 2.3.1 Photoshop Layout) http://www.pspad.com/de 12 www.adobe.com/de/products/dreamweaver.html 13 http://openbook.galileocomputing.de/javascript/ 14 beim herüberfahren mit der Maus ändert sich der Button 15 http://www.java.com/de 10 11

6

Seite bei der automatischen Einbindung des auf Facebook geführten Namens, der sich aber aus Gründen

des Datenschutzes sofort nahezu beliebig

ändern lässt

(logischerweise wird aus Gründen der Sicherheit HTML Code als Text eingelesen und nicht verarbeitet; ebenso werden rassistische oder beleidigende Namen von den eingesetzten Administratoren blockiert). 3.1.3 CSS Wie auf jeder einigermaßen professionellen Seite im Internet, wird das Layout, z.B. der Schriftarten und Hyperlinks, wie auch der Tabellen und Div-Layer in einer ausgegliederten CSS16-Datei definiert. Dies garantiert höchstmögliche Einheit beim Layout und erleichtert es enorm neue Seiten bzw. Ansichten zu erstellen bzw. anzupassen. Siehe für weitere Informationen bezüglich CSS auch „css-cafe“17. 3.1.4 PHP Das wichtigste Element dieses Projektes ist mit Sicherheit der aufwendige PHP Code, der hinter den einzelnen Abfragen und Imports steht. Hier wird auf jede Eventualität eingegangen, z.B. werden Texteingaben per trim18-Befehl von überflüssigen Leerzeichen und HTML-Elementen befreit. Danach werden diese mit dem Befehl nl2br19 ausgegeben, damit die vom Benutzer eingegebenen Absätze richtig interpretiert werden.

http://de.wikipedia.org/wiki/Cascading_Style_Sheets Cascading Style Sheets http://www.css-cafe.de/gute_gruende_fuer_css.php 18 http://php.net/manual/de/function.trim.php 19 http://de3.php.net/manual/de/function.nl2br.php 16 17

7

Wie man in dem Bild erkennen kann, wurde beim Einlesen der PHP20 Code ebenso wie der HTML Code ignoriert – dies sieht man an den eingelesenen Anführungszeichen, denn ohne diese Schutzmaßnahmen wäre der Eingabeprozess mit einer MYSQL-Exception21 gescheitert. Ein besonderes Highlight im Coding ist die Ratingbar, die jeden Witz von -2 bis +7 bewerten lässt (von links nach rechts). Die Werte wurden nach einer Überlegung ausgewählt, bei der der Benutzer im Vordergrund steht. Gängige Webseiten haben lediglich zwei Bewertungsmöglichkeiten in den meisten Fällen, positiv oder negativ, gefällt oder gefällt nicht. „getajoke“ geht einen Schritt weiter und „shiftet“, d. h. transferiert die Bewertungszone in einen genaueren Bereich, stellt aber auch sicher, dass generell positive Bewertungen negative überwiegen. Dies ist insbesondere bei Witzen enorm wichtig, da es sehr unterschiedliche Arten von Humor gibt, die vielleicht nicht jeder versteht. Dabei sollte es nicht passieren, dass die meisten Witze eher negative Bewertungen haben und so den Benutzer frustrieren (ist sehr stark bei „9gag“ der Fall). Dass es keine Nullerbewertung gibt, ist hoffentlich aus Gründen der Sinnlosigkeit einer solchen Abgabe durch den Benutzer selbsterklärend (jetzt habe ich es ja doch erklärt). Der größere Schritt von fünf auf sieben soll die Außerordentlichkeit des Seitenmaskottchens, der sich ja auch im Logo befindet, namentlich „Cereal Guy“22, herausstellen. Dieser wird häufig in Memes eingesetzt, um einen besonders überraschenden Moment zu veranschaulichen. Er spuckt sozusagen sein Müsli aus, weil er etwas nicht fassen kann. Diese Bewertung ist erst ab einem Durchschnittsrating von sechs erreicht. Natürlich kann jeder Benutzer nur einmal pro Witz bewerten, diese Bewertung aber jederzeit ändern. 3.1.5 MYSQLI Als Datenbanksprache wird MYSQLi 23 verwendet. Dies offeriert das gängigste relationale Datenbanksystem im Zusammenhang mit Webdesign und PHP. Sie ist schnell, relativ einfach und sehr gut dokumentiert.

http://php.net Fehlermeldung der Datanbank beim Insert der Daten 22 http://knowyourmeme.com/memes/cereal-guy 23 http://de.wikipedia.org/wiki/MySQLi Weiterentwicklung der Select Query Language (objektorientiert) 20 21

8

3.1.6 FACEBOOK-SDK Zur Benutzerverwaltung und Login wird die mittlerweile recht beliebte Facebook-SDK24 verwendet. Mit ca. 900 Millionen Nutzern weltweit ist es die größte User-Database der Welt. Aufgrund der vielen viralen Möglichkeiten, die sich aus der Verwendung ergeben, kann und sollte man über den schwierigen Einstieg und häufige Änderungen bzw. Inkompatibilitäten hinwegsehen. Außerdem verzichtet man so auf jedwede lästige Bestätigungsmail-Registrierung, die viele Nutzer heutzutage einfach nicht mehr wahrnehmen und somit der Seite als Anwender verloren gingen.

24

http://developers.facebook.com Source-Development-Kit

9

3.2 DESIGN Das Farblayout wurde nach reiflicher Überlegung nach zwei Hauptkriterien ausgewählt. Es sollte zum Einen schlicht sein, nicht wie bei zahlreichen anderen Websites mit lustigem Inhalt, total überladen und bunt. Zum Anderen wurde eine dunkle Hintergrundfarbe präferiert, da diese enorme Mengen Strom spart 25 (bei hoher Frequentierung der Seite). Außerdem ist nach Ansicht der meisten Designer ein Designobjekt nicht mit Farben zu überfrachten26. So ist es generell nicht sinnvoll mehr als drei Farben (dazu zählen nicht Schwarz und Weiss!) zu verwenden. Daher beschränkt sich das Layout auch, bis auf zwei Ausnahmen, auf Mintgrün (#3b8586) für die Highlights, also zum Hervorheben besonderer Elemente und Dunkelgrün (#465a5a) als Hintergrundfarbe. Diese Ausnahmen sind der kleine Footer27 unten rechts (beim darüberfahren mit der Maus), sowie das Adminpanel in der Hauptnavigation, welches eine orangene Schriftfarbe besitzt, da es besondere Aufmerksamkeit der Seitenverantwortlichen auf sich ziehen soll, sprich ein direkter Blickfang darstellen muss. Dieser Button wird im endgültigen Design nur noch für Administratoren der Seite sichtbar und verfügbar sein (wichtig, da viele Webseiten nur die Sichtbarkeit abfragen und dann das „Kontrollzentrum“ trotzdem über die Adresszeile zu erreichen sind). Wie bereits notwendigerweise im Kapitel „Technik“ erwähnt, basiert die Seite auf einem schlichten, zentrierten Layout. Die Hauptnavigation befindet sich am oberen rechten Bildrand der Haupttabelle, sprich immer noch mittig, sofern der Browser die Seite überragt. Diese Navigation ist durch einen vertikalen Trennstrich (zum Hauptdesign) mit dem Logo verbunden und zusammen bilden diese Elemente den Kopf der Seite.

Vgl. http://www.rp-online.de/digitales/internet/mit-blackle-strom-sparen-1.2188015 Vgl. http://www.poertnerwebdesign.de/zehn_regeln.html 27 Fußnote – wird in der Regel eingesetzt um Copyright und / oder einen Link des Webverantwortlichen unterzubringen 25 26

10

Mit der Unternavigation, welche sich unter dem Trennstrich befindet, schließt sich die Navigation ab. Diese Subnavigation, wie der Webdesigner so schön sagt, steuert die verschiedenen Anzeigemöglichkeiten der Witze. Ein Hotbutton existiert genauso wie der für die Rubrik Witz des Tages („Jokes of the Days“) etc. Im Hauptteil der Seite, unter der Subnavigation werden der oder die Witze angezeigt (je nach Ansicht). Diese sind auf ovalen Div-Layern mit Hintergrundbild, das einen leichten Farbverlauf und Schattierung definieren, zur Abhebung vom Hintergrund, gebettet.

11

Ein weiterer schmaler Trennstrich kapselt nun die Seitenleiste vom Hauptteil ab. In dieser Seitenleiste wird bspw. die Playlist aller Audiowitze, sowie die Facebook-Gruppe und Benutzer-Verifizierung integriert und wichtige Mitteilungen dargestellt.

Als Schriftart der Buttons kommt hauptsächlich „Myriad Pro“ zum Einsatz. Hier möchte ich meine ehemaligen Kollegen vom Projekt „Teller statt Tonne“ zitieren, die in ihrer Seminararbeit bereits treffend folgendes dazu bemerkten: „Ein weiteres Design-Merkmal stellt die verwendete Schrift dar. Hier wurde bewusst eine Schriftart der Myriad-Familie, „Myriad Pro“, ausgewählt. Sie wird unter anderem von der Firma „Apple Inc.“ in verschiedenen Bereichen wie Marketing und Verpackung

12

benützt. Dadurch wird sie mit Merkmalen wie fortschrittlich, modern und innovativem Design in Verbindung gebracht. Auch dies soll den oben genannten Charakter der Webseite verstärken und die positiven Aspekte auf die Aktion übertragen. Zudem ist sie schnörkellos und gut lesbar und resultiert durch die stimmige, kontrastreiche Farbgebung, in einer hohen Übersichtlichkeit.“² Als Standardschrift für sämtliche anderen Bereiche wurde per CSS die Schriftart „Trebuchet MS“ definiert. Beide haben eine Klarheit und sind frei von Serifen, um die elegante, aber exakte Strukturfestigkeit zu stärken.

13

3.3 WAHRNEHMUNG Bei der Wahrnehmung zielte der Designer von „getajoke“ auf eine besonders übersichtliche, schlichte und intuitive Designstruktur ab. Die wenigen Bilder und vielen offenen Flächen geben dem Benutzer Zeit die wichtigen Elemente zu realisieren und zu verarbeiten. Es ist mit besonderer Sorgfalt darauf geachtet worden, Beispiele, wie das Folgende nicht zu wiederholen (dies ist nur eins von vielen und soll hier lediglich exemplarisch dienen):

Es soll dem Benutzer mit dem Design nicht der Inhalt der Seite vermittelt werden wie bei vielen anderen Humorseiten im Netz. Vielmehr ist eine geradlinige und übersichtliche Struktur gewählt worden, um den Benutzern eine Umgebung zur Verfügung zu stellen, bei der sie und ihr Witz im Vordergrund stehen und nicht irgendwelche bunten Effekte wie bei einer Webseite zu jedem x-beliebigen Kindergeburtstag. Die Highlightfunktion des orangenen Adminbuttons wird hoffentlich von den entsprechenden Personen gewürdigt. Ein dynamisches Ein- und Ausblenden je nach Status des eingeloggten Benutzers ist dabei selbstverständlich. Benutzer, die auf einen Bereich keinen Zugriff haben, sollen von diesem auch nicht unnötig abgelenkt werden! 14

4. ERGONOMIE

Dadurch, dass die entsprechenden Buttons in der Navigation sich einfärben beim „Rollover“ (dem Darüberfahren mit dem Mauszeiger) bzw. beim „selected-Event“ (wenn die Seite, die hinter Navigation liegt, gerade angezeigt wird) ist zu jedem Zeitpunkt gewährleistet, dass man weiß wo man sich befindet. Die vielen designtechnischen Kniffs und die klare Strukturierung und das insgesamt übersichtliche Layout sollten der hohen Benutzerfreundlichkeit weiter dienen. Zudem sind die einfachen Editierfunktionen für Benutzer gut erklärt und einfach zu verwenden. Fehler (bei der Eingabe) werden abgefangen und mit entsprechender, verständlicher Erklärung in Hochdeutsch, ausgegeben. Datenschutz wird großgeschrieben. Das Projekt „getajoke“ braucht keine E-MailAdressen oder sonstige Informationen über den Benutzer. Lediglich die Facebook-ID wird in einer nicht-sichtbaren Datenbank passwortverschlüsselt hinterlegt. Dies ist leider nötig damit man beim Login den jeweiligen Benutzer erkennen kann. Auf Wunsch werden diese Daten niemals an einen anderen Anwender weitergegeben. Man bewegt sich quasi völlig anonym, ist aber im Missbrauchsfalle trotzdem „greifbar“ – für beide Seiten ein Vorteil. Das ausführliche Hilfevideo, das auch die Präsentation darstellt, sollte jedem halbwegs Internet affinen Witzeleser bzw. Erzähler sofort verständlich machen können wie „getajoke“ funktioniert. Mehr Benutzerfreundlichkeit geht fast nicht!

15

5. DIE SEITE

Im Folgenden sind die einzelnen Views und Seiten in Gänze erklärt. Den Start macht die Witze-Eingabe. Weniger Benutzereingabe als es hier der Fall ist, wäre fast schon eine Übertreibung für Datenschützer. Der Name muss eingegeben werden und wird sogar vorbelegt, wenn man eingeloggt ist. Außerdem natürlich noch der Witz – das war’s auch schon, auch für Anfänger extrem einfach. Der User ist in diesem Fall angemeldet mit einem Avatar namens „Joey“.

16

Der Witz wird dann über das Seitenmaskottchen abgesendet. Der Titel, der erscheint, wenn man über das Maskottchen fährt, ist in diesem Fall „Submit“28, um die Funktion des Buttons auch verständlich zu machen. Das nächste Bild zeigt das Gesamtlayout inkl. Audioplayer bei einem einzelnen Witz (der oberste Kasten) und der Playlist aller Witze auf der rechten Seite.

Die Seite ist insgesamt gerade einmal 846 Pixel breit. Lediglich die Playlist ragt ein wenig nach rechts über den Div-Container hinaus. Dies stört aber aufgrund des sonst sehr aufgeräumten Anblicks nicht wirklich, ermöglicht aber zumindest knapp 35 Zeichen eines jeden Witzes auszugeben.

28

Generell eine Übertragung von Formularen mit Daten an eine Webseite

17

Die Navbar oben rechts ist wie bereits in früheren Kapiteln erwähnt stark dynamisch. Sowohl beim Rollover als auch während man auf der jeweiligen Seite surft, wird der Button Hellgrün erleuchtet. Ein Glow-Effekt der Schrift trägt sein übriges dazu bei den Knopf hervorzuheben.

Der Benutzer ist in diesem Fall eingeloggt und so wird auch der Link zur Adminseite dargestellt. Die Buttons fügen sich perfekt in die Seite ein, da die Farbe beim Rollover und während man auf der jeweiligen Seite ist, der Trennlinie im Hintergrund entspricht, auf der die Knöpfe liegen. Unter der Top-Navigation befindet sich die Subnavigation für das Springen zu bestimmten Ansichten der Witze. Diese können nämlich nicht nur nach der Witzenummer (ID) sortiert werden, nach der sie hinzugefügt wurden, sondern auch nach Rating.

Die in der Navigation genannte „contact“-Seite beinhaltet ebenso das Impressum, wie eine generelle Beschreibung der Seite. Diese dient hauptsächlich Suchmaschinen, die mittlerweile kaum noch die Meta-Tags29 beachten, sondern den angezeigten Text einer Webseite auswerten.

Im HTML-Code „versteckte“ Zeilen, die z.B. Facebook oder seltener Suchmaschinen dienen Informationen über die Webseite zu erhalten 29

18

Eine der Seiten der Subnavigation ist die „JOKE OF THE DAY“-Seite. Diese liefert die bestbewerteten Witze für jeden Tag, an dem ein Witz „erzählt“ wurde.

Die Überschrift beschreibt dabei nachvollziehbar den jeweiligen Tag des Witzes.

19

Ansonsten ist die Anzeige exakt so, wie die Anwender es von den anderen Seiten gewohnt sind (ausgenommen die Betrachtung eines einzelnen Witzes). Zu dieser Einzelansicht sei zu sagen, dass die Kästen auf den anderen Seiten im Endeffekt nur dazu dienen die Witze voneinander abzutrennen. Das ist bei der einzelnen Betrachtung eines Witzes natürlich nicht nötig, außerdem befindet sich unter dem Witz eine Kommentarfunktion von Facebook. Diese virale Integration dient vor allem der Einfachheit. Zwar hätte man eine Kommentarfunktion ohne Probleme selbst programmieren können, jedoch hat die Verwendung der Facebook-eigenen den Vorteil, dass sich die Kommentierer nicht einloggen müssen. Die anderen Designaspekte sind exakt wie bei allen anderen „Witze-Views“.

20

Die Avataransicht sei als letzte Seite zu erwähnen. Sie ist zwar noch nicht fertig gelayoutet, jedoch kann man erahnen, worauf es hinausläuft. Geplant sind u. A. noch  

Favoriten anlegen zu können,

Alle usereigenen Witze ansehen zu können, 

Witzeerzähler abonnieren zu können.

21

Eine Editierfunktion für Benutzerprofile wird ebenso hinzugefügt wie es bei den Witzen der Fall sein muss. Dies sollte dann natürlich nur für Profil- bzw. Witzeinhaber und Admins möglich sein. Weitere Features sind natürlich geplant, unterliegen aber der strengsten Geheimhaltung. Besuchen Sie einfach regelmäßig „getajoke.de“, um nichts zu verpassen.

22

6. EVOLUTION

Die Seite entsteht, erste Navigationsbuttons werden erstellt.

Nun kann man bereits eine Struktur erkennen. Top-, Main- und Rightinhalte werden eingebunden.

23

Die Ratingbar bekommt ihr Gesicht und auch die Navigation ist bereits fast vollständig integriert.

Meilenstein: Der Profilkasten wurde eingebaut.

24

So sieht wohl die Arbeit eines Webdesigners aus. Mit dem Grid, also den Rechtecken ähnlich eines Matheheftes, kann man die Abstände genauer justieren.

Die ersten Witze sind im Browser zu sehen. Ein kleiner Schritt für die Menschheit, aber ein großer auf dem Weg zur Fertigstellung von „getajoke“.

25

Suggest Documents