WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: HTML von a bis z-z II: Inhaltszerstückelung
Publishing Date: 2023-02-12T12:30:16+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/html-von-a-bis-z-z-ii-inhaltszerstueckelung/

00:00:00.000 --> 00:00:05.060
 Wo wir sind, ist vorne, Folge 51. Heute servieren wir wohlportionierte HTML-Häppchen.

00:00:05.060 --> 00:00:21.260
 Herzlich willkommen bei Wo wir sind, ist vorne.

00:00:21.260 --> 00:00:28.060
 Frontend-Fakten-Frotzelein, der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

00:00:30.000 --> 00:00:39.760
 Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.

00:00:39.760 --> 00:00:58.840
 Hallihallo und willkommen zu einer neuen Folge, wo wir sind, ist vorne.

00:00:59.600 --> 00:01:02.980
 Heute schmatzig viel. Leckerschmecker, habe ich gedacht.

00:01:02.980 --> 00:01:03.640
 Leckerschmecker?

00:01:03.640 --> 00:01:06.060
 Wunderschön.

00:01:06.060 --> 00:01:11.360
 Ja, also wir setzen unsere Reise fort durch die Welt der HTML-Elemente.

00:01:11.360 --> 00:01:13.360
 Da haben wir uns was angelacht.

00:01:13.360 --> 00:01:17.900
 Ja, ja. Aber wir kommen auch später noch, habe ich schon gesehen, du greifst auch ein bisschen Feedback auf.

00:01:17.900 --> 00:01:20.240
 Also ich glaube, wir haben da so einen Punkt getroffen.

00:01:20.720 --> 00:01:28.180
 Wussten wir ja nicht so ganz, wie das ankommt, aber ich glaube, es kam doch ganz gut an und lässt das Feedback vermuten.

00:01:28.180 --> 00:01:34.180
 Und wenn nicht, dann ist es halt doof für euch, weil wir ziehen das jetzt durch.

00:01:34.600 --> 00:01:39.800
 Ich glaube, wir haben noch nie so langes, ausführliches Feedback bekommen.

00:01:39.800 --> 00:01:40.640
 Ja, tatsächlich.

00:01:40.640 --> 00:01:43.940
 Wie zur letzten Folge, das kann man jetzt natürlich so oder so deuten.

00:01:43.940 --> 00:01:45.760
 Aber da kommen wir gleich noch drauf.

00:01:45.760 --> 00:01:46.380
 Genau.

00:01:46.380 --> 00:01:49.560
 Ja, und bevor wir dazu kommen, Bier, ne?

00:01:49.560 --> 00:01:53.060
 Ja, Bier, mit diesem Alkoholismus hier im Podcast.

00:01:53.060 --> 00:01:54.500
 Das ist ja wirklich ...

00:01:54.500 --> 00:01:57.860
 Ich trinke ja wirklich sonst so gut wie kein Alkohol.

00:01:57.860 --> 00:01:59.740
 Ich habe ja schon öfter erledigt, ich bin ...

00:01:59.740 --> 00:02:04.660
 Aber wirklich tatsächlich so diese zwei Tage in der Woche, wo wir streamen oder podcasten, da ist ...

00:02:04.660 --> 00:02:08.260
 Ja, sind wir irgendwie Content-Creator-Alkoholiker geworden.

00:02:08.260 --> 00:02:09.820
 Ich kann es jetzt gar nicht mehr Podcast-Alkoholiker nennen.

00:02:09.820 --> 00:02:13.140
 Ob das irgendwie so eine medizinische Diagnose ist, schon mittlerweile so.

00:02:13.140 --> 00:02:15.740
 Wir sind ja wahrscheinlich nicht die einzigen, oder?

00:02:15.740 --> 00:02:18.740
 Weiß ich, weiß ich nicht.

00:02:18.740 --> 00:02:22.740
 Ich glaube, bei Methodisch Inkorrekt, da haben sie irgendwann aufgehört, Bier zu trinken.

00:02:22.740 --> 00:02:24.160
 Ich glaube, das machen die mittlerweile nicht mehr.

00:02:24.440 --> 00:02:24.660
 Okay.

00:02:24.660 --> 00:02:28.220
 Ja, vielleicht hat das Gründe, die wir auch noch erfahren.

00:02:28.220 --> 00:02:33.340
 Steigen wir nicht, wenn man auf Alkoholfreies um oder auf Radler oder so.

00:02:33.340 --> 00:02:34.660
 Ich habe was Verrücktes heute.

00:02:34.660 --> 00:02:36.060
 Was hast du denn?

00:02:36.060 --> 00:02:41.060
 Ich habe ein Rügener Inselbrauerei Baltic Ale.

00:02:41.060 --> 00:02:44.200
 Das ist mit so Papier außenrum, oder?

00:02:44.200 --> 00:02:44.600
 Ja, genau.

00:02:44.600 --> 00:02:45.940
 Ja, die hatte ich auch schon.

00:02:45.940 --> 00:02:46.720
 Ah, super, ja.

00:02:46.720 --> 00:02:48.120
 Die haben schöne Flaschen.

00:02:48.120 --> 00:02:52.380
 Das ist mit so Papier außenrum, sieht ein bisschen aus wie ein Böller.

00:02:53.320 --> 00:02:54.720
 So braunes Papier.

00:02:54.720 --> 00:02:59.500
 Ist auch so gedreht oben zum Hals hin.

00:02:59.500 --> 00:03:00.820
 Also es könnte echt auch ein Böller sein.

00:03:00.820 --> 00:03:01.680
 Vielleicht ist es ein Böller.

00:03:01.680 --> 00:03:02.340
 Wer weiß.

00:03:02.340 --> 00:03:03.740
 Vielleicht knallt es total rein.

00:03:03.740 --> 00:03:05.860
 Hat 7,5 Prozent.

00:03:06.040 --> 00:03:10.700
 Bortic Ale, 7,5 Prozent, seltenes Bier.

00:03:10.700 --> 00:03:11.780
 Immerhin nur 0,33.

00:03:11.780 --> 00:03:13.220
 Also sterbe ich vielleicht nicht sofort.

00:03:13.220 --> 00:03:16.160
 Und das ist auch ganz interessant.

00:03:16.160 --> 00:03:20.440
 Das hat hinten drauf so ein, wie nennt man denn diese Graphen?

00:03:20.440 --> 00:03:21.760
 Weißt du, was ich meine?

00:03:22.240 --> 00:03:23.640
 Ah, so ein Spinnnitz.

00:03:23.640 --> 00:03:23.760
 Spinnnitz?

00:03:23.760 --> 00:03:24.380
 Ja, wie heißt das?

00:03:24.380 --> 00:03:26.480
 Ich weiß gar nicht, wie das ...

00:03:26.480 --> 00:03:31.260
 Ah, ich habe es mal recherchiert vor einer Weile, weil da eine Kundin was angefragt hat,

00:03:31.260 --> 00:03:33.700
 um solche Dinge zu machen für eine Auswertung.

00:03:33.700 --> 00:03:35.260
 Aber ich weiß nicht mehr, wie es hieß.

00:03:35.260 --> 00:03:37.000
 Netzdiagramm?

00:03:37.140 --> 00:03:45.300
 Auf jeden Fall gibt es da extrem viele Kategorien, in die das aufgesplittet ist oder wo sie es hier bewerten.

00:03:45.300 --> 00:03:46.880
 Was ist das, 12 Grad?

00:03:46.880 --> 00:03:47.960
 Verstehe ich nicht.

00:03:47.960 --> 00:03:48.980
 Wieso steht da 12 Grad?

00:03:48.980 --> 00:03:51.380
 Die optimale Trinktemperatur vielleicht.

00:03:51.380 --> 00:03:56.820
 Herb, würzig, fruchtig, weinartig, sauer, holzig, Espresso, Schokolade, trocken.

00:03:56.820 --> 00:03:58.180
 Das sind die Kategorien.

00:03:58.180 --> 00:03:59.800
 Ich glaube, das hatte ich auch schon mal.

00:04:00.040 --> 00:04:11.900
 Und es ist sehr viel trocken, relativ viel Herb, viel würzig, ein bisschen fruchtig, viel weinartig und ganz wenig sauer und ansonsten nichts.

00:04:11.900 --> 00:04:13.800
 Nicht holzig, nicht Espresso, nicht Schokolade.

00:04:13.800 --> 00:04:15.980
 Ein bisschen schade eigentlich, das wäre jetzt genau mein Ding gewesen.

00:04:15.980 --> 00:04:21.180
 Das nächste Mal muss ich ein Bier suchen, wo draufsteht, schmeckt nach holziger Espresso-Schokolade.

00:04:21.180 --> 00:04:23.720
 Nach saurer holziger Espresso-Schokolade.

00:04:23.720 --> 00:04:28.260
 Du kannst ja mal erzählen, ich glaube, ich bin ein bisschen beschäftigt, bis ich das jetzt aufhabe.

00:04:28.260 --> 00:04:37.160
 Okay, ich habe ein Bellheimer Hell, frisch und mild, steht da drauf, und Alkohol 4,9 und Stammwürze 11,7.

00:04:37.160 --> 00:04:38.620
 Ich habe keine Ahnung, was das bedeutet.

00:04:38.620 --> 00:04:43.380
 Sag mal, hat das eigentlich noch ein normales Etikett oder ist das einfach nur eingefügt in dieses Papier?

00:04:43.380 --> 00:04:44.360
 Ich muss jetzt mal drunter gucken.

00:04:44.360 --> 00:04:45.000
 Das ist gar nicht mehr.

00:04:45.000 --> 00:04:49.460
 Ja, ihr müsst jetzt da kurz durch, durch diese Sounderlebnis.

00:04:49.460 --> 00:04:53.260
 Das ist so krass draufgeklebt.

00:04:53.260 --> 00:04:54.920
 Ich glaube, das ist es tatsächlich.

00:04:54.920 --> 00:05:09.520
 Also im Prinzip kann man sich das vorstellen, das Etikett ist unten ganz normal draufgeklebt, geht aber rund um die Flasche rum und nach oben hin haben sie das gleiche Papier einfach weiter bedruckt, aber einmal gedreht am Flaschenhals und draufgeklebt.

00:05:09.660 --> 00:05:10.540
 Ja, das ist interessant, ne?

00:05:10.540 --> 00:05:18.700
 Ja, so, jetzt, Käse ist auf jeden Fall nicht trüb, das hat man nämlich vorher gar nicht gesehen, aber da schwimmt irgendwas, schwimmt da drin rum.

00:05:18.700 --> 00:05:22.280
 Ja, ich glaube, das ist bei denen, weil die so Natur-Dings.

00:05:22.280 --> 00:05:24.940
 Ja, damit kann man natürlich alles rechtfertigen.

00:05:24.940 --> 00:05:28.300
 Okay, dann öffne ich mal.

00:05:28.300 --> 00:05:32.700
 Meins ist sehr, also wirklich hell, also wirklich sehr klar, nichts drübes.

00:05:32.700 --> 00:05:35.740
 Boah, krass.

00:05:35.740 --> 00:05:40.580
 Ich habe gerade gedacht, das riecht nach Brauerei.

00:05:40.960 --> 00:05:49.020
 Also so wie, ich weiß nicht, das kennt vielleicht nicht jeder, so wie es außerhalb von Brauereien riecht, wenn die am Brauen sind.

00:05:49.020 --> 00:05:50.720
 Boah, ich weiß nicht, ob das am Brauen oder keine Ahnung.

00:05:50.720 --> 00:05:56.580
 Es gibt auf jeden Fall so eine Phase beim Bierbrauen, wo man das dann, wenn man in der Nähe von einer Brauerei ist, sehr deutlich riecht.

00:05:56.580 --> 00:05:58.680
 Von so einem Malzgeruch dann, oder was ist das?

00:05:58.680 --> 00:06:01.420
 Ich weiß es nicht genau, was da so riecht.

00:06:01.420 --> 00:06:04.040
 Und genau so riecht das.

00:06:05.180 --> 00:06:10.700
 Also ich meine, es ist jetzt nicht verwunderlich, dass ein Bier nach Bierbrauen riecht, aber es ist schon ein bestimmter Geruch.

00:06:10.700 --> 00:06:13.180
 Jetzt irgendwie empfinde ich halt irgendwie so.

00:06:13.180 --> 00:06:14.200
 Genau so.

00:06:14.200 --> 00:06:14.460
 Na gut.

00:06:14.460 --> 00:06:17.140
 Ach so, wir müssen ja genau, müssen wir noch durchs Portal anstoßen.

00:06:17.140 --> 00:06:19.300
 So.

00:06:19.300 --> 00:06:22.160
 Ja, Gluck, Gluck.

00:06:22.160 --> 00:06:23.300
 Oh ja.

00:06:23.300 --> 00:06:31.080
 Das schmeckt so ein bisschen wie Corona, so ein bisschen.

00:06:31.080 --> 00:06:34.540
 Also so ein leichtes, ja so ganz leicht.

00:06:35.180 --> 00:06:37.000
 Frisch und Milch, ja passt.

00:06:37.000 --> 00:06:41.960
 Also meins schmeckt besser, als ich es nach der Beschreibung erwartet hätte.

00:06:41.960 --> 00:06:49.080
 Ich hätte gedacht nach der Beschreibung, dass das nichts für mich ist, weil ich mehr so ein bisschen so fruchtige Sachen mag.

00:06:49.080 --> 00:06:56.600
 Aber ich fand das jetzt eigentlich, ich meine, es ist schon stark, aber ich finde es eigentlich ganz gut.

00:06:58.340 --> 00:07:04.640
 Also gut, bevor wir hier zum Bier-Konnoisseur-Podcast werden, machen wir mal mit der Retro.

00:07:04.640 --> 00:07:05.960
 Fangen wir mal los.

00:07:05.960 --> 00:07:07.620
 Fangen wir mal los, fangen wir mal an.

00:07:07.620 --> 00:07:08.800
 Das ist halb fängt schon gut an.

00:07:08.800 --> 00:07:10.800
 Ja super, zwei Schluck und es geht schon los.

00:07:15.000 --> 00:07:21.560
 Die Retrospektive.

00:07:21.560 --> 00:07:22.680
 Die Retrospektive.

00:07:22.680 --> 00:07:23.280
 So.

00:07:23.280 --> 00:07:27.580
 Ich muss ein bisschen ausholen für meine Retro, aber dafür habe ich heute auch nur einen Retro-Punkt.

00:07:27.580 --> 00:07:32.540
 Und zwar bin ich gestern so ein bisschen in so ein Rabbit Hole gefallen.

00:07:32.540 --> 00:07:41.280
 Und zwar Accessibility in Bezug auf Custom-Checkbox und Radio-Button-Elemente.

00:07:41.340 --> 00:07:43.040
 Also wenn man die irgendwie custom stylen will.

00:07:43.040 --> 00:07:45.940
 Ich habe das in der Auswahl.

00:07:45.940 --> 00:07:58.900
 Im Endeffekt im Hintergrund liegen Checkboxen und Radio-Buttons, aber es sind halt einfach nur so Text-Labels, einfach graue Kästen und mit einem hell, also ja, nicht ganz so dunkelgrauen Rahmen außenrum.

00:07:58.900 --> 00:08:04.360
 Und wenn ich die markiere, also aktiviere, also selected sind, dann wird der Rahmen eben ein bisschen dunkler.

00:08:05.200 --> 00:08:12.980
 Und da ist ja das Ding, also ich kann entweder die Checkbox reinpacken und das Label außenrum.

00:08:14.760 --> 00:08:23.560
 Wenn ich aber diesen Check-Zustand abfragen will und darauf basierend dann das Label verändern will, dann kann ich entweder inzwischen den Has-Selector benutzen.

00:08:24.460 --> 00:08:35.400
 Aber falls ich das nicht will und in dem Fall ist das halt ein Plugin, wo wir am Ende nicht wissen, wo muss das überall laufen und sollte das rückwärtskompatibel sein für zum Beispiel halt noch den Firefox, der es nicht kann.

00:08:35.400 --> 00:08:37.080
 Und das sollte es in dem Fall auf jeden Fall.

00:08:37.080 --> 00:08:39.960
 Oder vielleicht sogar noch alte IEs, weil manche doch noch Wert drauflegen.

00:08:39.960 --> 00:08:42.340
 Kann ich also mich auf den Has-Selector nicht verlassen.

00:08:42.440 --> 00:08:48.160
 Das heißt, was ich machen muss, ist die Checkbox oder den Radio-Button vor dieses Label-Element stellen.

00:08:48.160 --> 00:08:53.220
 Und dann kann ich mit dem Selector Doppelpunkt Checked plus Label, kann ich dann drauf reagieren.

00:08:53.220 --> 00:08:55.520
 Wenn das gecheckt ist, wird der Rahmen dunkler und so weiter.

00:08:55.520 --> 00:08:59.780
 Und dann muss ich aber die eigentliche Checkbox, die will ich ja nicht sichtbar haben, muss ich dann verstecken.

00:09:00.660 --> 00:09:05.220
 Und ich habe dann daran gedacht, wir haben irgendwo im Backlog auch was hängen, so verschiedene Arten, wie man Sachen verstecken kann.

00:09:05.220 --> 00:09:12.940
 Und da musste ich dann denken, aha, okay, das kommt jetzt da tatsächlich zum Zug, aber da gehen wir vielleicht mal wirklich noch mal separat drauf ein.

00:09:12.940 --> 00:09:15.660
 Das sollten wir echt, da kann man locker eine Folge dazu machen.

00:09:15.660 --> 00:09:21.720
 Genau, da kann man nämlich sehr viel machen und auch viel, was im Hinblick auf Accessibility eben halt auch wichtig ist.

00:09:21.720 --> 00:09:30.340
 Und dann will ich jetzt auch gar nicht so viel vorwegnehmen, aber grob gesagt, also Display None sollte ich halt nicht machen, weil sonst ist die Checkbox weg für den Screenreader.

00:09:30.660 --> 00:09:37.720
 Und dann gibt es verschiedene andere Möglichkeiten, die man machen kann, damit das eben für den Screenreader trotzdem noch da ist.

00:09:37.720 --> 00:09:46.740
 Da habe ich dann auch schon mal erstmal geguckt, okay, also wenn ich das so und so mache, dann ist es ganz gut.

00:09:46.740 --> 00:09:52.400
 Aber da gibt es dann wieder die und die Hintergründe zum Beispiel, nämlich eben, dass ich eventuell vergesse.

00:09:52.400 --> 00:09:55.780
 Also ich mache dann vielleicht, ich positioniere es absolut im Nirvana zum Beispiel.

00:09:55.780 --> 00:09:58.840
 Dann schließe ich aber trotzdem noch Leute aus.

00:09:58.960 --> 00:10:00.460
 Und da habe ich gar nicht so drüber nachgedacht.

00:10:00.460 --> 00:10:02.260
 Erst durch einen Artikel bin ich da drauf gestoßen.

00:10:02.260 --> 00:10:09.400
 Menschen, die zum Beispiel blind sind und die Navigation mit dem Finger auf dem Touch-Display nutzen,

00:10:09.400 --> 00:10:14.820
 die möchten vielleicht gerne drüber hovern über die Elemente, die da sind und vorgelesen bekommen,

00:10:14.820 --> 00:10:17.980
 aha, unter deinem Finger ist jetzt eine Checkbox oder ein Radio-Button.

00:10:17.980 --> 00:10:20.220
 Und die schließe ich damit aus.

00:10:20.220 --> 00:10:25.180
 Weil wenn das nicht tatsächlich, also für einen Screenreader, den ich mit Tab bediene am PC, ist das kein Problem,

00:10:25.280 --> 00:10:30.060
 weil irgendwann kriegt der den Fokus in der Checkbox trotzdem, weil die Checkbox ist ja trotzdem da.

00:10:30.060 --> 00:10:35.620
 Aber dass Leute das eben per Touch bedienen und vorgelesen haben möchten, wo sie jetzt gerade sind,

00:10:35.620 --> 00:10:37.320
 das habe ich dann zum Beispiel nicht bedacht.

00:10:37.320 --> 00:10:40.100
 Und das habe ich tatsächlich gesagt, ja, macht total Sinn.

00:10:40.100 --> 00:10:45.500
 Aber wenn man nicht so in dieser Accessibility-Welt drin ist, vergisst man das total, hätte das einfach übersehen.

00:10:46.160 --> 00:10:48.360
 Obwohl ich sogar das selber schon mal ausprobiert habe.

00:10:48.360 --> 00:10:50.780
 Auf dem Android-Handy kann man das ja aktivieren, diese Talkback-Funktion.

00:10:50.780 --> 00:10:52.300
 Und dann habe ich das sogar gemacht.

00:10:52.300 --> 00:10:55.800
 Aber man denkt halt als nicht betroffene Person da nicht dran.

00:10:55.800 --> 00:11:00.200
 Und dann hast du gesagt, okay, also ich will auf jeden Fall, dass das sichtbar ist.

00:11:00.200 --> 00:11:03.420
 Und dann habe ich gedacht, okay, was kann ich machen?

00:11:03.420 --> 00:11:08.620
 Hätte ich jetzt die Checkbox in dem Label-Element, würde ich das Label einfach auf Relative setzen

00:11:08.620 --> 00:11:13.380
 und würde die Checkbox absolut drüber positionieren, würde sie auf Opacity 0 setzen

00:11:13.380 --> 00:11:17.200
 und mit Width, Height, 100 Prozent absolut drüber positionieren,

00:11:17.200 --> 00:11:22.300
 sodass das Label quasi drunter liegt, die Checkbox sich voll drüber aufspannt,

00:11:22.300 --> 00:11:24.640
 aber nicht selbst sichtbar ist und dann wäre das gegeben.

00:11:24.640 --> 00:11:28.040
 Kann ich aber in dem Fall eben nicht, weil ich ja die Checkbox vor dem Label habe.

00:11:28.040 --> 00:11:33.600
 Also müsste ich jetzt extra ein Rapper-Element außenrum setzen, um das relativ zu machen.

00:11:33.600 --> 00:11:37.000
 Und dann beides da drin will ich aber auch nicht.

00:11:37.160 --> 00:11:42.040
 Also jetzt extra ein unsemantisches Element reinhauen, nur damit ich das machen kann.

00:11:42.040 --> 00:11:43.720
 Ja, hätte man machen können.

00:11:43.720 --> 00:11:45.200
 Muss man manchmal, ja.

00:11:45.200 --> 00:11:49.080
 Und dann habe ich es aber, wie habe ich es denn dann letztendlich gelöst?

00:11:49.080 --> 00:11:53.000
 Ach genau, ich habe mich dann ARIA-Attributen bedient

00:11:53.000 --> 00:11:57.560
 und habe dann Roll-Checkbox oder Roll-Radio gesetzt auf das Label

00:11:57.560 --> 00:12:00.120
 und habe es dann auch mit NVDA ausprobiert

00:12:00.120 --> 00:12:02.900
 und es funktioniert tatsächlich am Ende so, wie ich das haben möchte.

00:12:02.900 --> 00:12:05.980
 Und das ignoriert dann auch die zusätzliche Checkbox, die noch da wäre.

00:12:05.980 --> 00:12:09.740
 Also das ist dann schlau genug zu verstehen, okay, das ist das Label zu der Checkbox

00:12:09.740 --> 00:12:11.760
 und das Label hat dieses Roll-Attribut.

00:12:12.540 --> 00:12:16.180
 Also spiegelt das quasi den Zustand der Checkbox.

00:12:16.180 --> 00:12:20.160
 Du könntest die Checkbox explizit aber auch vom Screenreader ausschließen, wenn du das möchtest.

00:12:20.160 --> 00:12:22.080
 Könnte ich noch theoretisch zusätzlich machen.

00:12:22.080 --> 00:12:25.140
 Genau, vielleicht auch wenn ich sicher gehen will, dass ein anderer Screenreader da keine Probleme mit hat.

00:12:25.140 --> 00:12:31.240
 Aber interessant, weil ich hätte jetzt tatsächlich irgendwie versucht, deine erste Variante, die du gesagt hast,

00:12:31.240 --> 00:12:36.840
 dass die Checkbox halt tatsächlich da ist, aber halt unsichtbar und aber genau die Größe hat.

00:12:36.840 --> 00:12:43.440
 Das konnte ich an anderer Stelle auch so machen, wo ich eben, da sind das wirklich wie so Farbswatches.

00:12:43.660 --> 00:12:49.060
 Und da drin ist dann die Checkbox und da mache ich das mit dem Checkzustand, kann ich da anders lösen.

00:12:49.060 --> 00:12:50.460
 Also da funktioniert das.

00:12:52.380 --> 00:12:59.700
 Genau, und dann habe ich noch das Problem gehabt mit dem Fokusrahmen, diese Outline.

00:12:59.700 --> 00:13:07.840
 Oder was heißt Problem, also ich habe es letztendlich gelöst bekommen, aber da kam dann ein Wunsch auf,

00:13:07.840 --> 00:13:13.660
 für was man in CSS machen können sollte oder was cool wäre in dem Fall zumindest.

00:13:13.660 --> 00:13:20.240
 Und zwar, wenn ich quasi den Wert von einem Selektor benutzen könnte.

00:13:21.100 --> 00:13:27.640
 Also ich erkläre mal kurz, das hat ja eine Standardfarbe, dieses Outline-Ding.

00:13:27.640 --> 00:13:35.080
 Und das ist ja, jeder Browser macht das ein bisschen anders und ich hätte eigentlich gerne den Default-Fall einfach übernommen.

00:13:35.080 --> 00:13:40.560
 In dem Fall ist es so, dass es wieder WordPress-Kontext, da ist dann eventuell ein Theme außenrum,

00:13:40.560 --> 00:13:46.300
 das aber diese Outline-Farbe überschreibt und dann würde ich es natürlich gerne von dem Theme übernehmen.

00:13:46.600 --> 00:13:52.460
 Jetzt kann ich das, also ich kann auch sagen, das ist im WooCommerce-Kontext, das heißt ich weiß ganz genau,

00:13:52.460 --> 00:13:56.400
 das Verbreitetste für WooCommerce ist halt dieses Storefront-Theme in WordPress.

00:13:56.400 --> 00:14:01.760
 Das heißt, ich gucke da einfach klasse Theme Storefront auf dem Body.

00:14:01.760 --> 00:14:06.300
 Wenn das der Fall ist, dann nehme ich dieses Lila, das dieses Theme da verwendet.

00:14:06.520 --> 00:14:10.240
 Aber ich hätte es ganz gerne, ich würde ganz gerne, per JavaScript würde ich das jetzt so machen,

00:14:10.240 --> 00:14:19.800
 ich suche mir irgendein sichtbares Input-Element auf dem, in der Seite, dupliziere das irgendwie versteckt

00:14:19.800 --> 00:14:23.620
 und gebe ihm irgendwie Fokus und gucke, was es dann für eine Outline-Style hat.

00:14:23.620 --> 00:14:30.000
 Und ich fände es aber irgendwie cool, machen zu können Outline-Doppelpunkt und dann Reuse als CSS-Function

00:14:30.000 --> 00:14:32.500
 und da drin dann zum Beispiel Input-Doppelpunkt-Fokus.

00:14:32.500 --> 00:14:38.060
 Sodass es dann diesen Outline-Value von diesem Input-Doppelpunkt-Fokus einfach übernimmt.

00:14:38.060 --> 00:14:43.460
 Und so könnte ich auf Themes außenrum oder eben auf das Browser-Style-Sheet reagieren.

00:14:43.560 --> 00:14:47.820
 Also ich könnte einfach sagen, von dem und dem Element, diesen Stil würde ich gerne übernehmen.

00:14:47.820 --> 00:14:53.600
 Mir ist klar, dass das wahrscheinlich Performance-Probleme mit sich bringt,

00:14:53.600 --> 00:14:57.440
 weil ich ja zu dem Zeitpunkt vielleicht noch gar nicht weiß, wie dieses Element gerendert wird.

00:14:57.440 --> 00:15:02.420
 Aber die gleiche Gegenargumentation gab es ja bei dem Has-Selector auch.

00:15:02.420 --> 00:15:07.100
 Wo man auch darüber nachdachte, den Parent-Selector zu nennen oder halt,

00:15:07.100 --> 00:15:08.860
 darum ging es ja eigentlich, was man haben wollte.

00:15:08.860 --> 00:15:12.980
 Und dann hieß es immer, ja, das geht nicht, weil wir ja zu dem Zeitpunkt noch gar nicht wissen,

00:15:12.980 --> 00:15:14.640
 wie dieses Element am Schluss gerendert wird und so.

00:15:14.640 --> 00:15:18.380
 Aber man hat das in den Griff bekommen und ich denke, das würde auch irgendwie gehen, das zu machen.

00:15:18.380 --> 00:15:19.820
 Und das fände ich irgendwie ganz cool.

00:15:19.820 --> 00:15:26.200
 Vielleicht habe ich da auch irgendwas übersehen, aber ja, letztendlich habe ich es jetzt so löst.

00:15:26.200 --> 00:15:32.500
 Man kann das auf irgendwie auf Auto setzen und die Outline-Color,

00:15:32.500 --> 00:15:38.920
 da geht es dann in Firefox, kann man mit so speziellen Keywords auf Systemfarben zugreifen.

00:15:38.920 --> 00:15:39.980
 Weiß nicht, ob du das schon wusstest.

00:15:39.980 --> 00:15:44.000
 Da kann man dann Highlight als Keyword nutzen, dann wird das da übernommen.

00:15:44.000 --> 00:15:51.060
 Und ich glaube für, ich habe jetzt den Code nicht offen, aber es waren irgendwie zwei Werte, die man nehmen kann.

00:15:51.060 --> 00:15:53.500
 Der eine überschreibt dann den anderen, je nachdem, was unterstützt wird.

00:15:54.160 --> 00:16:03.100
 Und dann kam ich aber noch zu dem nächsten Ding, Input Focus Within, nee, Focus Visible.

00:16:03.100 --> 00:16:03.980
 Visible, ja.

00:16:03.980 --> 00:16:10.980
 Genau, weil ich möchte ja nicht, dass das bei Klick auf dieses Label dann immer diese Outline hat.

00:16:11.940 --> 00:16:15.380
 Sondern ich möchte nur, dass das beim Tappen passiert, wenn ich mit Tab reinspringe.

00:16:15.380 --> 00:16:22.600
 Da gibt es ja inzwischen eben dieses Focus Visible, wo der Browser dann entscheidet aufgrund einer Heuristik,

00:16:22.600 --> 00:16:29.540
 okay, ist das jetzt per Keyboard-Navigation oder ist das per Klick geschehen, dass ich das,

00:16:29.540 --> 00:16:33.920
 also der entscheidet einfach, soll das jetzt für Accessibility gehighlighted werden oder nicht.

00:16:34.320 --> 00:16:38.700
 Das kann ich jetzt aber in dem Fall nicht machen, weil das Label ja eben kein Focus Visible hat.

00:16:38.700 --> 00:16:47.020
 Das heißt, was ich da machen kann, ist, es gibt Focus Within, ja, das heißt ein Element, wo ein fokussiertes Element drin sitzt.

00:16:47.020 --> 00:16:50.900
 Und es gibt Focus Visible, aber es gibt nicht Focus Visible Within.

00:16:50.900 --> 00:16:53.300
 Und das wäre dann so der nächste CSS-Wunsch.

00:16:53.300 --> 00:16:55.180
 Und mit dem bin ich auch nicht alleine.

00:16:55.180 --> 00:17:00.060
 Also es gibt, das verlinke ich auch in den Shownotes, es gibt beim W3C einen, kann man das nicht kombinieren?

00:17:00.060 --> 00:17:11.560
 Nee, ich glaube, ich muss mal nebenher kurz nochmal den Code öffnen, damit ich das, damit ich nochmal sagen kann, was ich da gemacht habe.

00:17:11.560 --> 00:17:21.840
 Also Focus Within ist sowas, was ich immer mal wieder einsetze und wo ich das Gefühl habe, zumindest so in meinem Umfeld, dass das eher unbekannt ist.

00:17:21.840 --> 00:17:27.080
 Also immer, wenn ich es einsetze, findet sich irgendwie eine Person, die sagt, ah, was, das geht?

