sudokular.com - sudoku on a new level

[El Barto]

Ich möchte hier gerne mein neuest Webprojekt vorstellen:

http://www.sudokular.com - sudoku on a new level

Auf sudokular.com dreht sich alles um das Sudoku Rätsel. Wenn du online Sudoku spielen möchtest bist hier genau richtig! Stell dich der Daily Challenge oder löse ein QuickGame in der Kaffeepause.
Sudoku ist der Rätselspaß für Groß und Klein!

• Daily Challenge
  Jeden Tag ein brandneues Rätsel
• QuickGame
  Ein kleines Spiel zwischendurch?
• Sudoku Solver
  Probleme ein bestimmtes Rätsel zu lösen?

Ich denke es wird auch alle hier im Forum interessieren, was technisch hinter diesem Projekt steckt:

Begonnen hat alles damit, dass ich einen Sudoku Solver auf Basis der Dancing Links und des Algorithm X in PHP entwickelt habe. Diesen Solver konnte ich durch logische Suchmuster stark optimieren, sodass er ausreichend schnell für ein solches Projekt war.

Als Grundlage für dieses Projekt und auch für andere und zukünftige Projekte entschloss ich mich ein möglichst schlankes und flexibles kleines PHP-Framework zu entwickeln, welches zum Teil auf dem MVC-Pattern beruht. Dieses Framework macht mir heute die Arbeit wesentlich einfacher.
Als Template-Engine entschloss ich mich hier erstmals XSLT einzusetzen.

Danach begann die eigentliche Entwicklung von sudokular.com.
Sämtliche Datenbankabfragen laufen über die PDO. Das Sudokuspielfeld basiert auf AJAX. Als JavaScript-Libraries sind JQery und die Yahoo! UI im Einsatz. Die User können sich auch mit ihrer OpenID anmelden. Als Library hierfür bot sich die PHP OpenID library an.


Auf Feedback freue ich mich natürlich immer!

[Ben]

Sieht geil aus! Wow. Geiles Layout auf jeden Fall mal. Und das Thema des Projekts finde ich auch sehr interessant.

Cool.

[WarrenFaith]

Definitiv rund das ganze Design. Also rund im Sinne davon, dass alles zusammenpasst.
Da ich selbst gerne 1 bis 2 Sudokus mache, werd ich sicher mal vorbeischauen :)

Ne kleine Frage hab ich aber:
Bei der Sprachauswahl: ist es gewollt das der Hovereffekt nicht nur die auswahl runterschiebt, sondern auch den rest der Seite?
Sieht so aus als wenn der Headerbereich um die Höhe der Sprachauswahl mit nach unten rutscht.
Ansonsten cool!

[El Barto]

ja das ist gewollt.
ist vielleicht geschackssache, aber mir persönliches ist es lieber, wenn die Seite in diesem Fall komplett mit wandert

[Jann Hendrik]

Also... als erstes muss ich mich ja mal beschweren!
Da bastle ich still und heimlich über die letzten Wochen immer wieder ein wenig an einem simplen sudoku-solver, dessen Klasse ich dann hier als Tutorial vorstellen wollte - und dann schmeißst du hier einfach sowas rein...

Genial finde ich die Implemtierung der Spielhilfe! Ist zwar viel geklicke - aber schön umgesetzt!

Gefällt mir!

[WarrenFaith]

Naja solange das Mitrutschen so sauber gelingt wie bei euch ist das auch ok, wenn auch ungewohnt. Aber ansonsten sehr sehr schön.

[El Barto]

Tut mir ja echt leid
Als die Basis meines Solvers ist bereits vor über nem 3/4 Jahr programmiert worden.

Also... als erstes muss ich mich ja mal beschweren!
Da bastle ich still und heimlich über die letzten Wochen immer wieder ein wenig an einem simplen sudoku-solver, dessen Klasse ich dann hier als Tutorial vorstellen wollte - und dann schmeißst du hier einfach sowas rein...

Genial finde ich die Implemtierung der Spielhilfe! Ist zwar viel geklicke - aber schön umgesetzt!

Gefällt mir!

[$traight-$hoota]

also die seite is echt super! weiter so

das design hast du aber nicht extra für das projekt entworfen, oder? kommt mir nämlich irgendwie bekannt vor.

[Jann Hendrik]

hier gibt es bisher wohl nicht so viel feedback...

[El Barto]

tja irgendwie is im phpfriend forum nix los

also das design hab ich schon extra für dieses projekt entworfen.
Und wenn es wirklich ne Seite geben sollte, die meiner ähnlich sieht, dann war das keine Absicht.

