WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: HTML VON A BIS Z-Z X: SVG & Math
Publishing Date: 2025-07-07T21:11:41+02:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/html-von-a-bis-z-z-x-svg-math/

00:00:00.000 --> 00:00:07.000
Wo wir sind ist vorne, Folge 74. Heute geht's um Mathematik, Mathematik, überall Mathematik und SVG.

00:00:30.000 --> 00:00:41.000
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Glanz und JavaScript-Jongleurin Sarah Groß.

00:00:56.000 --> 00:01:06.000
Hallihallo. Hallo Moritz. Hallöchen. So. Weiter geht's. Ja, wir sind am Start. Ja, laut, ganz nach Plan, wie wir es uns vorgenommen hatten. Sehr schön.

00:01:06.000 --> 00:01:09.000
Ja, ihr kennt nur unseren Plan nicht, aber unser Plan ist …

00:01:09.000 --> 00:01:20.000
Stimmt. Ich war zwischendrin halt zwei Wochen im Urlaub, da war nix mit Podcast, aber wir haben uns den Freitag jetzt hier, also den Freitagsauf, notiert und wir sind auch tatsächlich am Aufnehmen, ohne dass irgendjemand was verschieben musste. Finde ich gut.

00:01:20.000 --> 00:01:25.000
Wahnsinn. Wir haben es bald geschafft, wir Schluris.

00:01:25.000 --> 00:01:34.000
Ja, ich habe heute gar nix zu trinken, ich habe sogar vergessen, mir noch irgendwie ein Wasser hinzustellen, also ich werde heute vertrocknen im Laufe der Sendung.

00:01:34.000 --> 00:01:49.000
Okay, gut, das ist ein guter Plan, dafür gibt es bei mir Verschiedenes, aber vor allem trinke ich heute mal wieder ein Gläschen Whisky von meinem Glenn Murray und ich habe auch schon was vorbereitet und hoffe, dass vielleicht man den Eiswürfel noch knacken hört, wenn ich jetzt was trinke.

00:01:49.000 --> 00:02:09.000
Ich hoffe das. Moment. Ne, er war schon zu lange im Glas. Er war schon zu lange im Glas. Macht nichts, also zum Hintergrund, es ist ein sehr, sehr großer, runder Eiswürfel, also der hat so fünf Zentimeter Durchmesser oder so und normalerweise, wenn er frisch rauskommt und man dann was drüber schüttet, dann knackt der so schön.

00:02:09.000 --> 00:02:16.000
Ja, in der letzten Folge hat es funktioniert, da hat man es gehört. Also, letzte Folge nachhören, nur für das Eiswürfelknacken.

00:02:16.000 --> 00:02:21.000
Der Rest war nicht so wichtig.

00:02:21.000 --> 00:02:24.000
Ja, sehr gut.

00:02:24.000 --> 00:02:28.000
Ja, dann müssen wir noch erklären, was das mit dem Intro auf sich hat.

00:02:28.000 --> 00:02:34.000
Ach so, ja stimmt, das wollten wir noch kurz, weiß nicht, ob man die Referenz verstanden hat, die Älteren unter euch werden sich erinnern.

00:02:34.000 --> 00:02:38.000
Wann war denn das? Steht da was dabei? Ist das das Original-Video?

00:02:38.000 --> 00:02:42.000
Das ist, glaube ich, das Original, das ist vor 14 Jahren, ja.

00:02:42.000 --> 00:02:46.000
Ja, Wahnsinn, 14 Jahre.

00:02:46.000 --> 00:02:54.000
Also das war das allererste Video, was aufgetaucht ist von Teddy, Ted LeBran.

00:02:54.000 --> 00:03:03.000
Und wir hatten es gerade schon kurz drüber, man wusste damals nicht, ist das echt? Ist das gespielt? Weil es einfach wirklich gut gemacht war.

00:03:03.000 --> 00:03:11.000
Ich finde heute bei Social Media ist es teilweise so viel schlechte Schauspielerei dabei und dann merkst du das einfach, dass das gespielt ist.

00:03:11.000 --> 00:03:16.000
Aber da war das wirklich so, haben die da echt jemanden gefunden, der so ist?

00:03:16.000 --> 00:03:20.000
Und inzwischen kennt man ihn und weiß, dass das eine seiner Rollen ist.

00:03:20.000 --> 00:03:28.000
Aber ich finde, das zeigt einfach auch, wie genial er ist und das macht, also in diese Rolle schlüpft und man es ihm einfach wirklich abnimmt.

00:03:28.000 --> 00:03:34.000
Wir verlinken es auch in den Shownotes. Wer es tatsächlich noch nicht kennt, der sollte es mal anschauen.

00:03:34.000 --> 00:03:39.000
Es ist sehr sehenswert, eine YouTube-Perle von vor 14 Jahren, die wir gerade rausgefunden haben.

00:03:39.000 --> 00:03:43.000
Verrückter. Ich habe heute viele Sachen rausgefunden bei der Vorbereitung.

00:03:43.000 --> 00:03:45.000
Können wir nachher noch darüber sprechen.

00:03:45.000 --> 00:03:53.000
Dann würde ich sagen, gehen wir jetzt zur Retro. Ich habe nämlich auch, was mein Setup angeht, so ein bisschen was rausgefunden.

00:03:53.000 --> 00:03:55.000
Na dann, Jingle ab.

00:03:55.000 --> 00:03:56.000
Jingle ab.

00:04:06.000 --> 00:04:12.000
Und zwar hatten die letzten Male ja immer so ein bisschen Probleme mit Aussetzern von meiner Seite aus.

00:04:12.000 --> 00:04:17.000
Und da hatte ich schon den Verdacht geäußert, dass das irgendwie mit meinem DNS-Setup zusammenhängen könnte.

00:04:17.000 --> 00:04:27.000
Weil ich ja dieses AdGuard unter Home Assistant OS auf einem Raspberry Pi laufen hatte als DNS hier im lokalen Netzwerk.

00:04:27.000 --> 00:04:30.000
Und natürlich dann sämtliche DNS-Anfragen darüber gelaufen sind.

00:04:30.000 --> 00:04:40.000
Und ich hatte schon den Eindruck, erstens, dass dadurch das Home Assistant nicht mehr so wirklich stabil läuft, weil das halt wirklich einfach den Raspberry sehr beansprucht.

00:04:40.000 --> 00:04:48.000
Und ich hatte den Eindruck, dass teilweise dadurch Verzögerungen zustande kommen, also dass es lange dauert, bis eine Domain dann aufgelöst wird und so.

00:04:48.000 --> 00:05:00.000
Und dann hab ich mir gedacht, ja, dann verzichte ich lieber auf dieses Adblocking, beziehungsweise kann das ja auch über einen anderen öffentlichen DNS zumindest teilweise und halt nicht so konfigurierbar umsetzen.

00:05:00.000 --> 00:05:05.000
Und versuch mal, ob dafür jetzt mein Internet und so wieder hier stabiler läuft.

00:05:05.000 --> 00:05:13.000
Und ich hab schon den Eindruck, muss ich sagen, dass es jetzt nicht mehr so häufig irgendwie abbricht, soweit ich das jetzt erkennen kann.

00:05:13.000 --> 00:05:15.000
Und wir auch keine Knackser haben bisher.

00:05:15.000 --> 00:05:21.000
Also vielleicht hat es tatsächlich schon da was gemacht. Ich meine, die Daten sind zwar nicht da drüber gelaufen, sondern wirklich nur der DNS.

00:05:21.000 --> 00:05:31.000
Aber wer weiß, ob dann nicht zwischendrin dann irgendwie, ja, wenn dann wieder versucht wurde, was aufzulösen, das halt doch länger gedauert hat und dadurch Pakete dann verloren gegangen sind oder zu spät zugestellt wurden.

00:05:31.000 --> 00:05:38.000
Und dann hatten wir noch das Problem, dass ich zeitverzögert war letztes Mal und irgendwie mein Bild nicht zum Ton gepasst hat bei dir.

00:05:38.000 --> 00:05:49.000
Und ich auch gemerkt habe dann beim Schneiden, dass wir unglaublich Versatz drin hatten. Also ich habe letztes Mal sehr viel bearbeiten müssen und mich wieder hinschieben, dass das irgendwie passt.

00:05:49.000 --> 00:05:55.000
Weil man ständig das Gefühl hatte, sonst beim Hören, dass wir uns dauernd ins Wort fallen und uns gegenseitig unterbrechen.

00:05:55.000 --> 00:06:08.000
Und deswegen wollte ich jetzt diesmal gucken, wie kann ich das mit dem Audio Setup noch ein bisschen besser hinkriegen. Und ich habe halt wirklich auch gesehen, beim Aufnehmen, ich sage was und erst irgendwie 3-4 Sekunden später sehe ich dann den Peak in meiner Spur.

00:06:08.000 --> 00:06:13.000
Also da war definitiv schon auf meiner Seite hardware-technisch was verschoben.

00:06:13.000 --> 00:06:24.000
Und dann habe ich geguckt, Linux Low Latency und dann habe ich extra den Low Latency Kernel installiert und dachte vielleicht hat sich das damit schon erledigt, aber das hat überhaupt nichts an Besserung gebracht.

00:06:24.000 --> 00:06:41.000
Und dann habe ich ein bisschen, ich habe JGBT natürlich dazu befragt und das hat mir dann verschiedene Lösungsansätze gegeben, das eine war statt Puls Audio zu nutzen, was wohl halt relativ stabil läuft, aber halt nicht sehr latenzarm unter Linux.

00:06:41.000 --> 00:06:49.000
Was so das Default Audio Interface ist, Software-seitig quasi.

00:06:49.000 --> 00:07:04.000
Und jetzt benutze ich, ich muss mal nachgucken, ich benutze Jack in den Einstellungen von Ultraschall oder Reaper und das läuft aber irgendwie dann über, wie heißt das nochmal?

00:07:04.000 --> 00:07:24.000
Pipewire, genau, über Pipewire und das kann dann irgendwie das Ganze eben latenzfreier machen, weil ich hatte vorher das Problem, ich konnte zwar umstellen auf eine latenzfreiere Schnittstelle, dann hatte ich aber zum Beispiel keinen Browser-Ton mehr, also ich hatte dann ganz exklusiv nur Reaper fürs Aufnehmen,

00:07:24.000 --> 00:07:34.000
aber wir haben ja schon öfter mal den Fall, dass wir zwischendurch uns auch Videos irgendwie schicken und dann kurz wo reinhören und wahrscheinlich hätte ich auch über Discord dich dann überhaupt nicht hören können.

00:07:34.000 --> 00:07:42.000
Aber jetzt funktioniert's, ich muss jetzt Reaper irgendwie über so einen anderen Parameter starten, damit das dann auch wirklich über die Schnittstelle reinläuft und da zusammengemischt wird,

00:07:42.000 --> 00:07:54.000
aber du hast gesagt, bisher ist alles latenzfrei und ich seh mich auch direkt hier reinlaufen in die Spur, also hoffen wir mal, dass das jetzt alles dann besser ist und vielleicht lagen auch die Knackser da mit.

00:07:54.000 --> 00:07:58.000
Hattest du jetzt in dem Augenblick, wo du Knackser sagst, hattest du gerade einen Knackser?

00:07:58.000 --> 00:08:14.000
Aber zumindest nicht bei mir, weil es war ja vorher teilweise so, dass ich die Knackser selber gehört habe. Also in dem Live-Monitoring von meinem Audio-Interface habe ich selber gehört, dass ich jetzt gerade geknackst habe und das ist jetzt nicht mehr und das ist schon mal gut.

00:08:14.000 --> 00:08:23.000
Das heißt, in meine Spur läuft es ohne Knackser rein. Wahrscheinlich hört man den Knackser gar nicht, den du gerade gemeint hast. Und von dir höre ich auch keine Knackser, also ich bin gerade optimistisch, dass das alles gut läuft.

00:08:23.000 --> 00:08:32.000
Ich habe die Fritz-Box auch neu gestartet, also vielleicht haben wir echt jetzt das Problem wieder gelöst, was ich da verursacht habe vor einer Weile.

00:08:32.000 --> 00:08:40.000
Ja, so zum Thema, weil du Linux benutzt. Ich habe jetzt gerade noch mal was verschoben und vorhin noch was kurz mit reingenommen.

00:08:40.000 --> 00:08:48.000
Vielleicht mal so ein kleiner Linux-Fakt am Rande, was jetzt mit uns als Podcast gar nichts zu tun hat und auch mit unserem Thema nicht, aber ich fand es irgendwie spannend.

00:08:48.000 --> 00:09:02.000
Ich habe gerade vorhin noch mal nachgeschaut, der zehntgrößte YouTuber der Welt, PewDiePie, mit 110 Millionen Subscribern ist unter die Linuxer gegangen und hat auch ein relativ langes Linux-Video gemacht,

00:09:02.000 --> 00:09:14.000
wo er zeigt, wie er Linux installiert und wie er das konfiguriert hat und er hat tatsächlich, wenn ich es richtig weiß, Arch-Linux verwendet und dann so richtig sich das mit Hyperlens zurecht gebastelt.

00:09:14.000 --> 00:09:30.000
Ich habe gelernt, das nennt man Rising, den Begriff kannte ich auch noch nicht und das ist ziemlich, vielleicht ist dieses Jahr wirklich das Jahr des Linux-Desktops, normalerweise sagt man immer, das ist nächstes Jahr.

00:09:30.000 --> 00:09:40.000
Seit 20 Jahren sagt man das schon, aber das fände ich doch jetzt irgendwie schon abgefahren und da sind jetzt echt einige Leute, könnte ich mir vorstellen, kommen jetzt auf den Geschmack.

00:09:40.000 --> 00:09:51.000
Also wirklich, ich finde es immer wieder verrückt, wenn man sieht, PewDiePie hat 110 Millionen Abonnenten auf seinem Account, das muss man sich nicht mal vorstellen, das sind mehr Leute, haben ihn abonniert als in Deutschland.

00:09:51.000 --> 00:10:01.000
Ja krass, das kann schon echt einen Impact haben und ich glaube so generell, viele Leute sind von Windows 11 ziemlich abgeschreckt.

00:10:01.000 --> 00:10:03.000
Oh, total genervt auch.

00:10:03.000 --> 00:10:17.000
Oder haben keinen Bock, auch ihre Hardware irgendwie jetzt, das war ja bei mir auch mit ein Faktor, dass ich gesagt habe, okay, jetzt beenden die einen Support und die wollen mich unbedingt auf Windows 11 schubsen und klar, mit Tricks kann man das auch irgendwie umgehen, dass man diese Hardwarechecks.

00:10:17.000 --> 00:10:19.000
Aber wenn man die Tricks drauf hat, dann kann man auch gleich Linux verwenden.

00:10:19.000 --> 00:10:34.000
Ja, richtig. Und ich glaube schon, dass das spürbar sein wird. Also, dass mehr Menschen auf Linux wechseln. Ich bin auch in so einem Subreddit zu Linux Mint und da kommen immer wieder Neulinge, die irgendwie sagen, ich hatte jetzt die Schnauze voll und ich bin total begeistert und so.

00:10:34.000 --> 00:10:46.000
Also, ich könnte mir schon vorstellen, dass das, ja, dass das einen Impact haben wird. Und wenn gerade dann solche Leute noch aufspringen, die eine große Reichweite haben, das kann schon zu einer Veränderung führen.

00:10:46.000 --> 00:10:57.000
Und jetzt kam auch gerade diese Woche irgendwas, dass AMD jetzt sämtliche Treiberpakete auf Open Source umgestellt hat.

00:10:57.000 --> 00:11:17.000
Also, die hatten schon einen Teil wohl vor einigen Jahren eigentlich schon umgestellt, aber es war noch nicht alles davon war Open Source und das haben sie jetzt irgendwie geändert. Und Nvidia setzt ja auch jetzt vermehrt auf wirklich Open Source.

00:11:17.000 --> 00:11:27.000
Und wer weiß, vielleicht wird sich auch die ganze Gaming-Sache auf Linux wieder dadurch ein bisschen ändern, weil es jetzt einfach interessanter wird und weil der Markt größer wird.

00:11:27.000 --> 00:11:28.000
Das hat sich ja schon krass geändert.

00:11:28.000 --> 00:11:33.000
Hat sich schon krass geändert, ja klar, im Vergleich zu vor noch zehn Jahren oder so.

00:11:33.000 --> 00:11:46.000
Das hat sich ja durch das Steam Deck brutal verändert, Gaming auf Linux. Also, da geht ja jetzt extrem viel, weil da Valve auch, glaube ich, ziemlich viel in die Weiterentwicklung von diesen Kompatibilitätslayern reingesteckt hat,

00:11:46.000 --> 00:11:52.000
wenn ich das richtig mitbekommen habe. Ich weiß jetzt nicht, ob man jetzt Linux ein Gaming-Betriebssystem nennen kann, aber ...

00:11:52.000 --> 00:11:54.000
Nee, aber auf dem Weg dahin vielleicht.

00:11:54.000 --> 00:11:55.000
Auf jeden Fall.

00:11:55.000 --> 00:12:05.000
Also, wie gesagt, vor zehn Jahren sah das noch ganz anders aus, vor 20 sowieso, aber ich könnte mir schon vorstellen, dass das so längerfristig vielleicht wirklich Windows im Heimgebrauch,

00:12:05.000 --> 00:12:15.000
naja, ablöst vielleicht nicht, aber zumindest einen sehr viel größeren Teil davon haben wird als bisher.

00:12:15.000 --> 00:12:19.000
Die, die das schon machen wollen, die können da mal super TuxCard installieren.

00:12:19.000 --> 00:12:21.000
Ich kenn das nicht.

00:12:21.000 --> 00:12:30.000
Du fährst halt als der Pinguin auf so Strecken rum, das ist uraltes Spiel, das gibt es schon relativ lange.

00:12:30.000 --> 00:12:39.000
Ja, also ich finde sowieso, Abtutipa, ich hatte den nie abonniert, ich habe immer mal so ein bisschen am Rande mitbekommen, was der so macht,

00:12:39.000 --> 00:12:45.000
aber ich habe das Gefühl, der ist jetzt ein ganz entspannter Typ geworden.

00:12:45.000 --> 00:12:48.000
Im Prinzip ist der ja schon in Rente, kann man sagen.

00:12:48.000 --> 00:12:56.000
Der ist ja irgendwann weggezogen aus seiner Heimat und nach Japan vor ein oder zwei Jahren oder so mit Frau und Kind.

00:12:56.000 --> 00:12:59.000
Ich weiß nicht, ob das Kind damals schon auf der Welt war.

00:12:59.000 --> 00:13:09.000
Und der macht jetzt ganz so wholesome Familienvideos teilweise. Und offenbar muss er trotzdem irgendwas tun und die Zeit totschlagen,

00:13:09.000 --> 00:13:13.000
weil ich meine, ich glaube, seine Schäfchen, die hat er 27 Mal im Trockenen.

00:13:13.000 --> 00:13:17.000
Und er hat jetzt halt, er hat damit nicht aufgehört mit dem Linux-Video,

00:13:17.000 --> 00:13:22.000
sondern der hat halt noch ein anderes Video, wo er jetzt mit irgendwelchen Raspberry-Pi-Sachen rumspielt

00:13:22.000 --> 00:13:25.000
und sich da irgendwelche Gadgets baut und 3D druckt und sowas.

00:13:25.000 --> 00:13:30.000
Das ist der neue PewDiePie, das finde ich irgendwie schon faszinierend.

00:13:30.000 --> 00:13:36.000
Das wollte ich halt nun mal noch mit einwerfen bei deiner Linux-Geschichte.

00:13:36.000 --> 00:13:40.000
Aber mein eigentlicher Retro-Punkt, der jetzt kommen sollte, ist,

00:13:40.000 --> 00:13:44.000
ich habe auch ein bisschen rumgespielt wieder mit Code.

00:13:44.000 --> 00:13:46.000
Und zwar, was habe ich gemacht?

00:13:46.000 --> 00:13:51.000
Ich habe ja schon seit Ewigkeiten, also ich habe nochmal geguckt, seit mindestens 10 Jahren,

00:13:51.000 --> 00:13:58.000
gibt es meinen QR-Code-Generator, 2QR.info.

00:13:58.000 --> 00:14:01.000
Und mit dem habe ich ein bisschen rumgespielt, weil ich mir gedacht habe,

00:14:01.000 --> 00:14:03.000
es wäre vielleicht mal Zeit für neue Features.

00:14:03.000 --> 00:14:07.000
Ich wurde gefragt, kannst du mal irgendwie für WLAN und Visitenkarte und so,

00:14:07.000 --> 00:14:09.000
kannst du das mal einbauen?

00:14:09.000 --> 00:14:11.000
Dachte ich so, ja, weiß nicht, kein Bock.

00:14:11.000 --> 00:14:13.000
Lange gedacht, weiß nicht, kein Bock.

00:14:13.000 --> 00:14:15.000
Und dann gedacht, ja komm, jetzt machst du es halt mal.

00:14:15.000 --> 00:14:20.000
Und so Vibe-Coding-mäßig mit AI-Unterstützung geht es dann auch relativ flott.

00:14:20.000 --> 00:14:23.000
Und da habe ich jetzt tatsächlich eingebaut,

00:14:23.000 --> 00:14:27.000
also neben ein paar UX-Verbesserungen,

00:14:27.000 --> 00:14:31.000
dass es jetzt so kleine Wizards gibt für QR-Code,

00:14:31.000 --> 00:14:35.000
für Wi-Fi-Codes und für Visitenkarten.

00:14:35.000 --> 00:14:37.000
Das heißt, da gibt es jetzt so eine Option,

00:14:37.000 --> 00:14:39.000
da geht so ein kleines Fensterle auf,

00:14:39.000 --> 00:14:42.000
ein Dialog-Element und da kannst du dann die Daten eingeben

00:14:42.000 --> 00:14:44.000
und dann kriegst du den generiert,

00:14:44.000 --> 00:14:47.000
den Wi-Fi-QR-Code so für zu Hause aufzuhängen

00:14:47.000 --> 00:14:50.000
oder halt Visitenkarte, wenn man einen QR-Code haben will

00:14:50.000 --> 00:14:53.000
und seine Visitenkartendaten weitergeben will.

00:14:53.000 --> 00:14:57.000
Ja, das so am Rande und da ist einiges tatsächlich passiert.

00:14:57.000 --> 00:14:59.000
Ich habe auch die Library, die da hinten dransteckt,

00:14:59.000 --> 00:15:01.000
die den QR-Code generiert, ausgetauscht durch eine,

00:15:01.000 --> 00:15:04.000
die jetzt mehr Features hat.

00:15:04.000 --> 00:15:06.000
Und das Ganze ist jetzt auch eine Progressive-Web-App,

00:15:06.000 --> 00:15:08.000
die offline funktioniert,

00:15:08.000 --> 00:15:10.000
die man sich auf dem Phone installieren kann

00:15:10.000 --> 00:15:13.000
oder auch auf dem Desktop, wenn man möchte.

00:15:13.000 --> 00:15:15.000
Und tatsächlich cached das dann alles

00:15:15.000 --> 00:15:18.000
und das sollte dann komplett offline funktionieren.

00:15:18.000 --> 00:15:20.000
Das finde ich ziemlich cool,

00:15:20.000 --> 00:15:22.000
weil es ist jetzt quasi eine echte App, wenn man so will.

00:15:22.000 --> 00:15:24.000
Cool.

00:15:24.000 --> 00:15:27.000
Ich habe es letztens tatsächlich genutzt, dein Tool.

00:15:27.000 --> 00:15:29.000
Und zwar hatte ich irgendwie einen QR-Code,

00:15:29.000 --> 00:15:33.000
der als Rastergrafik mir dargestellt wurde.

00:15:33.000 --> 00:15:36.000
Ich glaube, von irgendeiner App oder es ging um irgendwas verknüpfen.

00:15:36.000 --> 00:15:39.000
Und das war so schlecht aufgelöst,

00:15:39.000 --> 00:15:41.000
dass das dann nicht gescannt werden konnte.

00:15:41.000 --> 00:15:43.000
Und dann habe ich einfach den Inhalt, wusste ich aber,

00:15:43.000 --> 00:15:46.000
und dann habe ich einfach einen neuen QR-Code generiert

00:15:46.000 --> 00:15:51.000
mit deinem Tool und, genau, habe das dann scannen können.

00:15:51.000 --> 00:15:52.000
Cool.

00:15:52.000 --> 00:15:53.000
Ja.

00:15:53.000 --> 00:15:55.000
Es hatte auch ein paar Bugs zwischendurch.

00:15:55.000 --> 00:15:56.000
Es tut mir leid.

00:15:56.000 --> 00:16:01.000
Die wurden mir dann auch reported aus dem privaten Umfeld.

00:16:01.000 --> 00:16:05.000
Weil, ja, so Use-Cases sind, die ich einfach nicht gedacht habe.

00:16:05.000 --> 00:16:06.000
Tatsächlich.

00:16:06.000 --> 00:16:08.000
Das sind so Dinge, die eigentlich auf der Hand liegen.

00:16:08.000 --> 00:16:11.000
So was wie Copy-Paste hatte ich tatsächlich,

00:16:11.000 --> 00:16:13.000
da dieser Code wirklich sehr alt ist.

00:16:13.000 --> 00:16:16.000
Und ich glaube, dass damals das Input-Event noch relativ neu war.

00:16:16.000 --> 00:16:22.000
Ich hatte tatsächlich sowas wie KeyUp als Event-Listener auf dem Input-Feld liegen.

00:16:22.000 --> 00:16:26.000
Und habe dadurch halt kein Paste-Event mitgekriegt, zum Beispiel.

00:16:26.000 --> 00:16:31.000
Also so Kleinigkeiten waren da noch am Start.

00:16:31.000 --> 00:16:33.000
Genau, aber das könnt ihr mal ausprobieren.

00:16:33.000 --> 00:16:35.000
Der Link kommt in die Shownotes.

00:16:35.000 --> 00:16:37.000
Ich diktiere nochmal 2qr.info.

00:16:37.000 --> 00:16:38.000
Es ist cool.

00:16:38.000 --> 00:16:44.000
Es ist kein Tracking drauf, so wie bei anderen QR-Code-Tools.

00:16:44.000 --> 00:16:48.000
Ich muss sagen, ich war ein bisschen angefressen,

00:16:48.000 --> 00:16:50.000
weil ich einen Post auf Mastodon gesehen habe,

00:16:50.000 --> 00:16:55.000
wo jemand einen QR-Code-Generator, der ähnliches Feature-Set hat wie meiner, gepostet hat.

00:16:55.000 --> 00:16:59.000
Und so, hey, ich habe jetzt hier QR-Code-Generatoren sind doch scheiße,

00:16:59.000 --> 00:17:02.000
weil die bauen irgendwie immer Tracking ein und dann gehen die Links irgendwann kaputt.

00:17:02.000 --> 00:17:06.000
Ich habe jetzt hier das total geile neue Tool gebaut und es hat im Prinzip das selbe Feature-Set.

00:17:06.000 --> 00:17:12.000
Und dieser Post hat 2.000 Reposts bekommen und ich habe gedacht, das gibt es ja gar nicht.

00:17:12.000 --> 00:17:18.000
Ich habe das Ding schon seit zehn Jahren und es interessiert keine Sau.

00:17:18.000 --> 00:17:20.000
Ich bin schlecht im Marketing, offenbar.

00:17:20.000 --> 00:17:22.000
Ja, ich wollte gerade sagen, du musst halt mehr Werbung machen.

00:17:22.000 --> 00:17:26.000
Aber das ist halt die Frage, wenn du halt entsprechend viele Follower schon hast,

00:17:26.000 --> 00:17:29.000
dann kriegst du halt so viele Reposts.

00:17:29.000 --> 00:17:32.000
Das war eine Person, die gar nicht so viele Follower hatte.

00:17:32.000 --> 00:17:36.000
Und keine Ahnung, hat halt einfach richtige Zeit, richtiger Ort

00:17:36.000 --> 00:17:38.000
oder die richtige Person hat es repostet oder so.

00:17:38.000 --> 00:17:43.000
Genau, ich bin nicht so gut im Marketing, aber ihr dürft gern auch mein Tool nutzen.

00:17:43.000 --> 00:17:46.000
Das ist genauso, da gibt es auch kein Tracking, da wird nichts erfasst.

00:17:46.000 --> 00:17:49.000
Das passiert alles im Client und auch offline, wenn ihr wollt.

00:17:49.000 --> 00:17:53.000
Ja, genau. Also doch, nee, das stimmt nicht ganz.

00:17:53.000 --> 00:17:55.000
Ich will nicht die Wahrheit verschweigen.

00:17:55.000 --> 00:18:00.000
Also die Seite generell, da ist schon mein eigenes Matomo eingebunden.

00:18:00.000 --> 00:18:08.000
Aber was ihr da reintippt oder so, das ist alles nur auf der Seite und nur in eurem Browser und sonst nirgends.

00:18:08.000 --> 00:18:14.000
Weil es gibt ja tatsächlich fiese QR-Code-Generatoren, die dann gar nicht einen Link, zum Beispiel bei einem Link,

00:18:14.000 --> 00:18:18.000
gar nicht den echten Link nehmen, sondern einen Umleitungslink, damit sie es mittracken können.

00:18:18.000 --> 00:18:23.000
Die können dir das Ding dann theoretisch auch irgendwann abschalten und sagen, wir wollen Geld haben oder was weiß ich.

00:18:23.000 --> 00:18:26.000
Oder auf eine andere Seite leiten, die irgendwie Phishing betreibt oder sowas.

00:18:26.000 --> 00:18:33.000
Bullshit. Also sowas machen wir nicht. Wir wollen coole, kleine Tools haben, die einfach ihren Zweck tun und da will ich auch kein Geld für haben oder sowas.

00:18:33.000 --> 00:18:38.000
Ich habe da so einen kleinen Sponsor-Link drauf, den noch nie jemand benutzt hat, so mit meinem PayPal.

00:18:38.000 --> 00:18:47.000
Seit 100.000 Jahren ist es schon da drauf. Ja, kann man ja machen, falls es einem hilft oder auch nicht und einfach benutzen.

00:18:47.000 --> 00:18:54.000
Und ich bin ja froh, wenn ich irgendwie sowas providen kann. Und ich muss auch sagen, ich habe auch die QR-Code-Library auch nicht selbst geschrieben.

00:18:54.000 --> 00:19:06.000
Also ich habe mich da bedient am Internet und im Prinzip nur ein Frontend dafür gebaut, was ich halt kann. Was wir halt so können hier, Frontend-Leute.

00:19:06.000 --> 00:19:14.000
Genau, das dazu. Gut, dann habe ich noch einen Retro-Punkt. Einfach so ein bisschen Laberei, wie so oft.

00:19:14.000 --> 00:19:23.000
Ich war ja jetzt zwei Wochen im Urlaub und das war so der erste längere Urlaub jetzt, seit ich nicht mehr selbstständig bin.

00:19:23.000 --> 00:19:35.000
Und das war irgendwie ganz krass. Also der Unterschied zu vorher mit der Selbstständigkeit, wo man doch irgendwie im Kopf immer bei der Arbeit ist

00:19:35.000 --> 00:19:41.000
und doch Mails checkt und sich Gedanken macht und eigentlich ein schlechtes Gewissen irgendwie hat.

00:19:41.000 --> 00:19:48.000
Kann ich das mir jetzt gerade überhaupt leisten, jetzt einen Urlaub zu machen? Oder sollte ich nicht eigentlich jetzt daheim sitzen und was arbeiten?

00:19:48.000 --> 00:19:53.000
Das ist jetzt halt einfach komplett weg. Und wenn ich frei hab, hab ich einfach frei.

00:19:53.000 --> 00:20:00.000
Und ich bin jetzt gerade im Kindergarten da als Zusatzkraft. Und meine Frau ist ja Lehrerin, die hat jetzt also Schulferien.

00:20:00.000 --> 00:20:07.000
Und der Kindergarten hat auch die kompletten Pfingstferien zu. Das heißt, wir haben einfach mal jetzt zwei Wochen beide frei.

00:20:07.000 --> 00:20:18.000
Und das ist irgendwie so krass, ohne dass ich mir jetzt irgendwie Urlaub dafür nehmen muss und irgendwie auch nur Gedanken an die Arbeit verschwenden muss, wenn ich das nicht will.