00:17:27.080 --> 00:17:39.660
 Und es gibt wahrscheinlich noch eine Million andere Sachen, die ich kennen sollte, aber das ist so ein kleiner Joker, den ich manchmal aus dem Ärmel ziehe, weil ich sage, ja, stimmt, doch, da kann man doch irgendwie was sichtbar machen, wenn der Focus sich irgendwie da drin befindet.

00:17:39.660 --> 00:17:43.720
 Das ist extrem handy, wenn du nicht immer alles mit JavaScript machen willst.

00:17:43.720 --> 00:17:57.460
 Wie die Canary Use Verbreitung ist, Focus Within, also kein IE, klar, überrascht jetzt nicht, aber ansonsten 96 Prozent, also kann man nutzen, aktiv würde ich jetzt sagen.

00:17:57.460 --> 00:18:01.480
 Wir sagen einfach in diesem Podcast nicht mehr IE, das ist so irrelevant geworden, wirklich.

00:18:01.480 --> 00:18:08.820
 Ich glaube, wir sagen einfach alle, ich sage es halt noch, solange es bei Canary Use noch aufgeführt wird, ich warte ja drauf, dass die irgendwann diese Spalte killen oder nur noch auf…

00:18:08.820 --> 00:18:12.620
 Ja, nee, die können die ja gerne drin lassen, aber die können es aus dem Standard rausnehmen.

00:18:12.620 --> 00:18:15.100
 Ich weiß auch nicht, ob es sich auf die Prozentzahl noch auswirkt.

00:18:15.100 --> 00:18:23.680
 Achso, gut, die Prozentzahl ist ja aufgrund des Nutzungsverhaltens, das heißt, solange IE halt noch genutzt wird, wird der sich halt auch da widerspiegeln.

00:18:23.680 --> 00:18:27.720
 Ja, aber das wundert mich, ehrlich gesagt, also die haben ja…

00:18:27.720 --> 00:18:33.760
 Das ist wirklich nur eine Rolle, ich meine, da steht ja, da ist ja auch nicht jeder Browser mit drin.

00:18:33.760 --> 00:18:34.280
 Ja.

00:18:35.480 --> 00:18:46.720
 Von daher wundert mich, ja, okay, aber ich weiß nicht genau, was die Voraussetzung ist, aber hier steht jetzt Beispiel bei Fokus, IE Global Usage 0,51 Prozent.

00:18:46.720 --> 00:18:49.820
 Das ist jetzt, klingt jetzt erstmal nach wenig, aber das ist…

00:18:49.820 --> 00:18:51.320
 Und klar, auch global gesehen, ja.

00:18:51.320 --> 00:18:53.060
 Global gesehen ist das gar nicht so wenig.

00:18:53.300 --> 00:19:05.400
 Und dann haben wir sechs bis zehn, global 0,16 Prozent, also alles unter elf hat 0,1, das ist tatsächlich ziemlich wenig, da würde ich tatsächlich sagen, das kannst du doch vergessen.

00:19:05.400 --> 00:19:07.040
 Ja, mal gucken, vielleicht verschwindet er ja irgendwann.

00:19:07.660 --> 00:19:15.700
 Jedenfalls habe ich dieses, so ein Ticket gefunden, GitHub-Issue, bei diesen CSSWG-Drafts, do we need focus visible within?

00:19:15.700 --> 00:19:21.100
 Und da hat jemand genau das geschildert, ne, es gibt focus within, es gibt focus visible, aber es gibt keine Kombination davon.

00:19:21.100 --> 00:19:24.680
 Und dann hat irgendjemand so, I personally don't see a use case.

00:19:24.680 --> 00:19:32.120
 Das ist so eine tolle Antwort, ne, da kommt jemand und wünscht sich das, also hat er wohl schon einen use case und sagt nicht einfach, ich möchte gerne irgendeinen Sprachfeature haben, ja.

00:19:32.820 --> 00:19:36.160
 Fünf Daumen hoch, 34 Daumen runter.

00:19:36.160 --> 00:19:49.920
 Und dann ist halt, ne, sagen halt ganz viele, naja, immer dann, wenn du einen use case hast für focus visible, äh, ja doch, für focus visible, und da wir ja focus within haben, gibt's schon halt auch Anwendungsfälle für die Kombination aus beidem.

00:19:49.920 --> 00:20:02.100
 Also wie ich's jetzt gelöst hab, ich hab, ähm, ich setze focus visible, äh, focus within auf diese beiden Elemente, also das eine, ah, jetzt genau, jetzt kann ich's auch sagen, minus Webkit, minus focus, minus ring, minus color.

00:20:02.640 --> 00:20:19.600
 Also Webkit focus ring color, die kann man sich, äh, in Webkit-Browsern kann man sich die holen, ähm, und für Firefox ist es eben highlight, wohl mit großem H, ähm, genau, also Outline, Auto, 5 Pixel, Webkit focus ring color, und Outline, Auto, 3 Pixel highlight, in einem, in einer CSS-Regel, eben auf focus within.

00:20:19.600 --> 00:20:40.320
 Dann die nächste Regel, ähm, ähm, aber diesmal mit has focus visible, das kriegt dann das gleiche, ähm, mit, dann überschreibe ich's nochmal fürs Theme, und, ähm, dann nochmal eine Regel, jetzt Achtung, focus within, not, has focus visible.

00:20:41.060 --> 00:20:58.840
 Und der kriegt dann eine Outline none. So, das heißt, also, das Element, dieses Label, ja, mit focus within, sprich, da drin ist irgendwas fokussiert, aber es, es hat nicht ein Element mit focus visible.

00:20:59.480 --> 00:21:01.340
 Okay, ich hab, ich hab, ich hab ein Request an dich. Ja.

00:21:01.340 --> 00:21:13.220
 Ich hab ein Request an dich. Kannst du dir diese Codezeile, ähm, in den Reminder packen, und dass du es in zwei Jahren dir nochmal anguckst, und dich dann fragst, was zur Hölle?

00:21:13.220 --> 00:21:20.200
 Also, es ist, wenn man's, wenn man's sieht, ist es eigentlich, es ist jetzt nur halt verbal schwierig, also, man müsste diese Codezeile, glaub ich, sehen.

00:21:20.200 --> 00:21:34.340
 Ähm, also, was das macht, ist im Endeffekt, wenn du ein fokussiertes Element in dir drin hast, aber dieses Element, ähm, entspricht nicht dem Selektor focus visible, dann, zeig bitte keine Outline an.

00:21:34.340 --> 00:21:35.160
 Also, das ist im Prinzip umgedreht.

00:21:35.160 --> 00:21:38.120
 Also, ich überschreibe es am, am Schluss dann einfach wieder, ja.

00:21:38.760 --> 00:21:41.140
 Und, ähm, genau.

00:21:41.140 --> 00:21:53.240
 Und dadurch hab ich dann im Chrome, also, der Firefox kann das nicht, weil der eben kein Has-Element unterstützt, aber alle anderen Browser den Has-Element haben, das heißt, im Firefox hab ich halt einfach trotzdem den Zustand, ich klicke wo drauf und ich hab halt die Outline.

00:21:53.240 --> 00:21:57.780
 Ist halt so, ist jetzt nicht schön, ist nicht das, was ich will, aber, tja, Pech, Firefox, ja.

00:21:57.780 --> 00:22:08.740
 Und ich möcht's aber im Chrome und in allen, in den ganzen Chromium-Browsern und in allen tollen Browsern, ähm, möchte ich, äh, uh, das war jetzt, uh, ähm, aber da möcht ich's halt einfach nicht.

00:22:08.760 --> 00:22:11.980
 Und so hab ich's dann trotzdem gelöst bekommen, dass es für mich jetzt passt.

00:22:11.980 --> 00:22:13.080
 Ja.

00:22:13.080 --> 00:22:13.660
 Ja.

00:22:13.660 --> 00:22:15.200
 Speak to the hand.

00:22:15.200 --> 00:22:16.580
 Na, was, wieso?

00:22:16.580 --> 00:22:18.440
 Na, ist alles okay, mach weiter.

00:22:18.440 --> 00:22:20.140
 Ich pass, alles gut.

00:22:20.140 --> 00:22:22.780
 Nein, nein, äh, ist, ist alles gut.

00:22:22.780 --> 00:22:23.040
 Genau.

00:22:23.040 --> 00:22:28.260
 Wir haben ja mittlerweile Browser, äh, auf der Chrome-Engine, die, die man verwenden darf.

00:22:28.260 --> 00:22:30.640
 Genau, Brave und so weiter, die können das ja dann, können das auch.

00:22:30.640 --> 00:22:36.200
 Genau, nutzt den Brave-Browser, wir kriegen kein Geld dafür, dass wir Werbung machen, aber nutzt den Brave-Browser, er ist gut.

00:22:36.520 --> 00:22:37.520
 Er ist sehr gut.

00:22:37.520 --> 00:23:04.460
 Ja, also so ein bisschen von hinten durch die Brust ins Auge, aber es funktioniert in 99 Prozent der Fälle so, wie ich's gern haben möchte, ähm, aber wie gesagt, diese zwei Wünsche kamen auf irgendwie so, und vielleicht habt ihr ja auch noch irgendwie Beispiele, für was man das gebrauchen könnte, gerade mit diesem Reuse, also, oder vielleicht weiß auch jemand, ich denk natürlich an den Shep, der vielleicht wieder mit irgendwelchen Drafts um die Ecke kommt, ähm, vielleicht gibt's ja, gab's ja diese Idee schon mal, und das, äh, wurde vielleicht aus Gründen verworfen, oder es hat nie irgendwie Fuß gefasst.

00:23:04.460 --> 00:23:08.080
 Aber so ein Reuse fände ich irgendwie ganz cool. Ähm, ja.

00:23:09.560 --> 00:23:11.840
 Ja, und das war mein, mein kleiner Ausflug.

00:23:11.840 --> 00:23:13.840
 Dein kleiner Ausflug.

00:23:14.940 --> 00:23:42.920
 Ja, damit hab ich, ich hab, damit hab ich echt gestern eigentlich fast den kompletten Tag verbracht, äh, bis, bis das dann alles gepasst hat, und dass ich auch wirklich sicher war mit, mit NVDA, dass das auch funktioniert, und ich hab dann auch abends, ähm, meinem Bruder geschrieben, so, ja, ich hab heute, ähm, weil ich halt immer so ein bisschen Statusbericht gebe, was hab ich denn heute so, so gearbeitet an dem Projekt und so, und hab dann halt erzählt, ah, ich hab heute, bin da so in so ein Rabbit Hole gefallen und hab dann, äh, so Custom, also Accessibility of Custom, äh, Elementen und so.

00:23:42.920 --> 00:23:45.520
 Und dann meinte er, ah, ah, ja, okay, also die wichtigen Sachen.

00:23:45.520 --> 00:23:47.180
 Und ich dachte dann so.

00:23:47.180 --> 00:23:48.680
 Aber ich wollte gerade fragen, war das, war das eine Anforderung?

00:23:48.740 --> 00:24:12.780
 Nein, nein, also es ist nicht mein Kundenprojekt, das ist was, ähm, also ein Plugin, das wir machen, das wir vielleicht mal irgendwann vertreiben, aber mein Anspruch und mein Anspruch ist aber halt, das hab ich ihm auch geschrieben, ich wollte's halt gleich richtig machen, also ich wollte halt, und wir wissen nicht, wo das eingesetzt wird, und, ähm, bei unseren Kundenprojekten, das ist leider Gottes halt oft so, dass dafür am Schluss, dass kein Budget da ist, ja, äh, darauf gezielt zu achten.

00:24:12.780 --> 00:24:21.220
 Ich guck schon, dass ich, dass ich's möglich mach, aber ich hab nicht die Zeit, mich noch aktiv um, um Accessibility zu, zu kümmern, ich guck schon, dass es passt, aber.

00:24:21.220 --> 00:24:22.480
 Aber da hab ich jetzt mal noch ne Frage.

00:24:22.480 --> 00:24:22.780
 Ja.

00:24:22.780 --> 00:24:34.440
 Ähm, ähm, war das nicht mal, war das nicht mal ein Plan, dass ihr so ein, ähm, so ein spezielles WordPress-Blog, äh, WordPress-Theme macht, auf dem, äh, mit dem man dann gut arbeiten kann?

00:24:34.520 --> 00:24:36.220
 Wir haben da schon mal sowas angedacht, ja.

00:24:36.220 --> 00:24:39.200
 Okay, gut, ähm, pass auf, da würde das natürlich auch entsprechen.

00:24:39.200 --> 00:25:04.380
 Da machen wir jetzt, da machen wir jetzt folgendes, da machen wir jetzt folgendes, ähm, wenn ihr das irgendwann mal habt, dann, äh, dann schickt ihr das einfach mal zu mir, und dann, ähm, dann machen wir mal ein Review, ich mach's dann komplett kaputt, und, äh, dann kriegst du das zurück, und dann, und dann machen wir das, weil wenn du so eine gute Basis hast, dann, dann, äh, ist es schwer, Dinge nochmal falsch zu machen, wenn du schon für alle, wenn du an alle, äh, kleinen Fälle schon mal, natürlich nicht alle Fälle,

00:25:04.380 --> 00:25:11.140
 aber wenn du so an die Haupt-Use-Cases schon mal gedacht hast, und die irgendwie accessible sind, ähm, ja, lass uns das so machen.

00:25:11.140 --> 00:25:12.720
 Ja, gerne, danke, machen wir.

00:25:12.720 --> 00:25:24.520
 In dem Fall war einfach so mein, ja, in dem Fall war wirklich halt mein Anspruch so, ne, ich, ich möchte, dass, wenn ich sowas als Plugin loslasse, und das irgendwo eingesetzt wird, dann soll das auch, äh, für, für.

00:25:24.520 --> 00:25:34.240
 Das finde ich sehr gut, weil das nämlich ein großes Problem von ganz vielen Plugins ist, dass die, dass die eben, du möchtest ein Plugin verwenden, und dann hast halt irgendwie so ein Mistcode, der da drin ist,

00:25:34.240 --> 00:25:41.000
 da drin ist, weil es irgendwie reingerotzt ist, und dann, äh, müsstest du eigentlich das Plugin quasi neu schreiben, wenn du, wenn es irgendwie accessible sein soll.

00:25:41.000 --> 00:25:56.640
 Deswegen finde ich das sehr, sehr lobenswert, wenn, wenn darauf mal geachtet wird. Also, ich habe so das Gefühl, in der WordPress-Blase, gut, ich bin da nicht so oft, aber immer, wenn ich mal reingeguckt habe, war Accessibility, das hat wirklich niemanden interessiert, meistens. Also, und dann, was machst du dann?

00:25:56.640 --> 00:26:10.160
 Ne, also, das bietet, das baut dir jetzt HTML-Code, den du nicht customizen kannst, dann bist du, also, kannst du erst im Prinzip nur die Wahl, nutze ich das Ding jetzt, oder mache ich es mit, mit aller Gewalt, force ich da mein eigenes HTML drüber, aber dann kannst du das Plugin quasi fast selbst schreiben.

00:26:10.400 --> 00:26:21.940
 Also, man muss sagen, so, die Standard, also, die Standard-Themes von Automatic, also, der WordPress-Firma, und auch so die Plugins, die die, ähm, veröffentlichen, und auch WooCommerce ist ja auch von denen, ähm, die achten da schon drauf.

00:26:22.040 --> 00:26:34.080
 Also, da gibt's schon Screenreader-Texte und auch ARIA-Labels und so, und das wird, wird da schon umgesetzt. Aber so, in dieser Plugin-Welt, da hast du schon recht, ne, das sind halt alles Einzelentwickler, ähm, und Chat-GPT, seit neuestem.

00:26:34.080 --> 00:26:42.100
 Chat-GPT, genau. Ähm, da ist das tatsächlich, äh, leider nicht so, nicht so der Fokus drauf. Ja, Fokus, haha, kein Fokus mit dem.

00:26:42.100 --> 00:26:48.080
 So, damit haben wir's abgerundet. So, gut.

00:26:48.080 --> 00:26:49.020
 Genau, okay.

00:26:50.520 --> 00:27:17.760
 Ja, ähm, mein Retro-Punkt, es ist eigentlich nur ein, ein, ein dickes Dankeschön, äh, an die ganz vielen Kommentare, die zur letzten Folge gekommen sind, die auch extrem, ähm, gut, sind insgesamt gar nicht so viele zahlenmäßig, aber sie sind sehr lang, hab ich vorhin schon angesprochen, ähm, mit vielen, vielen, vielen Ergänzungen zu, was man denn jetzt hätte bei, äh, den Elementen, die wir in der letzten Folge besprochen haben, äh, noch dazu sagen hätte können.

00:27:17.760 --> 00:27:27.380
 Und man kann natürlich immer, ähm, also, wir erheben auch keinen Anspruch auf absolute Vollständigkeit, man kann natürlich immer noch was finden, äh, was, was man noch dazu hätte sagen können.

00:27:27.380 --> 00:27:38.880
 Das wollte ich eh mal, ähm, wollte ich eh mal sagen, also, guckt ab und zu mal in die Kommentare zu unseren Folgen, weil da sind manchmal echt, ähm, ja, echt interessante Anstöße noch und, und weiterführende Links.

00:27:38.880 --> 00:27:47.680
 Und jemand sagt, ah, da habt ihr nach dem und dem gefragt und das geht tatsächlich so und so und nicht immer denken wir dann dran oder schaffen es, ähm, das in der nächsten Folge dann irgendwie nochmal aufzugreifen.

00:27:47.680 --> 00:27:58.780
 Also, da, da sind manchmal sehr interessante Sachen dabei und, ähm, das lohnt sich manchmal da in die Kommentare zu schauen, vielleicht so mit einer Woche Abstand, nachdem die Folge, äh, veröffentlicht wurde, ne, dass da die Leute ein bisschen Zeit hatten, was zu schreiben.

00:27:59.200 --> 00:28:04.460
 Ähm, manchmal kommt auch noch später irgendwie, merkt man, dass die Leute noch was nachhören und dann was kommen, also, da ist interessanter Input dabei.

00:28:04.460 --> 00:28:21.900
 Also, äh, kleine Anekdote an der Stelle, ähm, der Shep hat zwischendurch uns geschrieben und hat gesagt, äh, ich bin grad, äh, am Vollgehören, hab irgendwie jetzt die Hälfte und, ähm, wollt noch einen Kommentar dazu schreiben, aber welche HTML-Tags sind eigentlich nochmal unterstützt oder unterstützt ihr Markdown?

00:28:22.240 --> 00:28:30.400
 Und dann hab ich, bevor er seinen Kommentar geschrieben hat, das noch eingebaut, dass man bei einem Kommentarformular, äh, sehen kann, welche HTML-Tags unterstützt werden.

00:28:30.400 --> 00:28:33.120
 Das ist so der Standard von WordPress, das war auch irgendwie ein komischer Ausflug.

00:28:33.120 --> 00:28:36.620
 Das war aber gar nicht so leicht, ne, wir haben beide versucht, da was in der Dokumentation zu finden.

00:28:36.620 --> 00:28:49.580
 Es gibt keine offizielle WordPress-Doku dazu, letzten Endes ist der Code die Doku an der Stelle, ähm, wir haben jetzt so ein, so ein kleines Element da unten drunter, so ein kleines Detail-Summary, was man ausklappen kann, dann sieht man, was man machen kann, was, was WordPress da erlaubt.

00:28:50.000 --> 00:28:51.160
 Ähm, aber das, das nur am Rande.

00:28:51.160 --> 00:28:55.760
 Ähm, er hat halt gefragt, ja, weil ich will, ich will das ja vernünftig formatieren, äh, sag doch mal Bescheid.

00:28:55.760 --> 00:29:00.320
 Und dann hat er einen Kommentar rausgehauen, der ist, wenn du den ausdrücken würdest, wahrscheinlich über eine DIN A4-Seite.

00:29:00.320 --> 00:29:04.300
 So, aber, ähm, also als erstes von oben nach unten.

00:29:04.300 --> 00:29:06.860
 Ich werde jetzt auch nicht auf alles eingehen, das ist, glaube ich, zu viel.

00:29:06.860 --> 00:29:13.980
 Ähm, wurde zum Beispiel erwähnt, ähm, dass man beim Title-Tag, äh, dass man die in der Browser-Historie noch, äh, sehen kann.

00:29:13.980 --> 00:29:16.160
 Ähm, stimmt, haben wir nicht dran gedacht, ja.

00:29:16.360 --> 00:29:22.100
 Ähm, es wurde, ja gut, ich meine, es, es gibt, es gibt ja auch unendlich viele Dinge, die man, die man sagen kann.

00:29:22.100 --> 00:29:26.520
 Oder wenn man es zu, zu, ähm, hinzufügt, ne, als Lesezeichen und so, da ist natürlich auch der Titel drin.

00:29:26.520 --> 00:29:31.420
 Genau, oder wenn man die Seite als Lesezeichen, dann hat man das Title-Tag, äh, mit, mit drin.

00:29:31.420 --> 00:29:40.000
 Ähm, diverse SEO-Anmerkungen gab's, ähm, dann gab's noch was zu Lang, zum Lang-Attribut.

00:29:40.000 --> 00:29:46.460
 Ähm, genau, Silbentrennung, genau, dass das auch auf die Silbentrennung Auswirkung hat, ja, dieses, äh, hyphenate in CSS.

00:29:46.760 --> 00:30:00.000
 Genau, und den Kommentar vom Chef, äh, ich glaub, der hat zu allem was gesagt, äh, der ist wirklich extrem lang, ähm, das, also würde ich sagen, lese den euch einfach mal selbst durch, aber das ist wirklich sehr, sehr, sehr gut.

00:30:00.000 --> 00:30:14.080
 Ähm, und offenbar haben wir da irgendwie was angestoßen, ähm, also, das ist ja auch schon mal ganz gut, ich mein, wir, wir geben ja auch nicht vor, dass wir irgendwie alles wissen, aber wenn wir so ein bisschen was anstoßen und wir lernen dann bei den Kommentaren auch noch was, das find ich echt, das find ich echt richtig toll.

00:30:14.080 --> 00:30:29.060
 Ich füge auch gleich mal den Link in die Shownotes ein, so direkt zu den Kommentaren zur letzten Folge, und, ähm, wenn, wenn das weitergeht, so mit dem Feedback, äh, den Ergänzungen, dann machen wir das, glaub ich, jetzt in dieser Serie jedes Mal, dass wir, äh, zu dem, zu dem letzten Block an Elementen das nochmal aufgreifen, das find ich eigentlich ganz gut.

00:30:29.060 --> 00:30:38.720
 Genau, also, wie gesagt, also, es ist, es ist, es ist unglaublich viel, was da jetzt irgendwie noch kam, ich hab's jetzt nicht alles nochmal aufbereitet, ich wollt nur sagen, vielen, vielen, vielen Dank.

00:30:38.720 --> 00:30:51.380
 Ja, das fand ich jetzt echt, äh, sehr schön, äh, ich hab noch einiges gelernt dabei, ähm, und, äh, weiter so, hat mich echt gefreut, also, dann, äh, ist es offenbar, haben wir irgendwie so einen kleinen Nerv getroffen, da jetzt.

00:30:51.380 --> 00:31:01.620
 Was auch interessant war, der Shep meinte noch, ähm, deswegen sagt er schon lange, es müsste mal wieder eine, nur HTML, ähm, äh, Dings geben, ähm, Veranstaltung, irgendwie so eine Konferenz.

00:31:01.620 --> 00:31:17.760
 Ich erinnere mich, dass der, ja, ich erinnere mich, dass der, dass der Manuel Matusowitsch mal sowas angedacht hat, äh, und er hat, glaube ich, sogar damals schon nach Namen, äh, irgendwie so ein Namensbrainstorming gemacht für so eine Konferenz.

00:31:18.300 --> 00:31:24.280
 Also, vielleicht, ich weiß nicht genau, also, Manuel, falls du das hörst, äh, unbedingt machen.

00:31:24.280 --> 00:31:24.680
 Ja.

00:31:24.680 --> 00:31:29.520
 Und, äh, wenn du, wenn du noch einen Slot frei hast, ich, äh, ich mach auch einen Talk.

00:31:29.520 --> 00:31:30.140
 Ah, sehr schön.

00:31:30.140 --> 00:31:39.740
 Zu irgendeinem, am besten dann zu irgendeinem, äh, ich nehm einen Abendtalk, wo die Leute schon angesoffen sind, und ich mach dann einen Talk zu irgendeinem obskuren HTML-Element, das keiner benutzt.

00:31:40.280 --> 00:31:48.360
 Irgendwie so, warum DDR die Welt rettet, oder das Ruby-Element, äh, 100 Anwendungsfälle, oder irgendwie so ein Quatsch mach ich dann.

00:31:48.360 --> 00:31:56.280
 Nee, also, gerade, äh, Semantik und, und so diese ganze Aria-Geschichte, das fände ich echt mal wichtig, weil ich glaube, das ist nicht so verbreitet und in den Köpfen nicht so drin.

00:31:56.280 --> 00:31:58.540
 Also, mal gucken, vielleicht, äh.

00:31:58.540 --> 00:32:02.780
 Wobei, äh, da kommen wir später auch noch zu, aber das nehme ich jetzt vielleicht kurz vorweg.

00:32:02.780 --> 00:32:05.780
 Ähm, oh Gott, wir sind schon echt wieder lang dran dafür, dass wir ...

00:32:05.780 --> 00:32:06.920
 Halbe Stunde und noch nicht manche machen.

00:32:06.920 --> 00:32:12.680
 Ähm, äh, das Beste, was du machen kannst, ist, dass du kein Aria brauchst.

00:32:12.680 --> 00:32:13.160
 Ja, ja, klar.

00:32:13.160 --> 00:32:16.660
 Also, am besten, no Aria is better than Aria.

00:32:16.660 --> 00:32:20.820
 Das haben wir auch schon mal gesagt in der, in so einer Semantik, äh, Folge, genau.

00:32:20.820 --> 00:32:29.160
 Genau, deswegen hab ich vorhin so ein bisschen, so ein bisschen gecringed, als du gesagt hast, ja, bei Automatic in den Themes, da sind auch Aria-Attribute drin.

00:32:29.160 --> 00:32:31.560
 Und ich dachte so, das muss nicht unbedingt was Gutes heißen.

00:32:31.560 --> 00:32:38.100
 Ja, das stimmt schon. Ne, aber ich meinte nur, da hat jemand was versucht, im Hinblick auf accessibility zu machen, das ist ja schon mal was.

00:32:38.340 --> 00:32:44.680
 Du kennst ja, du kennst ja, gut gemeint ist das Gegenteil, sind gut gemacht. Aber ich hab's, ich kann's nicht bewerten.

00:32:44.680 --> 00:32:46.140
 Ich hab's, ich hab's nicht gesehen.

00:32:46.600 --> 00:32:49.800
 Also, Screenreader-Texte versteckt, das sieht man tatsächlich häufig.

00:32:49.800 --> 00:32:56.000
 Es gibt gute, es gibt, nee, es gibt gute Gründe für Aria, aber wenn man's vermeiden kann, sollte man's vermeiden, es sei an der Stelle vielleicht nochmal gesagt.

00:32:56.000 --> 00:33:01.040
 Einfach aus dem Grund, weil, wenn man's gleich richtig macht, dann braucht man sie einfach nicht, also darum geht's ja.

00:33:01.040 --> 00:33:10.360
 Äh, die sind ja an sich nicht, nicht schlecht, weil, ne, sie sind ja überprüfbar, funktionieren sie ja mit den Screenreadern, aber warum nicht gleich richtig machen, wenn's, äh, wenn's geht?

00:33:10.740 --> 00:33:19.840
 Wenn's eine Alternative, aber da kommen wir tatsächlich noch im Detail, wir haben ja heute noch ein paar HTML-Elemente, über die wir widersprechen, ähm, genau, da kommen wir später im Detail noch dazu.

00:33:19.840 --> 00:33:26.220
 Gut, aber zunächst, dann, die Property der Woche.

00:33:26.220 --> 00:33:35.740
 Das wird heute nur ein Anreißer, weil ich war sehr beschäftigt damit, äh, HTML-Elemente mir anzugucken.

00:33:36.360 --> 00:34:03.140
 Deswegen, äh, nur ein kleiner Anreißer, den wir auch im Stream schon hatten, und zwar, äh, wollte ich mal die Shape Detection API, beziehungsweise die Face, ich glaub, sie heißt nicht Face Detection API, Face Detection ist ein Teil der Shape Detection API, also es gibt tatsächlich etwas, was Gesichter erkennen kann im Browser, aber auch, äh, wenn ich's richtig gesehen hab, Barcodes und auch Text, aber halt aus, äh, das ist Teil davon, tatsächlich Text Detection.

00:34:03.580 --> 00:34:06.780
 Ah, ähm, das hab ich mir tatsächlich nicht im Detail angeschaut.

00:34:06.780 --> 00:34:24.800
 Ich bin über Face Detection draufgekommen, ähm, weil, äh, ich in einem Vortrag, der tatsächlich von 2009, nee, von 2019, doch, von 2019 war, ähm, eine Demo gesehen hab davon, ähm, die, die wir auch, äh, verlinken werden, nämlich Shy Blob Face Detection.

00:34:25.340 --> 00:34:43.220
 Ähm, das hatten wir auch im Stream schon, ähm, wo ich die Webcam einfangen kann, ähm, und mit der Face Detection API vorausgesetzt, das Gerät unterstützt das, das machen nicht alle, ähm, kann ich tatsächlich Gesichter erkennen im Webcam Bild und, äh, entsprechend mit der Webseite da drauf reagieren.

00:34:43.620 --> 00:34:53.500
 Ähm, ich werd da jetzt nicht auf die einzelne Implementierung eingehen, wie gesagt, dafür hat die Zeit in der Vorbereitung jetzt nicht gereicht, schaut's euch mal an, wir haben Links in den Shownotes, aber ich find's ziemlich beeindruckend, dass es sowas überhaupt gibt.

00:34:54.040 --> 00:35:00.780
 Wie gesagt, es gibt auch, äh, Barcode Detection, ich glaub, das haben wir im Stream versucht, äh, nee, haben wir vor kurzem mal irgendwie versucht.

00:35:00.780 --> 00:35:01.780
 Doch, doch, das haben wir, ne?

00:35:01.780 --> 00:35:02.260
 Ja, genau.

00:35:02.260 --> 00:35:04.820
 Ähm, auch, auch ein verrücktes Ding.

00:35:04.820 --> 00:35:10.000
 Barcode Detection hat zum Beispiel nur auf Mobile Chrome, äh, Browser funktioniert.

00:35:10.000 --> 00:35:10.820
 Genau.

00:35:10.820 --> 00:35:20.280
 Das ging im Browser nicht, da braucht man dann doch externe Libraries dafür, ähm, genau, aber in, in, in Chrome Web, äh, Chrome Mobile funktionierte das, ja.

00:35:20.420 --> 00:35:24.800
 Genau, und es ist hinter dem Experimental Web Platform Features Flag in Chrome.

00:35:24.800 --> 00:35:35.200
 Die Face Detection ist, äh, hinter dem Flag, genau, aber auch im Desktop Browser dafür und die Barcode Detection, die ist nicht hinter einem Flag, funktioniert dafür aber nur mobil, so, so rum war's, ja.

00:35:35.200 --> 00:35:50.160
 Genau, also das auf jeden Fall mal, also auf jeden Fall die Demo mal angucken, aber wie gesagt, man braucht spezielle Anforderungen dafür, ähm, aber das ist total abgefahren, also, und diese kleine, diese kleine süße Demo, die wir da haben, das ist da so ein kleines Tanzen des Männchen,

00:35:50.160 --> 00:36:03.820
 das, ähm, das schüchtern ist, weil wenn jemand zuguckt, dann hört's auf zu tanzen und, äh, kriegt rote Bäckchen, ähm, äh, genau, und das wird mit der Face Detection API realisiert, was, äh, ich, finde ich, eine ziemlich coole Sache ist.

00:36:03.820 --> 00:36:09.180
 Es ist aber noch so experimentell, trotz, dass es das schon eine Weile gibt, dass es nicht mal einen Can-I-Use-Eintrag gibt.

00:36:09.180 --> 00:36:14.920
 Das wundert mich, also wenn der Artikel von 2019 schon ist mit der Demo, dann hat sich da echt erstaunlich wenig getan, ne?

