MediaWiki Diskussion:Popup.css
javascript und popup-link-Formatierung
Hallo Andreas, ich habe common.js etc. refaktoriert, die SearchTools ausgelagert, etc. Ein paar Codeteile sind von jKey nach Common gewandert nachdem ich das Resource-Problem heute einmal angepackt habe. Nicht schwer, aber es kostet alles Zeit... Jetzt gibt es ein gemeinsames resource object und Zugriffslogik und alle späteren scripts können Ressourcen ergänzen. -- Schaffst du weiter an den popups zu feilen. Mir gefällt die Link-Formatierung noch nicht, das stört m.E. den "normalen" Lesefluss. Normalerweise haben wir Links auch gar nicht unterstrichen, so dass die Help-Links deutlicher herausstechen als "echte". Kann man vielleicht einfach eine andere Linkfarbe nehmen, möglichst unauffällig? Man bekommt das mit den popups ja schnell mit, das Ziel muss eher sein, dass man sehen kann, wo man sonst noch hovern = popup kann, bzw. wo man den Mauscursor lieber nicht hinhält. Ich danke Dir! --Gregor Hagedorn 23:49, 6. Jun. 2010 (CEST) -- Nachtrag: ich habe bei den cluetips die Anzeige des Titels (aus dem title attribute) unterdrückt, da dies immer eine Duplikation war und das Fenster etwas größer gemacht. Was ich noch nicht ganz verstehe ist, wo font und font-size definiert sind - sie sollten m.E. nur so groß wie der Normaltext sein. Was denkst du? - G.
- zu den cluetips vielleicht dann im HTLM-Abbr Stil? --Andreas Plank 10:25, 7. Jun. 2010 (CEST)
- Verstehe ich nicht, tut mir leid :-( --Gregor Hagedorn 10:28, 7. Jun. 2010 (CEST)
- ich meine Lesbarkeit via CSS à la HTLM-Abbr Stil… --Andreas Plank 10:32, 7. Jun. 2010 (CEST)
- Lesbarkeit der Links die cluetips erzeugen? Ja. Aber dein abbr Stil ist auf meinem Bildschirm (fast) identisch mit dem popup, also mit dotted underline (aber ohne Farbe). Wo ist der css: abbr-style eigentlich definiert? Ist bei mir was nicht aktuell? --Gregor Hagedorn 10:36, 7. Jun. 2010 (CEST)
- Wünschenswerte Verbesserungen aus meiner Sicht: 1. Der Link in der Seite sollte unauffälliger Formatiert werden. 2. Die Fontgröße im Popup-Layer angepasst werden. 3. Das endgültige Popup Window vom Layer aus gestartet werden können, dann mit vollem Wiki-Style inkl. Sidebar. 4. Am Ende den cluetip code kürzen um alles was wir nicht verwenden (runde Ecken, etc.). Option "local" ist vielleicht noch mal irgendwann brauchbar? --Gregor Hagedorn 10:36, 7. Jun. 2010 (CEST)
- zu 1) ich finde den abbr-style aber eigentlich genügend (also nur dotted underline und nichts weiter) – ist ja ebenfalls für hover konzipiert worden – und wenn 3) vom Layer aus gestartet wird, was ich in Ordnung finde, dann braucht es auch keinen echten Link zum draufdrücken im Fließtext, oder? Denn das popup würde das ja dann anbieten. 2) i.O. --Andreas Plank 10:51, 7. Jun. 2010 (CEST)
- zu 1) OK, hier haben wir unterschiedliches Empfinden. Für mich ist die Unterstreichung eine sehr starke Betonung, und ich denke wenn man die Sätze liest, betont man automatisch die unterstrichenen Wörter. Im Fischer/Adler Exk.-flora Österreich, wird Unterstreichung für die wichtigen Merkmale verwendet, so ähnlich lese ich sie Sätze auch. Da dies aber keinen Sinn ergibt, fällt es mir schwer, den Schlüsselmerkmalen zu folgen. Da du border statt underline nimmst, wird es sogar noch stärker betont. Kannst du einmal probieren im Grundzustand nur Farbe #002050 oder #002058 zu nehmen, und erst bei hover dotted underline? -- zu 3) Doch, der Link ist wichtig; ich sehe du hast in gerade entfernt. Auf vielen Mobilgeräten wird javascript nicht ausgeführt, und deshalb sollte alles einen javascript-freien Fallback haben. Also das Template sollte noch einen (wiki-)Link erzeugen; was die Popup-ini danach macht ist eher egal (ich würde eigentlich nicht abbrev nehmen, da dies dann niemals mehr anderweitig verwendet sein darf - oder wäre es dann immer als popup sinnvoll?). --Gregor Hagedorn 13:53, 7. Jun. 2010 (CEST)
- Mmmh, danke für den Versuch mit der Linkfarbe. Was denkst du? Ich bin nicht so zufrieden. Auf Sabines Monitor sah das #002050 gut unterscheidbar aus, bei mir ist es den normalen Links schon wieder sehr ähnlich. Eine Alternative wäre eine ganz andere Farbe zu nehmen, z.B. #005828 ??? --Gregor Hagedorn 17:25, 7. Jun. 2010 (CEST)
- Laßt es blau, wird sonst zu bunt. Der Nutzer weiß: „blau ist Link hier gibt es Weiteres“. Daß dann ein popup kommt (wie schnell auch immer), dürfte den Nutzer – denke ich – nicht ab- oder verschrecken. Bin allerdings für normales Link-blau #0645ad, das #002050 kann ich komischerweise unter Windoof kaum sehen, wohl aber unter Linux (???). Habe openSpeed mal auf 5 gesetzt. Die Popup-Titel-Links funktionieren noch nicht, es wird nur der erste Popup-Link aus der Wiki-Seite extrahiert, aber nicht der aktuelle (irgendwas mit this? oder onActivate:function(e) {… return true;}). Irgendwie habe ich das mt dem this noch nicht ganz vertanden. Nachtrag: irgendwas mit hover klappt noch nicht perfekt: das Popup kommt auch hinter dem eigentlichen Link, obwohl nur Text unter der Maus ist und kein Link… --Andreas Plank 18:35, 7. Jun. 2010 (CEST)
- zu 1) OK, hier haben wir unterschiedliches Empfinden. Für mich ist die Unterstreichung eine sehr starke Betonung, und ich denke wenn man die Sätze liest, betont man automatisch die unterstrichenen Wörter. Im Fischer/Adler Exk.-flora Österreich, wird Unterstreichung für die wichtigen Merkmale verwendet, so ähnlich lese ich sie Sätze auch. Da dies aber keinen Sinn ergibt, fällt es mir schwer, den Schlüsselmerkmalen zu folgen. Da du border statt underline nimmst, wird es sogar noch stärker betont. Kannst du einmal probieren im Grundzustand nur Farbe #002050 oder #002058 zu nehmen, und erst bei hover dotted underline? -- zu 3) Doch, der Link ist wichtig; ich sehe du hast in gerade entfernt. Auf vielen Mobilgeräten wird javascript nicht ausgeführt, und deshalb sollte alles einen javascript-freien Fallback haben. Also das Template sollte noch einen (wiki-)Link erzeugen; was die Popup-ini danach macht ist eher egal (ich würde eigentlich nicht abbrev nehmen, da dies dann niemals mehr anderweitig verwendet sein darf - oder wäre es dann immer als popup sinnvoll?). --Gregor Hagedorn 13:53, 7. Jun. 2010 (CEST)
- zu 1) ich finde den abbr-style aber eigentlich genügend (also nur dotted underline und nichts weiter) – ist ja ebenfalls für hover konzipiert worden – und wenn 3) vom Layer aus gestartet wird, was ich in Ordnung finde, dann braucht es auch keinen echten Link zum draufdrücken im Fließtext, oder? Denn das popup würde das ja dann anbieten. 2) i.O. --Andreas Plank 10:51, 7. Jun. 2010 (CEST)
- Farbtests:
- #0645ad Normaler Wiki link -- #0B0080 Followed Wiki link
- #002050 Versuchsreihe 1 - #0645ad - #003050 Versuchsreihe 2 - #0B0080
- #002060 Versuchsreihe 1 - #0645ad - #003060 Versuchsreihe 2 - #0B0080
- #002070 Versuchsreihe 1 - #0645ad - #003070 Versuchsreihe 2 - #0B0080
- #002080 Versuchsreihe 1 - #0645ad - #003080 Versuchsreihe 2 - #0B0080
- #002090 Versuchsreihe 1 - #0645ad - #003090 Versuchsreihe 2 - #0B0080
- #0020A0 Versuchsreihe 1 - #0645ad - #0030A0 Versuchsreihe 2 - #0B0080
- #202050 Versuchsreihe 3 - #0645ad - #204050 Versuchsreihe 4 - #0B0080
- #202060 Versuchsreihe 3 - #0645ad - #204060 Versuchsreihe 4 - #0B0080
- #202070 Versuchsreihe 3 - #0645ad - #204070 Versuchsreihe 4 - #0B0080
- #202080 Versuchsreihe 3 - #0645ad - #204080 Versuchsreihe 4 - #0B0080
- #202090 Versuchsreihe 3 - #0645ad - #204090 Versuchsreihe 4 - #0B0080
- #2020A0 Versuchsreihe 3 - #0645ad - #2040A0 Versuchsreihe 4 - #0B0080
Können wir eine sichtbare, aber unauffällige Farbe finden? Ziel: zu wissen wo man Hilfe bekommen kann (bzw. mit der Maus nicht drüber darf). Oder ist wirklich der Normale Link der beste wie du meinst? Vielleicht wenn Hover Intent funktioniert? --Gregor Hagedorn 10:29, 8. Jun. 2010 (CEST)
- Du hast im Moment noch den #002058 drin. Gibt es eine Farbe oben die dir besser passend erscheint? --Gregor Hagedorn 20:43, 9. Jun. 2010 (CEST)
- Nein. Bin für keine farbliche Unterscheidung, also für normale Links #0645ad, da man die obigen Linkfarben nicht wirklich unterscheiden wird oder für Unterstreichung, weil echte Unterscheidung möglich. Die Farben sind mir zu indifferent oder lassen es zu bunt werden. Bin ja eher für so was wie den HTLM-Abbr Stil, weil echt unterscheidbar, und von Grund auf für Hover konzipiert – zu starke Hervorhebung hin oder her. Echte CSS dotted Unterstreichung gibt es nicht. Vielleicht sind ja noch mal verschiedene Gradient-Varianten zu überlegen(?) --Andreas Plank 18:10, 10. Jun. 2010 (CEST):
Popuptext (#000000)
Popuptext (#171719)
Popuptext (#2E2E32)
Popuptext (#45454B)
Popuptext (#5C5C64)
Popuptext (#73737D)
Popuptext (#8A8A96)
Popuptext (#A1A1AF)
Popuptext (#B8B8C8)
Popuptext (#CFCFE1)
Popuptext (#E6E6FA)
