Javascript: Text aus nextSibling auslesen

[Linuchs]

Moin,

ich habe dieses HTML:

  <p>Voer de postcode of de naam van uw plaats in. <img class=translate src="img/icon_nl.png" alt="" /></p>
<!--###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in###-->

Bei Klick auf das img-Element möchte ich den Inhalt der Bemerkung zwischen <!-- -->

alert( "[" +this.parentElement.nextSibling +"]" );
alert( "[" +this.parentElement.nextSibling.substringData(0,20) +"]" );
alert( "[" +this.parentElement.nextSibling.data +"]" );
alert( "[" +this.parentElement.nextSibling.innerHTML +"]" );
alert( "[" +this.parentElement.nextSibling.value +"]" );
alert( "[" +this.parentElement.nextSibling.text +"]" );

Die erste Antwort: [[object Text]], alle weiteren sind undefined oder leer. Wie komme ich an den Text?

Gruß, Linuchs

[dedlfix]

Tach!

alert( "[" +this.parentElement.nextSibling +"]" );
alert( "[" +this.parentElement.nextSibling.substringData(0,20) +"]" );
alert( "[" +this.parentElement.nextSibling.data +"]" );
alert( "[" +this.parentElement.nextSibling.innerHTML +"]" );
alert( "[" +this.parentElement.nextSibling.value +"]" );
alert( "[" +this.parentElement.nextSibling.text +"]" );

Nimm mal lieber ein fürs Debugging besser geeignetes Werkzeug als alert()

console.log(this.parentElement.nextSibling);

Du kannst nun in der Console das Element in voller Schönheit untersuchen und musst nicht jede Eigenschaft einzeln ansprechen. Vorausgesetzt, es gibt sie überhaupt, denn ein Kommentar ist kein HTML-Element. Außerdem könntest du sehen, dass das nextSibling nicht der Kommentar ist, sondern Whitespace. Wie man mit Javascript an den Kommentar kommt, weiß ich aber nicht, dazu würde ich selbst die allwissende Müllhalde befragen müssen.

dedlfix.

[Christian Kruse]

Hallo Linuchs,

alert( "[" +this.parentElement.nextSibling +"]" );
alert( "[" +this.parentElement.nextSibling.substringData(0,20) +"]" );
alert( "[" +this.parentElement.nextSibling.data +"]" );
alert( "[" +this.parentElement.nextSibling.innerHTML +"]" );
alert( "[" +this.parentElement.nextSibling.value +"]" );
alert( "[" +this.parentElement.nextSibling.text +"]" );

Die erste Antwort: [[object Text]], alle weiteren sind undefined oder leer. Wie komme ich an den Text?

Ich vermute, du suchst textContent.

LG,
CK

[Linuchs]

alert( "[" +this.parentElement.nextSibling.textContent +"]" );

ergibt die beiden [] untereinander, also ein Zeilenumbruch.

[Der Martin]

Hallo,

  <p>Voer de postcode of de naam van uw plaats in. <img class=translate src="img/icon_nl.png" alt="" /></p>
<!--###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in###-->

Bei Klick auf das img-Element möchte ich den Inhalt der Bemerkung zwischen <!-- -->

ich bin mir gar nicht sicher, ob Kommentare überhaupt im DOM adressierbar sind.

alert( "[" +this.parentElement.nextSibling +"]" );
alert( "[" +this.parentElement.nextSibling.substringData(0,20) +"]" );
alert( "[" +this.parentElement.nextSibling.data +"]" );
alert( "[" +this.parentElement.nextSibling.innerHTML +"]" );
alert( "[" +this.parentElement.nextSibling.value +"]" );
alert( "[" +this.parentElement.nextSibling.text +"]" );

Die erste Antwort: [[object Text]], alle weiteren sind undefined oder leer. Wie komme ich an den Text?

Problem: Du hast etwas anderes in der Hand, als du eigentlich glaubst. parentElement selektiert das p-Element, aber dessen nextSibling ist ein Textknoten, nämlich der Zeilenumbruch nach dem schließenden </p>.

Ciao,
 Martin

[Christian Kruse]

Hallo Martin,

ich bin mir gar nicht sicher, ob Kommentare überhaupt im DOM adressierbar sind.

Sie sind. Zum Beispiel in der childNodes-Liste sind sie aufgeführt.

Problem: Du hast etwas anderes in der Hand, als du eigentlich glaubst. parentElement selektiert das p-Element, aber dessen nextSibling ist ein Textknoten, nämlich der Zeilenumbruch nach dem schließenden </p>.

Ja, stimmt, ist mir gar nicht aufgefallen. Guter Hinweis.

LG,
CK

[Linuchs]

Problem: Du hast etwas anderes in der Hand, als du eigentlich glaubst. parentElement selektiert das p-Element, aber dessen nextSibling ist ein Textknoten, nämlich der Zeilenumbruch nach dem schließenden </p>.

Das ist der entscheidende Hinweis. Mit

this.parentElement.nextSibling.nextSibling.data

habe ich den gesuchten Text. Danke

Nun kann ich per JS den niederländischen Anteil zum Bearbeiten anbieten.

Edit: Wenn die fremdsprachlichen Texte "drin" sind, schalte ich diese Möglichkeit wieder ab, es wird also nicht ewig das ganze Wörterbuch mitgeschickt.