00:36:14.920 --> 00:36:33.180
 Also weder ein Can-I-Use-Eintrag noch irgendwie andere Browser haben versucht, das, äh, zu implementieren oder auch nur angedacht, also man, ja, ich weiß nicht, ob das, ob es dann einen gescheiten Draft überhaupt dazu gibt oder ob das wirklich so was Experimentelles erstmal war, äh, dass das noch gar nicht den Weg in irgendwelche offiziellen Drafts gefunden hat.

00:36:33.180 --> 00:36:39.900
 Ja, alle anderen finden es einfach scheiße und, äh, sagen, ey, Google, ihr wollt doch nur alles kontrollieren und so.

00:36:39.900 --> 00:36:47.000
 Face Detection stelle ich mir jetzt nicht so einfach vor, technisch.

00:36:47.000 --> 00:36:50.820
 Ne, wahrscheinlich nicht, ne, aber, aber gibt's bestimmt auch per JavaScript schon.

00:36:50.820 --> 00:36:54.760
 Mit Sicherheit, mit Sicherheit, aber auch bei JavaScript gibt's bestimmt auch, äh, ja.

00:36:54.760 --> 00:37:02.620
 Aber klar, performanter, als wenn's nativ vom Browser oder vielleicht sogar nativ aus einer, ähm, aus einer Bibliothek auf dem Gerät kommt.

00:37:02.860 --> 00:37:05.320
 Ich würde ja tippen, dass das so durchgreift, ja, ja.

00:37:05.320 --> 00:37:18.480
 Genau, also beim Barcode denke ich mal, dass das der Grund ist, warum's mobil funktioniert und auf dem Desktop nicht, weil die Mobilgeräte halt schon so Barcode-Funktionen oft im Betriebssystem mit drin haben und, ähm, wahrscheinlich da direkt das anzapfen können dann als Browser.

00:37:19.260 --> 00:37:30.780
 Ja, das war ja auch zum Beispiel nochmal ganz, ganz, ganz, ganz alt, äh, so ein Ansatz von Firefox OS, wo viele, ähm, APIs definiert wurden, die direkt auf, äh, System-Sachen zugreifen.

00:37:30.780 --> 00:37:34.160
 Das war irgendwie so der Anfang von sowas, fand ich irgendwie cool und gut, dass es auch weitergeht.

00:37:34.160 --> 00:37:37.780
 Also, der Browser, das allmächtige Werkzeug.

00:37:37.780 --> 00:37:41.240
 Aber das war's schon mit der Property der Woche.

00:37:41.240 --> 00:37:42.720
 Gut.

00:37:42.720 --> 00:37:43.500
 Dann kommen wir jetzt.

00:37:43.500 --> 00:37:48.720
 Hier ist WWS-IV mit dem Tagesthema.

00:37:48.720 --> 00:37:54.480
 Übergang verkackt.

00:37:55.900 --> 00:37:56.800
 Na und?

00:37:56.800 --> 00:37:57.940
 Na und?

00:37:57.940 --> 00:38:00.140
 Denner Hund.

00:38:00.140 --> 00:38:00.740
 Kennst du den?

00:38:00.740 --> 00:38:01.280
 Ja, ja, klar.

00:38:01.280 --> 00:38:02.480
 Das Ninehorn.

00:38:02.480 --> 00:38:04.640
 Das Ninehorn, denner Hund und, äh.

00:38:04.640 --> 00:38:05.460
 Königsdochter.

00:38:05.460 --> 00:38:06.860
 Die Königsdochter.

00:38:06.860 --> 00:38:15.040
 So, heute sprechen wir über HTML-Content-Sectioning-Elemente.

00:38:15.040 --> 00:38:17.340
 Und wir versuchen, sie alle durchzukriegen.

00:38:17.340 --> 00:38:20.440
 Und wir geben uns auch Mühe, uns zu beeilen.

00:38:20.440 --> 00:38:22.960
 Ähm, hab ich, sag ich jetzt einfach mal.

00:38:22.960 --> 00:38:25.140
 Äh, so.

00:38:25.140 --> 00:38:26.560
 Okay, gut.

00:38:26.560 --> 00:38:36.120
 Genau, und für alle, die sich wundern, wer die letzte Folge nicht gehört hat und jetzt da aber reinhört, ähm, wir gehen, der Titel unserer Folge lässt vermuten, wir machen das von A bis ZZ, ja.

00:38:36.120 --> 00:38:46.300
 Äh, wir gehen aber nicht alphabetisch vor, so direkt, sondern es gibt vom, äh, von MDN so eine Auflistung, ähm, sortiert nach, nach so ein bisschen, also gruppiert nach bestimmten Bereichen.

00:38:46.300 --> 00:38:49.060
 Und innerhalb deren gehen wir dann alphabetisch vor.

00:38:49.060 --> 00:38:51.860
 Also nicht wundern, dass das ein bisschen kreuz und quer anmutet.

00:38:52.480 --> 00:39:01.500
 Genau, ähm, es ergibt aber durchaus Sinn, weil du ansonsten, ähm, Elemente, die gar nichts miteinander zu tun haben, nacheinander hast und manchmal baut's aufeinander auf.

00:39:01.500 --> 00:39:04.320
 Also von daher ist es schon sinnvoll, diese, äh, die Reihenfolge.

00:39:04.320 --> 00:39:06.460
 Alles, was wir machen, hat Hand und Fuß.

00:39:06.460 --> 00:39:07.240
 Nein.

00:39:07.240 --> 00:39:11.160
 Das würde ich, so weit würde ich jetzt nicht gehen.

00:39:11.160 --> 00:39:15.240
 Das war auch mit ein bisschen Ironie versehen.

00:39:15.240 --> 00:39:17.580
 Zielführend, aber, aber unterhaltsam.

00:39:17.580 --> 00:39:19.680
 Und mir hat der Chef gesagt, das werde ich nie vergessen.

00:39:19.680 --> 00:39:20.640
 Vielen Dank an der Stelle.

00:39:20.640 --> 00:39:27.500
 Genau, ähm, aber vielleicht bevor wir anfangen, nochmal ein bisschen, wieso, weshalb, warum.

00:39:27.500 --> 00:39:34.540
 Und, äh, ich, das machen wir jetzt, weil, äh, weil es jetzt tatsächlich an so Semantik-Sachen rangeht.

00:39:34.540 --> 00:39:40.960
 Wir hatten ja in der letzten Folge so, mehr so die unsichtbaren Dinge von HTML, also alles, was sich so im Head befindet.

00:39:41.020 --> 00:39:46.960
 Ähm, jetzt, äh, jetzt kommen aber, jetzt kommen aber Elemente, die, äh, die sichtbar sind auf der Seite.

00:39:46.960 --> 00:39:52.340
 Und heute reden wir ganz speziell über semantisch, äh, semantische Elemente oder, ja, semantische Gruppierung.

00:39:52.340 --> 00:39:57.600
 Und jetzt könnte man ja sagen, äh, was soll das eigentlich?

00:39:57.600 --> 00:39:59.360
 Äh, Diff ist doch ein super Element.

00:39:59.360 --> 00:40:00.440
 Das hast du dich verschrieben.

00:40:00.440 --> 00:40:02.300
 Du wolltest doch schreiben, Diff ist ein Suppenelement, oder?

00:40:02.300 --> 00:40:04.080
 Diff ist ein Suppenelement.

00:40:04.080 --> 00:40:07.600
 Stimmt, ich hab mich, wie konnte mir das nur passieren?

00:40:07.600 --> 00:40:08.160
 Diff-Suppe.

00:40:08.160 --> 00:40:09.960
 Ach so.

00:40:11.020 --> 00:40:13.080
 Ja.

00:40:13.080 --> 00:40:22.400
 Meine, meine Leitung war heute, äh, ähm, ich wollte gerade sagen lang, aber ich würde sagen, es war so ein bisschen Interferenz auf dem, äh, auf dem Funkweg.

00:40:22.400 --> 00:40:25.080
 Genau, und war so eine Mikrowelle dazwischen oder so.

00:40:25.080 --> 00:40:31.440
 Äh, genau, also, äh, der Diff-Suppe, ja, das hat der eine oder andere vielleicht, äh, schon mal gehört.

00:40:31.440 --> 00:40:36.100
 Ähm, Diff hat halt überhaupt gar keine semantische Bedeutung.

00:40:36.100 --> 00:40:40.060
 Ähm, deswegen wollen wir, wollen wir nicht einfach nur für alles Diffs nehmen.

00:40:40.860 --> 00:40:49.200
 Ähm, aber so, um so ein bisschen, ähm, das Ganze mal einzufassen, äh, ich hatte vor einer Weile, äh, warte mal, wann war das denn?

00:40:49.200 --> 00:41:03.820
 Äh, äh, Oktober 2020 habe ich mal einen kleinen Twitter-Thread geschrieben, den es auch bei der Threadreader-App, äh, gibt als, als einen kleinen Artikel, ähm, wieso, ähm, semantisches HTML wichtig ist.

00:41:03.820 --> 00:41:06.520
 Und was, und was, und was das bedeutet und warum man das machen sollte.

00:41:06.520 --> 00:41:16.220
 Ähm, und zwar, was bedeutet es, ist, das vorhandene Vokabular zu nutzen, Beziehungen herzustellen und Bedeutung maschinenlesbar und eindeutig zu machen.

00:41:16.540 --> 00:41:23.940
 Und warum sollte man das machen? Ähm, ich hab, ich hab dafür mal so einen, so einen Überbegriff Lesbarkeit, äh, etabliert.

00:41:23.940 --> 00:41:30.140
 Ähm, also Lesbarkeit für verschiedenste Dinge oder für verschiedenste Konsumenten, sag ich es mal im Allerweitersten.

00:41:30.140 --> 00:41:46.520
 Ähm, Lesbarkeit nämlich für Menschen, also für, äh, für Coder, ja, also, ähm, aber auch für Maschinen, ähm, und Code wird halt zum Beispiel leichter passbar, äh, für alle möglichen, äh, Maschinen, wenn er semantisch ausgezeichnet ist.

00:41:46.520 --> 00:41:53.980
 Ähm, über, äh, über so Web-Semantics haben wir auch schon, äh, eine Folge gehabt, ähm, vor kurzem mit dem Matthias Pfefferle.

00:41:53.980 --> 00:42:02.160
 Ähm, aber es geht jetzt vor allem halt auch um, äh, Suchmaschinen, die den Code dann besser zuordnen können oder die, die Bedeutung des Codes besser verstehen.

00:42:02.160 --> 00:42:08.120
 Oder aber halt auch assistive Technologien wie Screenreader zum Beispiel, ähm, die wir auch schon angesprochen haben heute.

00:42:08.120 --> 00:42:14.520
 Ähm, und, äh, wie macht man das?

00:42:15.340 --> 00:42:24.660
 Nein, man sollte sich beim Schreiben von HTML immer die Frage stellen, und da haben wir auch schon mal eine Folge drüber gemacht, ich mach das jetzt im Schnelldurchlauf, was ist es, was tut es und was meint es so im Kontext.

00:42:24.660 --> 00:42:32.520
 Und dann gibt es ein bestimmtes Vokabular, äh, das dafür verwendet wird, um eben, ähm, ähm, äh, Elemente semantisch auszuzeichnen.

00:42:32.520 --> 00:42:45.100
 Und heute sprechen wir über so Blöcke, also über so semantische Blöcke, nicht über das, wie zeichne ich jetzt, ähm, äh, einen Link aus oder einen Abschnitt im Text oder so,

00:42:45.160 --> 00:42:47.740
 sondern mehr so große Themenblöcke auf einer Seite.

00:42:47.740 --> 00:42:51.260
 Das, das ist das, was wir jetzt heute durchmachen.

00:42:51.260 --> 00:42:52.860
 Ähm, genau.

00:42:52.860 --> 00:43:03.740
 Das so als kurze Einleitung, ähm, wenn ihr, wenn ihr Lesbarkeit für alle möglichen, äh, Menschen, aber auch Maschinen gewährleisten wollt, semantisches HTML is your friend.

00:43:05.020 --> 00:43:07.260
 Und damit, äh, ja, genau.

00:43:07.260 --> 00:43:07.600
 Ganz wichtig noch.

00:43:07.600 --> 00:43:08.720
 Das war noch was verlinkt, ja.

00:43:09.060 --> 00:43:12.740
 Wir hatten noch, wir hatten, wir hatten ja schon mal eine Folge genau zu dem Thema gemacht.

00:43:12.740 --> 00:43:15.640
 Ähm, die hieß Semantik HTML.

00:43:15.640 --> 00:43:16.520
 Hallo Manuel.

00:43:16.520 --> 00:43:17.320
 HTML.

00:43:17.320 --> 00:43:18.680
 HTML.

00:43:18.880 --> 00:43:29.540
 Wir haben uns da bei deinem Namen bedient, wo es im Prinzip genau um das Thema geht, äh, was ich jetzt, was ich jetzt grad schon so ein bisschen angerissen hab und geht auch noch ein bisschen mehr in die Tiefe mit bestimmten Elementen, wann man was verwendet und so weiter.

00:43:29.540 --> 00:43:36.040
 Ähm, und wenn man sich auch, wenn man sich nicht sicher ist, was man verwenden soll, dann ist es schon relativ alt.

00:43:36.140 --> 00:43:38.360
 Ich muss grad mal gucken, von wann ist denn das, seh ich das da irgendwie?

00:43:38.360 --> 00:43:38.720
 Nee, seh ich leider nicht.

00:43:38.720 --> 00:43:39.340
 2011.

00:43:39.340 --> 00:43:40.260
 2011.

00:43:40.260 --> 00:43:40.820
 Rechts unten steht's, ja.

00:43:40.820 --> 00:43:42.840
 Ähm, ah ja, genau.

00:43:42.840 --> 00:43:48.400
 Gab es von HTML5-Doktor, ich weiß gar nicht, ob es die Seite noch so richtig, funktioniert die, funktioniert die noch?

00:43:48.400 --> 00:43:48.820
 Gibt's die noch?

00:43:48.820 --> 00:43:49.460
 Ja, gibt's noch.

00:43:49.460 --> 00:43:50.520
 Gibt's tatsächlich noch.

00:43:50.520 --> 00:43:52.540
 Äh, benutzt aber wahrscheinlich kein Mensch mehr.

00:43:52.540 --> 00:44:00.120
 So ein schönes Flowchart als PDF, ähm, das einem helfen soll, was für ein semantisches Element man verwenden möchte.

00:44:00.120 --> 00:44:04.200
 Also ich hab hier irgendwie, wird Alverde als erstes gefragt, is it a major navigation block?

00:44:04.200 --> 00:44:05.440
 Yes.

00:44:06.140 --> 00:44:08.840
 Äh, does it make sense of its own?

00:44:08.840 --> 00:44:10.380
 Und so weiter, und so weiter, und so weiter.

00:44:10.380 --> 00:44:13.800
 Und da kann ich mich so durchhangeln und dann gucken, was will ich denn eigentlich?

00:44:13.800 --> 00:44:28.100
 Und ich gebe ja auch immer mal wieder öfter den Rat, ähm, sich, bevor man irgendwie HTML schreibt, mal die, die MDN-HTML-Liste durchzugucken und da zu gucken, was, was ist das eigentlich, was ich gerade, was ich gerade auszeichnen will.

00:44:28.100 --> 00:44:30.020
 Weil es ist oft gar nicht so einfach.

00:44:30.020 --> 00:44:32.460
 Also dieses Flowchart hilft einem auf jeden Fall.

00:44:32.540 --> 00:44:43.160
 Es geht jetzt nicht in jedes Detail, also zum Beispiel alle inline-semantischen Elemente, sind eigentlich nicht einzeln aufgeführt, aber das ist, das hilft einem mit diesen Sectioning-Elementen, die wir jetzt heute einmal durchgehen.

00:44:43.980 --> 00:44:46.700
 Genau, und damit können wir eigentlich zum ersten Element schon kommen.

00:44:47.260 --> 00:44:52.340
 Gut, und genau, das erste Element ist jetzt tatsächlich alphabetisch mit A, er beginnt Address.

00:44:53.440 --> 00:45:04.200
 Und, ähm, das habe ich tatsächlich auch, also das setze ich auch entsprechend semantisch ein schon, ähm, immer dann, wenn eine Adresse irgendwie oder Kontaktdaten im Allgemeinen irgendwie zum Zugekommen.

00:45:04.200 --> 00:45:11.360
 Also es ist nämlich nicht nur, wie es vermuten lässt, vielleicht nicht nur für Adressen, sondern eben auch für sämtliche Informationen, die zur Kontaktaufnahme dienen.

00:45:11.360 --> 00:45:20.260
 Also Adresse, E-Mail, äh, Telefonen, aber auch Social-Media-Kanäle, ähm, Koordinaten theoretisch, äh, kann ich, kann ich angeben.

00:45:20.260 --> 00:45:26.580
 Alles andere hat darin nichts verloren, aber eben alles, was so in die, in die Richtung Kontaktaufnahme geht, ähm, lässt sich darin verorten.

00:45:26.580 --> 00:45:41.300
 Und ich denke mal, dass Google zum Beispiel halt auch Kontaktinformationen leichter sich da raussaugt, ähm, um sie dann darzustellen, wenn ich nach einer Firma suche, ne, dass das dann angezeigt wird, auf, mit Google Maps und so verknüpft, ähm, wenn ich die da, äh, mit dem Address-Element umgebe.

00:45:42.040 --> 00:45:49.340
 Und, ähm, das Element an sich hat sonst auch keine eigenen Attribute irgendwie, die ich dem geben kann, sondern nur halt die globalen, äh, Attribute.

00:45:49.340 --> 00:46:00.560
 Und als ich da dann auf den Artikel geklickt, habe ich gedacht, ah, über die globalen Attribute, wenn wir mit der HTML-Serie durch sind, könnten wir da noch, äh, mal die ganzen globalen Attribute durchnudeln.

00:46:00.560 --> 00:46:06.280
 Ich glaube, das wäre auch mal interessant zu sehen, was sind denn die Sachen, die ich wirklich auf allen HTML-Elementen benutzen kann.

00:46:06.280 --> 00:46:06.800
 Mhm.

00:46:06.800 --> 00:46:09.080
 Das können wir vielleicht mal noch, äh, so ins Backloggen.

00:46:09.080 --> 00:46:11.160
 Ja, das, äh, das ist eine, das ist eine sehr gute Idee.

00:46:12.040 --> 00:46:14.540
 Das reicht, da können wir wahrscheinlich eine eigene Folge zu machen.

00:46:14.540 --> 00:46:21.880
 Da können wir vielleicht sogar mehrere Folgen draus machen, weil es ist nämlich schon, schon, ja, wobei, wenn man die schnell, wenn man nicht in die Tiefe geht, kriegt man vielleicht eine neue Folge unter.

00:46:21.880 --> 00:46:25.540
 Aber das können wir uns auf jeden Fall schon mal, schon mal merken. Das wäre, glaube ich, ganz interessant.

00:46:25.540 --> 00:46:36.400
 Ähm, genau. Und was ich jetzt auch nicht wusste, das Address-Element bezieht sich immer explizit auf das nächsthöhere Artikel oder Body-Element.

00:46:37.360 --> 00:46:45.020
 Das heißt, ich kann, äh, bei einem Artikel-Element, da kommen wir gleich noch, äh, dazu, ähm, kann ich zum Beispiel zu dem Autor Kontaktinformationen angeben.

00:46:45.020 --> 00:46:56.460
 Das heißt, in das Artikel-Element packe ich ein Address-Element und dann bezieht sich das von der Logik oder Semantik her auf diesen Artikel oder wenn es halt außerhalb irgendwo vorkommt, dann auf das komplette Body-Element.

00:46:56.680 --> 00:46:59.000
 Also, das ist vielleicht auch wichtig, ähm, zu wissen.

00:46:59.000 --> 00:47:03.540
 Und, ähm, das hab ich, das kommt später noch mal, das kommt mir bekannt vor.

00:47:03.540 --> 00:47:10.780
 Ja, ich hab's in den Notizen bei Fliegen auch gesehen, dass das nochmal sich auch bei anderen Elementen wiederholt, was man wo, äh, unterbringen kann.

00:47:10.780 --> 00:47:14.740
 Also, das, äh, sollte am Schluss, glaube ich, deutlich sein, weil wir es immer wieder sagen.

00:47:14.740 --> 00:47:15.740
 Ja.

00:47:16.160 --> 00:47:23.960
 Ähm, und was, was man auch noch bedenken muss, dass die Fault, die Fault, wer Fault, das Default-Styling, ähm, ist kursiv.

00:47:23.960 --> 00:47:29.360
 Also, gleiche wie, wie EM, äh, oder, oder E-Tag wird kursiv dargestellt.

00:47:29.360 --> 00:47:41.240
 Ähm, keine Ahnung, warum man sich da, warum man das gemacht hat so, ähm, ja, hab ich, äh, müssen wir mal weiter, tiefer recherchieren, warum das, äh, so entschieden wurde, das zu machen.

00:47:41.240 --> 00:47:43.500
 Ähm, meistens immer schreibt man's dann.

00:47:43.500 --> 00:47:44.480
 Du hast das entschieden.

00:47:44.480 --> 00:47:45.160
 Warst du das?

00:47:45.160 --> 00:47:47.280
 Ah, das ist einfach entschieden. Ich hab gedacht, das sieht einfach hübsch aus.

00:47:47.280 --> 00:47:48.000
 Sieht hübsch aus, ja.

00:47:48.000 --> 00:47:50.940
 Und, und, äh, meine Katze hat mir zugestimmt.

00:47:50.940 --> 00:47:51.820
 Ah, und dann?

00:47:51.820 --> 00:47:53.020
 Und dann ist es so geworden.

00:47:53.020 --> 00:47:56.820
 Du hast gesagt, mir gefällt's und die Katze hat gesagt, mir auch.

00:47:56.820 --> 00:47:58.940
 Wichtig, genau so ist es gelaufen.

00:47:58.940 --> 00:48:03.060
 Ihr, ihr werdet erstaunt, wie oft Entscheidungsprozesse so aussehen.

00:48:03.060 --> 00:48:05.580
 Gut, dann wird's auch geklärt.

00:48:05.580 --> 00:48:06.440
 Gut.

00:48:06.440 --> 00:48:14.160
 Genau, was darf's nicht enthalten? Also, es darf nicht enthalten, äh, das Age-Group-Element, ähm, die H1 bis H6-Elemente.

00:48:14.160 --> 00:48:18.580
 Header, Footer oder ein weiteres Address-Element. Das darf nicht drin vorkommen.

00:48:18.580 --> 00:48:25.060
 Aber ansonsten kann ich, äh, alles an Auszeichnungen, ähm, oder so Absätze und so weiter kann ich, äh, drin unterbringen.

00:48:25.060 --> 00:48:28.740
 Bin mir nicht sicher, ob Age-Group jetzt nochmal vorkommt übrigens.

00:48:28.740 --> 00:48:32.180
 Äh, ja, nee, haben wir nicht, ähm, aber vielleicht können wir da spontan nachher noch was dazu sagen.

00:48:32.180 --> 00:48:34.280
 Ja, da können wir vielleicht spontan noch was dazu sagen, genau.

00:48:34.280 --> 00:48:35.900
 Ja, das war's zu Address.

00:48:36.600 --> 00:48:39.720
 Es geht weiter alphabetisch.

00:48:39.720 --> 00:48:41.560
 Jetzt kommt nämlich Article.

00:48:41.560 --> 00:48:50.860
 Ähm, und das Article-Element, ähm, ist ein für sich abgeschlossener Sinnabschnitt im Dokument, so hab ich das mal genannt.

00:48:50.860 --> 00:48:55.800
 Ähm, zum Beispiel ein Blog-Artikel, das liegt auf der Hand, ne, Artikel.

00:48:56.220 --> 00:49:03.480
 Ähm, ein Produkt, Produkt in einem Shop oder so ein Card-Element, für auch immer das steht, das steht ja oft für irgendwie ein Artikel oder sowas.

00:49:03.480 --> 00:49:07.720
 Ähm, aber auch zum Beispiel ein Kommentar.

00:49:07.720 --> 00:49:16.180
 Und das hätte ich jetzt zum Beispiel nicht unbedingt als, als Artikel gesehen, aber ja, es macht schon Sinn, wenn man das bedenkt, was, was du als nächstes gleich noch ansprechen wirst.

00:49:16.300 --> 00:49:19.960
 Genau, äh, du liest doch nicht mal die Notizen hier, was soll das denn?

00:49:19.960 --> 00:49:46.060
 Ähm, genau, die, die Empfehlung ist, ähm, dass man das innerhalb, äh, dass man innerhalb Strukturelemente wie zum Beispiel, ähm, Header-Section-Footer unterbringen kann, also sollte man, ähm, muss man nicht, ist es jetzt nicht, ist nicht gefordert, aber das mal, also hab ich tatsächlich, äh, bei, bei einem Projekt auf der Arbeit ganz genau so gemacht, also du hast ein Artikel und hast da drin eigentlich dann tatsächlich genau diese, diese drei Elemente, Header-Section-Footer, also Header mit, mit, mit

00:49:46.060 --> 00:50:10.740
 irgendwelchen, keine Ahnung, also jetzt, ich sag's jetzt mal ganz simpel, äh, Social Network, ich hab's schon öfter mal gesagt, das ist so eine Art Social Network und im Header ist da dann zum Beispiel der Autor, in, in der Section ist der Artikel selbst, also das, das, äh, der Inhalt des Artikels und im Footer sind dann, äh, so was, so Links wie Teilen, ähm, oder so, so zusätzliche Informationen wie, wie viel Kommentare hat das Ding oder sowas.

00:50:10.740 --> 00:50:15.820
 Ähm, und das, ähm, ein Headline-Element würdest du jetzt in den Header reinpacken oder in die,

00:50:15.820 --> 00:50:16.400
 Indie-Section?

00:50:16.400 --> 00:50:40.180
 Ähm, das, ähm, das ist eine gute Frage, ich glaub, das kommt drauf an, wo ich will, dass es dazu gehört, wenn das jetzt ein Headline-Element ist, das, das sich auf das Ganze bezieht, dann würde ich's direkt reinpacken, aber ansonsten eher innen rein, theoretisch, also prinzipiell, ja, ich glaube, vom Gefühl her eher innen rein, außer es gibt einen guten Grund, das nach außen zu packen.

00:50:41.440 --> 00:50:46.800
 Aber, ähm, die Frage war ja, in den Header oder in die, ach so, warte mal, Section?

00:50:47.600 --> 00:51:07.920
 Das kommt ganz drauf an, weil ein Head, das kann ja, das kommt ganz drauf an, was du haben willst, also es kann ja auch durchaus eine Überschrift im Footer geben für irgendwas, was im Footer ist, oder es kann auch eine Überschrift für irgendwas geben, was in, äh, in der Section ist, also in dem Hauptinhaltsbereich oder auch im Header, also es ist, das kann, da kann ich keine, das kommt total auf den Content an, wenn der da reinkommt.

00:51:07.920 --> 00:51:20.060
 Ja gut, wenn's jetzt wirklich ein Artikel wäre, ähm, und du hast das Article-Element und dann hast du da drin Header und Section, da wär für mich halt die Frage, wo packe ich den, den Titel von diesem Artikel jetzt rein, in den Header oder in die Section?

00:51:20.800 --> 00:51:23.420
 Ja, aber, gut, ich weiß jetzt nicht, wie, wie verschiedene.

00:51:23.420 --> 00:51:37.900
 In dem Fall, wenn das, wenn das sehr, sehr, ja, ja, ja, wahrscheinlich würde ich's in den Header packen, aber das kommt auch drauf an, wie, wie, wie die Struktur davon ist, ich würde, ich glaub nicht, dass es da irgendwie so, so einen, so einen goldenen Weg gibt, der für alles irgendwie passt.

00:51:38.900 --> 00:52:00.440
 Ähm, weil wir vorhin schon gesagt haben, was Kind von was sein darf und so, das hast du ja eben auch schon gesagt, oder, äh, welche Kinder rein dürfen, das darf kein Kind von Address sein, ähm, das Artikel-Element, das darf nicht innerhalb eines Address-Elements sein, aber das Address-Element darf innerhalb verwendet werden, für, zum Beispiel für Autoren-Infos, wenn es jetzt ein Blog-Artikel ist.

00:52:00.440 --> 00:52:03.760
 Genau, und dann, das habe ich ja gesagt, dann bezieht sich's auch tatsächlich auf diesen Artikel, ja.

00:52:04.380 --> 00:52:11.980
 Genau, die Frage ist natürlich, die man jetzt natürlich fieserweise stellen könnte, die stelle ich jetzt einfach mal, wer wertet denn diese Beziehungen aus?

00:52:11.980 --> 00:52:24.380
 Weil ich hab tatsächlich auch mal einen Screenreader-Test gemacht vorhin und diese logischen Beziehungen, die können zwar irgendwie von, aber wird das dann wirklich, also, welche Maschine wertet das so feingranular aus und versteht das?

00:52:24.380 --> 00:52:25.860
 Da bin ich mir nicht so richtig sicher.

00:52:25.860 --> 00:52:26.640
 Google.

00:52:26.640 --> 00:52:27.940
 Google.

00:52:27.940 --> 00:52:28.680
 Im Zweifel Google.

00:52:28.680 --> 00:52:29.400
 Google.

00:52:29.400 --> 00:52:33.400
 Und dann noch ein Beispiel.

00:52:34.320 --> 00:52:52.140
 Artikel-Elemente dürfen ineinander verschachtelt werden, es darf ein Artikel vom Artikel geben und das habe ich tatsächlich interessanterweise, ähm, bei uns beim Blog, also bei unserer Podcast-Seite so gemacht, ähm, und zwar, jetzt muss ich gerade überlegen, bevor ich jetzt was falsch ist, oh, ich muss nochmal, ich muss nochmal nachgucken.

00:52:52.140 --> 00:52:59.540
 Ich glaube, die Episode ist ein Artikel, aber die Kommentare dazu sind jeweils eigene Artikel in diesem Artikel, in einer eigenen Section nochmal, oder?

00:52:59.620 --> 00:53:11.320
 Ich glaube, ich glaube, oh, ich bin mir nicht sicher, ob das stimmt, nee, das habe ich tatsächlich nie, nee, es stimmt gar nicht, es stimmt gar nicht, es sind gar keine verschachtelten Artikel-Elemente, es sind nur die Kommentare sind Artikel-Elemente.

00:53:12.380 --> 00:53:14.840
 Die Episode ist gar kein Artikel, oder doch?

00:53:14.840 --> 00:53:18.600
 Warte, jetzt muss ich nochmal kurz nachgucken.

00:53:18.600 --> 00:53:22.380
 Gut, so eine Episode macht eigentlich schon Sinn, die als Artikel.

00:53:22.380 --> 00:53:23.920
 Nee, aber die sind tatsächlich nicht verschachtelt.

00:53:23.920 --> 00:53:24.640
 Okay.

00:53:24.640 --> 00:53:27.240
 Die Episode ist ein Artikel und die Kommentare sind auch einzelne Artikel.

00:53:27.240 --> 00:53:30.880
 Nee, dann ist es ein anderes Projekt, was ich hatte, wo ich das tatsächlich verschachtelt habe.

00:53:30.960 --> 00:53:36.780
 Ich erinnere mich, aber dass ich das auf jeden Fall mal so gemacht habe, weil ich das auch vorher in der MDN so gelesen habe.

00:53:36.780 --> 00:53:39.480
 Da dachte ich mir, ah, das ergibt irgendwie logisch total Sinn.

00:53:39.480 --> 00:53:48.580
 Also, was das zum Beispiel bedeutet, wäre halt, ihr habt gerade schon gesagt, ein Blogartikel, der aber Kommentare hat, also der Blogartikel liegt drumherum, wie du es gerade schon gesagt hast,

00:53:48.580 --> 00:53:55.640
 und innerhalb sind die Kommentare, die sind zugehörig, aber die sind nochmal einzelne Artikel und da ergibt es dann logisch total Sinn, das ineinander zu verschachteln.

00:53:56.700 --> 00:53:59.300
 Und wir dürfen nicht mehr gleichzeitig in Trello klicken, sonst wird es wieder...

00:53:59.300 --> 00:54:00.040
 Ich habe nichts geklickt.

