search

TN03 / XH_split

CMSimple_XH with changed page splitting
3 stars 0 forks source link

Größere Flaggen für die Sprachauswahl #28

Open lck-git opened 7 years ago

lck-git commented 7 years ago

Ich schlage vor als Standard die größeren Flaggen mit XH_split auszuliefern, auch für CMSimple_XH wäre es sinnvoll. Die kleinen Flaggen sind für mobile Geräte einfach zu winzig.

frase-git commented 7 years ago

Vielleicht ein Vorschlag (GoSquared large 32x32): https://www.flag-sprites.com/de/

Oder besser: https://github.com/lipis/flag-icon-css Demo: http://flag-icon-css.lip.is/

cmb69 commented 7 years ago

Oder besser: https://github.com/lipis/flag-icon-css

SVG fände ich eigentlich ideal, aber da müsste für ältere Browser ein brauchbarer Fallback her – bei relativ kleinen Größen wird wohl der Alt-Text abgeschnitten.

frase-git commented 7 years ago

Ich denke, wir sollten langsam aufhören, auf die uralten Browser Rücksicht zu nehmen. So richtig verstehe ich aber nicht: "... wird der Alt-Text abgeschnitten ..." Wo? Wann? Wie?

Ich denke, die Flaggen durch die SVGs zu ersetzen, dürfte ziemlich easy sein - oder?

frase-git commented 7 years ago

https://github.com/cmsimple-xh/cmsimple-xh/blob/master/cmsimple/tplfuncs.php#L575-L606

Wenn die SVGs am richtigen Ort liegen, müsste man ja nur diese Funktion ändern?

cmb69 commented 7 years ago

Ich denke, wir sollten langsam aufhören, auf die uralten Browser Rücksicht zu nehmen.

Ich finde, auf einem alten Browser muss eine Website nicht gut aussehen, und fantastisch funktionieren. Aber zumindest benutzbar sollte sie sein. Der IE 8 hat wohl noch 3% Marktanteil, was ich zwar bedauerlich finde, aber nicht ändern kann.

https://github.com/cmsimple-xh/cmsimple-xh/blob/master/cmsimple/tplfuncs.php#L575-L606

Wenn die SVGs am richtigen Ort liegen, müsste man ja nur diese Funktion ändern?

Ja, das hatte ich schnell mal gemacht. Einfach png durch svg ersetzt, und dem img Element noch ein style Attribut mit width und height Eigenschaften verpasst. Dabei hatte ich mal 23x16 ausprobiert. Auf dem IE 8 wurde dann nur der untere Rand des "Bild nicht verfügbar"-Symbols angezeigt (eigentlich nur ein dicker Strich).

Vermutlich könnte man das Problem lösen, wenn das Bild gar nicht mehr als img erzeugt wird, sondern per CSS.

frase-git commented 7 years ago

Na ja, soooo einfach nun auch wieder nicht. Das CSS muss eingebunden werden. Der Aufruf erfolgt dann mit <span class="flag-icon flag-icon-XX"></span> wobei XX das Länder-Kürzel ist. Optional könnte man noch anbieten: <span class="flag-icon flag-icon-XX flag-icon-squared"></span> für quadratische Flaggen.

cmb69 commented 7 years ago

Das CSS muss eingebunden werden.

36.8 KB CSS für ein oder zwei Flaggen fände ich ein "bisschen" viel. Aber klar, der größte Teil des CSS könnte auch dynamisch nur für die nötigen Flaggen generiert werden.

<span class="flag-icon flag-icon-XX"></span>

Ginge auch <span class="flag-icon flag-icon-XX">XX</span> oder <span class="flag-icon flag-icon-XX"></span> XX?

frase-git commented 7 years ago

Denke schon, dass das ginge. Aber dann hast du Bild UND Text. Ich denke mal, das Bild wird wohl "$el" innerhalb des a-Tags. Alt und Title hat es da nicht - oder? Das müsste zum a-Tag ???

frase-git commented 7 years ago

Teste es doch mal. Und dann merge doch einfach mal alles Anstehende. Ist doch nur ein Test.

cmb69 commented 7 years ago

Teste es doch mal. Und dann merge doch einfach mal alles Anstehende.

Ich habe es mal in minimalisierter Form als PR #29 eingestellt. Das kann auch als Gesamtpaket herunter geladen werden.

