Header neu gestalten

[Holger H.]

Hallo miteinander,

zu meinem Hintergrund: selbst bin ich nicht gerade der HTML-Freak (die vorliegende Homepage https://www.audiobibelneü.de/index.htm habe ich nur durch die intensive Hilfe eines Freundes erstellen können). Ich habe ihm über die Schulter geschaut und gesagt, wie es aussehen muß und nachdem zwei bis drei "Musterseiten" erstellt waren, konnte ich das Meiste selbst umbauen. Ich habe also wirklich nur ein rudimentäres Verständnis von HTML ...

Nun, die Grafik, die ja auf jeder Seite zu sehen ist, ist richtig schlecht. Sie beinhaltet Text und zwei sehr pixelige Bilder, was heutzutage (Ladezeiten der Smartphones bei schlecher Datenrate) ein Unding ist …

Vor längerer Zeit habe ich versucht, mich ein wenig einzulesen und bin zu dem Schluß gekommen, daß es das Beste wäre, den Text ins HTML zu nehmen und die beiden Bilder (es wurden inzwischen neue, gute Bilder gemacht, die ich in den Anhang packe) als SVG einzubetten.

Hier komme ich aber nicht mehr weiter. Die Homepage ist so geschrieben, daß sie sich jedem gängigen Bildschirmformat anpaßt und das sollte auch mit dem neu zu erstellenden Banner so bleiben. Ganz ehrlich? Das kriege ich ohne Eure Hilfe nicht hin.

Mit diesem Hilfeschrei wende ich mich an Euch und hoffe auf tatkräftige Hilfe bei der Umsetzung. Die beiden neuen Bilder lade ich hoch (sind in Originalgröße - wurden von einem angehenden Grafiker gemacht - auch davon habe ich überhaupt keine Ahnung - können aber natürlich in Format oder Größe geändert werden).

Ich bedanke mich schon mal im Voraus und bin erwartungsvoll :-)

Holger

[marctrix]

Hej Holger,

hatten wir schon das Vergnügen? - Deine Seite kommt mir bekannt vor…

Nun, die Grafik, die ja auf jeder Seite zu sehen ist, ist richtig schlecht. Sie beinhaltet Text und zwei sehr pixelige Bilder, was heutzutage (Ladezeiten der Smartphones bei schlecher Datenrate) ein Unding ist …

Früher hatten wir Modems - damals war es auch schon ein Unding. 😉

Vor längerer Zeit habe ich versucht, mich ein wenig einzulesen und bin zu dem Schluß gekommen, daß es das Beste wäre, den Text ins HTML zu nehmen und die beiden Bilder (es wurden inzwischen neue, gute Bilder gemacht, die ich in den Anhang packe) als SVG einzubetten.

Text als Text: gut

JPEGS als SVG: bringt dir nichts, wenn du keine Filter o.ä anwenden willst.

Wenn es eine schematische Darstellung sein darf, nimm große, Iconartige SVGs, wenn es Fotorealistisch bleiben soll, bleib bei JPEG.

Hier komme ich aber nicht mehr weiter. Die Homepage ist so geschrieben, daß sie sich jedem gängigen Bildschirmformat anpaßt und das sollte auch mit dem neu zu erstellenden Banner so bleiben.

Wie ist es denn bisher gemacht? 😉

Verstehst du das? - Dann kannst du es bei den neuen Bildern auch so machen.

Die beiden neuen Bilder lade ich hoch

Es ist nur eines angekommen, aber wie ist es mit dem Copyright? Darfst du das hier hochladen?

Wenn du nicht rausfindest, wie das bisher gelöst ist, werden wir das gemeinsam aufdröseln. Bin aber erst mal für eine Weile (bis abends vermutlich) offline - wäre also nett, wenn jemand anders schon mal weitermacht.

Marc

[AudioBibel]

Hallo Marc :-),

ja, wir hatten wohl (vor zwei Jahren ungefähr) schon mal das Vergnügen …

JPEGS als SVG: bringt dir nichts, wenn du keine Filter o.ä anwenden willst.

Ok. Filter (wozu?) hatte ich nicht vor, anzuwenden. Allerdings sind die Bilder als PNG gespeichert (ist, so viel ich weiß verlustfreier und etwas kleiner und generell praktischer).

Wie ist es denn bisher gemacht? 😉

Na, wie anfangs schon beschrieben; mein Freund, der Programmierer ist und sich vom logischen Denken gut zurechtfindet, hat mir das Meiste gemacht und ich habe auf dem vorhandenen aufgebaut, - wohl eher, das Vorhandene UMgebaut (für die noch zu erstellenden Seiten). Und das ist ungefähr ein / zwei Jahre her. Und ob er jetzt noch mal so viel Zeit investieren kann (er müßte sich wohl auch wieder einarbeiten und ist wohl gerade auch nicht im Urlaub oder hat viel zu tun), ist fraglich.

Verstehst du das? - Dann kannst du es bei den neuen Bildern auch so machen.

So richtig verstehe ich das wohl eher nicht; mit Hilfestellung sicherlich! :-) Und - wegen mangelnder Übung - könnte es durchaus sein, daß ich es nächstes Jahr auch wieder vergessen habe. So ist das leider …

Ich kann natürlich im HTML die Pfade für die neuen Bilder eintragen. Aber davor war es eines und nun sind es zwei. Außerdem müssen die ja platziert werden (der Text "Audio-Bibel NeÜ" und die Erläuterungen darunter auch) und sie müssen sich der jeweiligen Bildschirmauflösung des Besuchers anpassen können. Also Hilfestellung ist sicherlich nötig.

Es ist nur eines angekommen,

Du meinst die Bibel? Ja, die ist bei mir auch nur teilweise zu sehen. Wenn ich auf das "halbe" Bild draufklicke sehe ich es aber komplett im Browser. weg. Das andere Bild (Kopfhörer) läßt sich nicht hochladen.

… aber wie ist es mit dem Copyright? Darfst du das hier hochladen?

Und ja, die Bilder sind selbst erstellt (also mit fremder Hilfe, aber es sind private Bilder, an denen ich das "Copyright" habe. Da bin ich pedantisch. ;-)

Wenn du nicht rausfindest, wie das bisher gelöst ist, werden wir das gemeinsam aufdröseln. Bin aber erst mal für eine Weile (bis abends vermutlich) offline - wäre also nett, wenn jemand anders schon mal weitermacht.

Das wäre sehr nett, Marc! Ich selbst habe zwar diese Woche noch Urlaub, bin heute Abend aber zwischen 17.30 und bis ungefähr 22.00 Uhr nicht zu Hause. Wenn Du dann noch fit bist und Lust hast, könnten wir ja mal rangehen. Ansonsten ein anderes Mal.

Ich versuche noch mal BEIDE Bilder unten anzufügen (diesmal über das Bild-Symbol. Davor habe ich es über das Feld unter dem Textfeld gemacht und da klappte es nur immer mit einem Bild - aber auch jetzt: die Bibel wird diesmal sogar noch unvollständiger dargestellt (öffnet sich aber beim Draufklicken) …

Ich sage schon mal DANKE im Voraus :-)

Holger

[Der Martin]

Hallo,

anzuwenden. Allerdings sind die Bilder als PNG gespeichert (ist, so viel ich weiß verlustfreier und etwas kleiner und generell praktischer).

nur zur Klarstellung: Ja, PNG ist verlustfrei, JPEG normalerweise nicht. Dafür ist ein fotorealistisches Bild als JPEG normalerweise sehr viel kleiner als dasselbe Bild als PNG, auch wenn man die Qualitätsstufe (Kompression) so einstellt, dass man den Qualitätsverlust noch nicht bemerkt.

Daher ist JPEG für fotorealistische Bilder meist besser geeignet; PNG dagegen eher für plakatähnliche Bilder mit wenigen Farbnuancen (oder wenn ein Qualitätsverlust unter keinen Umständen tolerierbar ist). SVG dagegen vor allem bei Skizzen, Strichzeichnungen oder einfachen Grafiken, denn SVG skaliert ohne Qualitätsverlust, die anderen beiden nicht.

Es ist nur eines angekommen

Du meinst die Bibel? Ja, die ist bei mir auch nur teilweise zu sehen.

Nein, die war (bei mir jedenfalls) schon komplett zu sehen, aber du hast von zwei Bildern gesprochen. Jetzt, in deinem zweiten Posting, sind tatsächlich zwei (das zweite ist ein Kopfhörer).
Allerdings sind beide irgendwie mitten im Text einsortiert.

Das andere Bild (Kopfhörer) läßt sich nicht hochladen.

Jetzt offenbar schon. ;-)

Und ja, die Bilder sind selbst erstellt (also mit fremder Hilfe, aber es sind private Bilder, an denen ich das "Copyright" habe. Da bin ich pedantisch. ;-)

Das ist nicht unbedingt pedantisch, nur korrekt.

Ciao,
 Martin

[AudioBibel]

Hallo Martin :-)

nur zur Klarstellung: Ja, PNG ist verlustfrei, JPEG normalerweise nicht. Dafür ist ein fotorealistisches Bild als JPEG normalerweise sehr viel kleiner als dasselbe Bild als PNG, auch wenn man die Qualitätsstufe (Kompression) so einstellt, dass man den Qualitätsverlust noch nicht bemerkt.

Aha! Interessant, das wußte ich auch wieder nicht.

Daher ist JPEG für fotorealistische Bilder meist besser geeignet; PNG dagegen eher für plakatähnliche Bilder mit wenigen Farbnuancen (oder wenn ein Qualitätsverlust unter keinen Umständen tolerierbar ist). SVG dagegen vor allem bei Skizzen, Strichzeichnungen oder einfachen Grafiken, denn SVG skaliert ohne Qualitätsverlust, die anderen beiden nicht.

Wäre es dann nicht doch besser, auf SVG zu setzen? Dann hätte ich - egal unter was für Umständen - gar keine Qualitätsverluste …

Allerdings sind beide irgendwie mitten im Text einsortiert.

Ja, weil ich vorschnell den Beitrag freigegeben habe. Sollte inzwischen - nach einigen Korrekturen im Text - unten platziert sein.

Danke für die Info, Martin!

Gruß

Holger

[Der Martin]

Hallo Holger,

nur zur Klarstellung: Ja, PNG ist verlustfrei, JPEG normalerweise nicht. Dafür ist ein fotorealistisches Bild als JPEG normalerweise sehr viel kleiner als dasselbe Bild als PNG, auch wenn man die Qualitätsstufe (Kompression) so einstellt, dass man den Qualitätsverlust noch nicht bemerkt.

Aha! Interessant, das wußte ich auch wieder nicht.

man lernt doch täglich dazu. :-)

Wäre es dann nicht doch besser, auf SVG zu setzen?

Nein. SVG ist ein Vektorgrafikformat. Das heißt, ein Bild entsteht als eine Menge von geometrischen Formen: Polygonzüge, Kurven, gefüllte Flächen, Texte und ähnliches Zeug. For Fotos, die ursprünglich als Pixelgrafik vorliegen, ist das keine Alternative. Das sind zwei ganz unterschiedliche Philosophien.

Allerdings sind beide irgendwie mitten im Text einsortiert.

Ja, weil ich vorschnell den Beitrag freigegeben habe. Sollte inzwischen - nach einigen Korrekturen im Text - unten platziert sein.

Stimmt. ;-)

Schönen Feierabend,
 Martin

[Rolf B]

Hallo AudioBibel,