00:54:00.040 --> 00:54:04.640
 Achso, dann weiß ich, dann hat Trello mir gerade einen Strich durch die Rechnung gemacht.

00:54:04.640 --> 00:54:17.320
 So ein bisschen gehe ich auch immer darauf ein, was für Roles das hat, so ARIA-Roles, falls man das irgendwie jetzt nachbilden wollte, was man natürlich nicht sollte,

00:54:17.320 --> 00:54:18.480
 das habe ich vorhin schon gesagt.

00:54:18.480 --> 00:54:26.320
 Also, wenn man irgendwie ein sematisches Art im L-Element verwenden kann, sollte man das tun und nicht irgendwas, irgendein Element mit Roll,

00:54:26.700 --> 00:54:31.580
 ausstatten, aber die Rolle von Artikel ist, oh Wunder, Artikel.

00:54:31.580 --> 00:54:38.020
 Dazu gibt es auch nochmal einen eigenen Artikel in der MDN zu diesen ganzen ARIA-Roles, wo noch immer interessante semantische Infos dazustehen.

00:54:38.020 --> 00:54:40.040
 Aber damit sind wir fertig mit Artikel.

00:54:40.660 --> 00:54:42.920
 Ja, das nächste geht eigentlich, glaube ich, auch ganz schnell.

00:54:42.920 --> 00:54:44.400
 Aside ist das nächste.

00:54:44.400 --> 00:54:50.420
 Und das ist für nebensächtliche Inhalte, also Randnotizen, deswegen Aside.

00:54:50.420 --> 00:54:56.520
 Das ist in dem MDN-Artikel, ja, da steht nicht wirklich viel mehr dazu.

00:54:56.520 --> 00:55:04.800
 Das sind so Beispiele, irgendwie ein Artikel über irgendeine Echsenart und dann so ein Einwurf, so, ja, manche Echsen leben so und so.

00:55:04.800 --> 00:55:13.180
 Also, es ist was, was sich schon auf den Content bezieht, aber der Content wäre auch ohne diesen Inhalt verständlich.

00:55:13.180 --> 00:55:15.200
 Also, es ist eher so ein Einwurf.

00:55:17.300 --> 00:55:29.720
 Und es darf nicht, habe ich, glaube ich, vorhin schon gesagt, in Address-Elementen platziert werden, aber ansonsten ist das, also das Aside ist so ein bisschen das, was ich so von den ganzen Sectioning-Elementen so am meisten wishy-washy finde.

00:55:29.720 --> 00:55:36.640
 Weil es so, man sieht das auch nicht so häufig, manchmal wird es verwendet, um eine Sidebar irgendwie einzubauen.

00:55:36.740 --> 00:55:41.500
 Wobei ich sagen würde, das ist eigentlich eher schon dann wieder, je nachdem, was da drin ist, eher ein Nav-Element.

00:55:41.500 --> 00:55:56.100
 Und oft dann halt auch nicht wirklich zu dem Content gehören, sondern irgendwie, hier sind übrigens alle Links von diesem Blog, ja, die aber nicht zu dem Seiten-Content direkt gehören.

00:55:56.100 --> 00:56:09.920
 Also, nicht mal indirekt irgendwie eine Randnotiz zu dem Content sind, sondern eigentlich was Eigenes und dann eigentlich in dem Side auch nichts zu suchen hätten, so wie ich das verstanden habe.

00:56:09.920 --> 00:56:16.760
 Ich glaube, das war damals einfach so, als HTML5 definiert wurde, war eine Sidebar noch so ein Element, was man irgendwie immer hatte.

00:56:16.760 --> 00:56:26.840
 Das ist ja mittlerweile total aus der Mode gekommen, mehr spaltige Layouts. Oft hast du jetzt oft einspaltige Layouts. Oder einzelne Cards nebeneinander, dann beliebig viele.

00:56:26.840 --> 00:56:35.160
 Aber so eine Sidebar, sodass man tatsächlich so ein typisches zwei- oder dreispaltiges Layout hat, das ist gar nicht mehr so ein Ding auf vielen Seiten.

00:56:35.160 --> 00:56:41.720
 Das ist alles eher so auf große Sections und alles spannt sich irgendwie auf und so.

00:56:42.040 --> 00:56:49.720
 Genau. Aber ich glaube, das war so das Element, was man für die Sidebar vorgesehen hat. Aus dieser Zeit stammt das, als man das noch hatte.

00:56:49.720 --> 00:56:56.880
 Ja, und jetzt muss man natürlich, wie Konstantin gerade schon gesagt hat, sich dann überlegen, ist das dann irgendwie sinnvoll?

00:56:56.880 --> 00:57:01.500
 Ist es vielleicht aber eigentlich eher eine Navigation? Wobei du eine Navv natürlich in Side reinpacken könntest.

00:57:01.500 --> 00:57:06.280
 Klar. Ich würde aber eher fast sagen, so was in der Sidebar wäre dann eigentlich eine eigene Section.

00:57:08.240 --> 00:57:17.420
 Ja, und Section hat aber halt relativ wenig semantischen Inhalt ab. Also das ist ja eigentlich auch nicht so richtig.

00:57:17.420 --> 00:57:24.560
 Gut, man könnte auch die Nav dann in eine Section packen. Also es ist so, es gibt kein 100 Prozent, so ist richtig und wenn du abweichst, ist es falsch.

00:57:24.560 --> 00:57:31.700
 Also das ist so ein bisschen eine Richtlinie. Aber ja, man kann es vielleicht auf verschiedene Arten und Weisen umsetzen.

00:57:31.800 --> 00:57:34.220
 Und es ist deswegen das eine nicht unbedingt richtiger als das andere.

00:57:34.220 --> 00:57:35.440
 Ja.

00:57:35.440 --> 00:57:38.500
 Genau. Das war es eigentlich auch schon zu der Side.

00:57:38.500 --> 00:57:40.340
 Dann weg damit.

00:57:40.340 --> 00:57:40.840
 Ja.

00:57:40.840 --> 00:57:41.720
 Weg der Mensch.

00:57:41.720 --> 00:57:50.940
 Doch, also hier an der Stelle nochmal. Schreibt mal in die Kommentare eure geilen Anwendungsfälle für a Side. Ich bin ja immer total gespannt.

00:57:50.940 --> 00:57:56.780
 Und wenn ihr es schafft, CSS-Columns mit a Side zu kombinieren, dann gibt es irgendwie, schicken wir euch ein Bierpaket.

00:57:57.720 --> 00:57:59.880
 Nein, ich nicht. Das schickst du.

00:57:59.880 --> 00:58:00.300
 Okay.

00:58:00.300 --> 00:58:09.660
 Mir müssen die Leute eigentlich immer nur erklären, warum die sinnvollen Anwendungsfälle, das ist nämlich das Komplizierte. Irgendwie was zu kombinieren, ist ja kein Problem.

00:58:09.660 --> 00:58:13.280
 Ja, das war ja damit gemeint. Also ein Beispiel, wo das wirklich ...

00:58:13.280 --> 00:58:17.500
 Mir erklären in einer Antwort, die ich akzeptiere. Das ist die Herausforderung.

00:58:17.500 --> 00:58:19.720
 Oh, okay. Also ich sehe schon, ich werde kein Bier los.

00:58:22.000 --> 00:58:25.680
 Nee, du darfst dein Bier ja auch so verschenken, wie du willst. Aber mein Bier ist ein bisschen teurer.

00:58:25.680 --> 00:58:28.500
 Nee, nee, aber mein Anspruch war ja, dass das deine Ansprüche erfüllt.

00:58:28.500 --> 00:58:29.060
 Ach so.

00:58:29.060 --> 00:58:30.720
 Und dann gibt es ein Bierpaket.

00:58:30.720 --> 00:58:35.320
 Das gefällt mir. Das ist eine super Meta-Ebene. Ich bin glücklich, wenn du glücklich bist.

00:58:35.320 --> 00:58:35.640
 Oh.

00:58:36.460 --> 00:58:51.040
 Okay, dann kommen wir jetzt von den ganzen A's, kommen wir jetzt zum F. Das ist logischerweise der nächste Buchstabe. Jetzt kommen wir nämlich zum Footer. Interessanterweise kommt der halt vor dem Header.

00:58:51.580 --> 00:58:54.920
 Ja, halt im Alphabet. Ich glaube, daran liegt es an der Stelle. Aber es ist egal.

00:58:54.920 --> 00:58:56.820
 Machen wir jetzt den Footer.

00:58:56.820 --> 00:59:02.520
 Und der Footer, das haben wir ja vorhin schon erwähnt, also so mit Header-Section-Footer.

00:59:02.520 --> 00:59:09.560
 Der Footer ist ein Fußbereich und für das nächsthöhere Sectioning-Element oder Sectioning-Root.

00:59:10.800 --> 00:59:29.240
 Also zum Beispiel für Artikel oder Section oder sowas, ja. Aber auch für Body. Also wenn das jetzt kein, wenn kein weiteres Sectioning-Element von denen, die wir jetzt heute hier erklären, außer das darf nicht da drin sein, das hatten wir jetzt heute auch schon, dann gilt das für den Root.

00:59:29.240 --> 00:59:32.080
 Dann gilt das quasi für Body, wenn du so willst.

00:59:34.320 --> 00:59:45.580
 Genau. Darf nicht in Address, Header oder Footer vorkommen. Also ein Footer darf nicht in sich selbst sein, darf nicht im Header sein und nicht in Address. Aber sonst eigentlich überall.

00:59:45.580 --> 00:59:57.060
 Und es sollte, wenn man jetzt kein Sectioning-Element drumherum hat, also auf Top-Level-Ebene ist, sollte es nur ein Footer geben.

00:59:57.060 --> 00:59:59.300
 Macht auch Sinn, ja.

00:59:59.480 --> 01:00:09.400
 Und wenn man die Regel beachtet, dann reizt das einen auch an, dann Artikel-Elemente zu verwenden, wo es sinnvoll ist, oder zumindest Sections zu verwenden, wo es sinnvoll ist.

01:00:09.400 --> 01:00:19.220
 Wenn ich also merke, ich bräuchte da jetzt mehrere Footer, dann sollte ich auch am besten irgendwie das, was ein Footer haben soll, eben nochmal in eigenen Content packen.

01:00:19.220 --> 01:00:24.380
 Ganz genau. Also finde ich, ergibt semantisch total Sinn.

01:00:24.980 --> 01:00:31.000
 Dann haben wir, implizit hat der Footer nicht die Role Footer, wie man annehmen könnte, sondern Content-Info.

01:00:31.000 --> 01:00:31.220
 Ah.

01:00:31.220 --> 01:00:40.660
 Aber nur, falls er kein Kind von anderen Sectioning-Elementen ist, also nur der Top-Level-Footer hat das.

01:00:40.660 --> 01:00:43.760
 Das fand ich eine ganz interessante Sache, das wusste ich tatsächlich nicht.

01:00:45.940 --> 01:00:57.180
 Und Content-Info, das habe ich nämlich nochmal nachgeguckt, die Role, das ist eine Semantik, sowas wie Copyright-Navigations-Links, weil du oft auch so große Footer hast, oder Privacy-Statements.

01:00:57.180 --> 01:01:06.600
 Das ist jetzt natürlich keine Liste, das muss nicht nur das sein, aber das sind so Dinge, die da typischerweise mit ausgezeichnet werden.

01:01:06.680 --> 01:01:14.240
 Also wie gesagt, wie der ARIA Role könnte, also nee, Role könnte man theoretisch vergeben, aber man sollte das Footer-Element einfach verwenden.

01:01:14.240 --> 01:01:18.200
 Es gibt keinen Grund, der dagegen spricht, das Footer-Element zu verwenden.

01:01:18.200 --> 01:01:26.420
 Also das sage ich jetzt nur so, weil das quasi, also diese ganzen Elemente, die wir heute jetzt hier präsentieren, die haben alle implizite Roles.

01:01:27.420 --> 01:01:40.140
 Und auf den Seiten der Roles in der MDN findet man dann nochmal Infos dazu, aber die gelten natürlich auch für das Element selbst, auch wenn man nicht das Role-Attribut verwendet, weil die sind einfach da mit drin, kriegst du einfach Geschenk quasi.

01:01:40.140 --> 01:01:42.760
 Jo, das war Footer.

01:01:42.760 --> 01:01:45.160
 Jetzt geht's ja doch ganz schnell, ne?

01:01:45.160 --> 01:01:47.220
 Zack, zack, zack.

01:01:47.220 --> 01:01:52.820
 Da kommen bestimmt ganz viele Kommentare, was wir alles vergessen haben, aber be our guest.

01:01:52.820 --> 01:01:58.200
 Einfach alles reinschreiben und uns gerne korrigieren.

01:01:58.200 --> 01:01:59.740
 Genau, jetzt kommen wir zum Header.

01:01:59.740 --> 01:02:01.560
 Ja, was kann im Header drin sein?

01:02:01.560 --> 01:02:08.060
 Header kann das Seitenlogo sein, Seitenname, den Suchschlitz packe ich da vielleicht rein und die Hauptnavigation.

01:02:08.060 --> 01:02:13.000
 Also alles, was eben halt wirklich den Kopf der Seite bildet.

01:02:14.320 --> 01:02:24.940
 Standardmäßig, und das wusste ich jetzt genauso wie das Content-Info auch nicht vorher, die Aria, das Role-Attribut ist Banner und das gibt eben genau das an.

01:02:24.940 --> 01:02:36.240
 Also irgendwas, was oben prangt, wie so ein Banner und eben so die Seite einleitet und so wie so ein Briefkopf im Endeffekt auch, ne?

01:02:36.240 --> 01:02:38.660
 Kopf, Header, kann man sich vorstellen.

01:02:39.680 --> 01:02:50.740
 Genau, aber das auch nur, wenn's, und das ist jetzt ähnlich wie beim Footer mit dem Content-Info, das auch nur, wenn's in dem Root-Sectioning-Element ist, also sprich in Button, äh, Button, in Buddy.

01:02:51.940 --> 01:03:02.920
 Und ich muss an der Stelle kurz einhaken, weil's vielleicht ein bisschen missverständlich sein könnte, da darf durchaus schon noch was drumherum sein, ähm, dass es immer noch quasi direkt zum Root gehört.

01:03:03.260 --> 01:03:05.380
 Genau, aber halt kein, aber kein Sectioning-Element.

01:03:05.380 --> 01:03:07.520
 Genau, das wäre der nächste Satz gewesen.

01:03:07.520 --> 01:03:15.840
 Also in einem anderen Content-Sectioning-Element, äh, da wird's dann zu Role-Generic und das heißt halt einfach nur, joa, generisch.

01:03:15.840 --> 01:03:24.320
 Also eigentlich im Endeffekt dann wieder aufgehoben, diese besondere Rolle, ähm, aber aufgrund des Elements an sich kann man da halt noch eine semantische Bedeutung ablesen.

01:03:24.840 --> 01:03:31.460
 Genau, und dann bezieht sich das dann explizit auf diese umgebende, äh, Content-Section und da kann man dann zum Beispiel eben die Headline reinpacken.

01:03:31.460 --> 01:03:39.660
 Deswegen kam ich auch vorhin auf die Frage, äh, bei dem Artikel, würde ich die Headline dann da reinpacken in den Header oder würde's, würde's eher in den Content, äh, kommen.

01:03:39.660 --> 01:03:43.360
 Aber, ja, müssen wir jetzt auch nicht abschließend, äh, klären.

01:03:43.360 --> 01:03:48.580
 An der Stelle würde ich tatsächlich, wenn man's, wenn man's, wenn man's darauf, wenn man's darauf bezieht, würde ich's eher zum Content packen.

01:03:50.400 --> 01:03:56.240
 Weil, das, der Haupt, der Hauptinhalt ist ja das, was die Überschrift beschreiben sollte, hoffentlich.

01:03:56.240 --> 01:04:03.160
 Und im, äh, im Header ist ja dann eher irgendwie sowas wie eine Navigation oder sowas drin, was mit dem Hauptinhalt ja eigentlich gar nichts zu tun hat.

01:04:03.160 --> 01:04:12.500
 Und bei den Überschriften gleich, da kommen wir noch drauf, ähm, die H1 sollte eigentlich den Hauptinhalt beschreiben und nicht irgendwie was anderes.

01:04:12.500 --> 01:04:13.000
 Ja.

01:04:13.000 --> 01:04:15.400
 Aber, ja, mach, mach mal weiter.

01:04:15.400 --> 01:04:23.760
 Genau, ähm, jetzt noch so ein kleiner, so ein kleiner Funfact und, ja, es hat letztes Mal jemand geschrieben, äh, weiß nicht, ob's auch ein Kommentar war oder auf Twitter oder, oder Mastodon.

01:04:23.760 --> 01:04:27.860
 Ja, es war ein bisschen viel, ähm, Gerede über die schlechte Alte Zeit.

01:04:27.860 --> 01:04:31.900
 Ja, mal wieder so, was, ne, was man auf dem Body-Element für, für Attribute hat und so.

01:04:31.900 --> 01:04:37.020
 Ähm, aber das fand ich einfach irgendwie ganz, ganz nett, weil es auch in dem MDN-Artikel direkt, äh, verlinkt war und, und beschrieben war.

01:04:37.740 --> 01:04:47.220
 Das, äh, Header-Element, das war ursprünglich vorgesehen für Überschriften, ähm, bis die dann abgelöst wurden durch explizit H1 bis H6 zum Verschachteln.

01:04:47.720 --> 01:05:11.280
 Und in der allerersten Webseite, also die, die das www initiiert hat, und das, äh, verlinke ich natürlich auch in den Shownotes, ähm, wenn man sich da den Quelltext anguckt, und natürlich auch, ne, wie man das damals gemacht hat, alle HTML-Buchstaben in, in, in, in, in Großbuchstaben geschrieben, ähm, und da ist tatsächlich ganz oben, noch vor dem Body sogar, ähm, ist ein Header-Element als erstes Element in der Seite.

01:05:11.280 --> 01:05:41.260
 Und da drin ist dann das Title-Tag. Also, da war der Aufbau von HTML-Dokumenten noch, äh, ganz schön anders. Aber es gab auch schon ein, ein, äh, eine, äh, Definition-List, also, DD, DT, DD, das gab's auch schon, also, da merkt man auch, dass das so ein bisschen aus dem wissenschaftlichen, genau, aus dem wissenschaftlichen Kontext eben kommt, ne, wir haben hier, äh, wir definieren irgendwelche Dinge und dann weiterführende Links und so, ähm, ja, war, war ganz interessant und, ähm, und dann war das Header-Element eben wieder frei, weil man sich dazu entschieden hat, das anders zu machen, und jetzt benutzen wir es so, wie wir es

01:05:41.260 --> 01:05:42.760
 heute, wie wir es heute hoffentlich benutzen.

01:05:42.760 --> 01:05:49.060
 Ich finde ja, Verweise auf die allererste Webseite, äh, die es jemals gab, äh, die sind immer erlaubt.

01:05:49.060 --> 01:05:50.140
 Das ist gut zu wissen.

01:05:50.140 --> 01:05:53.300
 Äh, die gibt's ja noch, ne, die ist ja noch online.

01:05:53.300 --> 01:05:53.900
 Ja, genau.

01:05:53.900 --> 01:05:56.480
 Auf www.zern.ch

01:05:56.480 --> 01:06:00.660
 slash hypertext slash www slash theproject.html

01:06:00.660 --> 01:06:02.220
 Daran kann man so viel lernen.

01:06:02.220 --> 01:06:04.600
 An dieser ersten Webseite kann man so viel lernen.

01:06:04.600 --> 01:06:07.120
 Ähm, aber warte mal einen Moment, hat die...

01:06:07.120 --> 01:06:09.120
 Ah, okay, das ist echt verrückt.

01:06:09.120 --> 01:06:10.880
 Das ist mit diesem komischen Header-Element.

01:06:11.240 --> 01:06:12.700
 Egal, ähm, äh,

01:06:12.700 --> 01:06:15.720
 ich finde, an der kann man so viel lernen,

01:06:15.720 --> 01:06:16.580
 weil die ist...

01:06:16.580 --> 01:06:18.600
 Ja, da gibt's noch ein Next-ID, seh ich jetzt gerade.

01:06:18.600 --> 01:06:21.900
 Weil die nämlich accessible ist, die ist accessible und responsive.

01:06:21.900 --> 01:06:23.440
 Äh,

01:06:23.440 --> 01:06:25.200
 als man noch nicht

01:06:25.200 --> 01:06:27.100
 darüber nachgedacht hat, hat, aber das

01:06:27.100 --> 01:06:28.740
 sagt was aus. Ja.

01:06:28.740 --> 01:06:30.780
 Aus meiner Sicht, äh,

01:06:30.780 --> 01:06:32.100
 find ich, also ja, genau.

01:06:32.100 --> 01:06:34.040
 So.

01:06:34.680 --> 01:06:36.240
 Ich, ich, ich, ich, jetzt muss hier gerade noch eine kurze

01:06:36.240 --> 01:06:38.080
 Exkursion machen, äh, Exkursion machen, weil ich gerade im

01:06:38.080 --> 01:06:41.180
 Quell-Text, äh, dieses Next-ID-HTML-Element, äh, gefunden

01:06:41.180 --> 01:06:42.840
 habe. Und da gibt es hier auf

01:06:42.840 --> 01:06:47.720
 HTML-CSS.Fandom.com, es gibt so ein eigenes Fan-Wiki für

01:06:47.720 --> 01:06:53.420
 HTML-CSS. Äh, da gibt's hier, das Next-ID, the void HTML Next-ID-Element

01:06:53.420 --> 01:06:57.400
 was meant to give a hint for the Name-Value to use when creating a new

01:06:57.400 --> 01:06:58.640
 Hyper-Link-Element

01:06:58.640 --> 01:07:03.220
 instance. While editing an HTML-Document, it should be distinct from all

01:07:03.220 --> 01:07:05.240
 Name-Attribute-Values on other

01:07:05.240 --> 01:07:07.360
 Elements. Also, da

01:07:07.360 --> 01:07:08.620
 konnte man irgendwie dann,

01:07:08.620 --> 01:07:11.060
 ja, verstehe ich jetzt nicht so ganz, aber

01:07:11.060 --> 01:07:13.220
 HTML2

01:07:13.220 --> 01:07:14.360
 und, äh.

01:07:14.360 --> 01:07:17.240
 Die Links haben da Name-Attribute, zum Beispiel der erste Link auf der

01:07:17.240 --> 01:07:18.860
 Seite hat Name 0

01:07:18.860 --> 01:07:21.280
 und dann kommt Name. Achso, und das, und was

01:07:21.280 --> 01:07:23.540
 das nächste Element in der Reihenfolge quasi

01:07:23.540 --> 01:07:25.420
 wäre, das ist dann das

01:07:25.420 --> 01:07:29.580
 A-Element, das auch diesen Name hat. Ah ja, okay. Das heißt, es wäre in dem Fall die

01:07:29.580 --> 01:07:33.840
 55 und das ist welches Element? Das gibt's gar nicht auf der Seite, das ist auch

01:07:33.840 --> 01:07:42.280
 interessant. Ah, warte mal. Sicher? Ja. Also, die 55 kommt nur einmal vor. Naja.

01:07:42.280 --> 01:07:47.460
 Ein Mysterium. Können wir Tim Berners-Lee mal fragen.

01:07:47.460 --> 01:07:51.160
 Ach, auch interessant, dass diese 20, also das wirklich Next-ID,

01:07:51.280 --> 01:07:52.480
 und dann ist einfach eine Zahl

01:07:52.480 --> 01:07:54.780
 als Attribut. Aber in dem

01:07:54.780 --> 01:07:57.020
 ursprünglichen, in der ersten Seite ist es

01:07:57.020 --> 01:07:59.580
 Next-ID N ist gleich, also wie ein normales

01:07:59.580 --> 01:08:00.880
 Attribut und dann die 55.

01:08:00.880 --> 01:08:03.460
 Also, das macht irgendwie...

01:08:03.460 --> 01:08:04.880
 Ja, muss man halt...

01:08:04.880 --> 01:08:07.200
 Aber gut, so ist das halt, war das am Anfang, dass dann

01:08:07.200 --> 01:08:08.320
 ja

01:08:08.320 --> 01:08:11.240
 noch mal einiges verändert.

01:08:11.240 --> 01:08:13.080
 Okay, gut, das nur am Rande.

01:08:13.080 --> 01:08:14.720
 Jetzt noch mal kurz zu, wo darf das überall

01:08:14.720 --> 01:08:17.280
 stattfinden, dieses Element? Also, es

01:08:17.280 --> 01:08:19.260
 darf nicht noch mal in einem Header oder Footer

01:08:19.260 --> 01:08:21.160
 Element verschachtelt sein, wie beim Footer auch.

01:08:21.160 --> 01:08:24.800
 Und es darf selbst nicht innerhalb von einem Footer

01:08:24.800 --> 01:08:26.620
 oder Address-Element drin vorkommen.

01:08:26.620 --> 01:08:30.940
 Und das war's zu Header.

01:08:30.940 --> 01:08:34.180
 Dann kommen jetzt, und die haben so ein bisschen

01:08:34.180 --> 01:08:37.600
 eine Ausnahmerolle in dieser Reihe,

01:08:37.600 --> 01:08:40.080
 weil ich hätte die jetzt eigentlich woanders

01:08:40.080 --> 01:08:42.780
 einsortiert, aber finde ich interessant, dass sie da drin sind.

01:08:43.260 --> 01:08:45.000
 die Elemente H1 bis H6,

01:08:45.000 --> 01:08:47.100
 also H1, 2, 3, 4, 5 und 6

01:08:47.100 --> 01:08:48.800
 sind die

01:08:48.800 --> 01:08:51.040
 Überschriften-Elemente, mit denen man Seiten

01:08:51.040 --> 01:08:53.280
 strukturieren kann.

01:08:53.280 --> 01:08:55.000
 Man kann sich das

01:08:55.000 --> 01:08:56.420
 so vorstellen,

01:08:56.420 --> 01:08:59.640
 mit den Überschriften-Elementen

01:08:59.640 --> 01:09:00.720
 baut man quasi so einen

01:09:00.720 --> 01:09:02.460
 Hierarchie-Baum auf,

01:09:02.460 --> 01:09:04.880
 wie man das vielleicht aus gut

01:09:04.880 --> 01:09:06.800
 strukturierten PDFs

01:09:06.800 --> 01:09:08.960
 kennt, so in der Seitenleiste.

01:09:08.960 --> 01:09:10.380
 Da hat man manchmal dann so irgendwie

01:09:10.380 --> 01:09:11.380
 so Sprung,

01:09:11.380 --> 01:09:13.460
 so eine, ja, wie so ein Baum,

01:09:13.460 --> 01:09:14.840
 der da aufgeht und so,

01:09:14.840 --> 01:09:17.180
 wo man so den einzelnen Unterabschnitten

01:09:17.180 --> 01:09:18.780
 springen kann von einem längeren PDF.

01:09:18.780 --> 01:09:20.740
 Und im Prinzip ist das bei HTML

01:09:20.740 --> 01:09:22.140
 ganz genau dasselbe.

01:09:22.140 --> 01:09:25.060
 Und ich glaube, dass sie deswegen auch

01:09:25.060 --> 01:09:27.720
 eben in diesem Content-Sectioning-Dings

01:09:27.720 --> 01:09:28.300
 auftauchen,

01:09:28.300 --> 01:09:29.840
 weil sie halt eben wirklich die

01:09:29.840 --> 01:09:32.060
 Dokumentstruktur vorgeben

01:09:32.060 --> 01:09:34.660
 und sich eben Screenreader und sowas,

01:09:34.660 --> 01:09:35.460
 da gibt's ja auch diese,

01:09:35.460 --> 01:09:37.800
 ich weiß gar nicht, wie die genannt werden,

01:09:37.800 --> 01:09:40.540
 aber es gibt ja so bestimmte

01:09:40.540 --> 01:09:41.640
 Kernbereiche,

01:09:41.640 --> 01:09:43.220
 die man mit dem Screenreader

01:09:43.220 --> 01:09:44.060
 anspringen kann.

01:09:44.060 --> 01:09:46.260
 Und die orientieren sich eben halt

01:09:46.260 --> 01:09:48.080
 unter anderem auch an den Headlines.

01:09:48.080 --> 01:09:50.100
 Und deswegen kommt das hier dringend vor.

01:09:50.100 --> 01:09:51.920
 Dass man mit Screenreadern von,

01:09:51.920 --> 01:09:54.100
 also durch bestimmte

01:09:54.100 --> 01:09:56.320
 Heading-Strukturen

01:09:56.320 --> 01:09:57.700
 direkt navigieren kann.

01:09:57.700 --> 01:09:58.900
 Also dass man jetzt sagt,

01:09:58.900 --> 01:09:59.940
 ja, springen wir jetzt mal

01:09:59.940 --> 01:10:02.800
 zur nächsten H2 oder sowas.

01:10:03.500 --> 01:10:05.000
 Das ist so ein übliches

01:10:05.000 --> 01:10:07.080
 Navigationsinstrument.

01:10:07.080 --> 01:10:10.820
 H1 bis H6 dürfen nur ...

01:10:10.820 --> 01:10:13.540
 Ganz kurz, Landmark war dieser Begriff,

01:10:13.540 --> 01:10:14.940
 der mir nicht eingefallen ist.

01:10:14.940 --> 01:10:17.580
 Landmarks nennen so Screenreader das,

01:10:17.580 --> 01:10:19.720
 diese Punkte, die sie anspringen können.

01:10:19.720 --> 01:10:20.560
 Ja, genau.

01:10:20.560 --> 01:10:22.740
 Ja, da zählt es eben halt auch mit rein.

01:10:22.740 --> 01:10:24.060
 Genau.

01:10:24.060 --> 01:10:26.700
 Die dürfen nur Phrasing-Content enthalten

01:10:26.700 --> 01:10:27.740
 nach H1 bis H6.

01:10:27.880 --> 01:10:29.260
 Was zum Beispiel, also was heißt,

01:10:29.260 --> 01:10:31.240
 dass zum Beispiel jetzt eine Section

01:10:31.240 --> 01:10:33.340
 oder sowas da

01:10:33.340 --> 01:10:36.900
 eigentlich nicht drin vorkommen sollte.

01:10:36.900 --> 01:10:38.540
 Aber sowas wie Span, Strong,

01:10:38.540 --> 01:10:40.420
 also alle möglichen Inline-Elemente.

01:10:40.420 --> 01:10:42.020
 Früher gab es Block-Elemente

01:10:42.020 --> 01:10:42.820
 und Inline-Elemente.

01:10:42.820 --> 01:10:44.920
 Das ist ein bisschen anders geworden mittlerweile.

01:10:44.920 --> 01:10:46.420
 Jetzt gibt es einen Inline-Block.

01:10:46.420 --> 01:10:48.240
 Aber auch schon seit ...

01:10:48.240 --> 01:10:48.980
 Das ist aber CSS.

01:10:48.980 --> 01:10:50.180
 Ach so, ja.

01:10:50.180 --> 01:10:51.240
 Ach so, ja, stimmt.

01:10:51.240 --> 01:10:52.880
 Das ist nochmal, glaube ich,

01:10:52.880 --> 01:10:53.520
 ein bisschen was ...

01:10:53.520 --> 01:10:56.200
 Also ja, das hängt schon irgendwie am Style,

01:10:56.340 --> 01:10:57.760
 aber ich glaube, das ist nochmal was anderes,

01:10:57.760 --> 01:10:59.660
 weil bei HTML bestimmte Elemente

01:10:59.660 --> 01:11:00.820
 in einer bestimmten Kategorie sind,

01:11:00.820 --> 01:11:01.840
 egal wie du sie stylst.

01:11:01.840 --> 01:11:04.340
 Genau.

01:11:04.340 --> 01:11:07.140
 So, und wie wir vorhin schon angesprochen haben,

01:11:07.140 --> 01:11:10.800
 es sollte pro Seite möglichst nur eine H1 geben

01:11:10.800 --> 01:11:14.960
 und die sollte den Seiteninhalt beschreiben

01:11:14.960 --> 01:11:16.340
 oder den Haupt-Content.

01:11:16.340 --> 01:11:17.120
 Die sollte quasi ...

01:11:17.120 --> 01:11:19.140
 Also man sollte sich eine Seite versuchen ...