[robo47]

Also das Design und die Seite gefällt mir, auch wenn ich definitiv kein Freund von Sudoku bin :)

[N!cKY]

Das Design ist super und der solver auch.
Ich habe mcih auch mit dem Lösen von Sudokus beschäftigt, aber mein solver kann nur eindeutige Sudokus Lösen und bei mehrdeutigen die Kandidaten der unsicheren Feldern anzeigen.

Versteh leider den Algorithm_X nicht so recht, aber werde mich nochmal damit beschäftigen.
Kannst du mir vllt den Code deines solvers schicken? - Werd ihn auch nicht veröffentlichen und sagen, dass es meiner ist.

PS: dein Framework interessiert mich auch, vor allem wie du die XSLT Templates verarbeitest

[El Barto]

Im Moment möchte ich den Solver und das Framework leider noch nicht veröffentlichen, evtl. mach ich das aber in naher Zukunft.

Der Algorithm X ist zugegebenermaßen recht kompliziert. Mir war auch nicht sofort klar, wie das alles funktioniert. Aber nach 2 Wochen hat ichs dann doch raus

Die Templates verarbeite ich mit der XSLT Extension von PHP5 . Und dann hab ich ein root.xsl Template welches das Grundkonstrukt der Seite enthält. Dieses wird einfach immer eingebunden.

[N!cKY]

ok, das versteeh ich natürlich.

nochmal zu den tamplates: wie erstellst du die xml datei/den xml baum die transformiert werden soll? ist es nicht unwirtschaftlich wenn man erst einen xml baum erstellt, der dann durch eine xsl transformation in ein html baum verwandelt wird? speicherst du den xml baum irgendwo, also dass du ihn nur alle X minuten neu generierst (praktisch als cache) ? ich habe einiges mit xsl transformationen gemacht, aber bin noch auf keine schöne implementierung in einer web anwendung gekommen.
diese fragen dürfen mir natürlich auch andere beantworten.. :)

[Basti]

Hi "El Barto".

Ich will hier nichts verreißen. Hab nur gerade angefangen, aufzuschreiben, was mir so auffällt und es ist ein ziemlich langer Beitrag geworden. Alles mein persönlicher Eindruck, wobei die meisten Punkte sicherlich jeder Grafiker bestätigen wird (zumindest die, mit denen ich zusammen arbeite). Ich hoffe, du kannst davon für dich gewinnen:

also das design hab ich schon extra für dieses projekt entworfen.
Und wenn es wirklich ne Seite geben sollte, die meiner ähnlich sieht, dann war das keine Absicht.

Sieht für mich eben nach einer typischen Ajax-Site aus. Die runden Ecken, "Neon-Farbe auf Anthrazit", dieser typische Stern ("get the sudoku feeling!"), runde Schriften, Farbverlauf im Schriftlogo - sieht man zur Zeit eben ziemlich oft - deswegen aber nicht unbedingt schlecht.

Ich finde die Site angesichts der paar Inhalte und Optionen jedoch extrem unübersichtlich und oft ungeschickt aufgebaut und gestaltet. Das liegt sicher zu einem guten Teil an der Google-Werbung im Fließtext, aber auch sonst gibt es in meinen Augen da Einiges, was man verbessern kann.

Wenn ich z.B. auf "spielen" klicke, dann erscheint mir da eine Seite, auf der meine Augen extrem rumspringen und neben mir nichtssagenden Überschriften und Über-Überschriften und zwischen Google-Werbung hab ich nicht das Gefühl, "hier genau richtig" zu sein.

Ich würde versuchen, hier klarere Prioritäten zwischen den Elementen zu setzen und nur einzelne Akzente bzw. Wahlmöglichkeiten hervorzuheben, anstatt alle möglichen Wörter und "Zugänge" mit unterschiedlichen Gestaltungselementen hervorzuheben.

Auf der Startseite würde ich so z.B. in jedem Fall die Optionen in der Liste verlinken und nicht im Fließtext. Oder eben z.B. zumindest dort die Links durch Weglassen der Unterstreichungen in den Hintergrund verschieben.

Die Sätze unter den drei grünen Optionen in der Liste sind optisch nicht wirklich klar diesen Optionen zugeordnet.

Der Text auf den Buttons (hier "Registrieren") ist bei mir ca. ein Pixel zu tief (FF 2.0 auf OS X).

