Sinnvolles Markup für Weiterblättern-Menu

[Malcolm Beck´s]

hi,

ich habe mir ein kleines Script geschrieben, dass ein Weiterblättern-Menu generiert, nur bin ich noch recht unentschlossen, was das Markup angeht.

Ich habe das ganze mal mit 2 Beispielen Hochgeladen.
Es geht nur um das Markup und Benutzerfreundlichkeit.

http://dj-tut.de/z_test/a-ng/

Welches der Beispiele würdet ihr bevorzugen, oder gar anders machen?

mfg

[hotti]

h1,

Es geht nur um das Markup und Benutzerfreundlichkeit.
http://dj-tut.de/z_test/a-ng/

Sehr schön, gefällt mir. Eine Liste ist ok, denke ich.

Welches der Beispiele würdet ihr bevorzugen, oder gar anders machen?

Entweder die Liste oder ein Formular. Beides zusammen wirkt etwas überladen.

Hotti

[Malcolm Beck´s]

hi,

Sehr schön, gefällt mir. Eine Liste ist ok, denke ich.

Also Beispiel 2?

Entweder die Liste oder ein Formular. Beides zusammen wirkt etwas überladen.

Das Formular ist ja dafür gedacht, dass man nicht ewig klicken muss, wenn man zu einer Bestimmten Seite will, die aber nicht in der Aktuellen Liste steht.
Die Liste wird ja nur bis Max. 4 Links weiterblättern oder zurück generiert, der Rest wird abgeschnitten. Mit dem Formular kann man direkt aus allen Seiten auswählen.
Wenn jetzt Bspw. 40 oder 50 Seiten existieren, wäre es ohne dieses Formular eine mühselige klickerei, von Seite 1 auf 28 zu gelangen.

mfg

[hotti]

hi,

Wenn jetzt Bspw. 40 oder 50 Seiten existieren, wäre es ohne dieses Formular eine mühselige klickerei, von Seite 1 auf 28 zu gelangen.

Richtig.

Naja, ich mache ja auch sowas http://rolfrost.de/cgi-bin/moon.cgi

und hab mir auch schnommal überlegt, ein Eingabefeld zur Direkteingabe zu zeigen (o.g. Beispiel hat 'noch' keins). Also die Liste horizontal, oder je nachdem. Und ein optionales Eingabefeld rechts oder links davon.

Ich guck mir das morgen mal an, hab noch mehr Bedarf für sowas ;-)

Gute Nacht, Grüße an Alle,
Horst Zipfelmütze

[Malcolm Beck´s]

hi,

Naja, ich mache ja auch sowas http://rolfrost.de/cgi-bin/moon.cgi

Hier wäre ein Eingabefeld definitiv nicht deplatziert.
Ich baue gerade mein erstes Gästebuch, bei der Gelegenheit möchte ich eine Pagination für verschiedene einsatzmöglichkeiten bauen, 'n Schweizer Taschenpaginator :)

und hab mir auch schnommal überlegt, ein Eingabefeld zur Direkteingabe zu zeigen (o.g. Beispiel hat 'noch' keins).

Sowas hat Fotolia im Einsatz (setzt aber Javascript voraus), ging mir auch schon durch den Kopf.
Das Problem ist aber in beiden fällen, dass man ein Formular drumherum bauen muss, damit das ganze noch Sinnvoll strukturiert bleibt.

Ich guck mir das morgen mal an, hab noch mehr Bedarf für sowas ;-)

Sach Bescheid, wenn dir was gutes einfällt. Kannst dich aber auch einfach so melden -- wie du magst :)

mfg

[hotti]

h1,

meine Codepoint Tabellen könnten sowas gebrauchen wie ein Eingabefeld.

Sach Bescheid, wenn dir was gutes einfällt. Kannst dich aber auch einfach so melden -- wie du magst :)

Eine feste Breite wäre wünschenswert, damit zappelt die Liste nicht so beim Blättern und die Maus muss keinen Stress kriegen.

Das P ist tatsächlich ein Markup Problem: <form> UND <ul> in strict und so dass es gut aussieht...

Hotti

[Malcolm Beck´s]

hi,

Eine feste Breite wäre wünschenswert, damit zappelt die Liste nicht so beim Blättern und die Maus muss keinen Stress kriegen.

Das P ist tatsächlich ein Markup Problem: <form> UND <ul> in strict und so dass es gut aussieht...

Hab's mittlerweile ganz vernünftig hingekriegt, und statt <p> habe ich ein div reingepackt.