00:20:18.000 --> 00:20:22.000
Und das ist irgendwie ein ganz neues Freiheitsmittel, muss ich sagen.

00:20:22.000 --> 00:20:27.000
Echt? Krass. Ich bedauere, dass du das nicht schon vorher kanntest.

00:20:27.000 --> 00:20:42.000
Ich auch. Aber ja, also ich meine, ich konnte schon abschalten im Urlaub, aber trotzdem war halt immer, alle zwei, drei Tage habe ich halt trotzdem in die Mails geguckt oder mit meinem Bruder irgendwie geschrieben, weil halt doch irgendwie eine Rückfrage war oder so.

00:20:42.000 --> 00:20:49.000
Oder ja, das müssen wir nach deinem Urlaub mal in Angriff nehmen oder so. Jetzt ist halt wirklich einfach, wenn ich Urlaub habe, habe ich Urlaub.

00:20:49.000 --> 00:21:12.000
Das ist so interessant. Ich kann das jetzt viel besser nachvollziehen, dieses Gefühl, weil ich ja jetzt auch ein bisschen Freelance gemacht habe und bei dem einen Kunden mehrere Projekte, wo auch immer mal wieder kam, ja, wir haben jetzt hier noch das, dafür bräuchte man noch ein Angebot und wir haben noch das und dafür bräuchte man noch ein Angebot.

00:21:12.000 --> 00:21:25.000
Und das war am Ende nicht viel Aufwand, aber da musste ich sehr diszipliniert sein, auch so an Tagen, wo ich eigentlich nix machen wollte, zu sagen, naja, die haben jetzt aber noch ein Angebot gefragt, komm, ich mache es jetzt schnell, so.

00:21:25.000 --> 00:21:36.000
Das waren dann Dinge, zu denen ich mich dann auch immer durchgerungen habe, weil ich irgendwann mal die Regel, habe ich irgendwann mal online gelesen, das fand ich eigentlich ganz gut, habe mir irgendwann mal die Regel aufgestellt, wenn eine Sache weniger als fünf Minuten dauert, dann versuche ich sie sofort zu machen und nicht zu verschieben.

00:21:36.000 --> 00:21:39.000
Ja, ist natürlich auch gut gegen Prokrastination.

00:21:39.000 --> 00:22:07.000
Und damit konnte man das ganz gut, ja, aber Prokrastination, also, reden wir später mal noch, ich habe da noch ein Thema, was ich aber jetzt nicht im Podcast, ja, genau, aber das, ich verstehe jetzt aber auch diese ganze Motivationssache, wenn du selbstständig bist, dass du gewisse Dinge selbst entscheiden kannst oder komplett eigentlich deinen Tagesablauf weitestgehend selbst bestimmen kannst,

00:22:07.000 --> 00:22:20.000
das ist mit, ja, damit kommt halt auch große Verantwortung, so, und man muss dann halt auch alleine es schaffen, was zu machen, ohne eine Struktur von außen, das ist auch nicht ohne.

00:22:20.000 --> 00:22:27.000
Aber ich möchte nicht meckern, also Freelancing ist auch schon ziemlich cool, also die ganzen Freiheiten, die man dabei hat.

00:22:27.000 --> 00:22:37.000
Ja klar, ja ich meine die Kehrseite sehe ich natürlich jetzt auch, die zwei Wochen Urlaub habe ich jetzt, weil der Kindergarten halt eh zu hat über die zwei Wochen, aber so in Zukunft mit der Ausbildung auch,

00:22:37.000 --> 00:22:45.000
da wird es halt eh der Fall sein, dass meine Frau Schulferien hat und ich aber ausgerechnet in den Schulferien natürlich gebraucht werde für Kinder- und Jugendbetreuung.

00:22:45.000 --> 00:22:51.000
Und da wird das in Zukunft nicht mehr so, ja, mit den Urlauben funktionieren wie bisher.

00:22:51.000 --> 00:23:10.000
Ist das so? Aber das ist ja eigentlich interessant, weil du bist ja dann nicht im Staatsdienst, das heißt, aber die Ferienzeiten gibt es im Kindergarten eventuell trotzdem genauso, aber du hast weniger Urlaub als diese Ferienzeiten, richtig?

00:23:10.000 --> 00:23:18.000
Genau, genau. Und ich bin ja für die Ausbildung dann nicht mehr im Kindergarten, sondern im Jugendzentrum und da ist halt schon öfter mal so, dass die dann gerade während der Ferien auch Betreuungsangebote haben,

00:23:18.000 --> 00:23:21.000
weil die Kinder halt nicht in die Schule gehen und die Eltern aber halt trotzdem berufstätig sind.

00:23:21.000 --> 00:23:25.000
Und dein Urlaub würde ja auch gar nicht reichen, um die ganzen Ferien abzudecken, ziemlich sicher.

00:23:25.000 --> 00:23:33.000
Nein, genau, auf keinen Fall. Also ich kriege da auch die normalen gesetzlichen 30 Tage, wobei ich auch nicht in Vollzeit die Ausbildung mache, sondern…

00:23:33.000 --> 00:23:35.000
Also gesetzt ist tatsächlich weniger.

00:23:35.000 --> 00:23:37.000
Ja, so 28 sind es, glaube ich.

00:23:37.000 --> 00:23:39.000
Ich glaube es sind aber nur 23 oder 24.

00:23:39.000 --> 00:23:49.000
Ja, echt? So wenig? Also ich meine, dass es dort 30 sind eigentlich, aber wie gesagt, mit Teilzeit haben wir da ein bisschen weniger. Also ich kriege die Ferien nicht überbrückt.

00:23:49.000 --> 00:23:56.000
Und gut, ich habe, muss ich aber auch sagen, in der Selbstständigkeit keine 30 Tage im Jahr genommen. Also da bin ich eh nicht drauf gekommen.

00:23:56.000 --> 00:23:59.000
Oh krass, da kommst du nicht drauf. Es sind sogar nur 20 in Deutschland verpflichtend.

00:23:59.000 --> 00:24:06.000
Oh echt? Ich dachte nicht, das wären so Richtung 30. Aber ich meine, die meisten Firmen bieten ja wirklich diese 30 Tage an.

00:24:06.000 --> 00:24:10.000
Ja, das kann ich bestätigen.

00:24:10.000 --> 00:24:16.000
Ja, eine andere Sache noch, auch weil es mit Urlaub zu tun hat, aber gar nichts mit Arbeiten.

00:24:16.000 --> 00:24:25.000
Ich war immer eine große Verfechterin von Unisex-Toiletten und ich war jetzt ja zwei Wochen campen und auf manchen Campingplätzen war es halt nicht so schlecht.

00:24:25.000 --> 00:24:27.000
Gab es halt Gruppensextoiletten? Entschuldigung.

00:24:27.000 --> 00:24:37.000
Aber da gab es Unisex-Toiletten und ich muss echt sagen, ich war dann froh, wenn ich wieder auf Frauentoiletten war, weil die sind durchschnittlich echt deutlich sauberer.

00:24:37.000 --> 00:24:45.000
Das ist spannend, das ist ein total spannendes Thema, weil das habe ich schon in alle Richtungen gehört, dieses Argument.

00:24:45.000 --> 00:24:59.000
Und ich habe auch schon genau das Gegenteil gehört, was interessanterweise Frauen selbst gesagt haben, dass die Frauentoiletten, also dass sie, wenn sie auf die Männertoilette gehen, keine Ahnung, weil halt vor der Frauentoilette eine Riesenschlange ist, dass sie dann oft erstaunt sind, wie sauber das da ist.

00:24:59.000 --> 00:25:00.000
Echt?

00:25:00.000 --> 00:25:01.000
Ich kenne das in alle Richtungen.

00:25:01.000 --> 00:25:07.000
Und ich habe das auch schon ganz oft gehört und dass ganz viele Frauen mir gesagt haben, ja, aber die Frauentoiletten, die sehe ich ja teilweise auch echt.

00:25:07.000 --> 00:25:13.000
Aber ich meine, ich war jetzt wirklich viel auf öffentlichen Toiletten unterwegs in den zwei Wochen, an Raststätten und Cafés oder so.

00:25:13.000 --> 00:25:15.000
Welche Ländersache ist das? Wo warst du dann?

00:25:15.000 --> 00:25:17.000
Ich war in Spanien, Frankreich, Andorra.

00:25:17.000 --> 00:25:22.000
Weiß nicht, ob die da unbedingt jetzt mehr auf Sauberkeit aus sind.

00:25:22.000 --> 00:25:35.000
Aber auch hier in Deutschland, also egal, ob ich in einem Café bin oder hier an einer Raststätte, also ich muss diese extrem schmutzigen, verfleckten Frauentoiletten erst noch finden.

00:25:35.000 --> 00:25:47.000
Und ich weiß halt aus eigener Erfahrung Herrentoiletten oder die Toiletten, die unisex sind und von Männern mitbenutzt werden, also da ist die Ausnahme, dass es nicht nach Urin stinkt und auf dem Boden verklebt ist.

00:25:47.000 --> 00:25:52.000
Ist leider echt so. Und nicht nur vor den Pissoirs, sondern wirklich auch auf den Sitztoiletten.

00:25:52.000 --> 00:25:59.000
Ich frage mich gerade, ob das ein technisches Problem ist. Aber das können wir woanders mal erörtern.

00:25:59.000 --> 00:26:01.000
So physisch, physikalisch meinst du?

00:26:01.000 --> 00:26:09.000
Ja, also anders ein Problem, das man technisch lösen kann. Ich will nicht sagen, es ist ein technisches Problem, sondern es ist ein Problem, das man technisch lösen könnte.

00:26:09.000 --> 00:26:17.000
Da hilft kein Schütteln und kein Klopfen, in die Hose geht der letzte Tropfen. Oder halt eben vor die Toilettenschüssel.

00:26:17.000 --> 00:26:23.000
Ich will es nicht weiter vertiefen, aber da habe ich vielleicht später noch einen Tipp für dich.

00:26:23.000 --> 00:26:31.000
Den ich auch so im Podcast habe, by the way. Aber egal, wollen wir jetzt nicht.

00:26:31.000 --> 00:26:34.000
Nee, jetzt machen wir noch die Rätung fertig und dann kommen wir mal zum Thema.

00:26:34.000 --> 00:26:45.000
Genau, also was noch passiert ist, so Code-mäßig, ist, ich habe immer mal wieder gedacht, so Apple Shortcuts, da habe ich auch schon öfter drüber geredet.

00:26:45.000 --> 00:26:51.000
Ich habe auch schon mal so gescherzt, so von wegen, ja, ich werde in meinem nächsten Developerleben Apple Shortcuts Developer.

00:26:51.000 --> 00:27:00.000
Weil ich das sehr cool finde, wie man da Dinge automatisieren kann und wie mächtig das ist und wie schön man sich das so zurecht klicken kann, ganz ohne Code zu schreiben.

00:27:00.000 --> 00:27:07.000
Natürlich hat es seine Einschränkungen, aber man kann mit so einem Shortcut auch einfach ein Bash-Skript aufrufen und dann kann man alles machen, was man will.

00:27:07.000 --> 00:27:18.000
Und ich habe jetzt halt mal damit angefangen, Shortcuts, die ich gebaut habe, wo ich der Meinung bin, dass man die generell verwenden kann.

00:27:18.000 --> 00:27:23.000
Also, dass die jetzt nicht nur für mich speziell sind, sondern dass die für andere vielleicht auch nützlich sind, mal zu teilen.

00:27:23.000 --> 00:27:29.000
Weil das kann man nämlich, es gibt so ein Shortcut-Share-Ding, dann kriegt man so einen iCloud-Link und dann kann man die mit der Welt teilen.

00:27:29.000 --> 00:27:34.000
Und ich habe dann erst überlegt, was mache ich? Also jetzt gibt es diesen iCloud-Link, was mache ich denn damit?

00:27:34.000 --> 00:27:37.000
Dann habe ich gedacht, naja, vielleicht mache ich das einfach in meine Projekte auf meiner Webseite.

00:27:37.000 --> 00:27:41.000
Und dann habe ich gemerkt, naja, aber dann wird das irgendwie unübersichtlich, diese Liste.

00:27:41.000 --> 00:27:45.000
Und ich möchte ja vielleicht auch direkt dahin verlinken und dann muss ich auf meiner Webseite gleich noch ein neues Feature einbauen.

00:27:45.000 --> 00:27:49.000
Nämlich, dass es bei meinen Projekten jetzt Filter gibt, die auch über den Link funktionieren.

00:27:49.000 --> 00:27:53.000
Also mit Fragezeichen Filter kann ich jetzt die einzelnen Bereiche ansteuern.

00:27:53.000 --> 00:27:58.000
Es ist nicht so, dass ich so extrem viele Sachen da hätte, aber ich fand es dann irgendwie cool, auch dieses Feature einzubauen.

00:27:58.000 --> 00:28:02.000
Und habe zwei Shortcuts, die ich gebaut habe, mal veröffentlicht.

00:28:02.000 --> 00:28:05.000
Und zwar der eine ist eher simpel.

00:28:05.000 --> 00:28:08.000
Das ist einfach nur ein Toggle für Dark und Light Theme.

00:28:08.000 --> 00:28:14.000
Einfach nur, weil dieser Toggle im Betriebssystem mir zu tief in den Einstellungen versteckt ist.

00:28:14.000 --> 00:28:16.000
Und deswegen habe ich dafür mal eingebaut.

00:28:16.000 --> 00:28:20.000
Und das andere ist ein bisschen cooler und mächtiger.

00:28:20.000 --> 00:28:27.000
Und zwar ist das ein Shortcut, mit dem ich quasi einen Screenshot mache und zwar so eine Area aufziehe.

00:28:27.000 --> 00:28:30.000
Und alles, was in dieser Area ist, ich kriege dann den Text davon.

00:28:30.000 --> 00:28:31.000
Ach was.

00:28:31.000 --> 00:28:38.000
Es gibt da auch Apps für und so, aber ich habe da nochmal überlegt und habe dann gesehen, nee, man braucht dafür keine App.

00:28:38.000 --> 00:28:47.000
Ich kann es einfach mit einem Apple Shortcut machen, weil nämlich unter macOS, das ist halt einer, der ziemlich sicher nur auf macOS funktioniert,

00:28:47.000 --> 00:28:49.000
diese ganze Funktionalität schon vorhanden ist.

00:28:49.000 --> 00:28:52.000
Man muss ihn nur clever miteinander verknüpfen in Form von einem Shortcut.

00:28:52.000 --> 00:28:59.000
Das heißt, du klickst auf das Ding dann drauf und dann ziehst du deine Area auf und dann kriegst du den Text, der da drin ist, einfach ins Clipboard kopieren.

00:28:59.000 --> 00:29:01.000
Dann kannst du irgendwo anders einfügen.

00:29:01.000 --> 00:29:11.000
Ziemlich nützlich, wenn man so im Bildungsbereich unterwegs ist, wo es so komische DRM-geschützte Sachen gibt, man die aber verändern möchte.

00:29:11.000 --> 00:29:15.000
Ich sage es mal so, wo man nichts kopieren darf offiziell.

00:29:15.000 --> 00:29:20.000
Ich meine, es gibt immer Wege und das ist zum Beispiel einer, der relativ nett ist.

00:29:20.000 --> 00:29:21.000
Ich nutze das auch bei mir auf dem Handy.

00:29:21.000 --> 00:29:29.000
Unter Pixel gibt es das ja auch, dass du Google Lens da quasi öffnen kannst und dir dann auch Text übersetzen lassen kannst oder halt den Text auch einfach markieren kannst.

00:29:29.000 --> 00:29:37.000
Und genau für solche Sachen von Text von einem Bild oder von irgendeiner Seite, die die Markierung deaktiviert hat und so.

00:29:37.000 --> 00:29:43.000
Genau, aber was jetzt hier, der Schritt, der jetzt hier gespart wird, ist, du könntest natürlich, auf dem Mac gibt es diese Funktionalität auch mit einem Bild.

00:29:43.000 --> 00:29:44.000
Ja, das ist kein Problem.

00:29:44.000 --> 00:29:49.000
Der Schritt, der jetzt hier aber gespart wird, ist, den Screenshot musst du einfach nicht machen.

00:29:49.000 --> 00:29:55.000
Du musst nicht ein Bild irgendwie machen und dann den Text da rauskopieren, sondern das wird sofort für dich gemacht,

00:29:55.000 --> 00:29:59.000
ohne dass du diesen Zwischenschritt mit Screenshot und dann irgendwo nochmal Öffnung und Text rauskopieren kannst.

00:29:59.000 --> 00:30:04.000
Du hast halt den Zwischenschritt nicht und das finde ich ziemlich cool, muss ich sagen.

00:30:04.000 --> 00:30:13.000
Also diverse Screenshot-Apps haben das auch mit eingebaut und es gibt auch diverse Apps, die genau diese Funktionalität haben.

00:30:13.000 --> 00:30:16.000
Aber ihr könnt es kostenlos haben, indem ihr meinen Shortcut verwendet.

00:30:16.000 --> 00:30:21.000
Also Link kommt in die Shownotes zu meinen Projects, wo das dann auch mit drin ist, diese zwei Shortcuts.

00:30:21.000 --> 00:30:27.000
Vielleicht gibt es irgendwann noch weitere. Ich habe auch noch viele, viele andere, aber die meisten sind so customised für mich.

00:30:27.000 --> 00:30:34.000
Die bringen, glaube ich, der Welt nichts. Wenn ich jetzt hier meine Podcast-Automatisierung veröffentlichen würde, würde das niemandem was bringen.

00:30:34.000 --> 00:30:42.000
Aber es macht Spaß, damit rumzuspielen. Und weil du vorhin noch Reddit angesprochen hast, ich hänge jetzt auch viel auf Reddit rum und lese viel da.

00:30:42.000 --> 00:30:47.000
Und da gibt es auch einen Apple Shortcuts Subreddit, wo viele interessante Sachen gepostet werden.

00:30:47.000 --> 00:30:53.000
Also das kann ich nur empfehlen. Das mit Shortcuts rumspielen auf dem Mac, das macht einfach Spaß.

00:30:53.000 --> 00:30:58.000
Und die gehen ja teilweise auch fürs iPhone, für die Watch und so weiter, also je nachdem.

00:30:58.000 --> 00:31:03.000
Ich habe zum Beispiel auch einen Shortcut, mit dem ich jeden Tag um dieselbe Zeit an dieselbe Person eine WhatsApp-Nachricht verschicke.

00:31:03.000 --> 00:31:04.000
Okay.

00:31:04.000 --> 00:31:08.000
Sowas geht auch. Also es geht alles Mögliche. Ja.

00:31:08.000 --> 00:31:13.000
Kommt immer so ein bisschen drauf an, auch wenn man jetzt Fremd-Apps verwendet oder Drittanbieter-Apps,

00:31:13.000 --> 00:31:17.000
inwieweit die App als Schnittstelle für die Shortcuts zur Verfügung stellen.

00:31:17.000 --> 00:31:20.000
Aber wie gesagt, eine WhatsApp-Nachricht schicken geht ganz easy.

00:31:20.000 --> 00:31:21.000
Ja, cool.

00:31:21.000 --> 00:31:26.000
Ja, genau. Kann man viele spannende Sachen mitmachen.

00:31:26.000 --> 00:31:31.000
Genau. Und zum Podcast noch ganz kurz, dann sind wir mit der Retro auch schon durch.

00:31:31.000 --> 00:31:35.000
Ich habe jetzt angefangen, weil es mich genervt hat, dass wir es noch nicht haben,

00:31:35.000 --> 00:31:40.000
für alle Folgen Transkripte bei uns einzubauen.

00:31:40.000 --> 00:31:43.000
Mit was? Lüfter erstellen?

00:31:43.000 --> 00:31:48.000
Weil ich die lokal generiere, dauert das so ein bisschen und mein Rechner wird dann heiß.

00:31:48.000 --> 00:31:50.000
Könnt ihr euch vorstellen, der hat ja auch keinen Lüfter und so.

00:31:50.000 --> 00:31:55.000
Ich mache dann immer so Lüfter nebendran und dann immer nur so vier, fünf hintereinander.

00:31:55.000 --> 00:31:56.000
Das ist dann aber auch schon viel.

00:31:56.000 --> 00:31:59.000
Mache ich mit Whisper.

00:31:59.000 --> 00:32:00.000
Aha.

00:32:00.000 --> 00:32:05.000
Genau. Und habe jetzt angefangen am Anfang so ein bisschen random.

00:32:05.000 --> 00:32:09.000
Also die letzten, die neuesten fünf Folgen oder so haben es sowieso,

00:32:09.000 --> 00:32:11.000
da habe ich es immer direkt schon mitgemacht.

00:32:11.000 --> 00:32:17.000
Und ich habe jetzt nochmal angefangen bei Folge 0 und bin jetzt, glaube ich, bei 30 oder so angelangt.

00:32:17.000 --> 00:32:18.000
Also doch schon recht weit.

00:32:18.000 --> 00:32:25.000
Genau. Also momentan sieht man die Transkripte noch nur in dem Hotlove-Player auf der Webseite.

00:32:25.000 --> 00:32:31.000
Da gibt es einen Transkriptereiter, wenn die Transkripte da sind.

00:32:31.000 --> 00:32:34.000
Diese haben auch keine Speaker Recognition, das ist dann einfach nur der Text.

00:32:34.000 --> 00:32:37.000
Aber ich finde das okay. Ich finde das reicht.

00:32:37.000 --> 00:32:41.000
Das ist schon mal besser als nix, auch so seotechnisch vielleicht.

00:32:41.000 --> 00:32:45.000
Ja, seotechnisch bringt es halt noch nix, meiner Meinung nach,

00:32:45.000 --> 00:32:48.000
weil ich nicht weiß, inwiefern die Suchmaschine da reingeht.

00:32:48.000 --> 00:32:52.000
Also ich glaube, die werden aber in dem Feed verlinkt.

00:32:52.000 --> 00:32:57.000
In dem Feed werden sie verlinkt zumindest als WebVTT-File.

00:32:57.000 --> 00:33:00.000
Und das wäre jetzt noch meine Frage gewesen.

00:33:00.000 --> 00:33:04.000
Ich habe das bei anderen Podcasts gesehen, es gibt unterschiedliche Ansätze,

00:33:04.000 --> 00:33:06.000
was man damit noch machen kann.

00:33:06.000 --> 00:33:08.000
Ich kenne zum Beispiel einen Podcast,

00:33:08.000 --> 00:33:11.000
der hat das auf der Webseite bei der einzelnen Folge

00:33:11.000 --> 00:33:14.000
noch als Element zum Aufklappen.

00:33:14.000 --> 00:33:17.000
Hier ist so das Transkript noch als HTML bei der Folge dabei,

00:33:17.000 --> 00:33:22.000
aber teilweise gibt es das auch als Download, als HTML-Download-File oder so.

00:33:22.000 --> 00:33:25.000
Falls ihr jemand seid, der sowas benutzt,

00:33:25.000 --> 00:33:28.000
nur dann möchte ich eigentlich eine Antwort von euch haben.

00:33:28.000 --> 00:33:31.000
Jemand, der wirklich Transkripte auch benutzt, aktiv.

00:33:31.000 --> 00:33:33.000
Warum auch immer.

00:33:33.000 --> 00:33:37.000
Dann würde ich gerne mal wissen, was für ein Format für euch gut ist

00:33:37.000 --> 00:33:40.000
oder wie ihr euch das am liebsten wünscht.

00:33:40.000 --> 00:33:43.000
Im Feed sind sie schon quasi mit drin.

00:33:43.000 --> 00:33:49.000
Das heißt, wenn ein Podcatcher das unterstützt, die auszulesen,

00:33:49.000 --> 00:33:52.000
sollte das TM funktionieren.

00:33:52.000 --> 00:33:55.000
Apple Podcasts macht, glaube ich, mittlerweile schon selbst Transkripte.

00:33:55.000 --> 00:33:58.000
Die transkribieren die Folgen mit was Eigenem.

00:33:58.000 --> 00:34:02.000
Aber mich würde interessieren, was wäre denn da für euch nützlich?

00:34:02.000 --> 00:34:05.000
Das kann ich jetzt schon mal vorweg spoilern.

00:34:05.000 --> 00:34:08.000
Ich werde nicht alle Feature-Wünsche einbauen,

00:34:08.000 --> 00:34:12.000
aber so ein Ding, so von wegen, ja, auf der Folgenseite mit zum Aufklappen,

00:34:12.000 --> 00:34:14.000
das wäre doch irgendwie noch ganz gut.

00:34:14.000 --> 00:34:17.000
Oder eh als Download, als HTML oder so, das wäre noch ganz gut.

00:34:17.000 --> 00:34:20.000
Ein so Ding können wir noch mit einbauen.

00:34:20.000 --> 00:34:24.000
Weil ich der Meinung bin, momentan nur innerhalb dieses Players

00:34:24.000 --> 00:34:26.000
ist das nicht so zugänglich für alle.

00:34:26.000 --> 00:34:28.000
Und auch Suchmaschinen wären es da.

00:34:28.000 --> 00:34:31.000
Wahrscheinlich, weiß ich nicht, ob sie es finden, wahrscheinlich eher nicht.

00:34:31.000 --> 00:34:34.000
Brauchen noch irgendwo einen anderen Ort, genau.

00:34:34.000 --> 00:34:37.000
Möchte aber, also rein technisch gesehen,

00:34:37.000 --> 00:34:41.000
dass das WebVTT, also das .vtt-File, das soll die Wahrheit bleiben

00:34:41.000 --> 00:34:43.000
und das Transkript wird daraus,

00:34:43.000 --> 00:34:47.000
das HTML oder so was wird daraus gebaut.

00:34:47.000 --> 00:34:50.000
Sollte aber kein so großer Aufwand sein.

00:34:50.000 --> 00:34:54.000
Genau, das wollte ich noch sagen, dass es das jetzt gibt.

00:34:54.000 --> 00:34:56.000
Cool.

00:34:58.000 --> 00:35:03.000
Dann kommen wir jetzt schon, nach einer halben Stunde, zum Thema.

00:35:03.000 --> 00:35:05.000
Und jetzt muss ich wieder hier kurz wechseln.

00:35:05.000 --> 00:35:07.000
Achso, was ist mit Werbung?

00:35:07.000 --> 00:35:10.000
Achso, ja, dann spiel doch noch was ab, such dir was aus.

00:35:10.000 --> 00:35:14.000
Ich, warte mal, jetzt muss ich hier.

00:35:14.000 --> 00:35:17.000
Was nehmen wir denn da?

00:35:17.000 --> 00:35:22.000
Ach Gott, ich habe den Überblick verloren bei uns.

00:35:22.000 --> 00:35:24.000
Ah, hier, da sind sie mit Werbung, genau.

00:35:24.000 --> 00:35:26.000
Wir nehmen einfach mal das.

00:35:26.000 --> 00:35:29.000
Der Gast gefällt, er spendet Geld.

00:35:29.000 --> 00:35:31.000
Das hatten wir schon länger nicht mehr.

00:35:31.000 --> 00:35:36.000
Ja, und das ist schon so lange her, dass wir das aufgenommen haben.

00:35:36.000 --> 00:35:38.000
Ihr habt es gehört.

00:35:38.000 --> 00:35:40.000
Eine kleine Spende hilft uns.

00:35:40.000 --> 00:35:43.000
Es schadet nie.

00:35:43.000 --> 00:35:48.000
Property haben wir nicht, wir gehen direkt zum Tagesthema.

00:35:48.000 --> 00:35:53.000
Hier ist WWSIV mit dem Tagesthema.

00:35:57.000 --> 00:36:01.000
Wir haben noch gar nicht gesagt, um was es in der Folge heute geht.

00:36:01.000 --> 00:36:03.000
Nee, nur so kryptisch.

00:36:03.000 --> 00:36:06.000
Wir machen mit unserer HTML-Serie weiter.

00:36:06.000 --> 00:36:09.000
Tatsächlich, oh Wunder, oh Überraschung.

00:36:09.000 --> 00:36:14.000
Nachdem wir uns in der letzten HTML-Serienfolge

00:36:14.000 --> 00:36:17.000
darum gekümmert haben, um Embedded Content,

00:36:17.000 --> 00:36:20.000
also Dinge, die man in HTML mit reinpflanzt,

00:36:20.000 --> 00:36:23.000
die aber eigentlich kein HTML sind,

00:36:23.000 --> 00:36:26.000
kümmern wir uns um was Ähnliches.

00:36:26.000 --> 00:36:29.000
Auch Dinge, die in HTML reingepflanzt werden,

00:36:29.000 --> 00:36:32.000
die kein HTML sind, aber trotzdem im HTML geschrieben werden

00:36:32.000 --> 00:36:35.000
und nicht als Extradatei irgendwo liegen müssen.

00:36:35.000 --> 00:36:38.000
Können teilweise, aber nicht müssen.

00:36:38.000 --> 00:36:43.000
Und zwar geht es heute um die Elemente SVG und Math.

00:36:43.000 --> 00:36:47.000
Und da das zwei komplett eigene Sprachen eigentlich sind,

00:36:47.000 --> 00:36:50.000
die nicht HTML sind, aber XML-konform,

00:36:50.000 --> 00:36:54.000
kann man die auch in HTML direkt schreiben.

00:36:54.000 --> 00:37:00.000
Ja, und dann würde ich sagen, können wir ja mit SVG schon mal anfangen.

00:37:00.000 --> 00:37:04.000
Genau. Und da das so ist, dass das eigentlich eigene Sprachen sind,

00:37:04.000 --> 00:37:08.000
werden wir jetzt auch nicht komplett das auseinandernehmen jeweils.

00:37:08.000 --> 00:37:11.000
Weil ich glaube, für SVG könnte man schon drei Folgen füllen

00:37:11.000 --> 00:37:14.000
und für MathML wahrscheinlich auch.

00:37:14.000 --> 00:37:17.000
Das hast du dir eher angeschaut.

00:37:17.000 --> 00:37:20.000
Deswegen haben wir uns so ein bisschen rausgepickt,

00:37:20.000 --> 00:37:22.000
was so das Wichtigste ist.

00:37:22.000 --> 00:37:25.000
Oder im Fall von SVG habe ich mir das rausgepickt,

00:37:25.000 --> 00:37:27.000
was ich selber noch nicht kannte

00:37:27.000 --> 00:37:30.000
oder mit was ich jetzt das erste Mal rumgespielt habe

00:37:30.000 --> 00:37:32.000
jetzt für die Vorbereitung.

00:37:32.000 --> 00:37:34.000
Aber Sarah, was ist denn eigentlich SVG?

00:37:34.000 --> 00:37:38.000
Das heißt scalable vector graphics, also skalierbare Vektorgrafiken.

00:37:38.000 --> 00:37:41.000
Oh, das klingt ja toll. Wofür setzt man das denn ein?

00:37:41.000 --> 00:37:44.000
Ich glaube, ich muss mehr an den Kopf fassen.

00:37:44.000 --> 00:37:46.000
Ja, ich frage jetzt mal ernsthaft.

00:37:46.000 --> 00:37:49.000
Ich meine, das weiß ja vielleicht nicht jeder, der hier zuhört.

00:37:49.000 --> 00:37:51.000
Genau, also skalierbare Vektorgrafiken

00:37:51.000 --> 00:37:53.000
im Gegensatz zu Pixelgrafiken.

00:37:53.000 --> 00:37:56.000
Aber ich glaube, dass wir darüber auch schon gesprochen haben.

00:37:56.000 --> 00:37:59.000
Also Folge 24, Editor, IDE und CMD.

00:37:59.000 --> 00:38:00.000
Aber zwei Sätze.

00:38:00.000 --> 00:38:01.000
SVG, oje, Mini.

00:38:01.000 --> 00:38:05.000
Nee, wir haben da auch sogar was als Property gehabt,

00:38:05.000 --> 00:38:07.000
was ich vorhin dachte so, oh cool, das kenne ich nicht,

00:38:07.000 --> 00:38:08.000
da muss ich drüber sprechen.

00:38:08.000 --> 00:38:10.000
Aber wir haben es schon besprochen.

00:38:10.000 --> 00:38:12.000
Genau, Vektorgrafiken.

00:38:12.000 --> 00:38:13.000
Und da hatten wir es auch schon mal in der Folge,

00:38:13.000 --> 00:38:15.000
wo wir über krasse Bildschirme,

00:38:15.000 --> 00:38:17.000
wo du über Vektorbildschirme gesprochen hast.