Überhaupt würde ich klare Linien schaffen. Ich bin kein Grafiker, aber die haben für sowas Gestaltungsraster. Also, z.B. den Zweizeiler links oben ("Einloggen oder … registrieren!") in sich ausrichten (untere Zeile bei mir nach links verschoben) und den ganzen Block insgesamt irgendwo stimmig bzw. eben in Beziehung zu den anderen Elementen platzieren (wenns den überhaupt braucht, siehe unten).

Auf der Startseite ist der linke Rand des Fließtextes auch nirgends verankert bzw. in keinem Bezug z.B. zum Hauptmenü.

Die Überschrift über dem Untermenü würde ich auf eine Linie mit den Untermenüpunkten setzen und nicht mit dem Hintergrundkasten. Die (ich meine zentrierten) Sudokus sind auch "bezugslos". Ebenso die Submit-Buttons der Formulare.

Das Logo spitzt das Ganze nochmal zu bzw. auch die Ergebnis- und die Bestenliste mit den Benutzerbildern.

Ich würde weniger unterschiedliche Maße verwenden, z.B. Zeilenabstand im Untermenü an die Abstände im Fließtext anpassen, weniger unterschiedliche Schriftgrade verwenden.

Auch würde ich mal versuchen, die Links nicht zu unterstreichen (was natürlich nur dann angebracht ist, wenn danach dann auch alle grünen Wörter auch anklickbar sind). Ich denke, dass würde hier auch nochmal was Unruhe rausnehmen.

Die vielen Links im Footer, lassen die sich nicht reduzieren? Ich vermute, dass die da unten eh keinem so wirklich als Option auffallen, eher als zusätzliches "Irgendwas", das ablenkt. Die beiden Links zu den Spielen wird man eher über den Reiter "spielen" anklicken und die FAQ, sowie die Anleitung über "hilfe", oder?

Auf der Hilfe-Seite steht zweimal nebeneinander "Hilfe". Einmal als Überschrift über dem Untermenü und einmal über der eigentlichen Seitenüberschrift. Wozu?

Der HowTo-Text - sollte der nicht dort stehen, wo er direkt interessant ist? Ich hab mich z.B. nach dem Unterschied der Modi gefragt, wäre aber nicht auf die Idee gekommen, hierfür extra in den Hilfeseiten nachzusehen - fand dann die Info dort aber sehr hilfreich, hätte mich mit dieser Info anders entschieden.

Warum bei steht im Untermenü von "spielen" die Daily Challenge über dem QuickGame? Ist doch eh nur für registrierte Benutzer und die dürften doch wohl eh beim ersten Besuch des Tages direkt in der Challenge landen, oder? wenn ich als "Neuling" da zuerst draufklicke (und das tue ich, da es ganz oben steht) und zum LogIn aufgerufen werde, dann denke ich mir doch, dass der ganze Rest auch anmeldepflichtig ist.

Warum eigentlich nicht gleich ein QuickGame auf der Startseite? Nur so als Idee…

Wozu Links zum Registrieren (und Einloggen?) im Seitenkopf? Ich Registriere mich ja nicht zum Spaß, sondern weil ich was tun will. Und wenn ich das tun will, dann stolpere ich ja eh über die Aufforderung, mich zu registrieren.

Warum lese ich auf einer deutschsprachigen Seite "wähle deine Sprache: Deutsch". Ich war zuerst auf der englischsprachigen Seite und dachte, eine andere Sprache würde noch nicht angeboten. Was ich meine: Wenn jemand, der nicht deutsch spricht und für den "Deutsch" auch kein Begriff ist auf die Seite kommt, wird er nicht erkennen, dass da oben eine Sprachauswahl ist.

Noch eine Kleinigkeit:

Beim Bleistift auf der Homepage würde ich mal einen Farbverlauf in der Spitze versuchen und den Schatten der Spitze ein wenig "nach unten" ziehen.

Ja, insgesamt würd ich die Konzeption der Site einfach nochmal aufrollen. Welche Benutzergruppen gibt es und was sind deren Bedürfnisse und wie führe ich diese so schnell wie möglich dahin?

Ich denke, die wichtigen Unterscheidungskriterien sind: Sudokuregeln bekannt? Deine Site bekannt? Eingeloggt? Registriert?

Wer eingeloggt ist, der kennt deine Site vermutlich, ebenso wie die Regeln. Er will vermutlich die Daily Challenge, falls noch nicht gespielt. Die Bestenlisten sollten nur einen Klick weit weg sein oder für den Tag direkt angezeigt werden; falls heute schon gespielt wurde, dann wäre ein QuickGame anzubieten.