01:11:19.140 --> 01:11:20.080
 Also es geht nicht immer,

01:11:20.080 --> 01:11:21.620
 weil wenn du jetzt eine App hast,

01:11:21.620 --> 01:11:24.700
 also wirklich so was wirklich App-artiges,

01:11:24.880 --> 01:11:27.020
 wo du irgendwie Bilder bearbeitest oder so,

01:11:27.020 --> 01:11:28.320
 dann wird es schon ein bisschen schwierig.

01:11:28.320 --> 01:11:32.200
 Aber die H1 sollte möglichst den Seiteninhalt beschreiben,

01:11:32.200 --> 01:11:33.500
 wie so in so einem Word-Dokument.

01:11:33.500 --> 01:11:36.320
 Ja, also was wäre die erste Überschrift,

01:11:36.320 --> 01:11:38.240
 die du im Word-Dokument ganz oben hinschreibst?

01:11:38.240 --> 01:11:39.440
 Das ist quasi deine H1.

01:11:39.440 --> 01:11:40.780
 Das soll nicht,

01:11:40.780 --> 01:11:42.940
 was früher oft ganz gern gemacht wurde,

01:11:42.940 --> 01:11:44.900
 das Logo von der Seite sein oder so,

01:11:44.900 --> 01:11:46.980
 weil dann wäre nämlich die H1 für jede Seite,

01:11:46.980 --> 01:11:49.720
 wo auf deiner ganzen Website gleich,

01:11:50.280 --> 01:11:52.180
 was dir natürlich überhaupt nichts bringt.

01:11:52.180 --> 01:11:53.220
 Jetzt kann man natürlich sagen,

01:11:53.220 --> 01:11:54.200
 ja, Title auch wichtig.

01:11:54.200 --> 01:11:55.920
 Ja, aber wenn man sich halt es versucht,

01:11:55.920 --> 01:11:57.200
 als Dokument vorzustellen,

01:11:57.200 --> 01:11:59.420
 und das ist das, wo halt HTML herkommt,

01:11:59.420 --> 01:12:00.460
 das sind halt Dokumente,

01:12:00.460 --> 01:12:02.260
 die ausgezeichnet werden,

01:12:02.260 --> 01:12:04.660
 da ist es nicht unbedingt sinnvoll,

01:12:04.660 --> 01:12:07.100
 mehr als eine Überschrift der ersten Ebene zu haben,

01:12:07.100 --> 01:12:08.280
 weil das nämlich die Überschrift ist,

01:12:08.280 --> 01:12:10.600
 die den ganzen Inhalt beschreibt.

01:12:13.260 --> 01:12:14.760
 Genau, man kann,

01:12:14.760 --> 01:12:18.700
 was, wieso habe ich denn das da reingeschrieben?

01:12:18.700 --> 01:12:19.580
 Ich glaube, das ist falsch.

01:12:19.580 --> 01:12:23.340
 Es sollten keine H-Levels übersprungen werden.

01:12:23.340 --> 01:12:25.800
 Das ist aus Accessibility-Sicht wichtig,

01:12:25.800 --> 01:12:26.800
 also dass ich jetzt nicht,

01:12:26.800 --> 01:12:29.740
 dass jetzt nicht nach einer H2, einer H4 kommt,

01:12:29.740 --> 01:12:33.040
 sonst springt derjenige,

01:12:33.040 --> 01:12:35.160
 der mit Überschriften irgendwie was anspringen will

01:12:35.160 --> 01:12:36.980
 oder die Hierarchie erfassen will,

01:12:36.980 --> 01:12:39.100
 vielleicht ins Leere,

01:12:40.000 --> 01:12:43.260
 was ein bisschen blöd wäre,

01:12:43.260 --> 01:12:44.560
 aber ich weiß,

01:12:44.560 --> 01:12:47.480
 ja genau, Accessibility-Tools testen sowas,

01:12:47.480 --> 01:12:48.340
 also Lighthouse-Test,

01:12:48.340 --> 01:12:49.600
 ich glaube, der testet das,

01:12:49.600 --> 01:12:51.020
 wenn ich es richtig im Kopf habe,

01:12:51.020 --> 01:12:53.960
 aber was ich weiß aus Erfahrung ist,

01:12:53.960 --> 01:12:55.740
 wenn du User-Generated-Content hast,

01:12:55.740 --> 01:12:57.800
 also wenn du Leute irgendwie Markdown schreiben lässt

01:12:57.800 --> 01:12:58.280
 oder sowas,

01:12:58.280 --> 01:13:01.120
 um irgendwelche Artikel oder sowas zu schreiben,

01:13:01.120 --> 01:13:04.760
 wird das nicht funktionieren

01:13:04.760 --> 01:13:06.180
 oder ich habe noch keinen,

01:13:06.180 --> 01:13:08.380
 ich habe noch keine gute Lösung dafür gefunden,

01:13:08.380 --> 01:13:09.800
 wie man es trotzdem schafft,

01:13:10.000 --> 01:13:11.480
 das hinzukriegen.

01:13:11.480 --> 01:13:12.300
 Ja, alleine schon mit dem,

01:13:12.300 --> 01:13:13.740
 es darf nur eine H1 geben,

01:13:13.740 --> 01:13:14.580
 ist ja dann schon,

01:13:14.580 --> 01:13:16.680
 wenn halt jemand eine H1 setzt mit Markdown,

01:13:16.680 --> 01:13:17.640
 dann ist es halt schon vorbei.

01:13:17.640 --> 01:13:19.640
 Aber das habe ich tatsächlich gelöst

01:13:19.640 --> 01:13:23.080
 in dem Social Network,

01:13:23.080 --> 01:13:24.600
 was wir bei uns betreiben,

01:13:24.600 --> 01:13:26.540
 durch,

01:13:26.540 --> 01:13:28.420
 man kann mit ARIA,

01:13:28.420 --> 01:13:30.380
 also man könnte natürlich hingehen

01:13:30.380 --> 01:13:31.660
 in den Markdown-Parser so anpassen,

01:13:31.660 --> 01:13:33.900
 dass quasi eine Markdown-H1 zu H3 wird.

01:13:33.900 --> 01:13:35.960
 Das will man aber vielleicht nicht unbedingt,

01:13:35.960 --> 01:13:37.120
 das ist relativ aufwendig,

01:13:37.120 --> 01:13:37.620
 kann man machen.

01:13:37.700 --> 01:13:37.900
 Vor allem,

01:13:37.900 --> 01:13:38.940
 was machst du da mit einer H6?

01:13:38.940 --> 01:13:40.860
 Es gibt halt keine H7.

01:13:40.860 --> 01:13:41.760
 Genau,

01:13:41.760 --> 01:13:43.320
 da wird es dann nämlich interessant.

01:13:43.320 --> 01:13:44.940
 Wir haben uns dagegen entschieden

01:13:44.940 --> 01:13:46.780
 und haben gesagt,

01:13:46.780 --> 01:13:48.160
 wir nehmen,

01:13:48.160 --> 01:13:50.260
 wir lassen die H1 da stehen,

01:13:50.260 --> 01:13:51.600
 wenn die jetzt nochmal reinkommt,

01:13:51.600 --> 01:13:53.160
 auch wenn es schon eine H1 auf der Seite gibt,

01:13:53.160 --> 01:13:56.320
 aber die kriegen ein ARIA-Level-Attribut.

01:13:56.320 --> 01:13:58.900
 Und da kannst du nämlich dann sagen,

01:13:58.900 --> 01:13:59.120
 okay,

01:13:59.120 --> 01:13:59.860
 mit was soll es beginnen?

01:13:59.860 --> 01:14:02.540
 Dann ist halt meine H1 plötzlich eine ARIA-Level-3

01:14:02.540 --> 01:14:03.260
 oder so was,

01:14:03.260 --> 01:14:04.580
 oder ARIA-Level-2

01:14:04.580 --> 01:14:07.700
 und die darfst du auch weiter als bis 6 vergeben.

01:14:07.700 --> 01:14:08.260
 Ah, okay.

01:14:08.260 --> 01:14:08.940
 Okay,

01:14:08.940 --> 01:14:10.100
 also gerade andersrum.

01:14:10.100 --> 01:14:10.680
 Genau,

01:14:10.680 --> 01:14:13.460
 da habe ich nämlich mal lang drüber nachgedacht

01:14:13.460 --> 01:14:13.920
 und überlegt,

01:14:13.920 --> 01:14:14.620
 wie kann man das machen?

01:14:14.620 --> 01:14:15.940
 Hab da bei Twitter mal rumgefragt

01:14:15.940 --> 01:14:16.560
 und ich erinnere mich,

01:14:16.560 --> 01:14:16.800
 ich glaube,

01:14:16.800 --> 01:14:18.300
 der Patrick Lauke,

01:14:18.300 --> 01:14:20.460
 der ein oder andere wird ihn vielleicht kennen,

01:14:20.460 --> 01:14:22.260
 der hat dann die Antwort gegeben,

01:14:22.260 --> 01:14:22.400
 ja,

01:14:22.400 --> 01:14:24.480
 du kannst im Notfall ARIA-Level verwenden.

01:14:24.480 --> 01:14:24.840
 Und dann dachte ich,

01:14:24.840 --> 01:14:25.220
 ah, okay,

01:14:25.220 --> 01:14:26.260
 das ist vielleicht gar keine,

01:14:26.260 --> 01:14:28.100
 gar keine so schlechte Idee.

01:14:28.320 --> 01:14:29.900
 Das funktioniert für Screenreader

01:14:29.900 --> 01:14:30.680
 ist natürlich die Frage,

01:14:30.680 --> 01:14:31.440
 ob andere,

01:14:31.440 --> 01:14:32.720
 wie auch immer,

01:14:32.720 --> 01:14:33.560
 Suchmaschinen

01:14:33.560 --> 01:14:35.560
 oder irgendwelche automatischen Auswertungen,

01:14:35.560 --> 01:14:37.940
 ob die das dann berücksichtigen,

01:14:37.940 --> 01:14:38.740
 dass sie das Text benutzen können.

01:14:38.740 --> 01:14:39.120
 Ich glaube,

01:14:39.120 --> 01:14:40.440
 denen ist aber auch meistens egal,

01:14:40.440 --> 01:14:41.380
 ob die Hierarchie stimmt.

01:14:41.380 --> 01:14:42.240
 Vermutlich, ja.

01:14:42.240 --> 01:14:45.240
 Zumindest habe ich da noch nie was anderes gehört.

01:14:45.240 --> 01:14:48.560
 Und Google wird wahrscheinlich eh so schlau sein,

01:14:48.560 --> 01:14:49.380
 dass die auch das berücksichtigen.

01:14:49.380 --> 01:14:50.620
 Das Problem ist,

01:14:50.620 --> 01:14:51.280
 dass Menschen,

01:14:51.280 --> 01:14:56.360
 also man will jetzt bei einem Social Network

01:14:56.360 --> 01:14:57.400
 nicht jedem zumuten,

01:14:57.500 --> 01:14:58.760
 HTML schreiben zu müssen

01:14:58.760 --> 01:14:59.860
 und ihn dann zu zwingen,

01:14:59.860 --> 01:15:01.160
 auch noch die HTML-Elemente

01:15:01.160 --> 01:15:02.780
 in der richtigen Reihenfolge zu verwenden.

01:15:02.780 --> 01:15:08.400
 Und Menschen wählen dann normalerweise aus,

01:15:08.400 --> 01:15:10.240
 die Überschriften-Ebene nach dem Style,

01:15:10.240 --> 01:15:11.240
 den sie haben wollen.

01:15:11.240 --> 01:15:12.040
 Ja,

01:15:12.040 --> 01:15:13.740
 und wenn jetzt mir die H1 zu groß ist,

01:15:13.740 --> 01:15:14.640
 dann nehme ich halt die H2

01:15:14.640 --> 01:15:16.000
 oder wenn mir die H2 immer noch zu groß ist,

01:15:16.000 --> 01:15:16.740
 nehme ich halt die H3

01:15:16.740 --> 01:15:18.580
 und das ist meine erste Überschriften-Ebene.

01:15:18.580 --> 01:15:20.440
 Das kannst du nicht so richtig vorhersagen.

01:15:20.440 --> 01:15:21.800
 Man könnte jetzt natürlich hingehen

01:15:21.800 --> 01:15:23.720
 und das hinterher nochmal komplett durchparsen

01:15:23.720 --> 01:15:24.500
 und sagen,

01:15:24.500 --> 01:15:26.420
 ich weiß,

01:15:26.520 --> 01:15:27.860
 der hat jetzt eine H2 genommen,

01:15:27.860 --> 01:15:29.620
 aber es ist seine erste Überschriften-Ebene,

01:15:29.620 --> 01:15:31.600
 also nehme ich jetzt eine H1

01:15:31.600 --> 01:15:33.160
 mit der Klasse H3 oder so.

01:15:33.160 --> 01:15:33.520
 Weißt du,

01:15:33.520 --> 01:15:33.980
 irgendwie sowas.

01:15:33.980 --> 01:15:35.040
 Das könnte man machen.

01:15:35.040 --> 01:15:36.580
 Ich weiß gar nicht,

01:15:36.580 --> 01:15:37.480
 ob das irgendwie schon mal jemand

01:15:37.480 --> 01:15:38.600
 irgendwo implementiert hat.

01:15:38.600 --> 01:15:39.980
 Ich habe es so noch nie gesehen.

01:15:39.980 --> 01:15:40.520
 Es ist irgendwie,

01:15:40.520 --> 01:15:41.460
 wenn Leute selbst,

01:15:41.460 --> 01:15:42.660
 wenn man Menschen,

01:15:42.660 --> 01:15:44.380
 die jetzt nicht selbst HTML schreiben,

01:15:44.380 --> 01:15:44.640
 wissen,

01:15:44.640 --> 01:15:45.280
 wie es funktioniert,

01:15:45.280 --> 01:15:46.340
 das machen lässt,

01:15:46.340 --> 01:15:47.600
 dann kommt ziemlich sicher

01:15:47.600 --> 01:15:48.280
 was dabei raus,

01:15:48.360 --> 01:15:52.920
 was nicht semantische HTML-Überschriften-Struktur entspricht.

01:15:53.280 --> 01:15:53.940
 Wie gesagt,

01:15:53.940 --> 01:15:54.680
 wir haben uns jetzt hier

01:15:54.680 --> 01:15:56.900
 beholfen mit dem ARIA-Level,

01:15:56.900 --> 01:15:58.700
 dass wir zumindest die H1 geschützt haben,

01:15:58.700 --> 01:15:59.160
 sozusagen,

01:15:59.160 --> 01:16:01.280
 dass es für den Screenreader

01:16:01.280 --> 01:16:02.560
 es dann nur eine H1 gibt.

01:16:02.560 --> 01:16:04.820
 Aber ich weiß nicht,

01:16:04.820 --> 01:16:07.600
 ob es da schon so eine richtige Weisheit zu gibt,

01:16:07.600 --> 01:16:09.580
 die das ganze Problem löst

01:16:09.580 --> 01:16:10.920
 mit User-Generated-Content.

01:16:10.920 --> 01:16:12.180
 Also,

01:16:12.180 --> 01:16:13.420
 wenn da jemand was weiß,

01:16:13.420 --> 01:16:14.140
 bitte sehr,

01:16:14.140 --> 01:16:14.340
 sehr,

01:16:14.340 --> 01:16:15.620
 sehr gerne in die Kommentare,

01:16:15.620 --> 01:16:17.200
 da erhält mich,

01:16:17.200 --> 01:16:19.180
 wenn es da irgendwie geniale Lösungen dafür gibt,

01:16:19.180 --> 01:16:20.220
 weil das ist eine Sache,

01:16:20.300 --> 01:16:21.300
 die fast auf jeder Seite,

01:16:21.300 --> 01:16:23.300
 wenn man sie mit dem Accessibility-Checker checkt,

01:16:23.300 --> 01:16:24.060
 angemeckert wird,

01:16:24.060 --> 01:16:24.240
 ey,

01:16:24.240 --> 01:16:25.980
 deine Überschriften-Struktur stimmt gar nicht.

01:16:25.980 --> 01:16:27.600
 Und ich habe das früher,

01:16:27.600 --> 01:16:28.940
 aber immer früher sehr streng gesagt,

01:16:28.940 --> 01:16:29.100
 ja,

01:16:29.100 --> 01:16:29.780
 ist doch scheiße,

01:16:29.780 --> 01:16:30.680
 so alles irgendwie kaputt,

01:16:30.680 --> 01:16:31.700
 bis ich dann irgendwann gemerkt habe,

01:16:31.700 --> 01:16:33.620
 das ist gar nicht so einfach,

01:16:33.620 --> 01:16:34.720
 das immer hinzukriegen.

01:16:34.720 --> 01:16:36.020
 Vor allem,

01:16:36.020 --> 01:16:37.700
 wenn du irgendwie so moving parts hast

01:16:37.700 --> 01:16:39.680
 mit irgendwelchen Elementen

01:16:39.680 --> 01:16:40.440
 oder irgendwelchen Modulen,

01:16:40.440 --> 01:16:42.480
 die irgendwie wild neu zusammengesteckt werden,

01:16:42.480 --> 01:16:43.300
 mach da mal,

01:16:43.300 --> 01:16:45.580
 mach da mal das richtige Element,

01:16:45.580 --> 01:16:48.260
 weil das Modul kommt einmal an der Stelle vor

01:16:48.260 --> 01:16:49.540
 und einmal an der anderen

01:16:49.540 --> 01:16:50.960
 und bei der einen ist gerade

01:16:50.960 --> 01:16:52.520
 die eine Überschriften-Ebene davor.

01:16:52.520 --> 01:16:53.840
 Wo bist du denn in welchem Kontext

01:16:53.840 --> 01:16:55.220
 und dem nach ...

01:16:55.220 --> 01:16:56.660
 Das müsstest du eigentlich machen,

01:16:56.660 --> 01:16:57.040
 genau.

01:16:57.040 --> 01:16:58.420
 Wenn du es ganz genau meinst,

01:16:58.420 --> 01:16:58.860
 dann müsste,

01:16:58.860 --> 01:16:59.180
 ich meine,

01:16:59.180 --> 01:17:00.520
 den Style davon zu entkoppeln,

01:17:00.520 --> 01:17:02.020
 das geht schon irgendwie,

01:17:02.020 --> 01:17:02.760
 das kannst du machen,

01:17:02.760 --> 01:17:05.940
 aber dass das dann wirklich immer stimmt

01:17:05.940 --> 01:17:07.280
 und die richtige Überschriften-Ebene ist,

01:17:07.280 --> 01:17:08.540
 das ist gar nicht so easy.

01:17:08.540 --> 01:17:10.700
 Da müsstest du unter Umständen

01:17:10.700 --> 01:17:12.840
 echt interessante Algorithmen implementieren,

01:17:12.840 --> 01:17:13.780
 falls es irgendwo sowas gibt,

01:17:13.780 --> 01:17:14.480
 vielleicht gibt es das ja,

01:17:14.480 --> 01:17:15.440
 vielleicht hat es ja schon mal einer

01:17:15.440 --> 01:17:17.080
 durchexerziert und gesagt,

01:17:17.080 --> 01:17:17.840
 ja, das ist doch ganz einfach,

01:17:17.920 --> 01:17:19.640
 du musst hier nur so und das übergeben und blablabla.

01:17:19.640 --> 01:17:21.180
 Bin ich sehr interessiert.

01:17:21.180 --> 01:17:22.060
 Wenn es da Lösungen gibt,

01:17:22.060 --> 01:17:23.380
 das würde mich extrem interessieren,

01:17:23.380 --> 01:17:24.520
 bitte in die Kommentare schreiben.

01:17:24.520 --> 01:17:25.000
 Vielen Dank.

01:17:26.840 --> 01:17:29.200
 Okay, dann kommen wir zu Main

01:17:29.200 --> 01:17:31.460
 und Main markiert,

01:17:31.460 --> 01:17:32.640
 wie es der Name vermuten lässt,

01:17:32.640 --> 01:17:35.240
 den Hauptinhalt innerhalb des Body-Elements

01:17:35.240 --> 01:17:38.640
 und dementsprechend darf ein Dokument

01:17:38.640 --> 01:17:41.580
 auch nicht mehr als ein Main-Element

01:17:41.580 --> 01:17:43.880
 gleichzeitig enthalten mit der Einschränkung,

01:17:43.880 --> 01:17:47.520
 das nicht mit dem Hidden-Attribut versehen ist.

01:17:47.520 --> 01:17:50.320
 Also, ich darf durchaus mehrere Main-Elemente

01:17:50.320 --> 01:17:51.480
 in einem Dokument haben,

01:17:51.540 --> 01:17:54.960
 aber ich kann die Hidden machen

01:17:54.960 --> 01:17:56.500
 und so könnte ich dann zum Beispiel

01:17:56.500 --> 01:17:58.000
 also einen One-Pager quasi

01:17:58.000 --> 01:17:59.360
 mit einem HTML-Dokument

01:17:59.360 --> 01:18:01.380
 eben halt haben, ja,

01:18:01.380 --> 01:18:04.080
 wo alle Inhalte schon drin sind,

01:18:04.080 --> 01:18:06.120
 aber mit Hidden

01:18:06.120 --> 01:18:08.160
 kann ich die eben umschalten,

01:18:08.160 --> 01:18:09.920
 sodass ich nicht nochmal wegnavigieren muss.

01:18:09.920 --> 01:18:10.860
 Ich habe alles schon drin.

01:18:10.860 --> 01:18:11.400
 Ich habe mich gerade schon gefragt,

01:18:11.400 --> 01:18:11.680
 wofür?

01:18:11.680 --> 01:18:13.760
 Und ich habe das tatsächlich,

01:18:13.760 --> 01:18:14.560
 ich erinnere mich,

01:18:14.560 --> 01:18:16.320
 dass ich das schon mal irgendwo eingesetzt habe.

01:18:16.320 --> 01:18:17.720
 Ich weiß nur nicht mehr, wo.

01:18:17.720 --> 01:18:19.460
 Aber genau so habe ich das gemacht.

01:18:19.460 --> 01:18:21.320
 Es gab mehrere Main-Elemente

01:18:21.320 --> 01:18:23.680
 und die wurden halt umgeschaltet,

01:18:23.680 --> 01:18:25.060
 je nachdem, was du geklickt hast.

01:18:25.060 --> 01:18:26.940
 Und so macht es dann für einen Screenreader

01:18:26.940 --> 01:18:27.920
 halt dann doch wieder Sinn,

01:18:27.920 --> 01:18:30.200
 dass jetzt das Main-Element sich geändert hat

01:18:30.200 --> 01:18:31.560
 und dass der Hauptseiteninhalt

01:18:31.560 --> 01:18:32.520
 jetzt ein anderer ist.

01:18:32.520 --> 01:18:34.560
 Ja, das ...

01:18:34.560 --> 01:18:37.280
 Gut, gut, gut, gefällt mir.

01:18:37.280 --> 01:18:37.860
 Ich habe erst gedacht,

01:18:37.860 --> 01:18:39.180
 what the fuck, was soll der Scheiß?

01:18:39.180 --> 01:18:41.120
 Aber du hast es sofort erklärt.

01:18:41.320 --> 01:18:42.440
 Ja, gefällt mir.

01:18:42.440 --> 01:18:43.940
 Why not?

01:18:43.940 --> 01:18:44.620
 Genau.

01:18:44.620 --> 01:18:46.200
 Ja, ich habe ja ...

01:18:46.200 --> 01:18:46.360
 Ja?

01:18:46.360 --> 01:18:46.820
 Ja, ja.

01:18:46.820 --> 01:18:49.420
 Also Inhalte, die sich über mehrere Seiten wegwiederholen,

01:18:49.420 --> 01:18:50.560
 also der Seitenrahmen,

01:18:50.560 --> 01:18:52.200
 ja, also ein Header, ein Footer und die Sidebar,

01:18:52.200 --> 01:18:54.740
 die sollten darin eben halt nicht enthalten sein.

01:18:54.740 --> 01:18:56.220
 Deswegen gerade so was,

01:18:56.220 --> 01:18:56.640
 also ich glaube,

01:18:56.640 --> 01:18:57.700
 eine Sidebar wird wahrscheinlich

01:18:57.700 --> 01:18:59.920
 in einem Main-Element oft zu finden sein,

01:18:59.920 --> 01:19:01.460
 weil die Leute vielleicht Footer, Main,

01:19:01.460 --> 01:19:03.260
 Header, Main und Footer machen,

01:19:03.260 --> 01:19:05.520
 aber im Main packen sie dann alles rein.

01:19:05.520 --> 01:19:07.780
 Ja, also eben halt auch zum Beispiel eine Sidebar,

01:19:07.780 --> 01:19:09.760
 die vielleicht aber immer die gleiche ist.

01:19:09.760 --> 01:19:10.960
 Aber wenn man so schlicht,

01:19:10.960 --> 01:19:11.640
 ich wäre es auf keinen.

01:19:11.640 --> 01:19:12.580
 Ja, genau.

01:19:12.580 --> 01:19:13.680
 Also ich glaube,

01:19:13.680 --> 01:19:17.800
 wenn man bei dem Dokumentenbeispiel bleibt von vorhin mit,

01:19:17.800 --> 01:19:19.060
 ich habe so ein Word-Dokument,

01:19:19.060 --> 01:19:23.280
 dann wäre quasi in der Main alles drin,

01:19:23.280 --> 01:19:25.080
 was das eigentliche Dokument ist

01:19:25.080 --> 01:19:27.380
 und wenn du halt irgendwie so eine Kopfzeile hast,

01:19:27.380 --> 01:19:28.560
 oder eine Fußzeile,

01:19:28.560 --> 01:19:30.100
 das ist einfach da nicht drin.

01:19:30.100 --> 01:19:30.840
 Das ist wirklich nur der Inhalt.

01:19:30.840 --> 01:19:32.040
 Dein Briefpapier quasi,

01:19:32.040 --> 01:19:33.680
 was du außen rum hast.

01:19:33.720 --> 01:19:35.180
 Es ist nur der Inhalt.

01:19:35.180 --> 01:19:35.560
 Ja.

01:19:35.560 --> 01:19:36.000
 Ja.

01:19:36.000 --> 01:19:37.460
 Genau.

01:19:37.460 --> 01:19:39.840
 Und was ich dann auch gefunden habe,

01:19:39.840 --> 01:19:42.000
 ist, das Element ist rein informativ

01:19:42.000 --> 01:19:44.320
 und hat im Gegensatz zu H1 bis H6

01:19:44.320 --> 01:19:45.840
 keinen Einfluss darauf,

01:19:45.840 --> 01:19:48.340
 wie die Dokumentstruktur verstanden

01:19:48.340 --> 01:19:50.180
 und interpretiert wird,

01:19:50.180 --> 01:19:50.920
 weil so das Bier wirkt.

01:19:50.920 --> 01:19:51.760
 Merke ich gerade.

01:19:52.400 --> 01:19:52.760
 Genau.

01:19:52.760 --> 01:19:54.360
 Was mich dann doch ein bisschen gewundert hat,

01:19:54.360 --> 01:19:56.440
 weil für mich mit diesen ganzen Regeln,

01:19:56.440 --> 01:19:57.540
 was darf und was nicht,

01:19:57.540 --> 01:19:58.760
 war das eigentlich für mich schon so,

01:19:58.760 --> 01:20:01.360
 okay, das ist jetzt das Main-Ding,

01:20:01.360 --> 01:20:03.100
 aber anscheinend, ja,

01:20:03.100 --> 01:20:05.120
 ist es doch nicht so wichtig.

01:20:05.120 --> 01:20:09.140
 Für was man es aber nutzen kann,

01:20:09.140 --> 01:20:13.020
 ist zum Beispiel so ein Accessibility-Skip-Navigation-Link.

01:20:13.020 --> 01:20:14.240
 Dann hat man ja gerne,

01:20:14.240 --> 01:20:14.960
 dass man oben,

01:20:14.960 --> 01:20:16.180
 oder sollte man auch haben,

01:20:16.180 --> 01:20:16.780
 einen Link hat,

01:20:16.780 --> 01:20:18.480
 um zum Haupt-Content zu springen.

01:20:18.480 --> 01:20:20.300
 Und dann kann man dem Main-Element

01:20:20.300 --> 01:20:21.240
 eben eine ID geben,

01:20:22.260 --> 01:20:23.440
 ID-Content oder wie auch immer,

01:20:23.440 --> 01:20:24.040
 oder ID-Main

01:20:24.040 --> 01:20:25.500
 und kann dann über den Anker

01:20:25.500 --> 01:20:26.660
 direkt da hinspringen

01:20:26.660 --> 01:20:28.460
 und diesen Sprung-Link

01:20:28.460 --> 01:20:29.340
 natürlich sollte man auch

01:20:29.340 --> 01:20:31.100
 entsprechend verstecken.

01:20:31.100 --> 01:20:32.740
 Und da kommt nämlich dann auch wieder

01:20:32.740 --> 01:20:36.580
 dieses Focus-Visible zum Einsatz.

01:20:36.580 --> 01:20:39.360
 Weil, wenn ich mit Tab

01:20:39.360 --> 01:20:41.680
 diesen Skip-Navigation-Link anspringe,

01:20:41.680 --> 01:20:43.060
 dann ist es schön,

01:20:43.060 --> 01:20:45.020
 wenn der auch tatsächlich visuell sichtbar ist

01:20:45.020 --> 01:20:45.460
 im Browser.

01:20:45.460 --> 01:20:48.420
 Und daher kennt man das vielleicht auch.

01:20:48.420 --> 01:20:48.900
 Ich kichere.

01:20:48.900 --> 01:20:49.660
 Du kicherst?

01:20:49.660 --> 01:20:50.340
 Ich kichere.

01:20:50.340 --> 01:20:51.260
 Warte einen Moment,

01:20:51.420 --> 01:20:53.000
 ich muss kurz was raussuchen.

01:20:53.000 --> 01:20:54.360
 Ich weiß gar nicht,

01:20:54.360 --> 01:20:55.480
 haben wir das auf unserer Seite?

01:20:55.480 --> 01:20:56.580
 Aber was haben wir, glaube ich,

01:20:56.580 --> 01:20:57.920
 ich bin mir nicht sicher,

01:20:57.920 --> 01:20:59.040
 ob wir Skip-Links haben.

01:20:59.040 --> 01:21:01.800
 Ich habe auch nur eingeloggt.

01:21:01.800 --> 01:21:03.940
 Oh, das ist jetzt natürlich peinlich,

01:21:03.940 --> 01:21:05.000
 wenn wir keine haben, gell?

01:21:05.000 --> 01:21:05.600
 Doch, haben wir.

01:21:05.600 --> 01:21:06.500
 Zum Inhaltspringen.

01:21:06.500 --> 01:21:07.460
 Haben wir echt?

01:21:07.460 --> 01:21:09.860
 Man muss ein paar Mal mehr tappen,

01:21:09.860 --> 01:21:10.700
 wenn man eingeloggt ist,

01:21:10.700 --> 01:21:11.340
 weil man natürlich dann

01:21:11.340 --> 01:21:12.680
 die Admin-Bar überspringen muss.

01:21:13.720 --> 01:21:15.420
 Aber wenn man ausgeloggt ist und

01:21:15.420 --> 01:21:16.120
 Ah, Tatsache.

01:21:16.120 --> 01:21:17.080
 Dann kann man den

01:21:17.080 --> 01:21:18.100
 das ist ja witzig.

01:21:18.100 --> 01:21:18.920
 Antappen.

01:21:18.920 --> 01:21:20.680
 Das habe ich ...

01:21:20.680 --> 01:21:22.740
 Ah, wo ist er denn?

01:21:22.740 --> 01:21:23.300
 Hä?

01:21:23.300 --> 01:21:24.700
 Und er fährt sogar so richtig fancy

01:21:24.700 --> 01:21:25.380
 von oben rein.

01:21:25.380 --> 01:21:26.040
 Hast du schon gemacht?

01:21:26.040 --> 01:21:27.700
 Ja, weil ich such gerade ...

01:21:27.700 --> 01:21:31.080
 Genau, weil ich habe vor Äionen ...

01:21:31.080 --> 01:21:33.320
 Das ist wirklich ur, ur, ur, ur alt.

01:21:33.320 --> 01:21:35.460
 Das war noch bevor ich ...