Das Markup (kurzgefasst):

<dl class="pagination">  
  <dt>Seite 1 von 11 | Einträge Gesamt: 165</dt>  
  
<dd class="seitenzahlen">  
 <ul>  
  <li><span class="firstsite">« Erste</span> <span>…</span></li>  
  <li><strong class="currentsite">1</strong></li>  
  <li><a href="?ui=2">2</a></li>  
  <li><span>…</span> <a href="?ui=11" class="lastsite">Letzte »</a></li>  
  
  <li class="pagination_js_generated" id="pagination_first">  
   <!-- Wenn Javascript Aktiviert ist, wird hier ein  
        hover-Link mit einer Liste aller Links angezeigt -->  
    <script type="text/javascript">

     var addParam = new Array();  
     addParam["id"]='pagination_first';addParam["end"]=11;addParam["prefix"]='ui';  
     createClickableLinks(addParam);

    </script>  
     <noscript>  
      <form method="get" action=""><div>  
      <!-- Das Select kann ohne weiteres durch ein Eingabefeld ersetzt werden -->  
      <select name="ui">  
      <option selected='selected'>1</option>  
      <option>2</option>  
     </select>  
     <input type="submit" value="Go" />  
    </div></form>  
   </noscript>  
  </li>  
 </ul>  
</dd>  
  
<dd class="pagination_onepage_navigation">  
 <ul class="pagination_onepage_list">  
  <li><a href="?ui=2" class="paginator_onefor">Seite weiter »</a></li>  
  <li><span class="paginator_onebacknolink">« Seite zurück</span></li>  
 </ul>  
</dd>  
  
</dl>

Sieht zwar etwas viel aus, aber so eine Pagination ist keine unnötige Lappalie, sondern durchaus ein wichtiger Bestandteil des Contents.

mfg

[Steel]

Moin!

Ich fand beide unbequem. Die Idee mit der Dropdownliste ist Gut, aber wie kommt man damit zurück? Ich nahm an, daß dort immer alle Seiten zu finden wären. Das war ein Irrtum.

Ich persönlich mag die Navigation komplett in einer Zeile und die Seite vor/zurueck Schaltflächen entsprechend vor oder hinter der Liste. Das Dropdown würde ich auch davor oder dahinter besser finden - auf jeden Fall etwas separiert.

[Malcolm Beck´s]

hi,

Ich fand beide unbequem.

Dito :)

Die Idee mit der Dropdownliste ist Gut, aber wie kommt man damit zurück?

Ich weiss nicht, ob ich gleich alle Seiten in dem Dropdown auflisten soll, oder nur die Links nach der Aktuell aufgerufenen Seite.
Macht irgendwie beides Sinn.
Ich könnte es auch so wie es jetzt ist für weiterblättern, um ein Dropdown erweitern, in dem ich noch die zurückblättern-Links speichere, sprich 2 Dropdown-Elemente hätte (wohl eher nicht, dass liest sich schon schlecht).

Ich persönlich mag die Navigation komplett in einer Zeile und die Seite vor/zurueck Schaltflächen entsprechend vor oder hinter der Liste.

Ich auch. Was ich jetzt habe, ist ja nur das Gerüst. Wenn ich das Grundgerüst Fertig habe, wird das ganze natürlich noch gestyled.

Das Dropdown würde ich auch davor oder dahinter besser finden - auf jeden Fall etwas separiert.

Dafür muss ich mir noch irgendwas einfallen lassen.

mfg

[Malcolm Beck´s]

hi,

habe mich jetzt für Listen entschieden und finde es Ok. Habe das ganze auch mal Provisorisch gestylet, damit es wenigstens etwas ermutigt, sich das anzugucken :)

http://dj-tut.de/z_test/a-ng/ -- Mit Javascript verschlimmbessert

Morgen werde ich noch ein wenig am Javascript und dem CSS arbeiten und dann weiter sehen.

Fällt euch irgendwas Negatives an dem ganzen auf? Verbesserungsvorschläge? (es soll _nicht_ IE-tauglich sein (das fehlte ja noch!))

mfg

[ChrisB]

Hi,

Es geht nur um das Markup und Benutzerfreundlichkeit.

Zu letzterem möchte ich diese Lektüre empfehlen: http://kurafire.net/log/archive/2007/06/22/pagination-101

MfG ChrisB

[Malcolm Beck´s]

hi,

Es geht nur um das Markup und Benutzerfreundlichkeit.