• du solltest die Bilder so weit beschneiden, dass kein unnötiges Weiß (oder Transparenz) am Rand ist. Das Buch ist mit 1145x812 hochgeladen, lässt sich aber auf ca 700x620 beschneiden (ich hab's jetzt nicht genau ausgemessen). Dadurch bist Du flexibler in der Verwendung. Wenn Du beim Einsatz auf der Webseite Platz um das Bild herum brauchst, machst Du das dort mit CSS (Stichwort: Padding und Margin).
• mach Dir eine Vorstellung haben, wie groß die Bilder maximal werden sollten. Zum Beispiel: 200 Pixel. Das verdoppelst Du - 400px, und du skalierst dein Foto auf diese Größe. Es ist vermutlich nicht allzu gravierend für Anwender, die ohnehin ein paar Megabyte Audio anhören wollen - aber die Frage ist nun: Brauchst Du transparenten Hintergrund? Oder kannst Du ihn einfach weiß machen - deine HTML Seite ist ja auch weiß. JPG kann keine Transparenz, aber mit einem JPG bekommst Du dein Buch auf unter 30K Dateigröße. Als PNG oder GIF ist Transparenz möglich, aber du kommst dann auf Dateigrößen von 80K-120K. Du musst jedenfalls weg von den aktuell 2,8MB.
• Wie auch immer - durch die Bereitstellung des Bildes in doppelter maximaler Anzeigegröße kann ein JPG ziemlich aggressiv komprimiert werden, und sieht immer noch gut aus.

Die eigentliche Webseite hat aktuell ein Ärgernis: Sie ist nicht Tastaturbedienbar. Die "Anzeigen" Dinger (die Buttons sein möchten) lassen sich nur per Maus bedienen. Gerade Leute, die auf Audioinhalte angewiesen sind, haben keine Maus. Für die ist es sogar ärgerlich, wenn sie erstmal einblenden müssen. An Stelle deiner klickbaren divs solltest Du Buttons verwenden. Die kann man so stylen, dass sie so wie jetzt die DIVs aussehen, und sie sind ab Werk interaktiv und für Assistenztechniken zugänglich.

Deinen Header-Bereich würde ich mit Flexbox gestalten. Grid ginge auch, funktioniret aber in alten Browsern, vor allem dem Relikt Internet Explorer, schlecht. Das sind nur wenige Prozent der potenziellen Nutzer, aber bei denen würde durch Grid-Technik die Anzeige verscheußlicht (die Header-Elemente stehen dann untereinander statt nebeneinander). Welche Anforderungen an Alt-Kompatibilität hast du?

Du solltest auch den Gebrauch von <table> reduzieren. "Das alte Testament" und "Die geschichtlichen Bücher" sind Überschriften und sollten als Überschrift im HTML erscheinen - das geht in einer Table nicht. Ich mache Dir mal eine Vorlage, wie Du so etwas besser gestalten kannst. Man könnte sogar behaupten, dass die einzelnen Bücher keine tabellarischen Daten, sondern eine Liste sind, und darum als Liste zu gestalten sind (<ul> und <li>), aber ich bin eigentlich dagegen, weil die Table die schöne Eigenschaft hat, dass die Spaltenbreiten übergreifend gleich bleiben. Das ist responsiv schwieriger. Mal gucken...

Rolf

[marctrix]

Hej Rolf und AudioBibel,

Ich mache Dir mal eine Vorlage, wie Du so etwas besser gestalten kannst.

Dann warte ich das mal ab, sonst machen wir parallel inkompatible Vorschläge.

Ansonsten meine volle Zustimmung. Hast ganz in meinem Sinn weiter gemacht. 😉

@AudioBibel die Bilder kannst du ja schon mal zurechtschneiden und komprimieren - die zwei Funktionen wirst du immer wieder benötigen, deshalb solltest du die mal in deinem Grafikprogramm suchen.

Die jpeg-Einstellungen findest du oft unter „Export“ oder „für Web speichern“ oder so was.

Wenn du Photoshop (Elements) nutzt, kannst du das „beschneiden“- Werkzeug benutzen.

Marc

[Rolf B]

Hallo marctrix,

Fertig: https://jsfiddle.net/Rolf_b/5th930x7/

Ich verlinke da auf die Icons von audiobibel und auf die Bilder 1:1 aus dem Forum...

Ist nur ein erster Wurf - kann man gerne verbessern :)

Die Tables für die Kapitelübersicht habe ich bewusst gelassen, es ist mit Listen wirklich schwierig, einheitliche responsive Breiten zu bekommen.

Rolf

[AudioBibel]

Hallo Marc,

@AudioBibel die Bilder kannst du ja schon mal zurechtschneiden und komprimieren - die zwei Funktionen wirst du immer wieder benötigen, deshalb solltest du die mal in deinem Grafikprogramm suchen.

Ich habe auf meinem Linux zwei Programme installiert: Kolour Paint (scheint dem Paint von Windows nachempfunden und ist ziemlich simpel ohne viel Schnik-Schank) und Gimp. Da finde ich bei beiden Programmen unter dem Reiter "Bild" die Funktion "Skalieren" bzw. "Bild skalieren". Bin ich da richtig, um die Bilder zu komprimieren? Wie ich die Bilder ins JPG-Format exportiere, weiß ich.

@Rolf und Martin Vielen Dank für Euren Einsatz und das auch noch so fix! Spitze! Hab die Vorlage von Rolf schon mal kurz angeschaut (ist schon spät). Das sieht doch schon super aus. Muß es mir morgen (wenn ich bloß Zeit finde - ich habe ja Urlaub!) noch im HTML anschauen und wie ich das dann in meine Datei einarbeite.

Fürs Erste mal gute Nacht

Holger

[marctrix]

Hej AudioBibel,

Ich habe auf meinem Linux zwei Programme installiert: Kolour Paint (scheint dem Paint von Windows nachempfunden und ist ziemlich simpel ohne viel Schnik-Schank) und Gimp. Da finde ich bei beiden Programmen unter dem Reiter "Bild" die Funktion "Skalieren" bzw. "Bild skalieren". Bin ich da richtig, um die Bilder zu komprimieren?

Nein, damit änderst du die Größe. Besser wäre erst einmal das überstehende weiß abzuschneiden und dann die Bilder auf die gewünschte Größe zu bringen. Zuletzt exportierst du sie als jpeg (keine Ahnung wo das in Gimp ist, such nach Menü-Einträgen, die so ähnlich klingen, wie die, die ich genannt habe).

Arbeite immer mit Kopien - gerade wenn du Teile beschneidest, die Größer verringerst und am Ende das Ergebnis als jpeg speicherst, hast du sonst sehr viele Bildinhalte unwiederbringlich verloren.

Versioniere vielleicht sogar die Arbeitsschritte, wenn du git o.ä. zur Verfügung hast.

Marc

[Auge]

Hallo

Kolour Paint … Gimp
Da finde ich bei beiden Programmen unter dem Reiter "Bild" die Funktion "Skalieren" bzw. "Bild skalieren". Bin ich da richtig, um die Bilder zu komprimieren?

Nein, damit änderst du die Größe. Besser wäre erst einmal das überstehende weiß abzuschneiden und dann die Bilder auf die gewünschte Größe zu bringen.

In Gimp zu erreichen über Bild=>Leinwandgröße … für das pixelgenaue Beschneiden und Bild=>Bild skalieren … zum skalieren. Tastaturkürzel werden in Gimp 2.10.8 unter Ubuntu 16.04 im Menüband nicht angezeigt.

Zuletzt exportierst du sie als jpeg (keine Ahnung wo das in Gimp ist, such nach Menü-Einträgen, die so ähnlich klingen, wie die, die ich genannt habe).

In Gimp zu finden unter Datei=>Exportieren als … beziehungsweise für Tastaturnutzer mit [Umschalt]+[Strg]+[E].

Tschö, Auge

[AudioBibel]

Hallo Auge,

danke! :-)

Hier nun mein Werk:

Auf meinem Bildschirm sehen die beiden Bilder zwar noch verschieden groß aus; hoffe daß das bei Euch aber anders rauskommt.

Liebe Grüße

Holger

[Rolf B]

Hallo Holger,

natürlich nicht. Die Kopfhörer sind - wie der Name auch sagt - 758x758 und das Buch ist 380x380. Die Kopfhörer solltest Du ebenso auf 380x380 bringen (am besten ausgehend vom Original, nicht von dem Skalierungsergebnis).

Rolf

[AudioBibel]

Hallo Rolf,

erledigt (sieh weiter oben)! :-)

Mein Freund hat sich übrigens auch gemeldet. Nächste Woche hat er (und ich hoffentlich auch) wohl Zeit. Dann schauen wir uns Deine JSfidle mal gemeinsam an und schauen, ob er das ohne Probleme umsetzen kann (wir machen das immer gemeinsam über Teamviewer oder AnyDesk, so daß ich was dabei lernen kann.

Für diese Woche bedanke ich ich bei Euch ALLEN ganz herzlich und wünsche einen schönen Sonntag!

Holger

[Rolf B]

Hallo Holger,

dann guckt euch mal die fünf Seiten an (index, auswahl_at und 1.-3. Mose), die von Dir übernommen und überarbeitet habe. Ist das was für euch? Ist natürlich alles Arbeitsstand und auf der auswahl_at steht unten noch unüberarbeiteter Kram.

http://audiobibel.borchmann.one/index.htm

Ich fürchte nur, dass ihr Arbeit habt wenn ihr darauf aufsetzen wollt. Ich habe eure Klassenwüsten eliminiert und dafür in der standard.css einiges geändert, so dass die Elemente korrekt gefunden werden. Alles oberhalb von ".keineSilbentrennung" ist im Prinzip neu.

Auch das JavaScript ist neu, es ist jetzt so geschrieben dass im HTML keine onXXX Attribute verwendet werden.

Wenn das alles zu viel ist - ok - dann guckt euch nur den Header an :)

Rolf

[Der heilige Martin]

<p>
  <span>deutschsprachige MP3-Dateien der</span>
  <span>
    <span class="high">N</span>euen 
    <span class="high">e</span>vangelistischen 
    <span class="high">Ü</span>bersetzung
  </span>
  <span>zum kostenlosen Download</span>
<p>

Dass mein Vorschlag links liegengelassen wurde, ok, aber diese Bröckelwörter hatten wir nun wirklich schon vor fünf Tagen verbessert.

Ob es, davon abgesehen, so eine <span>-Wüste braucht, ein halbes Dutzend in einem kurzen Satz, und dann noch separate Klassen nur wegen der drei Buchstaben, lasse ich mal dahingestellt …

[Rolf B]

Hallo St. Martin,

Ich habe am WE den Header ohne Blick auf den Thread überarbeitet...

Dass mein Vorschlag links liegengelassen wurde

Du meinst den hier? Ich habe die Bilder vorsätzlich als background-image gesetzt, weil sie aus meiner Sicht Dekor-Elemente sind. Als img bräuchten sie auch ein alt-Tag, und würden von einem Screenreader präsentiert. Fand ich jetzt nicht angemessen, kann man natürlich drüber diskutieren.

Und das NeÜ habe ich bewusst aus dem h1 herausgelassen, das empfand ich als Subtitel, nicht als Überschrift.

Das Thema Bröselwörter habe ich echt verpennt, da gehe ich nochmal ran. Bzw. man kann es Holger als leichte Übung für den Leser übergeben 😉

Rolf

[AudioBibel]

Hallo Rolf,

vielen Dank!!!

Sorry, heute am ersten Arbeitstag bin ich erst nach 20.30 Uhr nach Hause gekommen. Habe mich gerade erst an den PC gesetzt. Meinen Freund konnte ich heute auch nicht mehr erreichen, ist schon spät.

Was Du da gezaubert hast, ist super! Gefällt mir wirklich gut! Und ich möchte behaupten, daß ich da jetzt (eventuell vom Freund unterstützt) auch alleine weiterarbeiten kann. Heute aber nicht mehr; ich bin platt … 😉

Auch das JavaScript ist neu, es ist jetzt so geschrieben dass im HTML keine onXXX Attribute verwendet werden.

Übrigens, was ist dieses "onXXX-Atrribut"?

Morgen wird es hoffentlich nicht so spät, so daß ich mich endlich mal ran setzten kann; Ihr wart ja wirklich fleißig.