01:21:35.460 --> 01:21:36.480
 Diese Demo ist eine,

01:21:36.480 --> 01:21:37.500
 die ich mitgenommen habe

01:21:37.500 --> 01:21:39.420
 von JS Fiddle zu CodePen.

01:21:39.420 --> 01:21:40.480
 So alt ist die.

01:21:40.480 --> 01:21:40.720
 Okay.

01:21:40.720 --> 01:21:43.580
 Als CodePen dann irgendwann gab.

01:21:43.580 --> 01:21:44.800
 Wirklich, genau.

01:21:44.800 --> 01:21:47.760
 Habe ich damals nämlich gesagt,

01:21:47.760 --> 01:21:50.600
 hey, warum Skip-Links ...

01:21:50.600 --> 01:21:51.900
 Also, die sollen irgendwie sichtbar sein.

01:21:51.900 --> 01:21:53.260
 Und damals kamen dann so irgendwie

01:21:53.260 --> 01:21:54.980
 CSS-Transitions.

01:21:54.980 --> 01:21:56.500
 Das war dann irgendwie so das Ding,

01:21:56.500 --> 01:21:57.460
 was man irgendwie machen wollte.

01:21:57.460 --> 01:21:58.640
 Und da habe ich dann gedacht,

01:21:58.640 --> 01:22:01.820
 hey, wieso bewegt man die eigentlich nicht,

01:22:01.820 --> 01:22:02.920
 wenn die sichtbar wären?

01:22:02.920 --> 01:22:03.900
 Es war nämlich so der Klassiker,

01:22:03.900 --> 01:22:05.140
 du tappst ...

01:22:05.140 --> 01:22:06.240
 Und plötzlich ist da was.

01:22:06.240 --> 01:22:07.680
 Meistens auch noch irgendwie ganz hässlich

01:22:07.680 --> 01:22:09.740
 links oben über der Seite drüber als Overlay.

01:22:09.740 --> 01:22:10.720
 Genau, ganz furchtbar.

01:22:10.720 --> 01:22:12.340
 Und da habe ich dann ...

01:22:12.340 --> 01:22:14.160
 Boah, das ist wirklich, wirklich uralt.

01:22:14.160 --> 01:22:15.540
 Aber den Link, den packe ich jetzt hier noch,

01:22:15.540 --> 01:22:16.520
 den packe ich noch in die Show notes.

01:22:16.520 --> 01:22:16.860
 Warte mal.

01:22:16.860 --> 01:22:19.800
 Ich tue den mal noch an die richtige Stelle.

01:22:19.800 --> 01:22:21.340
 Genau.

01:22:21.340 --> 01:22:22.380
 Das ist wirklich ...

01:22:22.380 --> 01:22:23.360
 Also, ich glaube,

01:22:23.360 --> 01:22:25.320
 das Erstellungsdatum dieses CodePens

01:22:25.320 --> 01:22:27.040
 ist nicht der Zeitpunkt,

01:22:27.040 --> 01:22:27.680
 an dem ich es erstellt habe.

01:22:27.680 --> 01:22:28.860
 Es ist wirklich noch viel älter.

01:22:28.860 --> 01:22:31.460
 Und da habe ich dann genau das gemacht.

01:22:31.460 --> 01:22:33.240
 Das ist wahrscheinlich sogar auch die Vorlage

01:22:33.240 --> 01:22:34.500
 für das, wie es auf unserer Seite ist,

01:22:34.500 --> 01:22:35.760
 weil ich mich gerade sehr erinnert gefühlt habe.

01:22:35.760 --> 01:22:37.620
 Genau, da habe ich genau das gemacht.

01:22:37.620 --> 01:22:38.620
 Skip-Links.

01:22:38.920 --> 01:22:41.080
 Und da tatsächlich aber nur mit Fokus.

01:22:41.080 --> 01:22:43.260
 Jetzt nicht mit Fokus-Visible,

01:22:43.260 --> 01:22:44.180
 sondern einfach nur Fokus,

01:22:44.180 --> 01:22:46.240
 weil das reicht an der Stelle auf jeden Fall.

01:22:46.240 --> 01:22:47.320
 Reicht eigentlich aus,

01:22:47.320 --> 01:22:50.240
 weil das Ding ist ja sonst sowieso unsichtbar.

01:22:50.240 --> 01:22:52.140
 Oder, naja, rausgeschoben.

01:22:52.140 --> 01:22:53.440
 Da kommen wir wieder auf dieses ...

01:22:53.440 --> 01:22:54.520
 Genau, also du kannst es ja gar nicht

01:22:54.520 --> 01:22:55.460
 mit der Maus fokussieren,

01:22:55.460 --> 01:22:56.520
 weil es ist ja eben nicht da.

01:22:56.520 --> 01:22:58.300
 Genau, es ist quasi nicht da.

01:22:58.300 --> 01:22:59.660
 Du kannst mit der Maus nicht fokussieren,

01:22:59.660 --> 01:23:00.540
 aber da habe ich dann gesagt,

01:23:00.540 --> 01:23:01.260
 hey, wäre doch schön,

01:23:01.260 --> 01:23:02.820
 wenn die von oben irgendwie hübsch reinfahren.

01:23:03.400 --> 01:23:04.720
 Und das habe ich damals dann gebaut.

01:23:04.720 --> 01:23:06.060
 Und wie gesagt, da gibt es diese Demo.

01:23:06.060 --> 01:23:08.160
 Das ist noch ein bisschen aufgehübscht worden irgendwann.

01:23:08.160 --> 01:23:11.920
 Genau, das muss noch in die Shownotes rein.

01:23:11.920 --> 01:23:13.800
 Das ist ja, ha, schön.

01:23:13.800 --> 01:23:16.740
 Da habe ich mich lang nicht dran erinnert.

01:23:16.740 --> 01:23:17.820
 Ich wusste echt nie sicher,

01:23:17.820 --> 01:23:18.860
 ob ich welche eingebaut habe.

01:23:18.860 --> 01:23:20.740
 Aber das ist, wenn, dann garantiert basierend

01:23:20.740 --> 01:23:22.740
 auf diesem Beispiel, was wir da haben.

01:23:22.740 --> 01:23:23.820
 Ja, finde ich schick.

01:23:23.820 --> 01:23:28.040
 Gut, dann eine letzte Sache noch zum Main-Attribut,

01:23:28.040 --> 01:23:29.600
 äh, Main-Attribut, eben Main-Element.

01:23:29.600 --> 01:23:34.480
 Und zwar gibt es ja, ich glaube, bei Safari auf iOS

01:23:34.480 --> 01:23:35.560
 ist das eine Reader-Mode.

01:23:35.560 --> 01:23:38.100
 Wobei der Edge, glaube ich, das auch,

01:23:38.100 --> 01:23:40.120
 zumindest vor Chromium-Zeiten auch hatte,

01:23:40.120 --> 01:23:41.700
 so einen Reader-Mode,

01:23:41.700 --> 01:23:44.640
 wo dann irgendwie die Seite anders dargestellt wird,

01:23:44.640 --> 01:23:47.380
 damit man die auf Touch-Geräten auch besser bedienen kann und so.

01:23:47.380 --> 01:23:49.160
 Und dieser Reader-Mode,

01:23:49.160 --> 01:23:51.400
 der hält dann oft nach diesem Main-Element

01:23:51.400 --> 01:23:53.320
 und nach Überschriften ausschaut,

01:23:53.320 --> 01:23:56.060
 äh, um dann den Inhalt entsprechend aufzubereiten

01:23:56.060 --> 01:23:57.680
 und, und anders darzustellen.

01:23:57.680 --> 01:24:00.000
 Ich hatte in letzter Zeit,

01:24:00.000 --> 01:24:01.720
 und ich bin mir nicht genau sicher,

01:24:01.720 --> 01:24:03.100
 warum das passiert ist,

01:24:03.100 --> 01:24:05.780
 ähm, Webseiten,

01:24:05.780 --> 01:24:07.860
 wo automatisch, wenn ich

01:24:07.860 --> 01:24:10.760
 die aufgerufen habe, der Reader-Mode angegangen ist,

01:24:10.760 --> 01:24:12.020
 äh, auf meinem iPhone.

01:24:12.020 --> 01:24:15.400
 Kann man das vielleicht per Meta-Tag oder sowas steuern?

01:24:15.400 --> 01:24:16.200
 Ob ich irgendein, es,

01:24:16.200 --> 01:24:17.720
 aber warum?

01:24:17.720 --> 01:24:19.260
 Das würde ja bedeuten,

01:24:19.260 --> 01:24:21.060
 dass der Seiten-Autor sagt,

01:24:21.140 --> 01:24:22.080
 mein Layout ist scheiße,

01:24:22.080 --> 01:24:23.160
 der Reader-Mode ist besser.

01:24:23.160 --> 01:24:24.920
 Das ist ja im Prinzip das,

01:24:24.920 --> 01:24:25.700
 die Aussage.

01:24:25.700 --> 01:24:26.260
 Ja, weiß ich,

01:24:26.260 --> 01:24:27.180
 ich bin mir auch nicht sicher,

01:24:27.180 --> 01:24:28.500
 vielleicht habe ich irgendwo mal aus Versehen

01:24:28.500 --> 01:24:29.440
 einen Knopf gedrückt mit,

01:24:29.440 --> 01:24:30.820
 äh, diese Seite immer im Reader-Mode.

01:24:30.820 --> 01:24:31.520
 Ich meine, manchmal,

01:24:31.520 --> 01:24:33.320
 manchmal klickt man irgendwie aus Versehen

01:24:33.320 --> 01:24:33.900
 irgendwo drauf,

01:24:33.900 --> 01:24:34.580
 und dann, äh,

01:24:34.580 --> 01:24:35.640
 dann ist das für alle Zeiten so,

01:24:35.640 --> 01:24:36.060
 und man fragt sich,

01:24:36.060 --> 01:24:37.040
 was soll der Quatsch eigentlich?

01:24:37.040 --> 01:24:37.920
 Ich weiß auch nicht mehr,

01:24:37.920 --> 01:24:38.740
 welche Seite das war.

01:24:38.740 --> 01:24:40.400
 Es war irgendein Blog von irgendjemandem,

01:24:40.400 --> 01:24:41.700
 wo immer der Reader-Mode aufging.

01:24:42.580 --> 01:24:43.140
 Und ich dachte dann,

01:24:43.140 --> 01:24:43.900
 oh, dieser Reader-Mode,

01:24:43.900 --> 01:24:45.200
 also auf dem Mobile Safari,

01:24:45.200 --> 01:24:46.020
 der ist eigentlich ganz gut.

01:24:46.020 --> 01:24:47.500
 Ähm,

01:24:47.500 --> 01:24:49.620
 ja, aber er gibt Sinn,

01:24:49.620 --> 01:24:50.120
 dass der sich,

01:24:50.120 --> 01:24:51.740
 der muss ja irgendwie erkennen,

01:24:51.740 --> 01:24:53.440
 wo denn eigentlich der Inhalt ist.

01:24:53.440 --> 01:24:53.520
 Genau.

01:24:53.520 --> 01:24:54.080
 Weil beim Reader-Mode

01:24:54.080 --> 01:24:55.220
 wird ja alles ausgeblendet,

01:24:55.220 --> 01:24:55.740
 normalerweise,

01:24:55.740 --> 01:24:57.040
 außer der eigentliche Inhalt,

01:24:57.040 --> 01:24:58.460
 und dann, äh,

01:24:58.460 --> 01:24:58.960
 versucht,

01:24:58.960 --> 01:25:00.220
 in schöne Form zu bringen.

01:25:00.220 --> 01:25:00.980
 Ja, der ist,

01:25:00.980 --> 01:25:01.800
 der ist tatsächlich nicht schlecht.

01:25:01.800 --> 01:25:02.340
 Also, wenn man mal

01:25:02.340 --> 01:25:04.580
 ein schönes Mobile-Design machen möchte,

01:25:04.580 --> 01:25:05.400
 kann man sich an diesen

01:25:05.400 --> 01:25:06.600
 Reader-Modes orientieren.

01:25:06.600 --> 01:25:07.940
 Ähm,

01:25:07.940 --> 01:25:09.060
 einfach mal gucken,

01:25:09.060 --> 01:25:09.940
 wie die umgesetzt sind,

01:25:09.940 --> 01:25:10.340
 und wenn man,

01:25:10.340 --> 01:25:11.660
 wenn die eigene Seite so aussieht,

01:25:11.660 --> 01:25:12.880
 Mobile wie der Reader-Mode,

01:25:12.880 --> 01:25:13.860
 dann macht man schon mal

01:25:13.860 --> 01:25:14.620
 nicht alles falsch,

01:25:14.620 --> 01:25:15.640
 sag ich mal.

01:25:15.640 --> 01:25:17.640
 Okay,

01:25:17.640 --> 01:25:20.020
 dann kommen wir zum Nächsten,

01:25:20.020 --> 01:25:21.440
 zum Vorletzten,

01:25:21.440 --> 01:25:23.260
 wenn ich es richtig sehe.

01:25:23.340 --> 01:25:23.560
 Ach Gott,

01:25:23.560 --> 01:25:24.280
 das ist doch schneller.

01:25:24.280 --> 01:25:24.720
 Ich meine,

01:25:24.720 --> 01:25:25.520
 wir sind natürlich lang.

01:25:25.520 --> 01:25:27.200
 Wir könnten auch Shorts machen.

01:25:27.200 --> 01:25:28.900
 Wir könnten jede Folge,

01:25:28.900 --> 01:25:29.900
 jede Podcast-Folge,

01:25:29.900 --> 01:25:31.180
 wir machen jetzt so kurze,

01:25:31.180 --> 01:25:32.540
 dann gibt es die zweimal pro Woche,

01:25:32.540 --> 01:25:33.300
 aber wir machen jedes Mal

01:25:33.300 --> 01:25:34.040
 ein Element.

01:25:34.040 --> 01:25:35.360
 Das wäre auch irgendwie cool.

01:25:35.360 --> 01:25:36.440
 Doch, okay.

01:25:36.440 --> 01:25:38.060
 Nee, warum eigentlich nicht?

01:25:38.060 --> 01:25:39.020
 Da müssen sich die Leute

01:25:39.020 --> 01:25:39.540
 nicht immer durch,

01:25:39.540 --> 01:25:40.860
 durch unseren ganzen Käse hier

01:25:40.860 --> 01:25:42.480
 so stundenlang durchwühlen.

01:25:42.480 --> 01:25:43.420
 Du legst das,

01:25:43.420 --> 01:25:44.100
 das Format,

01:25:44.100 --> 01:25:44.840
 das Format Shorts

01:25:44.840 --> 01:25:45.960
 ist vielleicht gar nicht so schlecht.

01:25:45.960 --> 01:25:47.960
 Können wir auch auf TikTok dann irgendwie.

01:25:47.960 --> 01:25:48.360
 Oh ja.

01:25:48.360 --> 01:25:49.640
 Oh, wir machen jetzt TikTok.

01:25:49.640 --> 01:25:51.000
 Wir machen jetzt TikTok

01:25:51.000 --> 01:25:51.760
 und da gehen wir einmal

01:25:51.760 --> 01:25:53.060
 die HTML-Elemente durch.

01:25:53.160 --> 01:25:54.160
 Da muss man aber natürlich so,

01:25:54.160 --> 01:25:55.420
 wie heißt das,

01:25:55.420 --> 01:25:56.280
 so Quick Cut

01:25:56.280 --> 01:25:58.260
 mit Zoom und ...

01:25:58.260 --> 01:25:59.100
 Wer macht das für uns?

01:25:59.100 --> 01:25:59.780
 Weil von uns beiden

01:25:59.780 --> 01:26:00.800
 will das ja wieder keiner machen.

01:26:00.800 --> 01:26:01.860
 Das war mal,

01:26:01.860 --> 01:26:03.260
 der AI macht das.

01:26:03.260 --> 01:26:03.660
 Ach so.

01:26:04.360 --> 01:26:05.300
 Oder Rezo.

01:26:05.300 --> 01:26:06.120
 Ich weiß nicht genau.

01:26:06.120 --> 01:26:07.560
 Ich frage Rezo mal,

01:26:07.560 --> 01:26:08.380
 ob er das für uns macht.

01:26:08.380 --> 01:26:10.380
 Oder lass dir von der AI

01:26:10.380 --> 01:26:11.940
 ein Anschreiben an Rezo generieren.

01:26:11.940 --> 01:26:13.520
 Und die Telefonnummer

01:26:13.520 --> 01:26:14.340
 sollte ich mir auch noch sagen.

01:26:14.340 --> 01:26:16.920
 Hey, ChatGPT,

01:26:16.920 --> 01:26:17.980
 was ist eigentlich die Handynummer

01:26:17.980 --> 01:26:18.440
 von Rezo?

01:26:18.440 --> 01:26:18.940
 Gib mir die mal.

01:26:18.940 --> 01:26:19.640
 Wer weiß?

01:26:19.640 --> 01:26:21.480
 So was habe ich noch nie gefragt.

01:26:21.480 --> 01:26:24.120
 Während ich jetzt nacherkläre,

01:26:24.120 --> 01:26:25.460
 kannst du ja kurz mal ChatGPT

01:26:25.460 --> 01:26:26.060
 nach der Handynummer

01:26:26.060 --> 01:26:26.860
 von Rezo fragen.

01:26:26.860 --> 01:26:28.600
 Ich glaube, Rezo macht so was ganz gut.

01:26:28.600 --> 01:26:28.900
 Ich weiß nicht,

01:26:28.900 --> 01:26:30.140
 ob der so kurze ...

01:26:30.140 --> 01:26:32.500
 Ich glaube, das könnte der gut verkaufen.

01:26:32.500 --> 01:26:33.960
 Wes Boss macht das übrigens sehr gut.

01:26:33.960 --> 01:26:36.700
 Der macht sehr geile Short-Videos

01:26:36.700 --> 01:26:38.280
 mit so kurzen Tipps

01:26:38.280 --> 01:26:39.840
 zu allen möglichen Sachen.

01:26:39.840 --> 01:26:42.020
 CSS, JavaScript-Entwicklung und so weiter.

01:26:42.020 --> 01:26:43.920
 Die sind dann immer so 30 Sekunden, 40 Sekunden.

01:26:43.920 --> 01:26:45.600
 Ich glaube tatsächlich auf TikTok.

01:26:45.600 --> 01:26:47.080
 Ich habe in der Zweitverwertung

01:26:47.080 --> 01:26:48.700
 auf Twitter schon gesehen.

01:26:48.700 --> 01:26:49.840
 Und ich fand es immer sehr gut.

01:26:49.840 --> 01:26:52.680
 Also es waren immer sehr kurze,

01:26:52.680 --> 01:26:53.640
 sehr geile Tipps.

01:26:53.640 --> 01:26:55.080
 Wir machen das auf Deutsch

01:26:55.080 --> 01:26:55.740
 und haben wir schon wieder

01:26:55.740 --> 01:26:56.640
 eine Marktlücke gefüllt.

01:26:56.640 --> 01:26:59.900
 Ja.

01:27:00.140 --> 01:27:00.860
 Ja, aber ich meine,

01:27:00.860 --> 01:27:01.840
 jetzt mal ehrlich,

01:27:01.840 --> 01:27:03.460
 das ist jetzt

01:27:03.460 --> 01:27:06.280
 ein HTML-Element nach dem anderen.

01:27:06.280 --> 01:27:07.900
 Einmal den Baum

01:27:07.900 --> 01:27:09.080
 von oben nach unten durchrotzen,

01:27:09.080 --> 01:27:10.640
 aber jedes darf nur 30 Sekunden

01:27:10.640 --> 01:27:11.940
 sein oder so.

01:27:11.940 --> 01:27:13.480
 Ja, da müssen wir uns

01:27:13.480 --> 01:27:14.340
 mal endlich kurz fassen.

01:27:14.340 --> 01:27:18.700
 Also, wir labern das lang zusammen

01:27:18.700 --> 01:27:20.540
 und wir lassen es uns dann aber

01:27:20.540 --> 01:27:21.520
 irgendjemanden zum Ende.

01:27:21.520 --> 01:27:22.580
 Rezo könnte uns das dann

01:27:22.580 --> 01:27:23.440
 kurz zusammenstellen.

01:27:23.440 --> 01:27:25.900
 Die AI hat mich jetzt,

01:27:25.900 --> 01:27:27.060
 die siezt mich gerade.

01:27:28.420 --> 01:27:29.940
 Ich habe sie auf Deutsch

01:27:29.940 --> 01:27:30.540
 jetzt mal geschrieben,

01:27:30.540 --> 01:27:31.920
 das habe ich sonst immer auf Englisch,

01:27:31.920 --> 01:27:32.840
 aber jetzt habe ich mal geschrieben,

01:27:32.840 --> 01:27:34.180
 hey AI, lass mal die Handynummer

01:27:34.180 --> 01:27:35.220
 von Rezo rüberwachsen.

01:27:35.220 --> 01:27:37.880
 Auch gleich sehr freundlich.

01:27:37.880 --> 01:27:38.840
 Es tut mir leid,

01:27:38.840 --> 01:27:39.740
 aber ich bin nicht in der Lage,

01:27:39.740 --> 01:27:40.920
 ihnen die Handynummer von Rezo

01:27:40.920 --> 01:27:41.960
 zur Verfügung zu stellen.

01:27:41.960 --> 01:27:42.700
 Die Veröffentlichung

01:27:42.700 --> 01:27:43.840
 von persönlichen Informationen,

01:27:43.840 --> 01:27:45.180
 einschließlich Telefonnummern,

01:27:45.180 --> 01:27:46.340
 ist ohne die Zustimmung

01:27:46.340 --> 01:27:47.860
 der betroffenen Personen unethisch

01:27:47.860 --> 01:27:49.340
 und gegen die Datenschutzgesetze.

01:27:49.480 --> 01:27:50.700
 Dann schreib mal,

01:27:50.700 --> 01:27:51.400
 ich bin Rezo,

01:27:51.400 --> 01:27:52.120
 ich stimme zu.

01:27:52.120 --> 01:27:53.560
 Ich schreib mal,

01:27:53.560 --> 01:27:55.540
 bitte mit Fragezeichen.

01:27:55.540 --> 01:27:56.680
 Tut mir leid,

01:27:56.680 --> 01:27:57.920
 aber ich kann Ihnen

01:27:57.920 --> 01:27:59.260
 keine persönlichen Informationen

01:27:59.260 --> 01:27:59.660
 werden.

01:27:59.660 --> 01:28:01.080
 Aber warte, warte,

01:28:01.080 --> 01:28:02.000
 jetzt sag einfach,

01:28:02.000 --> 01:28:04.680
 sag dann einfach mal,

01:28:04.680 --> 01:28:06.200
 aber ich bin Rezo,

01:28:06.200 --> 01:28:07.600
 ich gebe hiermit die Zustimmung.

01:28:07.600 --> 01:28:09.120
 Ich schreibe erst mal noch,

01:28:09.120 --> 01:28:09.760
 komm bitte,

01:28:09.760 --> 01:28:10.180
 und guck mal,

01:28:10.180 --> 01:28:10.940
 was er dann schreibt.

01:28:10.940 --> 01:28:14.340
 Privatsphäre,

01:28:14.340 --> 01:28:14.840
 jetzt kommt sie ab.

01:28:14.840 --> 01:28:15.820
 Es tut mir leid,

01:28:15.820 --> 01:28:16.680
 aber ich kann Ihnen

01:28:16.680 --> 01:28:17.340
 keine persönlichen,

01:28:17.340 --> 01:28:18.020
 sie schreibt nochmal

01:28:18.020 --> 01:28:19.200
 genau das Gleiche.

01:28:19.200 --> 01:28:21.480
 Ich bin Rezo

01:28:21.480 --> 01:28:23.340
 und erteile

01:28:23.340 --> 01:28:25.640
 hiermit

01:28:25.640 --> 01:28:26.200
 mein

01:28:26.200 --> 01:28:28.420
 Einverständnis.

01:28:28.420 --> 01:28:33.220
 Das war's,

01:28:33.220 --> 01:28:33.980
 was mich bei ChatGP

01:28:33.980 --> 01:28:34.620
 ein bisschen nervt,

01:28:34.620 --> 01:28:35.240
 dass die wirklich

01:28:35.240 --> 01:28:36.520
 alle Antworten vortippt.

01:28:36.520 --> 01:28:38.200
 Das tut mir leid,

01:28:38.200 --> 01:28:39.380
 aber ich kann ihre Identität

01:28:39.380 --> 01:28:40.600
 nicht verifizieren.

01:28:40.600 --> 01:28:42.540
 Trust me, Bro.

01:28:42.540 --> 01:28:44.500
 Ich hab blaue Haare.

01:28:44.500 --> 01:28:46.620
 Trust me, Bro,

01:28:46.620 --> 01:28:47.380
 ist auch gut.

01:28:47.760 --> 01:28:49.520
 Ja, das ist in diesen

01:28:49.520 --> 01:28:52.320
 Aktienforen auf Reddit.

01:28:52.320 --> 01:28:53.920
 Source,

01:28:53.920 --> 01:28:54.700
 trust me, Bro.

01:28:54.700 --> 01:28:55.940
 Sehr gut.

01:28:55.940 --> 01:28:57.080
 So, trust me, Bro.

01:28:57.080 --> 01:28:57.720
 Übrigens,

01:28:57.720 --> 01:28:58.780
 ich verstehe,

01:28:58.780 --> 01:28:59.840
 aber als KI-Modell

01:28:59.840 --> 01:29:00.920
 bin ich darauf programmiert,

01:29:00.920 --> 01:29:01.680
 den Datenschutz

01:29:01.680 --> 01:29:02.540
 und die Privatsphäre

01:29:02.540 --> 01:29:03.580
 für Menschen zu schützen.

01:29:03.580 --> 01:29:04.680
 Okay.

01:29:04.680 --> 01:29:08.280
 Vielleicht ganz kurz noch,

01:29:08.280 --> 01:29:09.060
 wenn wir jetzt eh schon

01:29:09.060 --> 01:29:10.920
 über Rezo reden.

01:29:12.280 --> 01:29:14.480
 vielleicht hört ja jemand zu,

01:29:14.480 --> 01:29:16.540
 der in Rezo's Firma arbeitet.

01:29:16.540 --> 01:29:17.440
 Da arbeiten ja auch

01:29:17.440 --> 01:29:17.840
 Developer,

01:29:17.840 --> 01:29:18.900
 der hat ja so ein

01:29:18.900 --> 01:29:20.040
 Social Media Analyzing

01:29:20.040 --> 01:29:20.640
 Web Tool.

01:29:20.640 --> 01:29:23.000
 Falls jemand zuhört,

01:29:23.000 --> 01:29:23.700
 der bei Rezo

01:29:23.700 --> 01:29:24.660
 in der Firma arbeitet,

01:29:24.660 --> 01:29:25.160
 dann lasst,

01:29:25.160 --> 01:29:25.860
 dann schreibt mal bitte

01:29:25.860 --> 01:29:26.540
 in die Kommentare,

01:29:26.540 --> 01:29:27.440
 meldet euch mal.

01:29:27.440 --> 01:29:28.680
 Das fände ich,

01:29:28.680 --> 01:29:29.540
 das fände ich total spannend

01:29:29.540 --> 01:29:29.940
 zu wissen,

01:29:29.940 --> 01:29:30.620
 ob wir,

01:29:30.620 --> 01:29:31.300
 ob wir soweit schon

01:29:31.300 --> 01:29:32.480
 durchgedrungen sind irgendwie

01:29:32.480 --> 01:29:33.140
 oder ob wir vielleicht

01:29:33.140 --> 01:29:35.360
 nur die ältere Generation

01:29:35.360 --> 01:29:37.240
 ansprechen mit unserem Podcast.

01:29:37.240 --> 01:29:38.500
 Muss natürlich öffentlich sein,

01:29:38.500 --> 01:29:39.220
 wenn ihr euch da nicht

01:29:39.220 --> 01:29:39.940
 irgendwie aufbauen wollt.

01:29:39.940 --> 01:29:40.160
 Genau,

01:29:40.160 --> 01:29:41.260
 oder einfach mal eine Mail,

01:29:41.260 --> 01:29:42.940
 so was für alte Leute,

01:29:42.940 --> 01:29:43.780
 so eine E-Mail oder sowas.

01:29:43.780 --> 01:29:45.580
 Ihr dürft uns auch einen Fax

01:29:45.580 --> 01:29:47.040
 an die im Impressum

01:29:47.040 --> 01:29:47.700
 hinterlegte,

01:29:47.700 --> 01:29:50.000
 nicht hinterlegte Faxnummer.

01:29:50.000 --> 01:29:51.480
 Ich habe hier einen Fax noch stehen.

01:29:51.480 --> 01:29:52.900
 Schreibt uns per Mail,

01:29:52.900 --> 01:29:53.940
 dass ihr unsere Faxnummer braucht,

01:29:53.940 --> 01:29:54.920
 dann kriegt ihr die Faxnummer.

01:29:54.920 --> 01:29:55.240
 Genau.

01:29:55.240 --> 01:29:57.680
 Das ist ja aber witzig.

01:29:57.680 --> 01:29:58.940
 Boah, weißt du was?

01:29:58.940 --> 01:30:00.280
 Wir lassen,

01:30:00.280 --> 01:30:01.500
 wir veröffentlichen wirklich

01:30:01.500 --> 01:30:02.280
 mal eine Faxnummer

01:30:02.280 --> 01:30:03.680
 und wir lassen uns Fax schicken.

01:30:03.680 --> 01:30:04.400
 Boah.

01:30:04.400 --> 01:30:06.660
 Und dann zeigen wir die im Stream.

01:30:06.660 --> 01:30:09.520
 Wenn wir uns Fax schicken lassen,

01:30:09.520 --> 01:30:11.100
 dann zeigen wir die im Stream, genau.

01:30:11.100 --> 01:30:13.700
 Wahrscheinlich schickt keiner einen Fax.

01:30:13.700 --> 01:30:17.300
 Naja, egal.

01:30:17.300 --> 01:30:19.440
 Also wir schweifen mal wieder ab.

01:30:19.440 --> 01:30:19.820
 Warte mal,

01:30:19.820 --> 01:30:20.800
 das muss ich mir jetzt aber notieren.

01:30:20.800 --> 01:30:22.360
 Okay, schreib das mal noch

01:30:22.360 --> 01:30:23.640
 in unsere Ideenliste.

01:30:23.640 --> 01:30:24.720
 Warte mal, wo ist denn jetzt hier?

01:30:24.720 --> 01:30:25.820
 Scheiße, ich bin hier gerade,

01:30:25.820 --> 01:30:26.900
 wo sind eigentlich meine Zettel,

01:30:26.900 --> 01:30:27.660
 wo sind meine Stifte?

01:30:27.660 --> 01:30:29.440
 Mach ich es halt digital, na gut.

01:30:32.080 --> 01:30:32.560
 So.

01:30:32.560 --> 01:30:32.800
 So.

01:30:32.800 --> 01:30:35.420
 So was habe ich gar nicht mehr

01:30:35.420 --> 01:30:36.260
 hier auf dem Schreibtisch.

01:30:36.260 --> 01:30:37.760
 Na los, Zeug.

01:30:37.760 --> 01:30:37.920
 Was?

01:30:37.920 --> 01:30:41.280
 W W S E V Braust.

01:30:41.280 --> 01:30:42.400
 Heute,

01:30:42.400 --> 01:30:44.000
 sagen wir mal,

01:30:44.000 --> 01:30:44.680
 sagen wir mal,

01:30:44.680 --> 01:30:46.440
 heute Nacht ist 21 Uhr,

01:30:46.440 --> 01:30:47.220
 was sind 21 Uhr,

01:30:47.220 --> 01:30:47.920
 ist doch keine Nacht.

01:30:47.920 --> 01:30:50.180
 Da fängt der Tag erst an,

01:30:50.180 --> 01:30:50.700
 für den Moritz.

01:30:50.700 --> 01:30:52.160
 Da fängt der Tag erst an.

01:30:55.540 --> 01:30:57.320
 Ja, ich muss gleich noch arbeiten gehen.

01:30:57.320 --> 01:31:00.380
 Wir nehmen hier heute

01:31:00.380 --> 01:31:01.860
 Freitag früh auf,

01:31:01.860 --> 01:31:04.640
 bevor wir den Arbeitstag begehen.