Zu letzterem möchte ich diese Lektüre empfehlen: http://kurafire.net/log/archive/2007/06/22/pagination-101

Danke für den Link (auch noch ein Landsmann).

Mich würde aber auch deine Meinung zu ersterem Interessieren -- hast du nicht wenigstens ein bisschen Kritik für mich? :)

Gerne auch zum nachträglich geposteten Script.

mfg

[Malcolm Beck´s]

hi,

ich habe es jetzt einfach so umgesetzt, wie ich es für richtig erachte.

http://dj-tut.de/z_test/a-ng/?

Wenn euch irgendwas auf- oder einfällt, einfach posten.

mfg

[Felix Riesterer]

Lieber Malcolm,

http://dj-tut.de/z_test/a-ng/?

Wenn euch irgendwas auf- oder einfällt, einfach posten.

grundsätzlich finde ich das schon sehr gut, jedoch fände ich die Buttons zum "nächsten" oder "vorherigen" sinnvoller neben den jeweiligen Seitenzahlen positioniert, anstatt rechts außen. Man sieht das ja anderswo ähnlich. Also in etwa so:

Und der Wortlaut "Links +" für eine Übersicht aller Seiten ist vielleicht auch noch überdenkenswert... warum nicht "alle Seiten +" oder "Direktlinks +" oder sowas?

Liebe Grüße,

Felix Riesterer.

[Malcolm Beck´s]

hi Felix,

Wenn, dann könnte ich die "eine Seite vor und zurück"-Links jeweils an den äussersten Rand packen.
Das Problem bei deinem Vorschlag ist das hin und her hüpfen der Links, wenn die Liste sich selbst erweitert oder verkürzt; weisst du, was ich meine?

Und der Wortlaut "Links +" für eine Übersicht aller Seiten ist vielleicht auch noch überdenkenswert... warum nicht "alle Seiten +" oder "Direktlinks +" oder sowas?

Das war nur Provisorisch.

Ich habe ansich an sowas wie das hier gedacht (muss ich noch ein wenig testen)

Der Link, der die Links zum ausklappen hat, bekommt noch ein Background-Img mit einem Symbol, um zu signalisieren, dass da was ist.
Nur die "eine Seite weiter und zurück"-Links kann ich nicht zwischen die nummerierte Liste packen, weil die nummerierten Links immer in bewegung sind.

Ich mein, ich weiss nicht; mich stört das rumgezappel, wenn Dynamisch neue Links in die liste kommen oder entfernt werden, ich mag konsistenz beim Blättern; wie seht ihr das.
Das Problem bei den ganzen Artikeln zu diesem Thema ist, dass genau auf diesen Punkt keiner so Recht eingeht -- von der Diskussion in diesem Thread hatte ich mir eigentlich erhofft, einige dieser Punkte nach und nach abzuhaken. Scheint ein zu Marginales Thema zu sein.

mfg

[Felix Riesterer]

Lieber Malcolm,

Wenn, dann könnte ich die "eine Seite vor und zurück"-Links jeweils an den äussersten Rand packen.

damit widersprichst Du aber Nummer sieben der sieben Regeln von Faruk Ateş für eine gute Pagination, die das (meiner Meinung nach mit vollstem Recht) genau anders herum verlangt. Faruk Ateş führt dazu das Beispiel der Bedienknöpfe eines Mediaplayers an. Die Logik dahinter beschreibt, dass ein Schritt zur nächsten Seite ein kleinerer Schritt von der aktuellen Seite weg ist, als der Schritt zur letzten Seite, und dass deswegen der "next" oder "previous" Button eben _innerhalb_ der "last" und "first" Buttons sein muss.

Das Problem bei deinem Vorschlag ist das hin und her hüpfen der Links, wenn die Liste sich selbst erweitert oder verkürzt; weisst du, was ich meine?

Das muss egal sein. Wenn Du im obigen Artikel das Beispiel mit der Pagination von "slate" anschaust, dann stehen dort immer die erste und letzte Seite in den "nummerierten" Buttons fest am Anfang oder Ende. Diese Darstellung erlaubt es Dir aufgrund ihrer leicht anderen Logik (im Vergleich zum Mediaplayer ist die Logik tatsächlich anders), die "next" und "previous" Buttons tatsächlich am äußeren Rand zu haben. Aber dann musst Du die "last" und "first" Buttons auch mit den entsprechenden "Seitenzahlen" beschriften, und in der Liste notfalls durch Auslassungszeichen dazwischen von der aktuellen Seite absetzen. Und Dein Hin- und Herhüpfen ist dann erledigt, wenn Du eine Maximalanzahl der möglichen Seitenzahlen definierst, die höchstenfalls unterschritten werden kann, wenn zu wenig Seiten vorhanden sind.