Gute Nacht

Holger

[Gunnar Bittersmann]

@@AudioBibel

Übrigens, was ist dieses "onXXX-Atrribut"?

Eine Möglichkeit, beim Eintreten eines Event auszuführenden JavaScript-Code direkt ins HTML einzubinden:

<button onclick="tuWas()">

Aber nicht, dass man das so machen sollte. Meist ist es vorteilhaft, Inhalt (HTML) und Verhalten (JavaScript) zu trennen (separation of concerns):

Markup:

<button id="tu-was-button">

Script:

const tuWasButtonElement = document.querySelector("#tu-was-button");
tuWasButtonElement.addEventListener("click", tuWas);

Da der Button ohne JavaScript ohne Funktion ist, kann man ihn auch erst dann anzeigen, wenn das JavaScript ausgeführt wurde:

<button id="tu-was-button" hidden="">

const tuWasButtonElement = document.querySelector("#tu-was-button");
tuWasButtonElement.addEventListener("click", tuWas);
tuWasButtonElement.hidden = false;

LLAP 🖖

[Rolf B]

Hallo Gunnar,

ich hab's über CSS und das aria-expanded Attribut gelöst (dem ich erst per JS ein true oder false zuweise) - hidden dürfte besser sein. Vor allem, weil es dann keinen illegalen aria-Wert setzt...

Rolf

[marctrix]

Hej Rolf,

ich hab's über CSS und das aria-expanded Attribut gelöst (dem ich erst per JS ein true oder false zuweise) - hidden dürfte besser sein. Vor allem, weil es dann keinen illegalen aria-Wert setzt...

Und weil es auch ohne css funktioniert…

Marc

[kai345]

tuWasButtonElement.addEventListener("click", tu-was);

Ich glaube nicht, daß eine Subtraktion hier hilft 😉

[Gunnar Bittersmann]

@@kai345

tuWasButtonElement.addEventListener("click", tu-was);

Ich glaube nicht, daß eine Subtraktion hier hilft 😉

Ich glaube, doch. Ich hab den Bindestrich substrahiert, das sollte helfen. 😆

Danke.

LLAP 🖖

[AudioBibel]

Danke Gunnar,

das hilft mir bei meinem Wissensstand jetzt nicht sonderlich weiter; aber interessant. Das Beste ist wohl, daß ich es gar nicht wissen muß, da Inhalt (HTML) und Verhalten (JavaSript) ja eh getrennt werden sollten.

Gute Nacht

Holger

[AudioBibel]

Hallo Rolf,

wie schon an Martin geschrieben, haben Wolfgang (mein Freund und Programmierer) und ich uns für Deine Arbeit entschieden. :-) Vielen, vielen Dank! 😀

Sobald ich etwas Zeit habe, werde ich zunächst mal die Header aller Seiten umbauen und mich dann an die weiteren Umbauten der von Dir angefangenen Seiten machen.

Jetzt, da ich "Vorlagen" habe, komme ich da sicherlich gut voran. Ich freu' mich schon, daß es jetzt endlich weitergeht.

Schöne Idee mit den Navigationspfeilen an den Rändern der Auswahlseiten http://audiobibel.borchmann.one/html/1__mose.htm, wie jetzt zum Beispiel hier …

http://audiobibel.borchmann.one/html/1__mose.htm

Gute Nacht

Holger

[marctrix]

Hej AudioBibel,

Schöne Idee mit den Navigationspfeilen an den Rändern der Auswahlseiten http://audiobibel.borchmann.one/html/1__mose.htm, wie jetzt zum Beispiel hier …

http://audiobibel.borchmann.one/html/1__mose.htm

Wie bereits erwähnt wurde, sind Hörbücher besonders interessant für Menschen, die nicht sehen können.

Dafür solltest du Dein HTML noch etwas ergänzen und die solltest du die Pfeile anders codieren. Bei Dir steht:

<h1>
<a href=#">⇦</a>
<a href=#">Das Alte Testament</a>
<a href=#">⇨</a>
</h1>

Wieso ist das eine Überschrift? Da kommt doch kein Text im Anschluss, der überschrieben wird. Und dann noch eine h1 - ist denn nicht vielmehr "Das zweite Buch Mose - Exodus" Der Name der aktuellen Seite? Dann sollte das in eine h1.

Was soll das Vorlese-Programm hier ausgeben? Der Pfeil ist ein Zeichen, ich weiß nicht einmal, ob da etwas wie Pfeil links oder rechts gelesen wird - aber selbst wenn. Was soll das dann heißen?

Außerdem hast du da eine Liste von drei Links. Diese bitte auch als Liste auszeichnen.

Die Liste der Kapitel ist aufsteigend sortiert, also hier eine sortierte Liste ol verwenden.

"Das zweite Buch Mose mit allen Unterkapiteln ist für mich ein in sich geschlossener Text, der für sich allein genommen Sinn macht. HTML sieht dafür das article-Element vor.

Die HTML-Elemente haben alle einen Zweck und eine Bedeutung. 😉

Empfehlung

Alle Informationen sichtbar und hörbar, alle Elemente entsprechend ihrer Bedeutung ausgezeichnet

<article>
<header>
<h1>Das zweite Buch Mose - Exodus</h1>
<ul>
	<li>
		<a href=#">zurück zum dritten Buch Mose</a></li>
	<li>
		<a href=#">
			zurück zur Übersicht über "Das alte Testament"
		</a>
	</li>
	<li aria-current="page">
		<a href=#kapitelauswahl">
			Sie befinden sich hier: zweites Buch Mose (zur Kapitelauswahl)
		</a>
	</li>
	<li>
		<a href=#">
			weiter zum dritten Buch Mose
		</a>
	</li>
</ul>
<p>
	(Exodus = Auszug)<br>
	Zum Anhören / Herunterladen bitte Kapitel unten anklicken
</p>
</header>
<h2 id="kapitelauswahl">
	Kapitelauswahl "Zweites Buch Mose - Exodus"
</h2>
<ol>
	<li>
		<a href=#">
			<!-- Kann man sehen, aber nicht hören -->
			<span aria-hidden="true">1</span>
			<!-- Kann man hören, aber leider nicht sehen
			     Schöner wäre, Sehende bekämen diese Infos auch
			     mindestens auf dem Smartphone, aber dann müsste man 
			     das Layout (leicht) ändern: Große Zahl, kleiner
			     Text darunter, fände ich schöner!!! -->
			<span class="visuallyhidden">1. Kapitel, Format mp3, Größe 24 MByte, Dauer 12 Minuten</span>
</article>

Klassen zum Verbergen von Informationen und anzeigen, wenn diese Fokus bekommen, so dass Tastaturnutzer sehen, wo sie sich gerade befinden:

.visuallyhidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
}

Marc

[Rolf B]

Hallo Marc,

deine Einwände gehen allesamt gegen den Vorschlag, den ich Holger gemacht habe. Sicher, ich lerne in Accessibility gerne noch dazu, aber dein Vorschlag kommt mir sehr überfrachtet vor.

Ich traue mich kaum, hier in eine Diskussion mit Dir einzusteigen. Einerseits wird die recht einseitig (mangels Erfahrung bei mir), andererseits befürchte ich, Holger abzuschrecken. Der wollte doch "nur" einen überarbeiteten Seitenheader 😉

Einen <article> habe ich nicht gesetzt, weil es der einzige im <main> gewesen wäre. Ist das sinnvoll?!

Die Einteilung des Header in h1/h2 fand ich sinnvoll, weil ein Buch aus dem alten Testament angezeigt wird.

Die Links der Quernavigation waren schlecht zugänglich, da hast Du recht, aber braucht man sogar einen Link zur Kapitelauswahl (und wenn ja: sollte der dann nicht als erstes stehen)? Ich würde sogar fast annehmen, dass die Quer-Links für Nichtsehende eine Überfrachtung der Seite darstellen und dass man sie für Screenreader ausblenden sollte.

Dein Vorschlag für die Darstellung der Kapitellinks ist sicherlich informativ, macht aber eine MENGE Arbeit. Die Bibel dürfte etwas über 1000 Kapitel haben, und Holgers Seite ist statisch, kein PHP. Und für den Nichtsehenden ist es sicherlich mühsam, sich durch eine solche Liste von 50 Kapiteln zu wühlen; da muss man wohl noch ganz anders herangehen (die meisten Bibelübersetzungen haben Kapitelüberschriften, die gehörten vermutlich dann dorthin, auch für Sehende).

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ich würde sogar fast annehmen, dass die Quer-Links für Nichtsehende eine Überfrachtung der Seite darstellen und dass man sie für Screenreader ausblenden sollte.

Du setzt nichtzutreffenderweise Nichtsehende mit Screenreader-Nutzern gleich. Es mögen zwar die meisten Nichtsehenden Screenreader nutzen, aber längst nicht alle Screenreader-Nutzer können nicht sehen.

Für sehende Screenreader-Nutzer dürfte es ziemlich verwirrend sein, wenn Teile des auf der Seite sichtbaren Inhalts nicht vorgelesen werden würden.

LLAP 🖖

[marctrix]

Hej Rolf,

deine Einwände gehen allesamt gegen den Vorschlag, den ich Holger gemacht habe.

Nein, sie ergänzen ihn. Nichts geht gegen deinen Vorschlag.

Sicher, ich lerne in Accessibility gerne noch dazu, aber dein Vorschlag kommt mir sehr überfrachtet vor.

Dann habe ich ihn nicht ausreichend begründet. 😉

Habe eigentlich gar keine Zeit dafür und das ging auch schon viel länger, als ich wollte. Hatte erst nur was zu den Pfeilen sagen wollen…

Ich traue mich kaum, hier in eine Diskussion mit Dir einzusteigen. Einerseits wird die recht einseitig (mangels Erfahrung bei mir), andererseits befürchte ich, Holger abzuschrecken.

Ich werde einfach alles erklären, was du angemerkt hast und hoffe, dass es dadurch verständlicher wird, warum ich meine Vorschläge angebracht habe.

Holger kann ja einfach mitlesen.

Der wollte doch "nur" einen überarbeiteten Seitenheader 😉

Ja, aber kompliziert ist es ja schon durch den ungewöhnlichen Aufbau von vor- und zurück-Links in einer h1.

Sonst hätte ich wohl gar nichts gesagt. Aber mir ist auch klar: das was Nutzer wollen und was Seitenbetreiber wollen (oder leisten können), deckt sich nicht immer.

Ich habe übrigens nicht alles aufgezählt, was mir aufgefallen ist, sondern mich entgegen meiner Gewohnheit auf Screenreader-Nutzer und Sehende beschränkt.

Also @AudioBibel: lass dich nicht abschrecken. Ich habe Verständnis, wenn du das nicht alles so umsetzt, weil es zu aufwändig ist. Manches geht vielleicht mit Suchen und Ersetzen. anderes lässt sich zeitlich vielleicht nicht machen.

Es ist immer aufwändiger, eine Seite im Nachhinein zugänglich zu machen, als erst keine Barrieren einzubauen. So wie im echten Leben: aus einer Treppe eine Rampe zu machen ist aufwändig und manchmal nicht möglich, wo es unproblematisch gewesen wäre, schon bei der Planung des Hauses auf Stufen verzichtet zu haben.

Einen <article> habe ich nicht gesetzt, weil es der einzige im <main> gewesen wäre. Ist das sinnvoll?!

Schwer zu sagen. Mir erschien es so logischer. Die meisten Seiten haben ja nur einen Artikel. Aber hier ist es das einzige Element in main, weil es sonst nicht viele Inhalte gibt.

Nachmal sind mehrere Varianten nachvollziehbar - darauf kommt es letztendlich an.

