Kleine CodeCrowd von programmieren lernen

Dialog Tag

Es gibt das HTML-Tag

.
Dieses ist dazu gedacht Interaktion mit dem User zu implementieren.
Es wird allerdings selten verwendet, da es einfachere Wege gibt, einen User-Dialog zu implementieren. (Aber das könnte sich bald ändern…)

Ein typischer Dialog mit einer Website ist, eine Interaktion zu bestätigen,
z.B. Ja, ich möchte diesen Newsletter abonnieren.

Leider ist dieser Tag immer noch nicht von allen Browsern vollständig supported.

An dieser Stelle möchte ich noch ein paar Worte zu Browserkompatibilität sagen.
Es ist so, dass du als Webentwickler laufend auf neue Features in Programmiersprachen treffen wirst.

Deine Entscheidung, oft gemeinsam mit dem Kunden, ist dann festzulegen, ob es sinnvoll ist diese Feature zu integrieren oder nicht.

Welchen Features von welchen Browsern unterstützt werden, findest du auf der hilfreichen Website canisue.com.
Sucht man hier nach dialog, sieht man, dass kaum ein aktueller Browser diesem Tag bereits unterstützt. Zumindest heute, in Ende 2018.

Solltest du dieses Video zu einem späteren Zeitpunkt sehen und du stellst fest, dass dieses HTML-Feature bereits weitläufig unterstützt ist, here wo go. Cool, dann kannst du es bedenkenfrei verwenden.

Oft ist es aber so, dass Features die du benutzen willst, nicht weitläufig supportet werde ABER Frontend Frameworks das Feature soweit standardisiert haben, dass du es mit Hilfe dieses Frontend implementieren kannst, ohne auf den Browser-Support zu warten. Cool, oder?

Ein gutes Signal ist immer, wenn selbst der Internet Explorer ein bestimmtes Feature unterstützt. Leider ist der IE der größte Feind eines jeden Webentwicklers, auch Internet Explodierer genannt. Wenn selbst dieser Browser ein Feature unterstützt, können die anderen Browser dies meist längst schon.

Zurück zum Dialog-Tag.
Das Tag ist also noch nicht weitläufig unterstützt. Nun gibt es einen Grund dafür, dass dieses Feature implementiert wurden. Zum Beispiel hilft es Screenreadern (und sie sogenannte Accessibility, also Erreichbarkeit von Website auch für nicht-sehende User ist ein großes Thema) oder es hilft Suchmaschinen wie Google und Machine Learning Algorithmen, diese Bereich von Websites als Dialog-Bereich zu interpretieren.

Du erinnerst dich sicher an den Teil in unserem HTML Kurs in dem wir über die semantischen HTML5 Elemente sprechen. Auch diese helfen dabei Websites in standardisierte Bereiche zu unterteilen, die einfach zu interpretieren sind.

Dies auch für Dialogboxen so umzusetzen, ermöglicht das

Tag.

Lange Rede kurzer Sinn, lass uns ein HTML-Dialog-Tag erstellen.
Du kennst HTML bereits und weißt, wie einfach man dies tut. Wenn wir nun also unsere Code-Editor öffnen, fügst du das dialog-Tag ein und hast auch schon getan, worüber wir zuvor 3 Minuten gesprochen haben.

Nun, nur diese Tags einzufügen, definiert zwar, dass der Teil der in diese Tags genistet wird eine Dialog-Box ist, aber der User im Frontend wird keine Veränderung sehen. Um das dialog-Tag zu vervollständigen, musst noch das Attribute “open” eingefügt werden. There we go.

Als nächstes fügen wir einige sichtbare Elemente zur User-Interaktion ein: Ein Formular-Tag mit der Methode Dialog und ein Auswahlfeld mit 3 Optionen sowie 2 Buttons. Ich gebe die 3 Optionen nun an und benenne die Buttons.

Schauen wir uns das ganze im Frontend etwas genauer an, sehen wir, dass das Formular nach der Ausführung verschwindet und sehen damit den Unterschied zu einem Formular ohne Dialog Tag und Dialog Methode.

Dass das Formular verschwindet, ist kein Fehler, sondern das gewollte Verhalten. Wie können wir uns dieses Verhalten zu nutze machen?

Sagen wir du brauchst eine User-Interaktion bevor der User die Website weiter nutzen kann, z.B. die Eingabe eines wichtigen Werts. Dann kannst du das Formular mit einem popup erscheinen lassen und sobald der User die Daten eingegeben hat, verschwindet das Formular wieder.

Bauen wir doch eine solche Funktion gemeinsam. Ich habe etwas JavaScript geschrieben, welches ich erstmal nicht weiter erkläre, dass es in diesem Video um HTML geht. Solltest du Interesse daran haben, dass der Javascript Teil erklärt wird, schreibe mir in den Kommentaren und ich mache dazu gern ein weiteres Video.

Das JavaScript sorgt dafür, dass wenn der User den “Weiter” Button klickt, die Dialog-Box als Popup erscheint und die restlichen Inhalte der Website, mit einem grauen Overlay in den Hintergrund geraten und nicht mehr nutzbar sind. Der User kann also erstmal nicht mehr tun, außer das Formular auszufüllen. Tut er dies, kann er die Website weiter verwenden.

Nun kennst du das dialog-Tag und weißt, wie man es sinnvoll verwenden kann.
Ich stelle dir den Code wie immer zur Verfügung, damit du damit üben und testen kannst.
Solltest du Fragen haben, freue ich mich auf deine Kommentare.

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.

Infobox

Kommentare