[kai345]

ich habe dieses HTML:

  <p>Voer de postcode of de naam van uw plaats in. <img class=translate src="img/icon_nl.png" alt="" /></p>
<!--###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in###-->

Ich halte dieses Konzept mit Kommentaren für zu schlecht, um es sinnvoll einzusetzen. WENN du schon keine separate Daten-Datei willst (hatte ich zumindest so verstanden wg. Kontext), dann benutze statt eines Kommentars z.B. ein template-Element für die Daten. Das dürfte dann auch besser auf verschiedene Arten anzusprechen sein, wenn du es entsprechend im HTML platzierst.

<template>###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in###</template>

Viel besser wäre eine HTML-Struktur z.B.

<template>
  <span lang="de">Mittwoch</span>
  <span lang="nl">Woensdag</span>
  <span lang="en">wednesday</span>
</template>

hier könntest du , wenn du die Referenz aufs template hast, mit referenz.querySelector('.en').textContent auf den englischen Text zugreifen.

Übrigens: Um das folgende Element zu erhalten und keinen Umbruch oder Whitespace ist nextElementSibling() besser geeignet.

Alle Vorschläge sind nur angerissen und zur weiteren Ausarbeitung gedacht

/k

[Linuchs]

Normalerweise hat dieses

###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in###

im HTML-Dokument nichts verloren. Per PHP wird auf dem Server eine Sprache gewählt und ausgeliefert. Diese Tags blähen den Code unnötig auf.

Lediglich zum Einrichten des Programms möchte ich dem Übersetzer die Sprachen zur Korrektur anbieten. Das Angebot habe ich bereits, nun muss noch die Änderung programmtechnisch vollzogen werden. Bei Klick auf NL erscheint ein Formular:

Gruß, Linuchs

[Felix Riesterer]

Lieber Linuchs,

<!--###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in###-->

das empfinde ich als extrem. In vielerlei Hinsicht empfinde ich dabei Unwohlsein. Schaue doch einmal in meine Quelltexte bei meinem Umfragentool, welches auch mit JavaScript Textelemente inhaltlich verändert. Dabei tue ich im Prinzip auch nichts anderes, als aus den JSON-Daten (wie an anderer Stelle bereits erläutert) die Sprachbausteine zu verwenden. Wenn man mit einem data-*-Attribut (ich verwende data-i18n) den entsprechenden Schlüssel bereit hält, kann JavaScript nicht nur damit den Elementknoten "finden", sondern weiß auch, welche Bausteine dort passen.

Liebe Grüße

Felix Riesterer

[Linuchs]

Lieber Felix,

ich sehe dieses: <title data-i18n="page-title">Umfrageservice</title> auf der englischen Seite dieses: <title data-i18n="page-title">Survey Service</title>

Da ich page-title auf der Seite nicht gefunden habe, nehme ich an, dass PHP den sprachabhängigen Text auswählt? Kannst du bitte mal kurz erläutern, wie der Inhalt von page-title im Rohformat aussieht und wie die Auswahl getroffen wird?

Gruß, Linuchs

[Felix Riesterer]

Lieber Linuchs,

für Dein Projekt empfehle ich eine(!) JSON-Datei. Diese ist in einem für den Browser erreichbaren Bereich gespeichert. Damit kann sie sowohl von PHP als auch von JavaScript genutzt werden. Entweder lieferst Du das JavaScript über PHP aus, welches die JSON-Datei dort direkt hineinschreibt, oder Du lädst sie mit einem XMLHttpRequest nach. Geht beides.

ich sehe dieses: <title data-i18n="page-title">Umfrageservice</title> auf der englischen Seite dieses: <title data-i18n="page-title">Survey Service</title>

Ja, PHP befüllt das <title> bereits mit der vom Browser bevorzugten Sprache. Wenn Du einen Link zu den verfügbaren Sprachvarianten anklickst, dann greift ein JavaScript ein und aktualisiert die Sprachbausteine sofort. Du kannst die Links aber auch in einem neuen Tab/Fenster öffnen, dann macht das eben PHP, nur dass die vom Browser bevorzugte Sprache zugunsten der explizit angeforderten Sprachvariante ignoriert wird. Grundlage dazu ist aber eine JSON-Datei (ich verwende mehrere - jede Umfrage hat eine eigene).

Wenn Du nun die Sprachinhalte Deiner JSON-Datei bearbeiten lassen möchtest, dann kannst Du das über ein PHP-Script steuern. PHP kann JSON verstehen...

Liebe Grüße

Felix Riesterer

[Linuchs]

Moin,

erstmal danke für eure sehr wertvolle Begleitung seit meinen ersten Schritten zur Webseiten-Erstellung 1995. Nächstes Jahr haben wir dann Silberne Hochzeit 😉

Die Idee dieses Fadens, Fremdsprachen durch Übersetzer online ergänzen zu lassen, kann ich am ersten Programm Registrierung testen. Das Konzept muss sich eignen für weitere 60 Programme. Seit 2006 (damals noch fünfsprachig, aber fr und pl fielen raus mangels Interesse) sieht eine mehrsprachige Platzhalter-Zeile so aus:

<p>Irgendwas ###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in### ist los am [datum].</p>