Daher habe ich mit deinem Code ein Problem mit dem header im main - das ist nämlich kein sectioning content und somit gehört der header logisch zum body (wenn ich das recht verstehe. Der body hat aber schon einen header.

Darum erschien es mir hier sauberer mit article einen sectioning content einzufügen.

Die Einteilung des Header in h1/h2 fand ich sinnvoll, weil ein Buch aus dem alten Testament angezeigt wird.

Das schon - aber eine h1 als Navigationsleiste?!?

Die Links der Quernavigation waren schlecht zugänglich, da hast Du recht, aber braucht man sogar einen Link zur Kapitelauswahl (und wenn ja: sollte der dann nicht als erstes stehen)?

Nein, den benötigt man nicht unbedingt, nur dachte ich, wenn es einen link zum letzten Buch und zum nächsten Buch gibt, macht es Sinn anzuzeigen, bei welchem Buch man sich gerade befindet. Da hätte man auf die Referenz verzichten können (leeres, öffnendes a-Tag ohne Attribut).

Ich fände es als Blinder Nutzer aber praktischer, wenn ich von dieser Stelle aus auch direkt zur Kapitel-Auswahl springen könnte.

Ich würde sogar fast annehmen, dass die Quer-Links für Nichtsehende eine Überfrachtung der Seite darstellen und dass man sie für Screenreader ausblenden sollte.

Warum sollten sich Blinde nicht die Möglichkeit wünschen, schnell zum nächsten Buch springen zu können?

Ich wollte jetzt nicht zu sehr in das bestehende Konzept eingreifen, aber ich würde diese Navigation grundsätzlich an anderer Stelle anbieten, aber dann müsste man den ganzen Seitenaufbau neu denken.

Und das wäre mal Arbeit! 😉

Dein Vorschlag für die Darstellung der Kapitellinks ist sicherlich informativ, macht aber eine MENGE Arbeit. Die Bibel dürfte etwas über 1000 Kapitel haben, und Holgers Seite ist statisch, kein PHP.

Nicht mehr als Dein Vorschlag?!? Der muss doch auch in alle Seiten eingefügt werden. Ist doch größtenteils eine Copy&Paste-Aktion.

Vielleciht sogar zum Teil mit Suchen und Ersetzen zu erledigen.

Viel aufwändiger sind die anschließenden Tests, ob man sich nicht irgendwo auf den 1.000 Seiten vertan hat…

Und für den Nichtsehenden ist es sicherlich mühsam, sich durch eine solche Liste von 50 Kapiteln zu wühlen; da muss man wohl noch ganz anders herangehen (die meisten Bibelübersetzungen haben Kapitelüberschriften, die gehörten vermutlich dann dorthin, auch für Sehende).

Ja, auch für Sehende. Das wird oft vergessen. Barrierefreie Seiten konzentrieren sich oft auf eine Nutzergruppe (vollständig Blinde, die es kaum gibt, wie @Gunnar Bittersmann bereits angedeutet hat) und vergessen dann mitunter das offensichtliche.

Marc

[Rolf B]

Hallo marctrix,

Daher habe ich mit deinem Code ein Problem mit dem header im main - das ist nämlich kein sectioning content

Warum muss das so sein? Die von Dir verlinkte Spec sagt:

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

Heißt doch: niemand verbietet zwei Header, niemand verlangt ein heading-Element in einem header, niemand verlangt, dass ein header nur ganz am Anfang stehen darf.

Ich weiß, das ist spitzfindig. Und dass ein h1 als Navigationsleiste ein Fehler war, habe ich ja auch schon zugegeben.

Vermutlich ist das HTML besser, wenn man das <main> Element tiefer setzt, so dass der große Titel und das h1 Element im Header stehen. Dann ein <nav> mit den Hauptnavigationslinks und dann <main> mit der Kurzerläuterung zum Buch und der Liste mit den Kapitellinks.

Den Link zum Anspringen der Kapitelnavigation nach vorn zu ziehen entsprang bei mir auch der Überlegung, dass viele Seiten einen Skip-Link ganz zu Beginn haben, mit dem man gleich zum Hauptteil kommen kann.

Nicht mehr als Dein Vorschlag?!? Der muss doch auch in alle Seiten eingefügt werden.

Doch, ist mehr. Die aktuelle Site enthält die von Dir vorgeschlagene Info (Volumen und Abspieldauer der Kapitel) nicht. Oder habe ich sie übersehen?

Ich habe heute keine Zeit dafür; ich kann mir ggf. morgen nochmal Gedanken machen, wie ich das, was ich jetzt gelernt habe, in meinen Designvorschlag einbaue.

Rolf

[marctrix]

Hej Rolf,

Daher habe ich mit deinem Code ein Problem mit dem header im main - das ist nämlich kein sectioning content

niemand verbietet zwei Header, niemand verlangt ein heading-Element in einem header, niemand verlangt, dass ein header nur ganz am Anfang stehen darf.

Ich weiß, das ist spitzfindig.

Die Frage ist immer, wird es so sinnvoll und ist es das, was die Autoren der spec wollten (die versuchen letztendlich Elemente für einen sinnvollen Seitenaufbau zu spezifizieren).

Ist es sinnvoll, nach Lücken in der spec zu suchen, um sich selber die Verwendung von zwei aufeinanderfolgenden Header-Elementen in einer section zu rechtfertigen?

Wenn ich an so etwas komme, überlege ich, ob ich nicht ein besseres Konzept entwickeln kann für meinen seitenaufbau. Das kostet oft weniger Zeit, als der Versuch, etwas zu rechtfertigen, von dem man tief im Herzen eigentlich selber weiß, dass es Nacktheit wirklich stimmig ist…

Trotzdem kann es für ein konkretes Problem (eine bestehende Website verbessern), erst mal das beste sein, was man an der Stelle rausholen kann.

Wenn ich ein best practice example gebe, ist mir schon klar, dass das nicht in jedem Fall 1:1 passt.

Mir ist es viel mehr wichtig, ein Verständnis dafürzuhalten entwickeln, wieso ich es so machen würde. Bei längere, nachdenken, womöglich mit mehreren Teilnehmern, wird man oft meine Vorschläge verbessern oder sogar ganz andere nich bessere Ansätze finden können.

Eher will ich nicht. Es geht mir nicht darum „Recht“ zu haben.

Es geht mir darum, verstanden zu werden und dass der Fragesteller dann das Maximum dessen rausholt, was seine Ressourcen ihm ermöglichen.

Vermutlich ist das HTML besser, wenn man das <main> Element tiefer setzt, so dass der große Titel und das h1 Element im Header stehen. Dann ein <nav> mit den Hauptnavigationslinks und dann <main> mit der Kurzerläuterung zum Buch und der Liste mit den Kapitellinks.

Ich weiß gar nicht, ob man immer ein Main braucht, wenn es eine kleine Seite ist. Ein hauptbereich setzt ja implizit voraus, dass es auch andere gibt. Mir würde hier ein article reichen, auch wenn ich das jetzt gar nicht so richtig begründen kann…

Nicht mehr als Dein Vorschlag?!? Der muss doch auch in alle Seiten eingefügt werden.

Doch, ist mehr. Die aktuelle Site enthält die von Dir vorgeschlagene Info (Volumen und Abspieldauer der Kapitel) nicht. Oder habe ich sie übersehen?

Nein, das wird vermutlich zu viel. Aber das sollte der Autor der Seite entscheiden. So was muss man ja ich an einem Tag machen. Ich denke, so etwas kann sich lohnen, denn je besser die Seite mit den Jahren wird, desto erfolgreicher wird sie.

Ich habe heute keine Zeit dafür; ich kann mir ggf. morgen nochmal Gedanken machen, wie ich das, was ich jetzt gelernt habe, in meinen Designvorschlag einbaue.

Ich schätze deine Beiträge hier sehr (inhaltlich und menschlich) und ich lerne viel daraus. Wenn du sagst, dass du etwas gelernt hast, freut es mich, etwas zurück gegeben zu haben.

Marc

[Matthias Apsel]

Hallo marctrix,

von dem man tief im Herzen eigentlich selber weiß, dass es Nacktheit wirklich stimmig ist…

Ich würde an deiner Stelle mit deiner Autokorrektur mal ein ernstes Wörtchen reden. 😂

Bis demnächst
Matthias

[Auge]

Hallo

von dem man tief im Herzen eigentlich selber weiß, dass es Nacktheit wirklich stimmig ist…

Ich würde an deiner Stelle mit deiner Autokorrektur mal ein ernstes Wörtchen reden. 😂

Über genau diese Stelle bin ich auch gestolpert. 😀

Andererseits, sind wie hier wirklich so prüde, wie es der Rest des Landes wieder geworden ist, dass man nicht einmal (und dann noch aus versehen) „Nacktheit“ schreiben darf? Dass man, wie ein vor sich hin pubertierendes Kind, verlegen kichert, wenn ein Wort, dass man mit viel Absicht missverstehen kann, fällt?

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

Andererseits, sind wie hier wirklich so prüde, wie es der Rest des Landes wieder geworden ist, dass man nicht einmal (und dann noch aus versehen) „Nacktheit“ schreiben darf? Dass man, wie ein vor sich hinpubertierendes Kind, verlegen kichert, wenn ein Wort, dass man mit viel Absicht missverstehen kann, fällt?

Sie: „Wir sollten uns scheiden lassen.“
Er: „Hihi - Du hast Scheide gesagt.“

Bis demnächst
Matthias

[Der Martin]

Moin,

von dem man tief im Herzen eigentlich selber weiß, dass es Nacktheit wirklich stimmig ist…

Ich würde an deiner Stelle mit deiner Autokorrektur mal ein ernstes Wörtchen reden. 😂

Über genau diese Stelle bin ich auch gestolpert. 😀

ich auch - aber Autokorrektur? Ich überlege gerade, was man wohl versehentlich tippen müsste, damit Nacktheit dabei herauskommt. Wahrscheinlich irgendwas mit "nack" am Anfang, und wahrscheinlich sollte es "nachher" werden. Kann passieren, weil die ck-Kombination in der Fingermotorik auch sehr fest eingelernt ist.

Andererseits, sind wie hier wirklich so prüde, wie es der Rest des Landes wieder geworden ist, dass man nicht einmal (und dann noch aus versehen) „Nacktheit“ schreiben darf? Dass man, wie ein vor sich hin pubertierendes Kind, verlegen kichert, wenn ein Wort, dass man mit viel Absicht missverstehen kann, fällt?

Kann man das missverstehen? Im Satzzusammenhang jedenfalls nicht, da ergibt es einfach keinen Sinn, auch wenn man sich noch so windet.

Und ich halte mich auch nicht für prüde, so dass ich das anstößig fände. Mal kurz darüber schmunzeln, ja, aber das war's dann auch. Keine Ahnung, wie andere das sehen.

Ciao,
 Martin

[Auge]

Hallo

von dem man tief im Herzen eigentlich selber weiß, dass es Nacktheit wirklich stimmig ist…

Ich würde an deiner Stelle mit deiner Autokorrektur mal ein ernstes Wörtchen reden. 😂

Über genau diese Stelle bin ich auch gestolpert. 😀

ich auch - aber Autokorrektur? Ich überlege gerade, was man wohl versehentlich tippen müsste, damit Nacktheit dabei herauskommt. Wahrscheinlich irgendwas mit "nack" am Anfang, und wahrscheinlich sollte es "nachher" werden. Kann passieren, weil die ck-Kombination in der Fingermotorik auch sehr fest eingelernt ist.

Keine Ahnung, was die Autokorrektur sich dabei „denkt“. In den Postings von marctrix stecken aber regelmäßig einige Fehler drin, die (für mich) offensichtlich von Vertippern herrühren. Vermutlich schreibt er oft von seinem iPhone und Smartphone-Tastaturen sind nunmal mit sehr kleinen Tasten ausgetattet. Aber eben auch mit einer Autokorrektur, die, egal von welchem Hersteller stammend, meiner Erfahrung nach recht eigenwillige Interpretationen des Geschriebenen liefert.

Andererseits, sind wie hier wirklich so prüde, wie es der Rest des Landes wieder geworden ist, dass man nicht einmal (und dann noch aus versehen) „Nacktheit“ schreiben darf? Dass man, wie ein vor sich hin pubertierendes Kind, verlegen kichert, wenn ein Wort, dass man mit viel Absicht missverstehen kann, fällt?

Kann man das missverstehen? Im Satzzusammenhang jedenfalls nicht, da ergibt es einfach keinen Sinn, auch wenn man sich noch so windet.

Man kann aber, erziehungsbedingt, unwillkürlich zusammenzucken und „Ha, er hat ‚Nacktheit‘ gesagt!“ denken, wo man sich meiner Meinung nach und ähnlich wie von dir beschrieben nicht mehr als „typisch Autokorrektur“ denken und kurz schmunzeln sollte.

Tschö, Auge

[Rolf B]

Hallo Auge,

man muss doch Nacktheit prüde sein, um über ein Wort zu stolpern, dass da offensichtlich Nacktheit hingehört.

Jedenfalls ich bin für die Aufklärung sehr dankbar; ich bin Nacktheit darauf gekommen, was wohl das falsch korrigierte Original hätte sein können.

(hihihi - er hat Aufklären gesagt!!!)

Rolf

[AudioBibel]

Hallo miteinander! :-)

