tag:forum.selfhtml.org,2005:/self Tabelle einklappbar – SELFHTML-Forum 2019-02-17T17:52:26Z https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742532#m1742532 Feffo 2019-02-12T16:17:13Z 2019-02-12T16:17:13Z Tabelle einklappbar <p>Hallo </p> <p>Ich würde gerne eine Tabelle erstellen die "einklappbar" ist. Sprich man hat die Überschriften bspw. in 3 Spalten und muss zunächst auf diese draufklicken, sodass man die Zeilen darunter lesen kann. Welcher Befehl ist dafür vorgesehen?</p> <p>Liebe Grüße, Steffi</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742535#m1742535 Rolf B 2019-02-12T16:31:28Z 2019-02-13T10:02:48Z Tabelle einklappbar <p>Hallo Feffo, oder Steffi,</p> <blockquote> <p>Welcher Befehl ist dafür vorgesehen?</p> </blockquote> <p>Keiner. HTML hat Elemente </p> <p>Eigentlich sind dafür <details> und <summary> da. Die werden von Firefox, Chrome und Safari unterstützt, von den Microsoft-Browsern nicht. Dort siehst Du dann ständig die aufgeklappte Tabelle.</p> <p>Dumm ist nur, dass Du dann keine automatische Breitenaufteilung mehr verwenden kannst, weil Du die Tabelle zweiteilen musst. Die Überschriften kommen in <summary> hinein, die Datenzeilen darunter. D.h. du müsstest die Spaltenbreiten fest vorgeben und ggf. mit CSS dafür sorgen, dass keine Abstände und kein Versatz zwischen Überschrift und Inhalt entstehen.</p> <p>Ohne <details>/<summary> wirst Du einen Button brauchen, der mit einer Prise JavaScript dafür sorgt, das die Sichtbarkeit des <tbody> umgeschaltet wird. Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt. Du kannst diesen Button auch in eins der th Elemente hineinsetzen.</p> <p>Welchen Weg willst Du gehen?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742537#m1742537 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-12T16:53:01Z 2019-02-12T16:53:01Z Tabelle einklappbar <p>@@Rolf B</p> <blockquote> <p>Ohne <details>/<summary> wirst Du einen Button brauchen, der mit einer Prise JavaScript dafür sorgt, das die Sichtbarkeit des <tbody> umgeschaltet wird.</p> </blockquote> <p>Da ist in <a href="https://codepen.io/gunnarbittersmann/pen/MvygEB" lang="en" rel="noopener noreferrer">expand/collapse table</a> nur ein Selektor zu ändern.</p> <blockquote> <p>Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.</p> </blockquote> <p>Also technisch <strong>unmöglich</strong>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742550#m1742550 Pit 2019-02-13T07:14:22Z 2019-02-13T07:14:22Z Tabelle einklappbar <p>Hallo Rolf,</p> <blockquote> <p>Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.</p> </blockquote> <p>Ist das so? Inwiefern?</p> <p>Ich frage nach, weil ich sowas in der Art sicher schonmal irgendwo genutzt habe :(</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742546#m1742546 Rolf B 2019-02-12T21:52:07Z 2019-02-12T21:52:07Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p>Also technisch unmöglich.</p> </blockquote> <p>Seufz. Nein. Das wäre schön. Es ist ja leider technisch möglich. Wenn es technisch unmöglich wäre, würde ein solches Konstrukt vom Browser einfach nicht akzeptiert. Es wird aber.</p> <p>Mausschubser und Touchtapser sind happy damit und merken nicht, dass es falsch ist. Und du darfst das Evangelium nach Heydon zum (n+1)-ten Mal vortragen.</p> <p>Zur Definition von "technisch möglich": Frei gespannte, unisolierte Kupferlitze von der Wand zur 220V Deckenlampe ist technisch möglich. Die Lampe brennt, wenn Du den Schalter umlegst. Funktioniert, kann man sagen. Technisch sinnvoll ist es dagegen nicht. Die Gründe muss ich nicht aufzählen. Ein click-Event auf einem nichtinteraktiven Element ist etwas besser als die Kupferlitze: Man stirbt nicht wenn man dranfasst. Man stirbt nur, wenn Gunnar es mitbekommt </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742551#m1742551 Auge 2019-02-13T07:18:10Z 2019-02-13T07:18:10Z Tabelle einklappbar <p>Hallo</p> <blockquote> <blockquote> <p>Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.</p> </blockquote> <p>Ist das so? Inwiefern?</p> <p>Ich frage nach, weil ich sowas in der Art sicher schonmal irgendwo genutzt habe :(</p> </blockquote> <p>Es ist ohne Maus oder Finger nicht bedienbar, weil <code>th</code> nunmal kein interaktives HTML-Element ist, wie zum Beispiel <code>a</code> oder <code>button</code>.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742552#m1742552 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-13T07:19:44Z 2019-02-13T07:19:44Z Tabelle einklappbar <p>Hallo Pit,</p> <blockquote> <blockquote> <p>Einen <strong>Maus</strong>klick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.</p> </blockquote> <p>Ist das so? Inwiefern?</p> </blockquote> <p>Es gibt Nutzer ohne Maus.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742567#m1742567 JürgenB https://www.j-berkemeier.de 2019-02-13T08:13:44Z 2019-02-13T08:13:44Z Tabelle einklappbar <p>Hallo,</p> <p>dass man besser die vorgesehenen Elemente für Interaktionen nutzt, wurde ja schon gesagt.</p> <p>In <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Tabellen_dynamisch_sortieren#Das_Javascript" rel="nofollow noopener noreferrer">diesem Beispiel</a> kann man sehen, wie man ein <code>tr</code> (nachträglich) klickbar machen kann, ohne das es sein Aussehen verändert.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742555#m1742555 Pit 2019-02-13T07:26:57Z 2019-02-13T07:26:57Z Tabelle einklappbar <p>Hi Auge,</p> <blockquote> <blockquote> <blockquote> <p>Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.</p> </blockquote> </blockquote> </blockquote> <blockquote> <p>Es ist ohne Maus oder Finger nicht bedienbar, weil <code>th</code> nunmal kein interaktives HTML-Element ist, wie zum Beispiel <code>a</code> oder <code>button</code>.</p> </blockquote> <p>Ah, ok, verstehe. Es ging mir um den Begriff "unzulässig". Wäre es also zulässig, das so zu machen, wenn m an den kreis seiner User ganz sicher zu 100% auf Mausschubser und Touchtabser einschränken kann? Oder wenn die Seite so intern ist, dass sie nur für einen selber zugänglich ist?</p> <p>Ich habe übrogens nachgesehen, ich habe sowas 2 x genutzt, aber einmal innerhalb einer Zeile einen +-Button eingefügt, der iene weitere zeile un-/sichtbar macht bzw. einmal einen Radiobutton hierfür genutzt, also insowfern alles in Ordnung.</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742557#m1742557 Auge 2019-02-13T07:34:48Z 2019-02-13T07:49:46Z Tabelle einklappbar <p>Hallo</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Einen Mausklick auf den th-Elementen abzufangen ist technisch zwar möglich, praktisch aber falsch weil es die Benutzbarkeit unzulässig einschränkt.</p> </blockquote> </blockquote> <p>Es ist ohne Maus oder Finger nicht bedienbar, weil <code>th</code> nunmal kein interaktives HTML-Element ist, wie zum Beispiel <code>a</code> oder <code>button</code>.</p> </blockquote> <p>Es ging mir um den Begriff "unzulässig". Wäre es also zulässig, das so zu machen, wenn man den kreis seiner User ganz sicher zu 100% auf Mausschubser und Touchtabser einschränken kann? </p> <p>Oder wenn die Seite so intern ist, dass sie nur für einen selber zugänglich ist?</p> </blockquote> <ol> <li>Kann man das mit Sicherheit?</li> <li>Wird man diesen Fehler, den man in einem internen Projekt als vernachlässigbar angesehen hat, mit einer gewissen Wahrscheinlichkeit nicht auch in einem Projekt, dass nicht auf „Mausschubser und Touchtabser“ beschränkt ist, machen? Schon allein deshalb, weil man solche Dinge gerne mit copy'n'paste aus einer (vermeintlich) funktionierenden Vorlage holt, ohne weiter darüber nachzudenken?</li> </ol> <p>Selbst ohne quasireligiöse Strenge würde ich in einem solchen Szenario meine Faulheit „fürchten“. Wenn ich es hingegen gleich richtig™️ mache, kann ich es später, auch ohne unbemerkte Fehler fürchten zu müssen, kopieren.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742559#m1742559 Bernd 2019-02-13T07:43:13Z 2019-02-13T07:46:23Z Tabelle einklappbar <blockquote> <p>Wäre es also zulässig, das so zu machen, wenn m an den kreis seiner User ganz sicher zu 100% auf Mausschubser und Touchtabser einschränken kann? Oder wenn die Seite so intern ist, dass sie nur für einen selber zugänglich ist?</p> </blockquote> <p>Einfach umsetzten wenn es funktioniert. Wenn User kommen die keine Tastatur oder Maus haben oder diese nicht benutzen wollen warum auch immer, Pech!</p> <p>Du kennst deine Zielgruppe vor allem wenn es sich um ein internes Projekt handelt. Selbst bei einem externen Projekt ist es egal, die User haben dann eben nicht die Möglichkeit. Mach dir darüber nicht so viele Gedanken und lass dich auf keinen Fall verunsichern.</p> <p>Glaubst du große Unternehmen wie Facebook hören auf irgendwelche Menschen die meinen sagen zu müssen, legt Firmen nicht zusammen, schaltet keinen Werbung, oder ach wie schlimm es doch ist, wenn Teens eine App installieren und uns <em>wissentlich</em> ihr Nutzer-Verhalten gegen gutes Geld übermitteln? Nein interessiert sie überhaupt nicht. Was am Ende des Tages zählt ist Umsatz und Gewinn, nicht mehr und nicht weniger.</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742562#m1742562 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T07:46:23Z 2019-02-13T07:46:23Z Tabelle einklappbar <p>@@Pit</p> <blockquote> <p>Wäre es also zulässig, das so zu machen, wenn m an den kreis seiner User ganz sicher zu 100% auf Mausschubser und Touchtabser einschränken kann? </p> </blockquote> <p><em lang="en">“Everybody is a keyboard user when eating lunch with their mouse hand.”</em> —Adrian Roselli</p> <blockquote> <p>Oder wenn die Seite so intern ist, dass sie nur für einen selber zugänglich ist?</p> </blockquote> <p>Auch man selbst kommt mal in die Situation. Und sei es, dass die Batterie der Maus alle ist …</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742558#m1742558 Pit 2019-02-13T07:39:45Z 2019-02-13T07:39:45Z Tabelle einklappbar <p>Hi Auge,</p> <blockquote> <ol> <li>Kann man das mit Sicherheit?</li> <li>Wird man diesen Fehler, den man in einem internen Projekt als vernachlässigbar angesehen hat, mit einer gewissen Wahrscheinlichkeit nicht auch in einem Projekt, dass nicht auf „Mausschubser und Touchtabser“ beschränkt ist, machen? Schon allein deshalb, weil man solche Dinge gerne mit copy'n'paste aus einer (vermeintlich) funktionierenden Vorlage holt, ohne weiter darüber nachzudenken?</li> </ol> </blockquote> <p>2 x ja. </p> <ol> <li> <p>Es gibt Fälle, in denen man das zu 100% sagen kann, bzw. es gewollt ist. Und wenn jemand ungewollt dort ist, muß er nicht auch noch tastaturkonform bedient werden </p> </li> <li> <p>Auch ja, Genau so ist es. Insofern sollte man es tatsächlich von vorne herein korrekt machen.</p> </li> </ol> <p>Pit</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742560#m1742560 Christian Kruse https://wwwtech.de/about 2019-02-13T07:45:25Z 2019-02-13T07:45:25Z Tabelle einklappbar <p>Hallo Pit,</p> <blockquote> <ol> <li>Es gibt Fälle, in denen man das zu 100% sagen kann, bzw. es gewollt ist. Und wenn jemand ungewollt dort ist, muß er nicht auch noch tastaturkonform bedient werden </li> </ol> </blockquote> <p>Auch wenn du das zur Zeit denkst: machs von vornherein richtig. Anforderungen ändern sich, das ist die einzige Konstante, die ich erlebt habe.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742580#m1742580 marctrix self@mhis.de https://www.mhis.de 2019-02-13T09:25:43Z 2019-02-13T09:50:33Z Tabelle einklappbar <p>Hej Pit,</p> <blockquote> <ol start="2"> <li>Auch ja, Genau so ist es. Insofern sollte man es tatsächlich von vorne herein korrekt machen.</li> </ol> </blockquote> <p>Unbedingt. Man sollte so oft wie möglich wiederverwendbaren Code erzeugen - es sei denn man muss keinen erzeugen, weil man gerade welchen wiederverwendet.</p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742561#m1742561 Christian Kruse https://wwwtech.de/about 2019-02-13T07:46:07Z 2019-02-13T07:46:23Z Tabelle einklappbar <p>Shoo, Troll dich.</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742563#m1742563 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T07:48:46Z 2019-02-13T07:48:46Z Tabelle einklappbar <p>@@Christian Kruse</p> <blockquote> <p>machs von vornherein richtig. Anforderungen ändern sich, das ist die einzige Konstante, die ich erlebt habe.</p> </blockquote> <p>Und gleich richtig machen ist weniger Aufwand (zeitlicher, und Zeit ist Geld) als später nachrüsten zu müssen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742594#m1742594 ursus contionabundo 2019-02-13T10:12:46Z 2019-02-13T10:22:09Z messages from real live <blockquote> <p>“Everybody is a keyboard user when eating lunch with their mouse hand.” —Adrian Roselli</p> </blockquote> <p>Jetzt habe ich kurz gestutzt.</p> <ul> <li> <p>Aber vielleicht will ich zum Brötchen, Stückchen oder Schnittchen (links) vielleicht auch ein Schlückchen (rechts=Maushand).</p> </li> <li> <p>(Vor allem, viele) Araber dürften hingegen aus hier nicht weiter auszuführenden, geografisch-metereologisch-kulturellen Gründen sehr darüber verwirrt sein, dass jemand mit der linken Hand etwas anfasst, was danach noch gegessen werden soll.</p> </li> <li> <p>Von meinem eigenen Arbeitsplatz weiß ich, dass eine Mausbedienung temporär aus, sagen wir geometrischen Gründen, schwierig ist...</p> </li> </ul> <blockquote> <p>Auch man selbst kommt mal in die Situation. Und sei es, dass die Batterie der Maus alle ist …</p> </blockquote> <p>Oder man sitzt im ICE und hasst Touchpads so sehr, dass die schon im Bios abgeschaltet sind und der Knubbel erscheint als zu mühseliger Umweg.</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742564#m1742564 Christian Kruse https://wwwtech.de/about 2019-02-13T07:49:37Z 2019-02-13T07:49:37Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>machs von vornherein richtig. Anforderungen ändern sich, das ist die einzige Konstante, die ich erlebt habe.</p> </blockquote> <p>Und gleich richtig machen ist weniger Aufwand (zeitlicher, und Zeit ist Geld) als später nachrüsten zu müssen.</p> </blockquote> <p>Ja. Exakt das, was ich damit implizieren wollte.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742581#m1742581 marctrix self@mhis.de https://www.mhis.de 2019-02-13T09:28:33Z 2019-02-13T09:28:33Z Tabelle einklappbar <p>Hej Christian,</p> <blockquote> <blockquote> <blockquote> <p>machs von vornherein richtig. Anforderungen ändern sich, das ist die einzige Konstante, die ich erlebt habe.</p> </blockquote> <p>Und gleich richtig machen ist weniger Aufwand (zeitlicher, und Zeit ist Geld) als später nachrüsten zu müssen.</p> </blockquote> <p>Ja. Exakt das, was ich damit implizieren wollte.</p> </blockquote> <p>Als Frontender weiß ich, dass eine semantische Auszeichnung von Dokumenten dazu führt, dass geänderte Anforderungen leichter und schneller umgesetzt werden könne, als beispielsweise in Dokumenten voller presentational markup.</p> <p>Aber ich weiß natürlich nicht inwiefern sich das auf Programmierung übertragen lässt.</p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742570#m1742570 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T08:40:33Z 2019-02-13T08:40:33Z Tabelle einklappbar <p>@@JürgenB</p> <blockquote> <p>In <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Tabellen_dynamisch_sortieren#Das_Javascript" rel="nofollow noopener noreferrer">diesem Beispiel</a> kann man sehen, wie man ein <code>tr</code> (nachträglich) klickbar machen kann</p> </blockquote> <p>Du meinst vermutlich <code>th</code>?</p> <p>Da werden nicht <code>th</code> clickbar gemacht, sondern es wird jeweils ein <code>button</code> ins <code>th</code> eingefügt.</p> <blockquote> <p>ohne das es sein Aussehen verändert.</p> </blockquote> <p>Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742573#m1742573 JürgenB https://www.j-berkemeier.de 2019-02-13T08:59:50Z 2019-02-13T08:59:50Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p>Du meinst vermutlich <code>th</code>?</p> </blockquote> <p>meine ich, vertippt.</p> <blockquote> <p>Da werden nicht <code>th</code> clickbar gemacht, sondern es wird jeweils ein <code>button</code> ins <code>th</code> eingefügt.</p> </blockquote> <p>das meinte ich mit „klickbar machen“</p> <blockquote> <blockquote> <p>ohne das es sein Aussehen verändert.</p> </blockquote> <p>Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist.</p> </blockquote> <p>bisher wird hier das Defaultverhalten eines Buttons genommen, also gepunktete Linie bei Focus und Hand-Cursor bei Mouseover. Wie würdest du die Zellen gestalten?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742576#m1742576 Auge 2019-02-13T09:06:40Z 2019-02-13T10:53:20Z Tabelle einklappbar <p>Hallo</p> <blockquote> <blockquote> <blockquote> <p>ohne das es sein Aussehen verändert.</p> </blockquote> <p>Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist.</p> </blockquote> <p>bisher wird hier das Defaultverhalten eines Buttons genommen, also gepunktete Linie bei Focus und Hand-Cursor bei Mouseover. Wie würdest du die Zellen gestalten?</p> </blockquote> <p>Ich vermute mal, Gunnar stellt auf „ohne das es sein Aussehen verändert“ ab.</p> <p>Ein Benutzer kann nicht einfach so feststellen, dass die Überschrift der Tabellenspalte interaktiv ist. Das geht nur, indem der Fokus oder der Mauszeiger auf die Überschrift gesetzt wird, was man nur macht, wenn man weiß, dass die Überschrift interaktiv ist, was man nicht weiß, ohne den Fokus oder den Mauszeiger ….</p> <p>Du siehst, ein Zirkelschluss.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742592#m1742592 Tabellenkalk 2019-02-13T10:06:35Z 2019-02-13T10:06:35Z Tabelle einklappbar <p>Hallo,</p> <blockquote> <p>Wie würdest du die Zellen gestalten?</p> </blockquote> <p>Ich schlage zusätzliche Icons vor, jeweils ein unausgefüllter Pfeil nach oben und unten. Dort wo sortiert ist, entsprechend gefüllt.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742583#m1742583 marctrix self@mhis.de https://www.mhis.de 2019-02-13T09:34:27Z 2019-02-13T09:34:27Z Tabelle einklappbar <p>Hej marctrix,</p> <blockquote> <blockquote> <ol start="2"> <li>Auch ja, Genau so ist es. Insofern sollte man es tatsächlich von vorne herein korrekt machen.</li> </ol> </blockquote> <p>Unbedingt. Man sollte so oft wie möglich widerverwendbaren Code erzeugen - es sei denn man muss keinen erzeugen, weil man gerade welchen wiederverwendet.</p> </blockquote> <p>Ergänzung (auch wenn es sich dann nicht mehr so schön als Zitat eignet ): bei Verwendung kann man noch mal kurz drüber gucken, ob nicht ein Fehler drin steckt oder es inzwischen bessere Lösungen gibt. So wird die Bibliothek nicht nur größer, sondern auch besser.</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742608#m1742608 ursus contionabundo 2019-02-13T12:33:34Z 2019-02-13T12:53:32Z Tabelle einklappbar <blockquote> <p>Als Frontender weiß ich, dass eine semantische Auszeichnung von Dokumenten dazu führt, dass geänderte Anforderungen leichter und schneller umgesetzt werden könne, als beispielsweise in Dokumenten voller presentational markup.</p> <p>Aber ich weiß natürlich nicht inwiefern sich das auf Programmierung übertragen lässt.</p> </blockquote> <p>Wenn Du auch nur einmal ein, in einer deutschen Firma von einem Pole mit polnischen Variablen-, Funktionen- und Objektnamen verziertes "Programm" (in meinem Fall war es Excel-VBA) gesehen hättest, bei dem Daten und Programm auf eine geradezu wahnwitzige Art vermischt wurden, dann wüsstest Du, dass bei einer gewissen Ausdehnung des Begriffs der Sematik, eine "semantische" Auszeichnung von Programmbestandteilen (Konstanten, Variablen, Funktionen, Klassen, Methoden) und Daten nicht etwa nur förderlich ist, sondern Bedingung für die Pflegbarkeit ist.</p> <p>Oder weisst Du, was</p> <pre><code class="block bad language-basic">krjoli<span class="token operator">=</span>strzprz<span class="token punctuation">(</span>krajkri<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>macht?</p> <p>Ein anderes Beispiel mangelhafter und zur erschwerten Pflege führender "Semantik" wären frühere Basic-Dialekte mit der Begrenzung von Variablennamen auf zwei Zeichen:</p> <pre><code class="block bad language-basic">kr<span class="token operator">=</span>strzprz<span class="token punctuation">(</span>kk<span class="token punctuation">)</span> </code></pre> <p>Das ist in etwa genau so aussagekräftig... Aber auf den damaligen Systemen gab es eh nur maximal 64kB Arbeitsspeicher, so dass der neben dem Monitor hängende Zettel mit den Beschreibungen des Inhalts der Variablen durchaus nur die Größe eines A4-Blattes hatte.</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742588#m1742588 Tabellenkalk 2019-02-13T09:53:38Z 2019-02-13T09:53:38Z Tabelle einklappbar <p>Hallo,</p> <blockquote> <p>widerverwendbaren Code</p> </blockquote> <blockquote> <p>als Zitat</p> </blockquote> <p>Kann bitte jemand (<a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> ?) den Fehler im Zitat korrigieren, ich habs grad im Original getan.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742614#m1742614 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-13T13:31:08Z 2019-02-13T13:31:08Z Tabelle einklappbar <p>Hallo Tabellenkalk,</p> <blockquote> <p>Kann bitte jemand (<a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> ?) den Fehler im Zitat korrigieren</p> </blockquote> <p>✅ done.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742603#m1742603 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T11:10:39Z 2019-02-13T12:42:25Z Tabelle einklappbar <p>@@Tabellenkalk</p> <blockquote> <blockquote> <p>Wie würdest du die Zellen gestalten? Ich schlage zusätzliche Icons vor, jeweils ein unausgefüllter Pfeil nach oben und unten. Dort wo sortiert ist, entsprechend gefüllt.</p> </blockquote> </blockquote> <p>Ja, sowas wollte ich auch vorschlagen und auf dieses <a href="https://codepen.io/gunnarbittersmann/pen/XXwZpP" rel="noopener noreferrer">Beispiel</a> verweisen. Ich wollte es bloß noch vorher fixen, muss aber nochmal nachlesen, was da zu tun ist … (Irgendwas hatte sich da an der Webcomponents-Spec geändert.)</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742607#m1742607 JürgenB https://www.j-berkemeier.de 2019-02-13T11:54:16Z 2019-02-13T11:54:16Z Tabelle einklappbar <p>Hallo,</p> <p>ich habe mal <a href="http://test.berkemeier.eu/TableSort_Beispiel.html" rel="nofollow noopener noreferrer">meine Version</a> mit offenen Dreiecken versehen, weil ich dafür schon Platzhalter hatte. Was meint ihr?</p> <p>Hier habe ich für die Dreiecke einen Textknoten an den Text im th gehängt. Sollte man hier lieber eine Klasse (up, down, no) nehmen und dann mit ::after arbeiten?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742629#m1742629 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T19:47:50Z 2019-02-13T19:47:50Z Tabelle einklappbar <p>@@Gunnar Bittersmann</p> <blockquote> <p>Ja, sowas wollte ich auch vorschlagen und auf dieses <a href="https://codepen.io/gunnarbittersmann/pen/XXwZpP" rel="noopener noreferrer">Beispiel</a> verweisen. Ich wollte es bloß noch vorher fixen, muss aber nochmal nachlesen, was da zu tun ist … (Irgendwas hatte sich da an der Webcomponents-Spec geändert.)</p> </blockquote> <p><a href="/users/6317" class="mention registered-user" rel="noopener noreferrer">@Orlok</a>⁠s <a href="https://forum.selfhtml.org/self/2018/oct/10/heise-punkt-de-lazy-loading-images-mit-custom-elements/1733931#m1733931" rel="noopener noreferrer">Posting</a> wiedergefunden und mich dann endlich mal rangesetzt: <a href="https://codepen.io/gunnarbittersmann/pen/KJBrEP" lang="en" rel="noopener noreferrer">Web components: sortable table, revisited</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742610#m1742610 Tabellenkalk 2019-02-13T12:54:57Z 2019-02-13T12:54:57Z Tabelle einklappbar <p>Hallo,</p> <blockquote> <p>ich habe mal <a href="http://test.berkemeier.eu/TableSort_Beispiel.html" rel="nofollow noopener noreferrer">meine Version</a> mit offenen Dreiecken versehen, weil ich dafür schon Platzhalter hatte. Was meint ihr?</p> </blockquote> <p>Ja, so oder <em>immer</em> zwei Dreiecke (über- oder nebeneinander) und eins davon bei Bedarf ausgefüllt.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742611#m1742611 Auge 2019-02-13T12:57:50Z 2019-02-13T12:57:50Z Tabelle einklappbar <p>Hallo</p> <blockquote> <p>ich habe mal <a href="http://test.berkemeier.eu/TableSort_Beispiel.html" rel="nofollow noopener noreferrer">meine Version</a> mit offenen Dreiecken versehen, weil ich dafür schon Platzhalter hatte. Was meint ihr?</p> </blockquote> <p>Mal unabhängig von der resultierenden HTML-Struktur sieht das mMn definitiv verständlicher aus.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742612#m1742612 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T12:58:16Z 2019-02-13T12:58:16Z Tabelle einklappbar <p>@@ursus contionabundo</p> <blockquote> <p>Oder weisst Du, was</p> <pre><code class="block bad language-basic">krjoli<span class="token operator">=</span>strzprz<span class="token punctuation">(</span>krajkri<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>macht?</p> </blockquote> <p>Den Finger in den Hals stecken? Das erinnert mich an <a href="https://de.wikipedia.org/wiki/Str%C4%8D_prst_skrz_krk" rel="nofollow noopener noreferrer"><em lang="cs">Strč prst skrz krk</em></a>, aber das ist tschechisch.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742613#m1742613 ursus contionabundo 2019-02-13T13:06:23Z 2019-02-13T13:06:23Z Tabelle einklappbar <blockquote> <blockquote> <p>Oder weisst Du, was</p> <pre><code class="block bad language-basic">krjoli<span class="token operator">=</span>strzprz<span class="token punctuation">(</span>krajkri<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>macht?</p> </blockquote> <p>Den Finger in den Hals stecken? Das erinnert mich an <a href="https://de.wikipedia.org/wiki/Str%C4%8D_prst_skrz_krk" rel="nofollow noopener noreferrer"><em lang="cs">Strč prst skrz krk</em></a>, aber das ist tschechisch.</p> </blockquote> <p>Ja, an den weltberühmten vokalfreien Satz "Steck den Finger durch den Hals!" war das Beispiel durchaus angelehnt.</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742615#m1742615 Tabellenkalk 2019-02-13T13:43:50Z 2019-02-13T13:43:50Z Tabelle einklappbar <p>Hallo,</p> <blockquote> <p>✅ done.</p> </blockquote> <p>Danke!</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742632#m1742632 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-13T20:13:26Z 2019-02-13T20:13:26Z Tabelle einklappbar <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p><a href="/users/6317" class="mention registered-user" rel="noopener noreferrer">@Orlok</a>⁠s <a href="https://forum.selfhtml.org/self/2018/oct/10/heise-punkt-de-lazy-loading-images-mit-custom-elements/1733931#m1733931" rel="noopener noreferrer">Posting</a> wiedergefunden und mich dann endlich mal rangesetzt: <a href="https://codepen.io/gunnarbittersmann/pen/KJBrEP" lang="en" rel="noopener noreferrer">Web components: sortable table, revisited</a></p> </blockquote> <p>Den von dir kritisierten Makel</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>ohne das es sein Aussehen verändert.</p> </blockquote> </blockquote> </blockquote> </blockquote> <blockquote> <blockquote> <blockquote> <p>Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist.</p> </blockquote> </blockquote> </blockquote> <p>weist dein Pen auch auf.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742635#m1742635 JürgenB https://www.j-berkemeier.de 2019-02-13T20:58:40Z 2019-02-13T20:58:40Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/KJBrEP" lang="en" rel="noopener noreferrer">Web components: sortable table, revisited</a></p> </blockquote> <p>im Safari liegt das Dreieck auf dem letzten e, im FF (OS X) sieht es gut aus, aber in beiden Browsern sortiert es bei klick auf die Spaltenüberschrift nicht.</p> <p>Aber ich sehe, du legst das Dreieck in ein ::after, z.Zt. auch mein Favorit.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742640#m1742640 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T22:54:42Z 2019-02-13T22:54:42Z Tabelle einklappbar <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/KJBrEP" lang="en" rel="noopener noreferrer">Web components: sortable table, revisited</a></p> </blockquote> <p>Den von dir kritisierten Makel</p> <blockquote> <blockquote> <blockquote> <p>Fehler. Es sollte das Aussehen verändern, damit für Nutzer ersichtlich wird, dass das ein interaktives Element ist. weist dein Pen auch auf.</p> </blockquote> </blockquote> </blockquote> </blockquote> <p>Sehen die Tabellenköpfe nicht genügend nach Buttons aus?</p> <p>Ich hab das Hintergrundgrau jetzt etwas dunkler gemacht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742638#m1742638 JürgenB https://www.j-berkemeier.de 2019-02-13T21:58:01Z 2019-02-13T21:58:01Z Tabelle einklappbar <p>Hallo,</p> <blockquote> <p>… aber in beiden Browsern sortiert es bei klick auf die Spaltenüberschrift nicht.</p> </blockquote> <p>gerade gesehen, ich verwende die falschen Browser.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742639#m1742639 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T22:46:35Z 2019-02-13T22:46:35Z Tabelle einklappbar <p>@@JürgenB</p> <blockquote> <blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/KJBrEP" lang="en" rel="noopener noreferrer">Web components: sortable table, revisited</a></p> </blockquote> <p>im Safari liegt das Dreieck auf dem letzten e</p> </blockquote> <p>Gefixt.</p> <blockquote> <p>im FF (OS X) sieht es gut aus, aber in beiden Browsern sortiert es bei klick auf die Spaltenüberschrift nicht.</p> </blockquote> <p>Im Firefox sollte es gehen; es sei denn, du hast Updates verpasst.</p> <p>Safari <em lang="en">“supports ‘Autonomous custom elements’ but not ‘Customized built-in elements.’”</em> [<a href="https://caniuse.com/#feat=custom-elementsv1" rel="noopener noreferrer">CanIUse</a>] Die Sortierung kann also nicht gehen. Buh, Safari.</p> <p>In Chrome ging es vorher auch nicht. Ich hatte eine falsche Vergleichsfunktion, die einen booleschen anstatt eines numerischen Werts zurückgab. Firefox akzeptiert das bei <code>Array.sort()</code> oder castet das; Chrome nicht. Vergleichsfunktion gefixt.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742641#m1742641 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-13T23:07:09Z 2019-02-13T23:07:09Z Tabelle einklappbar <p>@@JürgenB</p> <blockquote> <blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/KJBrEP" lang="en" rel="noopener noreferrer">Web components: sortable table, revisited</a> Aber ich sehe, du legst das Dreieck in ein ::after, z.Zt. auch mein Favorit.</p> </blockquote> </blockquote> <p>Und jetzt auch richtig herum: bei aufsteigender Sortierung A→Z bzw. alt→neu zeigt das Dreieck nach oben.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742643#m1742643 JürgenB https://www.j-berkemeier.de 2019-02-13T23:22:31Z 2019-02-13T23:22:31Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p>Sehen die Tabellenköpfe nicht genügend nach Buttons aus?</p> <p>Ich hab das Hintergrundgrau jetzt etwas dunkler gemacht.</p> </blockquote> <p>nein, das sieht wie eine Tabellenüberschriftszeile aus. Nur beim Focus mit der TAB-Taste sieht es wegen des Rahmens klickbar aus.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742642#m1742642 JürgenB https://www.j-berkemeier.de 2019-02-13T23:18:13Z 2019-02-13T23:18:13Z Tabelle einklappbar <p>Hallo Gunnar,</p> <p>jetzt gehts, das FF-Update ist gerade erst gekommen.</p> <p>Aber bei dir sieht man auch noch nicht, das die th klickbar sind.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742646#m1742646 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-14T07:02:52Z 2019-02-14T07:04:17Z Tabelle einklappbar <p>Hallo JürgenB,</p> <blockquote> <p>Aber bei dir sieht man auch noch nicht, das die th klickbar sind.</p> </blockquote> <p>Ich würde in dem Fall die Buttons wie Links (inklusive border-bottom) gestalten:</p> <p>| ▼ <strong>Datum</strong> ▲</p> <p>Und die aktuelle Spalte in Textfarbe und lediglich die andere Sortierung im Linkstyle, dabei aber trotzdem den gesamten Button, besser das gesamte th interaktiv lassen.</p> <p>EDIT: Obwohl das ein Unterschied zu den anderen Spalten wäre</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742645#m1742645 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-14T07:01:53Z 2019-02-14T07:44:44Z Tabelle einklappbar <p>@@JürgenB</p> <blockquote> <blockquote> <p>Sehen die Tabellenköpfe nicht genügend nach Buttons aus? nein, das sieht wie eine Tabellenüberschriftszeile aus. Nur beim Focus mit der TAB-Taste sieht es wegen des Rahmens klickbar aus.</p> </blockquote> </blockquote> <p>Hm, wenn eine der Spaltenüberschriften so’n Dreieck hat, ist das Hinweis genug, dass die Tabelle nach dieser Spalte sortiert ist und dass man sie auch nach anderen Spalten sortieren kann?</p> <p>Im Finder sieht das auch so aus und ich denke, im Explorer unter Windows ähnlich:</p> <p><img src="/images/871d7a5a-da62-46ec-b770-954309c4d0fb.jpg" alt="" loading="lazy"></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742648#m1742648 JürgenB https://www.j-berkemeier.de 2019-02-14T07:39:45Z 2019-02-14T07:39:45Z Tabelle einklappbar <p>Hallo Gunnar,</p> <p>in meiner Version ist aber beim Start keine der Spalten sortiert. Daher hat auch keine Spalte das Symbol. Was hältst du von <a href="http://test.berkemeier.eu/TableSort_Beispiel.html" rel="nofollow noopener noreferrer">dieser Variante</a>?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742649#m1742649 JürgenB https://www.j-berkemeier.de 2019-02-14T07:42:01Z 2019-02-14T07:42:01Z Tabelle einklappbar <p>Hallo Mathias,</p> <p>unterstreichen bzw. border-bottom finde ich nicht so gut, da es ja auch sein kann, das die Spaltenüberschrift unterstrichen ist. Was hältst du von <a href="http://test.berkemeier.eu/TableSort_Beispiel.html" rel="nofollow noopener noreferrer">dieser Variante</a>?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742667#m1742667 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-14T10:36:24Z 2019-02-14T10:36:24Z Tabelle einklappbar <p>@@JürgenB</p> <blockquote> <p>in meiner Version ist aber beim Start keine der Spalten sortiert. Daher hat auch keine Spalte das Symbol. Was hältst du von <a href="http://test.berkemeier.eu/TableSort_Beispiel.html" rel="nofollow noopener noreferrer">dieser Variante</a>?</p> </blockquote> <p>Lädt auch nicht so richtig zum Draufclicken ein, IMHO.</p> <p>Wie man das gestaltet, hängt auch von der Zielgruppe der Anwendung ab. Für ein Admin-UI ist die von mir gewählte Darstellung sicher genügend. Auf einer Website für heterogenen Nutzerkreis mag das anders aussehen.</p> <p></p> <p>Das <code>title</code>-Attribut ist hier vielleicht ein nützlicher Zusatz (hab ich jetzt bei mir auch eingebaut), sollte aber nicht die alleinige Beschreibung der Funktion der Buttons sein. Ich hab das über visuell versteckten Text gelöst:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sort by title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">visually-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>sort by <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>mit den bekannten CSS-Angaben für <code>[visually-hidden]</code>.</p> <p></p> <p>Es macht durchaus Sinn, bei numerischen Werten (incl. Kalenderdaten) auf- und abwärts sortieren zu können. Bei Textspalten sehe ich den Sinn Z→A nicht.</p> <p><em>„Ich kann das Alphabet auch rückwärts aufsagen.“</em> —kein Nutzer, jemals</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742668#m1742668 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-14T10:43:45Z 2019-02-14T10:43:45Z Tabelle einklappbar <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Es macht durchaus Sinn, bei numerischen Werten (incl. Kalenderdaten) auf- und abwärts sortieren zu können. Bei Textspalten sehe ich den Sinn Z→A nicht.</p> <p><em>„Ich kann das Alphabet auch rückwärts aufsagen.“</em> —kein Nutzer, jemals</p> </blockquote> <p>In einer Liste von Städten möchte ich Informationen über Zwickau.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742673#m1742673 JürgenB https://www.j-berkemeier.de 2019-02-14T11:24:41Z 2019-02-14T11:24:41Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p>Es macht durchaus Sinn, bei numerischen Werten (incl. Kalenderdaten) auf- und abwärts sortieren zu können. Bei Textspalten sehe ich den Sinn Z→A nicht.</p> </blockquote> <p>beim Sortierer im Wiki sollte man nicht zu viel einbauen, da geht es ja auch ums Prinzip, Zugänglichkeit ist da wichtiger.</p> <p>Bei meinem „großen“ Sortierer kann man natürlich rauf und runter sortieren und über Klassenparameter kann man auch steuern, ob eine Spalte sortierbar ist.</p> <p>Auf unserer Mitarbeiterseite habe ich einfach alle Spalten sortierbar gelassen. Wer will, kann auch nach E-Mail-Adresse oder Telefonnummern sortieren.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742674#m1742674 Christian Kruse https://wwwtech.de/about 2019-02-14T11:30:08Z 2019-02-14T11:30:08Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p>Es macht durchaus Sinn, bei numerischen Werten (incl. Kalenderdaten) auf- und abwärts sortieren zu können. Bei Textspalten sehe ich den Sinn Z→A nicht.</p> <p><em>„Ich kann das Alphabet auch rückwärts aufsagen.“</em> —kein Nutzer, jemals</p> </blockquote> <p>Schön plakativ, aber unzutreffend.</p> <p>Umzusortieren ist eine häufig genutzte Abkürzung anstatt ewig zu scrollen und/oder zu blättern. Wenn es fehlt, werde ich danach gefragt.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742763#m1742763 Just try it! 2019-02-15T17:53:46Z 2019-02-15T17:53:46Z Tabelle einklappbar <blockquote> <p><em>„Ich kann das Alphabet auch rückwärts aufsagen.“</em> —kein Nutzer, jemals</p> </blockquote> <p>Habe das gerade getan. Ging zwar deutlich langsamer als vorwärts, aber ich kann es.</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742671#m1742671 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-14T10:54:18Z 2019-02-14T10:57:07Z Tabelle einklappbar <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>Bei Textspalten sehe ich den Sinn Z→A nicht.</p> <p><em>„Ich kann das Alphabet auch rückwärts aufsagen.“</em> —kein Nutzer, jemals</p> </blockquote> <p>In einer Liste von Städten möchte ich Informationen über Zwickau.</p> </blockquote> <p>Dann weißt du, dass Zwickau ziemlich weit unten steht und scrollst nach unten.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742675#m1742675 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-14T11:44:28Z 2019-02-14T11:44:28Z Tabelle einklappbar <p>@@Christian Kruse</p> <blockquote> <blockquote> <p><em>„Ich kann das Alphabet auch rückwärts aufsagen.“</em> —kein Nutzer, jemals Schön plakativ, aber unzutreffend.</p> </blockquote> </blockquote> <p>Ach ja?</p> <blockquote> <p>Umzusortieren ist eine häufig genutzte Abkürzung anstatt ewig zu scrollen und/oder zu blättern.</p> </blockquote> <p>Ich würde denken, dass man schneller zu Quedlinburg kommt, indem man runterscrollt und Q wie gewohnt nach P und vor R findet anstatt die Sortierung umzukehren und dann verwirrt zu sein, dass Q nach R und vor P eingeordnet ist.</p> <p>Meine Vermutung. Nutzertests würden mich umstimmen. Ungetestete anderslautende Vermutungen nicht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742843#m1742843 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-17T17:52:26Z 2019-02-17T17:52:26Z Tabelle einklappbar <p>@@Christian Kruse</p> <blockquote> <p>Umzusortieren ist eine häufig genutzte Abkürzung anstatt ewig zu scrollen und/oder zu blättern. Wenn es fehlt, werde ich danach gefragt.</p> </blockquote> <p>Ja, und?</p> <p>Gib Nutzern nicht das, was sie <em>wollen</em>, sondern das, was sie <em>brauchen!</em></p> <p>Siehe:</p> <ul> <li><a href="https://www.invisionapp.com/inside-design/dont-design-what-users-want/" rel="nofollow noopener noreferrer">Don’t design what users want</a></li> <li><a href="https://www.atfront.ch/blog/2014/04/30/nutzerexperimente-prototyping/" rel="nofollow noopener noreferrer">Nutzer wissen nicht was sie wollen</a></li> </ul> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742676#m1742676 Christian Kruse https://wwwtech.de/about 2019-02-14T11:47:46Z 2019-02-14T11:47:46Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p>Ich würde denken, dass man schneller zu Quedlinburg kommt, indem man runterscrollt und Q wie gewohnt nach P und vor R findet anstatt die Sortierung umzukehren und dann verwirrt zu sein, dass Q nach R und vor P eingeordnet ist.</p> </blockquote> <p>Noch schneller kommt man da hin, indem man Cmd+f drückt und „Qued“ eintippt. Macht aber halt keiner.</p> <blockquote> <p>Meine Vermutung. Nutzertests würden mich umstimmen. Ungetestete anderslautende Vermutungen nicht.</p> </blockquote> <p>Ich habe keine Vermutung geäußert, sondern meine Erfahrungen mit meinen Nutzern. Wenn dir das nicht reicht, ist das natürlich OK und dein Bier, aber eine Vermutung ist das nicht.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742743#m1742743 sm 2019-02-15T11:51:46Z 2019-02-15T11:51:46Z Tabelle einklappbar <p>Bei großen Listen arbeite ich in der Tat IMMER so: absteigend sortieren statt ewig scrollen.</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742701#m1742701 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-14T23:33:18Z 2019-02-14T23:42:18Z Tabelle einklappbar <p>@@Christian Kruse</p> <blockquote> <blockquote> <p>Ich würde denken, dass man schneller zu Quedlinburg kommt, indem man runterscrollt und Q wie gewohnt nach P und vor R findet anstatt die Sortierung umzukehren und dann verwirrt zu sein, dass Q nach R und vor P eingeordnet ist.</p> </blockquote> <p>Noch schneller kommt man da hin, indem man Cmd+f drückt und „Qued“ eintippt. Macht aber halt keiner.</p> </blockquote> <p>Ah, da kommen wir dem Problem schon näher. Ein Nutzer will <em>eine ganz bestimmte</em> Tabellenzeile finden – und kennt die Suchfunktion seines Browsers nicht. Dann gilt es, <em>dieses</em> Problem zu lösen.</p> <p>Nutzer: Ich will so schnell wie möglich Quedlinburg in der Tabelle finden.<br> Techniker: Q ist in der zweiten Hälfte des Alphabets – dann biete ich dir halt an, rückwärts zu sortieren. </p> <p>Nein, das ist <em>nicht</em> die Lösung des Problems. Sortierung ist nicht die Lösung für eine Suche. Eine Suchfunktion ist die Lösung für eine Suche: entweder den Benutzer auf die browsereigene Suchfunktion hinweisen oder zusätzlich noch eine (einen Filter) anbieten.</p> <p>Eine Sortierung ist eher dazu da, einen Gesamtüberblick über alle Daten unter bestimmten Gesichtspunkten zu bekommen, bspw. einen zeitlichen Verlauf. Und den kann man wahlweise vorwärts oder rückwärts haben wollen. Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.</p> <blockquote> <blockquote> <p>Nutzertests würden mich umstimmen. Ungetestete anderslautende Vermutungen nicht.</p> </blockquote> <p>Ich habe keine Vermutung geäußert, sondern meine Erfahrungen mit meinen Nutzern. Wenn dir das nicht reicht, ist das natürlich OK und dein Bier, aber eine Vermutung ist das nicht.</p> </blockquote> <p>Ich sprach von <em>Test</em>. Darauf zu hören, was Nutzer sagen, was sie denken zu brauchen, ist kein Test. Darauf zu schauen, wie Nutzer wirklich arbeiten und welche Probleme dabei auftreten, das ist einer.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742771#m1742771 marctrix self@mhis.de https://www.mhis.de 2019-02-15T21:25:16Z 2019-02-15T21:25:16Z Tabelle einklappbar <p>Hej Christian,</p> <blockquote> <blockquote> <p>Ich würde denken, dass man schneller zu Quedlinburg kommt, indem man runterscrollt und Q wie gewohnt nach P und vor R findet anstatt die Sortierung umzukehren und dann verwirrt zu sein, dass Q nach R und vor P eingeordnet ist.</p> </blockquote> <p>Noch schneller kommt man da hin, indem man Cmd+f drückt und „Qued“ eintippt. Macht aber halt keiner.</p> </blockquote> <p>Entwickler, unter anderem ich. Ich gebe auch gerne solche Tipps auf Webseiten, in der Hoffnung, dass es sich rumspricht unter denen, die das mögen. Schön ist es ja erst, wenn jeder auf seine Art glücklich wird. Wer sortieren will, sollte das auch können. Cmd+F geht ja eh immer…</p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742703#m1742703 Christian Kruse https://wwwtech.de/about 2019-02-15T05:11:33Z 2019-02-15T05:11:33Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p>Ah, da kommen wir dem Problem schon näher. Ein Nutzer will <em>eine ganz bestimmte</em> Tabellenzeile finden – und kennt die Suchfunktion seines Browsers nicht.</p> </blockquote> <p>Zum Beispiel.</p> <blockquote> <p>Nutzer: Ich will so schnell wie möglich Quedlinburg in der Tabelle finden.<br> Techniker: Q ist in der zweiten Hälfte des Alphabets – dann biete ich dir halt an, rückwärts zu sortieren. </p> </blockquote> <p>Sei nicht so verdammt arrogant! Es gibt natürlich eine zusätzliche Suchfunktion, direkt über den Tabellen. Die nutzt nur keiner. Warum? Keine Ahnung, das können sie mir nicht beantworten.</p> <p>„Warum hast du nicht die Suchfunktion benutzt?“ „Ich weiss nicht…“</p> <blockquote> <p>Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.</p> </blockquote> <p>Der Trick ist seine User zu beobachten und dann zu fragen, warum sie so arbeiten wie sie arbeiten. Kann ich nur empfehlen </p> <blockquote> <blockquote> <blockquote> <p>Nutzertests würden mich umstimmen. Ungetestete anderslautende Vermutungen nicht.</p> </blockquote> <p>Ich habe keine Vermutung geäußert, sondern meine Erfahrungen mit meinen Nutzern. Wenn dir das nicht reicht, ist das natürlich OK und dein Bier, aber eine Vermutung ist das nicht.</p> </blockquote> <p>Ich sprach von <em>Test</em>. Darauf zu hören, was Nutzer sagen, was sie denken zu brauchen, ist kein Test. Darauf zu schauen, wie Nutzer wirklich arbeiten und welche Probleme dabei auftreten, das ist einer.</p> </blockquote> <p>Erstens habe ich nicht behauptet einen Test gemacht zu haben. Und zweitens ist das, was du beschreibst, kein Test, sondern eine Studie. Und davon hane ich schon diverse gemacht.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742736#m1742736 ursus contionabundo 2019-02-15T10:19:05Z 2019-02-15T10:19:05Z Tabelle einklappbar <blockquote> <p>Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf.</p> </blockquote> <p>Also, zumindest im Filmsystembrowser benutze ich die Sortierfunktionen sehr oft. Besonders wenn ich nicht ein, sondern eine Gruppe von Objekten suche, für die ich nicht etwa einen eigenen Ordner sondern einen Präfix im Name verwende. Das ist immer noch oft genug schneller als die Nutzung der Suchfunktion. Und oft will ich ja gar nicht einen bestimmtes Objekt, sondern die Gruppe sehen. Und manchmal hab ich vergessen, ob ich in CamelCase oder mit Trenn-zei_chen notiert habe.</p> <p>Und wenn ich dann etwas suche, was mit V beginnt, dann bin ich sehr glücklich, wenn ich mit einem Klick die Sortierung rumdrehen kann.</p> <p><strong>Was ich jetzt nicht verstehe:</strong></p> <p>Einerseits bist Du ein Verfechter der Zugänglichkeit. Andererseits lehnst Du hier eine Funktion ab, die nach meinem Ermessen auch dem bequemen Zugriff und damit letztendlich auch der Zugänglichkeit dient.</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742709#m1742709 JürgenB https://www.j-berkemeier.de 2019-02-15T06:55:02Z 2019-02-15T06:56:51Z Tabelle einklappbar <p>Hallo ihr Beiden,</p> <p>irgendwie verstehe ich die Diskussion um die Notwendigkeit einer Rückwärtssuche nicht. Die technische Umsetzung kostet kaum mehr, und ob der Besucher sie nutzt, z.B. durch einen zweiten Klick, ist doch ihm überlassen.</p> <p>Als Anbieter eines Tabellensortier-Scripts weiß ich nicht, auf welche Daten der Sortierer angewendet wird. Ich biete die Methoden an und der Seitenautor entscheidet, wie er sie nutzt, z.B. Rückwärtssuche beim ersten Klick oder Spalte nicht sortierbar. Aber bisher hat sich keiner gewünscht, die Rückwärtssuche zu unterdrücken.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742734#m1742734 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-15T09:02:52Z 2019-02-15T09:02:52Z Tabelle einklappbar <p>@@Christian Kruse</p> <blockquote> <blockquote> <p>Nutzer: Ich will so schnell wie möglich Quedlinburg in der Tabelle finden.<br> Techniker: Q ist in der zweiten Hälfte des Alphabets – dann biete ich dir halt an, rückwärts zu sortieren. </p> </blockquote> <p>Sei nicht so verdammt arrogant!</p> </blockquote> <p><em>Ich</em> bin arrogant?? Nein, die Arroganz liegt auf Seiten des Technikers, der meint, er könne auch UIs designen ohne jemanden zu fragen, der sich damit auskennt.</p> <blockquote> <p>Es gibt natürlich eine zusätzliche Suchfunktion, direkt über den Tabellen. Die nutzt nur keiner. Warum? Keine Ahnung, das können sie mir nicht beantworten.</p> </blockquote> <p>Genau das wäre die Aufgabe eines Designers: das herauszufinden. Und zu verbessern.</p> <blockquote> <p>Der Trick ist seine User zu beobachten und dann zu fragen, warum sie so arbeiten wie sie arbeiten.</p> </blockquote> <p>Ja. Aber das ist nur ein Teil des Tricks. Der zweite Teil ist, daraus Schlüsse zu ziehen. Und Nutzern Verbesserungen ihres Arbeitsablaufs anzubieten. Auf andere Wege kommen Nutzer eher nicht; es bringt also nicht unbedingt was zu fragen: was wollt ihr?</p> <p><em>„Wenn ich die Menschen gefragt hätte, was sie wollen, hätten sie gesagt: schnellere Pferde.“</em> —Henry Ford (Autobauer)</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Nutzertests würden mich umstimmen. Erstens habe ich nicht behauptet einen Test gemacht zu haben.</p> </blockquote> </blockquote> </blockquote> </blockquote> <p>’nuff said. </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742712#m1742712 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-15T07:06:30Z 2019-02-15T07:06:30Z Tabelle einklappbar <p>Hallo JürgenB,</p> <blockquote> <p>Als Anbieter eines Tabellensortier-Scripts weiß ich nicht, auf welche Daten der Sortierer angewendet wird. Ich biete die Methoden an und der Seitenautor entscheidet, wie er sie nutzt, z.B. Rückwärtssuche beim ersten Klick oder Spalte nicht sortierbar. Aber bisher hat sich keiner gewünscht, die Rückwärtssuche zu unterdrücken.</p> </blockquote> <p>Es wäre auch so gar nicht sinnvoll, die Möglichkeiten der Benutzer einzuschränken.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742721#m1742721 Christian Kruse https://wwwtech.de/about 2019-02-15T07:32:18Z 2019-02-15T07:32:18Z Tabelle einklappbar <p>Hallo JürgenB,</p> <blockquote> <p>irgendwie verstehe ich die Diskussion um die Notwendigkeit einer Rückwärtssuche nicht.</p> </blockquote> <p>Ich wollte nicht darüber diskutieren. Ich wollte darlegen, dass es User gibt, die sie nutzen wollen. Die Diskussion ging erst los, als Gunnar davon ausging, ich sei zu blöd um auf die offensichtliche Lösung zu kommen.</p> <blockquote> <p>Die technische Umsetzung kostet kaum mehr, und ob der Besucher sie nutzt, z.B. durch einen zweiten Klick, ist doch ihm überlassen.</p> </blockquote> <p>Ja. Eben.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742728#m1742728 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-15T08:20:36Z 2019-02-15T08:20:36Z Tabelle einklappbar <p>@@Matthias Apsel</p> <blockquote> <p>Es wäre auch so gar nicht sinnvoll, die Möglichkeiten der Benutzer einzuschränken.</p> </blockquote> <p>In Gegenteil: es ist sinnvoll. Funktionen, welche die Nutzer zur Erfüllung ihrer Aufgaben nicht unterstützen, sondern gar davon ablenken, haben im Nutzerinterface nichts zu suchen.</p> <p>Und das allgemein, nicht nur speziell für die Frage, ob alphabetisch rückwärts zielführend ist oder nicht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742729#m1742729 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-15T08:28:03Z 2019-02-15T08:28:03Z Tabelle einklappbar <p>@@Christian Kruse</p> <blockquote> <p>Die Diskussion ging erst los, als Gunnar davon ausging, ich sei zu blöd um auf die offensichtliche Lösung zu kommen.</p> </blockquote> <p>Könntest du versuchen, nicht jede fachliche Diskussion persönlich zu nehmen? Danke.</p> <blockquote> <blockquote> <p>Die technische Umsetzung kostet kaum mehr, und ob der Besucher sie nutzt, z.B. durch einen zweiten Klick, ist doch ihm überlassen.</p> </blockquote> <p>Ja. Eben.</p> </blockquote> <p>Eben nicht. Siehe meine Antwort an Matthias.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742731#m1742731 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-15T08:38:23Z 2019-02-15T08:38:23Z Tabelle einklappbar <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <p>Es wäre auch so gar nicht sinnvoll, die Möglichkeiten der Benutzer einzuschränken.</p> </blockquote> <p>In Gegenteil: es ist sinnvoll. Funktionen, welche die Nutzer zur Erfüllung ihrer Aufgaben nicht unterstützen, sondern gar davon ablenken, haben im Nutzerinterface nichts zu suchen.</p> </blockquote> <p>Ich fände es zumindest befremdlich, wenn in einer Tabelle nur nach einigen Spalten sortiert werden könnte.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742732#m1742732 JürgenB https://www.j-berkemeier.de 2019-02-15T08:46:30Z 2019-02-15T08:46:30Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <p>In Gegenteil: es ist sinnvoll. Funktionen, welche die Nutzer zur Erfüllung ihrer Aufgaben nicht unterstützen, sondern gar davon ablenken, haben im Nutzerinterface nichts zu suchen.</p> </blockquote> <p>und wer entscheidet, was „die Nutzer zur Erfüllung ihrer Aufgaben nicht unterstütz(en)t“? Der Scriptprogrammierer, der Seitenautor, der Seitenbesucher, …?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742730#m1742730 Christian Kruse https://wwwtech.de/about 2019-02-15T08:38:03Z 2019-02-15T08:38:03Z Tabelle einklappbar <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>Die Diskussion ging erst los, als Gunnar davon ausging, ich sei zu blöd um auf die offensichtliche Lösung zu kommen.</p> </blockquote> <p>Könntest du versuchen, nicht jede fachliche Diskussion persönlich zu nehmen? Danke.</p> </blockquote> <p>Dann arbeite an deiner Ausdrucksweise?</p> <blockquote> <blockquote> <p>Nutzer: Ich will so schnell wie möglich Quedlinburg in der Tabelle finden.<br> Techniker: Q ist in der zweiten Hälfte des Alphabets – dann biete ich dir halt an, rückwärts zu sortieren. </p> </blockquote> </blockquote> <p>Ich hatte vorher berichtet, dass die User danach <strong>fragen</strong>, wenn das Feature fehlt:</p> <blockquote> <p>Wenn es fehlt, werde ich danach gefragt.</p> </blockquote> <p>Und du ziehst es trotzdem vor die schlechtestmögliche Auslegung zu wählen und das „Techniker haben User-Bedüfnisse nicht im Blick“-Narrativ zu füttern. Inwiefern wundert es dich, dass mich das anpisst?</p> <blockquote> <blockquote> <blockquote> <p>Die technische Umsetzung kostet kaum mehr, und ob der Besucher sie nutzt, z.B. durch einen zweiten Klick, ist doch ihm überlassen.</p> </blockquote> <p>Ja. Eben.</p> </blockquote> <p>Eben nicht. Siehe meine Antwort an Matthias.</p> </blockquote> <p>Du hast Recht mit dem, was du Matthias geantwortet hast. Du hast unrecht mit der Auslegung, dass die umgekehrte alphabetische Sortierung eine Ablenkung darstellt. Das Gegenteil ist der Fall.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742735#m1742735 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-15T09:06:49Z 2019-02-15T09:06:49Z Tabelle einklappbar <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Nein, die Arroganz liegt auf Seiten des Technikers, der meint, er könne auch UIs designen ohne jemanden zu fragen, der sich damit auskennt.</p> </blockquote> <p>Wie stellst du dir das denn im Ernstfall vor?</p> <blockquote> <blockquote> <p>Es gibt natürlich eine zusätzliche Suchfunktion, direkt über den Tabellen. Die nutzt nur keiner. Warum? Keine Ahnung, das können sie mir nicht beantworten.</p> </blockquote> <p>Genau das wäre die Aufgabe eines Designers: das herauszufinden. Und zu verbessern.</p> </blockquote> <p>Wie geht das, außer indem man die Nutzer fragt?</p> <blockquote> <p>Ja. Aber das ist nur ein Teil des Tricks. Der zweite Teil ist, daraus Schlüsse zu ziehen. Und Nutzern Verbesserungen ihres Arbeitsablaufs anzubieten. Auf andere Wege kommen Nutzer eher nicht; es bringt also nicht unbedingt was zu fragen: was wollt ihr?</p> </blockquote> <p>Und ob das wirklich den Workflow verbessert, findest du wie raus?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742742#m1742742 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-15T11:37:29Z 2019-02-15T11:37:29Z Tabelle einklappbar <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>Nein, die Arroganz liegt auf Seiten des Technikers, der meint, er könne auch UIs designen ohne jemanden zu fragen, der sich damit auskennt.</p> </blockquote> <p>Wie stellst du dir das denn im Ernstfall vor?</p> </blockquote> <p>Einen Designer beauftragen/mit einem Designer zusammenarbeiten, wenn man nicht selbst Designer und Software-/Webentwickler in Personalunion ist.</p> <blockquote> <blockquote> <blockquote> <p>Es gibt natürlich eine zusätzliche Suchfunktion, direkt über den Tabellen. Die nutzt nur keiner. Warum? Keine Ahnung, das können sie mir nicht beantworten.</p> </blockquote> <p>Genau das wäre die Aufgabe eines Designers: das herauszufinden. Und zu verbessern.</p> </blockquote> <p>Wie geht das, außer indem man die Nutzer fragt?</p> </blockquote> <p>Nutzer<strong>tests</strong>.</p> <p>(Da testet man natürlich nicht Nutzer, sondern seine Anwendung.)</p> <blockquote> <blockquote> <p>Ja. Aber das ist nur ein Teil des Tricks. Der zweite Teil ist, daraus Schlüsse zu ziehen. Und Nutzern Verbesserungen ihres Arbeitsablaufs anzubieten. Auf andere Wege kommen Nutzer eher nicht; es bringt also nicht unbedingt was zu fragen: was wollt ihr?</p> </blockquote> <p>Und ob das wirklich den Workflow verbessert, findest du wie raus?</p> </blockquote> <p>Durch Nutzertests. Das können z.B. A/B-Tests sein.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742737#m1742737 Auge 2019-02-15T10:22:39Z 2019-02-15T10:22:39Z Tabelle einklappbar <p>Hallo</p> <blockquote> <p><strong>Was ich jetzt nicht verstehe:</strong></p> <p>Einerseits bist Du ein Verfechter der Zugänglichkeit. Andererseits lehnst Du hier eine Funktion ab, die nach meinem Ermessen auch dem bequemen Zugriff und damit letztendlich auch der Zugänglichkeit dient.</p> </blockquote> <p>Tja, für ihn ist es halt undenkbar, dass eine Sortierung nach Alphabet für irgendwen™️ sinnvoll sein kann. Und da nicht sein kann, was nicht sein darf …</p> <p>kopfschüttelnd, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742738#m1742738 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-15T10:46:02Z 2019-02-15T10:46:02Z Tabelle einklappbar <p>@@Auge</p> <blockquote> <blockquote> <p>Andererseits lehnst Du hier eine Funktion ab</p> </blockquote> </blockquote> <p>Ach tu ich das?</p> <blockquote> <p>Tja, für ihn ist es halt undenkbar, dass eine Sortierung nach Alphabet für irgendwen™️ sinnvoll sein kann.</p> </blockquote> <p>Was ich sagte:</p> <ul> <li> <p>„Bei Textspalten <strong>sehe ich</strong> den Sinn Z→A nicht.“</p> </li> <li> <p>„<strong>Ich</strong> würde denken, … <strong>Meine Vermutung.</strong>“</p> </li> <li> <p>„Für eine alphabetische Sortierung rückwärts <strong>sehe ich</strong> keinen Bedarf.“</p> </li> </ul> <p>Und jetzt kommt gleich wieder einer um die Ecke und sagt, dass immer der Sender Schuld ist, ween der Empfänger das herausliest, was er lesen will …</p> <blockquote> <p>kopfschüttelnd, Auge</p> </blockquote> <p>Da schüttel ich mit.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742739#m1742739 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-15T10:54:04Z 2019-02-15T10:54:04Z Tabelle einklappbar <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Was ich sagte:</p> <ul> <li> <p>„Bei Textspalten <strong>sehe ich</strong> den Sinn Z→A nicht.“</p> </li> <li> <p>„<strong>Ich</strong> würde denken, … <strong>Meine Vermutung.</strong>“</p> </li> <li> <p>„Für eine alphabetische Sortierung rückwärts <strong>sehe ich</strong> keinen Bedarf.“</p> </li> </ul> </blockquote> <p>Aber auch <a href="https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742667#m1742667" rel="noopener noreferrer"><strong>kein Nutzer, jemals</strong></a></p> <blockquote> <p>Und jetzt kommt gleich wieder einer um die Ecke und sagt, dass immer der Sender Schuld ist, ween der Empfänger das herausliest, was er lesen will …</p> </blockquote> <p>Nö.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742740#m1742740 Auge 2019-02-15T10:59:50Z 2019-02-15T10:59:50Z Tabelle einklappbar <p>Hallo</p> <blockquote> <blockquote> <p>Tja, für ihn ist es halt undenkbar, dass eine Sortierung nach Alphabet für irgendwen™️ sinnvoll sein kann.</p> </blockquote> <p>Was ich sagte:</p> <ul> <li> <p>„Bei Textspalten <strong>sehe ich</strong> den Sinn Z→A nicht.“</p> </li> <li> <p>„<strong>Ich</strong> würde denken, … <strong>Meine Vermutung.</strong>“</p> </li> <li> <p>„Für eine alphabetische Sortierung rückwärts <strong>sehe ich</strong> keinen Bedarf.“</p> </li> </ul> </blockquote> <p>Du kannst hier wieder und wieder die Zitate vom <strong>ich</strong> rauskopieren, alles andere, was du um das <strong>ich</strong> herum schreibst, sagt eindeutig nicht <strong>ich</strong>.</p> <blockquote> <p>Und jetzt kommt gleich wieder einer um die Ecke und sagt, dass immer der Sender Schuld ist, ween der Empfänger das herausliest, was er lesen will …</p> </blockquote> <p>Tja Pech. Du formulierst halt so, dass deine Meinung als allein seligmachende Wahrheit da steht. Das ist sie halt nicht. Komm' mit dem Echo klar.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742741#m1742741 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-15T11:20:48Z 2019-02-15T11:20:48Z Tabelle einklappbar <p>@@Matthias Apsel</p> <blockquote> <p>Aber auch <a href="https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742667#m1742667" rel="noopener noreferrer"><strong>kein Nutzer, jemals</strong></a></p> </blockquote> <p>In anderem Zusammenhang.</p> <p>Den Unterschied zwischen <em>„Für eine alphabetische Sortierung rückwärts sehe ich keinen Bedarf“</em> und <em>„Ich kann das Alphabet auch rückwärts aufsagen“</em> muss ich nicht erläutern?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742772#m1742772 marctrix self@mhis.de https://www.mhis.de 2019-02-15T21:33:42Z 2019-02-15T21:33:42Z Tabelle einklappbar <p>Hej sm,</p> <blockquote> <p>Bei großen Listen arbeite ich in der Tat IMMER so: absteigend sortieren statt ewig scrollen.</p> </blockquote> <p>Ich auch. Besonders wenn die auch noch über mehrere Seiten aufgeteilt sind. Außerdem ärgere ich mich, wenn ich nach zwei von drei Spalten sortieren, ich aber nach der einzigen sortieren möchte, nach der ich nicht sortieren kann.</p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742776#m1742776 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-16T08:15:07Z 2019-02-16T08:15:07Z Tabelle einklappbar <p>@@sm</p> <blockquote> <p>Bei großen Listen arbeite ich in der Tat IMMER so: absteigend sortieren statt ewig scrollen.</p> </blockquote> <p>Gegen ewig scrollen ist ein seiteninterner Link angebracht, der einen ans Ende der Tabelle/Liste führt. Dann kann man von Z hochscrollen und findet Q wie gewohnt zwischen P und R. Meine Vermutung ist, dass das einfacher ist als verkehrtherum zu sortieren und in Gedanken das Alphabet umkehren zu müssen. Die verkehrtrumme Sortierung betrifft ja nicht nur den ersten Buchstaben.</p> <p>Die Hypothese wäre in einem Nutzertest zu prüfen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742765#m1742765 Tabellenkalk 2019-02-15T18:35:17Z 2019-02-15T18:35:17Z Tabelle einklappbar <p>Hallo,</p> <blockquote> <blockquote> <p><em>„Ich kann das Alphabet auch rückwärts aufsagen.“</em> —kein Nutzer, jemals</p> </blockquote> <p>Habe das gerade getan. Ging zwar deutlich langsamer als vorwärts, aber ich kann es.</p> </blockquote> <p>Ja, Glückwunsch!<br> Aber bist <em>du</em> jemals Nutzer?</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742777#m1742777 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-16T08:23:31Z 2019-02-16T08:23:31Z Tabelle einklappbar <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Gegen ewig scrollen ist ein seiteninterner Link angebracht, der einen ans Ende der Tabelle/Liste führt.</p> </blockquote> <p>Möglichkeiten gibt es viele. Zum Beispiel auch eine Leiste mit dem Alphabet, das gleich zum richtigen Anfangsbuchstaben führt. Das geht aber nur, wenn es nur ein Sortierkriterium gibt, wie etwa bei der Kontaktliste im Handy. Oder auch bei <a href="http://selfhtml.apsel-mv.de/java-javascript/" rel="nofollow noopener noreferrer">http://selfhtml.apsel-mv.de/java-javascript/</a>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742785#m1742785 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-02-16T09:48:04Z 2019-02-16T09:48:04Z Tabelle einklappbar <p>@@Matthias Apsel</p> <blockquote> <p>Möglichkeiten gibt es viele.</p> </blockquote> <p>Ja. Und die gilt es zu finden und gegeneinander abzuwägen. Vorher muss man natürlich überlegen, was das <em>eigentliche</em> Problem ist, was gelöst werden soll. Das nennt sich Design.</p> <p>Das erfordert aber etwas Denkaufwand. Mal schnell auf Minus drücken geht so viel einfacher.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/feb/12/tabelle-einklappbar/1742790#m1742790 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-02-16T12:04:56Z 2019-02-16T17:00:15Z Tabelle einklappbar <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <p>Möglichkeiten gibt es viele.</p> </blockquote> <p>Ja. Und die gilt es zu finden und gegeneinander abzuwägen.</p> </blockquote> <p>Warum gegeneinander? Warum nicht miteinander?</p> <blockquote> <p>Vorher muss man natürlich überlegen, was das <em>eigentliche</em> Problem ist, was gelöst werden soll. Das nennt sich Design.</p> <p>Das erfordert aber etwas Denkaufwand. Mal schnell auf Minus drücken geht so viel einfacher.</p> </blockquote> <p>Eins der Minusse ist von mir. Ich bleibe dabei: Es ist nicht nutzerfreundlich, wenn in einer Tabelle nur einige Spalten sortierbar sind. Dass es auch weitere und wahrscheinlich auch bessere Möglichkeiten gibt (Suchfunktion), ist unbestritten. Dennoch ist mir die Antwort „Dann musst der Nutzer eben nach unten scrollen“<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>, jedes Minus wert.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Ich weiß, du hast geschrieben: „Dann weißt du, dass Zwickau ziemlich weit unten steht und scrollst nach unten.“ <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section>