Voraussetzung fürs Testen und Ausprobieren ist das Anlegen einer englischen Sprachseite und ein Template, das das languagemenu() anzeigt.

Ich selbst halte nichts von dieser Integration, da in älteren Browsern (IE <= 8) gar nichts mehr angezeigt wird, der Link aber funktionieren würde. Und selbst wenn man ältere Browser ignorieren würde, gäbe es Accessibility-Problem (evtl. könnte man das mit einem passenden aria- Attribut beheben), und bzgl. SEO ist es wohl auch suboptimal. Man könnte vermutlich noch mit JS tricksen, also zunächst nur Text ausgeben, dann SVG Support prüfen, und falls vorhanden, dann dynamisch das benötigte HTML erzeugen, aber ehrlich gesagt finde ich das totalen Overkill. Ein img mit passendem alt Attribut (alt beim span bringt nichts) ist einfach und funktioniert überall. Ich schau mal, ob das nicht doch mit einer SVG-Grafik zu bewerkstelligen ist.

frase-git commented 7 years ago

Danke Christoph. Probiert mit Gesamtpaket und mini1. Funktioniert. Mit CSS kann man es natürlich noch größer machen.

Zugänglichkeit: Genügt das Title-Attribut in diesem Fall nicht? Und für SEO nicht auch?

IE<9 würde ich tatsächlich ignorieren. Keinesfalls noch mit JS tricksen.

Falls das CSS "zu groß" ist, könnte man beim Anlegen von Sprachseiten ein Script laufen lassen, das das CSS nur mit den benötigten Sprachen schreibt. Im Paket müssten dann aber immer noch mind. 3 MB an Flaggenbildern vorhanden sein. (inkl. quadratische = 6 MB)

Falls du es mit einer SVG-Grafik versuchen willst: Es gibt auch SVG-Sprite. Dann sind die alten Browser aber auch draußen!?

Eigentlich gefällt mir deine Test-Version ganz gut. Es passt sich gut an die Schriftgröße an. Aber ich bin ja nur "eine Meinung" ;-)

cmb69 commented 7 years ago

Genügt das Title-Attribut in diesem Fall nicht? Und für SEO nicht auch?

Eigentlich sollte ein Bild, das eine Bedeutung hat (also kein rein dekorativer "Schnick-Schnack") immer auch ein alt Attribut haben, dass das Bild beschreibt. Dann kann jemand, der aus welchem Grund auch immer, keine Bilder sehen kann, dennoch den Inhalt grob erfassen. Ob moderne assistiver Technologie sich auch mit einem title zufrieden gibt, weiß ich nicht.

Jedenfalls sehe ich es so: wenn eine Website (nicht unbedingt Web-Applikation, wie z.B. das Backend von CMSimple_XH) mit Lynx benutzt werden kann, gut. Ansonsten kann es sehr teuer werden (entgangene Aufträge, Abmahnung wegen Diskriminierung, oder aufwendige Fallbacks um das zu verhindern).

Im Paket müssten dann aber immer noch mind. 3 MB an Flaggenbildern vorhanden sein.

Alle Flaggen müssen wir ja nicht ausliefern. Im Prinzip würden die 16 genügen, die auch jetzt schon in userfiles/images/flags ausgeliefert werden.

Falls du es mit einer SVG-Grafik versuchen willst: Es gibt auch SVG-Sprite. Dann sind die alten Browser aber auch draußen!?

Na ja, so wie ich es sehe, gibt es bei CMSimple_XH i.d.R. maximal 2-3 Sprachen; da ist die Notwendigkeit eines Sprites noch nicht so groß, und der Schuss kann sogar nach hinten losgehen, wenn man ein einziges Sprite für alle ausliefert. Und HTTP/2.0 macht Sprites sowieso überflüssig.

Grundsätzlich sieht man bei SVG auf älteren Browsern kein Bild, aber eben der alt Text sollte angezeigt werden – das genügt mir vollauf. Mein Problem ist halt, dass wenn das img recht klein skaliert wird, der alt Text abgeschnitten (oder erst gar nicht angezeigt) wird.

Vielleicht sollten wir die SVG-Variante einfach mal als Addon anbieten (wer will, kann es dann ja nutzen), und doch erst mal bei GIF bleiben oder zu PNG wechseln (ersteres hätte den Vorteil, dass auch animierte Flaggen verwendet werden können, wie auf Ralfs Website). SVG ist klasse, weil beliebig skaliert werden kann, ohne dass die Bildqualität sinkt, aber bei den Flaggen dürfte i.d.R. doch nur wenig skaliert werden (vielleicht max. 64x48 oder so, eher weniger). Und außerdem kann der Anwender die Icons ja auch schnell austauschen.