00:38:17.000 --> 00:38:20.000
Einmal drüber, was das eigentlich ist.

00:38:20.000 --> 00:38:22.000
Also klar, Pixelgrafiken, da weiß man,

00:38:22.000 --> 00:38:25.000
die Grafik hat irgendwie von mir aus 16x16 Pixel.

00:38:25.000 --> 00:38:30.000
Und der Pixel in Spalte 3 von der zweiten Zeile,

00:38:30.000 --> 00:38:31.000
der ist rot.

00:38:31.000 --> 00:38:34.000
Und dann kann ich die natürlich nicht unendlich skalieren,

00:38:34.000 --> 00:38:36.000
weil dann muss da berechnet werden,

00:38:36.000 --> 00:38:38.000
wenn ich das jetzt doppelt so groß mache,

00:38:38.000 --> 00:38:41.000
wo ist dann auch noch rot und so.

00:38:41.000 --> 00:38:42.000
Also man hat einen Qualitätsverlust.

00:38:42.000 --> 00:38:44.000
Und skalierbare Vektorgrafiken,

00:38:44.000 --> 00:38:47.000
die arbeiten eben mit mathematischen Vektoren.

00:38:47.000 --> 00:38:50.000
Deswegen passt das eigentlich auch zu MathML ganz gut

00:38:50.000 --> 00:38:52.000
und zu Mathematik.

00:38:52.000 --> 00:38:55.000
Das heißt, Vektoren beschreiben einfach,

00:38:55.000 --> 00:38:59.000
das geht von dem Punkt aus so lange in die Richtung,

00:38:59.000 --> 00:39:01.000
zum Beispiel, wenn ich jetzt eine Linie habe.

00:39:01.000 --> 00:39:05.000
Oder wenn ich so ein virtuelles,

00:39:05.000 --> 00:39:10.000
internes XY-Koordinatensystem habe,

00:39:10.000 --> 00:39:14.000
dann geht es halt von Punkt 0 bis Punkt 100.

00:39:14.000 --> 00:39:16.000
Also 0, 0 bis 100, 100.

00:39:16.000 --> 00:39:19.000
Dann habe ich eine Diagonale, wenn es jetzt 100 mal 100 groß ist.

00:39:19.000 --> 00:39:21.000
Aber ich kann es eben auch skalieren.

00:39:21.000 --> 00:39:24.000
Und dann wird das eben berechnet, bis wohin muss es dann gehen.

00:39:24.000 --> 00:39:27.000
Und dann kann ich das eben unendlich skalieren,

00:39:27.000 --> 00:39:29.000
ohne dass ich einen Qualitätsverlust habe.

00:39:29.000 --> 00:39:32.000
Im Prinzip wird mit Code die Form beschrieben.

00:39:32.000 --> 00:39:37.000
Und dann, der Browser zeichnet das dann im Prinzip für einen.

00:39:37.000 --> 00:39:41.000
Das wird natürlich für die Darstellung auf dem Bildschirm am Ende wieder gerastert.

00:39:41.000 --> 00:39:44.000
Aber davon kriegt man als User natürlich nicht viel mit,

00:39:44.000 --> 00:39:46.000
weil ich kann da reinzoomen, wie ich möchte.

00:39:46.000 --> 00:39:47.000
Es bleibt immer scharf.

00:39:47.000 --> 00:39:49.000
Und man sieht, es ist jetzt schon so alt.

00:39:49.000 --> 00:39:52.000
Das war zum Beispiel auch was, SVG.

00:39:52.000 --> 00:39:58.000
Wann war der initial draft?

00:39:58.000 --> 00:40:03.000
War, glaube ich, 1999, wenn ich mich recht erinnere.

00:40:03.000 --> 00:40:05.000
Ich finde es jetzt nur auf die Stelle nicht.

00:40:05.000 --> 00:40:08.000
12. August 1999.

00:40:08.000 --> 00:40:10.000
Und das fand ich echt krass,

00:40:10.000 --> 00:40:14.000
weil ich mit SVG erst viel, viel später in Berührung gekommen bin.

00:40:14.000 --> 00:40:20.000
Wahrscheinlich 2010 und später, würde ich sagen.

00:40:20.000 --> 00:40:23.000
Ich weiß, in unserer Ausbildung hatten wir das.

00:40:23.000 --> 00:40:26.000
Da war das schon, und ganz viele haben es noch nicht benutzt.

00:40:26.000 --> 00:40:29.000
Und ich habe mich immer gefragt, warum benutzt das eigentlich keiner?

00:40:29.000 --> 00:40:33.000
Und dass das aber schon so alt ist, die Idee dahinter,

00:40:33.000 --> 00:40:35.000
das hat mich dann doch überrascht.

00:40:35.000 --> 00:40:38.000
Ich würde mal gerne gucken, keine IUs.

00:40:38.000 --> 00:40:42.000
Ich erinnere mich nämlich, dass ich bei einem Projekt als Freelancerin,

00:40:42.000 --> 00:40:45.000
da wurde noch so eine Technik eingebaut, wo quasi abgefragt wurde,

00:40:45.000 --> 00:40:47.000
ja, werden denn SVG-Grafiken überhaupt unterstützt?

00:40:47.000 --> 00:40:51.000
Wenn ja, dann nimm das Sprite, und wenn nicht, dann nimm ein anderes.

00:40:51.000 --> 00:40:55.000
Jetzt gucken wir mal, du weißt vielleicht, von was ich spreche.

00:40:55.000 --> 00:40:58.000
Jetzt gucken wir mal, wann das ...

00:40:58.000 --> 00:41:01.000
Firefox 2 hatte schon partial Support dafür.

00:41:01.000 --> 00:41:03.000
Also ich weiß gar nicht, warum ...

00:41:03.000 --> 00:41:05.000
Ach, genau, der Internet Explorer war so das Problem,

00:41:05.000 --> 00:41:08.000
weil damals war noch IE8 verbreitet, und der konnte es gar nicht.

00:41:08.000 --> 00:41:13.000
Und erst ab 9 wurde das dann so wirklich unterstützt.

00:41:13.000 --> 00:41:17.000
Also das war mal wieder der gute alte IE, der da zurückgehalten hat.

00:41:17.000 --> 00:41:22.000
Aber die anderen Browser haben das eigentlich schon relativ früh adoptiert.

00:41:22.000 --> 00:41:26.000
Genau, also das war einfach schon das Erste, was mich gewundert hat.

00:41:26.000 --> 00:41:28.000
Krass, so alt ist SVG schon.

00:41:28.000 --> 00:41:32.000
Und ja, so ganz kurz zu den geometrischen Formen.

00:41:32.000 --> 00:41:36.000
Aber da werden wir jetzt nicht alle Properties und wie die genau aufgebaut sind machen.

00:41:36.000 --> 00:41:40.000
Also es gibt Circle, ein Element für Kreise.

00:41:40.000 --> 00:41:46.000
Es gibt Ellipse, also da ist dann wirklich nur der Kreis sitzt dort und dort, da sitzt die Mitte.

00:41:46.000 --> 00:41:48.000
Und der Radius ist so und so.

00:41:48.000 --> 00:41:51.000
Und dann kann ich das füllen, oder ich kann auch einen Stroke außenrum setzen.

00:41:51.000 --> 00:41:58.000
Wenn ich eine Ellipse will, dann muss ich natürlich, dann habe ich ja andere Werte für den Radius nach oben und unten.

00:41:58.000 --> 00:42:00.000
Andere für rechts und links quasi.

00:42:00.000 --> 00:42:04.000
Dann brauche ich ein eigenes Element, das heißt Ellipse.

00:42:04.000 --> 00:42:08.000
Huch, jetzt ist mir hier Trello gesprungen.

00:42:08.000 --> 00:42:09.000
Ah, das war ich, Entschuldigung.

00:42:09.000 --> 00:42:10.000
Ah, das warst du?

00:42:10.000 --> 00:42:12.000
Ich habe noch was hochgeschoben.

00:42:12.000 --> 00:42:14.000
Ah, hast du doch jetzt umgetauscht?

00:42:14.000 --> 00:42:16.000
Ne, ich habe nichts getauscht.

00:42:16.000 --> 00:42:19.000
Ich habe nur in dem Moment eins nach oben geschoben.

00:42:19.000 --> 00:42:24.000
Genau, dann gibt es das Line Element, was ich vorhin schon gesagt habe.

00:42:24.000 --> 00:42:27.000
Da gebe ich den Startpunkt, den Endpunkt an.

00:42:27.000 --> 00:42:35.000
Für Path kann dann eben auch so richtig mit Vektoren und man kennt das,

00:42:35.000 --> 00:42:38.000
wenn man mit Inkscape oder mit Illustrator arbeitet,

00:42:38.000 --> 00:42:43.000
dass man diese Anfasser an den Kurven hat, wo ich dann optisch sagen kann,

00:42:43.000 --> 00:42:48.000
wie ist die Verteilung quasi auf der Kurve und dadurch dann die Formen verändern kann.

00:42:48.000 --> 00:42:54.000
Polygon ist im Endeffekt einfach ein Vieleck, das am Ende geschlossen ist

00:42:54.000 --> 00:42:58.000
und Polyline ist dagegen einfach mehrere Linien aneinander,

00:42:58.000 --> 00:43:02.000
die aber nicht zwingend wieder am Schluss geschlossen werden.

00:43:02.000 --> 00:43:05.000
Und Rect ist einfach ein Rechteck.

00:43:05.000 --> 00:43:11.000
Das sind so die grundgeometrischen Formen, die ich machen kann

00:43:11.000 --> 00:43:15.000
und damit gerade mit den Freeform-Sachen, also Polyline, Polygon,

00:43:15.000 --> 00:43:20.000
da kann ich natürlich alle Formen erzeugen, die ich möchte.

00:43:20.000 --> 00:43:26.000
Und dann bin ich als erstes vorhin auf etwas gestoßen

00:43:26.000 --> 00:43:29.000
und das ist eben aus dieser Folge 24, wo wir da schon mal drüber gesprochen haben,

00:43:29.000 --> 00:43:34.000
das war Foreign Object, da kann ich HTML direkt in SVG nutzen.

00:43:34.000 --> 00:43:38.000
Also ich kann ein SVG in eine HTML-Seite einbinden

00:43:38.000 --> 00:43:42.000
und in dem SVG dann wiederum HTML benutzen, wenn ich das möchte.

00:43:42.000 --> 00:43:47.000
Und tatsächlich ist es gar nicht mal so unnützlich,

00:43:47.000 --> 00:43:53.000
weil Text fließen lassen in SVGs, das ist so ein bisschen pain in the ass,

00:43:53.000 --> 00:43:57.000
weil man, also ich hatte das mal in einem Projekt,

00:43:57.000 --> 00:44:00.000
wo wir so dynamisch Content ausgetauscht haben und Animationen

00:44:00.000 --> 00:44:04.000
und da musste dann wirklich der Text umgebrochen werden,

00:44:04.000 --> 00:44:08.000
so dass man guckt, ist das jetzt breiter als das Parent-Element

00:44:08.000 --> 00:44:13.000
und dann setzt den T-Span, T-Span ist auch wieder für unter,

00:44:13.000 --> 00:44:17.000
also in einem Text-Element für Untertexte,

00:44:17.000 --> 00:44:20.000
die ich dann under-style oder positionieren kann.

00:44:20.000 --> 00:44:23.000
Und dann mussten wir wirklich diese Zeilen-Umbrüche manuell machen,

00:44:23.000 --> 00:44:25.000
weil das sonst nicht funktioniert hatte.

00:44:25.000 --> 00:44:27.000
Und dann habe ich mir das heute so gedacht,

00:44:27.000 --> 00:44:29.000
also da wäre ja eigentlich Foreign-Element,

00:44:29.000 --> 00:44:31.000
wenn ich da einfach ein Diff reingepackt hätte,

00:44:31.000 --> 00:44:35.000
das dann die volle Breite einnimmt, wäre vielleicht die Lösung gewesen.

00:44:35.000 --> 00:44:37.000
Also wie gesagt, nochmal in Folge 24 nachhören,

00:44:37.000 --> 00:44:39.000
da haben wir da schon drüber gesprochen.

00:44:39.000 --> 00:44:45.000
Ich möchte auch noch an der Stelle Folge Nummer 22 einfügen,

00:44:45.000 --> 00:44:48.000
weil da haben wir tatsächlich über SVG-Sprites,

00:44:48.000 --> 00:44:50.000
also ich finde den Folgentitel immer noch grandios,

00:44:50.000 --> 00:44:53.000
SVG-Sprites und andere Icon-Artigkeiten.

00:44:53.000 --> 00:44:55.000
Ja, da bin ich vorhin auch drauf gestoßen.

00:44:55.000 --> 00:44:57.000
Genau, da ging es genau um dieses Thema,

00:44:57.000 --> 00:45:00.000
wie kann man eigentlich, und das ist jetzt wirklich schon,

00:45:00.000 --> 00:45:03.000
ich frage mich schon, ob das sehr veraltetes Wissen ist,

00:45:03.000 --> 00:45:05.000
weil ich mich schon länger nicht mehr mit der Thematik beschäftigt habe.

00:45:05.000 --> 00:45:08.000
Das ist jetzt echt schon eine Folge, die ist jetzt schon vier Jahre alt.

00:45:08.000 --> 00:45:13.000
Also vom 28.02.2021, da haben wir drüber gesprochen,

00:45:13.000 --> 00:45:18.000
wie man SVGs sinnvollerweise für Icons einsetzen kann auf Webseiten

00:45:18.000 --> 00:45:23.000
und wie man da möglichst wenig neue Requests hat,

00:45:23.000 --> 00:45:25.000
wie man da zum Beispiel Sprites bauen kann,

00:45:25.000 --> 00:45:28.000
aber ohne dass irgendwie alles,

00:45:28.000 --> 00:45:31.000
trotzdem dass man einzelne Files vielleicht noch irgendwo liegen hat

00:45:31.000 --> 00:45:33.000
oder zumindest extern und so.

00:45:33.000 --> 00:45:35.000
Da gibt es verschiedene Techniken.

00:45:35.000 --> 00:45:38.000
Und mich würde echt mal interessieren,

00:45:38.000 --> 00:45:40.000
ob es da mittlerweile was Neueres gibt.

00:45:40.000 --> 00:45:42.000
Gibt es mittlerweile und vielleicht an diejenigen,

00:45:42.000 --> 00:45:45.000
die sich auskennen oder das in letzter Zeit mal gemacht haben,

00:45:45.000 --> 00:45:48.000
würde ich echt mal gerne die Frage stellen.

00:45:48.000 --> 00:45:51.000
Bitte in die Kommentare vielleicht dann mal antworten.

00:45:51.000 --> 00:45:56.000
Gibt es mittlerweile was Schlaueres als so ein SVG-Sprite mit Ahref,

00:45:56.000 --> 00:46:00.000
wo man die einzelnen Bereiche per ID referenziert und dann anzieht

00:46:00.000 --> 00:46:02.000
oder ist das immer noch state of the art?

00:46:02.000 --> 00:46:05.000
Das würde mich echt mal interessieren.

00:46:05.000 --> 00:46:06.000
Da habe ich jetzt auch was dazu.

00:46:06.000 --> 00:46:08.000
Deswegen habe ich das jetzt gerade auch noch ein bisschen umgeschoben

00:46:08.000 --> 00:46:10.000
in den Notizen, weil wir hatten nämlich,

00:46:10.000 --> 00:46:12.000
ich weiß nicht, ob diese Demo mit dem SVG-Sprite

00:46:12.000 --> 00:46:17.000
auch dieser Folge entsprungen ist, weil ich finde da den Link dazu nicht.

00:46:17.000 --> 00:46:19.000
Mal gucken, CodePen.

00:46:19.000 --> 00:46:21.000
Aber das ist meine Demo, die ich da gebaut hatte.

00:46:21.000 --> 00:46:25.000
Bei irgendwas anderem hatten wir nämlich mal eine Demo gebaut

00:46:25.000 --> 00:46:27.000
und die verlinke ich auch noch, die alte Demo.

00:46:27.000 --> 00:46:29.000
Und da haben wir das eben genauso gemacht,

00:46:29.000 --> 00:46:33.000
dass wir Elemente wiederverwenden per Symbol und Use.

00:46:33.000 --> 00:46:35.000
Und wenn du auch drauf gehst, dann kannst du gucken,

00:46:35.000 --> 00:46:37.000
so der Unterschied, wenn ich es als Image einbinde

00:46:37.000 --> 00:46:40.000
oder als Inline-SVG mit Use und dass man dann auch

00:46:40.000 --> 00:46:44.000
über CSS-Variablen die Farbe ändern kann.

00:46:44.000 --> 00:46:48.000
Und da haben wir das eben, also die einzelnen Elemente haben IDs

00:46:48.000 --> 00:46:51.000
und per Use kann ich dann eben das SVG anzapfen

00:46:51.000 --> 00:46:55.000
und als Hash hintendran die ID von dem Element,

00:46:55.000 --> 00:46:58.000
von dem Symbol quasi direkt ansprechen.

00:46:58.000 --> 00:47:01.000
Und dann wird nur das auch tatsächlich eingebunden.

00:47:01.000 --> 00:47:04.000
Und ich bin jetzt vorhin noch auf etwas anderes gestoßen,

00:47:04.000 --> 00:47:10.000
und zwar das View-Element, also das Kind-Element View.

00:47:10.000 --> 00:47:13.000
Das muss ich auch noch hochschieben.

00:47:13.000 --> 00:47:17.000
Und da habe ich nämlich auch eine Demo dazu noch gebastelt.

00:47:17.000 --> 00:47:26.000
Und zwar kann man quasi vorgegebene Views in dem SVG festlegen.

00:47:26.000 --> 00:47:29.000
Das heißt, ich verschiebe den Viewport,

00:47:29.000 --> 00:47:32.000
beziehungsweise ich habe dieses Viewbox-Attribut,

00:47:32.000 --> 00:47:35.000
was eben dieses Koordinatensystem festlegt,

00:47:35.000 --> 00:47:37.000
das Interne für dieses SVG-File.

00:47:37.000 --> 00:47:41.000
Und ich kann dann mit einem Viewport,

00:47:41.000 --> 00:47:45.000
also den kann ich benennen und kann dann sagen,

00:47:45.000 --> 00:47:50.000
auch über ein Hash in der URL, das referenzierbar machen.

00:47:50.000 --> 00:47:54.000
Und ich glaube, ich habe den Link zu meiner Demo,

00:47:54.000 --> 00:47:56.000
den habe ich da gar nicht rein, warte mal.

00:47:56.000 --> 00:48:00.000
CodePen, CodePen, da.

00:48:00.000 --> 00:48:02.000
Der muss natürlich auch noch rein,

00:48:02.000 --> 00:48:04.000
damit du den auch angucken kannst.

00:48:04.000 --> 00:48:06.000
Zack.

00:48:06.000 --> 00:48:09.000
Genau, da habe ich,

00:48:09.000 --> 00:48:12.000
jetzt muss ich wieder blöd rumscrollen.

00:48:12.000 --> 00:48:14.000
Genau, da habe ich eine CodePen-Demo,

00:48:14.000 --> 00:48:16.000
View and Preserve Aspect Ratio,

00:48:16.000 --> 00:48:19.000
da wird auch noch das eine Attribut beleuchtet.

00:48:19.000 --> 00:48:21.000
Und das ist also,

00:48:21.000 --> 00:48:23.000
vielleicht kannst du auch dir das Bild selbst

00:48:23.000 --> 00:48:25.000
in einem anderen Tab mal aufmachen

00:48:25.000 --> 00:48:27.000
und in den Quellcode reingucken.

00:48:27.000 --> 00:48:29.000
Da siehst du dann in Devs,

00:48:29.000 --> 00:48:31.000
also das Devs-Tag ist für Sachen,

00:48:31.000 --> 00:48:33.000
die nicht gerendert werden sollen.

00:48:33.000 --> 00:48:35.000
Also da kann ich Farbverläufe darin definieren

00:48:35.000 --> 00:48:37.000
oder eben so Symbole,

00:48:37.000 --> 00:48:39.000
die nicht direkt erscheinen sollen,

00:48:39.000 --> 00:48:41.000
sondern die ich nur an anderer Stelle

00:48:41.000 --> 00:48:43.000
referenzieren können möchte.

00:48:43.000 --> 00:48:45.000
Die kann ich da reinpacken.

00:48:45.000 --> 00:48:47.000
Und da kann ich eben View ID ist gleich,

00:48:47.000 --> 00:48:49.000
zum Beispiel View 1

00:48:49.000 --> 00:48:51.000
und kann damit halt wirklich

00:48:51.000 --> 00:48:53.000
einen Ausschnitt aus dem Bild

00:48:53.000 --> 00:48:55.000
wählen, der dann dargestellt werden soll,

00:48:55.000 --> 00:48:57.000
wenn ich diesen Hash angebe.

00:48:57.000 --> 00:48:59.000
Und damit könnte man halt auch

00:48:59.000 --> 00:49:01.000
sagen, ich habe ganz viele

00:49:01.000 --> 00:49:03.000
verschiedene Icons

00:49:03.000 --> 00:49:05.000
und ich sehe die auch sichtbar

00:49:05.000 --> 00:49:07.000
in einem Raster, wenn ich die Datei selbst aufrufe.

00:49:07.000 --> 00:49:09.000
Aber wenn ich die anspreche

00:49:09.000 --> 00:49:11.000
über diese View ID, dann

00:49:11.000 --> 00:49:13.000
verschiebt sich eben der gewählte Ausschnitt

00:49:13.000 --> 00:49:15.000
und ich sehe wirklich nur das

00:49:15.000 --> 00:49:17.000
eine Icon. Und das hat den Vorteil,

00:49:17.000 --> 00:49:19.000
dass ich es halt nicht als

00:49:19.000 --> 00:49:21.000
Inline-SVG mit Views

00:49:21.000 --> 00:49:23.000
machen muss,

00:49:23.000 --> 00:49:25.000
sondern ich kann wirklich

00:49:25.000 --> 00:49:27.000
Image Source ist gleich

00:49:27.000 --> 00:49:29.000
und dann in dem Fall ist es

00:49:29.000 --> 00:49:31.000
Views.svg, also

00:49:31.000 --> 00:49:33.000
liegt halt auf unserem Server und dann

00:49:33.000 --> 00:49:35.000
Hashtag View 2 auswählen

00:49:35.000 --> 00:49:37.000
und natürlich heißt es dann nicht View 2, sondern

00:49:37.000 --> 00:49:39.000
irgendwie Icon.

00:49:39.000 --> 00:49:41.000
Das ging aber mit dem Views auch,

00:49:41.000 --> 00:49:43.000
dass man es extern hinlegt.

00:49:43.000 --> 00:49:45.000
Bist du sicher?

00:49:45.000 --> 00:49:47.000
Dass die Datei extern

00:49:47.000 --> 00:49:49.000
liegt, ja, aber du musst es

00:49:49.000 --> 00:49:51.000
einbinden musstest du es in dem du svg

00:49:51.000 --> 00:49:53.000
Tag nimmst und in dem

00:49:53.000 --> 00:49:55.000
dann Views Tag verwendest und dann die

00:49:55.000 --> 00:49:57.000
externe URL angibst.

00:49:57.000 --> 00:49:59.000
Und das brauchst du halt nicht, also du

00:49:59.000 --> 00:50:01.000
sparst dir halt das svg rumgewrappe

00:50:01.000 --> 00:50:03.000
und Views Tag, sondern du kannst es wirklich

00:50:03.000 --> 00:50:05.000
einfach als Bild einbinden

00:50:05.000 --> 00:50:07.000
und per Hash dann den Ausschnitt

00:50:07.000 --> 00:50:09.000
angeben, der dann benutzt werden soll.

00:50:09.000 --> 00:50:11.000
Das ist smart.

00:50:11.000 --> 00:50:13.000
Ich glaube, dass

00:50:13.000 --> 00:50:15.000
mit dem Use wollte man aber auch

00:50:15.000 --> 00:50:17.000
deswegen machen, weil man es dann von außen noch

00:50:17.000 --> 00:50:19.000
stylen konnte und ich weiß nicht, ob das

00:50:19.000 --> 00:50:21.000
auf diese Weise noch geht. Genau, das geht natürlich per Image nicht.

00:50:21.000 --> 00:50:23.000
Nee, genau. Das sind halt

00:50:23.000 --> 00:50:25.000
zwei verschiedene Anwendungsfälle. Wenn ich das nicht brauche,

00:50:25.000 --> 00:50:27.000
dann ist es für mich vielleicht einfacher, ich kann

00:50:27.000 --> 00:50:29.000
einfach ein Image Tag reinknallen.

00:50:29.000 --> 00:50:31.000
Wenn ich es halt stylen möchte

00:50:31.000 --> 00:50:33.000
und Farben, also irgendwie

00:50:33.000 --> 00:50:35.000
Custom Properties

00:50:35.000 --> 00:50:37.000
da übergeben möchte, klar, dann

00:50:37.000 --> 00:50:39.000
muss ich es in das svg einbinden.

00:50:39.000 --> 00:50:41.000
Aber auch das geht halt dann, indem ich

00:50:41.000 --> 00:50:43.000
das svg

00:50:43.000 --> 00:50:45.000
einbinde mit diesem Hash hinten

00:50:45.000 --> 00:50:47.000
dran für den View.

00:50:47.000 --> 00:50:49.000
Genau.

00:50:49.000 --> 00:50:53.000
Ja, das

00:50:53.000 --> 00:50:55.000
war das. Spannend.

00:50:55.000 --> 00:50:57.000
Ich habe auch gar nicht mehr so viel.

00:50:57.000 --> 00:50:59.000
Ich habe noch dieses, genau, Preserve Aspect

00:50:59.000 --> 00:51:01.000
Ratio, das sieht man auch in der Demo.

00:51:01.000 --> 00:51:03.000
Also wenn man das svg

00:51:03.000 --> 00:51:05.000
selbst reinguckt,

00:51:05.000 --> 00:51:07.000
da gibt es den gleichen

00:51:07.000 --> 00:51:09.000
View quasi zweimal. Nur einmal habe ich

00:51:09.000 --> 00:51:11.000
das Attribut gesetzt

00:51:11.000 --> 00:51:13.000
mit der Aspect Ratio

00:51:13.000 --> 00:51:15.000
und einmal nicht. Und dann sieht man halt

00:51:15.000 --> 00:51:17.000
das

00:51:17.000 --> 00:51:19.000
muss ich selber nochmal reingucken

00:51:19.000 --> 00:51:21.000
genau, also

00:51:21.000 --> 00:51:23.000
wenn ich da

00:51:23.000 --> 00:51:25.000
Meet

00:51:25.000 --> 00:51:27.000
nehme, dann nimmt es halt wirklich den

00:51:27.000 --> 00:51:29.000
Ausschnitt, der da angegeben ist

00:51:29.000 --> 00:51:31.000
und ich sehe halt

00:51:31.000 --> 00:51:33.000
bei einer anderen Aspect Ratio werden dann Sachen abgeschnitten

00:51:33.000 --> 00:51:35.000
und wenn ich jetzt x mit

00:51:35.000 --> 00:51:37.000
y mit und slice als

00:51:37.000 --> 00:51:39.000
Keybind angebe für Preserve Aspect Ratio

00:51:39.000 --> 00:51:41.000
dann habe ich quasi diesen

00:51:41.000 --> 00:51:43.000
ja wie heißt das, Fit Object

00:51:43.000 --> 00:51:45.000
oder Object Fit

00:51:45.000 --> 00:51:47.000
simuliert, das heißt es

00:51:47.000 --> 00:51:49.000
wird dann eben dieser Bereich skaliert

00:51:49.000 --> 00:51:51.000
und trotz der anderen Auflösung wird es halt dann

00:51:51.000 --> 00:51:53.000
oben und unten abgeschnitten, statt dass es eingepasst

00:51:53.000 --> 00:51:55.000
wird, was so der Default-File

00:51:55.000 --> 00:51:57.000
von SVG ist. Ich hoffe du weißt

00:51:57.000 --> 00:51:59.000
was ich meine. Ich bin

00:51:59.000 --> 00:52:01.000
mir nicht sicher. Also bei den, ne, oben ist

00:52:01.000 --> 00:52:03.000
das normale SVG und dann sind diese Views

00:52:03.000 --> 00:52:05.000
ähm, da habe ich

00:52:05.000 --> 00:52:07.000
die Aspect-Ratio geändert und dann ist das

00:52:07.000 --> 00:52:09.000
halt rechts und links abgeschnitten und

00:52:09.000 --> 00:52:11.000
bei den anderen geht es über die volle Breite.

00:52:11.000 --> 00:52:13.000
Ja, ja.

00:52:13.000 --> 00:52:15.000
Ja.

00:52:15.000 --> 00:52:17.000
Genau, dann

00:52:17.000 --> 00:52:19.000
habe ich noch Text-Path

00:52:19.000 --> 00:52:21.000
mir angeschaut, weil da war was, was ein bisschen

00:52:21.000 --> 00:52:23.000
verwirrend war. Ich dachte nämlich zuerst,

00:52:23.000 --> 00:52:25.000
man kann das sowohl über ein Href-Attribut,

00:52:25.000 --> 00:52:27.000
also Text-Path generell heißt, ich habe einen

00:52:27.000 --> 00:52:29.000
Pfad und auf dem kann ich Text positionieren,

00:52:29.000 --> 00:52:31.000
sodass der dann eben dieser, dieser

00:52:31.000 --> 00:52:33.000
Kurve, diesem Pfad folgt.

00:52:33.000 --> 00:52:35.000
Und zuerst sah das für mich so aus

00:52:35.000 --> 00:52:37.000
nach der MDN, dass es entweder

00:52:37.000 --> 00:52:39.000
ein Href-Attribut gibt,

00:52:39.000 --> 00:52:41.000
das verwendet wird, wo ich dann eben

00:52:41.000 --> 00:52:43.000
einen Pfad referenzieren kann, oder dass

00:52:43.000 --> 00:52:45.000
ich auch direkt ein Path-Attribut auf das

00:52:45.000 --> 00:52:47.000
Text-Path-Element setzen kann.

00:52:47.000 --> 00:52:49.000
Und das habe ich ausprobiert und es hat

00:52:49.000 --> 00:52:51.000
aber nicht funktioniert. Und dann habe ich festgestellt,

00:52:51.000 --> 00:52:53.000
dass nur Firefox dieses Path-Attribut

00:52:53.000 --> 00:52:55.000
überhaupt implementiert hat.

00:52:55.000 --> 00:52:57.000
Und da die MDN halt

00:52:57.000 --> 00:52:59.000
von Mozilla ist und Firefox auch,

00:52:59.000 --> 00:53:01.000
haben die das aufgeführt, als wäre es einfach

00:53:01.000 --> 00:53:03.000
ein normales Attribut, aber es hat

00:53:03.000 --> 00:53:05.000
kein anderer Browser hat das

00:53:05.000 --> 00:53:07.000
implementiert. Das heißt,

00:53:07.000 --> 00:53:09.000
man nimmt eben auch wieder so ein

00:53:09.000 --> 00:53:11.000
in diesem Devs-Element, was man

00:53:11.000 --> 00:53:13.000
meistens am Anfang vom Dokument dann setzt,

00:53:13.000 --> 00:53:15.000
vom SVG-Dokument, da definiere

00:53:15.000 --> 00:53:17.000
ich den Path und dann referenziere

00:53:17.000 --> 00:53:19.000
ich den im Text-Path per href,

00:53:19.000 --> 00:53:21.000
dann auch wieder über Hash

00:53:21.000 --> 00:53:23.000
und dann die ID

00:53:23.000 --> 00:53:25.000
und dann kann ich da drauf tippen

00:53:25.000 --> 00:53:27.000
und ich habe da auch wieder eine Codepen-Demo

00:53:27.000 --> 00:53:29.000
gebastelt.

00:53:29.000 --> 00:53:31.000
Oder habe ich irgendwas kaputt gemacht, glaube ich.

00:53:31.000 --> 00:53:33.000
Kann das sein? Warum habe ich da

00:53:33.000 --> 00:53:35.000
zweimal das Bild, das will ich gar nicht.

00:53:35.000 --> 00:53:37.000
Muss ich noch fixen, bevor ich es

00:53:37.000 --> 00:53:39.000
bevor ich es dann veröffentliche.

00:53:39.000 --> 00:53:41.000
Und da sieht man, wenn man es im Firefox öffnen würde,