Beispiel:

< previous |  |  1 |  |  2 | ... |  7 |  |  8 |  |**9*|  | 10 |  | 11 | ... | 14 |  | 15 |  | next > |

Und der Wortlaut "Links +" für eine Übersicht aller Seiten ist vielleicht auch noch überdenkenswert... warum nicht "alle Seiten +" oder "Direktlinks +" oder sowas?

Das war nur Provisorisch.

OK.

Liebe Grüße,

Felix Riesterer.

[Malcolm Beck´s]

hi Felix und Chris,

Das muss egal sein. Wenn Du im obigen Artikel das Beispiel mit der Pagination von "slate" anschaust, dann stehen dort immer die erste und letzte Seite in den "nummerierten" Buttons fest am Anfang oder Ende.

< previous |  |  1 |  |  2 | ... |  7 |  |  8 |  |**9*|  | 10 |  | 11 | ... | 14 |  | 15 |  | next > |

Ein „Auslassungszeichen” wie … o.ä., das mir signalisiert, dass es zwischen der letzten verlinkten und der tatsächlich letzten Seite noch weitere gibt, vermisse ich da ein bisschen.

Ich habe das ganze nochmal Aktualisiert, allerdings habe ich jetzt ganz andere Sorgen -- nämlich 7-For-Schleifen :)

Was sagt ihr zum Aktuellen Stand?

Sorry, dass ich das Script vorerst nicht veröffentliche, ich muss es erstmal aufgeräumt kriegen. Im Script herrscht das reinste Tohuwabohu.

mfg

[ChrisB]

Hi,

Ich habe das ganze nochmal Aktualisiert, allerdings habe ich jetzt ganz andere Sorgen -- nämlich 7-For-Schleifen :)

Das ist ein _bisschen_ viel ...

(Genauer: Es sind sechs Stück mehr, als ich dafür verwenden würde.)

Was sagt ihr zum Aktuellen Stand?

Das mit der Auslassung meinte ich eher in der Form:

[erste Seite] ... [12] [13] [14] [15] ... [letzte Seite]

MfG ChrisB

[Malcolm Beck´s]

hi,

(Genauer: Es sind sechs Stück mehr, als ich dafür verwenden würde.)

Die Schleifen sind weg.
Hab sie einfach durch ein wirsches If/ Else-Konstrukt ersetzt ;)
Heute Abend poste ich das Script, wenn ich es aufgeräumt habe -- ich brauche jetzt eine Pause.

Das mit der Auslassung meinte ich eher in der Form:

[erste Seite] ... [12] [13] [14] [15] ... [letzte Seite]

Irgendwann muss es ja klappen, auf ein neues: ReReloaded

mfg

[Felix Riesterer]

Lieber Malcolm,

ReReloaded

die Gesamtauswahl finde ich an einer höchst unlogischen Stelle. Außerdem suggeriert die Ellipse nicht das, was sich darunter tatsächlich verbirgt. Und wenn am Anfang auch eine Ellipse steht, dann ist visuell eigentlich kein Unterschied erkennbar, obwohl in der Funktionalität ein riesengroßer solcher vorhanden ist!

Warum muss eigentlich diese Gesamtauswahl irgendwie dazwischen stehen? Bei Deinem ersten Versuch (siehe Screenshot oben) stand sie doch auch sehr sinnvoll "nebendran"...

Liebe Grüße,

Felix Riesterer.

[ChrisB]

Hi,

da Felix schon einen Screenshot gemacht hat, halte ich mich mal kurz an den:

Seite 10 von 26 steht zwar in Textform drüber; aber an den Seitenlinks selber erkenne ich nicht, dass [14] noch nicht die letzte Seite ist.
Gut, in diesem Falle vielleicht schon, weil die erste Nummer [8] ist - aber wenn ich mir die aktuelle Startseite deines Scriptes anschaue, dann ist
[1] [2] [3] [4] [5] [Letzte>>]
diesbezüglich wenig aussagekräftig.

Ein „Auslassungszeichen” wie … o.ä., das mir signalisiert, dass es zwischen der letzten verlinkten und der tatsächlich letzten Seite noch weitere gibt, vermisse ich da ein bisschen.

MfG ChrisB