Aber ich bin ja nur "eine Meinung" ;-)

Ich auch. :-)

TN03 commented 7 years ago

Also ich halte vom PR https://github.com/TN03/XH_split/pull/29 auch nicht wirklich viel. Nicht wegen der fehlenden Unterstützung von alten Browsern. Vielmehr macht es die Sache meiner Meinung nach zu kompliziert, wenn der User doch eine andere Variante / ein anders Design bevorzugt. Leicht austauschbare Grafikdateien scheinen mir im Moment hier noch die bessere Variante zu sein. Vielleicht überlegen wir noch einmal, ob verschiedene Größen und dazu passende höhere Auflösungen nicht die bessere Alternative sind und versuchen dann auf der Basis ein paar Größen mit auszuliefern. Denkbar wäre auch die Möglichkeit dem Template bei der Auslieferung der Flaggen den Vorzug zu geben, wenn sie dort vorhanden sind. Die Core-Grafiken wären dann nur als Fallback anzusehen.

TN03 commented 7 years ago

@cmb69 OT: wie kommt man an so einen https://github.com/TN03/XH_split/archive/60a482d9658c7eea7e65ca3bca53487e64ff4dbc.zip Link? Muss man den selber mit der Id des PR zusammenbasteln?

cmb69 commented 7 years ago

OT: wie kommt man an so einen https://github.com/TN03/XH_split/archive/60a482d9658c7eea7e65ca3bca53487e64ff4dbc.zip

Du kannst über den PR zum Commit navigieren, und dort dann den <> Button ("Browse the repository at this point in the history") klicken, und dann über grünen Button "Clone or download" unter "Download ZIP" den URL kopieren.

cmb69 commented 7 years ago

Bisweilen stelle ich schon recht dümmlich an!

Hier geht es um eine Verbesserung der Darstellung für den Fall, dass diese vom Browser unterstützt wird. Schimpft sich auf neudeutsch "Progressive Enhancement" und kann in diesem Fall leicht per picture Element implementiert werden, siehe PR #30 (Download Komplettpaket).

Die wichtigsten modernen Browser kennen das picture Element und können SVG als Bild einbinden; IE (nicht Edge) und Opera Mini fallen halt auf das GIF zurück.

Der einzige Nachteil, den ich bisher entdecken kann, ist die nun per core.css festgelegte Bildgröße – da müsste halt in manchen Templates nachgebessert werden (alternativ siehe weiter unten).

Und dann bliebe immer noch reichlich Raum für Verbesserungen:

frase-git commented 7 years ago

flags.zip Das wird jetzt alles ein bisschen viel mit den Flaggen. Vielleicht gehen wir zurück zu den alten Pics. Habe mal PNGs in vier verschiedenen Größen bereitgestellt. 16x16px, 24x24px, 32x32px, 48x48px Fragt nicht, wo ich die her habe. Habe auch noch alle anderen Länder - aber hier mal nur auf die bisherigen 16 beschränkt. Entweder eine Config-Option zur Auswahl der Flaggengröße oder dem Browser überlassen: picture-Element und srcset. Was meint ihr?

Christophs Komplettpaket habe ich getestet. Da wird IMMER das kleine GIF genommen. So richtig habe ich das wohl noch nicht verstanden.

lck-git commented 7 years ago

Sorry, dass ich mich erst jetzt melde, aber momentan ist meine Zeit sehr knapp bemessen. Da habe ich ja wieder mal was angestellt, danke für eure Arbeit. Also ich meine auch, es so wie bisher zu belassen. Entweder gleich verschiedene Größen mit ausliefern oder im Ordner /images/flags einen Link setzen zum Download der Bilder. Besser wäre es natürlich dem Templateersteller die Möglicht zu bieten, die Images mit dem Template auszuliefern, passend zum Design, abgelegt im Template-Ordner unter images/flags. Das System schaut dann erst in diesen Ordner, sollten keine Bilder hinterlegt sein, so nimmt es die Standard-flags im Ordner userfiles/images/flags.

Habe mal PNGs in vier verschiedenen Größen bereitgestellt. 16x16px, 24x24px, 32x32px, 48x48px Fragt nicht, wo ich die her habe.