PHP durchsucht auszugebende Zeilen auf ###. Dann wird die Zeile mit explode zu einem Array mit fünf Einträgen und wieder zusammengesetzt aus $arr[0].$arr[3].$arr[4], in diesem Fall nl.

NEU: Wenn ein Administrator (Übersetzer) die Seite aufruft, muss er die ausgefilterten Sprachen sehen können, es wird eine zusätzliche HTML-Zeile erzeugt aus "###".$arr[1]."###".$arr[2]."###".$arr[3]."###"

<!--###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in.###-->

und bei Klick auf eine Schaltfläche dieser Zeile per Javascript zum Bearbeiten angeboten:

Filename der Platzhalter-Datei (p582_de), deutscher und niederländischer Text werden an eine kleine PHP-Routine übermittelt, die den deutschen Text in der Datei sucht, die Zeile wieder splittet und neu zusammensetzt: $arr[0]."###".$arr[1]."###".$arr[2]."###".$text_nl."###".$arr[4]

Dann die Platzhalter-Datei verändert speichert und die "neue" HTML-Seite ausgibt.

Das funktioniert soweit. ABER es gibt z.B. Fehlermeldungen, die auch zu übersetzen sind, aber normalerweise nicht gezeigt und damit nicht zum Übersetzen angeboten werden.

Das Konzept ist also noch nicht fertig.

Wichtig ist mir nach wie vor, dass die Mehrsprachigkeit Bestandteil des Roh-Dokumentes ist, sonst gibt es Chaos.

Grüße von Linuchs

[dedlfix]

Tach!

Das funktioniert soweit. ABER es gibt z.B. Fehlermeldungen, die auch zu übersetzen sind, aber normalerweise nicht gezeigt und damit nicht zum Übersetzen angeboten werden.

Dann musst du deine Seiten so anpassen, dass es einen Modus gibt, der sämtliche Texte anzeigt, egal welchen Weg die Verarbeitung normalerweise oder in nur bedingt auftretenden Spezialfällen nimmt. Das scheint mit mehr Chaos im Code zu sein, als die Sache wert ist. Schon dein jetziger Ansatz bringt eine hohe Komplexität mit. Andererseits ist das An-Ort-und-Stelle-Übersetzen dienlich, den richtigen Kontext zu erkennen.

Wichtig ist mir nach wie vor, dass die Mehrsprachigkeit Bestandteil des Roh-Dokumentes ist, sonst gibt es Chaos.

Man kann das Chaos auch mit Tools vermeiden. Die anderen Projekte, die mit separat geführten Listen arbeiten, versinken auch nicht grundsätzlich im Chaos.

dedlfix.

[Felix Riesterer]

Lieber Linuchs,

<p>Irgendwas ###Bitte gib die Postleitzahl oder den Namen deines Ortes ein###Please enter the postal code or the name of your place###Voer de postcode of de naam van uw plaats in### ist los am [datum].</p>

hmm. Verstehe ich das?

• Irgendwas Bitte gib die Postleitzahl oder den Namen deines Ortes ein ist los am 1.1.1970.
• Irgendwas Please enter the postal code or the name of your place ist los am 1.1.1970.
• Irgendwas Voer de postcode of de naam van uw plaats in ist los am 1.1.1970.

Sollen so die Ergebnisse aussehen? Warum nicht so?