00:53:41.000 --> 00:53:43.000
würde man rechts in dem

00:53:43.000 --> 00:53:45.000
Bild auch noch was sehen im SVG,

00:53:45.000 --> 00:53:47.000
weil ich da den Path einfach direkt als Attribut

00:53:47.000 --> 00:53:49.000
gesetzt habe, aber in anderen Browsern

00:53:49.000 --> 00:53:51.000
geht das nicht. Also Path einfach vergessen,

00:53:51.000 --> 00:53:53.000
auch wenn man das vielleicht mal sieht, auch in der Demo,

00:53:53.000 --> 00:53:55.000
sondern stattdessen einfach

00:53:55.000 --> 00:53:57.000
den href benutzen.

00:53:57.000 --> 00:53:59.000
Genau, und das sind so Sachen,

00:53:59.000 --> 00:54:01.000
da habe ich mich halt

00:54:01.000 --> 00:54:03.000
mit dem Code, mit dem SVG-Code

00:54:03.000 --> 00:54:05.000
noch nie mit beschäftigt. Ich habe mit

00:54:05.000 --> 00:54:07.000
Inkscape halt das gebastelt

00:54:07.000 --> 00:54:09.000
und am Ende kam da halt SVG raus.

00:54:09.000 --> 00:54:11.000
Aber das mal wirklich zu gucken,

00:54:11.000 --> 00:54:13.000
so Pfade

00:54:13.000 --> 00:54:15.000
generell, das habe ich schon eher mal

00:54:15.000 --> 00:54:17.000
gemacht, weil man da vielleicht mit

00:54:17.000 --> 00:54:19.000
irgendwas experimentiert, wo man

00:54:19.000 --> 00:54:21.000
die Werte von dem Pfad dann ändern können soll

00:54:21.000 --> 00:54:23.000
oder so, aber jetzt

00:54:23.000 --> 00:54:25.000
so Textpfade, wie das überhaupt funktioniert

00:54:25.000 --> 00:54:27.000
und so, das war mal ganz interessant,

00:54:27.000 --> 00:54:29.000
da wirklich reinzugucken, was da eigentlich

00:54:29.000 --> 00:54:31.000
intern so passiert und

00:54:31.000 --> 00:54:33.000
dann spart man sich am Schluss vielleicht sogar

00:54:33.000 --> 00:54:35.000
sowas wie Inkscape oder Illustrator,

00:54:35.000 --> 00:54:37.000
sondern baut das einfach selbst.

00:54:37.000 --> 00:54:39.000
Und es gibt ja auch tolle

00:54:39.000 --> 00:54:41.000
Online-Editoren, haben wir auch schon diverse

00:54:41.000 --> 00:54:43.000
Male verlinkt.

00:54:43.000 --> 00:54:45.000
Das geht dann,

00:54:45.000 --> 00:54:47.000
wenn man in einem

00:54:47.000 --> 00:54:49.000
sehr kleinen Team ist oder alleine

00:54:49.000 --> 00:54:51.000
an etwas arbeitet und sobald

00:54:51.000 --> 00:54:53.000
Menschen mit

00:54:53.000 --> 00:54:55.000
reinkommen, die sich hauptsächlich um

00:54:55.000 --> 00:54:57.000
grafische Belange kümmern, geht

00:54:57.000 --> 00:54:59.000
dieser Workflow leider kaputt.

00:54:59.000 --> 00:55:01.000
Aber ich glaube tatsächlich, dass

00:55:01.000 --> 00:55:03.000
dieser Workflow,

00:55:03.000 --> 00:55:05.000
den ich kenne, dass

00:55:05.000 --> 00:55:07.000
Menschen da sind, die sich hauptsächlich

00:55:07.000 --> 00:55:09.000
ums Visuelle kümmern

00:55:09.000 --> 00:55:11.000
und das dann weitergegeben wird an andere

00:55:11.000 --> 00:55:13.000
Abteilungen und die dann da irgendwas daraus macht,

00:55:13.000 --> 00:55:15.000
irgendwie Frontend und dann gibt es noch Backend und keine Ahnung.

00:55:15.000 --> 00:55:17.000
Ich glaube, das ist

00:55:17.000 --> 00:55:19.000
gar nicht so

00:55:19.000 --> 00:55:21.000
üblich.

00:55:21.000 --> 00:55:23.000
Ich kriege immer wieder mit,

00:55:23.000 --> 00:55:25.000
dass Leute sagen, ach ja, das ist doch kein Problem,

00:55:25.000 --> 00:55:27.000
dann nutze halt das Tool und dann machst du hier so mit den Farben

00:55:27.000 --> 00:55:29.000
das und dann sagst du, ey, ich würde die

00:55:29.000 --> 00:55:31.000
Hölle heiß gemacht bekommen, weil da jemand sagt,

00:55:31.000 --> 00:55:33.000
ey, das passt doch gar nicht ins Corporate Design, du kannst

00:55:33.000 --> 00:55:35.000
doch jetzt einfach eine neue Farbe erfinden.

00:55:35.000 --> 00:55:37.000
Aber ich glaube, das ist vielleicht nur in

00:55:37.000 --> 00:55:39.000
bestimmten Firmen oder in Projekten

00:55:39.000 --> 00:55:41.000
ab einer bestimmten Größe ist das überhaupt so.

00:55:41.000 --> 00:55:43.000
Es gibt ganz viele, ganz viel

00:55:43.000 --> 00:55:45.000
Kleinkram, das meine ich nicht böse,

00:55:45.000 --> 00:55:47.000
ganz viel

00:55:47.000 --> 00:55:49.000
Sachen, wo tatsächlich, oder ganz viele Projekte,

00:55:49.000 --> 00:55:51.000
Webseiten, wo tatsächlich

00:55:51.000 --> 00:55:53.000
ein, zwei Personen dran sitzen

00:55:53.000 --> 00:55:55.000
und die das einfach dann tatsächlich entscheiden können.

00:55:55.000 --> 00:55:57.000
Und wahrscheinlich ist dieses,

00:55:57.000 --> 00:55:59.000
diese Welt,

00:55:59.000 --> 00:56:01.000
in der alles so ganz

00:56:01.000 --> 00:56:03.000
genau festgelegt ist und

00:56:03.000 --> 00:56:05.000
das alles so kompliziert ist, gar nicht so groß

00:56:05.000 --> 00:56:07.000
und das sind halt nur die großen Player,

00:56:07.000 --> 00:56:09.000
von denen es natürlich schon ein paar gibt,

00:56:09.000 --> 00:56:11.000
mit ein paar Seiten.

00:56:11.000 --> 00:56:13.000
Aber es gibt wahrscheinlich sehr viel mehr

00:56:13.000 --> 00:56:15.000
Zeug, das tatsächlich so

00:56:15.000 --> 00:56:17.000
gebaut wird und dann kann man sowas natürlich

00:56:17.000 --> 00:56:19.000
machen und diese Online-Tools für SVG,

00:56:19.000 --> 00:56:21.000
die finde ich auch ziemlich cool.

00:56:21.000 --> 00:56:23.000
Ich liebe es auch, sowas von Hand zu optimieren,

00:56:23.000 --> 00:56:25.000
weil man dann sehr viel drüber versteht,

00:56:25.000 --> 00:56:27.000
wie es funktioniert.

00:56:27.000 --> 00:56:29.000
Aber ich bin da halt genau an der Stelle schon mal

00:56:29.000 --> 00:56:31.000
sehr, sehr, wie soll ich sagen,

00:56:31.000 --> 00:56:33.000
ich will nicht sagen auf die Schnauze gefallen,

00:56:33.000 --> 00:56:35.000
ich habe mir mal sehr viel Mühe gegeben, mein SVG zu

00:56:35.000 --> 00:56:37.000
optimieren, weil ich dachte, ey was,

00:56:37.000 --> 00:56:39.000
da sind so viele kleine Punkte drin,

00:56:39.000 --> 00:56:41.000
die kann man doch alle klonen, das kann doch alles

00:56:41.000 --> 00:56:43.000
derselbe Punkt sein und du sagst jetzt,

00:56:43.000 --> 00:56:45.000
da kommt noch einer an die Koordinate,

00:56:45.000 --> 00:56:47.000
da kommt noch einer und da kommt noch einer und das SVG

00:56:47.000 --> 00:56:49.000
war am Ende noch ein Fünftel so groß

00:56:49.000 --> 00:56:51.000
wie vorher und ich so, geil,

00:56:51.000 --> 00:56:53.000
geil und dann kam

00:56:53.000 --> 00:56:55.000
jemand um die Ecke und hat gesagt, ja und jetzt hätten wir gerne

00:56:55.000 --> 00:56:57.000
noch dies und ich habe hier bitte die Grafik

00:56:57.000 --> 00:56:59.000
und ich so, nein,

00:56:59.000 --> 00:57:01.000
ich muss jetzt wieder von vorne

00:57:01.000 --> 00:57:03.000
anfangen mit der Optimierung oder ich scheiß einfach

00:57:03.000 --> 00:57:05.000
auf die so und so viele Kilobyte

00:57:05.000 --> 00:57:07.000
und sag, okay, dann nehmen wir

00:57:07.000 --> 00:57:09.000
jetzt halt das, weil da genau das ins Spiel kommt,

00:57:09.000 --> 00:57:11.000
dann arbeitet eine Person damit, die eben

00:57:11.000 --> 00:57:13.000
nicht das Original hat, sondern das Original ist im

00:57:13.000 --> 00:57:15.000
Spiel mit, irgendwie eingecheckt

00:57:15.000 --> 00:57:17.000
und er arbeitet aber auf einer anderen Version,

00:57:17.000 --> 00:57:19.000
die ich halt nicht zurückgespielt habe.

00:57:19.000 --> 00:57:21.000
Aber trotzdem hat es mal Spaß

00:57:21.000 --> 00:57:23.000
gemacht, so ein SVG zu optimieren von Hand

00:57:23.000 --> 00:57:25.000
und es um Faktor

00:57:25.000 --> 00:57:27.000
5 kleiner zu machen.

00:57:27.000 --> 00:57:29.000
Ich kann es nur empfehlen, das mal zu machen,

00:57:29.000 --> 00:57:31.000
ein SVG mal von Hand anzufassen.

00:57:31.000 --> 00:57:33.000
Ich würde gar nicht sagen,

00:57:33.000 --> 00:57:35.000
baue es selbst

00:57:35.000 --> 00:57:37.000
von Hand, das kann man natürlich auch machen, aber da

00:57:37.000 --> 00:57:39.000
kommt man, wenn man sich mit SVG

00:57:39.000 --> 00:57:41.000
noch nicht beschäftigt hat, kommt man

00:57:41.000 --> 00:57:43.000
relativ schnell an die Grenzen und ich finde es so,

00:57:43.000 --> 00:57:45.000
bin ich vielleicht einfach ein anderer Lerntyp,

00:57:45.000 --> 00:57:47.000
ich finde es so, relativ trocken zu lernen,

00:57:47.000 --> 00:57:49.000
wenn ich sage, okay, jetzt muss ich mal gucken, wie funktioniert

00:57:49.000 --> 00:57:51.000
jetzt so ein Kreis und den will ich jetzt da haben, wer soll

00:57:51.000 --> 00:57:53.000
diesen Verlauf haben, sondern wenn man sich einfach mal

00:57:53.000 --> 00:57:55.000
eins anguckt, das ein bisschen komplexer ist

00:57:55.000 --> 00:57:57.000
und dann mal versucht zu verstehen,

00:57:57.000 --> 00:57:59.000
was ist denn da jetzt eigentlich was,

00:57:59.000 --> 00:58:01.000
finde ich, ist deutlich

00:58:01.000 --> 00:58:03.000
zugänglicher, sich mal den einzelnen Dingen

00:58:03.000 --> 00:58:05.000
zu nähern und dann kann man sich auch nur ein Ding rausgreifen

00:58:05.000 --> 00:58:07.000
und sagen, ja, ich will jetzt, wie gesagt, da war es

00:58:07.000 --> 00:58:09.000
30 Punkte, ich hätte jetzt gerne

00:58:09.000 --> 00:58:11.000
mal nur einen, der aber

00:58:11.000 --> 00:58:13.000
immer wieder geklont werden soll, wie geht denn das?

00:58:13.000 --> 00:58:15.000
Und dann nimmt man sich ein so Ding raus und dann hat man

00:58:15.000 --> 00:58:17.000
das zumindest verstanden, wie das funktioniert.

00:58:17.000 --> 00:58:19.000
Also, ihr dürft eure SVGs

00:58:19.000 --> 00:58:21.000
auch einfach mit Grafikkram bauen, da ist

00:58:21.000 --> 00:58:23.000
kein Shame. Nein, natürlich nicht.

00:58:23.000 --> 00:58:25.000
Man, ich,

00:58:25.000 --> 00:58:27.000
ein Faktor ist halt,

00:58:27.000 --> 00:58:29.000
dass sowohl Inkscape als auch

00:58:29.000 --> 00:58:31.000
Illustrator beim Export

00:58:31.000 --> 00:58:33.000
noch jede Menge Metadaten

00:58:33.000 --> 00:58:35.000
reinhauen und teilweise wirklich

00:58:35.000 --> 00:58:37.000
Zeug, die das unendlich

00:58:37.000 --> 00:58:39.000
aufblähen und auch

00:58:39.000 --> 00:58:41.000
das, ja, wenn man nicht aufpasst

00:58:41.000 --> 00:58:43.000
und irgendwie, wenn man zu

00:58:43.000 --> 00:58:45.000
wenige Nachkommastellen beim Export

00:58:45.000 --> 00:58:47.000
angibt, dann

00:58:47.000 --> 00:58:49.000
sehen die Sachen plötzlich ganz anders aus

00:58:49.000 --> 00:58:51.000
in dem SVG und

00:58:51.000 --> 00:58:53.000
das ist schon, also, wenn man

00:58:53.000 --> 00:58:55.000
die Sachen dann, also, es kommt ja auch wieder

00:58:55.000 --> 00:58:57.000
auf die Größenordnung an, wenn das Ding halt irgendwie

00:58:57.000 --> 00:58:59.000
millionenfach am Tag durch den Äther geleitet

00:58:59.000 --> 00:59:01.000
wird, dann sollte man sich vielleicht schon die Mühe machen,

00:59:01.000 --> 00:59:03.000
das vorher ein bisschen zu bereinigen,

00:59:03.000 --> 00:59:05.000
weil das summiert sich natürlich dann schon auf,

00:59:05.000 --> 00:59:07.000
wenn ich ein Riesenprojekt hab. Falls ihr mal

00:59:07.000 --> 00:59:09.000
morgens aufsteht und denkt, heute

00:59:09.000 --> 00:59:11.000
geht es mir viel zu gut, ich bin viel zu gut

00:59:11.000 --> 00:59:13.000
gelaunt, ich möchte jetzt ein bisschen

00:59:13.000 --> 00:59:15.000
schlechtere Laune haben, dann habe ich einen Tipp

00:59:15.000 --> 00:59:17.000
für euch. Dann nehmt ihr mal aus irgendeinem

00:59:17.000 --> 00:59:19.000
Projekt von euch ein SVG-Icon,

00:59:19.000 --> 00:59:21.000
das macht ihr in eurem Text,

00:59:21.000 --> 00:59:23.000
das macht ihr in eurem SVG-Editor auf

00:59:23.000 --> 00:59:25.000
und dann zoomt ihr mal ganz nah ran,

00:59:25.000 --> 00:59:27.000
ganz, ganz, ganz nah und dann werdet

00:59:27.000 --> 00:59:29.000
ihr höchstwahrscheinlich sehen,

00:59:29.000 --> 00:59:31.000
dass da irgendwelche unsauberen Ecken sind,

00:59:31.000 --> 00:59:33.000
wo ihr denkt, hä?

00:59:33.000 --> 00:59:35.000
Eigentlich sieht das doch gut aus,

00:59:35.000 --> 00:59:37.000
aber wenn man so ganz nah ranzoomt,

00:59:37.000 --> 00:59:39.000
wieso ist dieser Pfad da so komisch

00:59:39.000 --> 00:59:41.000
und diesen einen Ankerpunkt,

00:59:41.000 --> 00:59:43.000
den bräuchte man noch gar nicht

00:59:43.000 --> 00:59:45.000
und dann fangt ihr an, da rum zu optimieren,

00:59:45.000 --> 00:59:47.000
weil ihr denkt, ja, das kann doch nicht sein

00:59:47.000 --> 00:59:49.000
und das kommt ziemlich sicher, behaupte ich,

00:59:49.000 --> 00:59:51.000
von so falschen, kaputten Export-Tools

00:59:51.000 --> 00:59:53.000
oder von kaputten Optimierungstools,

00:59:53.000 --> 00:59:55.000
die zwischenrein geschaltet werden,

00:59:55.000 --> 00:59:57.000
weil ich behaupte, die Grafiker,

00:59:57.000 --> 00:59:59.000
die sowas gebaut haben,

00:59:59.000 --> 01:00:01.000
die wissen schon, was sie tun.

01:00:01.000 --> 01:00:03.000
Die bauen auch vernünftige Pfade,

01:00:03.000 --> 01:00:05.000
die nicht irgendwelche

01:00:05.000 --> 01:00:07.000
komischen, sinnlosen Ankerpunkte haben.

01:00:07.000 --> 01:00:09.000
Sowas kommt oft,

01:00:09.000 --> 01:00:11.000
weil wenn jemand ein Rasterbild

01:00:11.000 --> 01:00:13.000
automatisch vektorisiert,

01:00:13.000 --> 01:00:15.000
kommen üblicherweise

01:00:15.000 --> 01:00:17.000
keine perfekten Bilder dabei raus,

01:00:17.000 --> 01:00:19.000
oder durch irgendwelche Export-Tools

01:00:19.000 --> 01:00:21.000
und dann, falls euch

01:00:21.000 --> 01:00:23.000
euer Tag zu gut ist, damit könnt ihr ihn

01:00:23.000 --> 01:00:25.000
auf jeden Fall ein bisschen schlechter machen,

01:00:25.000 --> 01:00:27.000
weil ihr dann denkt, scheiße, wenn man da ranzoomt,

01:00:27.000 --> 01:00:29.000
das ist doch so unsauber, das kann ich nicht so lassen.

01:00:29.000 --> 01:00:31.000
Und dann sitzt ihr da und optimiert die SVGs von Hand.

01:00:31.000 --> 01:00:33.000
Ich sag's euch schon mal voraus.

01:00:33.000 --> 01:00:35.000
Also viel Spaß schon mal damit.

01:00:35.000 --> 01:00:37.000
Ja, man kann damit schon viel Zeit verbringen.

01:00:37.000 --> 01:00:39.000
Ich hab's auch schon mal, ich weiß gar nicht mehr,

01:00:39.000 --> 01:00:41.000
in welchem Zusammenhang hab ich auch was geschrieben.

01:00:41.000 --> 01:00:43.000
Ich glaub, das war auch für dieses Animationsprojekt,

01:00:43.000 --> 01:00:45.000
was dann am Schluss halt, weil die Dateien waren

01:00:45.000 --> 01:00:47.000
teilweise schon recht groß.

01:00:47.000 --> 01:00:49.000
Ich weiß gar nicht, ob nicht teilweise sogar

01:00:49.000 --> 01:00:51.000
waren auch Rastergrafiken dann wieder

01:00:51.000 --> 01:00:53.000
eingebunden und ich hab dann

01:00:53.000 --> 01:00:55.000
auch quasi ein Build-Script geschrieben,

01:00:55.000 --> 01:00:57.000
was am Ende die Dateien

01:00:57.000 --> 01:00:59.000
auch wieder möglichst klein raushaut.

01:00:59.000 --> 01:01:01.000
Deswegen ich hab diese Erfahrung auch schon gemacht,

01:01:01.000 --> 01:01:03.000
so wow, jetzt hab ich noch mal was rausgekitzelt

01:01:03.000 --> 01:01:05.000
und am Schluss ist es nur noch ein Fünftel.

01:01:05.000 --> 01:01:07.000
Also es kann auch Spaß machen, aber man kann halt

01:01:07.000 --> 01:01:09.000
auch viel Zeit da rein investieren.

01:01:09.000 --> 01:01:11.000
Also hier,

01:01:11.000 --> 01:01:13.000
ist es auch nicht schlimm, wenn ihr ein paar

01:01:13.000 --> 01:01:15.000
unsaubere SVGs in eurem Projekt habt?

01:01:15.000 --> 01:01:17.000
Immerhin lieber SVGs,

01:01:17.000 --> 01:01:19.000
wo man die Unsauberkeiten gar nicht so sieht,

01:01:19.000 --> 01:01:21.000
als irgendwelche Rastergrafiken,

01:01:21.000 --> 01:01:23.000
die dann auch noch irgendwie blöd

01:01:23.000 --> 01:01:25.000
hochskaliert eingebunden werden.

01:01:25.000 --> 01:01:27.000
Also gerade so irgendwie auch auf Desktop

01:01:27.000 --> 01:01:29.000
sieht alles toll aus, aber sobald es irgendwie

01:01:29.000 --> 01:01:31.000
dann umbricht und volle Breite

01:01:31.000 --> 01:01:33.000
annimmt, dann wird die Rastergrafik

01:01:33.000 --> 01:01:35.000
hochskaliert, weil sie nicht eine ausreichende

01:01:35.000 --> 01:01:37.000
Auflösung vorlegt. Oder plötzlich auf so einem

01:01:37.000 --> 01:01:39.000
geilen High-DPI-Display

01:01:39.000 --> 01:01:41.000
vom Phone oder sowas.

01:01:41.000 --> 01:01:43.000
Da sieht es dann plötzlich

01:01:43.000 --> 01:01:45.000
verraschend aus.

01:01:45.000 --> 01:01:47.000
Es gibt ja diesen tollen Sticker, den ich auch

01:01:47.000 --> 01:01:49.000
auf meinem Laptop hab, diesen SVG-Sticker,

01:01:49.000 --> 01:01:51.000
wo das SVG-Logo absichtlich

01:01:51.000 --> 01:01:53.000
schlecht mit JPEG-Artefakten

01:01:53.000 --> 01:01:55.000
Das finde ich so super.

01:01:55.000 --> 01:01:57.000
Weil man es auch auf den ersten

01:01:57.000 --> 01:01:59.000
Blick sieht man es nicht so genau.

01:01:59.000 --> 01:02:01.000
Wenn man dann aber guckt, stellt man fest,

01:02:01.000 --> 01:02:03.000
wie schlecht ist diese Grafik eigentlich.

01:02:03.000 --> 01:02:05.000
Und es passt so wunderschön.

01:02:05.000 --> 01:02:07.000
Ich glaube, das habe ich mitgebracht vom

01:02:07.000 --> 01:02:09.000
Chaos Communication Congress.

01:02:09.000 --> 01:02:11.000
Und der Witz ist, ich habe den Witz

01:02:11.000 --> 01:02:13.000
erst verstanden auf der Rückfahrt,

01:02:13.000 --> 01:02:15.000
als ich im Zug war.

01:02:15.000 --> 01:02:17.000
Ich gucke da drauf und denke, ja, SVG, cool.

01:02:17.000 --> 01:02:19.000
Und dann gucke ich nochmal genauer hin und denke so,

01:02:19.000 --> 01:02:21.000
warte mal, ich habe diesen

01:02:21.000 --> 01:02:23.000
Sticker mitgenommen, ohne den Witz zu verstehen.

01:02:23.000 --> 01:02:27.000
Ja, das ist schon richtig.

01:02:27.000 --> 01:02:29.000
Das ist schon richtig gut.

01:02:29.000 --> 01:02:31.000
Also hier, Props

01:02:31.000 --> 01:02:33.000
gehen raus an die Person, die das sich ausgedacht hat.

01:02:33.000 --> 01:02:35.000
Diesen Sticker, das ist wirklich, das ist einer

01:02:35.000 --> 01:02:37.000
meiner Lieblingssticker.

01:02:37.000 --> 01:02:39.000
Wir haben auch teilweise für Kunden

01:02:39.000 --> 01:02:41.000
Sachen vektorisiert,

01:02:41.000 --> 01:02:43.000
auch wenn es gar nicht gefordert war.

01:02:43.000 --> 01:02:45.000
Das wurde gar nicht explizit irgendwie

01:02:45.000 --> 01:02:47.000
gesagt, aber wenn ich dann sehe,

01:02:47.000 --> 01:02:49.000
das ist einfach, das ist ein Logo,

01:02:49.000 --> 01:02:51.000
das wirklich nur aus einer Form besteht

01:02:51.000 --> 01:02:53.000
und nicht mal mit irgendwie groß Verläufen

01:02:53.000 --> 01:02:55.000
oder sowas, dann haben wir das teilweise

01:02:55.000 --> 01:02:57.000
auch vektorisiert und dann

01:02:57.000 --> 01:02:59.000
geglättet, damit es

01:02:59.000 --> 01:03:01.000
einfach gut skaliert und

01:03:01.000 --> 01:03:03.000
schön aussieht, auch gerade auf HighDPI.

01:03:03.000 --> 01:03:05.000
Das ist einfach,

01:03:05.000 --> 01:03:07.000
das gehört für mich auch ein bisschen zum Handwerk

01:03:07.000 --> 01:03:09.000
dazu. Ich habe vor gar nicht so langer Zeit

01:03:09.000 --> 01:03:11.000
das Logo

01:03:11.000 --> 01:03:13.000
von einem Kunden von mir

01:03:13.000 --> 01:03:15.000
vektorisiert,

01:03:15.000 --> 01:03:17.000
weil ich es auf meine Webseite

01:03:17.000 --> 01:03:19.000
packen wollte als Referenz.

01:03:19.000 --> 01:03:21.000
Ja, zum Beispiel auch für sowas.

01:03:21.000 --> 01:03:23.000
Das haben wir halt auch oft gemacht und

01:03:23.000 --> 01:03:25.000
dann haben wir es eh vektorisieren müssen und dann haben wir

01:03:25.000 --> 01:03:27.000
es halt auch für die Webseite von denen gleich so

01:03:27.000 --> 01:03:29.000
umgesetzt. Oder wir hatten auch mal

01:03:29.000 --> 01:03:31.000
Printprojekte schon, wo dann

01:03:31.000 --> 01:03:33.000
irgendwie, ja hier, das ist unser Logo.

01:03:33.000 --> 01:03:35.000
Und das ist halt irgendwie

01:03:35.000 --> 01:03:37.000
die Grafik quasi, die sie auch in der

01:03:37.000 --> 01:03:39.000
E-Mail, in der Signatur anhängen, also irgendwie

01:03:39.000 --> 01:03:41.000
voll schlecht aufgelöst. Und dann

01:03:41.000 --> 01:03:43.000
fragst du nach, ja gibt es das nicht irgendwie

01:03:43.000 --> 01:03:45.000
als Vektor, ja wir haben das irgendwo, haben wir es noch größer,

01:03:45.000 --> 01:03:47.000
kriegst du eine Rasterdatei, die wenigstens ein bisschen

01:03:47.000 --> 01:03:49.000
größer ist. Manchmal hat man das Glück,

01:03:49.000 --> 01:03:51.000
dass sie dann noch den oder die Grafiker

01:03:51.000 --> 01:03:53.000
ausfindig machen, die das

01:03:53.000 --> 01:03:55.000
erstellt hat und dann kriegt man es wirklich noch als Vektor

01:03:55.000 --> 01:03:57.000
und oft heißt es halt, nee das haben wir nicht, wir haben das

01:03:57.000 --> 01:03:59.000
nur so, auch wenn es mit Sicherheit irgendwo

01:03:59.000 --> 01:04:01.000
rumliegt, aber keiner weiß es halt mehr.

01:04:01.000 --> 01:04:03.000
Und das haben wir dann auch

01:04:03.000 --> 01:04:05.000
vektorisiert, haben jetzt im Druck wenigstens halbwegs

01:04:05.000 --> 01:04:07.000
dann sind halt

01:04:07.000 --> 01:04:09.000
vielleicht ein paar Kurven nicht ganz exakt,

01:04:09.000 --> 01:04:11.000
weil wir die Mühe dann, die Zeit nicht

01:04:11.000 --> 01:04:13.000
investiert haben, aber es sieht schon mal

01:04:13.000 --> 01:04:15.000
tausendfach besser aus als ein

01:04:15.000 --> 01:04:17.000
hochskaliertes, eine hochskalierte

01:04:17.000 --> 01:04:19.000
Rastergrafik.

01:04:19.000 --> 01:04:21.000
Also das wundert mich wirklich

01:04:21.000 --> 01:04:23.000
oft, dass man auch bei

01:04:23.000 --> 01:04:25.000
einfachen Grafiken und gerade bei Logos

01:04:25.000 --> 01:04:27.000
dann immer wieder doch Rastergrafiken

01:04:27.000 --> 01:04:29.000
sieht, wo man sich fragt, warum?

01:04:29.000 --> 01:04:31.000
Das hat doch jemand als Vektor erstellt,

01:04:31.000 --> 01:04:33.000
warum wird das dann gerastert und eingebunden?

01:04:33.000 --> 01:04:35.000
Interessant ist ja auch, dass so

01:04:35.000 --> 01:04:37.000
ich sag mal

01:04:37.000 --> 01:04:39.000
Billigdruckereien

01:04:39.000 --> 01:04:41.000
ganz gerne tatsächlich

01:04:41.000 --> 01:04:43.000
Rastergrafiken anfordern

01:04:43.000 --> 01:04:45.000
als für den Druck

01:04:45.000 --> 01:04:47.000
was mich extrem wundert

01:04:47.000 --> 01:04:49.000
die wollen teilweise, also so

01:04:49.000 --> 01:04:51.000
Flyer-Alarm oder sowas

01:04:51.000 --> 01:04:53.000
die wollen eigentlich gar kein PDF

01:04:53.000 --> 01:04:55.000
haben, sondern die sagen, gib mir ein

01:04:55.000 --> 01:04:57.000
JPEG in Größe X

01:04:57.000 --> 01:04:59.000
das dann groß genug ist sozusagen

01:04:59.000 --> 01:05:01.000
wahrscheinlich ist das dann

01:05:01.000 --> 01:05:03.000
wahrscheinlich ist PDF so

01:05:03.000 --> 01:05:05.000
fehleranfällig, dass du das falsche PDF

01:05:05.000 --> 01:05:07.000
Format nimmst und dann irgendwie doch

01:05:07.000 --> 01:05:09.000
was Mistig ist, dass sie sagen

01:05:09.000 --> 01:05:11.000
vorstellen oder der Workflow ist zu kompliziert

01:05:11.000 --> 01:05:13.000
also sagen, ey

01:05:13.000 --> 01:05:15.000
das verwirrt wahrscheinlich die Leute

01:05:15.000 --> 01:05:17.000
noch mehr, wenn da irgendwas mit Vektor steht

01:05:17.000 --> 01:05:19.000
ja und dann gib mir ein PDF X3

01:05:19.000 --> 01:05:21.000
mit bla bla bla und eingebetteter

01:05:21.000 --> 01:05:23.000
Schrift und was weiß ich, was ich könnte mir

01:05:23.000 --> 01:05:25.000
vorstellen, das macht wahnsinnig viel Ärger

01:05:25.000 --> 01:05:27.000
und wenn du so einen super riesigen Durchsatz hast

01:05:27.000 --> 01:05:29.000
und quasi

01:05:29.000 --> 01:05:31.000
nicht irgendwelche

01:05:31.000 --> 01:05:33.000
Agenturen deine Kunden sind

01:05:33.000 --> 01:05:35.000
sondern Hints und Kunst, die sich Flyer

01:05:35.000 --> 01:05:37.000
drucken lassen wollen, da

01:05:37.000 --> 01:05:39.000
ist das Fehlerpotential bei PDF wahrscheinlich

01:05:39.000 --> 01:05:41.000
so groß, dass sie sagen, scheiß drauf

01:05:41.000 --> 01:05:43.000
wir legen ein

01:05:43.000 --> 01:05:45.000
Grafikformat fest und das ist jetzt

01:05:45.000 --> 01:05:47.000
in unserem Fall JPEG

01:05:47.000 --> 01:05:49.000
aber es muss halt

01:05:49.000 --> 01:05:51.000
mindestens so und so groß sein und dann ist

01:05:51.000 --> 01:05:53.000
es schon gut genug

01:05:53.000 --> 01:05:55.000
also ich hab da ja schon öfter Sticker