Bevor wir die verwenden, müsste das unbedingt abgeklärt werden (Lizenz). Das Thema Flaggen hatten wir auch schon mal im Forum angesprochen.

frase-git commented 7 years ago

http://www.icondrawer.com/flag-icons.php Von dort sind sie. Musste nur die Namen ändern, da sie nach Ländercodes benannt sind und wir brauchen Sprachcodes. Vielleicht kann man einen Deal machen wegen der Lizenz? Oder wir müssen tatsächlich den Link irgendwo hinsetzen.

frase-git commented 7 years ago

Vergesst den letzten Post. Wir wollen ja keine Flaggen kaufen.

Ich habe aus freien SVGs über Illustrator und Photoshop neue Flaggen-PNGs generiert und sie alle mit einem zarten Rahmen versehen. Die gehören jetzt also CMSimple_XH. ;-)

flags.zip

lck-git commented 7 years ago

:+1: Sehr schön! Der Mann ist gut, den behalten wir!

frase-git commented 7 years ago

Na, so viel Lob? Da muss ich gleich mal beim Metzger fragen, ob ich was dafür bekomme ;-) ;-) ;-)

Im Ernst: Ich habe mir die Flaggen nochmal angesehen und dabei festgestellt, dass einige falsche Sprachcodes haben. Ich meine die aktuelle XH-Flaggen, z.B. se statt sv und gr statt el ... Und da ich gerade dabei war, habe ich korrigiert und noch etwas mehr gemacht. Es sind 58 Stück geworden - Auswahl nach Bauchgefühl. Vielleicht werden wir noch internationaler?

Ich habe eine index.htm zur Ansicht beigelegt. Dort habe ich auch gleich noch eine Checkbox an jede Sprache angehängt. Ich stelle mir nämlich vor, dass es als Package auf der Flaggen-Download-Seite zusammengestellt werden können sollte. Das müsste nur noch jemand basteln. Wie die Integration in einer normalen Installation vor sich gehen soll (verschiedene Größen) ist mir auch noch nicht klar. flags-more.zip

cmb69 commented 7 years ago

Und da ich gerade dabei war, habe ich korrigiert und noch etwas mehr gemacht. Es sind 58 Stück geworden - Auswahl nach Bauchgefühl.

Danke! Die Flaggen gefallen mir gut, aber mir fehlt noch Copyright- und Lizenzangabe. :-)

cmb69 commented 7 years ago

Ich habe eine index.htm zur Ansicht beigelegt. Dort habe ich auch gleich noch eine Checkbox an jede Sprache angehängt. Ich stelle mir nämlich vor, dass es als Package auf der Flaggen-Download-Seite zusammengestellt werden können sollte. Das müsste nur noch jemand basteln.

Ich könnte das im "packager" integrieren, Würde das passen?

cmb69 commented 7 years ago

Wie die Integration in einer normalen Installation vor sich gehen soll (verschiedene Größen) ist mir auch noch nicht klar.

Mir auch nicht. Aber im Zweifel würde ich es erst mal einfach lassen, sprich der Webmaster lädt einen passenden Satz Flaggen aus dem richtigen Verzeichnis ins konfigurierte Flaggenverzeichnis hoch. wenn ihm die Standardflaggen nicht passen. EIn Templatedesigner kann mit einem Template dann einen oder mehrere solcher Sätze ausliefern, und der Webmaster kopiert halt von Hand.

cmb69 commented 7 years ago

Wie die Integration in einer normalen Installation vor sich gehen soll (verschiedene Größen) ist mir auch noch nicht klar.

Ludwigs Idee zuerst in einem Template-Unterordner nach Flaggen zu suchen, finde ich gut, aber da kam mir der Gedanke, dass man wohl die Flaggen in folgender Reihenfolge suchen könnte:

  1. Unterordner flags/ im konfigurierten Bilderordner (userfiles/images/flags/)
  2. Unterordner flags/ im Template-Ordner (templates/$template/flags/)
  3. Unterordner flags/ von core/ bzw. assets/ (core/flags/ bzw. assets/flags/)

Also: $user >$template > $core, ohne dass etwas an der falschen Stelle überschrieben werden muss (könnte Updates von Core und Templates erleichtern).

cmb69 commented 7 years ago

Ich habe aus freien SVGs über Illustrator und Photoshop neue Flaggen-PNGs generiert und sie alle mit einem zarten Rahmen versehen.