Seit Tagen verfolge ich Eure Beiträge; also nicht denken, ich hätte das Interesse verloren. Überhaupt nicht!

Leider (bin seit eineinhalb Wochen zurück aus dem Urlaub und wieder arbeiten), komme ich zu gar nichts. Wir haben noch immer Ernte und jeder Tag hat locker 12 Arbeitsstunden. Wenn ich nach Hause komme, wird gegessen, geduscht und dann bin ich wirklich platt …

Zeit habe ich noch immer nicht (frühestens nächste Woche), aber melden möchte ich mich doch kurz.

Vielen Dank für Eure super Gedanken und praktischen Umsetzungen (Rolf, Marc, und die anderen). Danke!

Mal nebenbei: ich finde die Auflistung der Threads irgendwie komisch und unübersichtlich (mein Freund Wolfgang meint das Gegenteil). Ich tue mir wirklich schwer, zu verfolgen, wer was geschrieben / geantwortet hat.

Nun auf jeden Fall hat Marc dem Rolf geantwortet (Beitrag vom 23.08.2019, 19.34 Uhr) und das zitiere ich mal:

Doch, ist mehr. Die aktuelle Site enthält die von Dir vorgeschlagene Info (Volumen und Abspieldauer der Kapitel) nicht. Oder habe ich sie übersehen?

Nein, das wird vermutlich zu viel. Aber das sollte der Autor der Seite entscheiden. So was muss man ja ich an einem Tag machen. Ich denke, so etwas kann sich lohnen, denn je besser die Seite mit den Jahren wird, desto erfolgreicher wird sie.

Ich möchte Marc zustimmen und Rolf seine Bedenken nehmen: ich möchte die Seite schon so gut als möglich machen! Was Ihr beiden da jetzt genau diskutiert, verstehe ich nur in Ansätzen. Aber wenn es dann praktisch wird, kann ich ja fragen.

Was ich gut fände, wenn die Seite dann auch wirklich für Sehbehinderte / Blinde navigierbar und nutzbar wäre. Das hatte ich bislang noch gar nicht auf dem Radar. Dazu habe ich dann (Voraussetzungen und wie Blinde mit einer speziellen Tastatur statt mit der Maus navigieren) bestimmt noch Fragen ...

Gute Nacht und bis hoffentlich nächste Woche

Holger

[Matthias Apsel]

Hallo AudioBibel,

Mal nebenbei: ich finde die Auflistung der Threads irgendwie komisch und unübersichtlich

Versuch doch mal die Nested-Ansicht (Unter Einstellungen -> Personalisierung).

Bis demnächst
Matthias

[Der Martin]

Hallo Matthias,

Mal nebenbei: ich finde die Auflistung der Threads irgendwie komisch und unübersichtlich

Versuch doch mal die Nested-Ansicht (Unter Einstellungen -> Personalisierung).

die ist doch AFAIK Standardeinstellung. Und gerade die finde ich unübersichtlich, weil nur schlecht erkennbar ist, wer wem antwortet.

Darum bin ich ja so ein überzeugter Fan der Thread-Darstellung.

Ich weiß, die Meinungen darüber gehen auseinander. Aber wenn jemand sich über eine Darstellung beklagt, müsste man eigentlich erstmal hinterfragen, welche Darstellung derkenige denn gegenwärtig verwendet.

Ciao,
 Martin

[Matthias Apsel]

Hallo Der Martin,

die ist doch AFAIK Standardeinstellung.

Ja, aber Audiobibel ist schon eine Weile dabei, sodass er durchaus die Thread-Ansicht gewählt haben könnte.

Und gerade die [nested-Ansicht] finde ich unübersichtlich, weil nur schlecht erkennbar ist, wer wem antwortet.

Ich glaube, es ist in beiden Darstellungen gleich schwierig herauszufinden, auf wen der heilige Martin geantwortet hat.

Aber, dass du mir geantwortet hast, ist klar erkennbar 😀

Bis demnächst
Matthias

[Der Martin]

Hallo,

die ist doch AFAIK Standardeinstellung.

Ja, aber Audiobibel ist schon eine Weile dabei, sodass er durchaus die Thread-Ansicht gewählt haben könnte.

da ist wohl was dran. Ungeachtet dessen könnte Holger ja einfach an der von dir beschriebenen Stelle die andere Einstellung wählen und probieren, ob er damit besser zurechtkommt.

Und gerade die [nested-Ansicht] finde ich unübersichtlich, weil nur schlecht erkennbar ist, wer wem antwortet.

Ich glaube, es ist in beiden Darstellungen gleich schwierig herauszufinden, auf wen der heilige Martin geantwortet hat.

Wenn der Thread eine gewissen Ausdehnung erreicht hat, ja. Aber in der Threaded-Ansicht hilft immer noch die senkrechte Linie zum Elternposting, an der man sich beim Aufwärtsscrollen entlanghangeln kann.
In der Nested-Ansicht kann man dagegen die Einrückungstiefe nur schätzen - oder gibt es da eine vergleichbare Orientierungshilfe?

Ciao,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Wenn der Thread eine gewissen Ausdehnung erreicht hat, ja. Aber in der Threaded-Ansicht hilft immer noch die senkrechte Linie zum Elternposting, an der man sich beim Aufwärtsscrollen entlanghangeln kann.
In der Nested-Ansicht kann man dagegen die Einrückungstiefe nur schätzen - oder gibt es da eine vergleichbare Orientierungshilfe?

Diesen Baum gibt es in der nested-Ansicht auch. Nur ist er etwas bis deutlich weiter oben.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

es könnte ganz praktisch sein, wenn in der Nested Ansicht jedes Antwort-Posting einen Backlink enthielte, d.h. wenn ich im Posting #4711 bin, das eine Antwort auf Posting #4201 darstellt, müsste bei #4711 stehen: "<a href="#4201">Zum Dingsbums</a>".

Was man für Dingsbums schreibt, da bin ich unschlüssig. Wie nennt man einen Beitrag, auf das sich eine Antwort bezieht? Ist "Zum Bezugs-Beitrag" ein verständlicher Text? Oder "Zum beantworteten Beitrag"? Das ist so ein Riesentext und vermutlich fragt sich der Uneingeweihte immer noch: Hä? Und "Zum vorigen Beitrag" ist noch verwirrender...

Rolf

[Matthias Apsel]

Hallo Rolf B,

es könnte ganz praktisch sein, wenn in der Nested Ansicht jedes Antwort-Posting einen Backlink enthielte, d.h. wenn ich im Posting #4711 bin, das eine Antwort auf Posting #4201 darstellt, müsste bei #4711 stehen: "<a href="#4201">Zum Dingsbums</a>".

Wenn du das als notwendig erachtest, warum dann nur für die nested-Ansicht?

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

ich habe mich nicht dagegen ausgesprochen, aber in der Nested-Ansicht dürfte der Leidensdruck größer sein.

Meine "Lösung" ist bisher, die Maus an den linken Rand einer Antwort zu schieben und dann mit dem Mausrädchen zu drehen, bis ich zum passend eingerückten Bezugsposting komme. Klappt natürlich nur für Mausschubser.

Rolf

[marctrix]

Hej AudioBibel,

Ich möchte Marc zustimmen und Rolf seine Bedenken nehmen: ich möchte die Seite schon so gut als möglich machen! Was Ihr beiden da jetzt genau diskutiert, verstehe ich nur in Ansätzen. Aber wenn es dann praktisch wird, kann ich ja fragen.

Mir geht es zeitlich so ähnlich wie dir, daher auch meine verzögerten antworten…

Ich erkläre mal, worum es ging. Ich hatte in meinem vorschlag Daten drin, die du bisher gar nicht anbietest, so als best practice-Beispiel.

Da stand dann an jedem Download-Link wie lange die Audio-Datei läuft, wie viele Megabyte sie hat usw.

So kann der Nutzer vor dem download entscheiden, ob er das jetzt sofort zu Lasten seines mobilen Datenvolumens anklicken möchte - oder ob er vielleicht doch noch wartet bis er am nächsten HotSpot ist. Audio-Dateien sind ja unter Umständen ziemlich groß. Auch lohnt es sich vielleicht gar nicht mehr eine halbstündige Datei herunterzuladen, wenn man in 5 Minuten an seiner Haltestelle ankommt und der Download schon 5-10 Minuten dauert…

Natürlich ist das chön für den Nutzer solche Informationen zu haben, um informierte Entscheidungen treffen zu können (eine Behinderung spielt dabei gar keine rolle). Für den Seitenanbieter (also dich) ist das recht aufwändig, denn du müsstest bei jeder Datei nachschauen, wie lange die läuft und wie groß die ist und das dann dran schreiben - überall wo du auf diese Datei verlinkst.

Aber je mehr Komfort du Deinen Nutzern anbietest, desto lieber kommen sie zurück. Eigentlich ist das eine aufgabe, die man automatisieren sollte. Aber es lässt sich auch händisch erledigen - halt so nach und nach. Ich ermuntere zu ständiger Pflege einer Seite noch aus einem anderen Grund: google honoriert solche Arbeiten an der Seite. Änderungen wirken sich positiv auf das Ranking aus. leider kommt man allein damit nciht auf Platz 1 - Google bewertet IMHO bereits über 200 Aspekte. Aktualität und Pflege ist nur ein Aspekt. Das macht SEO so aufwändig, weil man an so vielen Schrauben drehen muss (Responsivität, aussagekräftige Texte, Zugänglichkeit, Performanz usw) - allein die paar hier aufgelisteten Dinge bedeuten alle sehr viel Arbeit.

Mühsam ernährt sich das Eichhörnchen. Ist halt so…

Marc

[marctrix]

Hej Matthias,

von dem man tief im Herzen eigentlich selber weiß, dass es Nacktheit wirklich stimmig ist…

Ich würde an deiner Stelle mit deiner Autokorrektur mal ein ernstes Wörtchen reden. 😂

Ja, vor allem, weil da so was simples wie "nicht" stehen müsste. Seltsam.

Aber ich sehe, ihr habt euch während meiner Fortbildung schon drüber lustig gemacht. Dann kann ich mir das sparen. 😆

Marc

[AudioBibel]

Danke Marc,

ich habe die Originalbilder in einem zweiten Verzeichnis als Sicherung gespeichert, kann also an den Kopien, an denen ich gerade arbeite nach Belieben was verhunzen.