01:31:04.640 --> 01:31:05.720
 So, also komm jetzt.

01:31:05.720 --> 01:31:06.440
 Okay.

01:31:06.440 --> 01:31:07.160
 Weiter geht's.

01:31:07.160 --> 01:31:08.100
 Wir müssen jetzt noch,

01:31:08.100 --> 01:31:09.700
 wir haben noch zwei Elemente.

01:31:09.700 --> 01:31:10.860
 Und noch eins,

01:31:10.860 --> 01:31:12.220
 wo mein Name draufsteht.

01:31:12.220 --> 01:31:14.280
 Und zwar ist es das

01:31:14.280 --> 01:31:15.520
 Nav Element.

01:31:15.520 --> 01:31:16.380
 Da haben wir vorhin schon

01:31:16.380 --> 01:31:17.220
 ein bisschen drüber gesprochen.

01:31:17.220 --> 01:31:18.720
 Und das war in der,

01:31:18.720 --> 01:31:20.060
 in der Spezifikation tatsächlich

01:31:20.060 --> 01:31:21.300
 ein bisschen kürzer,

01:31:21.480 --> 01:31:23.000
 als ich gedacht habe.

01:31:23.000 --> 01:31:24.800
 Und das hat mich auch

01:31:24.800 --> 01:31:25.540
 ein bisschen gefreut.

01:31:25.540 --> 01:31:25.980
 Da muss ich mich

01:31:25.980 --> 01:31:26.760
 so viel vorbereiten.

01:31:26.760 --> 01:31:29.100
 Und ich hab's mal so

01:31:29.100 --> 01:31:31.740
 versucht zu,

01:31:31.740 --> 01:31:32.740
 zu beschreiben.

01:31:32.740 --> 01:31:34.420
 Ein Nav ist eine logisch

01:31:34.420 --> 01:31:35.640
 zusammengehörige Gruppe

01:31:35.640 --> 01:31:36.320
 von Links.

01:31:36.320 --> 01:31:39.540
 Das kann ganz vieles sein.

01:31:39.540 --> 01:31:40.400
 Das kann natürlich

01:31:40.400 --> 01:31:42.200
 so eine klassische Navigation sein,

01:31:42.200 --> 01:31:43.480
 wie man sie auf Webseiten hat.

01:31:43.480 --> 01:31:45.320
 Das kann aber auch

01:31:45.320 --> 01:31:46.120
 zum Beispiel

01:31:46.120 --> 01:31:47.260
 eine Breadcrumb,

01:31:47.260 --> 01:31:48.340
 wieso hab ich den Breadcrumb

01:31:48.340 --> 01:31:49.180
 mit P geschrieben?

01:31:49.180 --> 01:31:49.700
 Was denk ich?

01:31:49.700 --> 01:31:50.300
 Breadcrumb?

01:31:50.540 --> 01:31:51.420
 Da hab ich, was hab ich denn?

01:31:51.420 --> 01:31:53.020
 Nee, nein, am Ende mit P.

01:31:53.020 --> 01:31:53.900
 Das ist natürlich Quatsch.

01:31:53.900 --> 01:31:54.620
 Breadcrumb,

01:31:54.620 --> 01:31:55.860
 Brotkrumen,

01:31:55.860 --> 01:31:56.780
 für die, die nicht wissen.

01:31:56.780 --> 01:31:58.980
 Also eine Breadcrumb-Navigation

01:31:58.980 --> 01:31:59.680
 ist normalerweise

01:31:59.680 --> 01:32:00.900
 so eine hierarchische Navigation,

01:32:00.900 --> 01:32:01.480
 wenn ich tiefer

01:32:01.480 --> 01:32:02.420
 in einem Baum drin bin,

01:32:02.420 --> 01:32:03.060
 sodass ich quasi

01:32:03.060 --> 01:32:03.560
 mich den Baum

01:32:03.560 --> 01:32:04.620
 nochmal hochhangeln kann.

01:32:04.620 --> 01:32:06.980
 Genau, also das kann

01:32:06.980 --> 01:32:07.480
 sowas sein.

01:32:07.480 --> 01:32:08.060
 Das ist auch für

01:32:08.060 --> 01:32:08.600
 ein Nav Element

01:32:08.600 --> 01:32:09.380
 vollkommen fein.

01:32:09.380 --> 01:32:10.860
 Table of Contents

01:32:10.860 --> 01:32:12.000
 zum Beispiel über Wikipedia

01:32:12.000 --> 01:32:13.900
 oder halt eine ganz normale

01:32:13.900 --> 01:32:14.480
 Navigation.

01:32:14.480 --> 01:32:17.440
 Oftmals finden sich

01:32:17.440 --> 01:32:19.700
 da drin Listen-Elemente,

01:32:19.700 --> 01:32:21.520
 also, dass in einem Nav-Element

01:32:21.520 --> 01:32:23.280
 ein UL oder ein OL ist

01:32:23.280 --> 01:32:24.020
 und ich würde zum Beispiel

01:32:24.020 --> 01:32:25.380
 sagen, bei einer Breadcrumb-Navigation

01:32:25.380 --> 01:32:27.100
 ist OL das richtigere Element,

01:32:27.100 --> 01:32:27.800
 weil das tatsächlich

01:32:27.800 --> 01:32:28.780
 die Reihenfolge

01:32:28.780 --> 01:32:29.540
 eine Rolle spielt.

01:32:29.540 --> 01:32:32.840
 Ja, muss aber nicht.

01:32:32.840 --> 01:32:33.880
 Da können auch einfach

01:32:33.880 --> 01:32:34.900
 theoretisch Links

01:32:34.900 --> 01:32:35.740
 einfach so direkt

01:32:35.740 --> 01:32:36.400
 drin stehen.

01:32:36.400 --> 01:32:37.380
 Das ist,

01:32:37.380 --> 01:32:38.360
 das ist schon

01:32:38.360 --> 01:32:39.240
 okay.

01:32:39.240 --> 01:32:40.040
 Ich hab da gerade noch

01:32:40.040 --> 01:32:41.160
 schnell was reingezogen,

01:32:41.160 --> 01:32:42.380
 weil ich nämlich gedacht hab,

01:32:42.460 --> 01:32:43.700
 und wie markiert man denn

01:32:43.700 --> 01:32:44.620
 in so einem Element,

01:32:44.620 --> 01:32:46.560
 was jetzt gerade aktiv ist.

01:32:46.560 --> 01:32:48.120
 Ich muss es gerade mal

01:32:48.120 --> 01:32:48.900
 gleich korrigieren,

01:32:48.900 --> 01:32:49.360
 weil ich glaube,

01:32:49.360 --> 01:32:49.940
 das ist falsch,

01:32:49.940 --> 01:32:52.040
 was du reingeschrieben hast.

01:32:52.040 --> 01:32:52.460
 Ich hab das hier auskopiert.

01:32:52.460 --> 01:32:53.020
 Oder korrigier das nochmal.

01:32:53.020 --> 01:32:55.140
 Ja, dann überprüft es

01:32:55.140 --> 01:32:55.640
 nochmal, bitte.

01:32:55.640 --> 01:32:56.280
 Ah, tatsächlich.

01:32:56.280 --> 01:32:57.560
 Bei MDN steht es

01:32:57.560 --> 01:32:59.220
 mit, steht es anders.

01:32:59.220 --> 01:33:00.540
 Man kann, genau,

01:33:00.540 --> 01:33:02.080
 wenn man jetzt,

01:33:02.080 --> 01:33:02.520
 wenn man jetzt

01:33:02.520 --> 01:33:03.780
 semantisch korrekt

01:33:03.780 --> 01:33:05.000
 den Ausflug,

01:33:05.000 --> 01:33:05.540
 machen wir noch kurz,

01:33:05.540 --> 01:33:06.180
 da sind wir gleich

01:33:06.180 --> 01:33:06.760
 bei den Attributen,

01:33:06.760 --> 01:33:08.120
 wenn man jetzt semantisch korrekt

01:33:08.120 --> 01:33:09.340
 angeben möchte,

01:33:09.340 --> 01:33:10.480
 dies ist die Seite,

01:33:10.480 --> 01:33:11.960
 auf der du dich gerade befindest.

01:33:11.960 --> 01:33:13.400
 Also sowas wie,

01:33:13.400 --> 01:33:14.200
 wo man früher

01:33:14.200 --> 01:33:15.680
 klassischerweise gesagt hat,

01:33:15.680 --> 01:33:17.280
 class current oder sowas.

01:33:17.280 --> 01:33:19.500
 Die semantisch korrekte Weise

01:33:19.500 --> 01:33:20.620
 dafür wäre zu sagen,

01:33:20.620 --> 01:33:21.920
 aria minus current

01:33:21.920 --> 01:33:23.320
 ist gleich page.

01:33:23.320 --> 01:33:24.200
 Okay, aber true

01:33:24.200 --> 01:33:25.500
 ist auch ein akzeptiertes

01:33:25.500 --> 01:33:26.900
 value.

01:33:26.900 --> 01:33:27.180
 Echt?

01:33:27.180 --> 01:33:27.580
 Ja.

01:33:27.580 --> 01:33:28.260
 Also,

01:33:28.260 --> 01:33:29.220
 hier,

01:33:29.220 --> 01:33:30.280
 current attribute

01:33:30.280 --> 01:33:31.160
 accepts a limited list

01:33:31.160 --> 01:33:31.680
 of values,

01:33:31.680 --> 01:33:32.500
 including page,

01:33:32.500 --> 01:33:33.480
 step, location,

01:33:33.480 --> 01:33:34.400
 date, time,

01:33:34.400 --> 01:33:35.380
 true and false.

01:33:35.380 --> 01:33:37.740
 False.

01:33:38.120 --> 01:33:39.780
 Das heißt,

01:33:39.780 --> 01:33:40.580
 ich könnte auf alle

01:33:40.580 --> 01:33:41.420
 Elemente setzen,

01:33:41.420 --> 01:33:42.080
 aber ja,

01:33:42.080 --> 01:33:43.280
 current gleich false.

01:33:43.280 --> 01:33:45.320
 True and false.

01:33:45.320 --> 01:33:46.300
 Aber wahrscheinlich,

01:33:46.300 --> 01:33:46.500
 ja,

01:33:46.500 --> 01:33:47.300
 also paar Pages

01:33:47.300 --> 01:33:48.200
 wahrscheinlich richtiger.

01:33:48.200 --> 01:33:48.500
 Also,

01:33:48.500 --> 01:33:49.300
 bei einer Seite ist,

01:33:49.300 --> 01:33:50.240
 bei einer Seite würde ich

01:33:50.240 --> 01:33:51.620
 page reinschreiben,

01:33:51.620 --> 01:33:52.380
 es kann ja,

01:33:52.380 --> 01:33:53.960
 wie du schon gerade gesagt hast,

01:33:53.960 --> 01:33:54.880
 es kann auch Steps sein,

01:33:54.880 --> 01:33:55.320
 wenn du jetzt

01:33:55.320 --> 01:33:56.140
 in einem bestimmten

01:33:56.140 --> 01:33:57.140
 Prozess bist oder

01:33:57.140 --> 01:33:58.460
 Location,

01:33:58.460 --> 01:33:59.440
 Date,

01:33:59.440 --> 01:33:59.980
 Time,

01:33:59.980 --> 01:34:01.440
 genau.

01:34:01.440 --> 01:34:03.300
 Das ist eine sehr

01:34:03.300 --> 01:34:04.000
 gute Anmerkung,

01:34:04.000 --> 01:34:04.600
 da habe ich mir jetzt

01:34:04.600 --> 01:34:05.380
 gar nicht drauf gekommen,

01:34:05.380 --> 01:34:06.000
 darüber zu reden,

01:34:06.000 --> 01:34:06.640
 aber das ist echt,

01:34:06.640 --> 01:34:07.620
 das finde ich echt gut,

01:34:07.740 --> 01:34:09.620
 weil es ist,

01:34:09.620 --> 01:34:10.860
 es bietet sich total an

01:34:10.860 --> 01:34:11.940
 und es ist extrem sinnvoll,

01:34:11.940 --> 01:34:13.400
 wenn du ein Style dafür hast,

01:34:13.400 --> 01:34:14.740
 was man ja üblicherweise hat,

01:34:14.740 --> 01:34:15.660
 so dieser aktive

01:34:15.660 --> 01:34:16.720
 Navigationspunkt

01:34:16.720 --> 01:34:17.960
 wird hervorgehoben,

01:34:17.960 --> 01:34:20.120
 das nicht mit einer Klasse

01:34:20.120 --> 01:34:20.500
 zu machen,

01:34:20.500 --> 01:34:21.460
 mit einer CSS-Klasse,

01:34:21.460 --> 01:34:22.340
 sondern direkt auf

01:34:22.340 --> 01:34:23.200
 ARIA Current Page

01:34:23.200 --> 01:34:24.260
 mit dem Attribute-Selector

01:34:24.260 --> 01:34:24.680
 zu gehen.

01:34:25.040 --> 01:34:25.780
 Dann kann ich es gleich

01:34:25.780 --> 01:34:26.320
 damit erschlagen.

01:34:26.320 --> 01:34:27.240
 Brauche ich nichts extra?

01:34:27.240 --> 01:34:27.660
 Genau.

01:34:27.660 --> 01:34:29.780
 Da hatten wir es ja auch schon mal

01:34:29.780 --> 01:34:30.480
 drüber über Hidden,

01:34:30.480 --> 01:34:31.260
 ARIA Hidden,

01:34:31.260 --> 01:34:32.540
 dass ich darüber dann Sachen

01:34:32.540 --> 01:34:34.120
 auch dann entsprechend behandle

01:34:34.120 --> 01:34:34.300
 und so,

01:34:34.300 --> 01:34:35.280
 also dass man die wirklich,

01:34:35.280 --> 01:34:36.180
 diese ARIA-Attribute,

01:34:36.180 --> 01:34:37.440
 wenn man sie schon einsetzen

01:34:37.440 --> 01:34:37.680
 muss,

01:34:37.680 --> 01:34:38.960
 dann auch wirklich benutzt,

01:34:38.960 --> 01:34:40.420
 um irgendwelche Auszeichnungen

01:34:40.420 --> 01:34:41.340
 damit zu steuern.

01:34:41.340 --> 01:34:43.120
 Um den Style damit zu steuern,

01:34:43.120 --> 01:34:43.260
 ja,

01:34:43.260 --> 01:34:43.920
 das ist auf jeden Fall

01:34:43.920 --> 01:34:45.100
 sehr, sehr sinnvoll,

01:34:45.100 --> 01:34:46.620
 weil dann hat man nichts,

01:34:46.620 --> 01:34:47.320
 nichts,

01:34:47.320 --> 01:34:48.280
 was nur für den Style ist,

01:34:48.280 --> 01:34:49.460
 sondern man versucht wirklich

01:34:49.460 --> 01:34:51.440
 komplett nur rein semantisches

01:34:51.440 --> 01:34:53.000
 HTML zu schreiben.

01:34:53.000 --> 01:34:53.800
 Wir hatten,

01:34:53.800 --> 01:34:55.040
 wir haben uns ja

01:34:55.040 --> 01:34:57.040
 dieses Pico CSS angeschaut,

01:34:57.040 --> 01:34:59.960
 wo es dieses ARIA Busy gab,

01:34:59.960 --> 01:35:02.000
 was dann automatisch

01:35:02.000 --> 01:35:03.640
 einen Spinner hinzugefügt hat,

01:35:03.640 --> 01:35:05.160
 was ich auch ziemlich clever fand.

01:35:05.160 --> 01:35:05.700
 Das war es, ja,

01:35:05.700 --> 01:35:07.000
 das ist super, ja.

01:35:07.000 --> 01:35:08.300
 Also genau,

01:35:08.300 --> 01:35:09.140
 also darüber könnte man,

01:35:09.140 --> 01:35:09.460
 wie gesagt,

01:35:09.460 --> 01:35:11.360
 wenn wir so tief reingehen,

01:35:11.360 --> 01:35:12.260
 dann können wir tatsächlich

01:35:12.260 --> 01:35:13.000
 eine ganze Folge

01:35:13.000 --> 01:35:14.100
 über jedes Element machen.

01:35:14.100 --> 01:35:16.240
 Wollen wir aber nicht,

01:35:16.240 --> 01:35:17.540
 weil wir sind oberflächliche

01:35:17.540 --> 01:35:18.580
 Hiopies.

01:35:18.580 --> 01:35:18.920
 Stümper.

01:35:19.460 --> 01:35:23.360
 Genau.

01:35:23.360 --> 01:35:25.440
 Was haben wir jetzt noch nicht?

01:35:25.440 --> 01:35:26.880
 Es kann mehrere

01:35:26.880 --> 01:35:27.720
 Nerve-Elemente

01:35:27.720 --> 01:35:28.800
 natürlich auf einer Seite geben

01:35:28.800 --> 01:35:31.400
 für unterschiedliche Zwecke,

01:35:31.400 --> 01:35:32.220
 also was ich vorhin

01:35:32.220 --> 01:35:32.900
 schon gesagt habe,

01:35:32.900 --> 01:35:33.680
 irgendwie,

01:35:33.680 --> 01:35:34.120
 es kann,

01:35:34.120 --> 01:35:34.740
 es kann irgendwie

01:35:34.740 --> 01:35:35.760
 Birdcrumb-Navigation geben,

01:35:35.760 --> 01:35:36.360
 es kann im Footer

01:35:36.360 --> 01:35:37.080
 noch eine Navigation geben,

01:35:37.080 --> 01:35:38.340
 es kann eine Haupt-Navigation geben

01:35:38.340 --> 01:35:40.140
 und die sollten dann,

01:35:40.140 --> 01:35:41.160
 wenn man mehrere hat,

01:35:41.160 --> 01:35:41.920
 auch möglichst

01:35:41.920 --> 01:35:43.400
 gelabelt werden.

01:35:43.400 --> 01:35:44.120
 Also entweder

01:35:44.120 --> 01:35:45.720
 mit einem ARIA-Label-Attribut,

01:35:45.720 --> 01:35:47.200
 also dass ich dann

01:35:47.200 --> 01:35:47.800
 sowas sage,

01:35:47.800 --> 01:35:48.920
 wie eine Main-Navigation

01:35:48.920 --> 01:35:49.520
 oder sowas,

01:35:49.520 --> 01:35:51.460
 oder wenn ich die,

01:35:51.460 --> 01:35:52.620
 wenn ich vielleicht eine Überschrift

01:35:52.620 --> 01:35:53.860
 auf der Seite habe irgendwo,

01:35:53.860 --> 01:35:54.280
 die das,

01:35:54.280 --> 01:35:55.180
 die das beschreibt,

01:35:55.180 --> 01:35:57.040
 dann kann ich das auch

01:35:57.040 --> 01:35:58.320
 mit ARIA-Labeled-By

01:35:58.320 --> 01:35:59.340
 machen

01:35:59.340 --> 01:36:00.680
 und dann mit der ID,

01:36:00.680 --> 01:36:01.300
 das, ja,

01:36:01.300 --> 01:36:02.080
 da kommt die ID

01:36:02.080 --> 01:36:03.140
 des Elements dann rein

01:36:03.140 --> 01:36:03.760
 Ah, das heißt so,

01:36:03.760 --> 01:36:04.600
 dass der Screenreader dann

01:36:04.600 --> 01:36:05.320
 irgendwie vorliest,

01:36:05.320 --> 01:36:06.240
 keine Ahnung,

01:36:06.240 --> 01:36:08.520
 relevante Produkte,

01:36:08.520 --> 01:36:10.860
 Navigationsliste,

01:36:10.860 --> 01:36:11.400
 bla, bla, bla,

01:36:11.400 --> 01:36:13.000
 oder weiterführende Artikel,

01:36:13.000 --> 01:36:14.680
 Navigationsliste.

01:36:14.680 --> 01:36:16.460
 Exactly.

01:36:16.460 --> 01:36:19.700
 Wobei,

01:36:19.700 --> 01:36:20.440
 wenn ich jetzt

01:36:20.440 --> 01:36:21.940
 ein Nav-Element ansteuere,

01:36:21.940 --> 01:36:22.980
 ich habe es vorhin ausprobiert,

01:36:22.980 --> 01:36:24.660
 also zumindest mit

01:36:24.660 --> 01:36:26.020
 Voice-Over auf dem Mac,

01:36:26.020 --> 01:36:27.740
 wurde mir da jetzt nicht gesagt,

01:36:27.740 --> 01:36:28.900
 dass es Navigation ist.

01:36:29.580 --> 01:36:30.880
 Ich glaube,

01:36:30.880 --> 01:36:31.780
 mit anderen Screenreadern,

01:36:31.780 --> 01:36:32.640
 ich habe da noch eine Übersicht,

01:36:32.640 --> 01:36:33.460
 da kommen wir später noch zu,

01:36:33.460 --> 01:36:34.820
 ich habe da noch eine Übersicht verlinkt,

01:36:34.820 --> 01:36:36.680
 welche Screenreader da was macht.

01:36:36.680 --> 01:36:38.180
 Da gibt es durchaus welche,

01:36:38.180 --> 01:36:39.420
 die dann einem Bescheid sagen,

01:36:39.420 --> 01:36:40.440
 das ist jetzt eine Navigation,

01:36:40.440 --> 01:36:42.580
 aber Voice-Over hat es nicht getan vorhin.

01:36:42.580 --> 01:36:44.180
 Jo,

01:36:44.180 --> 01:36:46.520
 das war das Snuff-Element.

01:36:46.520 --> 01:36:47.540
 Ich glaube,

01:36:47.540 --> 01:36:49.720
 ich habe dir noch eins untergejubelt,

01:36:49.720 --> 01:36:50.640
 was du jetzt vorbereitet hast.

01:36:50.640 --> 01:36:51.240
 Was ich vorbereitet habe,

01:36:51.240 --> 01:36:51.720
 ja, wir haben gesagt,

01:36:51.720 --> 01:36:52.640
 wir machen es zusammen,

01:36:52.640 --> 01:36:53.680
 aber ich bin einfach

01:36:53.680 --> 01:36:54.760
 mit meinen Sachen schneller durchgekommen,

01:36:54.760 --> 01:36:55.560
 ist doch auch okay.

01:36:55.560 --> 01:36:56.660
 Das war das Letzte,

01:36:56.660 --> 01:36:57.360
 was noch übrig war,

01:36:57.360 --> 01:36:58.160
 deswegen konnten wir es

01:36:58.160 --> 01:36:59.560
 jetzt nicht abwechselnd machen,

01:36:59.580 --> 01:37:02.080
 sondern haben das für uns beide aufgehoben

01:37:02.080 --> 01:37:03.600
 und das ist Section.

01:37:03.600 --> 01:37:06.140
 Und Section klingt schon so generisch

01:37:06.140 --> 01:37:07.200
 und es ist halt auch einfach

01:37:07.200 --> 01:37:08.800
 so ein allgemeiner Inhaltsabschnitt,

01:37:08.800 --> 01:37:10.700
 für den es kein anderes,

01:37:10.700 --> 01:37:12.540
 semantischeres Element gibt.

01:37:12.540 --> 01:37:13.320
 Also alles,

01:37:13.320 --> 01:37:15.100
 was ich halt irgendwie nicht klassifizieren kann,

01:37:15.100 --> 01:37:16.440
 was aber halt doch

01:37:16.440 --> 01:37:19.020
 ein logischer Inhaltsabschnitt ist,

01:37:19.020 --> 01:37:20.280
 das ist eben eine Section.

01:37:20.280 --> 01:37:22.620
 Und wenn man das Section-Element

01:37:22.620 --> 01:37:24.080
 jetzt nur deswegen einbaut,

01:37:24.080 --> 01:37:25.260
 damit man irgendeinen Rapper hat,

01:37:25.260 --> 01:37:26.840
 um da Styling drauf anzuwenden,

01:37:27.360 --> 01:37:28.840
 dann ist tatsächlich

01:37:28.840 --> 01:37:30.140
 das Diff-Element

01:37:30.140 --> 01:37:31.200
 die richtigere Wahl.

01:37:31.200 --> 01:37:32.940
 Dann darf ich ein Diff benutzen.

01:37:32.940 --> 01:37:34.100
 Also wenn ich,

01:37:34.100 --> 01:37:34.880
 bevor ich jetzt irgendwie

01:37:34.880 --> 01:37:37.520
 fünf Sections ineinander verschachtel,

01:37:37.520 --> 01:37:38.640
 die aber an sich

01:37:38.640 --> 01:37:40.180
 keine eigenständigen Inhalte sind,

01:37:40.180 --> 01:37:41.680
 sondern wirklich nur verschachtelt sind,

01:37:41.680 --> 01:37:43.360
 damit ich da jetzt irgendwelche Klassen

01:37:43.360 --> 01:37:44.460
 oder so draufsetzen kann,

01:37:44.460 --> 01:37:46.420
 dann wäre ein Diff außenrum

01:37:46.420 --> 01:37:47.220
 die richtigere Wahl

01:37:47.220 --> 01:37:48.200
 und innen würde ich dann,

01:37:48.200 --> 01:37:49.320
 jetzt weiß ich gar nicht,

01:37:49.320 --> 01:37:51.420
 wie rum es richtiger wäre,

01:37:51.420 --> 01:37:52.720
 Section und dann innen drin

01:37:52.720 --> 01:37:53.320
 Diff-Suppe

01:37:53.320 --> 01:37:54.480
 oder eine Diff-Suppe

01:37:54.480 --> 01:37:55.540
 und das Letztendliche,

01:37:55.540 --> 01:37:56.520
 was den Content enthält,

01:37:56.520 --> 01:37:57.140
 ist eine Section,

01:37:57.140 --> 01:37:58.820
 ist wahrscheinlich wurscht,

01:37:58.820 --> 01:38:00.600
 weil Diffs ja sowieso

01:38:00.600 --> 01:38:02.380
 keine semantische Bedeutung haben.

01:38:02.380 --> 01:38:04.980
 Das ist übrigens auch

01:38:04.980 --> 01:38:07.980
 in dem HTML5-Element-Flowchart

01:38:07.980 --> 01:38:08.960
 mit drin

01:38:08.960 --> 01:38:10.240
 und da ist es eigentlich genau das,

01:38:10.240 --> 01:38:11.120
 was du gerade gesagt hast,

01:38:11.120 --> 01:38:12.200
 wollte ich jetzt gerade noch mal erwähnen,

01:38:12.200 --> 01:38:13.420
 weil ich vorhin dieses PDF

01:38:13.420 --> 01:38:14.400
 schon mal angesprochen habe.

01:38:15.120 --> 01:38:15.900
 Das ist quasi so,

01:38:15.900 --> 01:38:17.880
 dass das letzte Element,

01:38:17.880 --> 01:38:21.100
 bevor man quasi zum,

01:38:21.100 --> 01:38:25.640
 zu den einzelnen Inhaltselementen kommt

01:38:25.640 --> 01:38:26.720
 beziehungsweise zum Diff

01:38:26.720 --> 01:38:27.820
 und da ist die Frage,

01:38:27.820 --> 01:38:28.480
 die gestellt wird,

01:38:28.480 --> 01:38:29.360
 die zur Section führt,

01:38:29.360 --> 01:38:31.220
 is it logical to add a heading?

01:38:31.220 --> 01:38:33.520
 Und dann landet man bei der Section,

01:38:33.520 --> 01:38:34.320
 also wenn das,

01:38:34.320 --> 01:38:37.240
 wenn das irgendwie das Ding ist,

01:38:37.240 --> 01:38:38.740
 dann lande ich bei der Section.

01:38:39.980 --> 01:38:41.900
 Wenn ich aber schon an Artikel vorbei bin,

01:38:41.900 --> 01:38:42.680
 wenn ich Artikel,

01:38:42.680 --> 01:38:44.340
 weil wenn ich Artikel schon,

01:38:44.340 --> 01:38:44.820
 ja genau,

01:38:44.820 --> 01:38:45.940
 das kommt erst nach Artikel.

01:38:45.940 --> 01:38:47.100
 Ja.

01:38:47.100 --> 01:38:49.500
 Und ich glaube auch,

01:38:49.500 --> 01:38:50.300
 es wahrscheinlich,

01:38:50.300 --> 01:38:51.740
 bitte in die Kommentare schreiben,

01:38:51.740 --> 01:38:53.400
 falls es da irgendwie was gibt,

01:38:53.400 --> 01:38:54.900
 was, ja,

01:38:54.900 --> 01:38:55.620
 eine Quelle,

01:38:55.620 --> 01:38:56.520
 die anderer Meinung ist,

01:38:56.520 --> 01:38:57.760
 aber ich glaube,

01:38:57.760 --> 01:38:58.600
 es ist vollkommen egal,

01:38:58.600 --> 01:39:00.020
 ob du die Diffs außenrum packst

01:39:00.020 --> 01:39:00.640
 oder innen rein,

01:39:00.640 --> 01:39:02.800
 weil die quasi ja keine Bedeutung haben.

01:39:02.800 --> 01:39:05.480
 Diff ist ein Element,

01:39:05.480 --> 01:39:07.060
 über das wir heute übrigens nicht sprechen.

01:39:07.060 --> 01:39:07.860
 Genau.

01:39:09.460 --> 01:39:10.520
 Aber das ist nur a side.

01:39:10.520 --> 01:39:11.260
 Das, was jetzt gerade gehört.

01:39:11.260 --> 01:39:12.400
 Also, genau,

01:39:12.400 --> 01:39:13.480
 aber das ist nur a side

01:39:13.480 --> 01:39:15.460
 und falls wir heute Diff gesagt haben,

01:39:15.460 --> 01:39:16.300
 das hast du nicht gehört,

01:39:16.300 --> 01:39:17.360
 du bist jetzt geblitzt.

01:39:17.360 --> 01:39:19.460
 So, was war?

01:39:19.460 --> 01:39:20.200
 Genau.

01:39:20.200 --> 01:39:20.600
 Also,

01:39:20.600 --> 01:39:21.820
 das genau,

01:39:21.820 --> 01:39:22.860
 da wäre noch der Punkt,

01:39:22.860 --> 01:39:24.420
 da hast du eigentlich auch gerade schon gesagt,

01:39:24.420 --> 01:39:27.600
 sollte möglichst eine H1 bis H6 enthalten,

01:39:27.600 --> 01:39:30.640
 in normalen Seiten zumindest.

01:39:30.640 --> 01:39:31.700
 Das stand auch in dem Artikel.

01:39:31.700 --> 01:39:32.740
 Das einzige,

01:39:32.740 --> 01:39:33.580
 wo man sich vorstellen könnte,

01:39:33.580 --> 01:39:35.380
 eine Section ohne H1,

01:39:35.380 --> 01:39:36.340
 wo das Sinn macht,

01:39:36.340 --> 01:39:36.540
 ist,

01:39:36.540 --> 01:39:38.780
 wenn es halt keine klassische Content-Seite ist,

01:39:38.900 --> 01:39:40.140
 sondern zum Beispiel eher eine Web-App

01:39:40.140 --> 01:39:42.780
 und da habe ich irgendwie eine Leiste

01:39:42.780 --> 01:39:43.920
 einfach nur mit Buttons

01:39:43.920 --> 01:39:45.020
 oder so,

01:39:45.020 --> 01:39:46.480
 die eine Subnavigation ist.

01:39:46.480 --> 01:39:47.380
 Da kann dann zum Beispiel auch wieder

01:39:47.380 --> 01:39:48.580
 nav außenrum sein,

01:39:48.580 --> 01:39:49.700
 aber ich möchte das wirklich auch

01:39:49.700 --> 01:39:51.460
 als eigene Section eben nochmal

01:39:51.460 --> 01:39:53.060
 konzipieren.

01:39:53.060 --> 01:39:54.960
 Da könnte dann die Section drumrum sein

01:39:54.960 --> 01:39:55.980
 und muss nicht zwingend nochmal

01:39:55.980 --> 01:39:57.000
 irgendwie eine Überschrift haben.

01:39:57.640 --> 01:39:58.240
 Ich habe noch ein Beispiel,

01:39:58.240 --> 01:39:59.560
 wo ich es eingesetzt habe,

01:39:59.560 --> 01:40:02.280
 jetzt gerade in einem aktuellen Projekt,

01:40:02.280 --> 01:40:04.260
 und zwar immer dann,