01:05:55.000 --> 01:05:57.000
drucken lassen und das kommt dann auch

01:05:57.000 --> 01:05:59.000
okay raus am Ende, weil die

01:05:59.000 --> 01:06:01.000
lassen sich dann quasi viermal so groß

01:06:01.000 --> 01:06:03.000
schicken und trotzdem fragt man sich halt

01:06:03.000 --> 01:06:05.000
warum dann nicht gleichwertig

01:06:05.000 --> 01:06:07.000
ich könnte mir halt, das würde mich echt interessieren

01:06:07.000 --> 01:06:09.000
falls jemand von Flyeralarm hier zuhört

01:06:09.000 --> 01:06:11.000
bitte mal Bescheid sagen, aber ob meine

01:06:11.000 --> 01:06:13.000
Theorie stimmt, weil ich könnte mir echt vorstellen

01:06:13.000 --> 01:06:15.000
das macht den Workflow von denen so viel einfacher

01:06:15.000 --> 01:06:17.000
ein Dateiformat gibt es

01:06:17.000 --> 01:06:19.000
oder zwei und das ist alles Raster

01:06:19.000 --> 01:06:21.000
und die müssen halt groß genug sein und wenn es dann halt

01:06:21.000 --> 01:06:23.000
wenn da eine Qualitätsscheiße ist, bist du selbst schuld

01:06:23.000 --> 01:06:25.000
so ungefähr

01:06:25.000 --> 01:06:27.000
naja, wie auch immer

01:06:27.000 --> 01:06:29.000
so, haben wir noch was

01:06:29.000 --> 01:06:31.000
zu SRG? Genau, ich hab noch ein paar Sachen

01:06:31.000 --> 01:06:33.000
hab ich noch, aber die meisten

01:06:33.000 --> 01:06:35.000
werde ich nur ganz oberflächlich kurz

01:06:35.000 --> 01:06:37.000
ansprechen, aber zwei

01:06:37.000 --> 01:06:39.000
Sachen hab ich noch, wo ich drauf

01:06:39.000 --> 01:06:41.000
gestoßen bin, die ich so nicht kannte und

01:06:41.000 --> 01:06:43.000
die ich ganz cool fand, das eine ist

01:06:43.000 --> 01:06:45.000
Switch, da kann

01:06:45.000 --> 01:06:47.000
ich, also es ist ein bisschen

01:06:47.000 --> 01:06:49.000
wie so ein Switch-Statement

01:06:49.000 --> 01:06:51.000
und das dient hauptsächlich dazu

01:06:51.000 --> 01:06:53.000
ich hab sonst nichts anderes

01:06:53.000 --> 01:06:55.000
gefunden, weil die Sachen, die da

01:06:55.000 --> 01:06:57.000
genannt werden, die sind teilweise gar nicht implementiert

01:06:57.000 --> 01:06:59.000
da gibt es noch keine Dokumentation

01:06:59.000 --> 01:07:01.000
dafür für Required Extensions

01:07:01.000 --> 01:07:03.000
und die Required Features, das ist irgendwie

01:07:03.000 --> 01:07:05.000
deprecated, also wofür es wohl hauptsächlich

01:07:05.000 --> 01:07:07.000
genutzt wird, ist Text auszutauschen

01:07:07.000 --> 01:07:09.000
basierend auf der Systemsprache

01:07:09.000 --> 01:07:11.000
das heißt, ich kann ein multilinguales

01:07:11.000 --> 01:07:13.000
SVG machen

01:07:13.000 --> 01:07:15.000
und

01:07:15.000 --> 01:07:17.000
und natürlich

01:07:17.000 --> 01:07:19.000
auch ein Default

01:07:19.000 --> 01:07:21.000
festlegen, also

01:07:21.000 --> 01:07:23.000
ich mach das Switch-Tag

01:07:23.000 --> 01:07:25.000
außenrum und dann kann ich verschiedene

01:07:25.000 --> 01:07:27.000
Text-Tags reinbauen

01:07:27.000 --> 01:07:29.000
und die haben dann System Language ist

01:07:29.000 --> 01:07:31.000
gleich

01:07:31.000 --> 01:07:33.000
AR für Armenisch, schätze ich mal

01:07:33.000 --> 01:07:35.000
oder Arabisch. Ich kann aber auch

01:07:35.000 --> 01:07:37.000
Komma separiert, zum Beispiel D, Deutsch

01:07:37.000 --> 01:07:39.000
und Niederländisches, beides Hallo

01:07:39.000 --> 01:07:41.000
das kann ich Komma separiert machen

01:07:41.000 --> 01:07:43.000
Hätte ich das gewusst, hätte ich das

01:07:43.000 --> 01:07:45.000
auch viel einfacher umsetzen können

01:07:45.000 --> 01:07:47.000
für den Kunden mit diesen Animationen

01:07:47.000 --> 01:07:49.000
weil die waren nämlich auch übersetzt auf verschiedene

01:07:49.000 --> 01:07:51.000
Sprachen. Das ist ja fancy. Und da hab ich dann

01:07:51.000 --> 01:07:53.000
extra, da wird dann der Text ausgetauscht

01:07:53.000 --> 01:07:55.000
und so, das hätte ich mir alles sparen können

01:07:55.000 --> 01:07:57.000
aber wobei, nee, hätte ich nicht

01:07:57.000 --> 01:07:59.000
das, also bei dem Kunden

01:07:59.000 --> 01:08:01.000
musste man das auch

01:08:01.000 --> 01:08:03.000
ändern können, also während, man hat oben

01:08:03.000 --> 01:08:05.000
so ein Language-Menü gehabt und

01:08:05.000 --> 01:08:07.000
mit der System Language, die verlässt sich halt

01:08:07.000 --> 01:08:09.000
wahrscheinlich auf das, was der Browser halt zurückmeldet

01:08:09.000 --> 01:08:11.000
und ich weiß nicht, ob ich mit

01:08:11.000 --> 01:08:13.000
das müsste man mal

01:08:13.000 --> 01:08:15.000
hab ich jetzt keine Zeit gehabt, das auszuprobieren, aber

01:08:15.000 --> 01:08:17.000
dass man vielleicht mit dem Lang-Tag

01:08:17.000 --> 01:08:19.000
das beeinflussen kann. Ich hau das

01:08:19.000 --> 01:08:21.000
jetzt einfach mal schnell, das interessiert mich jetzt doch

01:08:21.000 --> 01:08:23.000
in den Code-Pen rein

01:08:23.000 --> 01:08:25.000
und guck jetzt mal, also

01:08:25.000 --> 01:08:27.000
wenn ich das standardmäßig, dieses Beispiel

01:08:27.000 --> 01:08:29.000
anschaue

01:08:29.000 --> 01:08:31.000
auf meinem Handy hat es mir das auf Deutsch gezeigt

01:08:31.000 --> 01:08:33.000
wo mein Handy auf Englisch eingestellt ist

01:08:33.000 --> 01:08:35.000
interessanterweise. Hier im

01:08:35.000 --> 01:08:37.000
Browser krieg ich es jetzt auf dem Desktop

01:08:37.000 --> 01:08:39.000
krieg ich jetzt Howdy ausgegeben, das wäre

01:08:39.000 --> 01:08:41.000
en us, was mich auch

01:08:41.000 --> 01:08:43.000
irritiert, weil ich eigentlich

01:08:43.000 --> 01:08:45.000
en gb eingestellt

01:08:45.000 --> 01:08:47.000
hab als mein Systemlocale

01:08:47.000 --> 01:08:49.000
sehr seltsam. Jetzt mach mal

01:08:49.000 --> 01:08:51.000
auf das svg mal oben, lang ist

01:08:51.000 --> 01:08:53.000
gleich de

01:08:53.000 --> 01:08:55.000
gucken was es dann macht

01:08:55.000 --> 01:08:57.000
nix macht es dann

01:08:57.000 --> 01:08:59.000
muss ich vielleicht

01:08:59.000 --> 01:09:01.000
dem

01:09:01.000 --> 01:09:03.000
html Element das Außenrum

01:09:03.000 --> 01:09:05.000
geben, kann ich aber in CodePen nicht

01:09:05.000 --> 01:09:07.000
dann mach ich mal irgendwie div

01:09:07.000 --> 01:09:09.000
lang ist gleich de

01:09:09.000 --> 01:09:11.000
Sehr geehrte Damen und Herren, Sie hören

01:09:11.000 --> 01:09:13.000
Live-Code in einem

01:09:13.000 --> 01:09:15.000
zeitverzögert ausgestrahlten

01:09:15.000 --> 01:09:17.000
Autopodcast, weil

01:09:17.000 --> 01:09:19.000
Sarah den Stream

01:09:19.000 --> 01:09:21.000
vermisst. Ja, ja, ja, da

01:09:21.000 --> 01:09:23.000
haben wir solche Sachen alles gemacht

01:09:23.000 --> 01:09:25.000
im Podcast ist natürlich ein bisschen

01:09:25.000 --> 01:09:27.000
langweilig, aber ich

01:09:27.000 --> 01:09:29.000
wollte das jetzt einfach mal schnell

01:09:29.000 --> 01:09:31.000
ausprobieren, ob man irgendwie auf das SVG

01:09:31.000 --> 01:09:33.000
oder auf das Dokument Außenrum

01:09:33.000 --> 01:09:35.000
lang Tag, lang Attribut

01:09:35.000 --> 01:09:37.000
setzen kann und damit dann die Sprache

01:09:37.000 --> 01:09:39.000
beeinflussen, aber das geht wohl nicht

01:09:39.000 --> 01:09:41.000
vielleicht gibt es da noch irgendwie Möglichkeiten

01:09:41.000 --> 01:09:43.000
das da werde ich mal nachforschen, wenn

01:09:43.000 --> 01:09:45.000
ich was rausfind, gibt es da einen Nachtrag

01:09:45.000 --> 01:09:47.000
in der kommenden Folge, aber sonst

01:09:47.000 --> 01:09:49.000
wäre das nämlich echt ganz interessant

01:09:49.000 --> 01:09:51.000
aber wenn ich jetzt wirklich einfach nur eine Grafik

01:09:51.000 --> 01:09:53.000
habe und gar keine Sprachwahl

01:09:53.000 --> 01:09:55.000
Außenrum, aber ich möchte vielleicht den User

01:09:55.000 --> 01:09:57.000
wirklich, keine Ahnung, da ist irgendwie

01:09:57.000 --> 01:09:59.000
ein Maskottchen und das hat eine Sprechblase

01:09:59.000 --> 01:10:01.000
da wäre es ja vielleicht wirklich ganz cool

01:10:01.000 --> 01:10:03.000
wenn das deutsche User mit Hallo begrüßt

01:10:03.000 --> 01:10:05.000
und andere User mit

01:10:05.000 --> 01:10:07.000
französisch mit Bonjour, also das

01:10:07.000 --> 01:10:09.000
finde ich ganz cool

01:10:09.000 --> 01:10:11.000
und ich kannte das einfach nicht, dieses Switch

01:10:11.000 --> 01:10:13.000
Element, das war mir komplett neu. Das sorgt potenziell in meinem Kopf

01:10:13.000 --> 01:10:15.000
für Probleme, weil die

01:10:15.000 --> 01:10:17.000
brichten das dann um und keine Ahnung was

01:10:17.000 --> 01:10:19.000
aber theoretisch, ich finde, dass es das

01:10:19.000 --> 01:10:21.000
geht, finde ich mega fancy.

01:10:21.000 --> 01:10:23.000
Genau, das

01:10:23.000 --> 01:10:25.000
war das Switch Element

01:10:25.000 --> 01:10:27.000
und eigentlich war das ursprünglich auch

01:10:27.000 --> 01:10:29.000
mal gedacht um

01:10:29.000 --> 01:10:31.000
Required Features, also Features

01:10:31.000 --> 01:10:33.000
die, also kann

01:10:33.000 --> 01:10:35.000
das Animationen oder kann es

01:10:35.000 --> 01:10:37.000
Gradients oder nicht

01:10:37.000 --> 01:10:39.000
dass man darauf basierend dann den Content

01:10:39.000 --> 01:10:41.000
austauscht, aber das ist irgendwie deprecated

01:10:41.000 --> 01:10:43.000
und ja

01:10:43.000 --> 01:10:45.000
und das andere, da gibt es

01:10:45.000 --> 01:10:47.000
auch keine Beschreibung dazu, Required Extensions

01:10:47.000 --> 01:10:49.000
was das soll, wahrscheinlich ist das auch

01:10:49.000 --> 01:10:51.000
wird das gar nicht mehr benutzt, aber so für die Sprache

01:10:51.000 --> 01:10:53.000
wechseln, das finde ich eigentlich echt eine coole Sache

01:10:53.000 --> 01:10:55.000
Dann habe

01:10:55.000 --> 01:10:57.000
ich als nächstes noch Marker, ich wusste

01:10:57.000 --> 01:10:59.000
zwar, dass man auf Pfade solche

01:10:59.000 --> 01:11:01.000
Marker setzen kann, also dass ich dann bei einem

01:11:01.000 --> 01:11:03.000
am Ende von einer Linie

01:11:03.000 --> 01:11:05.000
zum Beispiel so ein Pfeil habe, aber was ich nicht

01:11:05.000 --> 01:11:07.000
wusste ist, dass ich als Marker

01:11:07.000 --> 01:11:09.000
definieren kann eben eigene

01:11:09.000 --> 01:11:11.000
Sachen, also dass es nicht ein Pfeil sein

01:11:11.000 --> 01:11:13.000
muss, sondern dass ich da theoretisch

01:11:13.000 --> 01:11:15.000
ein Emoji oder so benutzen kann.

01:11:15.000 --> 01:11:19.000
Das dann auch wirklich von der Pfeilrichtung her,

01:11:19.000 --> 01:11:21.000
wenn ich jetzt so eine Wellenkurve

01:11:21.000 --> 01:11:23.000
habe, dann

01:11:23.000 --> 01:11:25.000
übereinstimmt mit der Richtung, in die das

01:11:25.000 --> 01:11:27.000
geht, dass der Pfeil dann nach oben oder nach unten kommt

01:11:27.000 --> 01:11:29.000
und da kann ich aber wirklich eine eigene Form

01:11:29.000 --> 01:11:31.000
festlegen, also in dem Fall

01:11:31.000 --> 01:11:33.000
bei der MDN ist es zwar auch ein Pfeil,

01:11:33.000 --> 01:11:35.000
also einfach ein Dreieck im Endeffekt,

01:11:35.000 --> 01:11:37.000
ein schwarzes, aber da könnte

01:11:37.000 --> 01:11:39.000
ich alles mögliche definieren und

01:11:39.000 --> 01:11:41.000
dann gebe ich dem wieder

01:11:41.000 --> 01:11:43.000
eine ID, ID-Arrow in dem Fall

01:11:43.000 --> 01:11:45.000
und dann kann ich unten, kann ich dann sagen

01:11:45.000 --> 01:11:47.000
bei einem Line-Element zum Beispiel

01:11:47.000 --> 01:11:49.000
Marker-End und dann kann ich eben

01:11:49.000 --> 01:11:51.000
über URL, Klammer auf Klammer zu

01:11:51.000 --> 01:11:53.000
und den Hash mit der ID

01:11:53.000 --> 01:11:55.000
kann ich da dann definieren auf welches

01:11:55.000 --> 01:11:57.000
wie ein Symbol, wo wir es vorhin schon

01:11:57.000 --> 01:11:59.000
drüber hatten, was es da benutzen soll

01:11:59.000 --> 01:12:01.000
was es referenzieren soll

01:12:01.000 --> 01:12:03.000
und das setzt es dann da ein und dann kann

01:12:03.000 --> 01:12:05.000
ich das gleiche eben halt für Marker-Start

01:12:05.000 --> 01:12:07.000
und Marker-Mit auch noch machen und

01:12:07.000 --> 01:12:09.000
oben bei dem Marker selbst sieht man

01:12:09.000 --> 01:12:11.000
dann mit dem Orient

01:12:11.000 --> 01:12:13.000
wird dann noch Auto Start

01:12:13.000 --> 01:12:15.000
Reverse, ist da ein Keyboard

01:12:15.000 --> 01:12:17.000
zum Beispiel, dass die Pfeile

01:12:17.000 --> 01:12:19.000
automatisch an beiden Enden

01:12:19.000 --> 01:12:21.000
Richtung Ende schauen, aber in der Mitte

01:12:21.000 --> 01:12:23.000
der Kurve weiter folgen und das kann ich eben

01:12:23.000 --> 01:12:25.000
beeinflussen, dass ich sage, ich möchte aber vom Start

01:12:25.000 --> 01:12:27.000
ausgehend sollen alle Pfeile

01:12:27.000 --> 01:12:29.000
in die Laufrichtung von dem Pfad quasi zeigen

01:12:29.000 --> 01:12:31.000
und so weiter

01:12:31.000 --> 01:12:33.000
Genau, das war mir auch neu

01:12:33.000 --> 01:12:35.000
ich weiß gar nicht wie das ist, man kann diese Marker

01:12:35.000 --> 01:12:37.000
direkt in Inkscape

01:12:37.000 --> 01:12:39.000
kann man schon quasi anklicken

01:12:39.000 --> 01:12:41.000
einfach, ich möchte einen Marker haben und ich möchte

01:12:41.000 --> 01:12:43.000
den und den Marker, wahrscheinlich baut

01:12:43.000 --> 01:12:45.000
dann Inkscape auf automatische Weise

01:12:45.000 --> 01:12:47.000
selber dann so einen Marker

01:12:47.000 --> 01:12:49.000
in den Devs zusammen oder ich weiß nicht, ob es vielleicht

01:12:49.000 --> 01:12:51.000
auch da Standards

01:12:51.000 --> 01:12:53.000
gibt mit dem

01:12:53.000 --> 01:12:55.000
Arrow, die dann

01:12:55.000 --> 01:12:57.000
vielleicht den Browsern sogar unterschiedlich gerendert werden

01:12:57.000 --> 01:12:59.000
oder ob das in der

01:12:59.000 --> 01:13:01.000
Spec quasi schon festgelegt ist

01:13:01.000 --> 01:13:03.000
wie die auszusehen haben, keine Ahnung

01:13:03.000 --> 01:13:05.000
das sind eben so Sachen, da beschäftigt man sich mit

01:13:05.000 --> 01:13:07.000
nicht mit, wenn man so

01:13:07.000 --> 01:13:09.000
Tools benutzt und die hauen dann einfach irgendwas

01:13:09.000 --> 01:13:11.000
da rein und man weiß

01:13:11.000 --> 01:13:13.000
gar nicht, wie es am Ende intern funktioniert

01:13:13.000 --> 01:13:17.000
Dann noch ganz kurz, Pattern

01:13:17.000 --> 01:13:19.000
da kann ich eben wie der

01:13:19.000 --> 01:13:21.000
Name vermuten lässt, ein Muster

01:13:21.000 --> 01:13:23.000
festlegen, wo ich dann sage

01:13:23.000 --> 01:13:25.000
der Fill oder der Stroke

01:13:25.000 --> 01:13:27.000
von dem Element, der soll

01:13:27.000 --> 01:13:29.000
dieses Pattern verwenden und das wird dann immer wieder benutzt

01:13:29.000 --> 01:13:31.000
und in diesem Pattern Element

01:13:31.000 --> 01:13:33.000
kann ich einfach dann wieder diese ganzen

01:13:33.000 --> 01:13:35.000
normalen geometrischen Formen

01:13:35.000 --> 01:13:37.000
also Polygon, Circle, Rectangle

01:13:37.000 --> 01:13:39.000
usw.

01:13:39.000 --> 01:13:41.000
drin verwenden

01:13:41.000 --> 01:13:43.000
also auch mehrere Elemente verschachtelt

01:13:43.000 --> 01:13:45.000
ich könnte also ein Emoji z.B. nehmen

01:13:45.000 --> 01:13:47.000
das Augen, Nase, Mund hat und

01:13:47.000 --> 01:13:49.000
ein Pattern außen rum packen und dann

01:13:49.000 --> 01:13:51.000
kann ich dieses Pattern wiederum verwenden

01:13:51.000 --> 01:13:53.000
um andere geometrische Formen

01:13:53.000 --> 01:13:55.000
oder eben den Stroke um die Form

01:13:55.000 --> 01:13:57.000
damit zu füllen

01:13:57.000 --> 01:13:59.000
Dann

01:13:59.000 --> 01:14:01.000
haben wir noch Filter und

01:14:01.000 --> 01:14:03.000
da gibt es viele Texte die mit FE

01:14:03.000 --> 01:14:05.000
was wahrscheinlich für Filter-Effekt steht

01:14:05.000 --> 01:14:07.000
nehm ich an

01:14:07.000 --> 01:14:09.000
steht

01:14:09.000 --> 01:14:11.000
da gibt es dann sowas wie Gaussian Blur

01:14:11.000 --> 01:14:13.000
also ein Blur-Effekt oder

01:14:13.000 --> 01:14:15.000
so ein komisches Rauschen

01:14:15.000 --> 01:14:17.000
also was dann aussieht wie bei Analog-Fernsehen

01:14:17.000 --> 01:14:19.000
früher wenn der Empfang schlecht war

01:14:19.000 --> 01:14:21.000
und so weiter, also da gibt es so viele Sachen

01:14:21.000 --> 01:14:23.000
per Point Light kann ich irgendwie

01:14:23.000 --> 01:14:25.000
festlegen was dann so ein

01:14:25.000 --> 01:14:27.000
Spotlight-Effekt erzeugt

01:14:27.000 --> 01:14:29.000
also da gibt es wirklich krasse Sachen

01:14:29.000 --> 01:14:31.000
und weil das aber so viel ist

01:14:31.000 --> 01:14:33.000
und jedes Ding dann wieder

01:14:33.000 --> 01:14:35.000
seine eigenen Attribute hat

01:14:35.000 --> 01:14:37.000
wollte ich das jetzt nur ganz am Rand nennen

01:14:37.000 --> 01:14:39.000
also man kann da echt

01:14:39.000 --> 01:14:41.000
coole Sachen mitmachen, einfach mal die Demos

01:14:41.000 --> 01:14:43.000
anschauen, auch auf der MDN

01:14:43.000 --> 01:14:45.000
ich glaube halt auch, dass das nix ist

01:14:45.000 --> 01:14:47.000
was man regelmäßig selber

01:14:47.000 --> 01:14:49.000
bauen wird, also ich glaube da verlässt man sich

01:14:49.000 --> 01:14:51.000
halt drauf, dass

01:14:51.000 --> 01:14:53.000
die Tools mit denen man die SVGs erstellt

01:14:53.000 --> 01:14:55.000
das für einen machen und dass ich da einfach nur

01:14:55.000 --> 01:14:57.000
Blur anklicken, dass ich sagen muss, ja ich möchte Blur

01:14:57.000 --> 01:14:59.000
und dann möchte ich den mit so einem Pixelradius haben

01:14:59.000 --> 01:15:01.000
generell

01:15:01.000 --> 01:15:03.000
ist das eben die Sache, wo wir es eben schon drüber hatten

01:15:03.000 --> 01:15:05.000
ja, kommt man überhaupt in die Situation

01:15:05.000 --> 01:15:07.000
dass man so ein SVG selbst baut

01:15:07.000 --> 01:15:09.000
ich glaube komplett vom Scratch wird man es nicht

01:15:09.000 --> 01:15:11.000
tun, maximal, dass man

01:15:11.000 --> 01:15:13.000
vielleicht eben so

01:15:13.000 --> 01:15:15.000
aus fertigen

01:15:15.000 --> 01:15:17.000
SVG Icons dann so ein Raster

01:15:17.000 --> 01:15:19.000
baut, aber auch das würde man wahrscheinlich

01:15:19.000 --> 01:15:21.000
automatisieren und nicht per Hand

01:15:21.000 --> 01:15:23.000
bauen und rumschieben, sondern

01:15:23.000 --> 01:15:25.000
gucken, dass man sich dann ein Skript baut

01:15:25.000 --> 01:15:27.000
das dann alle Icons ausliest und die alle

01:15:27.000 --> 01:15:29.000
in so ein Grid haut und entsprechend benannt

01:15:29.000 --> 01:15:31.000
Ich finde ja

01:15:31.000 --> 01:15:33.000
Turbulence geil. Turbulence, ja

01:15:33.000 --> 01:15:35.000
ist auch cool. Das ist wirklich

01:15:35.000 --> 01:15:37.000
das ist ja echt verrückt

01:15:37.000 --> 01:15:39.000
weil das, also was das

01:15:39.000 --> 01:15:41.000
ich versuche gerade mal zu beschreiben

01:15:41.000 --> 01:15:43.000
was das macht, also da ist eine Demo

01:15:43.000 --> 01:15:45.000
drin, da wird ein ganz normaler Kreis

01:15:45.000 --> 01:15:47.000
genommen, das ist einfach ein schwarzer

01:15:47.000 --> 01:15:49.000
Kreis, aber das Turbulence

01:15:49.000 --> 01:15:51.000
hat diverse Attribute

01:15:51.000 --> 01:15:53.000
zum Beispiel Base Frequency

01:15:53.000 --> 01:15:55.000
Number, Octaves

01:15:55.000 --> 01:15:57.000
und

01:15:57.000 --> 01:15:59.000
so weiter und dann

01:15:59.000 --> 01:16:01.000
wird der tatsächlich so zerfressen

01:16:01.000 --> 01:16:03.000
aber asymmetrisch. Das sieht aus wie so ein

01:16:03.000 --> 01:16:05.000
Tintenklecks dann am Schluss. Genau, sieht aus

01:16:05.000 --> 01:16:07.000
wie ein Tintenklecks, aber es ist nicht wirklich

01:16:07.000 --> 01:16:09.000
man erkennt keinen Pattern irgendwie

01:16:09.000 --> 01:16:11.000
es wird irgendwie, es gibt eine Art

01:16:11.000 --> 01:16:13.000
irgendwie random

01:16:13.000 --> 01:16:15.000
ich mich würde mal interessieren, ob das bei mir genauso

01:16:15.000 --> 01:16:17.000
aussieht wie bei dir, ob das wirklich deterministisch ist

01:16:17.000 --> 01:16:19.000
oder ob da irgendwie was randommäßiges reingeht.

01:16:19.000 --> 01:16:21.000
Wir können das gleiche reinhauen

01:16:21.000 --> 01:16:23.000
mal in

01:16:23.000 --> 01:16:25.000
Firefox und einmal

01:16:25.000 --> 01:16:27.000
in Brave und dann

01:16:27.000 --> 01:16:29.000
schon mal gucken, ob das das gleiche ist, aber ich

01:16:29.000 --> 01:16:31.000
würde mich wundern

01:16:31.000 --> 01:16:33.000
wenn das nicht in der Spec festgelegt ist, wie

01:16:33.000 --> 01:16:35.000
dieser Filter genau die Berechnungen durchführt

01:16:35.000 --> 01:16:37.000
weil man will ja schon am Schluss eigentlich

01:16:37.000 --> 01:16:39.000
aber vielleicht steht da tatsächlich drin, dass

01:16:39.000 --> 01:16:41.000
eine random Number irgendwo generiert wird, wer weiß

01:16:41.000 --> 01:16:43.000
es ist wirklich identisch

01:16:43.000 --> 01:16:45.000
in Firefox und in

01:16:45.000 --> 01:16:47.000
Brave. Interessant ist, dass ich

01:16:47.000 --> 01:16:49.000
in Firefox gar nichts sehe

01:16:49.000 --> 01:16:51.000
Oh, okay

01:16:51.000 --> 01:16:53.000
Bei mir funktioniert es in Firefox

01:16:53.000 --> 01:16:55.000
Aber vielleicht, ne, ich glaube der Link

01:16:55.000 --> 01:16:57.000
funktioniert vielleicht einfach nicht, den ich da genommen hab

01:16:57.000 --> 01:16:59.000
Ja, aber das ist

01:16:59.000 --> 01:17:01.000
Turbulence ist echt verrückt

01:17:01.000 --> 01:17:03.000
Interessant ist, dass der

01:17:03.000 --> 01:17:05.000
Filter selbst, der wird

01:17:05.000 --> 01:17:07.000
über ein Style Attribut gesetzt

01:17:07.000 --> 01:17:09.000
also das ist das Circle Element und dann ist Style

01:17:09.000 --> 01:17:11.000
gleich Filter Doppelpunkt und dann

01:17:11.000 --> 01:17:13.000
per URL wieder und den Hashwert

01:17:13.000 --> 01:17:15.000
dann den benannten Filter

01:17:15.000 --> 01:17:17.000
und Filter

01:17:17.000 --> 01:17:19.000
gibt es ja in CSS

01:17:19.000 --> 01:17:21.000
gab es ja schon vorher, also CSS Filter

01:17:21.000 --> 01:17:23.000
wo man dann auch irgendwie eben einen Blur machen kann

01:17:23.000 --> 01:17:25.000
oder so und

01:17:25.000 --> 01:17:27.000
in SVG kann ich eben diese Filter auch selber

01:17:27.000 --> 01:17:29.000
definieren und kann sogar

01:17:29.000 --> 01:17:31.000
also in dem Fall ist es ja sogar

01:17:31.000 --> 01:17:33.000
eine Displacement Map und diese

01:17:33.000 --> 01:17:35.000
Turbulence in einem

01:17:35.000 --> 01:17:37.000
das sieht auch lustig aus, wenn du die Displacement Map mal raus

01:17:37.000 --> 01:17:39.000
machst

01:17:39.000 --> 01:17:41.000
das Displacement Map Element

01:17:41.000 --> 01:17:43.000
dann sieht es nämlich ganz anders aus, die Turbulence

01:17:43.000 --> 01:17:45.000
selbst ist nämlich

01:17:45.000 --> 01:17:47.000
ganz krass, das sieht aus wie so ein Batik Muster

01:17:47.000 --> 01:17:49.000
so ein bisschen Hippie, ich habe mir

01:17:49.000 --> 01:17:51.000
LSD eingeworfen, so

01:17:51.000 --> 01:17:53.000
stelle ich mir das zumindest vor

01:17:53.000 --> 01:17:55.000
so sieht das aus und dann

01:17:55.000 --> 01:17:57.000
wird das kombiniert eben mit dieser Displacement Map

01:17:57.000 --> 01:17:59.000
achja und dann guck mal, da hast du

01:17:59.000 --> 01:18:01.000
in, also du kannst

01:18:01.000 --> 01:18:03.000
das Source irgendwie definieren

01:18:03.000 --> 01:18:05.000
also den Input quasi festlegen

01:18:05.000 --> 01:18:07.000
was dann da weiter

01:18:07.000 --> 01:18:09.000
verwendet, verwurschtelt wird

01:18:09.000 --> 01:18:11.000
also ganz verrückt, deswegen

01:18:11.000 --> 01:18:13.000
das geht so in die Tiefe und

01:18:13.000 --> 01:18:15.000
interessant zu wissen

01:18:15.000 --> 01:18:17.000
und vielleicht möchte ich mal irgendwas mit Filtern

01:18:17.000 --> 01:18:19.000
machen, aber das brauchen wir jetzt nicht im Detail

01:18:19.000 --> 01:18:21.000
also nicht, dass ich es überhaupt beschreiben könnte

01:18:21.000 --> 01:18:23.000
im Detail, aber deswegen

01:18:23.000 --> 01:18:25.000
machen wir es einfach nicht. Ich möchte es

01:18:25.000 --> 01:18:27.000
tatsächlich in meinem Grafikprogramm

01:18:27.000 --> 01:18:29.000
drin haben, so dass ich das

01:18:29.000 --> 01:18:31.000
quasi explorativ als

01:18:31.000 --> 01:18:33.000
Option entdecken kann, ja da

01:18:33.000 --> 01:18:35.000
klicke ich mal drauf, was passiert eigentlich dann?

01:18:35.000 --> 01:18:37.000
Weiß ich gerade gar nicht aus dem Stehgreif

01:18:37.000 --> 01:18:39.000
wie die

01:18:39.000 --> 01:18:41.000
Filterimplementierung bei Inkscape ist

01:18:41.000 --> 01:18:43.000
also so Patterns und sowas kann ich auf jeden Fall

01:18:43.000 --> 01:18:45.000
festlegen, so die Filter

01:18:45.000 --> 01:18:47.000
weiß ich jetzt gar nicht, da habe ich auch schon

01:18:47.000 --> 01:18:49.000
lange nicht mehr mit Inkscape gearbeitet. Also