Die neuen Bilder habe ich weiter unten noch mal online gestellt. Die Bibel hat nun 380 x 380 Px (50 %ige Skalierung nach Zurechtschneiden), der Kopfhörer hat immerhin noch 758 x 758 Px (obwohl deutlich stärker skaliert). Warum die nun immer noch so überproportional unterschiedlich angezeigt werden, verstehe ich nicht.

Kann ja aber sein, daß das nachher durch das Einbetten in den HTML angeglichen wird?

Grüßle

Holger

[Matthias Apsel]

Hallo AudioBibel,

Die Bibel hat nun 380 x 380 Px (50 %ige Skalierung nach Zurechtschneiden), der Kopfhörer hat immerhin noch 758 x 758 Px (obwohl deutlich stärker skaliert). Warum die nun immer noch so überproportional unterschiedlich angezeigt werden, verstehe ich nicht.

Weil sie so unterschiedlich groß sind.

Bis demnächst
Matthias

[AudioBibel]

Hallo Matthias,

wie wahr! :-)

Ein neuer Versuch:

Uff!

Grüßle

Holger

[marctrix]

Hej Holger,

Ein neuer Versuch:

Ein gelungener!

Uff!

Mühsam ernährt sich das Eichhörnchen, aber es wird!

Mal etwas zum Hintergrund. Als Apple hochauflösende Displays auf Handys eingeführt hat, gab es ein Problem (das vorher eigentlich auch schon auf Desktops bestand, auf den kleinen Smartphone-Bildschirmen war es nur gravierender):

Kaum jemand konnte die gestochen scharfen aber winzig kleinen Schriften noch lesen. Wenn ein Entwickler die üblichen 10-16px für seine Webseite angab und die wurden auf einem Display mit winzigen Pixeln dargestellt, waren auch die aus 16 winzigen Pixeln bestehenden Schriften winzig.

Der Trick: Apple vervierfachte die Display-Auflösung (in Höhe und Breite die doppelte Anzahl von Bildpunkten) und stellte die Schrift nun doppelt so hoch dar, wie vom Seitenbetreiber angegeben.

Nun passte es wieder: die Schrift war so groß wie vorher. Weil aber zur Darstellung die vierfache Menge an Rasterpunkte bereit stand, sah sie dabei knackig scharf aus.

Wenn man ein altes und eine neues Handy nebeneinander legte wurde der Unterschied besonders deutlich.

Um nun zu deinen Bildern zu kommen. Dasselbe, was Apple mit der Schrift machte (doppelt so hoch und doppelt so breit anzeigen) musste auch mit Bildern so passieren, sonst passt das Größenverhältnis nicht mehr.

Seither also wird ein Bild, das 100x100 Pixel groß ist auf 200x200 Pixeln angezeigt. Genauso groß und genauso unscharf wie auf alten Handys was neben der jetzt gestochen scharfen Schrift besonders auffällt. Der Trick, den man nun anwenden sollte: nimm ein Bild mit 200x200 Pixeln und schreibe in dein css, dass es eine Größe von 100x100 Pixeln haben soll. Nun stellt das Handy das Bild, das 200x200 Pixel hat auch genau auf diesen dar.

Im css stehen 100 Pixel für das Bild (wird auf 200 angezeigt) und 16 für die Schrift (wird auf 32 angezeigt). Die Verhältnisse stimmen wieder, die Größe ist dieselbe wie auf alten Handys aber für die Darstellung benutzt das Handy die vierfache Auflösung und Bild wie Schrift sind nun gestochen scharf.

Das geht nur, wenn die dafür nötigen Bildinformationen auch im Bild vorliegen. Daher Bilder immer doppelt so groß angeben, wie du im css angibst.

Übrigens machen das schon seit Jahren alle Handy-Displays so und Apple mindestens macht das inzwischen auf seinen Retina-Displays auch auf dem Desktop.

Marc

[Rolf B]

Hallo AudioBibel,

Warum die nun immer noch so überproportional unterschiedlich angezeigt werden, verstehe ich nicht.

Du musst gucken, wie groß das Original ist und daraus den Prozentsatz berechnen, mit dem Du skalieren musst. Ist das Original 1000x1000, und du willst 400x400 haben, musst Du mit 40% skalieren. Ist das Original 2780x1500, und du willst eine Breite von 400 haben, musst Du $\frac{400}{2780}\cdot 100 \approx 14{,}4 \%$ verwenden. Mathekenntnisse sind keine Schande 😉

Oder du guckst, ob dein Grafikprogramm nicht nur um einen bestimmten Prozentsatz, sondern auf eine bestimmte Größe skalieren kann, das ist oft möglich.

Kann ja aber sein, daß das nachher durch das Einbetten in den HTML angeglichen wird?

Ja schon, das wird es. Der Browser skaliert auch. Aber es ist nicht die Lösung, weil ein zu großes Bild zu viel Datenvolumen verknuspert.

Wenn Du das mit deinem Leib- und Magen Grafikprogramm nicht hinbekommst, guck Dir Irfan View an. Das ist das Schweizer Taschenmesser für Grafik - klein, kompakt und universell (und rot, zumindest das Icon). Der kann zum einen fast alles anzeigen, und zum anderen kann er auch beschneiden, skalieren und in (fast) beliebigen Formaten speichern.

Rolf

[AudioBibel]

Hallo Rolf [noch ein Helfer :-) ]!

Uff! Das ist ja jetzt wieder eine Menge "Böhmischer Dörfer". Aber ich habe schon gelesen, daß Du am Basteln einer Vorlage bist. Danke!

du solltest die Bilder so weit beschneiden, dass kein unnötiges Weiß (oder Transparenz) am Rand ist. Das Buch ist mit 1145x812 hochgeladen, lässt sich aber auf ca 700x620 beschneiden (ich hab's jetzt nicht genau ausgemessen). Dadurch bist Du flexibler in der Verwendung. Wenn Du beim Einsatz auf der Webseite Platz um das Bild herum brauchst, machst Du das dort mit CSS (Stichwort: Padding und Margin).

Das Beschneiden wird wohl kein Problem sein; kriege ich entweder selbst hin, oder lasse es vom Ersteller der Grafiken machen. Wie das dann genau mit dem Platzieren (Stichwort Padding und Margin) geht, frage ich noch nach, wenn es so weit ist.

mach Dir eine Vorstellung haben, wie groß die Bilder maximal werden sollten. Zum Beispiel: 200 Pixel. Das verdoppelst Du - 400px, und du skalierst dein Foto auf diese Größe. Es ist vermutlich nicht allzu gravierend für Anwender, die ohnehin ein paar Megabyte Audio anhören wollen - aber die Frage ist nun: Brauchst Du transparenten Hintergrund? Oder kannst Du ihn einfach weiß machen - deine HTML Seite ist ja auch weiß. JPG kann keine Transparenz, aber mit einem JPG bekommst Du dein Buch auf unter 30K Dateigröße. Als PNG oder GIF ist Transparenz möglich, aber du kommst dann auf Dateigrößen von 80K-120K. Du musst jedenfalls weg von den aktuell 2,8MB.

Wie groß die Bilder sein sollten, kann ich ehrlich gesagt nicht sagen; aber ich kann es ja mal ausprobieren und dann noch mal nachfragen, was Ihr davon haltet. Transparenten Hintergrund brauche ich eigentlich nicht (bei dieser aktuellen Website). Sollte ich sie mal ändern wollen, wäre es natürlich "zukunftssicher" jetzt schon PNG zu nehmen. Ansonsten (was ich eher vermute) eigentlich unnötig; da hast Du recht, Rolf.

Wie auch immer - durch die Bereitstellung des Bildes in doppelter maximaler Anzeigegröße kann ein JPG ziemlich aggressiv komprimiert werden, und sieht immer noch gut aus.

Ok. Das merke ich mir; doppelt erforderlicher Wert sollte ausreichen, um dann doch JPG zu nehmen. Danke!

Die eigentliche Webseite hat aktuell ein Ärgernis: Sie ist nicht Tastaturbedienbar. Die "Anzeigen" Dinger (die Buttons sein möchten) lassen sich nur per Maus bedienen. Gerade Leute, die auf Audioinhalte angewiesen sind, haben keine Maus. Für die ist es sogar ärgerlich, wenn sie erstmal einblenden müssen. An Stelle deiner klickbaren divs solltest Du Buttons verwenden. Die kann man so stylen, dass sie so wie jetzt die DIVs aussehen, und sie sind ab Werk interaktiv und für Assistenztechniken zugänglich.

Das habe ich eigentlich noch nie bedacht. Ich hatte zwar schon einmal eine Anfrage von einer Gemeinde, die die Bibel an Blinde weitergeben möchte, aber diesbezüglich noch keine Rückmeldung erhalten. Brauche halt auch hier wieder Anleitung, wie ich das verbessern / ändern kann. Das Argument ist jedenfalls gut!

Deinen Header-Bereich würde ich mit Flexbox gestalten. Grid ginge auch, funktioniert aber in alten Browsern, vor allem dem Relikt Internet Explorer, schlecht. Das sind nur wenige Prozent der potenziellen Nutzer, aber bei denen würde durch Grid-Technik die Anzeige verscheußlicht (die Header-Elemente stehen dann untereinander statt nebeneinander). Welche Anforderungen an Alt-Kompatibilität hast du?

KEINE Ahnung, was Du da meinst (Flexbox / Grid?). Sollten das betriebssystemabhängige Programme sein, darauf hinweisen, daß ich schon über fünf Jahre nur noch mit Linux arbeite. Und wie diese Programme zu bedienen sind, weiß ich natürlich auch wieder nicht ... :-| Und bezüglich der Kompatibilität würde ich sagen, alles was (Smartphone / Tablet) älter als Android 4 ist, kann man vergessen und so alte IEs (Windows) sollten schon berücksichtigt werden (auch wenn ich nicht verstehe, wie man diesen Browser überhaupt benutzen kann - so was von unsicher).

Du solltest auch den Gebrauch von <table> reduzieren. "Das alte Testament" und "Die geschichtlichen Bücher" sind Überschriften und sollten als Überschrift im HTML erscheinen - das geht in einer Table nicht. Ich mache Dir mal eine Vorlage, wie Du so etwas besser gestalten kannst. Man könnte sogar behaupten, dass die einzelnen Bücher keine tabellarischen Daten, sondern eine Liste sind, und darum als Liste zu gestalten sind (<ul> und <li>), aber ich bin eigentlich dagegen, weil die Table die schöne Eigenschaft hat, dass die Spaltenbreiten übergreifend gleich bleiben. Das ist responsiv schwieriger. Mal gucken...

Daß da im HTML mit den Überschriften ein Logikfehler drin ist, wissen wir (mein Freund und ich) eigentlich. Aber dazu müßte ich mich nochmal einarbeiten. Vom HTML her eigentlich falsch, im Aussehen aber - denke ich - doch o.k. Aber wenn Du mir da eine Vorlage machen kannst; super und DANKE!

Liebe Grüße

Holger

[Rolf B]

Hallo Holger,

wie ich mir das mit den Buttons denke, hast Du ja schon gesehen. In die Buttons habe ich zwei SPAN eingesetzt, wovon immer nur einer sichtbar ist. Einer für "ausklappen", der andere für "einklappen". Mit dem Attribut aria-controls beschreibe ich die Verbindung zur aus-/eingeklappten Table, und mit aria-expanded markiere ich, ob ausgeklappt ist oder nicht. Diese beiden Attribute gehören zu WAI-ARIA, einem Standardset von Attributen für zugängliche Anwendungen. Das Ausklappen mache ich mit Javascript, und zwar so, dass man im HTML nichts vom Script sieht. Damit das bei Dir so wie im Fiddle funktioniert, ist es am einfachsten, wenn Du das Script an das Ende vom Body stellst. Die Alternative ist ein DOMContentLoaded Handler, das muss man erstmal kennen.

Flexbox und Grid sind CSS Techniken, die vergleichsweise neu sind. Immerhin schon so alt, dass der Internet Explorer Flexbox kennt (wenn auch etwas buggy). Grid kennt er in einer veralteten Version; wenn man ein Grid so bauen will dass es mit aktuellen Browsern UND dem IE funktioniert, wird das mühsam.

Darum habe ich in meinem JSFiddle Flexbox für den Header und die H2-Überschrift verwendet (display:flex) und für die Kapitelnavigation die TABLE beibehalten.

Bei Fragen zu dem, was ich da gebaut habe, melde Dich gerne.

Rolf

[AudioBibel]

Guten Morgen Rolf, guten Morgen miteinander :-)