Ach so, wollen wir wirklich von GIF auf PNG wechseln? Bezüglicher des Komprimierungsverhältnisses sicher sinnvoll, völlig unproblematisch bezüglich der Kompatibilität, aber der Support für animierte PNG ist zumindest bislang sehr dürftig.

cmb69 commented 7 years ago

[…], völlig unproblematisch bezüglich der Kompatibilität, […]

Na ja, was Browser angeht schon, aber nicht bezüglich der Kompatibilität mit bestehenden CMSimple_XH Installationen. Wäre wohl eher was für XH 1.7. :-)

frase-git commented 7 years ago

Soooo. Manchmal sieht man den Wald vor lauter Bäumen nicht. Da probiert man rum und macht und vergisst die einfachen Lösungen. Wir wollen ja nicht alles umstellen sondern eigentlich nur Ludwigs Bitte nach größeren Flaggen nachkommen. Also keine PNGs sondern GIFs.

flags-gif.zip

cmb69 commented 7 years ago

Also keine PNGs sondern GIFs. flags-gif.zip

Danke!

Copyright- und Lizenzangabe: Nach meiner Meinung nicht nötig. Gibt es für die bisher verwendeten GIFs auch nicht. Wenn nötig: Die Flaggen wurden von einem User anonym zur Verfügung gestellt. Für alle Zwecke frei verwendbar ohne Herkunftsangabe.

Im Zweifel ist es besser, wenn die Info verfügbar ist; ich packe gerne noch ein kleines LICENSE mit ins Paket, und stelle es dann auf cmsimple-xh.org zum Download ein.

Natürlich auch gerne im Packager. (Der sollte irgendwo an prominenter Stelle verfügbar sein und etwas gestyled werden.)

Der Packager ist ein POC, das ich vor langem mal entworfen hatte, aber leider gab es nur wenig Feedback, obwohl ich im Forum von Zeit zu Zeit darauf hingewiesen hatte. Ich denke, ich setze mal ein Github Repo dafür auf, und dann kann man weiter sehen.

frase-git commented 7 years ago

Das ging ja wieder mal schnell und scheint die beste Lösung. Danke. Ich wollte zwar nicht - auch nich als frase - genannt werden, aber egal. Ein Problem sehe ich aber noch: Die alten Flaggen haben noch einen falschen Code (Griechisch und Schwedisch). Meine sind jetzt wirklich nach ISO 639-1. Wenn jemand in einer bestehenden Insatllation austauscht, wird er bei diesen beiden Sprachen entweder gar keine oder die alten Flaggen erhalten.

cmb69 commented 7 years ago

Die alten Flaggen haben noch einen falschen Code (Griechisch und Schwedisch). Meine sind jetzt wirklich nach ISO 639-1.

Grrr, ich dachte das Problem hätten wir längst gelöst. Früher war nämlich Tschechisch falsch (cz statt cs), aber das wurde dann für XH 1.6 (glaube ich) korrigiert. Das es da noch weitere Fehler gibt, war mir nicht bewusst. Das sollten wir dann aus Gründen der Abwärtskompatibilität aber erst bei XH 1.7 wirklich ändern, siehe cmsimple-xh/cmsimple-xh#14. Bis dahin würde ich alles mal lassen.

Und natürlich ist zu bedenken, dass wir nicht strikt ISO 639-1 konform sein können, u.a. weil ISO 639-1 nicht zwischen Simplified und Traditional Chinese unterscheidet (bei CMSimple ist wird daher zh bzw. tw verwendet).

cmb69 commented 7 years ago

Ist hier noch etwas zu tun, oder kann das Issue geschlossen werden?

TN03 commented 7 years ago

Ist hier noch etwas zu tun, oder kann das Issue geschlossen werden?

Was ist mit den beiden noch offenen PRs https://github.com/TN03/XH_split/pull/29 und https://github.com/TN03/XH_split/pull/30?

cmb69 commented 7 years ago

Was ist mit den beiden noch offenen PRs #29 und #30?

PR #29 habe ich geschlossen, und PR #30 sollte wohl auch geschlossen werden, weil wir weiter oben "entschieden" haben bei Rastergrafiken zu bleiben, und etwas später auch bei GIF. Ein Progressive Enhancement durch SVG könnte ich mir aber für CMSimple_XH im Allgemeinen vorstellen (ist ja nicht XH-split spezifisch).