01:18:49.000 --> 01:18:51.000
so ein klassischer

01:18:51.000 --> 01:18:53.000
Drop Shadow oder sowas, das gibt es da

01:18:53.000 --> 01:18:55.000
auf jeden Fall. Ja, gut das kann man inzwischen

01:18:55.000 --> 01:18:57.000
ja auch mit CSS machen.

01:18:57.000 --> 01:18:59.000
Ja ja, aber das gibt es auf jeden Fall als

01:18:59.000 --> 01:19:01.000
SVG-Filter, da bin ich mir ganz sicher, das ist aber

01:19:01.000 --> 01:19:03.000
wahrscheinlich so das Klassischste, das Einfachste

01:19:03.000 --> 01:19:05.000
ähm

01:19:05.000 --> 01:19:07.000
ich muss gerade mal gucken in meinem Box

01:19:07.000 --> 01:19:09.000
hier SVG, was es denn da so gibt

01:19:09.000 --> 01:19:11.000
boah da gibt es so viel Zeug

01:19:11.000 --> 01:19:13.000
Egal, müssen wir jetzt nicht zu tief

01:19:13.000 --> 01:19:15.000
rein. Ja

01:19:15.000 --> 01:19:17.000
dann gibt es noch diverse Animate

01:19:17.000 --> 01:19:19.000
Tags, also einmal Animate selbst

01:19:19.000 --> 01:19:21.000
und Animate Motion und Animate Transform

01:19:21.000 --> 01:19:23.000
das ist aber

01:19:23.000 --> 01:19:25.000
eigentlich inzwischen auch durch CSS

01:19:25.000 --> 01:19:27.000
abgelöst würde ich sagen

01:19:27.000 --> 01:19:29.000
also ähm ich meine

01:19:29.000 --> 01:19:31.000
dass die auch, dass das zusammenhängt mit

01:19:31.000 --> 01:19:33.000
SMIL, aber da gucke ich nochmal

01:19:33.000 --> 01:19:35.000
bevor ich jetzt Blödsinn erzähle

01:19:35.000 --> 01:19:37.000
SVG Animation with

01:19:37.000 --> 01:19:39.000
SMIL

01:19:39.000 --> 01:19:41.000
genau das sind auch diese

01:19:41.000 --> 01:19:43.000
Animate Transforms werden da auch benutzt

01:19:43.000 --> 01:19:45.000
SMIL ist irgendwie

01:19:45.000 --> 01:19:47.000
Synchronized Multimedia

01:19:47.000 --> 01:19:49.000
Integration Language

01:19:49.000 --> 01:19:51.000
aber

01:19:51.000 --> 01:19:53.000
ich meine dass die Unterstützung dafür auch

01:19:53.000 --> 01:19:55.000
deprecated ist mittlerweile

01:19:55.000 --> 01:19:57.000
oder zumindest dass das einfach

01:19:57.000 --> 01:19:59.000
fast jeder auf SVG umgestiegen ist

01:19:59.000 --> 01:20:01.000
um da irgendwie was zu machen, aber interessant

01:20:01.000 --> 01:20:03.000
dass es auch ohne CSS vorher

01:20:03.000 --> 01:20:05.000
möglich war schon SVGs

01:20:05.000 --> 01:20:07.000
zu animieren und zu sagen Folge

01:20:07.000 --> 01:20:09.000
diesen Pfad und

01:20:09.000 --> 01:20:11.000
transition auf irgendwelche

01:20:11.000 --> 01:20:13.000
Farbwerte oder so

01:20:13.000 --> 01:20:15.000
das war damit schon möglich

01:20:15.000 --> 01:20:17.000
und dann zum Schluss noch

01:20:17.000 --> 01:20:19.000
es gibt sicherlich noch andere interessante Sachen

01:20:19.000 --> 01:20:21.000
aber es ist einfach

01:20:21.000 --> 01:20:23.000
man kann da wirklich sehr in die Tiefe

01:20:23.000 --> 01:20:25.000
gehen oder man kann es eben auch lassen

01:20:25.000 --> 01:20:27.000
und deswegen wollte ich nur zu

01:20:27.000 --> 01:20:29.000
Accessibility noch was sagen

01:20:29.000 --> 01:20:31.000
so eine Rastergrafik die ist natürlich nicht Accessible

01:20:31.000 --> 01:20:33.000
gut mit KI inzwischen

01:20:33.000 --> 01:20:35.000
schon, dass die da Texte auch rauslesen kann

01:20:35.000 --> 01:20:37.000
und was beschreiben kann

01:20:37.000 --> 01:20:39.000
aber wir hatten es ja auch schon über automatische

01:20:39.000 --> 01:20:41.000
Bildbeschreibungsgenerierung und was da dann

01:20:41.000 --> 01:20:43.000
so rauskommt

01:20:43.000 --> 01:20:45.000
und

01:20:45.000 --> 01:20:47.000
SVG ist einfach quasi inherent

01:20:47.000 --> 01:20:49.000
Accessible

01:20:49.000 --> 01:20:51.000
wenn man entsprechend

01:20:51.000 --> 01:20:53.000
die Technik an sich, man muss natürlich auch

01:20:53.000 --> 01:20:55.000
was noch dafür tun, aber ich sag mal

01:20:55.000 --> 01:20:57.000
der Browser kann darauf zugreifen

01:20:57.000 --> 01:20:59.000
und wenn es zum Beispiel Inline SVG ist

01:20:59.000 --> 01:21:01.000
ist es automatisch in dem Accessibility

01:21:01.000 --> 01:21:03.000
Model mit drin

01:21:03.000 --> 01:21:05.000
im Browser und der kann darauf zugreifen

01:21:05.000 --> 01:21:07.000
aber klar, ich muss natürlich

01:21:07.000 --> 01:21:09.000
entsprechende Inhalte auch setzen

01:21:09.000 --> 01:21:11.000
damit das auch sinnvoll nutzbar ist

01:21:11.000 --> 01:21:13.000
also es gibt ein Title Tag und es gibt

01:21:13.000 --> 01:21:15.000
ein Desk Tag für Description

01:21:15.000 --> 01:21:17.000
Title ist gedacht für einen ganz

01:21:17.000 --> 01:21:19.000
kurzen Titel und Description nochmal für eine

01:21:19.000 --> 01:21:21.000
für eine genauere Inhaltsbeschreibung

01:21:21.000 --> 01:21:23.000
und das kann ich halt direkt in die

01:21:23.000 --> 01:21:25.000
Grafik reinsetzen und muss mich dann

01:21:25.000 --> 01:21:27.000
nicht drauf verlassen, dass der oder diejenige

01:21:27.000 --> 01:21:29.000
der die Grafik dann

01:21:29.000 --> 01:21:31.000
einsetzt am Schluss dann ein Alt-Tag

01:21:31.000 --> 01:21:33.000
zum Beispiel setzt, sondern

01:21:33.000 --> 01:21:35.000
die der Grafik ist

01:21:35.000 --> 01:21:37.000
warum passiert mir das immer noch

01:21:37.000 --> 01:21:39.000
ein alter Attribut

01:21:39.000 --> 01:21:41.000
setzt, ja Gott, wir haben uns schon so oft drüber

01:21:41.000 --> 01:21:43.000
lustig gemacht, ich sag's selber

01:21:43.000 --> 01:21:45.000
genau, also dass der

01:21:45.000 --> 01:21:47.000
dann niemand ein Attribut setzen

01:21:47.000 --> 01:21:49.000
muss, sondern der

01:21:49.000 --> 01:21:51.000
oder die Erstellerin der Grafik kann das schon

01:21:51.000 --> 01:21:53.000
festlegen, was da drin

01:21:53.000 --> 01:21:55.000
stehen wird und dann kann theoretisch

01:21:55.000 --> 01:21:57.000
der Browser drauf zugreifen

01:21:57.000 --> 01:21:59.000
zu interessanten Stillblüten führen

01:21:59.000 --> 01:22:01.000
hatte ich jetzt gerade für Tage

01:22:01.000 --> 01:22:03.000
weil nämlich

01:22:03.000 --> 01:22:05.000
der Alternativtext

01:22:05.000 --> 01:22:07.000
eines Bildes, der sinnvolle Alternativtext

01:22:07.000 --> 01:22:09.000
eines Bildes sehr stark

01:22:09.000 --> 01:22:11.000
vom Kontext abhängt

01:22:11.000 --> 01:22:13.000
und nicht unbedingt

01:22:13.000 --> 01:22:15.000
also

01:22:15.000 --> 01:22:17.000
wenn du jetzt ein Bild von einem Haus hast

01:22:17.000 --> 01:22:19.000
ist es nicht unbedingt sinnvoll, dass da Haus

01:22:19.000 --> 01:22:21.000
drin steht, das könnte zum Beispiel

01:22:21.000 --> 01:22:23.000
Homepage sein, was da gefordert ist

01:22:23.000 --> 01:22:25.000
dann in diesem Kontext, wenn du jetzt zum Beispiel

01:22:25.000 --> 01:22:27.000
einen Link hast

01:22:27.000 --> 01:22:29.000
oder wenn das jetzt ein Kettensymbol

01:22:29.000 --> 01:22:31.000
ist, könnte vielleicht Link damit

01:22:31.000 --> 01:22:33.000
gemeint sein oder

01:22:33.000 --> 01:22:35.000
Papierkorb könnte löschen sein

01:22:35.000 --> 01:22:37.000
und es kommt halt echt, du kannst es aber auch nicht eindeutig

01:22:37.000 --> 01:22:39.000
festlegen, wann ist es denn

01:22:39.000 --> 01:22:41.000
also du musst es von Fall zu Fall unterscheiden

01:22:41.000 --> 01:22:43.000
Ich muss auch sagen, ich weiß jetzt auch nicht

01:22:43.000 --> 01:22:45.000
explizit, wie

01:22:45.000 --> 01:22:47.000
das integriert ist in die Screenreader

01:22:47.000 --> 01:22:49.000
ob die automatisch bei SVG

01:22:49.000 --> 01:22:51.000
das immer vorlesen oder

01:22:51.000 --> 01:22:53.000
ob ich es überschreiben kann dann mit einem

01:22:53.000 --> 01:22:55.000
Alt-Attribut oder wie

01:22:55.000 --> 01:22:57.000
hängt auch mit Sicherheit davon ab, ob ich es per Image-Tag

01:22:57.000 --> 01:22:59.000
einbinde oder über Object oder über

01:22:59.000 --> 01:23:01.000
Inline-SVG

01:23:01.000 --> 01:23:03.000
zum Beispiel, wenn ich jetzt ein SVG per Image-Tag

01:23:03.000 --> 01:23:05.000
einbinde, weiß ich nicht, ob der Browser dann

01:23:05.000 --> 01:23:07.000
reinguckt ins SVG und sich da den Titel

01:23:07.000 --> 01:23:09.000
rauslutscht oder ob man dann

01:23:09.000 --> 01:23:11.000
doch ein Alt-Tag braucht

01:23:11.000 --> 01:23:13.000
Alt-Tag, schon wieder gesagt, Alt-Attribut

01:23:13.000 --> 01:23:15.000
Verdammt! Warum sagst du das?

01:23:15.000 --> 01:23:17.000
Ich weiß es nicht, weil ich komplett raus bin

01:23:17.000 --> 01:23:19.000
aus der Sache, ich bin

01:23:19.000 --> 01:23:21.000
keine Entwicklerin-Identität mehr

01:23:21.000 --> 01:23:23.000
Okay, also

01:23:23.000 --> 01:23:25.000
alles, was Sarah heute

01:23:25.000 --> 01:23:27.000
gesagt hat, ist Quatsch

01:23:27.000 --> 01:23:29.000
Nein, also was ich auf jeden Fall

01:23:29.000 --> 01:23:31.000
sagen kann, ist, wenn das SVG direkt eingebunden

01:23:31.000 --> 01:23:33.000
ist, das ist eine Sache, da bin ich mir ganz

01:23:33.000 --> 01:23:35.000
sicher, wenn das SVG direkt eingebunden ist

01:23:35.000 --> 01:23:37.000
in den Code, also nicht als Image

01:23:37.000 --> 01:23:39.000
und du das Title

01:23:39.000 --> 01:23:41.000
das Title-Tag

01:23:41.000 --> 01:23:43.000
da drin siehst, das wird auf jeden Fall standardmäßig

01:23:43.000 --> 01:23:45.000
vorgelesen. Ich weiß allerdings tatsächlich

01:23:45.000 --> 01:23:47.000
nicht, was gewinnt, wenn ich dem Ding jetzt auch noch

01:23:47.000 --> 01:23:49.000
ein Alt-Attribut geben würde

01:23:49.000 --> 01:23:51.000
wer gewinnt dann? Kommen die dann

01:23:51.000 --> 01:23:53.000
nacheinander? Da gibt es, das ist je nach Fall

01:23:53.000 --> 01:23:55.000
sind die Sachen nicht immer ganz eindeutig

01:23:55.000 --> 01:23:57.000
das weiß ich einfach jetzt gerade nicht

01:23:57.000 --> 01:23:59.000
müsste ich ausprobieren

01:23:59.000 --> 01:24:01.000
genau, aber wie gesagt

01:24:01.000 --> 01:24:03.000
die Idee, den Text

01:24:03.000 --> 01:24:05.000
damit reinzuschreiben, ist erstmal

01:24:05.000 --> 01:24:07.000
ganz nett, aber

01:24:07.000 --> 01:24:09.000
ich hatte schon oft den Fall, dass dann

01:24:09.000 --> 01:24:11.000
da Quatsch steht, weil das eben

01:24:11.000 --> 01:24:13.000
das Bild beschreibt, aber ich

01:24:13.000 --> 01:24:15.000
kontextabhängig was ganz anderes

01:24:15.000 --> 01:24:17.000
brauche, also bin ich mir

01:24:17.000 --> 01:24:19.000
gerade unsicher, ob ich

01:24:19.000 --> 01:24:21.000
der Meinung bin, ob das eine gute

01:24:21.000 --> 01:24:23.000
Idee ist, das reinzuschreiben oder nicht

01:24:23.000 --> 01:24:25.000
weil wenn ich es nicht mache

01:24:25.000 --> 01:24:27.000
dann, naja, also ich glaube das Ding

01:24:27.000 --> 01:24:29.000
also hauptsächlich bei Icons ist es wahrscheinlich

01:24:29.000 --> 01:24:31.000
sehr kontextabhängig, wo führt das jetzt hin

01:24:31.000 --> 01:24:33.000
wenn ich da drauf klicke

01:24:33.000 --> 01:24:35.000
aber bei einem

01:24:35.000 --> 01:24:37.000
Diagramm oder bei einer

01:24:37.000 --> 01:24:39.000
einfach so einer Schmuckgrafik, da ist ja

01:24:39.000 --> 01:24:41.000
in der Regel, was da drin ist, irgendwie

01:24:41.000 --> 01:24:43.000
unser Maskottchen

01:24:43.000 --> 01:24:45.000
hämmert mit einem Hammer einen Nagel

01:24:45.000 --> 01:24:47.000
in die Wand oder keine Ahnung

01:24:47.000 --> 01:24:49.000
Interessantes Maskottchen

01:24:49.000 --> 01:24:51.000
Ich weiß nicht, was mir jetzt gerade da so

01:24:51.000 --> 01:24:53.000
Baumast oder so

01:24:53.000 --> 01:24:55.000
Der Hammerhans

01:24:55.000 --> 01:24:57.000
Der Hammerhans hämmert

01:24:57.000 --> 01:24:59.000
Kohle

01:24:59.000 --> 01:25:01.000
Kohlenägel

01:25:01.000 --> 01:25:03.000
Egal, egal, egal

01:25:03.000 --> 01:25:05.000
Egal, ja

01:25:05.000 --> 01:25:07.000
Also es ist kompliziert

01:25:07.000 --> 01:25:09.000
Aber es ist eben, es ist Text basiert

01:25:09.000 --> 01:25:11.000
und der Browser hat Zugriff auf

01:25:11.000 --> 01:25:13.000
die einzelnen Elemente und dadurch ist es an sich

01:25:13.000 --> 01:25:15.000
manchmal einfach technisch

01:25:15.000 --> 01:25:17.000
mehr accessible als

01:25:17.000 --> 01:25:19.000
als eine Rastergrafik

01:25:19.000 --> 01:25:21.000
aber natürlich muss ich entsprechend auch was

01:25:21.000 --> 01:25:23.000
einbauen, was dann ausgelesen werden kann

01:25:23.000 --> 01:25:25.000
Ich würde sagen, das kann man so stehen lassen

01:25:25.000 --> 01:25:27.000
allerdings möchte ich sagen, in den meisten

01:25:27.000 --> 01:25:29.000
Fällen ist es eine gute Idee

01:25:29.000 --> 01:25:31.000
dem Bild einen Alternativtext

01:25:31.000 --> 01:25:33.000
zu geben und sich

01:25:33.000 --> 01:25:35.000
nicht drauf zu verlassen, was so drin ist

01:25:35.000 --> 01:25:37.000
weil das

01:25:37.000 --> 01:25:39.000
durchaus Quatsch sein kann, der

01:25:39.000 --> 01:25:41.000
in der Reihenfolge, wie es dann irgendwie vorgelesen

01:25:41.000 --> 01:25:43.000
werden würde, keinen Sinn ergibt

01:25:43.000 --> 01:25:45.000
oder dann fehlt was Wichtiges

01:25:45.000 --> 01:25:47.000
oder so, oder du hast vielleicht nur die

01:25:47.000 --> 01:25:49.000
Legenden, die dann vorgelesen werden von

01:25:49.000 --> 01:25:51.000
irgendeiner Grafik oder sowas

01:25:51.000 --> 01:25:53.000
Ich glaube auch, dass SVGs inline

01:25:53.000 --> 01:25:55.000
einbinden nicht der Standardfall

01:25:55.000 --> 01:25:57.000
ist, also ich glaube, meistens wird es darauf

01:25:57.000 --> 01:25:59.000
hinauslaufen, das wird halt von der Grafikabteilung

01:25:59.000 --> 01:26:01.000
abgelegt als SVG

01:26:01.000 --> 01:26:03.000
und dann wird das eingebunden über ein CMS

01:26:03.000 --> 01:26:05.000
oder so mit einem ganz normalen Imagetag

01:26:05.000 --> 01:26:07.000
und dann kannst du sowieso einen Alttext

01:26:07.000 --> 01:26:09.000
definieren. Ja, aber das CMS könnte das ja

01:26:09.000 --> 01:26:11.000
auch automatisch mit direkt reinschreiben.

01:26:11.000 --> 01:26:13.000
Das kann ja

01:26:13.000 --> 01:26:15.000
so oder so funktionieren. Also, dass es das ausliest und dann den

01:26:15.000 --> 01:26:17.000
Alttext vorpopuliert zum Beispiel, aber das ist ja auch schon mal

01:26:17.000 --> 01:26:19.000
ein Start, dann habe ich was und wenn ich feststelle,

01:26:19.000 --> 01:26:21.000
in dem Kontext passt das nicht, kann ich es überschreiben, aber

01:26:21.000 --> 01:26:23.000
dann hätte man zumindest schon mal, wir hatten es da ja auch

01:26:23.000 --> 01:26:25.000
schon drüber, so, dass

01:26:25.000 --> 01:26:27.000
Leute beim Einpflegen von Content dann

01:26:27.000 --> 01:26:29.000
das wieder vergessen, obwohl eigentlich

01:26:29.000 --> 01:26:31.000
vom System das vorgesehen ist, dass da

01:26:31.000 --> 01:26:33.000
Texte hinterlegt werden.

01:26:33.000 --> 01:26:35.000
Man könnte es nutzen halt, um eine Vereinfachung

01:26:35.000 --> 01:26:37.000
für den

01:26:37.000 --> 01:26:39.000
Prozess zu bieten und

01:26:39.000 --> 01:26:41.000
dazu die Leute, ja, ein bisschen

01:26:41.000 --> 01:26:43.000
diese Hürde zu nehmen, sich was

01:26:43.000 --> 01:26:45.000
überlegen zu müssen, sondern wenn sie sehen, da steht was

01:26:45.000 --> 01:26:47.000
drin, aber es ist nicht passend, dass sie

01:26:47.000 --> 01:26:49.000
es dann vielleicht eher korrigieren, als wenn sie

01:26:49.000 --> 01:26:51.000
sich selber was überlegen müssen.

01:26:51.000 --> 01:26:53.000
Ja, Alternativtexte, da könnte

01:26:53.000 --> 01:26:55.000
ich in der Doktorarbeit drüber schreiben.

01:26:55.000 --> 01:26:57.000
Vor allem über die Frage,

01:26:57.000 --> 01:26:59.000
wie könnte man Leuten helfen,

01:26:59.000 --> 01:27:01.000
Alternativtexte zu schreiben, dass sie es

01:27:01.000 --> 01:27:03.000
machen.

01:27:03.000 --> 01:27:05.000
Da habe ich immer noch

01:27:05.000 --> 01:27:07.000
keine eindeutige Antwort drauf, aber es gibt

01:27:07.000 --> 01:27:09.000
Ansätze. Ja, man muss

01:27:09.000 --> 01:27:11.000
technisch was tun meistens.

01:27:11.000 --> 01:27:13.000
Nur mit

01:27:13.000 --> 01:27:15.000
Awareness ist es

01:27:15.000 --> 01:27:17.000
nicht getan, mit die Leutewissen, dann

01:27:17.000 --> 01:27:19.000
machen sie es trotzdem nicht, weil sie zu faul sind.

01:27:19.000 --> 01:27:21.000
Tut mir leid, ich

01:27:21.000 --> 01:27:23.000
ein

01:27:23.000 --> 01:27:25.000
gebranntes Kind spricht

01:27:25.000 --> 01:27:27.000
hier zu euch.

01:27:27.000 --> 01:27:29.000
Vielleicht noch ganz kurz, ich habe vorhin auch schon

01:27:29.000 --> 01:27:31.000
Gradients angesprochen, da gibt es

01:27:31.000 --> 01:27:33.000
dann Lineargradient, Radialgradient

01:27:33.000 --> 01:27:35.000
und dann natürlich auch wieder

01:27:35.000 --> 01:27:37.000
Text dann drin für Start

01:27:37.000 --> 01:27:39.000
und Stop, die ich festlegen kann.

01:27:39.000 --> 01:27:41.000
Es gibt noch

01:27:41.000 --> 01:27:43.000
Masken, also dass ich

01:27:43.000 --> 01:27:45.000
Teile maskiere, also wie man es auch

01:27:45.000 --> 01:27:47.000
aus Photoshop kennt, ich habe dann

01:27:47.000 --> 01:27:49.000
einen schwarz-weiß-Gradient und leg den dann

01:27:49.000 --> 01:27:51.000
irgendwie als Maske, definier ich den für irgendein

01:27:51.000 --> 01:27:53.000
Objekt und dann wird das

01:27:53.000 --> 01:27:55.000
entsprechend des schwarz-weiß-Verlaufs

01:27:55.000 --> 01:27:57.000
transparent.

01:27:57.000 --> 01:27:59.000
Genauso gibt es auch Clip,

01:27:59.000 --> 01:28:01.000
mit dem ich dann eben

01:28:01.000 --> 01:28:03.000
oder Clip Path heißt das Element,

01:28:03.000 --> 01:28:05.000
mit dem ich dann Sachen

01:28:05.000 --> 01:28:07.000
ausschneiden kann und

01:28:07.000 --> 01:28:09.000
das hat auch wieder

01:28:09.000 --> 01:28:11.000
alles seine eigenen Attribute und

01:28:11.000 --> 01:28:13.000
ich kann auch wieder den Clip Path dann

01:28:13.000 --> 01:28:15.000
eben vordefinieren

01:28:15.000 --> 01:28:17.000
und dann über die ID wieder ansprechen.

01:28:17.000 --> 01:28:19.000
Also

01:28:19.000 --> 01:28:21.000
die Möglichkeiten in SVGs

01:28:21.000 --> 01:28:23.000
sind wirklich schier endlos

01:28:23.000 --> 01:28:25.000
und man kann da echt cooles Zeug mit machen.

01:28:25.000 --> 01:28:27.000
Also bei Clip Path ist die Demo wieder

01:28:27.000 --> 01:28:29.000
so ein Herz,

01:28:29.000 --> 01:28:31.000
so ein kleiner roter Punkt und der wächst dann

01:28:31.000 --> 01:28:33.000
und dann färbt er das Herz rot ein

01:28:33.000 --> 01:28:35.000
und so Zeug.

01:28:35.000 --> 01:28:37.000
Das ist schon eine gute Definition von

01:28:37.000 --> 01:28:39.000
ich steig mich so tief ein.

01:28:39.000 --> 01:28:41.000
Das wollte ich jetzt einfach nur noch, das gibt es auch noch

01:28:41.000 --> 01:28:43.000
und ich glaube nämlich dann haben wir wirklich so alles an Grunddingern

01:28:43.000 --> 01:28:45.000
aber ich

01:28:45.000 --> 01:28:47.000
spreche jetzt nicht über jedes Element und jedes Attribut.

01:28:47.000 --> 01:28:49.000
Da habe ich nämlich auch

01:28:49.000 --> 01:28:51.000
einen Link im Trello

01:28:51.000 --> 01:28:53.000
wo es eine Übersicht gibt,

01:28:53.000 --> 01:28:55.000
den habe ich glaube ich schon abgehakt

01:28:55.000 --> 01:28:57.000
fälschlicherweise. Ja guck mal, wenn du

01:28:57.000 --> 01:28:59.000
oben guckst bei SVG

01:28:59.000 --> 01:29:01.000
SVG Attribute Reference

01:29:01.000 --> 01:29:03.000
Wenn du da mal drauf

01:29:03.000 --> 01:29:05.000
klickst. Ach du Scheiße.

01:29:05.000 --> 01:29:07.000
Da ist halt alles mögliche drin.

01:29:07.000 --> 01:29:09.000
Oh mein Gott. Halt nicht nur ID

01:29:09.000 --> 01:29:11.000
und was weiß ich, sondern

01:29:11.000 --> 01:29:13.000
wirklich alles. Dagegen ist Math

01:29:13.000 --> 01:29:15.000
echt ein Witz. Also es gibt halt einfach

01:29:15.000 --> 01:29:17.000
so viele Kind Elemente

01:29:17.000 --> 01:29:19.000
und die dann auch wieder

01:29:19.000 --> 01:29:21.000
jeweils ganz unterschiedliche

01:29:21.000 --> 01:29:23.000
Attribute haben, weil sie halt einfach

01:29:23.000 --> 01:29:25.000
also allein schon zwischen einem Circle

01:29:25.000 --> 01:29:27.000
und einer Linie und einem Polygon

01:29:27.000 --> 01:29:29.000
ist halt einfach ein Unterschied, was

01:29:29.000 --> 01:29:31.000
das braucht. Das eine braucht nur einen Startpunkt und einen Radius

01:29:31.000 --> 01:29:33.000
und das andere braucht halt mehr. Und dementsprechend

01:29:33.000 --> 01:29:35.000
wenn wir hier alle

01:29:35.000 --> 01:29:37.000
Attribute durchgehen wollten, also

01:29:37.000 --> 01:29:39.000
ich glaube drei Folgen sind nicht übertrieben,

01:29:39.000 --> 01:29:41.000
die wir dafür brauchen würden. Ne, ne, ne. Ich glaube

01:29:41.000 --> 01:29:43.000
man könnte noch mehr machen. Also

01:29:43.000 --> 01:29:45.000
ich sag mal dazu, ich versuch kurz

01:29:45.000 --> 01:29:47.000
die Seite zu beschreiben, da steht schon

01:29:47.000 --> 01:29:49.000
SVG Attributes A to Z

01:29:49.000 --> 01:29:51.000
A to Z

01:29:51.000 --> 01:29:53.000
und die sind tatsächlich nach einzelnen

01:29:53.000 --> 01:29:55.000
Buchstabenblöcken aufgeteilt und in A

01:29:55.000 --> 01:29:57.000
alleine sind eins, zwei, drei, vier, fünf,

01:29:57.000 --> 01:29:59.000
sechs, sieben. Nur in A

01:29:59.000 --> 01:30:01.000
sind sieben drin. Und es gibt tatsächlich

01:30:01.000 --> 01:30:03.000
zu fast jedem Buchstaben auch was.

01:30:03.000 --> 01:30:05.000
Also oft ist es ja so bei alphabetischen

01:30:05.000 --> 01:30:07.000
Aufstellungen, ja bei Y und Z ist dann nix,

01:30:07.000 --> 01:30:09.000
weil, ne, was fängt da schon mit an?

01:30:09.000 --> 01:30:11.000
Aber hier gibt es halt wirklich Y, Y1,

01:30:11.000 --> 01:30:13.000
Y2, weil das natürlich bei so Kurven

01:30:13.000 --> 01:30:15.000
brauche ich eben diese verschiedenen Ankerpunkte.

01:30:15.000 --> 01:30:17.000
Bei Z habe ich Zoom und Pan

01:30:17.000 --> 01:30:19.000
und auch ein Z Attribut.

01:30:19.000 --> 01:30:21.000
Also es gibt wirklich,

01:30:21.000 --> 01:30:23.000
ich weiß gar nicht, ob es einen Buchstaben gibt, wo es nix dazu gibt.

01:30:23.000 --> 01:30:25.000
Q, Q gibt es nicht. Okay.

01:30:25.000 --> 01:30:27.000
Aber es ist echt viel.

01:30:27.000 --> 01:30:29.000
Deswegen, ja,

01:30:29.000 --> 01:30:31.000
man könnte hier noch viel weiter

01:30:31.000 --> 01:30:33.000
in die Tiefe gehen, aber das macht einfach

01:30:33.000 --> 01:30:35.000
keinen Sinn. Und deswegen fangen wir

01:30:35.000 --> 01:30:37.000
jetzt mit SVG auch auf. Sehr gut.

01:30:37.000 --> 01:30:39.000
Dann gehen wir jetzt nicht so tief in die Tiefe

01:30:39.000 --> 01:30:41.000
bei Math, weil es gibt Mathematik.

01:30:41.000 --> 01:30:43.000
Ich dachte schon, ich habe zu wenig

01:30:43.000 --> 01:30:45.000
vorbereitet.

01:30:45.000 --> 01:30:47.000
Von mir kommt jetzt viel

01:30:47.000 --> 01:30:49.000
weniger. Mathematik,

01:30:49.000 --> 01:30:51.000
Mathematik, immer nur Mathematik.

01:30:51.000 --> 01:30:53.000
Und der Grund auch,

01:30:53.000 --> 01:30:55.000
warum ich jetzt nicht so tief reingehe, ist auch,

01:30:55.000 --> 01:30:57.000
ich habe mich damit heute zum allerersten Mal

01:30:57.000 --> 01:30:59.000
beschäftigt, und ich bin ganz ehrlich, ich weiß

01:30:59.000 --> 01:31:01.000
nicht, ob ich irgendwo das überhaupt schon mal

01:31:01.000 --> 01:31:03.000
gesehen habe, außer auf der Wikipedia oder so.

01:31:03.000 --> 01:31:05.000
Das ist der einzige Ort,

01:31:05.000 --> 01:31:07.000
der mir einfällt, wo das mir vielleicht schon mal wirklich

01:31:07.000 --> 01:31:09.000
begegnet ist und dann halt in irgendwelchen Demos.

01:31:09.000 --> 01:31:11.000
Aber letzten Endes,

01:31:11.000 --> 01:31:13.000
genau, also, was ist

01:31:13.000 --> 01:31:15.000
eigentlich MathML?

01:31:15.000 --> 01:31:17.000
Mathematical Markup Language.

01:31:17.000 --> 01:31:19.000
Das ist auch auf XML basiert,

01:31:19.000 --> 01:31:21.000
genauso wie SVG. Man kann es in

01:31:21.000 --> 01:31:23.000
HTML direkt reinschreiben.

01:31:23.000 --> 01:31:25.000
Und ich habe mal geguckt,

01:31:25.000 --> 01:31:27.000
von wann

01:31:27.000 --> 01:31:29.000
der erste, der MathML

01:31:29.000 --> 01:31:31.000
1.0 ist.

01:31:31.000 --> 01:31:33.000
Und zwar

01:31:33.000 --> 01:31:35.000
W3C Recommendation

01:31:35.000 --> 01:31:37.000
7. April 1998.