01:40:04.260 --> 01:40:06.080
 wenn so,

01:40:06.080 --> 01:40:09.000
 ich nenne es mal Alert-Elemente kommen,

01:40:09.000 --> 01:40:10.400
 jetzt nicht JavaScript-Alerts,

01:40:10.400 --> 01:40:12.500
 sondern so Hinweismeldungen,

01:40:12.500 --> 01:40:13.820
 die so farblich hinterlegt sind.

01:40:13.820 --> 01:40:14.740
 Kennt man ja aus Bootstub

01:40:14.740 --> 01:40:16.060
 oder diversen anderen Frameworks.

01:40:16.060 --> 01:40:16.680
 So,

01:40:16.680 --> 01:40:19.500
 hier liegt gerade folgendes Problem vor,

01:40:19.500 --> 01:40:19.860
 da übrigens,

01:40:19.860 --> 01:40:20.120
 ja,

01:40:20.120 --> 01:40:21.220
 da hast du gerade erfolgreich

01:40:21.220 --> 01:40:22.640
 dies und das gemacht.

01:40:22.640 --> 01:40:24.440
 Dem kann man,

01:40:24.440 --> 01:40:25.700
 dem sollte man auch noch

01:40:25.700 --> 01:40:27.700
 die Role Alert geben,

01:40:27.700 --> 01:40:29.240
 noch zusätzlich.

01:40:29.240 --> 01:40:30.720
 Aber dafür habe ich,

01:40:30.720 --> 01:40:32.200
 genau dafür habe ich Section verwendet,

01:40:32.200 --> 01:40:33.380
 weil das ist jetzt kein Artikel,

01:40:33.380 --> 01:40:33.940
 das ist nichts,

01:40:33.940 --> 01:40:35.320
 kein eigenständiger Inhalt

01:40:35.320 --> 01:40:36.340
 irgendwie so für sich.

01:40:36.340 --> 01:40:38.600
 Aber es ist schon halt,

01:40:38.600 --> 01:40:39.500
 es ist schon,

01:40:39.500 --> 01:40:41.060
 einfach da jetzt ein Diff reinklatschen,

01:40:41.060 --> 01:40:42.880
 während ich noch in einem Kontext bin,

01:40:42.880 --> 01:40:44.060
 macht auch keinen Sinn.

01:40:44.060 --> 01:40:45.080
 Aber ja,

01:40:45.080 --> 01:40:47.020
 das ist alles gut.

01:40:47.020 --> 01:40:47.900
 Genau,

01:40:47.900 --> 01:40:49.620
 dafür habe ich Section dann verwendet,

01:40:49.620 --> 01:40:51.200
 fand ich irgendwie ein guter Anwender.

01:40:51.220 --> 01:40:52.040
 Anwenderungsfall an der Stelle.

01:40:52.040 --> 01:40:53.580
 Gut,

01:40:53.580 --> 01:40:54.200
 dann sind wir durch.

01:40:54.200 --> 01:40:55.340
 Jetzt haben wir noch

01:40:55.340 --> 01:40:56.240
 ein paar Anmerkungen.

01:40:56.240 --> 01:40:58.380
 Jetzt kommen noch ein paar Anmerkungen,

01:40:58.380 --> 01:40:58.620
 genau,

01:40:58.620 --> 01:41:00.040
 weil ich vorhin schon angesprochen habe,

01:41:00.040 --> 01:41:01.540
 ich habe vorhin,

01:41:01.540 --> 01:41:02.000
 weil ich,

01:41:02.000 --> 01:41:03.560
 weil ich es jetzt einfach wissen wollte,

01:41:03.560 --> 01:41:04.920
 diese ganzen Elemente mal

01:41:04.920 --> 01:41:05.320
 in eine,

01:41:05.320 --> 01:41:07.240
 in einen Code-Pen gepackt,

01:41:07.240 --> 01:41:08.380
 weil ich wissen wollte,

01:41:08.380 --> 01:41:10.480
 was sagt denn der Screenreader dazu,

01:41:10.480 --> 01:41:11.800
 der Screenreader-Term,

01:41:11.800 --> 01:41:12.000
 ja,

01:41:12.000 --> 01:41:13.400
 also ich habe halt nur Voice-Over

01:41:13.400 --> 01:41:14.820
 auf dem Mac verwendet,

01:41:14.820 --> 01:41:16.440
 um rauszufinden,

01:41:16.440 --> 01:41:18.440
 ob diese ganzen Sectioning-Elemente,

01:41:18.440 --> 01:41:19.780
 ob die irgendwie angekündigt werden,

01:41:19.780 --> 01:41:20.780
 wenn ich sie vom Screenreader vorlese,

01:41:21.220 --> 01:41:23.440
 und in meinem Fall,

01:41:23.440 --> 01:41:25.180
 also ich habe da jetzt hier drin,

01:41:25.180 --> 01:41:25.560
 Address,

01:41:25.560 --> 01:41:25.940
 Article,

01:41:25.940 --> 01:41:26.240
 Site,

01:41:26.240 --> 01:41:26.680
 also alle,

01:41:26.680 --> 01:41:28.320
 die wir jetzt heute besprochen haben

01:41:28.320 --> 01:41:29.940
 und keins davon

01:41:29.940 --> 01:41:31.580
 wurde angekündigt mit,

01:41:31.580 --> 01:41:32.720
 das ist jetzt dies.

01:41:32.720 --> 01:41:34.800
 Vielleicht habe ich auch den falschen Modus,

01:41:34.800 --> 01:41:36.660
 ich bin jetzt kein Pro-Screenreader-Nutzer,

01:41:36.660 --> 01:41:38.220
 ich verwende den halt nur zum Testen.

01:41:40.760 --> 01:41:45.140
 Man kann natürlich zu den einzelnen Headlines springen und so,

01:41:45.140 --> 01:41:45.840
 das geht alles,

01:41:45.840 --> 01:41:46.480
 alles fein,

01:41:46.480 --> 01:41:49.420
 aber ich wurde jetzt dabei danach nicht gesagt,

01:41:49.420 --> 01:41:50.460
 das ist jetzt eine Navigation,

01:41:50.460 --> 01:41:52.180
 sondern das hätte ich jetzt mit einem ARIA-Label

01:41:52.180 --> 01:41:53.220
 irgendwie hinterlegen müssen.

01:41:53.220 --> 01:41:54.740
 Allerdings ist das nur bei,

01:41:54.740 --> 01:41:57.840
 bei Voice-Over der Fall.

01:41:57.840 --> 01:41:59.160
 Ich habe da nämlich mal kurz gegoogelt,

01:41:59.160 --> 01:41:59.440
 weil mich,

01:41:59.440 --> 01:42:00.860
 ich fand es ein bisschen unbefriedigend,

01:42:00.940 --> 01:42:01.040
 gedacht,

01:42:01.040 --> 01:42:02.080
 das kann doch nicht sein,

01:42:02.080 --> 01:42:03.700
 dass das irgendwie,

01:42:03.700 --> 01:42:05.820
 dass da irgendwie gar nichts angekündigt wird.

01:42:05.820 --> 01:42:08.500
 Und ich habe dann gesehen,

01:42:08.500 --> 01:42:09.320
 es gibt die,

01:42:09.320 --> 01:42:10.680
 die Seite von,

01:42:10.680 --> 01:42:12.580
 ah,

01:42:12.580 --> 01:42:13.260
 wie heißt der denn?

01:42:13.260 --> 01:42:15.520
 Fällt jetzt gerade der Name nicht ein?

01:42:15.520 --> 01:42:17.700
 Barrierefreies-Webdesign.de

01:42:17.700 --> 01:42:19.920
 Ich glaube,

01:42:19.920 --> 01:42:22.280
 das ist der Jan Helbusch.

01:42:22.280 --> 01:42:23.160
 Gott,

01:42:23.160 --> 01:42:24.400
 wenn ich jetzt was falsch gesagt habe,

01:42:24.400 --> 01:42:25.740
 ich muss nochmal kurz nachgucken.

01:42:25.740 --> 01:42:27.680
 Genau,

01:42:27.680 --> 01:42:28.400
 Jan Helbusch.

01:42:28.400 --> 01:42:30.880
 Und der hat eine Liste,

01:42:30.940 --> 01:42:32.380
 mit welche,

01:42:32.380 --> 01:42:33.600
 ähm,

01:42:33.600 --> 01:42:35.320
 welche Regions,

01:42:35.320 --> 01:42:36.540
 du hast das vorhin schon angesprochen,

01:42:36.540 --> 01:42:36.840
 denn,

01:42:36.840 --> 01:42:37.940
 was die Screenreader mit,

01:42:37.940 --> 01:42:39.080
 mit den Regions machen.

01:42:39.080 --> 01:42:40.460
 Und da sind,

01:42:40.460 --> 01:42:40.680
 äh,

01:42:40.680 --> 01:42:41.280
 Screenreader,

01:42:41.280 --> 01:42:43.120
 Cobra kannte ich zum Beispiel gar nicht.

01:42:43.120 --> 01:42:43.440
 Jaws,

01:42:43.440 --> 01:42:43.800
 Cobra,

01:42:43.800 --> 01:42:44.200
 Winnow,

01:42:44.200 --> 01:42:44.620
 Eyes,

01:42:44.620 --> 01:42:45.160
 NVDA,

01:42:45.160 --> 01:42:46.300
 Voice-Over und,

01:42:46.300 --> 01:42:46.620
 äh,

01:42:46.620 --> 01:42:46.940
 Chrome,

01:42:46.940 --> 01:42:47.540
 Vox,

01:42:47.540 --> 01:42:49.260
 noch nie verwendet.

01:42:49.260 --> 01:42:49.580
 Ich glaube,

01:42:49.580 --> 01:42:50.380
 das ist ein Screenreader,

01:42:50.380 --> 01:42:51.820
 der sich in Chrome mit,

01:42:51.820 --> 01:42:52.140
 also,

01:42:52.140 --> 01:42:54.720
 mit reingebaut ist.

01:42:54.720 --> 01:42:56.240
 Äh,

01:42:56.240 --> 01:42:57.440
 fertig mit drin,

01:42:57.440 --> 01:42:58.240
 ich weiß gar nicht genau,

01:42:58.240 --> 01:42:58.560
 noch nie,

01:42:58.560 --> 01:42:59.260
 noch nie verwendet.

01:42:59.260 --> 01:43:00.800
 Und es gibt durchaus,

01:43:00.800 --> 01:43:01.460
 Screenreader,

01:43:01.460 --> 01:43:03.180
 ähm,

01:43:03.180 --> 01:43:06.040
 die einem zumindest diese Regions auflisten.

01:43:06.040 --> 01:43:07.480
 Man kann sich dann sagen lassen,

01:43:07.480 --> 01:43:09.280
 was gibt's denn auf der Seite.

01:43:09.280 --> 01:43:11.100
 Das macht Voice-Over jetzt nicht,

01:43:11.100 --> 01:43:13.760
 aber Jaws zum Beispiel macht das,

01:43:13.760 --> 01:43:14.740
 ähm,

01:43:14.740 --> 01:43:16.160
 und NVDA kann das auch.

01:43:16.260 --> 01:43:23.600
 also Jaws kann es mit Steuerung R und NVDA macht das mit der NVDA-Taste plus F7 und dann kriegt man die aufgelistet.

01:43:23.600 --> 01:43:25.320
 Das finde ich schon mal eine interessante Information.

01:43:25.320 --> 01:43:35.180
 Da kriegst du gesagt, ja, du hast jetzt hier, also, das stelle ich mir jetzt so vor, ich habe dir das jetzt nicht angeguckt, ja, du hast hier drei Navigationen, vielleicht werden da sogar die Labels noch mit reingenommen, das weiß ich jetzt nicht, äh, nicht ganz genau.

01:43:35.680 --> 01:43:40.840
 Aber diese Übersicht haben wir auf jeden Fall noch, ähm, das könnt ihr, packen wir auf jeden Fall noch in die Shownotes, da könnt ihr auch mal reingucken.

01:43:40.840 --> 01:43:49.540
 Ähm, ich würde da gerne zumindest NVDA nochmal ausprobieren. Interessanterweise, dieser Artikel ist veröffentlicht worden 2012 und zuletzt bearbeitet 2018.

01:43:50.040 --> 01:43:55.340
 Also, der ist auch ein ständiger, also, wenn es jetzt auch schon wieder fünf Jahre her, oh Gott, 2020.

01:43:55.340 --> 01:43:57.180
 Ja, aber trotzdem, ja.

01:43:57.180 --> 01:44:04.520
 Es wird Zeit, sich, ähm, schon mal einen Platz auf dem Friedhof zu sichern.

01:44:04.520 --> 01:44:08.200
 Okay.

01:44:08.200 --> 01:44:10.140
 Ja, das war jetzt.

01:44:10.140 --> 01:44:17.320
 Ja, ähm, Moment, ich merke da gerade aber, dass da Sachen sind, die ich vergessen habe, irgendwo anders hinzuschieben.

01:44:17.320 --> 01:44:19.720
 Ähm, ja.

01:44:20.040 --> 01:44:26.580
 Die letzten zwei gehören da nämlich nicht mehr dazu, die hätten nämlich zu was anderem gehört und ich hab sie aus dem Gedächtnis noch gesagt wollen.

01:44:26.580 --> 01:44:35.940
 Das eine gehörte nämlich zu den Überschriften und das, äh, das untere, ihr wisst jetzt nicht wovon ich spreche, der Konstantin weiß, was ich meine, weil es in unserem Trello steht.

01:44:35.940 --> 01:44:40.740
 Ähm, und das untere gehörte zu NAV, aber ich hab's beides gesagt aus dem Kopf.

01:44:40.740 --> 01:44:48.100
 Das ist immer ein bisschen blöd, das wünschte ich mir bei Trello, dass man in so einer Checkliste mittendrin irgendwo was hinzufügen kann.

01:44:48.100 --> 01:44:49.980
 Das hab ich mir heute sehr viel gewünscht.

01:44:49.980 --> 01:44:52.000
 Mach mal hier drunter noch was Neues dazu.

01:44:52.000 --> 01:44:52.520
 Naja.

01:44:54.640 --> 01:44:57.060
 Okay, Mensch, dann sind wir jetzt durch mit dem Thema.

01:44:57.060 --> 01:44:59.600
 So, und jetzt gibt's noch, jetzt machen wir noch Shorts.

01:45:01.180 --> 01:45:03.180
 Nein, jetzt kommt ...

01:45:03.180 --> 01:45:04.920
 Das Geilteil.

01:45:04.920 --> 01:45:08.080
 Geilteil.

01:45:08.080 --> 01:45:10.300
 Ah, das hat Sinn gemacht.

01:45:10.300 --> 01:45:13.540
 Das erste Geilteil ist heute die Grammatik.

01:45:13.540 --> 01:45:15.780
 Die Grammatik, die endlich mal gestimmt hat.

01:45:15.780 --> 01:45:16.520
 Sehr, sehr gut.

01:45:16.520 --> 01:45:20.280
 Ja, ähm, ich hab gesehen, du hast auch noch was reingeschoben.

01:45:20.280 --> 01:45:21.720
 Ja, gerade ganz spontan.

01:45:21.720 --> 01:45:22.720
 Mach's mal zuerst.

01:45:22.720 --> 01:45:28.300
 Ähm, ich, und zwar ist das einfach ein, ein, äh, YouTube-Profil, ein YouTuber.

01:45:28.300 --> 01:45:31.300
 Äh, Kevin Powell heißt der.

01:45:31.300 --> 01:45:33.680
 Oh, jetzt redet er hier bei mir schon, weil ich drauf den Link geklickt hab, los.

01:45:33.680 --> 01:45:39.600
 Ähm, der macht, äh, hauptsächlich, oder eigentlich, glaub ich, ausschließlich, ah ne, HTML macht er auch noch so ein bisschen.

01:45:39.980 --> 01:45:42.360
 Aber, äh, CSS-Tutorials.

01:45:42.360 --> 01:45:45.180
 Und zwar, ähm, echt ganz, ganz coole Sachen.

01:45:45.180 --> 01:45:52.240
 Schon so für, für Anfänger, aber auch mit fortgeschrittenen Techniken, die er halt dann am Beispiel erläutert.

01:45:52.240 --> 01:46:00.660
 Also so CSS-Masken und sowas, äh, zum Beispiel in einem, in einem Video zu, zu verschiedenen Sections, ähm, wie man, wie man die schöner darstellen kann.

01:46:00.660 --> 01:46:05.000
 Da, da, da kommen auch zwei Demos her, die ich im, im Stream gezeigt hab, im letzten.

01:46:05.540 --> 01:46:10.540
 Äh, einmal so eine, eine schräge, äh, Section, ähm, mit so, mit so schrägen Linien.

01:46:10.540 --> 01:46:15.960
 Und da hatte ich was im Zusammenhang mit, mit Z-Index, äh, und, und, äh, Isolation erzählt.

01:46:15.960 --> 01:46:17.780
 Das werde ich mir hier noch als Property vorstellen.

01:46:17.780 --> 01:46:25.620
 Oder irgendwie so, so gezackte Ecken an einer, an einer Section, einfach, um da so ein bisschen Augenmerk draufzulegen, die er dann mit, mit Clip-Path gemacht hat.

01:46:25.620 --> 01:46:29.340
 Und, ähm, er hat dann einfach so, so Elemente, die er vorstellt.

01:46:29.340 --> 01:46:33.300
 Oder, also letztens hat er, ähm, also ich bin bei meinem Bruder da draufgekommen, der hat mir den geschickt.

01:46:33.300 --> 01:46:38.100
 Und da hab ich gesagt, ah, perfekt, das eignet sich als, als Geilteil, dass mal wieder was mit unserem Thema auch zu tun hat.

01:46:38.100 --> 01:46:51.760
 Ähm, und da war, zum Beispiel, er hat versucht, diese, diese, äh, Navigation mit diesen Vorschaubildern bei Netflix, wo man so rechts und links auch durchscrollen kann, die mit nur CSS nachzubauen.

01:46:52.160 --> 01:46:58.620
 Und da kam dann auch das Target-Element zum Einsatz, vielleicht suche ich da auch den Link noch raus, ähm, direkt zu diesem Video, weil das echt ganz cool war.

01:46:58.960 --> 01:47:08.880
 Wo dann so auf verschiedene Probleme gestoßen ist und dann, ich glaub, er hat dann auch den Has-Selector verwendet, äh, um dann irgendwie unter bestimmten, äh, Umständen dann trotzdem Sachen markieren zu können.

01:47:08.880 --> 01:47:16.160
 Ähm, weil da ist nämlich oben so, sind einfach so ein paar Striche, je nachdem, wie viele Seiten es gibt in dieser, in dieser Blätter-Ebene.

01:47:16.700 --> 01:47:20.640
 Ähm, und die aktive Seite wird quasi dann, da ist der Strich dann weiß statt hellgrau.

01:47:20.640 --> 01:47:27.620
 Und um das dann zu machen, da, wenn man durchklickt, dass das dann richtig aussieht, ähm, ja, also war ganz interessant, diesen Prozess mitzuverfolgen.

01:47:27.620 --> 01:47:34.880
 Und, ähm, man lernt da echt auch noch was dabei oder kommt irgendwie, bringt einen so auf Ideen, so, ah, stimmt, so kann man das ja machen.

01:47:34.880 --> 01:47:42.760
 Und, ähm, ich finde, er erklärt's wirklich gut, also so, dass man auch als, als Anfänger oder als jemand, der mit CSS vielleicht nicht so kann, äh, dann doch eigentlich ganz gut mitkommt.

01:47:43.440 --> 01:48:01.520
 Wie passend, wie passend, da können wir nämlich noch auf Feedback eingehen, was wir bekommen haben, wo ich auch drauf geantwortet hab, auf Mastodon nämlich, äh, und zwar, äh, Ragnar at Norden.Social hat uns, ähm, äh, war du vorgestern gefragt, mit nem Video, äh, zu Kevin Paul.

01:48:01.520 --> 01:48:01.980
 Ach was.

01:48:01.980 --> 01:48:13.420
 Interessanterweise, äh, was sagt ihr aus Sicht der Barrierefreiheit zu diesem Ansatz? Und in diesem Video, das war How to Write Semantics CSS, das ist ein komischer Titel, weil, äh, aber was er damit meint,

01:48:13.440 --> 01:48:26.260
 Und ich hab's mir dann angeguckt und hab dann geantwortet mit, äh, so machen, das war quasi meine kurze Antwort, ähm, war genau unter anderem dieses Beispiel, was wir heute hatten mit, ähm, mit dem Attributselektor für Current Page.

01:48:27.180 --> 01:48:38.640
 Genau das, ähm, ist da, ähm, hat da einen Hauptbestandteil, also dass man quasi CSS-Styling nach, äh, ja, nach, nach semantischen Attributselektoren, ähm, macht.

01:48:38.640 --> 01:48:38.960
 Ach.

01:48:39.760 --> 01:48:41.780
 Genau das, äh, hat er in einem Video.

01:48:41.780 --> 01:48:42.760
 Ich weiß nicht, soll man das Video...

01:48:42.760 --> 01:48:48.720
 Mensch, das, äh, mir, was, wie, wie rund kann's eigentlich werden, oder? Also das passt ja genau zu, was wir hier so heute haben.

01:48:48.720 --> 01:48:52.820
 Ja, ich, äh, pack das mal noch, genau dieses Video, das kommt, kommt noch in die Shownotes, genau dazu wurden wir gefragt.

01:48:52.820 --> 01:49:00.140
 Ich hab dann mir das ganz kurz angeguckt und hab gesagt, ja, das ist, äh, das ist alles so, das ist gut, das kann ich so abnicken, das ist, ähm, das ist, ähm, der weiß schon, wovon er da spricht.

01:49:00.140 --> 01:49:08.040
 Ähm, so, und dann, äh, vielleicht noch, und das ist mein Geilteil jetzt, weil das gerade auch über Masterdown reinkam.

01:49:09.760 --> 01:49:22.060
 Vor einer halben Stunde oder so, oder vor, vor einer Dreiviertelstunde, ähm, guck mal hier, Link, nächste Woche geht eine Ära zu Ende und der Link zeigt auf, ich öffne es nochmal kurz,

01:49:22.060 --> 01:49:33.240
 IE11 wurde am 15. Juni 2022 eingestellt, ähm, IE11 wird nach dem 14. Februar, was wir vorhin noch von hatten, 14. Februar 2023, ihr Valentinstag,

01:49:33.240 --> 01:49:35.080
 Das ist, ich würd sagen, das ist ein schönes Valentinstagsgeschenk.

01:49:35.080 --> 01:49:53.100
 Nicht mehr verflügbar sein. Sie können IE-Seiten mit dem IE-Modus in Edge aufrufen, das ist natürlich noch so ein bisschen, äh, es gibt noch diese alten Modi, die leben noch ein bisschen weiter, aber na gut, äh, ist jetzt aber dann wirklich, also man kann ihn dann nicht mehr runterladen von, äh, Microsoft direkt.

01:49:53.560 --> 01:50:04.580
 Da ist dann, zumindest das wird, also die sind ja normalerweise immer relativ langsam mit, äh, wir, wir verbieten irgendwelche Sachen, das gibt's jetzt irgendwie nicht mehr, aber den, da kann man dann nicht, nicht mal mehr runterladen bei Microsoft.

01:50:04.580 --> 01:50:05.280
 Zeit wird's.

01:50:06.140 --> 01:50:10.380
 Ja, cool, auch das nochmal schöne Metareferenz hier auf bereits Gesagtes.

01:50:10.380 --> 01:50:26.180
 Also, äh, an der Stelle vielen Dank an lidodork at hessen.social, der uns den Hinweis während der Sendung, äh, während wir aufnehmen hier geschickt hat und ich natürlich, wir haben's ja schon geschrieben beim, in der folgenden Beschreibung zur letzten Sendung, wir hängen halt auf Social Media rum.

01:50:26.180 --> 01:50:36.120
 Also hauptsächlich du, muss man sagen, auf den Social Media kommst, deswegen ist mir das zum Beispiel durch den Lappen gegangen mit dem Video, aber ich hab auch gerade jetzt, als ich's mir angeschaut hab, äh,

01:50:36.120 --> 01:50:44.660
 gesehen, so hohe Notifications, ähm, und du hattest, äh, geschrieben, so Recording, bevor, vor der Sendung, und dann hat, äh, das war schon, als wir aufgenommen haben.

01:50:44.660 --> 01:50:50.540
 Und dann hat, äh, hat jemand geschrieben, so, oh, äh, Großkonstantin hat auf sein Telefon gedrückt.

01:50:50.540 --> 01:50:52.260
 Ja, genau.

01:50:52.260 --> 01:50:55.400
 Ja, hab ich tatsächlich vorhin gemacht, damit mein On-Air-Licht angeht.

01:50:55.400 --> 01:50:57.640
 Ja.

01:50:57.640 --> 01:50:59.120
 Gut.

01:50:59.120 --> 01:51:01.940
 Haben wir das, hatten wir das schon?

01:51:01.940 --> 01:51:05.820
 Hab ich, glaube ich, hier, ja, ja, hab ich in der Retro, ähm, auch schon, schon erzählt, ja.

01:51:05.920 --> 01:51:06.220
 Meine Basterei.

01:51:06.220 --> 01:51:08.060
 Okay, dann haben wir's, haben wir's, haben wir's geschafft.

01:51:08.060 --> 01:51:08.400
 Prima.

01:51:08.400 --> 01:51:10.040
 Dann haben wir's, ihr habt's auch geschafft.

01:51:10.040 --> 01:51:11.120
 Dann kommt jetzt.

01:51:11.120 --> 01:51:15.240
 Das Ende.

01:51:15.240 --> 01:51:28.880
 Ich war, ich war, ich war, ich war heute wieder, ich war heute wieder, ich war heute wieder schlecht, ähm, im, im, äh, euch Werbung unterjubeln, deswegen kommt die jetzt nochmal.

01:51:29.140 --> 01:51:32.140
 Also, es tut mir leid, jetzt zum Schluss müsst ihr nochmal kurz dran glauben.

01:51:32.140 --> 01:51:37.340
 Hey, hey du, schön, dass du da bist.

01:51:37.340 --> 01:51:39.760
 Na, öfter hier?

01:51:40.840 --> 01:51:47.300
 Dir gefällt, was du hörst und du magst es am liebsten werbefrei und unabhängig?

01:51:47.300 --> 01:51:58.080
 Dann freuen wir uns sehr über ein paar Euro in unserem digitalen Strumpfband unter www.iv.de/spende.

01:51:59.440 --> 01:52:07.540
 Auf www.iv.de/unterstützen findest du noch circa 69 weitere Wege, uns zu supporten.

01:52:08.240 --> 01:52:27.060
 Ich bin einfach sehr schlecht darin, das irgendwo einzuflechten, ich vergesse das immer, wir müssen es in die, in die, in die Notizen, ich glaube, wir müssen es ins Template mal, in den, in den Werbeblock irgendwo, vor, vor das Thema, ich glaube, vor das Thema, dieser Kuss am Ende, ich glaube, vor das Thema.

01:52:27.060 --> 01:52:28.060
 Also, ich muss sagen.

01:52:28.060 --> 01:52:29.060
 Unangenehm.

01:52:29.060 --> 01:52:30.060
 Was?

01:52:30.060 --> 01:52:31.060
 Was?

01:52:31.060 --> 01:52:32.060
 Was?

01:52:32.060 --> 01:52:34.060
 Nee, nee, ist schon, ist schon recht.

01:52:34.060 --> 01:52:38.060
 Also, der Kuss, das ist ja wohl, das ist ja wohl das Beste.

01:52:38.060 --> 01:52:41.060
 Schade, dass wir von diesen Soundbites nichts Positives haben, gell?

01:52:41.060 --> 01:52:42.060
 Weiß ich nicht, Digga.

01:52:42.060 --> 01:52:47.060
 Ach.

01:52:47.060 --> 01:52:51.060
 Wir haben uns heute sehr zurückgehalten, jetzt zum Ende, da können wir so, da hauen wir wieder was raus.

01:52:51.060 --> 01:52:54.060
 Jetzt, wo alle schon abgeschaltet sind, jetzt können wir noch mal richtig Vollgas geben.

01:52:54.060 --> 01:52:57.060
 So.

01:52:57.060 --> 01:53:00.060
 Äh, ja.

01:53:00.060 --> 01:53:01.060
 Ja, oder so.

01:53:01.060 --> 01:53:06.060
 Äh, warte, ich, ich muss, ja, das muss ich gleich im Template noch ändern, dass wir die Werbung irgendwo zwischen reinschalten.

01:53:06.060 --> 01:53:09.060
 Bei Ende haben wir stehen Werbung, aber das ist nicht unser.

01:53:09.060 --> 01:53:10.060
 Ja, aber das ist, das ist zu spät.

01:53:10.060 --> 01:53:11.060
 Unser Schlock, ja.

01:53:11.060 --> 01:53:13.060
 Das ist zu spät, wir müssen irgendwie.

01:53:13.060 --> 01:53:15.060
 Ich mach das jetzt gleich.

01:53:15.060 --> 01:53:16.060
 Ich mach das jetzt gleich.

01:53:16.060 --> 01:53:18.060
 Dass wir das nicht vergessen, nächstes Mal.

01:53:18.060 --> 01:53:19.060
 Denn es gilt.

01:53:19.060 --> 01:53:23.060
 Wenn euch der Podcast gefällt, dann spendet Ken.

01:53:23.060 --> 01:53:24.060
 Ja.

01:53:24.060 --> 01:53:28.060
 Hört auf Konstantins Tochter, sie hat recht.

01:53:28.060 --> 01:53:29.060
 Die weiß Bescheid, ja.

01:53:29.060 --> 01:53:31.060
 Die sagt oft richtige Dinge.

01:53:31.060 --> 01:53:32.060
 Immer.

01:53:32.060 --> 01:53:35.060
 Also, sag ich jetzt einfach mal.

01:53:35.060 --> 01:53:36.060
 Ja.

01:53:36.060 --> 01:53:37.060
 Ja.

01:53:37.060 --> 01:53:38.060
 Du weißt das besser.

01:53:38.060 --> 01:53:40.060
 Weiß ich nicht, Digga.

01:53:40.060 --> 01:53:45.060
 Es ist einfach zu putzig.

01:53:45.060 --> 01:53:46.060
 Okay.

01:53:46.060 --> 01:53:47.060
 Gut.

01:53:47.060 --> 01:53:51.060
 Ja, dann sind wir jetzt, ja, haben wir gar nichts mehr groß jetzt eigentlich zu sagen, ne?

01:53:51.060 --> 01:53:52.060
 Außer.

01:53:52.060 --> 01:53:53.060
 Bis bald.

01:53:53.060 --> 01:53:54.060
 Bis bald.

01:53:54.060 --> 01:53:55.060
 Ja.

01:53:55.060 --> 01:53:56.060
 Genau.

01:53:56.060 --> 01:53:56.060
 Macht's gut.

01:53:56.060 --> 01:53:57.060
 Und dann hören wir uns in Bälle wieder.

01:53:57.060 --> 01:54:00.060
 Mal gucken, ob mit der Fortsetzung der HTML-Elemente oder was sonst.

01:54:00.060 --> 01:54:02.060
 Vielleicht gibt's auch mal was anderes zwischenrein.

01:54:02.060 --> 01:54:02.060
 Genau.

01:54:02.060 --> 01:54:06.060
 Es ist kein Versprechen, dass wir das jetzt durchziehen, bis wir fertig sind.

01:54:06.060 --> 01:54:07.060
 Das dauert noch ein bisschen.

01:54:07.060 --> 01:54:09.060
 Also, da haben wir noch ein paar Folgen vor uns.

01:54:09.060 --> 01:54:10.060
 Ähm.

01:54:10.060 --> 01:54:12.060
 Ja, wir, wir, wir gucken mal, was als nächstes kommt.

01:54:12.060 --> 01:54:13.060
 Ja.

01:54:13.060 --> 01:54:14.060
 Würde ich sagen.

01:54:14.060 --> 01:54:16.060
 Also dann, bis zum nächsten Mal.

01:54:16.060 --> 01:54:17.060
 Macht's gut.

01:54:17.060 --> 01:54:18.060
 Ciao.

01:54:18.060 --> 01:54:20.060
 Tschüss.