Wer Sudoku kennt, der will gleich spielen, falls er sich nicht dazu einladen lässt, gleich einen Wettkampf anzugehen. Vielleicht wären das die beiden großen Optionen für die Startseite - wobei ich das QuickGame natürlich als erstes anbieten würde (also z.B. oben bzw. links platzieren).

Wer die Regeln nicht kennt, der will erstmal eine Erklärung. Warum nicht einen dritten Link dazugesellen: "Wie geht Sudoku?" oder so.

Und so weiter.

Das wäre zumindest mein Vorschlag, das Ganze mal durchzugehen. Und eben die Gestaltung bzw. eben vor allem die Linien (eigentlich paradox, denn ein Sudoku wird ja auf einem extrem klaren Raster gespielt).

Basti

[El Barto]

@N!cKY:

Du hast schon recht im Grunde genommen ist es zuerst mal unwirtschaftlich XML zu generien, um dann per XSLT HTML daraus zu machen, allerdings trafen bei diesem Projekt mehrere Faktoren zusammen, welche XSL wieder interessant machten:

Zum einen - wie ich bereits erwähnt habe - basiert sudokular auf einem MVC ähnlichen Framework und da bot sich für mich XSL an, weil ich jetzt z.B. den XML-View nur weiter ableiten musste um daraus einen XSLT-View zu machen. Damit konnte ich praktisch RSS-Feeds, AJAX-Formular-Validierung,... genau gleich behandeln, als wenn ich diese in HTML-Rendern würde. Zum zweiten ist es sehr simple und trotzdem flexibel in der XSL-Datei die Übersetzungstexte aus einer weiteren statischen XML-Datei zu laden. Und ich habe die Erfahrung gemacht, dass dieser ganze Prozess immer noch schneller ist als Smarty.

P.S.: was das caching anbelangt hast du vollkommen recht, auch das ist hier extrem simple zu implementieren und ich kann sogar in "zwei Schritten" cachen also einmal das XML und dann noch die Transformation. Ob das einen Vorteil ergibt ist situationsabhängig.


@Basti:

Also zuerstmal danke, dass du dir so viel Gedanken über den Aufbau meiner Seite gemacht hast. Es sind einige Punkte bei denen ich dir zustimme, gerade was Klarheit der Navigation anbelangt. Das liegt aber vor allem daran, dass sich die Features nach der Planung immer wieder leicht verändert haben. Evtl. gibts da auch zu gegebener Zeit ein update.
ABER du reitest auch zum Teil auf Kleinigkeiten rum!
Die "Bezugslosigkeit" die du bei einigen Elementen bemängelst kann ich zum großen Teil nicht nachvollziehen. Und es ist nur guter Stil, wenn man Links unterstreicht!

[Basti]

Es sind einige Punkte bei denen ich dir zustimme, gerade was Klarheit der Navigation anbelangt. Das liegt aber vor allem daran, dass sich die Features nach der Planung immer wieder leicht verändert haben. Evtl. gibts da auch zu gegebener Zeit ein update.

Ja, klar. Für mich ist es halt erstmal ein Angebot, dessen geschichte ich nicht kenne.

ABER du reitest auch zum Teil auf Kleinigkeiten rum!
Die "Bezugslosigkeit" die du bei einigen Elementen bemängelst kann ich zum großen Teil nicht nachvollziehen.

Ich will hier auf nix rumreiten. Der Punkt mit der Ausrichtung der Elemente und der - in meinen Augen - unklaren Setzung von Prioritäten bzw. eben (visuellen) Führung des Benutzers ist mir eben an mehreren Stellen aufgefallen.

Und, ich glaube, dass auch solche "Kleinigkeiten" mitunter große Wirkung haben können. Vergleiche mal den Block links oben (Anmeldung und Registrierung) auf der deutschen und der englischen Version. Auf der englischsprachigen hast du sofort die Linie zur Sprachauswahl rüber und nach unten zum Logo oder zur Überschrift des Untermenüs. Auf der deutschsprachigen ist das einfach irgendwie unförmig da in den Zwischenraum gesetzt. Das meine ich mit "Bezugslosigkeit". Natürlich existiert ein Bezug durch Farbe, Schrift und Schriftgröße - aber mehr halt nicht und, klar, bekommt man damit Bewegung auf eine Seite … aber hier scheint das nicht bewusst eingesetzt, sondern halt eher unreflektiert.

Und es ist nur guter Stil, wenn man Links unterstreicht!