01:31:37.000 --> 01:31:39.000
Also noch älter als SVG.

01:31:39.000 --> 01:31:41.000
Und das wundert mich jetzt gar nicht so arg,

01:31:41.000 --> 01:31:43.000
weil das ganze HTML ja aus dem

01:31:43.000 --> 01:31:45.000
wissenschaftlichen Kontext überhaupt

01:31:45.000 --> 01:31:47.000
entstanden ist, ja. Und dass man da

01:31:47.000 --> 01:31:49.000
was braucht, um dann eben halt auch

01:31:49.000 --> 01:31:51.000
Formeln in der Physik oder in der

01:31:51.000 --> 01:31:53.000
Mathematik darzustellen und so,

01:31:53.000 --> 01:31:55.000
macht auf jeden Fall Sinn. Und das

01:31:55.000 --> 01:31:57.000
überrascht mich eher, dass SVG auch schon so

01:31:57.000 --> 01:31:59.000
frühzeitig da, ja,

01:31:59.000 --> 01:32:01.000
entwickelt wurde.

01:32:01.000 --> 01:32:03.000
Ich hab dann auch bei, genau, also

01:32:03.000 --> 01:32:05.000
es ist da, um Formeln darzustellen.

01:32:05.000 --> 01:32:07.000
Ich würde sagen beliebig komplex,

01:32:07.000 --> 01:32:09.000
aber ich bin auch kein

01:32:09.000 --> 01:32:11.000
Mathematiker. Das heißt, die Mathematiker

01:32:11.000 --> 01:32:13.000
könnten mir jetzt gerne erklären,

01:32:13.000 --> 01:32:15.000
was denn damit nicht geht. Es gibt bestimmt irgendetwas,

01:32:15.000 --> 01:32:17.000
was damit nicht geht, was man damit nicht darstellen kann.

01:32:17.000 --> 01:32:19.000
Aber ich fand es ganz spannend,

01:32:19.000 --> 01:32:21.000
in die, in die

01:32:21.000 --> 01:32:23.000
By Can I Use reinzuschauen,

01:32:23.000 --> 01:32:25.000
zu MathML. Und wann

01:32:25.000 --> 01:32:27.000
ist es denn eigentlich so in Browsern unterstützt

01:32:27.000 --> 01:32:29.000
gewesen?

01:32:29.000 --> 01:32:31.000
Und interessant ist,

01:32:31.000 --> 01:32:33.000
dass es in Chrome

01:32:33.000 --> 01:32:35.000
in der Version 24 unterstützt

01:32:35.000 --> 01:32:37.000
ist, By Can I Use,

01:32:37.000 --> 01:32:39.000
von 25

01:32:39.000 --> 01:32:41.000
bis 96 nur so partial.

01:32:41.000 --> 01:32:43.000
Ach, das ist ja verrückt.

01:32:43.000 --> 01:32:45.000
Von 97 bis 108 auch wieder partial, aber anders.

01:32:45.000 --> 01:32:47.000
Und von 109 ab wieder

01:32:47.000 --> 01:32:49.000
drin. Ich kann mir nicht vorstellen, dass

01:32:49.000 --> 01:32:51.000
es stimmt.

01:32:51.000 --> 01:32:53.000
Da geht es bestimmt um einzelne

01:32:53.000 --> 01:32:55.000
Dinge, die nicht gegangen sind oder so.

01:32:55.000 --> 01:32:57.000
Weil das ist so alt.

01:32:57.000 --> 01:32:59.000
Ja, egal. Also,

01:32:59.000 --> 01:33:01.000
ich würde jetzt sagen, man kann das benutzen.

01:33:01.000 --> 01:33:03.000
Das, ja.

01:33:03.000 --> 01:33:05.000
So, und wenn ich jetzt sage, man kann

01:33:05.000 --> 01:33:07.000
das benutzen, dann muss ich mal überlegen,

01:33:07.000 --> 01:33:09.000
was davon kann ich benutzen? Weil wenn man da

01:33:09.000 --> 01:33:11.000
Speck rumliest, dann merkt man gleich,

01:33:11.000 --> 01:33:13.000
es gibt da unterschiedliche Standards.

01:33:13.000 --> 01:33:15.000
MathML an sich ist

01:33:15.000 --> 01:33:17.000
nämlich viel, viel größer als das, was im Browser

01:33:17.000 --> 01:33:19.000
unterstützt ist. Im Browser ist nämlich nur

01:33:19.000 --> 01:33:21.000
unterstützt MathML Core.

01:33:21.000 --> 01:33:23.000
Und zwar

01:33:23.000 --> 01:33:25.000
zur Geschichte,

01:33:25.000 --> 01:33:27.000
es war ursprünglich gedacht so als

01:33:27.000 --> 01:33:29.000
Multipurpose-Sprache für alles mögliche.

01:33:29.000 --> 01:33:31.000
Also zum Beispiel nicht nur

01:33:31.000 --> 01:33:33.000
für Webseiten, sondern auch EPUB,

01:33:33.000 --> 01:33:35.000
LaTeX, für Office-Suites

01:33:35.000 --> 01:33:37.000
und für Browser.

01:33:37.000 --> 01:33:39.000
Also im Prinzip

01:33:39.000 --> 01:33:41.000
so fast alles, wo man

01:33:41.000 --> 01:33:43.000
irgendwie solche mathematische

01:33:43.000 --> 01:33:45.000
Formeln haben möchte.

01:33:45.000 --> 01:33:47.000
Und das hat aber irgendwie nicht so geklappt.

01:33:47.000 --> 01:33:49.000
Viel wurde nicht implementiert und dann hat man

01:33:49.000 --> 01:33:51.000
irgendwann sich drauf verständigt, okay, wir wollen aber

01:33:51.000 --> 01:33:53.000
jetzt trotzdem festlegen, dass irgendwas im

01:33:53.000 --> 01:33:55.000
Browser zumindest davon funktioniert.

01:33:55.000 --> 01:33:57.000
Und dann seitdem gibt es MathML

01:33:57.000 --> 01:33:59.000
Core.

01:33:59.000 --> 01:34:01.000
Und ich glaube, das ist auch ganz gut

01:34:01.000 --> 01:34:03.000
unterstützt. Das ist aber immer noch

01:34:03.000 --> 01:34:05.000
in Editors Draft tatsächlich.

01:34:05.000 --> 01:34:07.000
Zuletzt aktualisiert vom 23.

01:34:07.000 --> 01:34:09.000
Mai dieses Jahr.

01:34:09.000 --> 01:34:11.000
Ja, so.

01:34:11.000 --> 01:34:13.000
Das zur Geschichte ein bisschen.

01:34:13.000 --> 01:34:15.000
Wofür ist jetzt Math?

01:34:15.000 --> 01:34:17.000
Ich habe es ja schon gesagt. Also es ist eigentlich

01:34:17.000 --> 01:34:19.000
darum, dafür eine mathematische

01:34:19.000 --> 01:34:21.000
Formeln

01:34:21.000 --> 01:34:23.000
und Gleichungen

01:34:23.000 --> 01:34:25.000
aufschreiben zu können.

01:34:25.000 --> 01:34:27.000
Und interessanterweise

01:34:27.000 --> 01:34:29.000
übernimmt der Browser

01:34:29.000 --> 01:34:31.000
da relativ viel an der Formatierung.

01:34:31.000 --> 01:34:33.000
Der macht da einige Dinge,

01:34:33.000 --> 01:34:35.000
die ich teilweise

01:34:35.000 --> 01:34:37.000
auch gar nicht nachvollziehen konnte, wo ich

01:34:37.000 --> 01:34:39.000
erwartet hätte, dass

01:34:39.000 --> 01:34:41.000
ich das irgendwie

01:34:41.000 --> 01:34:43.000
den Style nachvollziehen kann. Ich konnte

01:34:43.000 --> 01:34:45.000
aber zum Beispiel die Linie von einem Bruch

01:34:45.000 --> 01:34:47.000
nicht nachvollziehen, wo die herkommt. Ich habe da kein

01:34:47.000 --> 01:34:49.000
Browser-CSS dazu gesehen.

01:34:49.000 --> 01:34:51.000
Oder die Wurzeln oder so.

01:34:51.000 --> 01:34:53.000
Und

01:34:53.000 --> 01:34:55.000
gehen wir mal ein bisschen drauf ein, wie es funktioniert.

01:34:55.000 --> 01:34:57.000
Ich bin, wie gesagt, nicht so extrem tief eingestiegen,

01:34:57.000 --> 01:34:59.000
aber ich habe ein schönes Cheatsheet gefunden,

01:34:59.000 --> 01:35:01.000
das alle möglichen Beispiele

01:35:01.000 --> 01:35:03.000
hat und daran hangele ich mich mal so ein bisschen

01:35:03.000 --> 01:35:05.000
durch, weil ich das dann auch noch

01:35:05.000 --> 01:35:07.000
ein bisschen besser fand als die MDN-Beispiele.

01:35:07.000 --> 01:35:09.000
Da

01:35:09.000 --> 01:35:11.000
anhand dieses Cheatsheets, das auch in die

01:35:11.000 --> 01:35:13.000
Shownotes kommt,

01:35:13.000 --> 01:35:15.000
zeigt sich mal wieder, Content

01:35:15.000 --> 01:35:17.000
is King. Es ist egal, wie was aussieht, wenn der

01:35:17.000 --> 01:35:19.000
Content gut ist, ist vollkommen

01:35:19.000 --> 01:35:21.000
egal, ob sich jemand beim Layout viel Mühe gegeben hat.

01:35:21.000 --> 01:35:23.000
Ist von der Seite

01:35:23.000 --> 01:35:25.000
cheat-cheats.org, finde ich

01:35:25.000 --> 01:35:27.000
ganz interessant.

01:35:27.000 --> 01:35:29.000
Und zwar

01:35:29.000 --> 01:35:31.000
ist eben das, also es gibt

01:35:31.000 --> 01:35:33.000
vielleicht noch ganz kurz, es gibt 30

01:35:33.000 --> 01:35:35.000
Elemente in MarthML

01:35:35.000 --> 01:35:37.000
Core. Das ist deutlich weniger

01:35:37.000 --> 01:35:39.000
als seine ganzen Attribute zum Beispiel bei

01:35:39.000 --> 01:35:41.000
SVG, aber ich gehe jetzt auch nicht auf

01:35:41.000 --> 01:35:43.000
alle ein, sondern nur auf so ein paar

01:35:43.000 --> 01:35:45.000
davon, dass man mal so ein Gefühl dafür kriegt.

01:35:45.000 --> 01:35:47.000
Also drumherum gibt es

01:35:47.000 --> 01:35:49.000
immer das Marth-Element, das theoretisch

01:35:49.000 --> 01:35:51.000
auch einen XML-Namespace hat, aber den

01:35:51.000 --> 01:35:53.000
muss man eigentlich im Browser nicht angeben,

01:35:53.000 --> 01:35:55.000
da das halt unterstützt, da

01:35:55.000 --> 01:35:57.000
bestimmte Dinge da einfach

01:35:57.000 --> 01:35:59.000
regelmäßig unterstützt sind.

01:35:59.000 --> 01:36:01.000
Und dann gibt es sowas wie das

01:36:01.000 --> 01:36:05.000
mn-Element,

01:36:05.000 --> 01:36:07.000
das ist Marth-Number,

01:36:07.000 --> 01:36:09.000
das sind üblicherweise dann die

01:36:09.000 --> 01:36:11.000
Zahlen, es gibt mrow,

01:36:11.000 --> 01:36:13.000
das ist für eine Zeile,

01:36:13.000 --> 01:36:15.000
also eigentlich eine Gruppierung,

01:36:15.000 --> 01:36:17.000
zum Beispiel würde man damit was machen,

01:36:17.000 --> 01:36:19.000
so eine Zeile in einem Bruch,

01:36:19.000 --> 01:36:21.000
man muss es nicht überall verwenden,

01:36:21.000 --> 01:36:25.000
aber es bietet sich an, so als Strukturierungselement.

01:36:25.000 --> 01:36:27.000
Dann gibt es mi,

01:36:27.000 --> 01:36:29.000
das ist für Identifier,

01:36:29.000 --> 01:36:31.000
also Dinge, die eigentlich keine Zahlen sind,

01:36:31.000 --> 01:36:33.000
sowas wie x, y, p

01:36:33.000 --> 01:36:35.000
oder sowas, oder

01:36:35.000 --> 01:36:37.000
cosinus oder so,

01:36:37.000 --> 01:36:39.000
wobei, ne, cosinus ist vielleicht sogar

01:36:39.000 --> 01:36:41.000
ein Operator,

01:36:41.000 --> 01:36:43.000
da bin ich mir jetzt gerade gar nicht sicher.

01:36:43.000 --> 01:36:45.000
Es gibt dann noch Operator, mo,

01:36:45.000 --> 01:36:47.000
plus minus mal geteilt

01:36:47.000 --> 01:36:49.000
und keine Ahnung, was es sonst noch so gibt.

01:36:49.000 --> 01:36:51.000
Und dann habe ich mir noch rausgenommen,

01:36:51.000 --> 01:36:53.000
mtext für text,

01:36:53.000 --> 01:36:55.000
genau, vielleicht muss ich an der Stelle

01:36:55.000 --> 01:36:57.000
nochmal ganz kurz an den Anfang zurück von meinen

01:36:57.000 --> 01:36:59.000
Notizen, damit ich jetzt, damit ich nicht

01:36:59.000 --> 01:37:01.000
alles vergesse.

01:37:01.000 --> 01:37:03.000
Es gibt auch ein Guide mit Tutorials in der MDN,

01:37:03.000 --> 01:37:05.000
den verlinken wir in den Shownotes.

01:37:05.000 --> 01:37:07.000
Und das Marv-Element selbst hat noch

01:37:07.000 --> 01:37:09.000
ein Attribut, das sich Display nennt,

01:37:09.000 --> 01:37:11.000
fand ich ganz spannend. Ich nehme an,

01:37:11.000 --> 01:37:13.000
das liegt wahrscheinlich so ein bisschen in der Historie von

01:37:13.000 --> 01:37:15.000
dem Marv-Element begründet, weil es nämlich

01:37:15.000 --> 01:37:17.000
eigentlich nichts macht als

01:37:17.000 --> 01:37:19.000
wie CSS-Display und zwar Block und

01:37:19.000 --> 01:37:21.000
Inline gibt es als Werte

01:37:21.000 --> 01:37:23.000
für den Attributen. Das ist genau das, was es macht.

01:37:23.000 --> 01:37:25.000
Also das Block,

01:37:25.000 --> 01:37:27.000
ich glaube standardmäßig ist es Inline,

01:37:27.000 --> 01:37:29.000
und wenn ich dem Block gebe, dann nimmt das Marv

01:37:29.000 --> 01:37:31.000
einfach dieses Marv-Element den ganzen Block

01:37:31.000 --> 01:37:33.000
ein, wie man es

01:37:33.000 --> 01:37:35.000
halt von Block und Inline-Elementen kennt.

01:37:35.000 --> 01:37:37.000
Genau.

01:37:37.000 --> 01:37:41.000
Und man könnte sich jetzt fragen, warum ist das nicht mit CSS,

01:37:41.000 --> 01:37:43.000
aber wie gesagt, ich glaube, das ist historisch begründet

01:37:43.000 --> 01:37:45.000
an der Stelle. Es gibt

01:37:45.000 --> 01:37:47.000
laut Standard auch ein Alttext-

01:37:47.000 --> 01:37:49.000
Attribut, das heißt wirklich Alttext zusammengeschrieben.

01:37:49.000 --> 01:37:51.000
Aber das wird jetzt zum Beispiel

01:37:51.000 --> 01:37:53.000
von VoiceOver auf dem Mac nicht unterstützt.

01:37:53.000 --> 01:37:55.000
Ich habe es auch in keinem der Beispiele gesehen.

01:37:55.000 --> 01:37:57.000
Aber im Standard steht es mit drin.

01:37:57.000 --> 01:37:59.000
So.

01:37:59.000 --> 01:38:01.000
Ich nehme jetzt mal

01:38:01.000 --> 01:38:03.000
so einfach ein Beispiel. Ein ganz, ganz

01:38:03.000 --> 01:38:05.000
einfaches Beispiel.

01:38:05.000 --> 01:38:07.000
Ich möchte jetzt zum Beispiel 2 plus 3

01:38:07.000 --> 01:38:09.000
gleich 5 schreiben.

01:38:09.000 --> 01:38:11.000
Also habe ich da das Marv-Element,

01:38:11.000 --> 01:38:13.000
das ist um alles drum herum. Und in dem Fall

01:38:13.000 --> 01:38:15.000
in diesem Beispiel von dem

01:38:15.000 --> 01:38:17.000
Cheat-Sheet habe ich noch das M-Row.

01:38:17.000 --> 01:38:19.000
Das wäre in dem Fall aber gar nicht unbedingt

01:38:19.000 --> 01:38:21.000
notwendig, um das zu gruppieren.

01:38:21.000 --> 01:38:23.000
Weil es gibt halt eigentlich nur eine Gruppe.

01:38:23.000 --> 01:38:25.000
Also braucht man es nicht unbedingt.

01:38:25.000 --> 01:38:27.000
Dann habe ich M-N.

01:38:27.000 --> 01:38:29.000
Also für die Marv-Number 2.

01:38:29.000 --> 01:38:31.000
Da steht einfach nur die 2 drin.

01:38:31.000 --> 01:38:33.000
Dann kommt M-O, der Operator.

01:38:33.000 --> 01:38:35.000
Da würde das Plus drin stehen.

01:38:35.000 --> 01:38:37.000
Dann kommt wieder M-N.

01:38:37.000 --> 01:38:39.000
Dann steht die 3 drin. Dann kommt M-O

01:38:39.000 --> 01:38:41.000
mit dem Ist-Gleich. Dann kommt M-N mit der

01:38:41.000 --> 01:38:43.000
5. Und dann

01:38:43.000 --> 01:38:45.000
das schließende Marv.

01:38:45.000 --> 01:38:47.000
So weit, so gut. Das ist ja erstmal

01:38:47.000 --> 01:38:49.000
relativ easy.

01:38:49.000 --> 01:38:51.000
Jetzt fangen wir mal an mit

01:38:51.000 --> 01:38:53.000
was Interessantem. Also da passiert

01:38:53.000 --> 01:38:55.000
im Prinzip nichts, außer dass der Text dann da steht.

01:38:55.000 --> 01:38:57.000
Also so weit, so gut.

01:38:57.000 --> 01:38:59.000
Weil ich, wenn wir auf den Text noch eingehen,

01:38:59.000 --> 01:39:01.000
die Fonts

01:39:01.000 --> 01:39:03.000
bei Marv sind entscheidend,

01:39:03.000 --> 01:39:05.000
weil, gut,

01:39:05.000 --> 01:39:07.000
Plus, Minus, Mal, Geteilt, Ist-Gleich

01:39:07.000 --> 01:39:09.000
und sowas. Und Zahlen, die gibt es jetzt

01:39:09.000 --> 01:39:11.000
eigentlich in jeder Schriftart drin.

01:39:11.000 --> 01:39:13.000
Aber sobald du da ein bisschen Interessanter...

01:39:13.000 --> 01:39:15.000
Das würdest du wahrscheinlich auch nicht Marv nehmen,

01:39:15.000 --> 01:39:17.000
wenn du nur sowas hast. Aber sobald es

01:39:17.000 --> 01:39:19.000
interessanter wird, irgendwelche Wurzeln,

01:39:19.000 --> 01:39:21.000
Klammern,

01:39:21.000 --> 01:39:23.000
Summenzeichen und sowas, da muss man dann

01:39:23.000 --> 01:39:25.000
schon aufpassen, dass man eine Schriftart

01:39:25.000 --> 01:39:27.000
verwendet, die diese

01:39:27.000 --> 01:39:29.000
ganzen mathematischen Symbole auch unterstützt.

01:39:29.000 --> 01:39:31.000
Dazu kommt auch ein Link in die

01:39:31.000 --> 01:39:33.000
Shownotes. Da gibt es

01:39:33.000 --> 01:39:35.000
Listen mit Fonts, die dafür

01:39:35.000 --> 01:39:37.000
gut geeignet sind.

01:39:37.000 --> 01:39:39.000
So, aber wo es jetzt zum Beispiel

01:39:39.000 --> 01:39:41.000
schon ein bisschen interessanter wird,

01:39:41.000 --> 01:39:43.000
wo eigentlich jetzt ein Zeichen mit reinkommt,

01:39:43.000 --> 01:39:45.000
das nicht standardmäßig,

01:39:45.000 --> 01:39:47.000
das jetzt nicht quasi

01:39:47.000 --> 01:39:49.000
mit reingemalt wird, ist zum Beispiel

01:39:49.000 --> 01:39:51.000
ein Bruch.

01:39:51.000 --> 01:39:53.000
Und ein Bruch,

01:39:53.000 --> 01:39:55.000
ich habe wieder Math außenrum, da stimmt übrigens

01:39:55.000 --> 01:39:57.000
das Cheat-Sheet nicht an der Stelle,

01:39:57.000 --> 01:39:59.000
das kann ich vielleicht mal noch

01:39:59.000 --> 01:40:01.000
sagen, weil da nämlich das Math-Element drumherum

01:40:01.000 --> 01:40:03.000
fehlt für das Beispiel.

01:40:03.000 --> 01:40:05.000
Dann hast du nämlich

01:40:05.000 --> 01:40:07.000
das M-Frac

01:40:07.000 --> 01:40:09.000
Element,

01:40:09.000 --> 01:40:11.000
Math-Fraction

01:40:11.000 --> 01:40:13.000
und da

01:40:13.000 --> 01:40:15.000
hättest du dann eine

01:40:15.000 --> 01:40:17.000
Zeile

01:40:17.000 --> 01:40:19.000
mit M-Row,

01:40:19.000 --> 01:40:21.000
also du hast das

01:40:21.000 --> 01:40:23.000
M-Frac-Element und dann hast du

01:40:23.000 --> 01:40:25.000
M-Row und das wäre dann

01:40:25.000 --> 01:40:27.000
die erste Zeile und da schreibst du

01:40:27.000 --> 01:40:29.000
dann zum Beispiel rein

01:40:29.000 --> 01:40:31.000
Mi wiederum für die,

01:40:31.000 --> 01:40:33.000
in dem Fall, wieso nehmen die eigentlich

01:40:33.000 --> 01:40:35.000
da Mi und nicht Mn, eigentlich müssten sie Mn

01:40:35.000 --> 01:40:37.000
nehmen, plus

01:40:37.000 --> 01:40:39.000
wieder in Mo

01:40:39.000 --> 01:40:41.000
für Math Operator,

01:40:41.000 --> 01:40:43.000
dann wieder die Zahl,

01:40:43.000 --> 01:40:45.000
dann geht die Row zu

01:40:45.000 --> 01:40:47.000
und dann kommt die nächste Row und dann

01:40:47.000 --> 01:40:49.000
kommt wieder, in dem Fall, ich weiß auch nicht

01:40:49.000 --> 01:40:51.000
warum sie Mi geschrieben haben, Mn,

01:40:51.000 --> 01:40:53.000
sag ich jetzt mal, dann kommt

01:40:53.000 --> 01:40:55.000
Mo mit Minus und dann wieder

01:40:55.000 --> 01:40:57.000
die 6 in Mn und dann geht die

01:40:57.000 --> 01:40:59.000
M-Row wieder zu und dann M-Frac,

01:40:59.000 --> 01:41:01.000
dann hat das quasi verstanden, das ist jetzt ein Bruch,

01:41:01.000 --> 01:41:03.000
der hat zwei, üblicherweise haben Brüche ja

01:41:03.000 --> 01:41:05.000
zwei Zeilen und das macht

01:41:05.000 --> 01:41:07.000
er dann automatisch, den Bruchstrich zieht er dann automatisch

01:41:07.000 --> 01:41:09.000
für mich dazwischen.

01:41:09.000 --> 01:41:11.000
Ja, cool.

01:41:11.000 --> 01:41:13.000
Das Ganze kann man

01:41:13.000 --> 01:41:15.000
noch viel weiter treiben, also man kann dann

01:41:15.000 --> 01:41:17.000
zum Beispiel auch sagen, naja, eine Wurzel

01:41:17.000 --> 01:41:19.000
hätte ich gerne.

01:41:19.000 --> 01:41:21.000
Hätte ich jetzt gerne die Square Root,

01:41:21.000 --> 01:41:23.000
übrigens ich lese da immer Squirt,

01:41:23.000 --> 01:41:25.000
M-S-Q-R-T,

01:41:25.000 --> 01:41:27.000
das ist

01:41:27.000 --> 01:41:29.000
halt die Square Root und die

01:41:29.000 --> 01:41:31.000
würde ich dann so schreiben, dass ich dann sage

01:41:31.000 --> 01:41:33.000
M-S-Q-R-T das Tag und

01:41:33.000 --> 01:41:35.000
E-M-N und dann wenn ich jetzt die

01:41:35.000 --> 01:41:37.000
Wurzel aus 4 haben will,

01:41:37.000 --> 01:41:39.000
wird Square Root drum herum geschrieben

01:41:39.000 --> 01:41:41.000
und dann wird mir diese Wurzel dahin

01:41:41.000 --> 01:41:43.000
gemalt tatsächlich, ohne dass ich irgendwo ein

01:41:43.000 --> 01:41:45.000
Wurzelzeichen habe reinschreiben müssen.

01:41:45.000 --> 01:41:47.000
Kann man auch noch weiter treiben,

01:41:47.000 --> 01:41:49.000
indem ich jetzt sagen möchte, ich hätte

01:41:49.000 --> 01:41:51.000
aber jetzt nicht die Square Root, sondern ich hätte

01:41:51.000 --> 01:41:53.000
gerne die siebte Wurzel aus

01:41:53.000 --> 01:41:55.000
irgendwas anderem,

01:41:55.000 --> 01:41:57.000
dann kann ich halt M-Root

01:41:57.000 --> 01:41:59.000
nehmen

01:41:59.000 --> 01:42:01.000
und mache mir dann meine Row,

01:42:01.000 --> 01:42:03.000
also ja, ich glaube,

01:42:03.000 --> 01:42:05.000
es ist tedious. Schaut euch die

01:42:05.000 --> 01:42:07.000
Beispiele an, wenn ich die jetzt alle vorlese.

01:42:07.000 --> 01:42:09.000
Ja, ich hab's mir auch kopiert in Codepen, um zu gucken,

01:42:09.000 --> 01:42:11.000
was da genau passiert.

01:42:11.000 --> 01:42:13.000
Aber es gibt da

01:42:13.000 --> 01:42:15.000
unendlich viele Beispiele und

01:42:15.000 --> 01:42:17.000
was ich an dem Cheatsheet sehr, sehr geil finde,

01:42:17.000 --> 01:42:19.000
also da fangen wir irgendwann auch mit Klammern

01:42:19.000 --> 01:42:21.000
und nicht nur Klammern, die nach links und rechts gehen,

01:42:21.000 --> 01:42:23.000
sondern auch von oben nach unten und sowas,

01:42:23.000 --> 01:42:25.000
das geht auch alles.

01:42:25.000 --> 01:42:27.000
Und auch

01:42:27.000 --> 01:42:29.000
Matrizen, das heißt,

01:42:29.000 --> 01:42:31.000
das ganze Marv,

01:42:31.000 --> 01:42:33.000
die ganze Marv-Geschichte hat auch sowas wie eine Art

01:42:33.000 --> 01:42:35.000
Table-Layout,

01:42:35.000 --> 01:42:37.000
was du dir zusammenbauen kannst, nämlich mit

01:42:37.000 --> 01:42:39.000
M-Table und dann kannst du halt auch

01:42:39.000 --> 01:42:41.000
dreidimensionale Dinge darstellen,

01:42:41.000 --> 01:42:43.000
indem du drei Zahlen

01:42:43.000 --> 01:42:45.000
untereinander schreibst und die aber immer wieder

01:42:45.000 --> 01:42:47.000
auf derselben Zeile sind und sowas mit M-Table

01:42:47.000 --> 01:42:49.000
und dann gibt es MTR, M-Table-Row

01:42:49.000 --> 01:42:51.000
und so weiter,

01:42:51.000 --> 01:42:53.000
da kannst du komplette Tabellen zusammenbauen innerhalb

01:42:53.000 --> 01:42:55.000
von Marv und

01:42:55.000 --> 01:42:57.000
was ich fantastisch finde ist,

01:42:57.000 --> 01:42:59.000
ganz unten

01:42:59.000 --> 01:43:01.000
in dem Cheatsheet gibt es den MathML

01:43:01.000 --> 01:43:03.000
Torture-Test

01:43:03.000 --> 01:43:05.000
und gut,

01:43:05.000 --> 01:43:07.000
da ist es mit den Tables jetzt glaube ich nicht mit drin,

01:43:07.000 --> 01:43:09.000
aber ansonsten so ziemlich alles, das ist eine wahnsinnige

01:43:09.000 --> 01:43:11.000
Formel, ich habe keine Ahnung, ob

01:43:11.000 --> 01:43:13.000
die irgendeinen Sinn ergibt,

01:43:13.000 --> 01:43:15.000
aber da hast du so alle möglichen Zeichen

01:43:15.000 --> 01:43:17.000
hochgestellt, tiefgestellt, istgleich,

01:43:17.000 --> 01:43:19.000
Brüche, Klammern in

01:43:19.000 --> 01:43:21.000
allen möglichen Variationen und so weiter.

01:43:21.000 --> 01:43:23.000
Ich habe das mal ausprobiert,

01:43:23.000 --> 01:43:25.000
mir das heute mit VoiceOver vorlesen

01:43:25.000 --> 01:43:27.000
gelassen, um herauszufinden,

01:43:27.000 --> 01:43:29.000
kann ich denn,

01:43:29.000 --> 01:43:31.000
funktioniert das irgendwie halbwegs sinnvoll?

01:43:31.000 --> 01:43:33.000
Und ich würde

01:43:33.000 --> 01:43:35.000
sagen, es ist glaube ich schwierig,

01:43:35.000 --> 01:43:37.000
aber nicht unmöglich.

01:43:37.000 --> 01:43:39.000
Also was ich interessant fand, zum Beispiel Fakultät hat

01:43:39.000 --> 01:43:41.000
er mir richtig vorgelesen,

01:43:41.000 --> 01:43:43.000
also vier Ausrufezeichen, fünf Ausrufezeichen,

01:43:43.000 --> 01:43:45.000
was da eher weiter rechts

01:43:45.000 --> 01:43:47.000
ist bei dem Beispiel. Aber ja,

01:43:47.000 --> 01:43:49.000
das sind alles mal so kleine

01:43:49.000 --> 01:43:51.000
Beispiele von, was ist denn da so

01:43:51.000 --> 01:43:53.000
möglich, wie kommt man denn da

01:43:53.000 --> 01:43:55.000
so rein und interessant finde ich halt,

01:43:55.000 --> 01:43:57.000
dass Marv einem tatsächlich bestimmte Dinge

01:43:57.000 --> 01:43:59.000
hinmalt, ohne dass sie als Zeichen

01:43:59.000 --> 01:44:01.000
vorkommen. Also teilweise kann

01:44:01.000 --> 01:44:03.000
das auch Klammern damit setzen und so weiter.

01:44:03.000 --> 01:44:05.000
Aber wie gesagt, ich kann

01:44:05.000 --> 01:44:07.000
nicht, ich wollte jetzt auch nicht so extrem

01:44:07.000 --> 01:44:09.000
tief reingehen, fand's jetzt aber, dass ich,

01:44:09.000 --> 01:44:11.000
ich fand die Lernkurve relativ gut.

01:44:11.000 --> 01:44:13.000
Ich fand, ich fühlte mich als

01:44:13.000 --> 01:44:15.000
jemand, der sich mit HTML gut auskennt,

01:44:15.000 --> 01:44:17.000
ganz gut abgeholt und dachte so, ah ja, okay,

01:44:17.000 --> 01:44:19.000
das ergibt irgendwie Sinn, dass man es so macht und

01:44:19.000 --> 01:44:21.000
ah ja, das verschachtelt man irgendwie so

01:44:21.000 --> 01:44:23.000
und dann nimmt man das und dann wird man es so hingemalt.

01:44:23.000 --> 01:44:25.000
Also ich fand das irgendwie,

01:44:25.000 --> 01:44:27.000
bin jetzt nicht so unbedingt der Mathematiker, aber ich