wie ich mir das mit den Buttons denke, hast Du ja schon gesehen. In die Buttons habe ich zwei SPAN eingesetzt, wovon immer nur einer sichtbar ist. Einer für "ausklappen", der andere für "einklappen". Mit dem Attribut aria-controls beschreibe ich die Verbindung zur aus-/eingeklappten Table, und mit aria-expanded markiere ich, ob ausgeklappt ist oder nicht.

Ja, jetzt habe ich es mir kurz angeschaut. Das müßte ich doch eigentlich auch in meinen HTML-Editor (ich verwende unter Linux den Bluefish 2.2.10) und einer Kopie meiner index-Seite ausprobieren können. Ich vermute aber, daß ich noch mehr umbauen muß, da ja jetzt auch JAVA an Bord ist. Und das ist dann auch für Blinde, die ohne Maus arbeiten bedienbar? Das wäre ja super!

Das Ausklappen mache ich mit Javascript, und zwar so, dass man im HTML nichts vom Script sieht.

Javasricpt hatten wir bislang bewußt weggelassen (glaube ich zumindestens). Warum weiß ich gar nicht mehr so genau. Meine es ist nicht so sicher und von den Suchmaschinen nicht unbedingt gerne gesehen …

Die Alternative ist ein DOMContentLoaded Handler, das muss man erstmal kennen.

Hab' ich mir mal kurz angeschaut: Kenn ich nicht und das sind für mich wirklich nur "Böhmische Dörfer". Zu viel, um mich da auch noch einzulesen.

Nun, ich habe auch die Originalbilder inzwischen zugeschnitten und danach ins JPG-Format exportiert. Ich stell' sie hier nochmal rein, damit Ihr mich kontrollieren könnt. Sind sie ok (denn sie sind nach wie vor unterschiedlich groß), oder kann man das so lassen? Ich habe sie eher etwas zu groß skaliert …

Bei Fragen zu dem, was ich da gebaut habe, melde Dich gerne.

Rolf Ja, Fragen habe ich jetzt, da ich das gerne praktisch umsetzen möchte, massenweise. Ich meine, das würde den Rahmen des Forums sprengen. Wäre es daher möglich, das privat abzuklären, die Schritte, die wir dann gehen aber (für andere, die ähnliche Probleme haben) hier im Forum zu dokumentieren und zu kommentieren?

Danke bis hierhin. Ich bin jetzt erst mal wieder eine Weile weg (Urlaub ;-)

Liebe Grüße

Holger

Anhang (neue Bilder: zuerst skaliert auf 50 %, dann exportiert als JPG):

Ich krieg' noch einen Vogel, aber jetzt habe ich sicherlich fünf mal probiert, die neuen Bilder einzufügen. Es klappt einfach nicht …

[Rolf B]

Hallo AudioBibel,

Ich vermute aber, daß ich noch mehr umbauen muß, da ja jetzt auch JAVA an Bord ist.

Nein. Nicht Java. JavaScript. Das sind verschiedene Sprachen.

Javasricpt hatten wir bislang bewußt weggelassen (glaube ich zumindestens).

Da glaubst Du falsch. Guck nach /skripte/script.js, darin sind die Funktionen GruppeEinblenden und GruppeAusblenden, die ihr mit onclick=... an die entsprechenden divs hängt. Dazu noch zwei Cookie-Funktionen, die dazu zu dienen scheinen, den Ausklappstatus festzuhalten. Und eine Cookie-Auswertefunktion, die am load Event des Body hängt.

Die Alternative ist ein DOMContentLoaded Handler, das muss man erstmal kennen.

Hab' ich mir mal kurz angeschaut: Kenn ich nicht und das sind für mich wirklich nur "Böhmische Dörfer". Zu viel, um mich da auch noch einzulesen.

Nein, denk mal nach. Ihr macht das jetzt auch schon, nur nicht über DOMContentLoaded, sondern über das load Event. Guck, was bei eurem Body steht: onload="CookieAuswerten()". Das kannst du in einem Script auch so machen:

document.body.addEventListener("load", CookieAuswerten);

bzw. DOMContentLoaded statt load - der Unterschied ist, dass DOMContentLoaded etwas früher feuert. Bei load werden noch ein paar Ressourcen abgewartet. Wenn euer Script ganz am Ende des body eingebunden wird, brauchst Du aber weder das load noch das DOMContentLoaded Event abzuwarten, sondern kannst einfach mit dem Script loslegen, weil das DOM dann schon bereitsteht und manipuliert werden kann.

Euer onload ruft CookieAuswerten auf. Wenn das Script am body-Ende steht, dann rufst Du dort CookieAuswerten einfach direkt vor oder nach meinem addEventListener('click'...) auf. Fertig. Kein onload mehr, kein Hantieren mit DOMContentLoaded nötig. Das CookieLoschen und CookieSetzen müsstest Du in meinen Eventhandler passend einbauen, und CookieAuswerten muss so geändert werden, dass es die Tables sichtbar macht statt Rows.

Und ihr habt noch mehr JavaScript drin: die aktuelle Seite hat

<div ... onload="GruppeEinblenden('GruppeGeschichte')">...</div>
<div ... onload="GruppeAusblenden('GruppeGeschichte')">...</div>

und class='GruppeGeschichte' an den Rows, die dann ein- oder auszublenden sind.

Mein JSFiddle hat

<button class="expander" aria-controls="at-hist" aria-expanded="true">...</button>

Das at-hist ist die ID der Table, die aus- oder einzublenden ist. Da bei mir eine Gruppe eine Table ist, muss ich das nicht auf Row-Ebene machen, sondern kann die ganze Table verstecken. Das mache ich durch hinzufügen der Klasse visible an eine einzublendende Table, und die CSS Regel table:not(visible) { display:none; }. Über aria-expanded merke ich mir, ob der Bereich ein- oder ausgeblendet ist.

Rolf

[AudioBibel]

Hallo Rolf (bald Zeit fürs Bett),

vielen Dank für Deine ausführlichen Erklärungen! :-)

Aber jetzt geht's wieder los (wie insgeheim befürchtet). Ich seh' bald den Wald vor lauter Bäumen nicht mehr. Ein Fachausdruck nach dem anderen. Uff! 😉

Nein. Nicht Java. JavaScript. Das sind verschiedene Sprachen.

Klar, da hab ich was falsch im Kopf gehabt (oder nie richtig rein gekriegt). Ok. Danke!

Da glaubst Du falsch. Guck nach /skripte/script.js, darin sind die Funktionen GruppeEinblenden und GruppeAusblenden, die ihr mit onclick=... an die entsprechenden divs hängt. Dazu noch zwei Cookie-Funktionen, die dazu zu dienen scheinen, den Ausklappstatus festzuhalten. Und eine Cookie-Auswertefunktion, die am load Event des Body hängt.

Ok. Hab ich gefunden und angeschaut. Wie gesagt, solche Dinge hat mein Freund gemacht und ich hab nur demütig gestaunt (staune noch).

Der ganz Rest ist für mich jetzt sehr theoretisch. Wie läßt sich denn nun Dein JSfidle (oder wie muß ich das richtig bezeichnen?) und das darin enthaltene javascript in meine Seite korrekt einbauen? Ich muß ja den HTML-Code an die richtigen Stellen einfügen und ebenso vermute ich, daß ich mein javascript gegen Deines austauschen oder doch zumindestens ergänzen / umbauen muß? Kann mir hier HIlfestellung geleistet werden? Das ist doch wohl schon ziemlich komplex ...

Für heute erst mal gute Nacht und wieder mal vielen Dank!

Holger

[Rolf B]

Hallo AudioBibel,

ich kann das versuchen, irgendwie "vorzumachen". Aber ist denn dein Freund nicht mehr verfügbar?

Rolf

[AudioBibel]

Hallo Rolf,

meinen Freund erreiche ich gerade nicht. Entweder im Urlaub oder (wie meist) viel um die Ohren. Eigentlich will ich es ja auch selbst machen. Er hat da schon so viele Stunden investiert …

Was schlagt Ihr vor, daß ich mich da selbst in die Materie einarbeiten kann? Wie gehe ich am besten vor? Zeit ist bei mir nämlich auch wirklich Mangel (viel Arbeit, Familie, Gemeinde- und Vereinsarbeit). Ich bin offen! 😃

Bin schon wieder weg (ganz schön streßig, wenn man Liegengebliebenes im Urlaub erledigt).

Liebe Grüße

Holger

[marctrix]

Hej AudioBibel,

Wie gesagt, solche Dinge hat mein Freund gemacht und ich hab nur demütig gestaunt (staune noch).

Eigentlich ist das SELF-Projekt dafür gedacht, Menschen zu helfen, die ihre Webseite selber pflegen möchten. Wir helfen dir gerne, das dafür nötige Wissen Schritt für Schritt zu erlernen.

Die Seite jetzt für dich komplett umzubauen, würde ich persönlich nicht machen wollen, wenn Rolf dazu bereit ist, spricht natürlich nichts dagegen.

Nur eine Webseite sollte etwas lebendiges sein, an dem sich hin und wieder etwas ändert. Es ist fraglich, ob jedesmal jemand hier das für dich übernehmen wird.

Dann kannst du noch woanders suchen. Jeder wird dir etwas seiner Philosophie entsprechendes dranbasteln. Das kann gut gehen, muss es aber nicht. Viele Köche verderben mitunter den Brei.

Meinst du nicht, du könntest dir die Grundlagen aneignen und selber Hand anlegen. Mag sein, dass das jetzt viel scheint, ist es aber nicht. Vor allem ist das benötigte HTML keine schwere Sprache. CSS ist zwar sehr umfangreich, aber du brauchst ja nicht alles, was CSS kann für deine Seite. Und das bisschen Javascript kann dir dann vielleicht wirklich jemand (erst mal) schreiben, damit du nicht alles auf einmal lernen musst.

Der ganz Rest ist für mich jetzt sehr theoretisch.

Aber die Praxis kann wirklich viel Spaß machen. Magst du dich drauf einlassen?

Marc

[Gunnar Bittersmann]

@@AudioBibel

Lesestoff:

• Webkrauts: Das richtige Grafikformat für den richtigen Zweck
• SELFHTML-Wiki: Grafikformat
• SELFHTML-Wiki: Tutorial Bilder im Internet: Das richtige Format

LLAP 🖖

[Der heilige Martin]

Nun, die Grafik, die ja auf jeder Seite zu sehen ist, ist richtig schlecht. Sie beinhaltet Text und zwei sehr pixelige Bilder

HTML-seitig ersetzt Du den kompletten <header>-Block (mitsamt des nachfolgenden <br>, das dort ganz einsam und allein steht und bitterlich weint) durch dieses:

<header>
    <h1>Audio-Bibel<br><img src="kopfhoerer.png"><span>NeÜ</span><img src="bibel.png"></h1>
    <p>Deutschsprachige MP3-Dateien der <span>n</span>euen <span>e</span>vangelistischen <span>Ü</span>bersetzung zum kostenlosen Download.</p>
    <p>Übersetzer: Karl-Heinz Vanheiden</p>
</header>

In der CSS-Datei löscht Du die beiden Blöcke .header und #headerimage (jeder Block wird durch geschweifte Klammern umfasst). Anschließend fügst Du nachfolgende Zeilen hinzu.