<p>{#new-event-for-date} <strong>{$date}</strong></p>
<ul>
  <li>
    <label>
      <span data-i18n="event-title"></span>
      <input name="event-title" type="text">
    </label>
  </li>
  <li>
    <label>
      <span data-i18n="zip"></span>
      <input name="event-zip" type="text">
    </label>
  </li>
</ul>

Nur zur Erläuterung: Ich unterscheide in meinen Templates zwischen Sprachbausteinen ({#key}) und Daten ({$var}).

Eine passende JSON-Datei müsste nun so aussehen:

{
  "event-title": {
    "de": "Titel der Veranstaltung",
    "en": "Event Title",
    "nl": "Titel van het evenement"
  },
  "new-event-for-date": {
    "de": "Neue Veranstaltung am",
    "en": "New event on",
    "nl": "Nieuw evenement op"
  },
  "zip": {
    "de": "Postleitzahl",
    "en": "ZIP Code",
    "nl": "Postcode"
  }
}

In PHP ist klar, wie man die jeweiligen Sprachbausteine bekommt:

$i18n = json_decode($dateipfad, true); // true = assoziatives Array
$lang = 'de'; // aktuelle Sprachwahl

function translate($key) {
  $text = $key; // fallback

  /* Kann man $i18n und $lang so in der
   * Funktion verfügbar machen? Ich arbeite
   * nur mit Objekten und die können auf
   * $this->i18n zugreifen.
   */
  global $i18n;
  global $lang;

  // default: Englisch - nur z.B.
  if (array_key_exists($key, $i18n)
    && array_key_exists('en', $i18n[$key])
  ) {
    $text = $i18n[$key]['en'];
  }

  if (array_key_exists($key, $i18n)
    && array_key_exists($lang, $i18n[$key])
  ) {
    $text = $i18n[$key][$lang];
  }

  return $text;
}

echo translate('event-title'); // Titel der Veranstaltung

In JavaScript ist das im Grunde das selbe. Stellen wir uns vor, die Daten lägen in der Variablen i18n:

const i18n = {}; // wird mit PHP oder AJAX befüllt
let currentLang = "de"; // aktuelle Sprachwahl

function translate (key) {
  let text = key; // fallback

  // default: Deutsch - nur z.B.
  if (i18n[key] && i18n[key].de) {
    text = i18n[key].de;
  }

  if (i18n[key] && i18n[key][currentLang]) {
    text = i18n[key][currentLang];
  }

  return text;
}

Der Datumswert für {$date} sollte bei deutscher Sprachausgabe das Format TT.MM.JJJJ haben, bei englischer MM/DD/YYYY. Keine Ahnung, wie das in den Niederlanden ist.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

bei englischer MM/DD/YYYY.

Nein! Das zu verwendende Datumsformat hängt nicht an der Sprache.

In UK ist die Reihenfolge wie bei uns: DD/MM/YYYY. [datumsformat.de]

Das völlige Durcheinander ist nur in den USA üblich. Und da ist mir MM/DD/YYYY nicht begegnet, sondern M/D/YY.

LLAP 🖖

[Linuchs]

es gibt z.B. Fehlermeldungen, die auch zu übersetzen sind

Die online-Übersetzung habe ich aus dem Einzelprogramm entfernt.

Stattdessen ein Extra-Programm geschrieben, mit dem man eine beliebige Platzhalterdatei aufruft. Aus den Einzelprogrammen kann ich dorthin verlinken.

Angezeigt werden die Zeilen, die mehrere Sprachen enthalten, auch die Fehlermeldungen und diverse Beschriftungen von Buttons.

Der Übersetzer klickt eine Zeile an, ein <textarea> mit dem bisherigen Text [nl] wird zum Bearbeiten aufgeklappt. Er kann beliebig viele Zeilen bearbeiten, bevor die <form> abgeschickt wird.

[Gunnar Bittersmann]

@@Linuchs

Bei Klick auf das img-Element möchte ich …

Möchten andere das auch? Wenn ja:

Das img-Element kann man™ nicht clicken.^[1]

Einige (z.B. Nutzer von Mäusen) können das; andere (z.B. Tastaturnutzer) können das nicht.

Für Nutzerinteraktionen sollten immer interaktive HTML-Elemente verwendet werden: für Aktionen auf einer Seite buttons.

LLAP 🖖

---

1. Es sei denn, sie haben areas; sind also verweissensitive Grafiken. ↩︎

[Linuchs]

Einige (z.B. Nutzer von Mäusen) können das; andere (z.B. Tastaturnutzer) können das nicht.

Für alle die fiktiven "behinderten" Menschen (sehen nicht, hören nicht, können nicht laufen), die es in der Öffentlichkeit nur ausnamsweise gibt (sind in Heimen weggesperrt) und die "behinderten" Geräte (ohne Maus, ohne Tastatur) die Überhand nehmen, wird ein Gedankengebäude vorgehalten ...

In meinen Kalendern weise ich rollstuhlgerechte Veranstaltungsorte mit dem Symbol aus. Aber selten habe ich in Deutschland Rollstuhlfahrer auf öffentlichen Veranstaltungen gesehen. Ganz anders in den Niederlanden.

Geh bitte mal auf meine Seite http://remso.eu/?zp=p504 und versuche, per Tastatur die Info-Kreise zum Feld zu aktivieren.

Ich weiß, ich könnte per Tab-Taste von Feld zum Info-Symbol, zum nächsten Feld und dessen Info-Symbol. Aber das behindert das flüssige Ausfüllen eines Formulars, niemand ist das gewohnt. Dann fehlt ein Info-Symbol und statt zweimal Tab ist das nächste Feld nur einmal Tab.

Kurzum: Gibt es eine Übersicht, wie man es allen Geräten, allen Behinderten Recht machen kann, ohne die 99,9% Normalos zu vergraulen?

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Geh bitte mal auf meine Seite http://remso.eu/?zp=p504 und versuche, per Tastatur die Info-Kreise zum Feld zu aktivieren.

Geht nicht. Also enthältst du Informationen den Tastaturbedienern vor.

Die Abhilfe ist aber überaus einfach.

<button type="button">
  <img id="typ_id" class="help" src="img/icon_info.png" alt="i" title="Info"></button>

Über alt und title sollte man dann auch noch mal sprechen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

<button type="button">
  <img id="typ_id" class="help" src="img/icon_info.png" alt="i" title="Info"></button>

Über alt und title sollte man dann auch noch mal sprechen.

<button type="button">
  <img id="typ_id" class="help" src="img/icon_info.png" alt="Info"></button>

Über title noch mal sprechen? Weg damit! Mehr gibt’s dazu nicht zu sagen. 😏

Worüber man noch mal sprechen sollte: warum die Grafik ein PNG ist und kein SVG.

LLAP 🖖

[Felix Riesterer]

Lieber Linuchs,

Geh bitte mal auf meine Seite http://remso.eu/?zp=p504 und versuche, per Tastatur die Info-Kreise zum Feld zu aktivieren.

zu Deiner indirekten Frage (wie soll ich das mit den Info-Kreisen besser machen?): Warum muss man etwas extra tun, um an diese Infos zu gelangen? Warum können die sich nicht bei einem fokussierten Eingabe-Element von selbst (CSS) "groß machen"?

Was mir noch aufgefallen ist...

1. Die Eingabe des Landes ist ein Freitext:

<input id="such_land_kz" required="" type="text" name="land_kz" maxlength="3" size="3" value="D" autocomplete="off">

Ich verstehe, dass Du das als Pflichtfeld haben willst, weil da eine Angabe stehen muss, aber wenn Du schon ein Nationalitätenschildchen als Inhalt haben möchtest (also "D" anstelle von "Deutschland"), warum gestaltest Du es nicht als Dropdown (<select>)?

2. Generell fällt noch auf, dass Du keine <label>-Beschriftungen hast. Das ist nach der heiligen Lehre böses Heidentum.

3. Warum wechselt eine Tabellenzeile ihre Hintergrundfarbe, wenn ich irgendwie in sie hinein klicke? Sie ändert sie auch wieder zurück, wenn ich erneut klicke. Was bezweckst Du damit?

4. Das Formular kann man mit HTTP aufrufen. Die dort möglicherweise eingetragenen persönlichen Daten (Veranstalter, VIP, Passwort) werden dann unverschlüsselt übertragen. Das Formular sollte daher ausschließlich mit HTTPS aufgerufen werden, aber ein passendes SSL-Zertifikat ist entweder nicht eingerichtet (warum eigentlich nicht?) oder nicht verfügbar. Angesichts der Tatsache, dass mit Mozillas Let's encrypt-Initiative SSL-Zertifikate zum Nulltarif zu haben sind, ist nicht so ganz verständlich, warum Du Deine Seiten nicht auch mit HTTPS anbietest.

Liebe Grüße

Felix Riesterer

[Linuchs]

Lieber Felix,

deine Fragen sind sehr berechtigt. Was glaubst du, wie ich mich in den Jahren damit herumgeschlagen und dies und jenes ausprobiert habe. Als Eunuch (oder wie heißen diese Männer, die im Wald allein leben?) habe ich niemanden, der Ideen beisteuert. Einen wertvollen Admin, der Fehler findet, aber keine Visionen hat. Von den Mitgliedern des Web-Kalenders kommt auch nichts. Wie ich das vermisse, früher in Unternehmen konnte ich den Usern über die Schultern schauen, Wünsche aufnehmen, Missverständnisse ausräumen.

Warum können die sich nicht bei einem fokussierten Eingabe-Element von selbst (CSS) "groß machen"?

Die sollen ja nicht groß, sondern nur Pipi machen ;-) Mehrere Gründe:

1. Ich mag ungefragte Einblendungen nicht, weil sie einen - je nach Viewportgröße - erheblichen Teil der Seite abdecken und geübte User nur nerven. Wikipedia macht sowas sogar bei mouseover. Wenn man zufällig den Mauszeiger drüberschleift, ist das Weiterlesen unmöglich. Hatte gehofft, dass ein Jungspund nur sein Gelerntes loswerden musste wie ich damals, als ich die Farbe entdeckte ;-)

2. Wenn ich mich (und andere wohl auch) auf eine Eingabe konzentriere, lenkt eine Alarm-Meldung ab. Und das bei jedem Feld?

3. Der Server wird per Ajax vollkommen sinnfrei belastet. Der leidet jetzt schon durch übertrieben lange Programm-Durchlaufzeiten. Was normal 0,2 sec dauert, kann auch mal 5 oder 10 sec laufen und wird mir dann per Mail gemeldet. Das User-Bot-Verhältnis ist 1:100, ohne dass sich das in guten Finde-Positionen wiederspiegelt.

warum gestaltest Du es (Kfz-Nationalkennzeichen) nicht als Dropdown?

Okay, wieviele Nationen gibt es? So 200? Und anstatt auf D oder NL zu drücken, sollen sich alle da durchwuseln? Die Kfz-Kennzeichen sind doch geläufig. Anders als die Sprachkennung. Welcher Chorsänger, der sein Event eingeben will, kennt denn spontan das ISO-Kürzel für deutsch (nicht D)?

Generell fällt noch auf, dass Du keine <label>-Beschriftungen hast.

Label habe ich bei den kleinen Fliegenschissen type=checkbox und type=radio, die man weder als Leser noch als Webmaster vergrößern kann und beim Zielen leicht verfehlt. Dort kann man auch auf den beschreibenden Text klicken:

Wo siehst du Bedarf bei type=text?

Warum wechselt eine Tabellenzeile ihre Hintergrundfarbe?

(M)eine Spezialität bei table > row und class=position, unten rechts wird eingeblendet, wieviele Positionen angeklickt sind. Beim Abarbeiten von Positionen kann ich die erledigten so markieren. Allerdings sollte bei Klick in ein <input sowas wie stoppropagation die Weiterreichung des Klicks verhindern. Offene Baustelle.

Das Formular sollte daher ausschließlich mit HTTPS aufgerufen werden,

Ja ... Mich schreckte ab, dass der Link von (m)einer möglichen https-Domain auf eine http-Seite vom Browser FF mit der Kontrollfrage unterbrochen wird "Wollen Sie wirklich?" Und dann diese Hindernisse beim Aufrufen, dass diese "Genehmigungen" ungültig oder abgelaufen sind.

Ich verwalte öffentliche Veranstaltungstermine, es geht doch um KEINERLEI GEHEIMNISSE. Und wer die Verschlüsselung unbedingt knacken will, dem wird es gelingen.

Als Verarsche sehe ich die Text-"Verschlüsselung" bei sozialen Netzwerken, die aber bedenkenlos sämtliche Telefonbücher ihrer "Mitglieder" aussaugen.

Soll die Verschlüsselung (öffentlicher) Daten ein trügerisches Sicherheitsgefühl des DAU (Dümmster Anzunehmende User) bewirken wie die Sicherheitskontrolle am Flughafen?

Ich denke, diese Diskussion wäre einen Extra-Faden wert. Kann man den erzeugen?

Gruß, Linuchs

[Der Martin]

Hallo,

1. Ich mag ungefragte Einblendungen nicht, weil sie einen - je nach Viewportgröße - erheblichen Teil der Seite abdecken und geübte User nur nerven. Wikipedia macht sowas sogar bei mouseover. Wenn man zufällig den Mauszeiger drüberschleift, ist das Weiterlesen unmöglich.

ja, ist mir auch schon oft unangenehm aufgefallen. Sehr lästig.

3. Der Server wird per Ajax vollkommen sinnfrei belastet.

Dagegen könnte man vorgehen, indem man die Info-Texte nicht dynamisch nachlädt, sondern von Anfang an im Dokument hat und per CSS aus- oder einblendet.

warum gestaltest Du es (Kfz-Nationalkennzeichen) nicht als Dropdown?

Okay, wieviele Nationen gibt es? So 200?

Ja, so etwa. Nicht ganz 200, AFAIK.

Und anstatt auf D oder NL zu drücken, sollen sich alle da durchwuseln?

Ein Dropdown selektiert auch den passenden Eintrag, wenn man anfängt zu tippen.

Die Kfz-Kennzeichen sind doch geläufig. Anders als die Sprachkennung. Welcher Chorsänger, der sein Event eingeben will, kennt denn spontan das ISO-Kürzel für deutsch (nicht D)?

Ich bin kein Chorsänger, aber für die allermeisten Länder wüsste ich das zweibuchstabige ISO-3166-Kürzel schneller (meist spontan) als das internationale KFZ-Kennzeichen.
Noch schlimmer sind da manche Fernsehzeitschriften, die beim Herkunftsland der Filme eigene Phantasieabkürzungen verwenden.

Wo siehst du Bedarf bei type=text?

In der Semantik. Ein Textfeld ohne Label, das mir sagt, was ich da eintragen soll, ist suboptimal.

Warum wechselt eine Tabellenzeile ihre Hintergrundfarbe?

(M)eine Spezialität bei table > row und class=position, unten rechts wird eingeblendet, wieviele Positionen angeklickt sind.

Also eine Art Selektion.

Als Verarsche sehe ich die Text-"Verschlüsselung" bei sozialen Netzwerken, die aber bedenkenlos sämtliche Telefonbücher ihrer "Mitglieder" aussaugen.

Das ist wieder ein anderes Thema, das in den letzten Tagen schon heiß diskutiert wird.

So long,
 Martin

[Linuchs]

Hallo Martin,

ich hoffe sehr, dass diese Grundsatz-Diskussion aus dem Thema "Sibling" ausgekoppelt wird.

Der Server wird per Ajax vollkommen sinnfrei belastet.

Dagegen könnte man vorgehen, indem man die Info-Texte nicht dynamisch nachlädt, sondern von Anfang an im Dokument hat und per CSS aus- oder einblendet.

Eine weitere Spezialität von mir: Info-Texte können vom Admin bearbeitet werden. Beim nächsten Klick wird die aktuelle Version per Ajax geholt und angezeigt. Eine wunderbare Unterstützung und Kontrolle in der Entwicklungsphase einer Seite, ohne die Seite neu laden zu müssen.

Ich habe die Zeit in den 1990ern noch erlebt, als man die eintreffenden Bytes einzeln begrüßen konnte. Und nirgendwo sehe ich einen Sinn darin, unnötige Daten zu übermitteln. Schaue dir mal die heutigen HTML-Code an. Da werden umfangreiche Bäume von div aufgemacht und wieder geschlossen ohne jeden Inhalt. Total bescheuert.

Intern für unsere Admin-Programme setze ich mehr und mehr CSV-Dateien ein, die dann per Javascript zu Tabellen aufbereitet werden mit mehreren hundert Positionen. Die Durchlaufzeit auf dem Server reduziert sich auf 25% gegenüber der früheren HTML-Aufbereitung unter Einbeziehung von Platzhalter-Dateien.

Mir wurde bei selHTML schon vorgeworfen, ich würde damit Zeit sparen zu Lasten der Clients. Ich will das so!!! Beim Aldi muss ich viermal !!! die Klamotten anfassen: In den Einkaufswagen, auf das Band, in den Einkaufswagen, in mein Transportmittel. Der Client muss nur einmal mithelfen.

Die öffentlichen Seiten für den DAU (Dümmster Anzunehmender User) sollten allerdings möglichst ohne Javascript auskommen. So die Forderung in selfHTML - Kommentaren, wenn ihnen zum Faden sonst nichts einfällt.

Ein Textfeld ohne Label, das mir sagt, was ich da eintragen soll, ist suboptimal.

Hää? Meinen Sie placeholder ?

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Ein Textfeld ohne Label, das mir sagt, was ich da eintragen soll, ist suboptimal.

Hää? Meinen Sie placeholder ?

Nein, er meint label.

Und er meint nicht „suboptimal“, sondern „falsch“.

LLAP 🖖

[Linuchs]

Ein Dropdown selektiert auch den passenden Eintrag, wenn man anfängt zu tippen.

Theorie. deutsch mag auf de reagieren, aber nicht auf ge wie german. Ich nutze Nationen-, Sprach- und Ortsbezeichnungen grundsätzlich in deren Sprache. Wenn ich als Deutscher eine Veranstaltung in Danzig melde, sollte ich bitte wissen, wie dort die Stadt z.Z. heißt. Muss sowas wie Karl-Marx-Stadt (jetzt Chemnitz) gefunden werden?

Wer Danzig eintippt (unser deutsch-polnischer Verein), hat Glück, denn ich habe diesen Begriff als Alternative zu Gdansk hinterlegt. Aber keine Ahnung, wie ein Franzose Gdansk nennt. Der sieht womöglich unbekannt und legt die Stadt neu an.

[Der Martin]

Hi,

Ein Dropdown selektiert auch den passenden Eintrag, wenn man anfängt zu tippen.

Theorie. deutsch mag auf de reagieren, aber nicht auf ge wie german. Ich nutze Nationen-, Sprach- und Ortsbezeichnungen grundsätzlich in deren Sprache.

das gefällt mir, aber es ist ungewöhnlich und daher möglicherweise für den einen oder anderen Nutzer unerwartet. Da würde ich vorschlagen, dass du als Anbieter in DE auch die gängigen deutschen Namen als Alias einträgst.

Wenn ich als Deutscher eine Veranstaltung in Danzig melde, sollte ich bitte wissen, wie dort die Stadt z.Z. heißt.

Kann man so sehen, finde ich aber gewagt. Besonders bei Städten in gemischt-sprachigen Gebieten wie etwa Antwerp (flämisch) oder Anvers (wallonisch). Warum die meisten Deutschen an den in Belgien üblichen Namen Antwerp noch ein -en anhängen, ist mir schleierhaft.
Aber auch bei sprachlich eindeutigen Namen würde ich der Eindeutschung ein bisschen entgegenkommen. Du weißt vermutlich, dass die Stadt, die wir Nizza nennen, "vor Ort" Nice heißt. Ich weiß das auch. Aber weiß das die Mehrheit der Deutschen?

Deswegen mein Vorschlag mit den Aliases. Beim Eintragen in den Kalender kannst du die Namen ja "normalisieren und aus Danzig wieder Gdansk machen (oder Breslau zu Wrocław).

Wer Danzig eintippt (unser deutsch-polnischer Verein), hat Glück, denn ich habe diesen Begriff als Alternative zu Gdansk hinterlegt. Aber keine Ahnung, wie ein Franzose Gdansk nennt. Der sieht womöglich unbekannt und legt die Stadt neu an.

Hmm. Welche Sprache sprechen die meisten deiner Nutzer?

Es wäre natürlich ein gewisser Aufwand, aber ich könnte mir durchaus vorstellen, die Namen auch in der französischen, englischen oder niederländischen Variante als Alias aufzunehmen. und sie dann beim endgültigen Eintragen des Termins in die jeweilige Landessprache zu normalisieren.

So long,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Kann man so sehen, finde ich aber gewagt. Besonders bei Städten in gemischt-sprachigen Gebieten wie etwa Antwerp (flämisch) oder Anvers (wallonisch). Warum die meisten Deutschen an den in Belgien üblichen Namen Antwerp noch ein -en anhängen, ist mir schleierhaft.

Offensichtlich ist es die offizielle deutsche Bezeichnung (https://de.wikipedia.org/wiki/Antwerpen, https://www.antwerpen.be/nl/home).

kannst du […] ja […] aus Danzig wieder Gdansk machen

Gdańsk

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Der Martin,

Antwerp (flämisch)

Ich war auch der Meinung, Antwerpen stünde auf unserem schönen alten Röhrenradio, aber offensichtlich habe ich mich geirrt.

Quelle: https://commons.wikimedia.org/wiki/File:Archiv_TSD.jpg?uselang=de

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Linuchs,

danke für Deine ausführliche Erwiderung.

Warum können die sich nicht bei einem fokussierten Eingabe-Element von selbst (CSS) "groß machen"?

Die sollen ja nicht groß,

Deine Einwände gegen ungefragte Einbledungen in Ehren, insbesondere dann, wenn sie als scheinbare Alarmmeldungen vom Eingabeprozess unnötig ablenken, aber wie möchtest Du denn die Bedienbarkeit oder neudeutsch UX (user experience) sonst haben? Auch auf kleinen Viewports kann man das sinnvoll lösen.

Wenn es z.B. bei der Eingabe des Ortes solch umfangreiche Bedienungsanleitungen braucht, wäre denn dann nicht eine geführte Bedienung anzudenken? Das gab es unter Windows 98 als "Assistenten" schon. Du kannst Dein Formular so gestalten, dass Deine Anleitungen voll sichtbar über oder um Deine Formularfelder herum stehen, um dann mit JavaScript das Formular gänzlich unsichtbar zu schalten, und mit einem Assistenten die gerade benötigten Teile der Reihe nach im Rahmen eines Assistenten abzuarbeiten. Damit hast Du dann so etwas wie progressive enhancement, ohne die User auszuschließen, die weder Maus noch JavaScript haben. Und die Viewport-Größe wäre auch bedacht.

3. Der Server wird per Ajax vollkommen sinnfrei belastet. Der leidet jetzt schon durch übertrieben lange Programm-Durchlaufzeiten. Was normal 0,2 sec dauert, kann auch mal 5 oder 10 sec laufen und wird mir dann per Mail gemeldet. Das User-Bot-Verhältnis ist 1:100, ohne dass sich das in guten Finde-Positionen wiederspiegelt.

Dazu kann ich wenig sagen. Welche Prozesse verursachen denn lange Wartezeiten? Hast Du intern ein Locking, welches grundsätzlich greift, anstatt nur bei POST-Requests?

Okay, wieviele Nationen gibt es? So 200? Und anstatt auf D oder NL zu drücken, sollen sich alle da durchwuseln? Die Kfz-Kennzeichen sind doch geläufig. Anders als die Sprachkennung. Welcher Chorsänger, der sein Event eingeben will, kennt denn spontan das ISO-Kürzel für deutsch (nicht D)?

Was das <select> jeweils anzeigt, kannst Du doch bestimmen!

<select name="country">
  <option value="D">Deutschland (D)</option>
  <option value="F">France (F)</option>
  <option value="GB">Great Britain (GB)</option>
</select>

Als Tastaturbenutzer kann ich die Anfangsbuchstaben tippen und das Auswahlfeld "spult vor" zum ersten passenden Eintrag. Was Plastikstreichler tun können... weiß ich jetzt nicht.

Label habe ich bei den kleinen Fliegenschissen type=checkbox und type=radio, die man weder als Leser noch als Webmaster vergrößern kann und beim Zielen leicht verfehlt.

Sehr löblich! Bitte für ausnahmslos alle Eingabemöglichkeiten ebenso umsetzen.

Wo siehst du Bedarf bei type=text?

Weil es die reine Lehre so vorschreibt. Alles andere ist Ketzerei.

(M)eine Spezialität bei table > row und class=position, unten rechts wird eingeblendet, wieviele Positionen angeklickt sind. Beim Abarbeiten von Positionen kann ich die erledigten so markieren. Allerdings sollte bei Klick in ein <input sowas wie stoppropagation die Weiterreichung des Klicks verhindern. Offene Baustelle.

Ich kann als Nutzer weder nachvollziehen, was das soll, noch verhindern, dass Zeilen, die ich schon ausgefüllt habe, nicht wieder unmarkiert werden. Daher stelle ich den Sinn infrage. Bei einem Assistenten dagegen... bräuchte man es auch nicht und könnte stattdessen "Schritt 3/7" einblenden.

Ja ... Mich schreckte ab, dass der Link von (m)einer möglichen https-Domain auf eine http-Seite vom Browser FF mit der Kontrollfrage unterbrochen wird "Wollen Sie wirklich?" Und dann diese Hindernisse beim Aufrufen, dass diese "Genehmigungen" ungültig oder abgelaufen sind.

Es ist mittlerweile (aus berechtigten Gründen) Standard und best practice geworden.

Ich verwalte öffentliche Veranstaltungstermine, es geht doch um KEINERLEI GEHEIMNISSE. Und wer die Verschlüsselung unbedingt knacken will, dem wird es gelingen.

Das ist nur ein vermeintliches Argument gegen HTTPS. Scheinbar. In Wirklichkeit ist es nicht stichhaltig. Du springst ja auch nicht jeden Morgen vor einen Zug, nur weil ein jedes Lebewesen einmal sterben muss.

Als Verarsche sehe ich die Text-"Verschlüsselung" bei sozialen Netzwerken, die aber bedenkenlos sämtliche Telefonbücher ihrer "Mitglieder" aussaugen.

Anderes Thema. Hat mit HTTPS absolut nichts zu tun.

Soll die Verschlüsselung (öffentlicher) Daten ein trügerisches Sicherheitsgefühl des DAU (Dümmster Anzunehmende User) bewirken wie die Sicherheitskontrolle am Flughafen?

Es geht nicht um die Verschlüsselung (öffentlicher) Daten, sondern um die Verschlüsselung der Kommunikation zwischen Browser und Webserver. Dass das sinnvoll ist, sollte unbestritten sein. Oder wen gehen die Login-Daten für den VIP-Bereich etwas an?

Ich denke, diese Diskussion wäre einen Extra-Faden wert. Kann man den erzeugen?

Man könnte sicherlich, aber ich sehe den Wert nicht ein.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Linuchs

Für alle die fiktiven "behinderten" Menschen (sehen nicht, hören nicht, können nicht laufen), die es in der Öffentlichkeit nur ausnamsweise gibt (sind in Heimen weggesperrt) und die "behinderten" Geräte (ohne Maus, ohne Tastatur) die Überhand nehmen, wird ein Gedankengebäude vorgehalten ...

Ist Linuchs nicht witzig?

Ja, Linuchs ist nicht witzig.

… ohne die 99,9% Normalos zu vergraulen?

Zum einen ist der Prozentsatz 0.1% mindestens mal 100 zu nehmen, um auf den Anteil der Menschen mit Behinderungen zu kommen.

Zu anderen ist es Ableismus pur, Menschen mit Behinderungen nicht als normal anzusehen.

LLAP 🖖