01:44:27.000 --> 01:44:29.000
hab mich da ganz wohl gefühlt in dem Ding und fand das

01:44:29.000 --> 01:44:31.000
irgendwie alles relativ logisch, soweit

01:44:31.000 --> 01:44:33.000
ich jetzt da drin gekommen bin.

01:44:33.000 --> 01:44:37.000
Genau, und wie gesagt,

01:44:37.000 --> 01:44:39.000
schaut euch dieses Cheatsheet an, das finde ich eigentlich

01:44:39.000 --> 01:44:41.000
ganz gut.

01:44:41.000 --> 01:44:43.000
Wenn man

01:44:43.000 --> 01:44:45.000
was, Barrierefreiheit... Hast du das verlinkt,

01:44:45.000 --> 01:44:47.000
das Cheatsheet, weil ich hab's grad nochmal...

01:44:47.000 --> 01:44:49.000
Das Cheatsheet habe ich verlinkt,

01:44:49.000 --> 01:44:51.000
ich hab da hingeschrieben,

01:44:51.000 --> 01:44:53.000
viele MathML-Beispiele

01:44:53.000 --> 01:44:55.000
heißt das, von einfach bis komplex.

01:44:55.000 --> 01:44:57.000
Ich hab's gerade

01:44:57.000 --> 01:44:59.000
abgehakt. Das ist das Cheatsheet.

01:44:59.000 --> 01:45:01.000
Genau.

01:45:01.000 --> 01:45:03.000
Was Accessibility angeht,

01:45:03.000 --> 01:45:05.000
Math hat eine eigene Role,

01:45:05.000 --> 01:45:07.000
das Math-Element hat eine eigene Math-Role,

01:45:07.000 --> 01:45:09.000
das heißt, es wird einem dann auch vorgelesen,

01:45:09.000 --> 01:45:11.000
jetzt kommt was Mathematisches und dann

01:45:11.000 --> 01:45:13.000
kommt der ganze Kram hintereinander,

01:45:13.000 --> 01:45:15.000
hab ich extra ausprobiert auch.

01:45:15.000 --> 01:45:17.000
Und jetzt am Ende

01:45:17.000 --> 01:45:19.000
davon habe ich noch zwei Fragen an euch.

01:45:19.000 --> 01:45:21.000
Und zwar die erste ist,

01:45:21.000 --> 01:45:23.000
habt ihr es schon mal

01:45:23.000 --> 01:45:25.000
eingesetzt und wenn ja,

01:45:25.000 --> 01:45:27.000
wofür? Und falls

01:45:27.000 --> 01:45:29.000
nicht, habt ihr

01:45:29.000 --> 01:45:31.000
außer in der Wikipedia, die lasse ich nicht gelten,

01:45:31.000 --> 01:45:33.000
weil da habe ich es selbst auch schon gesehen,

01:45:33.000 --> 01:45:35.000
reale Anwendungsfälle

01:45:35.000 --> 01:45:37.000
davon gesehen, falls ihr es noch nicht eingesetzt habt.

01:45:37.000 --> 01:45:39.000
Wo ihr sagt, oh ja,

01:45:39.000 --> 01:45:41.000
auf der Seite kenne ich das, da benutzen

01:45:41.000 --> 01:45:43.000
die das relativ intensiv.

01:45:43.000 --> 01:45:45.000
Ah, genau.

01:45:45.000 --> 01:45:47.000
Eine Sache habe ich noch vergessen, und zwar

01:45:47.000 --> 01:45:49.000
für Leute, die das nicht von Hand schreiben

01:45:49.000 --> 01:45:51.000
wollen und sich das generieren

01:45:51.000 --> 01:45:53.000
lassen wollen, habe ich auch nochmal ein bisschen

01:45:53.000 --> 01:45:55.000
rumgesucht, ob es

01:45:55.000 --> 01:45:57.000
denn irgendwie dafür so

01:45:57.000 --> 01:45:59.000
What you see is what you get Editoren gibt, weil vielleicht will man

01:45:59.000 --> 01:46:01.000
nicht das, also ich kann mir auch vorstellen, jemand der

01:46:01.000 --> 01:46:03.000
eine mathematische Formel jetzt schreiben will, will jetzt nicht

01:46:03.000 --> 01:46:05.000
unbedingt MathML dafür lernen, sondern der

01:46:05.000 --> 01:46:07.000
will vielleicht einfach sagen, naja, ich klicke mir das

01:46:07.000 --> 01:46:09.000
jetzt hier irgendwie zusammen, ich weiß, wie die Formel aussehen

01:46:09.000 --> 01:46:11.000
soll, ich klicke mir das irgendwie zusammen

01:46:11.000 --> 01:46:13.000
und ich habe tatsächlich was gefunden

01:46:13.000 --> 01:46:15.000
in der Richtung. Ich habe ein bisschen recherchieren

01:46:15.000 --> 01:46:17.000
müssen, die ersten Ergebnisse waren alle Leute, die einem

01:46:17.000 --> 01:46:19.000
irgendwas verkaufen wollen, was man dann installieren muss,

01:46:19.000 --> 01:46:21.000
aber es gibt tatsächlich auch so ein

01:46:21.000 --> 01:46:23.000
What you see is what you get Editor im Browser.

01:46:23.000 --> 01:46:25.000
Es sieht ein bisschen kryptisch

01:46:25.000 --> 01:46:27.000
aus, aber ich glaube, es liegt einfach daran, dass

01:46:27.000 --> 01:46:29.000
solche mathematischen Formeln

01:46:29.000 --> 01:46:31.000
einfach eher kryptisch sind, da muss man schon wissen, was man

01:46:31.000 --> 01:46:33.000
tut. Der heißt

01:46:33.000 --> 01:46:35.000
auf der Seite imatheq.com

01:46:35.000 --> 01:46:37.000
ein langer

01:46:37.000 --> 01:46:39.000
Link, irgendwas MathML und so weiter

01:46:39.000 --> 01:46:41.000
kommt auch in die Shownotes.

01:46:41.000 --> 01:46:43.000
Fand ich aber irgendwie noch,

01:46:43.000 --> 01:46:45.000
ich wollte das sowas noch mit drin haben

01:46:45.000 --> 01:46:47.000
für Leute, die damit mal rumspielen wollen,

01:46:47.000 --> 01:46:49.000
die sich quasi eine Formel zusammen klicken und dann

01:46:49.000 --> 01:46:51.000
sehen wollen, da wird wirklich also

01:46:51.000 --> 01:46:53.000
Echtzeit, ich klick da drin rum,

01:46:53.000 --> 01:46:55.000
baue mir mal eine Formel zusammen

01:46:55.000 --> 01:46:57.000
und sehe dann direkt das Math,

01:46:57.000 --> 01:46:59.000
den MathML Output,

01:46:59.000 --> 01:47:01.000
wie er sich zusammen bastelt.

01:47:01.000 --> 01:47:03.000
Also auch, dass ich mit dem Cursor

01:47:03.000 --> 01:47:05.000
dann da rum springen kann

01:47:05.000 --> 01:47:07.000
und da sind dann so blaue

01:47:07.000 --> 01:47:09.000
Platzhalter

01:47:09.000 --> 01:47:11.000
und dann

01:47:11.000 --> 01:47:13.000
kann man genau da rein tippen.

01:47:13.000 --> 01:47:15.000
Also das ist schon echt cool gemacht.

01:47:15.000 --> 01:47:17.000
Das ist ziemlich cool. Es kommt erst mal,

01:47:17.000 --> 01:47:19.000
wie gesagt, erst mal ein bisschen wild daher,

01:47:19.000 --> 01:47:21.000
aber wenn man dann

01:47:21.000 --> 01:47:23.000
versteht, wie komplex das eigentlich ist, was da gemacht

01:47:23.000 --> 01:47:25.000
wird, ist es dann noch eine ganz gute Abstraktionsebene,

01:47:25.000 --> 01:47:27.000
um sich mal eine Formel zusammen

01:47:27.000 --> 01:47:29.000
zu klicken. Allerdings

01:47:29.000 --> 01:47:31.000
die meisten Zeichen davon,

01:47:31.000 --> 01:47:33.000
ich habe vergessen, also

01:47:33.000 --> 01:47:35.000
ein paar habe ich, glaube ich, auch noch nie gesehen.

01:47:35.000 --> 01:47:37.000
Ja,

01:47:37.000 --> 01:47:39.000
da bin ich ganz ehrlich.

01:47:39.000 --> 01:47:41.000
Ja, genau. Das war es

01:47:41.000 --> 01:47:43.000
im Prinzip von mir zum

01:47:43.000 --> 01:47:45.000
Math Element und

01:47:45.000 --> 01:47:47.000
es war jetzt heute irgendwie sehr erfrischend, also

01:47:47.000 --> 01:47:49.000
ich habe mir schon ein bisschen Zeit dafür genommen

01:47:49.000 --> 01:47:51.000
und am Anfang bei sowas

01:47:51.000 --> 01:47:53.000
denke ich immer so, oh, ja,

01:47:53.000 --> 01:47:55.000
muss ich jetzt, ja, jetzt muss ich doch mal was vorbereiten

01:47:55.000 --> 01:47:57.000
und jetzt war sowas ganz neues

01:47:57.000 --> 01:47:59.000
und sehr abstrakt erst mal gedacht,

01:47:59.000 --> 01:48:01.000
aber ich muss sagen, damit rumzuspielen,

01:48:01.000 --> 01:48:03.000
das hat mir richtig Spaß gemacht

01:48:03.000 --> 01:48:05.000
und dadurch, dass ich diese

01:48:05.000 --> 01:48:07.000
Cheatsheet-Seite gefunden habe, musste ich

01:48:07.000 --> 01:48:09.000
eigentlich auch gar keine eigenen Demos bauen,

01:48:09.000 --> 01:48:11.000
weil da so für jede

01:48:11.000 --> 01:48:13.000
Frage, die ich mir gestellt habe, ach, und wie macht man das eigentlich,

01:48:13.000 --> 01:48:15.000
gab es da irgendwie ein Beispiel, also es sind ganz, ganz

01:48:15.000 --> 01:48:17.000
viele Beispiele und die sind alle relativ

01:48:17.000 --> 01:48:19.000
minimal immer, also das ist dann nicht gleich

01:48:19.000 --> 01:48:21.000
die riesen Megaformel bis auf die ganz unten, sondern

01:48:21.000 --> 01:48:23.000
immer so, ja, und jetzt guck mal, ah, so

01:48:23.000 --> 01:48:25.000
geht ein Bruch und hier, so

01:48:25.000 --> 01:48:27.000
kann ich jetzt hier irgendwie die Zeichen platzieren,

01:48:27.000 --> 01:48:29.000
wenn ich irgendwie so ein großes Zeichen nebendran habe,

01:48:29.000 --> 01:48:31.000
irgendwie so ein Summenzeichen oder sowas,

01:48:31.000 --> 01:48:33.000
ah, wie geht eigentlich so eine Matrize,

01:48:33.000 --> 01:48:35.000
ah, cool, okay, so, und also immer so Minimalbeispiele.

01:48:35.000 --> 01:48:37.000
Sehr, sehr cool gemacht.

01:48:37.000 --> 01:48:39.000
Ja, die Seite finde ich,

01:48:39.000 --> 01:48:41.000
die feiere ich echt ab, die ist richtig toll.

01:48:41.000 --> 01:48:43.000
Wie gesagt, beim Layout nicht erschrecken lassen,

01:48:43.000 --> 01:48:45.000
das sieht relativ basic aus, aber die Beispiele

01:48:45.000 --> 01:48:47.000
sind einfach sehr gut.

01:48:47.000 --> 01:48:49.000
Genau. Cool.

01:48:49.000 --> 01:48:51.000
Dann haben wir das Thema schon durch.

01:48:51.000 --> 01:48:53.000
Ich fand es auch cool, dass wir heute mal

01:48:53.000 --> 01:48:55.000
wirklich so was, was so fernab

01:48:55.000 --> 01:48:57.000
von dem, was man eigentlich mit

01:48:57.000 --> 01:48:59.000
HTML macht und was man auch selber

01:48:59.000 --> 01:49:01.000
anfasst, mal was

01:49:01.000 --> 01:49:03.000
jetzt gemacht haben.

01:49:03.000 --> 01:49:05.000
Ich hoffe, dass es beim Zuhören nicht ganz

01:49:05.000 --> 01:49:07.000
so abstrakt

01:49:07.000 --> 01:49:09.000
war und man sich das halbwegs vorstellen kann.

01:49:09.000 --> 01:49:11.000
Wenn ich hier die Math-Elemente

01:49:11.000 --> 01:49:13.000
vorgelesen habe, das war bestimmt schon ein bisschen anstrengend.

01:49:13.000 --> 01:49:15.000
Kann ich mir vorstellen.

01:49:15.000 --> 01:49:17.000
Aber da empfehle ich euch, falls es euch

01:49:17.000 --> 01:49:19.000
interessiert, schaut euch einfach wirklich dieses

01:49:19.000 --> 01:49:21.000
Cheat-Sheet mal an. Das ist wirklich fantastisch.

01:49:21.000 --> 01:49:23.000
Und wenn man, da hat man, also ich hab

01:49:23.000 --> 01:49:25.000
sofort drauf gehuckt und ist so, ah ja, okay, gut.

01:49:25.000 --> 01:49:27.000
Ah ja, ist ja ganz einfach.

01:49:27.000 --> 01:49:29.000
So, und das kann ich

01:49:29.000 --> 01:49:31.000
nur sehr empfehlen, falls das jetzt für den Podcast

01:49:31.000 --> 01:49:33.000
weniger geeignet war. Ich glaube, so was

01:49:33.000 --> 01:49:35.000
So was wäre

01:49:35.000 --> 01:49:37.000
tatsächlich eher für das Streaming.

01:49:37.000 --> 01:49:39.000
Ja, genau.

01:49:39.000 --> 01:49:41.000
Vielleicht streamen wir ja irgendwann

01:49:41.000 --> 01:49:43.000
nochmal, wer weiß.

01:49:43.000 --> 01:49:45.000
Ja, aber

01:49:45.000 --> 01:49:47.000
dieses Beispiel, dieses Cheat-Sheet, ich leg's euch

01:49:47.000 --> 01:49:49.000
zum 27. Mal jetzt hier

01:49:49.000 --> 01:49:51.000
ans Herz, weil es einfach gut ist.

01:49:51.000 --> 01:49:53.000
Sehr schön. Dann hast du jetzt noch ein Geil-Teil und

01:49:53.000 --> 01:49:55.000
dann war's das schon.

01:49:55.000 --> 01:49:57.000
Das Geil-Teil.

01:49:57.000 --> 01:49:59.000
Geil-Teil.

01:49:59.000 --> 01:50:05.000
Ja,

01:50:05.000 --> 01:50:07.000
wie fange ich an?

01:50:07.000 --> 01:50:09.000
Vielleicht muss ich es von hinten

01:50:09.000 --> 01:50:11.000
nach vorne machen,

01:50:11.000 --> 01:50:13.000
in meinen Notizen.

01:50:13.000 --> 01:50:15.000
Vielleicht kennt der eine oder die andere

01:50:15.000 --> 01:50:17.000
motherfuckingwebsite.com

01:50:17.000 --> 01:50:21.000
und zwar ist das so eine

01:50:21.000 --> 01:50:23.000
Webseite, die ist so

01:50:23.000 --> 01:50:25.000
simpel wie sie nur sein kann, ist einfach nur HTML,

01:50:25.000 --> 01:50:27.000
hier so, this is a motherfucking website,

01:50:27.000 --> 01:50:29.000
it is fucking perfect, seriously, what the fuck

01:50:29.000 --> 01:50:31.000
else do you want? Und dann

01:50:31.000 --> 01:50:33.000
hier lädt super schnell und hat gar

01:50:33.000 --> 01:50:35.000
kein CSS und sonst nix und ist responsive

01:50:35.000 --> 01:50:37.000
und das wird im Prinzip in einem

01:50:37.000 --> 01:50:39.000
eher mit Schimpfwörtern

01:50:39.000 --> 01:50:41.000
gespickten Text ein bisschen

01:50:41.000 --> 01:50:43.000
erläutert.

01:50:43.000 --> 01:50:45.000
Das ist uralt,

01:50:45.000 --> 01:50:47.000
motherfuckingwebsite, ich kenne das schon ziemlich

01:50:47.000 --> 01:50:49.000
lange und jetzt hat jemand

01:50:49.000 --> 01:50:51.000
sich die Mühe gemacht, ich weiß gar nicht, ob

01:50:51.000 --> 01:50:53.000
das tatsächlich die Inspiration dafür war,

01:50:53.000 --> 01:50:55.000
im Prinzip sowas

01:50:55.000 --> 01:50:57.000
noch mal zu machen, allerdings

01:50:57.000 --> 01:50:59.000
mit noch viel schlimmeren Beleidigungen,

01:50:59.000 --> 01:51:01.000
aber

01:51:01.000 --> 01:51:03.000
auch mit sehr viel mehr Inhalt.

01:51:03.000 --> 01:51:05.000
Und zwar heißt die Seite

01:51:05.000 --> 01:51:07.000
justfuckingusehtml.com

01:51:07.000 --> 01:51:09.000
und ich muss zugeben,

01:51:09.000 --> 01:51:11.000
ich bin tatsächlich über ein YouTube-Video

01:51:11.000 --> 01:51:13.000
drauf gekommen und zwar, es gibt

01:51:13.000 --> 01:51:15.000
einen Twitch-Streamer,

01:51:15.000 --> 01:51:17.000
der sehr viel über Technik streamt,

01:51:17.000 --> 01:51:19.000
theprimetime, vielleicht

01:51:19.000 --> 01:51:21.000
sagt dir das was? Hast du vielleicht schon mal

01:51:21.000 --> 01:51:23.000
gesehen, so ein Typ mit Schnurrbart, der auch mal

01:51:23.000 --> 01:51:25.000
bei Netflix gearbeitet hat, ist relativ unterhaltsam

01:51:25.000 --> 01:51:27.000
tatsächlich, muss ich zugeben.

01:51:27.000 --> 01:51:29.000
Und

01:51:29.000 --> 01:51:31.000
der liest auch manchmal Blogartikel

01:51:31.000 --> 01:51:33.000
oder Webseiten vor und kommentiert

01:51:33.000 --> 01:51:35.000
das dann und so bin ich tatsächlich da drauf

01:51:35.000 --> 01:51:37.000
gestoßen. Also das YouTube-Video,

01:51:37.000 --> 01:51:39.000
wer die Seite sich nicht durchlesen will, sondern

01:51:39.000 --> 01:51:41.000
sich's vorlesen lassen will mit Kommentar,

01:51:41.000 --> 01:51:43.000
dem sei auch das YouTube-Video ans Herz gelegt,

01:51:43.000 --> 01:51:45.000
kommt auch in die Shownotes.

01:51:45.000 --> 01:51:47.000
Ja, und auf der Seite,

01:51:47.000 --> 01:51:49.000
die verfolgt einen sehr ähnlichen Ansatz, nämlich hier,

01:51:49.000 --> 01:51:51.000
das ist die Plain-HTML-Seite.

01:51:51.000 --> 01:51:55.000
Ich lese jetzt mal halt so einen

01:51:55.000 --> 01:51:57.000
Bereich vor.

01:51:57.000 --> 01:51:59.000
So you call yourself a Web-Developer?

01:51:59.000 --> 01:52:01.000
Fucking pathetic! You gotta be

01:52:01.000 --> 01:52:03.000
kidding me, asshat! Do you even fucking know

01:52:03.000 --> 01:52:05.000
how to display a button on screen without

01:52:05.000 --> 01:52:07.000
the current modern fuckery you lean on?

01:52:07.000 --> 01:52:09.000
Here, little shit, here's

01:52:09.000 --> 01:52:11.000
your button, and then it's fucking buttons.

01:52:11.000 --> 01:52:13.000
Einfach nur ein Button-Element.

01:52:13.000 --> 01:52:15.000
Genau. Tattoo this

01:52:15.000 --> 01:52:17.000
code on your forehead so that you'll remember

01:52:17.000 --> 01:52:19.000
when you look at your fat face

01:52:19.000 --> 01:52:21.000
in the mirror.

01:52:21.000 --> 01:52:23.000
Und dann ist der Button-Code

01:52:23.000 --> 01:52:25.000
tatsächlich gespiegelt dargestellt, auch

01:52:25.000 --> 01:52:27.000
nice. Und so geht

01:52:27.000 --> 01:52:29.000
es halt weiter. Also es ist nicht nur Button, sondern

01:52:29.000 --> 01:52:31.000
Listen,

01:52:31.000 --> 01:52:33.000
Formatierung von Text,

01:52:33.000 --> 01:52:37.000
Überschriften,

01:52:37.000 --> 01:52:39.000
Details

01:52:39.000 --> 01:52:41.000
und Summary,

01:52:41.000 --> 01:52:43.000
Popover, Dialog-Element,

01:52:43.000 --> 01:52:45.000
Formular-Element. Also da wird wirklich

01:52:45.000 --> 01:52:47.000
quasi so einmal, gibt es einmal so einen

01:52:47.000 --> 01:52:49.000
kompletten Abriss durch

01:52:49.000 --> 01:52:51.000
semantisches HTML. Ich will nicht sagen, es ist alles

01:52:51.000 --> 01:52:53.000
drin, aber schon relativ viel

01:52:53.000 --> 01:52:55.000
und relativ viele Elemente,

01:52:55.000 --> 01:52:57.000
von denen ich behaupte, dass sie

01:52:57.000 --> 01:52:59.000
oft nicht eingesetzt werden

01:52:59.000 --> 01:53:01.000
oder nicht gekannt

01:53:01.000 --> 01:53:03.000
werden von Leuten,

01:53:03.000 --> 01:53:05.000
die sie eigentlich kennen sollten.

01:53:05.000 --> 01:53:07.000
Genau. Und wer sich mal richtig

01:53:07.000 --> 01:53:09.000
schön beschimpfen lassen will und dabei HTML

01:53:09.000 --> 01:53:11.000
lernen will, dem sei Just Fucking Use

01:53:11.000 --> 01:53:13.000
HTML ans Herz gelegt,

01:53:13.000 --> 01:53:15.000
äh .com ans Herz gelegt.

01:53:15.000 --> 01:53:17.000
Ich hatte eine riesen Freude

01:53:17.000 --> 01:53:19.000
mit der Seite.

01:53:19.000 --> 01:53:21.000
Könnte auch von mir sein

01:53:21.000 --> 01:53:23.000
an meinen schlechteren Tagen.

01:53:23.000 --> 01:53:25.000
Ob sich das schon mal jemand

01:53:25.000 --> 01:53:27.000
hat tätowieren lassen? Also vielleicht jetzt nicht

01:53:27.000 --> 01:53:29.000
unbedingt auf die Stirn, aber

01:53:29.000 --> 01:53:31.000
generell eigentlich

01:53:31.000 --> 01:53:33.000
eine coole Idee, sich was spiegelverkehrt

01:53:33.000 --> 01:53:35.000
irgendwo hin tätowieren

01:53:35.000 --> 01:53:37.000
zu lassen, wo man es dann im Spiegel sieht.

01:53:37.000 --> 01:53:39.000
Irgendwie so

01:53:39.000 --> 01:53:41.000
so ein Mantra oder ein

01:53:41.000 --> 01:53:43.000
Spruch?

01:53:43.000 --> 01:53:45.000
Ja, ich weiß nicht.

01:53:45.000 --> 01:53:47.000
Vielleicht,

01:53:47.000 --> 01:53:49.000
aber ich bin

01:53:49.000 --> 01:53:51.000
da nicht ernst genug dafür.

01:53:51.000 --> 01:53:53.000
Ich würde mir wahrscheinlich irgendeinen Quatsch,

01:53:53.000 --> 01:53:55.000
wenn ich mir dann was tätowiere, das wäre dann irgendwie

01:53:55.000 --> 01:53:57.000
vielleicht so ein Spruch mit

01:53:57.000 --> 01:53:59.000
Rechtschreibfehler oder so ganz

01:53:59.000 --> 01:54:01.000
absichtlich.

01:54:01.000 --> 01:54:03.000
No Regards.

01:54:03.000 --> 01:54:05.000
No Regards.

01:54:05.000 --> 01:54:07.000
Oder tatsächlich absichtlich

01:54:07.000 --> 01:54:09.000
Hühnchensüßsauer

01:54:09.000 --> 01:54:11.000
in chinesischem Schriftzeichen.

01:54:11.000 --> 01:54:13.000
Das wäre schon wieder sehr lustig.

01:54:13.000 --> 01:54:15.000
Ja,

01:54:15.000 --> 01:54:17.000
ich glaube, dieser eine

01:54:17.000 --> 01:54:19.000
Sprachyoutuber, wie heißt der?

01:54:19.000 --> 01:54:21.000
Ich habe vergessen.

01:54:21.000 --> 01:54:23.000
Der

01:54:23.000 --> 01:54:25.000
immer irgendwelche Sprachen lernt und dann

01:54:25.000 --> 01:54:27.000
zu den Leuten geht und sie dann spricht, überraschenderweise.

01:54:27.000 --> 01:54:29.000
Der hat glaube ich tatsächlich

01:54:29.000 --> 01:54:31.000
so ein Tattoo, weil der spricht wohl sehr gut chinesisch.

01:54:31.000 --> 01:54:33.000
Und

01:54:33.000 --> 01:54:35.000
der hat glaube ich wirklich ein Tattoo, auf dem

01:54:35.000 --> 01:54:37.000
steht Hühnchen süß-sauer oder irgendwie

01:54:37.000 --> 01:54:39.000
sowas und läuft damit

01:54:39.000 --> 01:54:41.000
dann halt durch

01:54:41.000 --> 01:54:43.000
Chinatown und auch durch China und die Leute

01:54:43.000 --> 01:54:45.000
lachen so über ihn und der spricht die dann halt mit perfektem

01:54:45.000 --> 01:54:47.000
chinesisch an und sagt, ja, was ist da dran eigentlich so lustig?

01:54:47.000 --> 01:54:51.000
Ich mag halt Hühnchen süß-sauer.

01:54:51.000 --> 01:54:53.000
Ja, genau.

01:54:53.000 --> 01:54:55.000
Wie heißt der?

01:54:55.000 --> 01:54:57.000
Wie heißt der denn?

01:54:57.000 --> 01:54:59.000
Youtuber.

01:54:59.000 --> 01:55:03.000
Ich weiß wahrscheinlich auch nicht, wie man richtig

01:55:03.000 --> 01:55:05.000
ausspricht.

01:55:05.000 --> 01:55:07.000
Egal. Es gibt so einen Youtuber,

01:55:07.000 --> 01:55:09.000
der lauter Sprachen lernt und lauter Dialekte

01:55:09.000 --> 01:55:11.000
und das macht. Genau, aber

01:55:11.000 --> 01:55:13.000
just fucking use HTML. Schaut's euch an.

01:55:13.000 --> 01:55:15.000
Ich hatte große Freude dabei und wie gesagt,

01:55:15.000 --> 01:55:17.000
ihr könnt's euch auch vorlesen lassen

01:55:17.000 --> 01:55:19.000
auf dem Youtube-Kanal

01:55:19.000 --> 01:55:21.000
The Primetime.

01:55:21.000 --> 01:55:23.000
Genau. Und damit

01:55:23.000 --> 01:55:25.000
sind wir schon

01:55:25.000 --> 01:55:27.000
jetzt am

01:55:27.000 --> 01:55:29.000
bei

01:55:29.000 --> 01:55:31.000
vielleicht. Es klappt einfach nicht.

01:55:31.000 --> 01:55:33.000
Es klappt einfach nicht. Jetzt kommt

01:55:33.000 --> 01:55:37.000
das Ende.

01:55:37.000 --> 01:55:41.000
So funktioniert's.

01:55:41.000 --> 01:55:43.000
Okay.

01:55:43.000 --> 01:55:45.000
Ich weiß, du warst noch beschäftigt

01:55:45.000 --> 01:55:47.000
und ich war jetzt zu faul, den Knopf selbst

01:55:47.000 --> 01:55:49.000
zu drücken. Das ist schon okay.

01:55:49.000 --> 01:55:51.000
Deswegen habe ich sehr langsam geredet.

01:55:51.000 --> 01:55:53.000
Ja.

01:55:53.000 --> 01:55:55.000
Das war doch mal wieder eine schöne Folge,

01:55:55.000 --> 01:55:57.000
finde ich.

01:55:57.000 --> 01:55:59.000
Und ich habe wieder einiges gelernt und ich

01:55:59.000 --> 01:56:01.000
habe auch gelernt, ich muss mir SVG

01:56:01.000 --> 01:56:03.000
irgendwie nochmal anschauen und

01:56:03.000 --> 01:56:05.000
da gibt es doch noch einige Bereiche, die ich noch nicht

01:56:05.000 --> 01:56:07.000
kenne und ich hoffe, dass

01:56:07.000 --> 01:56:09.000
ganz viele Editoren die ganzen

01:56:09.000 --> 01:56:11.000
Sachen mit einbauen, sodass ich sie vielleicht gar nicht lernen

01:56:11.000 --> 01:56:13.000
muss und trotzdem empfehle

01:56:13.000 --> 01:56:15.000
ich euch, schaut euch die SVGs mal an

01:56:15.000 --> 01:56:17.000
und zoomt mal nah ran und habt einen

01:56:17.000 --> 01:56:19.000
schlechten Tag dadurch und optimiert und

01:56:19.000 --> 01:56:21.000
lernt.

01:56:21.000 --> 01:56:23.000
Genau. Und natürlich

01:56:23.000 --> 01:56:25.000
kleiner Werbeblog noch, bewertet

01:56:25.000 --> 01:56:27.000
uns bei Podcastportalen, das hilft uns.

01:56:27.000 --> 01:56:29.000
Ihr dürft uns auch gerne mal

01:56:29.000 --> 01:56:31.000
bespenden, guckt mal auf www.siv.de

01:56:31.000 --> 01:56:33.000
slash unterstützen,

01:56:33.000 --> 01:56:35.000
wie man uns helfen kann,

01:56:35.000 --> 01:56:37.000
dass wir hier weiter diesen Podcast

01:56:37.000 --> 01:56:39.000
machen können, vielleicht auch irgendwann nochmal den Stream.

01:56:39.000 --> 01:56:41.000
Mal schauen.

01:56:41.000 --> 01:56:43.000
Ja.

01:56:43.000 --> 01:56:45.000
Das war's von meiner Seite. Hast du noch was?

01:56:45.000 --> 01:56:47.000
Ne, ich hab auch kein großes Schlusswort.

01:56:47.000 --> 01:56:49.000
Aber es macht Spaß

01:56:49.000 --> 01:56:51.000
irgendwie so nicht ganz abgehängt zu werden

01:56:51.000 --> 01:56:53.000
und immer mal wieder hier mit

01:56:53.000 --> 01:56:55.000
Sachen in Berührung zu kommen und auch wieder neue Sachen

01:56:55.000 --> 01:56:57.000
zu lernen, weil

01:56:57.000 --> 01:56:59.000
mein Ziel ist ja gar nicht, dem Ganzen so komplett

01:56:59.000 --> 01:57:01.000
in den Rücken zu kehren. Also mir macht's nach wie vor Spaß.

01:57:01.000 --> 01:57:05.000
Du kannst den Rücken ja einfach abstauben.

01:57:05.000 --> 01:57:09.000
Statt ihn zu kehren. Achso.

01:57:09.000 --> 01:57:11.000
Schon wieder Kehrwoche.

01:57:11.000 --> 01:57:13.000
Ja, ihr merkt schon, jetzt reicht's.

01:57:13.000 --> 01:57:15.000
Jetzt wird's blöd.

01:57:15.000 --> 01:57:17.000
Und bevor es ganz blöd wird,

01:57:17.000 --> 01:57:19.000
drück ich schon mal aufs Outro-Knöpfchen

01:57:19.000 --> 01:57:21.000
und sag vielen Dank fürs Zuhören

01:57:21.000 --> 01:57:23.000
und wir streamen,

01:57:23.000 --> 01:57:25.000
äh streamen, sag ich,

01:57:25.000 --> 01:57:27.000
wir podcasten wieder in 2-3 Wochen.

01:57:27.000 --> 01:57:29.000
Genau. Bis dann.

01:57:29.000 --> 01:57:31.000
Ciao.