Je nach Gusto müsstest Du die Schriftgröße anpassen, sie ist im Block header h1 als font-size festgelegt. Mir ist sie in Deinem Original deutlich zu groß, der halbe Bildschirm ist voll Überschrift. Sowas macht man bei Zeitungsüberschriften, damit sie am Zeitungsstand aus der Ferne zu erkennen sind, aber nicht auf Webseiten. Gut, ist natürlich Geschmackssache.
Den Abstand der kleinen Dekobiler zum mittigen Text NeÜ kannst Du im Block header h1 img mittels des padding-Wertes regulieren (die 0 ist der Innenabstand oben/unten, 1em ist der Innenabstand rechts/links).

header {
    color: #00f;
    margin: 1em 0 2em;
    text-align: center;
}
header h1 {
    font-size: 5em;
    font-style: italic;
    margin: 0;
}
header h1 img {
    height: 1em;
    padding: 0 1em;
    vertical-align: middle;
}

header span {
    color: #f00;
}

header p {
    margin: 0;
}

An den Grafiken musst Du unbedingt nochmal arbeiten. Behalte jedoch die Originale!

Beschneide die Bilder erstmal so, dass nahezu kein oder gar kein Rand mehr vorhanden ist. Die Größe kannst Du ohne weiteres auf 200 oder gar 100 Pixel Höhe beschränken, abhängig davon, wie groß Du sie auf dem Bildschirm haben möchtest. Abschließend benutze als Dateiformat jpg mit einer Qualität von 70% bis 80%, das ist für so kleine Dekoelemente ausreichend (orientiere Dich am tatsächlichen Ergebnis, probiere verschiedene Stufen).

Im HTML-Code oben habe ich "kopfhoerer.jpg" und "bibel.jpg" als Pfade bzw. Dateinamen benutzt, diese musst Du gegebenenfalls entsprechend anpassen.

[Rolf B]

Hallo, Edler von Tours,

sicher, dass "Audio-Bibel" der h1 Kandidat ist? Auf der Haupt-Seite vermutlich schon, auf den Verteilerseiten tue ich mich schwerer damit; dort hätte ich eher die Titelzeilen "Das alte Testament" bzw. "Das neue Testament" als h1 gesehen

Würde dann bedeuten, dass auf der index.htm das h1 im Header ist und auf den übrigens Seiten (wie z.B. /html/auswahl_at.htm) im main-Teil.

Rolf

[Der heilige Martin]

Und wo wir gerade dabei sind:

Die gruselige Navigationstabelle mit Genuss in die Tonne treten (mitsamt dem jetzt noch einsameren <br> danach) und durch dieses ersetzen:

<nav>
    <ol>
        <li class="at rahmen"><a href="html/auswahl_at.htm">Altes Testament</a></li>
        <li class="nt rahmen"><a href="html/auswahl_nt.htm">Neues Testament</a></li>
        <li class="st rahmen"><a href="html/auswahl_sonstiges.htm">Sonstiges</a></li>
    </ol>
</nav>

Dazu diese Gestaltung:

nav ol {
    list-style-type: none;
    margin: 1em auto;
    padding: 0;
}
nav li {
    font-size: larger;
    font-weight: bold;
    text-align: center;
    padding: 0.33em 0;
    margin: 0.1em 0;
}
nav .at {
    background-color: rgb(150, 191, 217);
}
nav .nt {
    background-color: rgb(217, 187, 150);
}
nav .st {
    background-color: rgb(184, 184, 184);
}

(Die Farben in .at, .nt und .st könnte man durch CSS-Variablen ersetzen, falls sie auf den Unterseiten auch noch anderweitig Verwendung finden, aber das habe ich mir jetzt gespart.)

PS: Wieso erscheint eigentlich jedesmal, wenn man hier im Forum einen Doppelpunkt eintippt, so eine alberne Bilderliste? Es nervt ein wenig.

[Der heilige Martin]

… und ich vergaß:

Im Kopf der Seite:

<meta>-robots, -revisit-after und -keywords rauswerfen, sind nutzlos.

"index, follow" in robots machen die Suchmaschinen sowieso.
An revisit-after mit kurzen Zeiten haben sie sich noch nie gehalten, denn das ist komplett irrsinnig – man stelle sich vor, jeder würde da "1 hour" reinschreiben.
keywords war mal nett gedacht, aber vermutlich vor einem Vierteljahrhundert auch das allererste Spam-Opfer, das in der Folge durch Suchmaschinen ignoriert wurde. Kann man für interne Indizierung benutzen, falls man sowas macht, ansonsten nicht mehr als Datenrauschen.

Dein <title> ist … lang. Stell' Dir vor, der würde so auf einem Buch erscheinen. Kurz und knackig, der Rest gehört in die Beschreibung unter <meta>-description.

Ich gebe zu, mag fürs Web die Idee mit den Microsoft-Kacheln unter msapplication, aber ob die überhaupt noch jemand einsetzt? Den Wildwuchs unter apple-touch-icon kannst Du in jedem Falle auf eine Grafik, nämlich die 196er unter android-icon.png, reduzieren. Auch Apple-Telefone können Grafiken skalieren.

Last but not least: Es heisst "evangelistische", nicht "evangelische"? Wo ist der Unterschied?

[Tabellenkalk]

Hallo,

Last but not least: Es heisst "evangelistische", nicht "evangelische"? Wo ist der Unterschied?

Martin hat halt der Zersplitterung der Kirche Tür und Tor geöffnet: evangelisch ≠ evangelikal ≠ evangelistisch ≠ …

Gruß
Kalk

[MudGuard]

Hi,

    <p>Deutschsprachige MP3-Dateien der <span>n</span>euen <span>e</span>vangelistischen <span>Ü</span>bersetzung zum kostenlosen Download.</p>

Ich würde hier eher die ganzen Wörter ins jeweilige span packen statt nur den ersten Buchstaben, und dann mit ::first-letter die Hervorhebung vornehmen. Dürfte vermutlich für Vorlese-Software besser sein.

cu,
Andreas a/k/a MudGuard

[Der heilige Martin]

    <p>Deutschsprachige MP3-Dateien der <span>n</span>euen <span>e</span>vangelistischen <span>Ü</span>bersetzung zum kostenlosen Download.</p>

Ich würde hier eher die ganzen Wörter ins jeweilige span packen statt nur den ersten Buchstaben, und dann mit ::first-letter die Hervorhebung vornehmen.

Naheliegend, wobei ::first-letter nur für das erste Zeichen eines Blocks gilt. In Folge dessen:

header p span::first-letter {
    color: #f00;
    
}
header p span {
    display: inline-block;
}

Desweiteren header span durch header h1 span ersetzen.

[AudioBibel]

Hallo Andreas,

Du meinst wegen der Nutzung der Homepage durch Blinde / Sehbehinderte?

Das ist dann aber durch Rolf's Arbeit wohl erledigt, oder?

<p>
  <span>deutschsprachige MP3-Dateien der</span>
  <span><span class="high">N</span>euen <span class="high">e</span>vangelistischen <span class="high">Ü</span>bersetzung</span>
  <span>zum kostenlosen Download</span>
</p>

Danke für's Mitdenken!

Holger

[AudioBibel]

Hallo Martin,

vielen Dank für die nützlichen Infos!

Nun habe ich mich für die Bearbeitung von Rolf entschieden http://audiobibel.borchmann.one/. Das war einfach, da CSS, js und HTML lokal auf meinen PC kopiert werden konnten und ich (zusammen mit Freund Wolfang) das Ganze genauer in Augenschein nehmen und rumprobieren konnte.

@Rolf Ein großes Lob und Dankeschön! :-) Die Seite gefällt mir sehr gut; es gibt kaum was, wo ich vielleicht ändern möchte.

@Martin

An den Grafiken musst Du unbedingt nochmal arbeiten. Behalte jedoch die Originale!

Habe ich schon ein wenig und die Originale und die Zwischenschritte der Bearbeitungen habe ich gespeichert.

Beschneide die Bilder erstmal so, dass nahezu kein oder gar kein Rand mehr vorhanden ist. Die Größe kannst Du ohne weiteres auf 200 oder gar 100 Pixel Höhe beschränken, abhängig davon, wie groß Du sie auf dem Bildschirm haben möchtest. Abschließend benutze als Dateiformat jpg mit einer Qualität von 70% bis 80%, das ist für so kleine Dekoelemente ausreichend (orientiere Dich am tatsächlichen Ergebnis, probiere verschiedene Stufen).

Das werde ich beherzigen! Danke!

Nun werde ich erst einmal auf allen Seiten den alten gegen den neuen Header austauschen; lokal natürlich. Erst, wenn alles fertig ist, werde ich die dann ganz neue Homepage online stellen. Beim Betrachten / Bewundern der schon vorliegenden neuen Seite haben sich mir natürlich einige Fragen gestellt, die ich dann aber erst stellen werde, wenn es auch soweit ist. Sonst verzettele ich mich. Eigentlich ist es ja wirklich nicht schwer, da ich ja vieles durch Vergleichen und Ersetzen umbauen kann. :-)

Da ich frisch aus dem Urlaub zurück bin, habe ich extrem wenig Zeit, so daß sicher ein oder auch mehrere Wochen vergehen werden, bis ich mich wieder so richtig melden werde.

Doch da wäre noch was: Wie kann ich denn am effektivsten meine Fortschritte hier posten? Den kompletten HTML-Code hier reinkopieren, oder doch lieber die lokalen Dateien auf meinen Server in ein anderes Verzeichnis laden und dann den Link schicken?

Vielen Dank für Eure tolle Unterstützung und bis bald!

Holger

[marctrix]

Hej AudioBibel,

Abschließend benutze als Dateiformat jpg mit einer Qualität von 70% bis 80%, das ist für so kleine Dekoelemente ausreichend (orientiere Dich am tatsächlichen Ergebnis, probiere verschiedene Stufen). Das werde ich beherzigen! Danke!

Orientiere dich am tatsächlichen Ergebnis heißt: Sichtkontrolle. 70 bis 80 Prozent sind meiner Erfahrung nach meist nicht nötig. 40% sind in den meisten Fällen ohne sichtbare Einbußen, je nach Bild kann man noch weiter runter…

Hier mehr Infos dazu: Retina Revolution

Marc

[marctrix]

Hej AudioBibel,

Abschließend benutze als Dateiformat jpg mit einer Qualität von 70% bis 80%, das ist für so kleine Dekoelemente ausreichend (orientiere Dich am tatsächlichen Ergebnis, probiere verschiedene Stufen). Das werde ich beherzigen! Danke!

Hier kommt es auf die Sichtkontrolle an! Meiner Erfahrung nach kann man deutlich weiter runter. 40% reicht für die meisten Bilder, mitunter noch weniger.

Mehr Infos dazu unter Retina Revolution

Marc

[Gunnar Bittersmann]

@@marctrix

Hier kommt es auf die Sichtkontrolle an! Meiner Erfahrung nach kann man deutlich weiter runter. 40% reicht für die meisten Bilder, mitunter noch weniger.

Mehr Infos dazu unter Retina Revolution

So um die 40% (in Photoshop) verwende ich für Bilder, die in ihrer intrinsischen Größe angezeigt werden. Bei Retina Revolution sollte ein Wert zwischen 10% und 20% ausreichen.

LLAP 🖖

[marctrix]

Hej Gunnar,

Hier kommt es auf die Sichtkontrolle an! Meiner Erfahrung nach kann man deutlich weiter runter. 40% reicht für die meisten Bilder, mitunter noch weniger.

Mehr Infos dazu unter Retina Revolution

So um die 40% (in Photoshop) verwende ich für Bilder, die in ihrer intrinsischen Größe angezeigt werden. Bei Retina Revolution sollte ein Wert zwischen 10% und 20% ausreichen.

Ja, komme ich auch oft mit hin.

Marc