Darüber mag man streiten (wobei die Diskussion eigentlich längst nicht mehr atuell ist). Das ist aber letzlich auch nicht der Punkt. Was ich meine ist, dass die hervorgehobenen ("strong") Listenpunkte auf der Startseite eine Auswahl suggerieren, die jedoch keine ist - zumindst eben keine anklickbare. Damit man die Links "dann aber doch noch findet", sind sie eben im Fließtext unterstrichen. Ich denke, es wäre geschickter, die Listenpunkte zu verlinken und den Fließtext zu "beruhigen" und da bietet es sich eben an, die Unterstreichungen zu entfernen, falls sich das konsistent umsetzen lässt oder eben, die Links ganz raus zu nehmen (wobei das dann womöglich wieder etwas langweilig aussieht).

Ein kleiner Abstand (vielleicht 8, 10 oder auch 15 Pixel) zwischen den Listenpunkten gäbe denen dann noch mehr Gewicht und Klarheit. Die Zeile darunter könntest du - in meinen Augen - getrost löschen. Leg mal einen Counter unter den Butten. Ich wette, die Anzahl der Klicks darauf sind irrelevant gering.

Bevor ich wieder das Reiten anfangen …

Liebe Grüße,
Basti

[Luxores]

Hi,
also das ist einfach Klasse. Vorallem der Quick game ist klasse :)

Nur der Solver geht nicht.


Wenn du mehr Infos dazu willst. Schreib mich per PM an. Sonst wird es hier unübersichtlich.

[squig]

Hola,

bin eben mal auf "sudokular" gegangen und dachte ich mache ein "Quick Game".
Javascript ist bei mir auf neuen Seiten per default von NoScript verboten

Keine Meldung, kein Nichts, dass ich JS benötige. Kam bis zum Spielfeld und habe dort auf "Spiel starten" gedrückt. Belohnt wurde ich mit hiermit:

{"game":{"help":"false","values":{"value0":{"value":"7","position":0},"value2":{"value":"9","position":2},"value3":{"value":"5","position":3},"value5":{"value":"8","position":5},"value9":{"value":"2","position":9},"value13":{"value":"7","position":13},"value18":{"value":"1","position":18},"value19":{"value":"8","position":19},"value20":{"value":"6","position":20},"value21":{"value":"2","position":21},"value25":{"value":"9","position":25},"value28":{"value":"2","position":28},"value31":{"value":"6","position":31},"value32":{"value":"4","position":32},"value36":{"value":"8","position":36},"value44":{"value":"6","position":44},"value48":{"value":"8","position":48},"value49":{"value":"9","position":49},"value52":{"value":"1","position":52},"value55":{"value":"6","position":55},"value59":{"value":"1","position":59},"value60":{"value":"3","position":60},"value61":{"value":"5","position":61},"value62":{"value":"8","position":62},"value67":{"value":"8","position":67},"value71":{"value":"4","position":71},"value75":{"value":"9","position":75},"value77":{"value":"6","position":77},"value78":{"value":"1","position":78},"value80":{"value":"2","position":80}},"exportImg":"http:\/\/www.sudokular.com\/export\/image\/709508000200070000186200090020064000800000006000890010060001358000080004000906102\/","exportPdf":"http:\/\/www.sudokular.com\/export\/pdf\/709508000200070000186200090020064000800000006000890010060001358000080004000906102\/"},"__languages__":{"de":{"name":"Deutsch","url":"http:\/\/www.sudokular.com\/de\/play\/quickgame\/start\/"},"en":{"name":"English","url":"http:\/\/www.sudokular.com\/en\/play\/quickgame\/start\/"},"ru":{"name":"\u0420\u0443\u0441\u0441\u043a\u0438\u0439","url":"http:\/\/www.sudokular.com\/ru\/play\/quickgame\/start\/"},"pl":{"name":"Polski","url":"http:\/\/www.sudokular.com\/pl\/play\/quickgame\/start\/"}}}

Denke es wäre ratsam, den Benutzer auf die unbedingte Verwendung von JS hinzuweisen.


Bis dääähne.

[The_S]

Kannst du mir vllt den Code deines solvers schicken?

Ich hab auch mal nen Sudoku-Solver/Generator geschrieben. Den Algorithmus hab ich mir damals selbst erarbeitet (Backtracing-Methode), könnte mir aber auch gut vorstellen, dass es sich dabei um einen gebräuchlichen handelt und ich das Rad einfach nochmal neu erfunden habe .

Wenn du Java kannst bzw. Java einigermaßen verstehst, kann ich dir den Code gerne zukommen lassen/ihn hier veröffentlichen.

lg