tag:forum.selfhtml.org,2005:/self alle Foren 2024-03-01T13:19:55Z https://forum.selfhtml.org/self/2024/mar/01/baustellen-im-wiki-helfende-hande-gesucht Matthias Scharwies mscharwies@selfhtml.org https://wiki.selfhtml.org/wiki/SELFHTML 2024-03-01T12:52:07Z 2024-03-01T13:19:55Z Baustellen im Wiki - helfende Hände gesucht <p>Die bestehenden Seiten im Wiki müssen immer wieder angepasst werden. Oft sind es nur Kleinigkeiten wie das Einfügen eines Links, manchmal die Verbesserung eines Beispiels. Leider hat der Tag aber auch nur 24 Stunden und wir können nicht immer so viel schaffen, wie wir wollen.</p> <p>Deshalb nun unser Aufruf:</p> <p><strong>HELP WANTED</strong></p> <p>Auf unserer <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer"><strong>Baustellenseite</strong></a> finden sich alle Seiten mit <strong>ToDo</strong>s. Trotzdem wollen wir einzelne Baustellen, die immer wieder auffallen, Euch hier besonders ans Herz legen:</p> <ol> <li> <p> <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Verschachtelte_Raster" rel="nofollow noopener noreferrer"><strong>CSS/Tutorials/Grid/Verschachtelte_Raster</strong></a><br> subgrid wird von allen Browsern unterstützt; jetzt fehlt ein gutes Beispiel!</p> </li> <li> <p> <a href="https://wiki.selfhtml.org/wiki/Datenvisualisierung/Baumdiagramm" rel="nofollow noopener noreferrer"><strong>Datenvisualisierung/Baumdiagramm</strong></a><br> Ursprünglich dachte ich an eine Umsetzung mit SVG, mittlerweile glaube ich, dass eine verschachtelte Liste mit @container besser geeignet wäre.<br> Im Netz schlug jemand ein x-card-Element vor.</p> </li> <li> <p> <a href="https://wiki.selfhtml.org/wiki/File_Upload" rel="nofollow noopener noreferrer"><strong>File Upload</strong></a><br> war bereits ein ToDo im Januar 2023 - wer erbarmt sich?<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> </li> </ol> <ol start="4"> <li> <p> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Multimedia/Playlists" rel="nofollow noopener noreferrer"><strong>HTML/Tutorials/Multimedia/Playlists</strong></a><br> Audio, Video und JS - klingt doch interessant, oder?</p> </li> <li> <p> <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS#Siehe_auch" rel="nofollow noopener noreferrer"><strong>JavaScript und CSS</strong></a></p> <ul> <li>alles rund um das Thema „CSS durch JS ändern“. Vieles ist mittlerweile durch den Einsatz von custom properties überholt - der Rest müsste sortiert und aktualisiert werden.</li> <li>Das wird jetzt unter <a href="https://forum.selfhtml.org/self/2024/mar/05/javascript-und-css/1813859#m1813859" rel="noopener noreferrer">JavaScript und CSS</a> diskutiert!.</li> </ul> </li> <li> <p> <a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Symfony_Mailer" rel="nofollow noopener noreferrer"><strong>PHP/Tutorials/Symfony Mailer</strong></a> - ja, das ist zu schwierig für jemanden, der nur „mal“ ein paar Mails senden will. Wir wollen aber best practices und aktuelle Frameworks vorstellen. Wenn es einem Anfänger zu schwierig ist, auch gut!</p> </li> </ol> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>SELF-Forum: <a href="https://forum.selfhtml.org/self/2023/jan/15/todo-im-januar-file-upload/1805531#m1805531" rel="noopener noreferrer"> ToDo im Januar: File Upload </a> vom 15.01.2023 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2023/nov/16/frage-zu-kreisdiagrammen-im-wiki-artikel-balken-und-kreisdiagramme Robert B. 2023-11-16T11:20:34Z 2023-11-16T11:20:34Z Frage zu Kreisdiagrammen im Wiki-Artikel „Balken-_und_Kreisdiagramme“ <p>Hallo Forum,</p> <p>in o.g. genannten Abschnitt des Artikels ist ein Beispiel für ein Kreisdiagramm gegeben, das mir nicht einleuchtet:</p> <pre><code class="block language-svg"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chart<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>420<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chartinfo<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>desc</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chartinfo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Ein Diagramm unserer Ernte<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>desc</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>defs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>defs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pie<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-100 -100 200 200<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-0.25turn<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>background<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slice<span class="token punctuation">"</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M 1 0 A 1 1 0 0 1 0.8 0.59 L 0 0 Z<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>9.5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4 apples<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> </code></pre> <p>Da ist erst einmal ein <code>svg</code> in einem <code>svg</code> – was soll das denn?</p> <p>Weiterhin:</p> <ol> <li>Wenn ich das richtig sehe, muss ich die Koordinaten für den Kreisbogen/die weiteren Tortenstücke aus den Anteilen (prozentual zur Basis 360° bzw. 2π) berechnen.</li> <li>Die Vorschau des Kreisdiagramm-Beispiels „existiert nicht“.</li> </ol> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2024/mar/09/sinnhaftigkeit-von-meta-angaben-im-head-bezuglich-suchmaschinenoptimierung HTML_go https://kontakt-vs.de 2024-03-09T09:47:41Z 2024-03-09T09:47:41Z Sinnhaftigkeit von META-Angaben im HEAD bezüglich Suchmaschinenoptimierung <p>Guten Tag miteinander,</p> <p>meiner Homepage <a href="https://kontakt-vs.de" rel="nofollow noopener noreferrer">https://kontakt-vs.de</a> geht es dank Eurer Hilfe schon viel besser. Vor allem auch an Matthias, der mir half, die Grafik ganz neu (als SVG) zu erstellen. Vielen Dank!</p> <p>Es gibt aber noch zu tun. Ich denke, ich starte für verschiedene Fragen verschiedene Threads, das macht das Ganze für alle übersichtlicher. </p> <p>Meine Frage für <em>diesen</em> Thread also:</p> <p>Im nachstehenden Code des HEAD-Elements der Seite "Vorstellung" (Über uns) finden sich sehr viele META-Tags mit Informationen. Die hatte ich in der Struktur von meiner anderen Homepage <a href="https://www.xn--audiobibelne-olb.de" rel="nofollow noopener noreferrer">https://www.xn--audiobibelne-olb.de</a> größtenteils (natürlich angepasst) übernommen. Diese Tags sind auf allen Seiten nahezu gleich – bis auf die Zeilen 05, 08, und 09, denn die passen sich der jeweiligen Seite teilweise an.</p> <p><a href="https://wiki.selfhtml.org/wiki/Suchmaschinenoptimierung#Metadaten_f.C3.BCr_Suchmaschinen" rel="nofollow noopener noreferrer">Hier, im Wiki,</a> lese ich aber, dass viele META-Daten nicht mehr gebräuchlich / veraltet sind. Zu einem großen Teil werden sie von Suchmaschinen ignoriert (verbessern also das Ranking in keinster Weise, können sogar schädlich sein).</p> <p>Es könnte natürlich auch sein, dass ich einige Tags entferne, aber ein oder zwei hinzufügen sollte?</p> <p>Nun frage ich mich, inwiefern ich bei den META-Angaben ausmisten sollte? Vor allem die Icons (das ist vermutlich ein eigenes Thema, nämlich "Favicon") haben derzeit scheinbar keinen Einfluß; die Icons "funktionieren" (noch) nicht.</p> <p>Ich behaupte mal, die Zeilen 10 bis 12 ("author", "robots" und "revisit-after" könnte ich auf jeder der Seiten löschen?</p> <pre><code class="block language-<html>~~~">03 <head> 04 <meta charset="utf-8"> 05 <title>Über uns | Sozialwerk KONTAKT e.V. Villingen-Schwenningen</title> 06 <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes"> 07 <link href="./standard.css" rel="stylesheet"> 08 <meta name="description" content="Über uns | Sozialwerk KONTAKT e.V. Villingen-Schwenningen | Wer oder was ist KONTAKT e.V.?"> 09 <meta name="keywords" content="Über uns, KONTAKT Villingen-Schwenningen e.V., soziale Arbeit, Sozialwerk für Prävention und Integration, Kids Live, Lights On, Arbeit mit Jugendlichen, Arbeit mit Kindern, Integration, Migration, Suchtprävention"> 10 <meta name="author" content="Holger Hönle | selfthml.org"> 11 <meta name="robots" content="index, follow"> 12 <meta name="revisit-after" content="1 day"> 13 <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> 14 <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> 15 <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> 16 <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> 17 <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> 18 <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> 19 <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> 20 <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> 21 <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> 22 <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> 23 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 24 <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> 25 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 26 <link rel="manifest" href="/manifest.json"> 27 <meta name="msapplication-TileColor" content="#ffffff"> 28 <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> 29 <meta name="theme-color" content="#ffffff"> 30 </head> </code></pre> <p>Dass ich einen neuen Favicon erstellen muss (vorzugsweise als SVG) ist mir bekannt, möchte ich hier im Thread aber nicht ausbreiten; das gibt einen eigenen Thread.</p> <p>Vielen Dank für Euer Feedback!</p> <p>Holger</p> https://forum.selfhtml.org/self/2024/mar/18/www-data-darf-nicht-lesen-und-schreiben-nahere-infos encoder 2024-03-18T12:59:31Z 2024-03-18T12:59:31Z www-data darf nicht lesen und schreiben - nähere Infos? <p>Hallo ihr</p> <p>Vor einiger Zeit habe ich gelesen dass der User "www-data" unter dem Webzugriffe laufen nicht auf alles zugreifen darf, auch wenn die Permissions es hergeben würden.<br> Ich finde leider nichts mehr darüber. Wer kann mir helfen?</p> <p>Ein paar Infos.<br> Auf einem Raspberry loggt ein cronjob regelmäßig mit einem php Script Daten von meiner PV Anlage. Das Script speichert zwischen den Aufrufen Daten auf einer ramdisk, damit nur Werte in meine Datenbank geschrieben werden die sich tatsächlich geändert haben.<br> Funktioniert soweit.</p> <p>Nur wenn ich das Script als Debugversion zwecks schönerer Ausgaben im Browser aufrufe, darf es nicht auf die ramdisk zugreifen.<br> Permissions der ramdisk sind maximal offen und wenn ich das Script in der Shell mit <code>sudo -u www-data</code> starte, funktioniert es auch. Es scheint demnach ein weiterer Sperrmechanismus zugange zu sein.<br> Nach was muss ich suchen um mehr über ihn zu finden?</p> https://forum.selfhtml.org/self/2024/mar/16/brauche-hilfe-bei-den-wiki-cards-hohe-des-inhalts-festlegen Rolf B 2024-03-16T18:51:46Z 2024-03-16T18:51:46Z Brauche Hilfe bei den Wiki-Cards: Höhe des Inhalts festlegen <p>Hallo alle,</p> <p>ich habe mal wieder ein Problem mit den Wiki-Cards. Auf der <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials#F.C3.BCr_Fortgeschrittene" rel="nofollow noopener noreferrer">SVG/Tutorials</a> Seite ist eine Card, die auf die CSS-Transforms verlinkt. Diese Card habe ich zweizeilig gemacht. Ich möchte nun die Transform-Raute vertikal in der Card zentrieren. Das ist natürlich ein nice-to-have und wenn's nicht geht, dann geht's nicht. Aber das will ich natürlich genau wissen.</p> <p>Falls jemand denkt: Wieso, ist doch zentriert? - derzeit habe ich mir mit einem Füll-Div beholfen</p> <p>Die Card ist natürlich nur eine von vielen, d.h. das, was ich mache, muss für alle Cards passen.</p> <p>Die Idee ist, dass alle Cards über die Card-Vorlage erzeugt werden. Die erzeugt diesen HTML-Rahmen für die Cards:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-titel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">...</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> TITELTEXT <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-inhalt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Das Logo ist rechts gefloatet, kann also aus dem Titel hinaus und in den Inhalt hinragen und in beiden Text verdrängen. Das möchte ich auch so haben. Das .card-Element ist ein inline-size Container, was mir den Zugriff auf die cqh-Einheit verwehrt. Die hätte ich in einem size-Container, aber dann bekomme ich keine dynamische Anpassung der Höhe an den Inhalt.</p> <p>Um die Transform-Raute vertikal zentrieren zu können, müsste .card-inhalt die volle Card-Höhe bekommen. Dann hätte ich diverse Möglichkeiten. Auf der Transform-Card wäre das mit height:100% möglich, aber nur, weil auf dieser Card das Titel-div nicht erzeugt wird. Wenn ich das auf anderen Cards mache, würde mir das Inhalt-div damit aus der Card hinaushängen. Ich kann daher nicht im Stylesheet grundsätzlich 100% Höhe auf den .card-inhalt geben. Ich muss es so machen, dass .card-inhalt so hoch ist, dass es in der Card den Platz unter dem Titel füllt. Es muss aber auch mindestens so hoch sein wie sein Inhalt, und die Card muss automatisch mindestens so hoch sein, dass Titel und Inhalt hineinpassen.</p> <p>Wenn für den Card-Inhalt Flexbox oder Grid hinzunehme, bekomme ich einen Blockformatierungskontext auf den Titel. Das ist auch wieder Mist, weil dann das Logo im Titel eingesperrt bleibt.</p> <p>Kann ich unter diesen Rahmenbedingungen nur mit CSS den .card-inhalt überhaupt die Card auffüllen lassen?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/weblog/2024/mar/18/wir-erzwingen-ihre-einstimmung Felix Riesterer 2024-03-18T09:15:06Z 2024-03-18T09:15:06Z Wir erzwingen Ihre Einstimmung! <p>In der Netzgemeinde hat sich der Begriff des <strong>Cookie-Terror-Banners</strong> längst etabliert. Hintergrund ist eine EU-Vorgabe, dass Seitenbetreiber nur dann Cookies auf dem Gerät ihrer Besucher speichern dürfen, wenn diese dem zustimmen.</p> <p>Das hat dazu geführt, dass man seit Jahren auf sehr vielen Webseiten Einblendungen vorfindet, die sich über den eigentlichen Seiteninhalt ausbreiten und sehr aufdringlich nach der Zustimmung verlangen, dass die Seite Cookies speichern darf. Solche Einblendungen sind im Alltag störend und nicht selten absichtlich unbequem in der Bedienung, wenn man nicht blind einfach alles abnicken möchte.</p> <p><a href="/images/ecc3642e-e505-11ee-a4dd-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/ecc3642e-e505-11ee-a4dd-9c6b00263d9f.png?size=medium" alt="Ansicht der Seite heise.de mit offenem Cookie-Banner" title="Heise-Startseite mit Cookie-Banner" loading="lazy"></a></p> <p>Entweder man schont seine Nerven und willigt brav in alles ein, was <a href="https://blog.fefe.de/?ts=9ebe1abc" rel="nofollow noopener noreferrer">dem Ausspähen von Daten Tür und Tor öffnen</a> kann, oder man installiert sich ein passendes Browser-Plugin, das einem die Werbung und datenschnüffelnde Cookies vom Hals hält wie z.B. <a href="https://ublockorigin.com/" rel="nofollow noopener noreferrer">uBlock origin</a>. Wir wären aber nicht SELFHTML, wenn wir nicht auch eine Idee hätten, wie man sich nervige Einblendungen vom Hals halten könnte.</p> <p>Solche Cookie-Banner werden per JavaScript über den eigentlichen Seiteninhalt gelegt, indem sie das Dokument im Browser um gewisse Elemente erweitern. Könnte man jetzt sein eigenes JavaScript-Programm ausführen, wäre es denkbar, diese Elemente wieder aus dem Dokument zu entfernen. Aber wie soll man ein JavaScript in eine fremde Seite einbinden, wenn man keinen Schreibzugriff auf dem jeweiligen Webserver hat?</p> <h3>Userscripte im Browser via Plugin</h3><p>Mit entsprechenden Browser-Plugins wie z.B. <a href="https://www.tampermonkey.net/" rel="nofollow noopener noreferrer">Tampermonkey</a> kann man eigene JavaScript-Dateien im Kontext einer fremden Website ausführen lassen. Damit kann man sich ein Script schreiben, das so manches Cookie-Banner erkennt und entfernt.</p> <p>JavaScript im Browser bietet mit dem <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow noopener noreferrer">MutationObserver</a> ein geeignetes Werkzeug an, um zu erkennen, wenn Teile des Dokuments im Browser verändert wurden, weil z.B. ein Element per JavaScript hinzugefügt wurde. Damit ist es dann ein Leichtes, auf bestimmte Elemente, Klassennamen oder Attributwerte zu prüfen, um die einschlägigen Banner zu finden. Das folgende Script bietet zwar nicht den Komfort und die Sicherheit, die ein Browser-Plugin wie uBlock origin bietet, aber als Spielerei gegen Cookie-Terror-Banner ist es allemal ein netter Zeitvertreib, vor allem dann, wenn man die jeweiligen Erkennungsmerkmale im Seiteninspektor herausfindet, um sie dann im Script zu ergänzen.</p> <p>Das folgende Code-Listing kann als lokale Script-Datei in Tampermonkey hinterlegt werden. Die einzeiligen Kommentare am Anfang steuern auf welchen Seiten im Internet es eingebunden werden soll (aktuell auf allen, siehe die @match-Regeln). Hinweise zu seiner Funktionalität stehen nach dem Code-Listing.</p> <pre><code class="block language-javascript"><span class="token comment">// ==UserScript==</span> <span class="token comment">// @name Anti Terror Banner Script</span> <span class="token comment">// @namespace http://tampermonkey.net/</span> <span class="token comment">// @version 0.1</span> <span class="token comment">// @description try to take over the world!</span> <span class="token comment">// @author Anti Terrorist Banner Coder</span> <span class="token comment">// @match https://*/*</span> <span class="token comment">// @match http://*/*</span> <span class="token comment">// @icon none</span> <span class="token comment">// @grant none</span> <span class="token comment">// @run-at document-end</span> <span class="token comment">// ==/UserScript==</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'use strict'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> terrorBanners <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token comment">// sp_message_container</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">'[id^="sp_message_container"]'</span><span class="token punctuation">,</span> <span class="token literal-property property">classes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"html"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"sp-message-open"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// onetrust</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"#onetrust-consent-sdk"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// ion-modal</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"ion-modal"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// cc_banner</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">".cc-banner"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// usercentrics</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"#usercentrics-root"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// didomi</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"#didomi"</span><span class="token punctuation">,</span> <span class="token literal-property property">classes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"body"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"didomi-popup-open"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// cmpbox</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"#cmpbox, #cmpbox2"</span><span class="token punctuation">,</span> <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"body"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"style"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// cmp-modal</span> <span class="token punctuation">{</span> <span class="token literal-property property">classes</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"*"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"modal-backdrop"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token string">"*"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"modal-cmp"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// needsclick</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"div.needsclick"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// snigel</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"div.snigel-cmp-framework"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// gdpr-consent-tool</span> <span class="token punctuation">{</span> <span class="token literal-property property">elements</span><span class="token operator">:</span> <span class="token string">"div#gdpr-consent-tool-wrapper"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span><span class="token parameter">mutations</span> <span class="token operator">=></span> <span class="token punctuation">{</span> terrorBanners<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">banner</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>banner<span class="token punctuation">.</span>elements<span class="token punctuation">)</span> <span class="token punctuation">{</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>banner<span class="token punctuation">.</span>elements<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> <span class="token parameter">element</span> <span class="token operator">=></span> element<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>banner<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> attributes <span class="token operator">=</span> <span class="token punctuation">(</span> banner<span class="token punctuation">.</span>attributes <span class="token keyword">instanceof</span> <span class="token class-name">Array</span> <span class="token operator">?</span> banner<span class="token punctuation">.</span>attributes <span class="token operator">:</span> <span class="token punctuation">[</span>banner<span class="token punctuation">.</span>attributes<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> attributes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>element <span class="token operator">&&</span> data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> <span class="token parameter">element</span> <span class="token operator">=></span> element<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>banner<span class="token punctuation">.</span>classes<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> classes <span class="token operator">=</span> <span class="token punctuation">(</span> banner<span class="token punctuation">.</span>classes <span class="token keyword">instanceof</span> <span class="token class-name">Array</span> <span class="token operator">?</span> banner<span class="token punctuation">.</span>classes <span class="token operator">:</span> <span class="token punctuation">[</span>banner<span class="token punctuation">.</span>classes<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> classes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>element <span class="token operator">&&</span> data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span> <span class="token parameter">element</span> <span class="token operator">=></span> element<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">subtree</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">childList</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">characterData</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">attributeOldValue</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">characterDataOldValue</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Im großen Array <code>terrorBanners</code> stehen einzelne Objekte, in denen die jeweiligen Erkennungsmerkmale hinterlegt sind. Ein solches Objekt kann diese Eigenschaften haben:</p> <ul> <li>elements - Selektor für Elemente, die zu entfernen sind</li> <li>attributes - Objekt (oder ein Array solcher Objekte), welches Namen von Attributen definiert, die von Objekten entfernt werden müssen: <ul> <li>element - Selektor für Elemente, die dieses Attribut haben können</li> <li>name - Name des Attributs</li> </ul> </li> <li>classes - Objekt (oder ein Array solcher Objekte), welches Namen von Klassen definiert, die von Objekten entfernt werden müssen: <ul> <li>element - Selektor für Elemente, die diese Klasse haben können</li> <li>name - Name der Klasse</li> </ul> </li> </ul> <h3>Fazit</h3><p>Ein solches Script kann die Bedienung von Seiten erleichtern, weil es die Einblendungen wieder entfernt, welche die Benutzung der Seite ansonsten blockieren. Es gibt aber Banner-Mechanismen, die den eigentlichen Seiteninhalt durch ein unscharfes Hintergrundbild ersetzen. Auf solchen Seiten sieht man dann natürlich keine brauchbaren Inhalte, wenn man das Cookie-Banner entfernt. Und es ist keinesfalls garantiert, dass eine Seite nicht schon vor der Einwilligung durch den Benutzer mindestens ein Cookie setzt, auch wenn das klar gegen die EU-Verordnung verstößt. Aber für den Hobby-Bastler kann es Vergnügen bereiten, sich auf diese Weise gegen allzu penetrante Gängelungen zu wehren.</p> https://forum.selfhtml.org/self/2024/mar/18/frage-zum-wiki-artikel-seiteninterne-verweise nix 2024-03-18T17:41:47Z 2024-03-18T17:41:47Z Frage zum Wiki-Artikel „Seiteninterne_Verweise“ <p>Hasch’ mich … ’tschuldigung, # mich, ich bin …?</p> <p>Jedenfalls vermisse ich in den gezeigten Beispielen zu internen Sprungzielen irgendwie das eine oder andere „#“. Und nich tnur das: neugierig gemacht, habe ich mir die Vorschauen mit dem Inspektor angesehen — und festgestellt, daß die nur recht eingeschränkt mit den gezeigten Quelltexten zu tun haben.</p> <p>Das liegt am Wiki? Kann sein. Oder muß sogar,auch wegen einer gewissen div-Suppe?</p> <p>Aber dann sollte man, denke ich, lieber auf eine Vorschau verzichten.</p> <hr> <p>BTW: draufgekommen bin ich, weil mein „Katalog“ gerade so umfangreich wurde, daß selbst auf einem großen Bildschirm das Grid in der Mitte so überfrachtet ist, daß ich im Titel-Bereich eine „ABC“-Navigation unterbringen <s><del>wollte.</del></s><ins>muß!</ins> Klappt aber irgendwie nicht.</p> <p>Fehler habe ich bislang keine gefunden. Nicht hier („neben“ den Vorschauen). Und auch die Inspektoren der Browser halten still, BBEdits’ Code-Folding ist auch einverstanden. Strukturell sollte als wenigstens kein göberer Fehler vorliegen. Aber: weder Safari noch FireFox lassen den Grid-Bereich scrollen. Das geht nur mit Maus (Scrollbalken und/oder Mausrad). Auch Tastatursteuerung via <code>tabindex</code> schlägt nicht an, selbst dann, wenn nur ein solcher Index (am Ende des Alphabets) überhaupt drin vor kommt …</p> <p>— Die nächste Baustelle „Marke nix“?</p> <p>Gut, ich werde basteln. Vielleicht diesmal sogar etwas Handliches. Aber erst mal drüber schlafen und nochmal genau überdenken …</p> https://forum.selfhtml.org/self/2024/mar/17/javascript-filereader Ich 2024-03-17T12:17:04Z 2024-03-17T12:17:04Z Javascript FileReader <p>Vielleicht kann hier jemand helfen? Ich habe ein Script mit dem der User ein Bild von seinem Gerät auswählen kann. Mit FileReader. Dann wird das auswähle Bild auf der Website angezeigt. Jetzt habe ich da noch ein Lösch-Button. Damit wird das Bild gelöscht und der User kann wieder ein Bild auswählen. Leider funktionieren nur andere Bilder. Wenn das gleiche Bild gewählt wird ist die BildAnzeige leer. Wenn ich ein anders Bild ausgewählt habe und dann wieder das erste funktioniert es. Warum ist das so und wie kann ich den Fehler verhindern? Danke</p> https://forum.selfhtml.org/self/2024/mar/14/anzahl-max-fibers-bei-vorgegebener-hardware Simone 2024-03-14T22:28:06Z 2024-03-14T22:28:06Z Anzahl Max-Fibers bei vorgegebener Hardware <p>Hallo,</p> <p>hat jemand Erfahrung ab welcher Anzahl PHP-Fibers der Server aussteigt, oder ob es überhaupt eine Obergrenze gibt, die man austesten muss?</p> <p>Ich verarbeite mit PHP per Konsole über 1 Million Jsons-Files und bereite diese für Mysql auf.</p> <p>Hierbei versuche ich per Script möglichst das Maximum aus Serverhardware und Entwicklungsumgebung herauszuholen, finde jedoch keine Informationen, wie hoch der Aufrufstapel (Call-Stack) sein darf.</p> <p>Vielen Dank ;o)</p> <p><a href="/images/1dc240e8-e251-11ee-94b9-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/1dc240e8-e251-11ee-94b9-9c6b00263d9f.jpg?size=medium" alt="" loading="lazy"></a> <a href="/images/eb083b04-e24f-11ee-b097-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/eb083b04-e24f-11ee-b097-9c6b00263d9f.jpg?size=medium" alt="" loading="lazy"></a></p> https://forum.selfhtml.org/self/2024/mar/12/bildauswahl-reset envoy 2024-03-12T20:21:21Z 2024-03-12T20:21:21Z Bildauswahl Reset <p>Hallo, ich habe 2 separate Bildauswahl-Elemente. Ich möchte beide, wenn ich auf den Button Reset drücke, jeweils auf das 1. Bild zurücksetzten. Einzeln kann ich ansprechen, weiß aber nicht, wie ich beide gleichzeitig zurücksetzten kann?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tablinks<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token string">'01.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_(**all???**)'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>Viele Grüße</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tablinks<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">openCity</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> <span class="token string">'left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tablinks<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">openCity</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> <span class="token string">'right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabcontent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bannerImage_left<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>01.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>01_thumb.jpg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token string">'01.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>02_thumb.jpg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token string">'02.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>03_thumb.jpg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token string">'03.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabcontent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bannerImage_right<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>01.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">""</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>01_thumb.jpg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token string">'01.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>02_thumb.jpg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token string">'02.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>03_thumb.jpg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token string">'03.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>40px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tablinks<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token string">'01.jpg'</span><span class="token punctuation">,</span> <span class="token string">'#bannerImage_(**all???**)'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2024/mar/17/wann-json-und-wann-ein-objekt-nutzen ebody 2024-03-17T10:02:36Z 2024-03-17T10:02:36Z Wann JSON und wann ein Objekt nutzen? <p>Hallo,</p> <p>ich möchte eine Klasse erstellen, die eine Methode enthält, um Daten von einer API zu laden. Die Klasse soll zudem Methoden zum Abfragen und Filtern dieser Daten haben.</p> <p><strong>Ich frage mich jetzt</strong></p> <ol> <li>Was würde ein anderer Programmierer erwarten, in welcher Form (JSON oder Objekt) er diese Daten erhält, wenn er sie abfragt?</li> <li>Zudem, ob ich selbst im Script besser mit einem JSON oder Objekt arbeite?</li> </ol> <p><strong>Dazu muss ich vorab auch fragen, ist das wirklich JSON?:</strong></p> <pre><code class="block">let movies = [ { "Title": "The Dark Knight", "Year": 2008 }, { "Title": "Batman Begins", "Year": 2005 }, { "Title": "The Dark Knight Rises", "Year": 2012 } ]; </code></pre> <p>Oder wäre das JSON?</p> <pre><code class="block">let movies = '[ { "Title": "The Dark Knight", "Year": 2008 }, { "Title": "Batman Begins", "Year": 2005 }, { "Title": "The Dark Knight Rises", "Year": 2012 } ]'; </code></pre> <p>Ich gehe davon aus, dass Ersteres auch ein JSON ist und habe mir von ChatGTP ein Script zum Testen erstellen lassen. Die Funktionen würden sowohl mit einem Objekt und dem JSON funktionieren.</p> <p>Bzgl. Frage 2 wäre es also egal?</p> <p><strong>Wenn ich die Klasse erstelle und gefragt werde "Warum gibst du die Daten als Objekt und nicht als JSON wieder?" oder "Warum verendest du in der Klasse ein Objekt und nicht JSON" würde ich selbst gerne den Nutzen/Vorteil sehen, verstehen und damit auch erklären können.</strong></p> <p>Bisher sehe ich aber keinen Unterschied.</p> <pre><code class="block">// JavaScript-Objekt // let movies = [ // { Title: "The Dark Knight", Year: 2008 }, // { Title: "Batman Begins", Year: 2005 }, // { Title: "The Dark Knight Rises", Year: 2012 } // ]; // JSON let movies = [ { "Title": "The Dark Knight", "Year": 2008 }, { "Title": "Batman Begins", "Year": 2005 }, { "Title": "The Dark Knight Rises", "Year": 2012 } ]; // console.log(typeof movies); // myJSON = '{"name":"John", "age":30, "car":null}'; // console.log(typeof myJSON); // Funktion zum Finden des Elements mit dem Titel "Batman Begins" function findMovieByTitle(title) { return movies.find(movie => movie.Title === title); } // Funktion zum Hinzufügen eines neuen Films function addMovie(newMovie) { movies.push(newMovie); } // Funktion zum Löschen eines Films anhand des Titels function deleteMovieByTitle(title) { movies = movies.filter(movie => movie.Title !== title); } // Beispiel für das Löschen eines Films deleteMovieByTitle("Batman Begins"); // Aufruf der Funktion und Ausgabe des Ergebnisses const batmanBegins = findMovieByTitle("Batman Begins"); if (batmanBegins) { console.log("Gefundener Film:", batmanBegins); } else { console.log("Film nicht gefunden."); } // Aktualisierte Filme ausgeben console.log("Aktualisierte Filme:", movies); </code></pre> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2024/mar/13/formular-accept-charset-utf-8 phatman 2024-03-13T19:17:03Z 2024-03-13T19:17:03Z formular accept-charset="utf-8" <p>Guten Abend,</p> <p>habe jetzt Stunden das Internet durchsucht, aber leider nichts gefunden:(</p> <p>Es geht um mein Formular. Mit accept-charset="utf-8" gibt er zwar das <strong>ö</strong> <strong>ä</strong> und <strong>ü</strong> richtig aus!</p> <p>aber die großgeschriebenen Umlaute wie Ö Ä Ü und das scharfe ß nicht, kommt nur ein �!?</p> <p>Hat vielleicht irgendjemand einen Tipp?</p> <p>Danke Gruß phatman</p> https://forum.selfhtml.org/self/2024/mar/15/funktion-mit-fetch-soll-kein-promise-sondern-daten-liefern ebody 2024-03-15T13:56:35Z 2024-03-15T13:56:35Z Funktion mit fetch() soll kein Promise, sondern Daten liefern <p>Hi,</p> <p>kann man es vermeiden <code>then</code> und <code>catch</code> bei dem Aufruf der Funktion verwenden zu müssen? Die Funktion selbst wartet ja schon auf das Ergebnis. Wenn man in der Funktion und im Funktionsaufruf <code>then</code> und <code>catch</code> verwenden muss, erscheint es mir unnötig doppelt verwendet zu werden und falsch.</p> <pre><code class="block">/* Variante 1 */ async function load_1(apiURL){ try{ // Ausführen der HTTP-Anfrage, um JSON-Daten abzurufen const response = await fetch(apiURL); // JSON-Response speichern const json = await response.json(); // Daten zurückgeben return await json.data; } catch(err){ // Fehlerbehandlung throw err; } } const data1a = load_1('https://reqres.in/api/users/'); console.log('data1a',data1a); // => Promise </code></pre> <p>Wenn man <code>load_1()</code> aufruft, soll die Funktion direkt die Daten und kein Promise liefern. Wie kann man das machen?</p> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2024/mar/03/tabelle-mit-css Darelius 2024-03-03T11:36:20Z 2024-03-03T11:36:20Z Tabelle mit CSS <p>Hallo erst einmal. Ich habe zwar keine Probleme, mit html und Co eine Tabelle zu machen, aber für meine Homepage habe ich immer frames benutzt. Da das "verpöhnt" ist, versuche ich das jetzt mit CSS hinzukriegen, scheitere aber sang und klanglos.</p> <p>Hier mein Problem:</p> <p>Ich habe 2 Blöcke: oben linkes ein Logo (120 px x 100 px) oben rechts eine Navigationsleiste (* x 100 px) unten links eine zweite Navigationsleiste (120 px x *) unten rechts der "Inhalt" mit dem Bildschirlrest.</p> <p>So weit kein Problem, da brauche ich nciht einmal CSS.</p> <p>ABER:</p> <p>Ich möchte, daß außer dem Inhalt alle Blöcke immer "fest" verankert sind und wenn der Inhalt zum "scrollen" ist, daß der nicht unter oder über deas andere rollt, sondern nur "seinen" Bereich wirklich hat.</p> <p>Auch benutze ich mehrere Tabellen und weiß nicht, wie ich untscheiedliche Tabellen unterschiedlich mit CSS ansteuern kann, da ich immer nur etwas finde, um alle tabellen zu beeinflussen.</p> <p>Mit html+frames kriege ich das in 5 minuten hin, bei CSS dampft mein Gehirn und ich finde keine Lösung, die funktioniert.</p> <p>Und nein, ich bin KEIN Trol, cellspacing, colspan etc kenne ich alles nur mit CSS stehe ich irghendwie auf Kriegsfuß, wen nes um Tabellen oder "Positionen" geht.</p> <p>Zu guter letzt eine Frage dazu: Ist CSS immer noch komplett Browserabhängig oder zeigen die das mittlerweile gleich an? Oder muß ich dann verschiedenen CSS machen, weil es in verschiedenen Browsern laufen soll, wie es früher war? (habe lange nicht mehr webseiten gemacht, zuletzt vor etwa 20 jahren oder so...)</p> <p>Vielen Dank für eure Hilfe im Voraus.</p> <p>...Darelius</p> https://forum.selfhtml.org/self/2024/mar/13/frage-zum-wiki-artikel-einbindung-mit-img Robert 2024-03-13T17:24:41Z 2024-03-13T17:24:41Z Frage zum Wiki-Artikel „Einbindung_mit_img“ <p>Das alt-Attribut ist bei <img> eine Pflichtangabe?(??)</p> <p>Das soll jetzt wirklich nicht aggressiv oder trollig klingen, aber wenn jemand (aus welchem Grund auch immer, surft noch per 14.4-er Modem, zahlt 5€ pro Kilobyte weil er vom Mond aus surft?) das Laden von Bildern ausgeschaltet hat, oder mit Lynx unterwegs ist, dann hilft es ihm auch nicht viel, wenn da steht "Schaltplan der tollen Schaltung". Selbst wenn dann kommt "Foto von Alicante", so ein Quatsch ist auch für Sehbehinderte keine Hilfe. Was soll das? Warum sollte ich mir für jedes Bild ein blödsinniges alt-Tag ausdenken? Es ist ja noch nichtmal sichergestellt, das beim Klick darauf irgendetwas passiert (etwa ein größeres Bild angezeigt oder ein Download des Bildes gestartet wird).</p> <p>Wieviele Prozent der Internetnutzer profitieren vom alt-Tag und warum? Ich kann mir keinen Grund für ein alt-Tag vorstellen. Selbst wenn Suchmaschinen, die (immer) noch keine Bilder auslesen können dann wissen, da ist der "Schaltplan der tollen Schaltung", was sollten sie damit machen? Zudem wäre die Unterstützung von primitiven Suchmaschinen oder von Sehbehinderten ja wohl mein Privatvergnügen, oder?</p> <p>Kann mich (und die zwei oder drei die das auch nicht verstehen) vielleicht jemand erleuchten? Danke!</p> https://forum.selfhtml.org/weblog/2023/dec/31/silvester-knaller-exklusive-akkordeons-ohne-javascript Matthias Scharwies mscharwies@selfhtml.org 2023-12-31T09:38:09Z 2023-12-31T09:38:09Z Silvester-Knaller: Exklusive Akkordeons ohne JavaScript! <p>Im Oktober stellten wir die neuen <a href="https://blog.selfhtml.org/2023/oct/25/popover-ohne-programmieren" rel="noopener noreferrer">Popover-Boxen</a> vor, mit der die <a href="https://open-ui.org/" rel="nofollow noopener noreferrer">open-ui.org</a> Tooltipps und Popover vereinheitlichen wollten. Schon da wunderte ich mich über die schnelle Umsetzung der sinnvollen Vorschläge durch die Browserhersteller. Verständlich wird dies, wenn man sieht, dass viele Mitglieder der Initative Google-Mitarbeiter sind.</p> <h3>Exklusive Akkordeons</h3><p>Ein gängiges UI-Muster im Web ist eine Akkordeonkomponente (neudeutsch: Offenlegungs-Widget), die einzeln maximiert (oder minimiert) werden können, um ihren Inhalt ein- oder auszublenden. Dafür gibt es das native <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/details" rel="nofollow noopener noreferrer">details</a>-Element.</p> <p>Eine Variante des Akkordeon-Musters ist das <strong>exklusive Akkordeon</strong>, bei dem nur eines der Offenlegungs-Widgets gleichzeitig geöffnet werden kann.</p> <p>Bis jetzt musste das mit viel JavaScript und noch mehr ARIA-Attributen von Hand nachgebaut werden. <strong>Jetzt</strong> gibt es die Möglichkeit, mehrere details-Elemente mit demselben name-Wert zu einer semantischen Gruppe zusammenzufassen. Wenn du eines der details-Elemente aus der Gruppe öffnest, wird das zuvor geöffnete Element automatisch geschlossen.</p> <p>Im Oktober klang das noch wie Zukunftsmusik, im Dezember haben das die neuesten Versionen von Chrome, Edge und Safari schon implementiert:</p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-6.html" width="900" height="600" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon">Exklusives Akkordeon</a> </p> </iframe> <h3>Registerkarten</h3><p>Auch Registerkarten (<em>Tab Panels</em>) sind so möglich:</p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-7.html" width="900" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon">Exklusives Akkordeon</a> </p> </iframe> <p>Für den Firefox und ältere Browserversionen helfen einige Zeilen Javascript! Das ausführliche Tutorial kannst du im SELF-Wiki lesen:</p> <p><a href="https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details" rel="nofollow noopener noreferrer"><strong>Infobox/Akkordeon mit details</strong></a></p> <hr> <p>So endet 2023 mit einem wirklichen „Silvester-Knaller“ und wir können uns auf 2024 und viel Neues freuen!</p> https://forum.selfhtml.org/self/2024/mar/14/dropdown-menus-und-datenbank-aufruf-problem Darßfreund 2024-03-14T11:03:59Z 2024-03-14T11:03:59Z DropDown Menüs und Datenbank - Aufruf-Problem <p>Hallo,</p> <p>ich lasse Dropdown-Menüs für jeden Eintrag einer Datenbankabfrage per php erzeugen (Anfrage funktioniert). Bei der resultuierenden Webseite lässt sich jeder Menübutton anklicken - es öffnet sich jedoch immer das Dropdown-Menü des ersten Eintrages. Im resultierenden html-Code erscheinen die richtigen IDs in den Links des Menüs. Geöffnet wird aber immer nur das Dropdown-Menü des ersten Eintrages, auch wenn ich auf den Dropdown-Button den zweiten, dritten Eintrag klicke.</p> <p>Kann jemamd helfen? Ich finde den Fehler nicht ...</p> <p>Vielen Dank! Darßfreund</p> <p>Hier die Quelltext-Auszüge:</p> <p>php</p> <pre><code class="block language-php"><span class="token variable">$kla</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token variable">$klb</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token variable">$klc</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token variable">$kld</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$daten</span> <span class="token keyword">as</span> <span class="token variable">$inhalt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$klausw</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"klst"</span><span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$i1</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<div class=\"container\">"</span><span class="token punctuation">;</span> <span class="token variable">$i1</span><span class="token operator">++</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token property">klasse</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"<span class="token interpolation"><span class="token variable">$stuf</span></span>"</span><span class="token operator">.</span><span class="token string double-quoted-string">"a"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$kla</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<div class=\"box\"><h2><a href=\"austragungsportal.php?klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$stuf</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"a#1\">Klasse "</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$stuf</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"a</a></h2>"</span><span class="token punctuation">;</span> <span class="token variable">$kla</span><span class="token operator">++</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token property">ausgetragen</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"kran"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<p class=\"ausgetragen\">"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token property">ausgetragen</span> <span class="token operator">==</span> <span class="token string double-quoted-string">"ausg"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<p class=\"ausgetragen\">"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<p class=\"anwesend\">"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=anfragen&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\"> <button class=\"angefragt\">Ange</button></a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=finden&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\"><button class=\"gefunden\">Gefu</button></a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=austragen&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\"><button class=\"ausgetragen\">Aust</button></a>"</span><span class="token punctuation">;</span> <span class="token comment">// Dropdown-Button</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<span class=\"dropdown\">"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<button onclick=\"myFunction()\" class=\"bibogta\">Dropdown-Button</button>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<span id=\"myDropdown\" class=\"dropdown-content\">"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 1</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 2</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 3</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 4</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<a href=\"?aktion=gtaort&ID="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$inhalt</span><span class="token operator">-></span><span class="token constant">ID</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"&klausw="</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$klausw</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"#1"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"\">Eintrag 5</a>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"</span>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"</span>"</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"</p>"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>js</p> <pre><code class="block language-javascript"> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token comment">/* When the user clicks on the button, toggle between hiding and showing the dropdown content */</span> <span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"myDropdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">"show"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Close the dropdown if the user clicks outside of it</span> window<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">'.bibogta'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> dropdowns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">"dropdown-content"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> i<span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> dropdowns<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> openDropdown <span class="token operator">=</span> dropdowns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>openDropdown<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> openDropdown<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>css</p> <pre><code class="block language-css"><span class="token comment">/* Dropdown-Menue */</span> <span class="token selector">.dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #3498DB<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropbtn:hover, .dropbtn:focus</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #2980B9<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown a:hover</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.show</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.bibogta</span> <span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span> #ce5cee<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2024/feb/09/cards-im-wiki Rolf B 2024-02-09T16:43:31Z 2024-02-09T16:43:31Z Cards im Wiki <p>Hallo Wiki-Autoren,</p> <p>das Thema Cards, das wir neulich im Discord besprochen hatten, ist jetzt soweit umgesetzt und im Hauptwiki verfügbar.</p> <p>Auf der Vorlage:Card Seite ist die Dokumentation und ein paar Beispiele. Auf der "Wie fange ich an?" Seite sind die ersten 6 Cards umgestellt.</p> <p>Ich bitte die, die es interessiert, um einen Review. Haben wir damit das, was wir besprochen hatten?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/mar/13/wiki-grundgerust-und-metaangaben Matthias Scharwies mscharwies@selfhtml.org 2024-03-13T07:33:48Z 2024-03-13T07:33:48Z Wiki: Grundgerüst und Metaangaben <p>Guten Morgen,</p> <p>ich hatte <a href="https://forum.selfhtml.org/self/2024/mar/09/sinnhaftigkeit-von-meta-angaben-im-head-bezuglich-suchmaschinenoptimierung/1813984#m1813984" rel="noopener noreferrer">hier</a> ja schon mal angedacht, Rolfs Liste der Meta-Angaben in's Wiki zu ziehen.</p> <p>Erst hatte ich überlegt, ob es in der Referenz beim <a href="https://wiki.selfhtml.org/wiki/HTML/Attribute/name" rel="nofollow noopener noreferrer">name-Attribut</a> schon etwas zu den verschiedenen Werten gäbe.</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst" rel="nofollow noopener noreferrer"><strong>HTML/Tutorials/Grundgerüst</strong></a></p> <p>Dieses Tutorial ist ja Bestandteile des Theorie-Reihe, die die Grundlagen und Regeln von HTML vorstellt.</p> <p>Das Grundgerüst war nach der Syntax das zweite Kapitel und sollte ursprünglich eben die <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst#Kopiervorlage_f.C3.BCr_ganz_Ungeduldige" rel="nofollow noopener noreferrer">Kopiervorlage des minimalen Grundgerüsts </a> erklären.</p> <p>Im Abschnitt über den body leitet eine Fortsetzungsvorlage auf das Seitenstrukturierungs-Kapitel weiter.</p> <p>Danach kommt:</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst#Metaangaben_im_Detail" rel="nofollow noopener noreferrer"><strong>Metaangaben im Detail</strong></a></p> <p>Anhand des heads des Forums <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> werden weitere Metaangaben erklärt und mit der {{Hauptartikel|...}}-Vorlage auf weitere Tutorials verlinkt.</p> <p>Einige Texte sind etwas kurz, wer Lust hat sich auszutoben…</p> <p>BTW: Das Tutorial zu <a href="https://wiki.selfhtml.org/wiki/Favicon" rel="nofollow noopener noreferrer"><strong>Favicon</strong>s</a> ist nagelneu, da hat sich einiges geändert!</p> <p>Was mir erst am Schluss auffiel: Das ist der Platz für einen Link zum "Stylesheets einbinden" und den Artikel zu <a href="https://wiki.selfhtml.org/wiki/RSS" rel="nofollow noopener noreferrer">RSS</a></p> <p>Fazit: Eine solche Liste kann das "Siehe auch" bzw. eine Reihe Cards ersetzen oder ergänzen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Das ist nicht 1:1 übernommen worden. Manche Sachen müsste man mit ck durchsprechen, aber nicht momentan - wir haben andere Baustellen. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/mar/10/anfange-mit-grid-html-und-css-sheets-korrekt-strukturieren einsiedler 2024-03-10T18:12:03Z 2024-03-10T18:12:03Z Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren <h3>Start mit GRID</h3><p>Hallo liebe Forumer,</p> <p>nach einer langen Abstinenz vom Forum habe ich nun erneut Fragen zu einem Projekt das ich mit Grid umsetzen möchte.</p> <p>Ich möchte alles so einfach wie möglich halten, schlicht Fotos / Videos und einen Kurztext dazu, ähnlich einem Blog, öffentlich machen.</p> <p>Mir ist klar das alles noch nicht perfekt ist, aber durch eure Mithilfe wäre ich zumindest näher daran.</p> <p>Ich habe mal verschiedene Versionen von allem erstellt, da ich nicht sicher bin ob die Struktur (das Grid / Flexbox - Raster) jeweils so richtig ist.</p> <p>Projekt A) - schlichter BLOG (ohne Menüführung)</p> <p>Sub-Projekt B) - Version mit Menüführung</p> <p>Ich möchte anmerken, ich verwende hier noch Blindtexte und diverse Vorschau / Ansichts Fotos und Videos.</p> <p>===</p> <p>Projekt A) - schlichter BLOG (ohne Menüführung)</p> <p>LINK: <a href="http://misanthrop.bplaced.net/test/public/Testseite_V8.html" rel="nofollow noopener noreferrer">Testseite_V8</a></p> <p>1a) Grundsätzliches zum Grid - Raster:</p> <p>Ist es erforderlich das angefangen vom obersten <em>html</em> über <em>body</em>, <em>main</em> bis zum verschachtelsten, untersten <em>div</em>, komplett alles mit display: grid; "durchgerastert" wird?</p> <p>Oder kann ich einmal beispielsweise dem <em>main</em> ein grid mitgeben und weiterhin einer untergeordneten <em>section</em> ebenso ein display: grid; wie ich es einfach benötige?</p> <p>Ist dies legitim?</p> <p>Siehe bitte meine <a href="http://misanthrop.bplaced.net/test/public/Testseite_V8.html" rel="nofollow noopener noreferrer">Beispielsseite</a>.</p> <p>2a) Frage zu <strong>inline-size</strong></p> <p>Breiten von nav id="skip-to-section" / header class="subheader" / details class="related-links" --- mit <strong>inline-size</strong> korrekt festlegen!</p> <p>Bisher habe ich immer das Problem damit, auch wenn ich % - Angaben verwende, dann passiert es, das das jeweilige grid Raster dem ganzen Raster nach ausserhalb überspringt / überlagert. So gehört sich das aber nicht. Auch möchte ich diese Elemente zentrieren, das gelingt mir aus irgendeinem Grund auch nicht, auch nicht mit <em>justify-items</em></p> <p>Kann mir jemand zeigen wie es richtig geht?</p> <p>3a) "<em>to-the-top</em>" Botton --- beim vertikalen auf- und abscrollen zum schnellen anklicken "nach oben"</p> <p>Zum "<em>to-the-top</em>" Botton gibt es noch eine anders gelöste Version, momentan ist es hier so, das der "<em>Sprung-Botton-Pfeil</em>" jeweils innerhalb eines "<em>section - Bereiches</em>" " vertikal auf und ab" fährt.</p> <p>Bei einer anderen Version ist dieser "<em>Sprung-Botton-Pfeil</em>" übergreifend aller <em>sections</em>, bleibt aber innerhalb des übergeordneten <em>article</em>. Hier habe ich das Raster dementsprechend geändert. Näheres später bei der "Version mit Menüführung" zum anschauen.</p> <p>Villeicht verwirrend beschrieben, deshalb einfach mal angucken.</p> <p><em>Hier nun meine Frage</em>: Ob man es so löst oder ob es noch anders, allerdings ohne JS, "machbar" ist.</p> <p><strong>!!! Wichtig</strong> ist mir hier allerdings dabei. das bei einem <strong>verschmälerten Bildschirmfenster</strong> dieser Botton <em>jeweils unter einer section</em> steht, da immer ein "<em>to-the-top</em>" Botton beim vertikalen auf- und abscrollen zum schnellen anklicken verfügbar sein soll.</p> <p>Ich hoffe es ist verständlich.</p> <p>4a) Größe eines Videos</p> <p>Die Bitrate meines Videos liegt bei mir bisher immer bei 1100 kbps bei einer maximalen Länge des Videos von 2 - 3 Min. Ist das zuviel und kann ich dies noch um einiges verringern. Ich frage, weil das Video ja noch "geladen" werden muss und deshalb "zu gross" ist und eine lange Ladezeit benötigt.</p> <p>Sub-Projekt B) - Version mit Menüführung</p> <p>Hier, um das oben beschriebene mit den "<em>to-the-top</em>" Botton deutlicher zu machen.</p> <p>LINK : <a href="http://misanthrop.bplaced.net/test/public/Testseite_V7b2.html" rel="nofollow noopener noreferrer">Testseite_V7b2</a></p> <p>Link : <a href="http://misanthrop.bplaced.net/test/public/Testseite_V7b1.html" rel="nofollow noopener noreferrer">Testseite_V7b1</a></p> <p>Dann eine Version mit fixed Menüs :</p> <p>LINK : <a href="http://misanthrop.bplaced.net/test/public/Testseite_V7d.html" rel="nofollow noopener noreferrer">Testseite_V7d.html</a></p> <p>und LINK : <a href="http://misanthrop.bplaced.net/test/public/Testseite_V7c.html" rel="nofollow noopener noreferrer">Testseite_V7c.html</a></p> <p>Das mit dem fixieren der Menüs hat nach meiner Ansicht mehr Nachteile, vorallem wenn man die Schrift vergrößert, weniger wenn man das Bildschirmfenster zusammenschiebt.</p> <p>Wenn man natürlich die querie-Abstände so geschickt setzt würde es weniger auffallen. Was denkt ihr dazu?</p> <p>Weitere Fragen zum zweiten Projekt muss ich grad noch formulieren.</p> <p>An die lustigen Witzbolde unter euch mit irgendwelchen Spökskes, unterlasst es einfach hier etwas beizutragen. Danke.</p> <p>Grüße T.</p> https://forum.selfhtml.org/self/2024/mar/12/javascript-lasst-sich-nicht-auslagern-reloaded Matze henning-etienne@t-online.de http://matzeweb.v6.rocks/coder/index.php/beitrag-eins 2024-03-12T10:07:28Z 2024-03-12T10:07:28Z Javascript läßt sich nicht auslagern - reloaded <p>So, wie angedroht bin ich jetzt mit einem Account angemeldet und werde meine Frage jetzt erweitern....</p> <p>Doch zuerst einmal der Code um den es mir geht:</p> <pre><code class="block"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <script src="boxentest.js"></script> --> <meta name="viewport" content="width=device-width"> <title>Test</title> </head> <body> <label for="farbe01">Rand: </label> <input type="checkbox" id="s1" value="Rand"> <input id="farbe01" type="color" value="#466eaf"> <output id="ausgabe01"></output> <br> <label for="farbe02">Schatten: </label> <input type="checkbox" id="s2" value="schatten"> <input id="farbe02" type="color" value="#006767"> <output id="ausgabe02"></output> <br> <label for="farbe03">Steg: </label> <input type="checkbox" id="s3" value="steg"> <input id="farbe03" type="color" value="#00ff00"> <output id="ausgabe03"></output> <br><br><br> <p id="box1" aria-live="polite"></p> <p id="box2" aria-live="polite"></p> <p id="box3" aria-live="polite"></p> <script> window.addEventListener('DOMContentLoaded', function () {window.addEventListener("load", farbwahl00); document.getElementById("farbe01").addEventListener("change", farbwahl00); document.getElementById("farbe02").addEventListener("change", farbwahl00); document.getElementById("farbe03").addEventListener("change", farbwahl00); function farbwahl00() { const farbe01= document.getElementById("farbe01").value; const farbe02= document.getElementById("farbe02").value; const farbe03= document.getElementById("farbe03").value; document.getElementById("ausgabe01").textContent = farbe01; document.getElementById("ausgabe02").textContent = farbe02; document.getElementById("ausgabe03").textContent = farbe03;} }); const box02 = [ {"checkboxID": "s1", "checked": "Rand ist aktiviert!", "outputID": "box1", "unchecked": ""}, {"checkboxID": "s2", "checked": "Schatten ist aktiviert!", "outputID": "box2", "unchecked": ""}, {"checkboxID": "s3", "checked": "Steg ist aktiviert!", "outputID": "box3", "unchecked": ""} ]; document.body.addEventListener("input", event => { box02.forEach(data => { const checkbox = document.getElementById(data.checkboxID), output = document.getElementById(data.outputID); if (checkbox && output && event.target == checkbox) { output.textContent = checkbox.checked ? data.checked : data.unchecked; } }); }); </script> </body> </code></pre> <p>Hierzu habe ich mehrere Fragen (Herausforderungen).</p> <ol> <li> <p>Wenn ich den Scriptteil in die boxentest.js auslagere (ja, ist in diesem Beispiel auskommentiert, das weiß ich!)) aktualisiert er mir in der Anzeige zwar die Farbwerte aber Er zeigt nicht mehr an welches Element 'aktiviert' ist. Kann das daran liegen, dass ich in den unteren EventListener (box02) noch keinen 'DOMContentLoaded' gesetzt habe und wenn ja, wie füge ich den ein?</p> </li> <li> <p>Bezieht sich auch auf den unteren Eventlistener (box02). Macht hier ein 'input', daß sich auf den 'body' bezieht wirklich Sinn? Da ich ja weitere Funktionen einbaue ist es glaube ich nicht gut, sich nur für diese auf den Body zu beziehen. Wäre es also nicht klüger auch hier ein 'getElementById' mit 'change' zu setzen? Aber was setze ich dann als Auslöser (data.checkboxID), (box02) oder gibt es da etwas was ich übersehen habe?</p> </li> <li> <p>Gibt es eine Möglichkeit...... äehm... die in der ersten Funktion bestimmten Variablen (farbe01 - farbe03) mit der ausgabe der zweiten Funktion zu verknüpfen? Hinter dem 'Rand ist aktiviert' steht dann der Farbwert von farbe01, hinter dem 'Schatten ist aktiviert' steht dann der Wert von farbe02..... usw</p> </li> <li> <p>Eher unwichtig, könnte mir aber die zukünftige Arbeit an meinem Projekt erleichtern. In der ersten Funktion (farbwahl00) wiederhole ich auch sehr oft den selben code was ja nicht sehr 'Dry' ist wie ich gelernt habe - Kann ich auch da irgendwie ein Array einarbeiten.....</p> </li> </ol> <p>Ich habe mal zwei Links eingefügt..... Einen zur eigentlichen Seite Das ist aber im Moment eher ein grober Entwurf - zeigt aber in der verlinkten Unterseite wo ich mal hin will wenn ich groß bin. Der zweite link ist einfach nur ein Testaufbau der wieder verschwindet wenn meine Fragen beantwortet sind..... Die Ladezeiten können bei beiden etwas länger sein, weil der Server hier vor mir auf dem Küchentisch steht.</p> <p>Danke schon mal im vorraus für alle Tips und Anregungen, aber denkt daran - Bitte Langsam sprechen ich habe grade erst angefangen JS zu lernen.</p> <p>Okay, bis dann,</p> <p>Matze</p> https://forum.selfhtml.org/self/2024/mar/07/count-down-uhr-audiodatei-wird-nicht-abgespielt Franck Dettfurth 2024-03-07T09:03:30Z 2024-03-07T09:03:30Z Count down-Uhr, Audiodatei wird nicht abgespielt <p>Hallo: Hat jemand einen Tipp für mich, wo das Problem beim nachstehenden Code bestehen könnte? Die Audiodatei sollte bei Countdown 10 Sekunden abgespielt werden, aber es tut sich nichts - zumindest nicht im Browser. Beim Test auf W3Schools dagegen funktioniert alles wie gewollt.</p> <p>Danke schon mal für die Hilfe & Gruß, Franck.</p> <hr> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Countdown Clock with Audio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Trebuchet MS<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'https://schulressourcen.de/schulressourcen/0repositorium/bkgrd_pic1.jpg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/* Background picture */</span> <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-attachment</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token comment">/* Font color */</span> <span class="token punctuation">}</span> <span class="token selector">#countdown</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token comment">/* Font bold */</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>countdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>01:00.0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schulressourcen.de/schulressourcen/0repositorium/thx.wav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token comment">// JavaScript for the countdown clock</span> <span class="token keyword">function</span> <span class="token function">startCountdown</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Set the countdown duration to 15 seconds (in milliseconds)</span> <span class="token keyword">var</span> countdownDuration <span class="token operator">=</span> <span class="token number">15</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">;</span> <span class="token comment">// 15 seconds * 1000 milliseconds</span> <span class="token comment">// Set the time when the countdown should end</span> <span class="token keyword">var</span> endTime <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> countdownDuration<span class="token punctuation">;</span> <span class="token comment">// Update the countdown every 0.1 second</span> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Get the current date and time</span> <span class="token keyword">var</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Calculate the distance between now and the end time</span> <span class="token keyword">var</span> distance <span class="token operator">=</span> endTime <span class="token operator">-</span> now<span class="token punctuation">;</span> <span class="token comment">// Calculate minutes, seconds, and tenths of seconds</span> <span class="token keyword">var</span> minutes <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>distance <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> seconds <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>distance <span class="token operator">%</span> <span class="token punctuation">(</span><span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> tenths <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>distance <span class="token operator">%</span> <span class="token number">1000</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Format minutes, seconds, and tenths to add leading zeros if needed</span> <span class="token keyword">var</span> formattedMinutes <span class="token operator">=</span> <span class="token punctuation">(</span>minutes <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">"0"</span> <span class="token operator">+</span> minutes <span class="token operator">:</span> minutes<span class="token punctuation">;</span> <span class="token keyword">var</span> formattedSeconds <span class="token operator">=</span> <span class="token punctuation">(</span>seconds <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">"0"</span> <span class="token operator">+</span> seconds <span class="token operator">:</span> seconds<span class="token punctuation">;</span> <span class="token keyword">var</span> formattedTenths <span class="token operator">=</span> tenths<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>formattedTenths <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> formattedTenths <span class="token operator">=</span> <span class="token string">"0"</span> <span class="token operator">+</span> formattedTenths<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Display the countdown</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"countdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> formattedMinutes <span class="token operator">+</span> <span class="token string">":"</span> <span class="token operator">+</span> formattedSeconds <span class="token operator">+</span> <span class="token string">"."</span> <span class="token operator">+</span> formattedTenths<span class="token punctuation">;</span> <span class="token comment">// If the countdown reaches 00:10, play the audio</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>formattedMinutes <span class="token operator">==</span> <span class="token string">"00"</span> <span class="token operator">&&</span> formattedSeconds <span class="token operator">==</span> <span class="token string">"10"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"audio"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// If the countdown is over, display a message</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>distance <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"countdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"00:00.0"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Start the countdown when the page loads</span> window<span class="token punctuation">.</span>onload <span class="token operator">=</span> startCountdown<span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2024/mar/01/seltsamer-firefox-bug Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-03-01T07:41:30Z 2024-03-01T07:41:30Z Seltsamer Firefox-Bug <p>Ich habe mehrere <code>details</code>-Elemente, deren <code>summary</code>s<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> inline nebeneinander stehen sollen, deren Inhalte (<code>iframe</code>s mit Videos in dem Fall) sich aber an derselben Stelle öffnen sollen.</p> <p>(Dabei sorgt JavaScript dafür, dass sich beim Öffnen eines <code>details</code>-Elements dessen Geschwister schließen. Aber das tut hier nichts zur Sache, denke ich.)</p> <p><s>Funktioniert</s>: <a href="https://codepen.io/gunnarbittersmann/pen/NWmWNoJ" lang="en" rel="noopener noreferrer">Ancestors & ghosts</a>.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> <strong>Edit:</strong> Wie Rolf anmerkte, funktioniert schon dieses Beispiel nicht im Firefox – selbes Problem.</p> <p>Nun habe ich das aber <a href="https://codepen.io/gunnarbittersmann/pen/BaEaRoJ" rel="noopener noreferrer">mit etwas Listen-Markup</a>. Funktioniert auch – in Safari und Chromia.</p> <p>In Firefox sitzen die <code>iframe</code>s der ersten Gruppe (“Long Time Coming”) noch richtig; die der zweiten Gruppe (“Born in the U.S.A.”) werden aber zu hoch platziert.</p> <p>Manche Versuche (wie bspw. <code>content: '.'</code>) wirken temporär; nach Seitenreload aber nicht mehr.</p> <p>Findet vielleicht jemand einen Workaround?</p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <p>PS: Die Videos sind ansehenswert.</p> <p>Die Unterhaltung mit seinem Vater hatte ich aus der Autobiografie auch vorige Woche in meinem Programm <a href="https://gunnarbittersmann.de/programme/zum-wegrennen-geboren" rel="nofollow noopener noreferrer">„Zum Wegrennen geboren“</a>.</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Mir ist bewusst, dass sich <em lang="en">summaries</em> mit <em>ie</em> schreibt. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><em lang="en">“We are ghosts or we are ancestors in our children’s lives.”</em> – Bruce Springsteen, intro to “Long Time Coming” <em>(Springsteen on Broadway)</em> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/mar/07/javascript-lasst-sich-nicht-auslagern Matthias 2024-03-07T17:29:57Z 2024-03-07T17:29:57Z Javascript läßt sich nicht auslagern <p>Hallo,</p> <p>Ich habe einen Code geschrieben, der mir eine Anzeigt wenn eine Checkbox aktiviert wird. Das klapt auch soweit ganz gut, nur wenn ich das <script> in die Datei 'boxentest.js' auslagere funktioniert das ganze nicht mehr. (Ja die beiden Dateien liegen im selben Ordner!!) Was mache ich also falsch?</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxentest.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> Rand: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>s1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rand<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> Schatten: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>s2<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Schatten<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> Steg: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>s3<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Steg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"s1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"box1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Rand ist aktiviert!"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"box1"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"s2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"box2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Schatten ist aktiviert!"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"box2"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"s3"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"box3"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Steg ist aktiviert!"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"box3"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2024/mar/03/frage-zum-wiki-artikel-einstieg J. Behne 2024-03-03T12:17:59Z 2024-03-03T12:17:59Z Frage zum Wiki-Artikel „Einstieg“ <p>Guten Tag, ich bin ein Typ, der etwas Ausgedrucktes zum Erlernen braucht. Der Kurs ist sehr informativ und für mich interessant, daher meine Frage: Gibt es ihn auch in ausdruckbarer Form? Wenn ja, wo? Es geht um https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg</p> https://forum.selfhtml.org/self/2024/mar/09/in-memoriam-matthias-apsel Matthias Scharwies mscharwies@selfhtml.org 2024-03-09T04:06:18Z 2024-03-09T04:06:18Z In Memoriam: Matthias Apsel <p>Guten Morgen!</p> <p>Heute werden es 3 Jahre.</p> <p><a href="https://blog.selfhtml.org/2021/mar/11/besturzt-und-fassungslos-matthias-apsel-ist-gestorben" rel="noopener noreferrer">Bestürzt und Fassungslos – Matthias Apsel ist gestorben</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/self/2024/mar/09/frage-zum-wiki-artikel-requestanimationframe Thomas Mell 2024-03-09T00:15:47Z 2024-03-09T00:15:47Z Frage zum Wiki-Artikel „requestAnimationFrame“ <p>Die Aussage "Sie können keine eigenen Parameter für diese Funktion bereitstellen." ist falsch.</p> <p>requestAnimationFrame(function () { myFunction(para1, para2); }</p> <p>oder</p> <p>requestAnimationFrame(() => { myFunction(para1, para2); }</p> https://forum.selfhtml.org/self/2024/mar/07/css-grid-mit-autofill-erscheint-linksbundig-kann-man-auch-zentrieren Torsten 2024-03-07T15:29:36Z 2024-03-07T15:29:36Z css: grid mit autofill erscheint linksbündig - kann man auch zentrieren? <p>Hallo Leute,</p> <p>erstmal vielen Dank für die tolle selfhtml-Seite mit den vielen Tutorials und das Ihr hier ein Forum betreibt. Ich habe bereits viel ausprobiert und würde nun gern in einem Bereich meiner Homepage grid und autofill einsetzen wollen. Die Idee der "Responsivität ohne Media queries" finde ich genial. Leider bekomme ich es bei <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries#auto-fill" rel="nofollow noopener noreferrer">diesem Beispiel</a> nicht hin, die einzelnen Elemente zu zentrieren, wenn der Platz dafür vorhanden wäre. Eigentlich sollen die Elemente ja den gesamten Bildschirm ausnutzen, was aber bei bestimmten Fenstergrößen nicht geht. Und in diesem Fall <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS-grid-responsiv-1.html" rel="nofollow noopener noreferrer">hier nochmal im Vollbild</a> wäre es toll, wenn die Elemente nicht auf der linken Seite kleben würden sondern zentriert in der Mitte. Auch bei 2 Elementen würde ich mir wünschen, dass die schön ausgemittelt und zentriert in der Mitte des Bildschirms plaziert würden.</p> <p><em>justify-content: center oder space-evenly</em> kommt meinem Wunsch schon sehr nahe. Aber das "<aside>-Element Top-News" oder ganz unten der "<footer> Kontakt" bleiben trotzdem solange ganz links (und nicht zentriert!), bis genug Platz vorhanden ist und dann eine Reihe hochspringt.</p> <p>Habt Ihr eine Idee? Oder hat man bei Verwendung der Autofill-Option diese Möglichkeiten gar nicht?</p> https://forum.selfhtml.org/self/2024/mar/02/tabellenlayout envoy 2024-03-02T19:00:23Z 2024-03-02T19:00:23Z Tabellenlayout <p>Hallo, ich würde gerne dieses Tabellenlayout umsetzen, siehe table_layout.jpg. Ich habe den Tabellenbereichen über Klassen unterschiedliche Größen zugewiesen. Leider funktioniert es nicht, wenn die Spaltenbreiten unterschiedlich sind. Wie kann ich den Spalten unterschiedliche Breiten zuweisen?</p> <p>Vielen Dank und viele Grüße</p> https://forum.selfhtml.org/self/2024/mar/07/wiki-uneinheitlicher-umgang-mit-leerzeichen-in-komposita Peter 2024-03-07T12:49:03Z 2024-03-07T12:49:03Z Wiki: uneinheitlicher Umgang mit 'Leerzeichen in Komposita' <p>Hallo Leute,</p> <p>Beim Stöberm im CSS-Wiki fällt mir des Öfteren auf, dass Komposita auseinander geschrieben werden, bzw. Bindestriche fehlen ('Deppenlehrzeichen', bekanntes Beispiel:'Ohne Grund Gebühr'). Auch wenn sich das mittlerweile fast überall eingebürgert hat, bleibt es dennoch falsch. Es ist jedoxh auch zu wenig, um jedes Mal einen Bugtracker auszulösen. Gibt es für so etwas nicht eventuell aich eine autmatische Korrektur, die bereits beim Schreiben des Artikels greift?</p> <p>Gruß, Peter</p> https://forum.selfhtml.org/self/2024/mar/07/dropdown-aus-datenbank-fullen Jürg j.staenz@sin.ch 2024-03-07T09:59:02Z 2024-03-07T09:59:02Z DropDown aus Datenbank füllen <p>Hallo</p> <p>ich bin neu in Sachen PHP / HTML.</p> <p>ich möchte ein Dropdown 'Stichworte' aus der Datenbank befüllen (Anfrage funktioniert).</p> <p>2 Fragen:</p> <p>ich möchte an 1. Stelle '< Alle Stichworte >' einfügen (nicht in DB) und dies als detault Wert anzeigen.</p> <p>Wie mache ich das? Was in PHP - was in HTML?</p> <p>Danke für allfällige Hilfe.</p> https://forum.selfhtml.org/self/2024/mar/06/html-und-css-sheets-strukturieren Merlin S 2024-03-06T15:56:21Z 2024-03-06T15:56:21Z HTML- und CSS-Sheets strukturieren <p>Hallo!</p> <p>Ich bin noch Anfänger und wollte fragen, ob ihr Tipps habt, wie ich meine Sheets am Besten strukturiere. Auch wollte ich fragen, ob ich Tabulator und Space problemlos zwischen Tags oder Elementen zum Einrücken etc. verwenden kann. Ich freue mich auf die Antworten. Vielen Dank!</p> <p>Liebe Grüße</p> <p>Merlin</p> <p>aus Wien</p> <p>P.S.: Also ich meine nicht die Struktur der Website selbst, dazu habe ich genug im Wiki gefunden.</p> https://forum.selfhtml.org/self/2024/mar/05/javascript-und-css Matthias Scharwies mscharwies@selfhtml.org 2024-03-05T05:10:32Z 2024-03-05T05:10:32Z JavaScript und CSS <p>Guten Morgen,</p> <p>ich möchte gemeinsam mit euch <a href="https://forum.selfhtml.org/self/2024/mar/01/baustellen-im-wiki-helfende-hande-gesucht/1813827#m1813827" rel="noopener noreferrer">Nr. 5 unserer Baustellen</a> diskutieren:</p> <blockquote> <ol start="5"> <li>   <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS#Siehe_auch" rel="nofollow noopener noreferrer"><strong>JavaScript und CSS</strong></a> <ul> <li>alles rund um das Thema „CSS durch JS Ändern“. Vieles ist mittlerweile durch den Einsatz von custom properties überholt - der Rest müsste sortiert und aktualisiert werden.</li> </ul> </li> </ol> </blockquote> <p>Ich habe angefangen das Tutorial von <a href="/users/35" class="mention registered-user" rel="noopener noreferrer">@molily</a> , das aus dem Jahre 2006-07 stammt, in Einzeltutorials zu zerlegen und zu aktualisieren:</p> <h3>1. <a href="https://wiki-test.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_setzen" rel="nofollow noopener noreferrer">JavaScript und CSS/CSS-Eigenschaften setzen</a></h3><p>Thema ist das schnelle Ändern von style mit JS und warum man da eigentlich Klassen setzen oder ändern sollte.</p> <p>Deshalb kommt das noch vor das vermeintlich einfachere <code>style.color = 'red'; </code></p> <blockquote> <blockquote> <p>Mir ist z.B. aufgefallen, dass in der Seite nennen wir sie mal <strong>CSS-Manipulation durch JavaScript</strong>, nicht angegeben wurde, dass man mit der Methode add mehrere Klassen gleichzeitig hinzufügen kann.</p> </blockquote> </blockquote> <p>Das ist gefixt!</p> <p>Zum Schluss gibt es einen Abschnitt, der das Setzen von Custom propertys mit <code>setProperty</code>, bzw. das Auslesen mit <code>getPropertyValue()</code> vorstellt.</p> <p>Das ist die grundsätzliche Frage bei diesem Thema: Welche Methoden sollen wir noch empfehlen, wann ist es einfacher, auf Custom properties zu setzen?</p> <p><strong>Könntet ihr den Artikel bitte gegenlesen / redigieren?</strong></p> <h3>2. <a href="https://wiki-test.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen" rel="nofollow noopener noreferrer">JavaScript und CSS/CSS-Eigenschaften auslesen</a></h3><p>Dieses Kapitel vergleicht das <em>legacy</em> <code>getComputedStyle</code> mit <code>getBoundingClientRect</code> und <code>computedStyleMap</code> und stellt dann die imho „praktischeren“ Technologien <code>resizeObserver</code>und <code>matchMedia</code> vor.</p> <p>Vorhandene Seiten der Elementreferenz sollen natürlich bleiben; von Seiten wie clientWidth, clientHeight, offsetWidth und offsetHeight muss eine Verlinkung erfolgen!</p> <h4>Exkurs: Wiki-Struktur</h4><p>Da ist mir einfach aufgefallen, wie sich der JavaScript-Bereich in alle Richtungen entwickelt hat.</p> <p>Stefan Münz hatte in der Doku alle Eigenschaften und Methoden auf einer langen Seite angeordnet. <em>→ wird irgendwann zu lang</em></p> <p>Dogma des Wiki war die Auftrennung in einzelne Seiten. Manche der „unwichtigeren“ Eigenschaften wie <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/clientWidth" rel="nofollow noopener noreferrer">JavaScript/DOM/Element/clientWidth</a> sind <em>Stubs</em>, von denen auch kein Link zu „ergiebigeren“ Seiten führte. <em>→ man findet bei euch nix!</em></p> <p>2015 trennte @Orlok Node- und Element-Schnittstellen, weil das „ja was ganz anderes sei“. Mittlerweile ist die style-Eigenschaft über HTMLElement zur <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/ElementCSSInlineStyle" rel="nofollow noopener noreferrer">JavaScript/DOM/ElementCSSInlineStyle</a>-Schnittstelle gewandert - Unbedarfte würden das aber wohl doch bei Element suchen und nicht finden. <em>Eine Übersichtsseite mit nur einer Methode sorgt für keine Übersicht.</em></p> <p><em>(Auch das bestehende Tutorial JavaScript/Tutorials/JavaScript und CSS war zwar bei JS, aber nicht bei CSS gelistet - das ist jetzt mein Ziel, das alles sichtbar und vorzeigbar zu präsentieren.)</em></p> <h4><a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#computedStyleMap" rel="nofollow noopener noreferrer">computedStylemap</a></h4><p>Ich finde, dass die Methode hier hin gehört - aber eben auch zu CSS Typed OM.</p> <p>Wo soll <code>CSSStyleValue</code> hinführen - zu diesem Beispiel oder einem Grundlagen-Tutorial?</p> <p>Da müsste man noch diskutieren, wie der Übergang aussieht.</p> <h4><a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/CSS-Eigenschaften_auslesen#resizes_mit_resizeObserver" rel="nofollow noopener noreferrer">ResizeObserver</a></h4><p>Da mach' ich noch ein Beispiel!</p> <p><strong>Könntet ihr den Artikel bitte gegenlesen / redigieren?</strong></p> <h3>3. <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_wechseln" rel="nofollow noopener noreferrer">JavaScript und CSS/Stylesheets dynamisch wechseln</a></h3><p>Eigentlich eher ein legacy-Artikel, andererseits verwenden wir diese Technologie in unseren fertigen Beispielen, wie <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_wechseln#Siehe_auch" rel="nofollow noopener noreferrer">der neue Siehe auch-Abschnitt</a> zeigt.</p> <h3>4. <a href="https://wiki.selfhtml.org/wiki/JavaScript_und_CSS/Stylesheets_dynamisch_%C3%A4ndern" rel="nofollow noopener noreferrer">JavaScript_und_CSS/Stylesheets_dynamisch_ändern</a></h3><p>Das ist ein Stub. Neues Thema sollte ein Tutorial über <strong>CSSOM</strong> und evtl. auch <strong>CSS Typed OM</strong> sein. In der Spec ist dann gleich CSS.escape() mit drin, <a href="https://drafts.csswg.org/css-conditional-3/#the-css-interface" rel="nofollow noopener noreferrer">7.5. The CSS namespace, and the supports() function</a> aber woanders.</p> <p>Inwieweit man das zusammen erklären kann oder sollte, weiß ich nicht! Da würde ich gerne intensiv diskutieren, auch inwieweit wir etwas wie <em>CSS Typed OM,</em> das vom Firefox in den letzten 3 Jahren nicht aufgenommen wurde, behandeln müssen. (Komisches Gefühl, das ein Beispiel im MDN Fehler wirft, weil es die Methode nicht kennt - ich sollte den Browser wechseln!)</p> <p>Das würde ich gerne am 06.03. am Stammtisch diskutieren.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/self/2024/feb/23/css-typografie-hurenkinder-und-schusterjungen-bei-zeilenumbruch Linuchs 2024-02-23T12:10:09Z 2024-02-23T12:10:09Z CSS-Typografie: Hurenkinder und Schusterjungen bei Zeilenumbruch? <p>Moin,</p> <p>meine Liedtexte versehe ich mit Akkorden, so sieht es aus:</p> <p><a href="/images/f043a37e-d241-11ee-a538-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/f043a37e-d241-11ee-a538-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Die Akkorde am Zeilenende sollen auf die nächste Zeile. Der Akkord steckt in einem inline-block, zum nächsten Buchsteben gibt es KEINE Leerstelle, wieso wird da umgebrochen?</p> <p>Bei Seitenumbrüchen gibt (gab?) es <a href="https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge" rel="nofollow noopener noreferrer">Hurenkinder und Schusterjungen</a>. Gibt es sowas für Zeilenumbrüche auch?</p> <p>HTML:</p> <p>bald sind wir ein <b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_g_dur.mp3';akkorde.play();">G</b></b>Pärchen, / komm und <strong>lass mich nie a-<b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_d_dur.mp3';akkorde.play();">D</b></b>lleine,</strong> oh no, no, no, no, <b><b class="cur_pointer" onclick="akkorde.src='mp3/akkord_g_dur.mp3';akkorde.play();">G</b></b>no.</p> <pre><code class="block language-css"><span class="token selector">.akkorde b</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.akkorde b b</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> -.5em<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> .3em<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 110%<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/mar/01/ki-bildgenerierung-text-absichtlich-falsch Lisa 2024-03-01T12:43:19Z 2024-03-01T12:43:19Z KI Bildgenerierung Text absichtlich falsch? <p>Hallo,</p> <p>kann es sein, dass KI Bildgeneratoren absichtlich keine gewünschten Texte ausgeben?</p> <p>Habs jetzt schon zig mal probiert mit unterschiedlichsten Texten und Buchstaben und es geht nicht.</p> <p>Beispiel: create a modern logo, corpoate identity, from the letters D,P,A and the lettering "Deutsche philosophische Academy"</p> <p>Raus kommt dann so was:</p> <p><a href="/images/fbd335e2-d7c8-11ee-98dd-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/fbd335e2-d7c8-11ee-98dd-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Das müsste für eine KI doch ein Klacks sein, also kann es doch nur Absicht sein, aber warum?</p> <p>lg.</p> https://forum.selfhtml.org/self/2024/jan/07/der-rote-kreis-ist-rund-stehend-oval-und-liegend-oval-je-nach-betriebssystem Günter https://www.peutekunst.de 2024-01-07T14:18:59Z 2024-01-07T14:18:59Z Der rote Kreis ist rund stehend oval und liegend oval je nach Betriebssystem <p>Ein frohes Jahr euch allen! Ich bin dabei, die als problematische Seite genannte zu entwickeln und habe folgendes Problem: Unter jedem Bild ist ein Button platziert, dem ich einen Border und eine Hintergrundfarbe gegeben habe. Meine Erwartung ist einen runden roten Kreis zu sehen in dem ein eingekreistes "I" zu sehen ist. Der Kreis ist zu sehen unter Windows 11 und Ubuntu bei allen Browsern mit denen ich getestet habe. Die gleichen Browser zeigen jedoch unter iOS ein liegendes Oval und unter Android ein stehendes Oval. Ist das ein bekanntes Problem? Mir fehlt jede Idee, an welcher Schraube ich drehen muss, um überall den roten Kreis zu sehen. Bin dankbar für jeden Tipp. Mit freundlichem Gruß Günter</p> https://forum.selfhtml.org/self/2024/feb/29/google-versucht-sehr-alte-seiten-zu-indexieren-die-es-schon-sein-mindestens-10-jahren-nicht-mehr-gibt oxo888oxo 2024-02-29T18:11:53Z 2024-02-29T18:11:53Z Google versucht sehr alte Seiten zu indexieren, die es schon sein mindestens 10 Jahren nicht mehr gibt <p>Hallo</p> <p>In meiner Google Search Console werden mir unter "Seitenindexierung >> Nicht gefunden (404)" recht viele Seiten angezeigt. Das sind alles Unterseiten, meiner Website, die es mal gegeben hat. Inzwischen gibt es diese aber nicht mehr. Und das teilweise schon seit weit mehr als 10 Jahren.</p> <p>Meine Frage ist nun, warum versucht Google immer noch, die uralten Seiten zu indexieren? Macht Google das quasi für immer, wenn es die Seite irgendwann mal gegeben hat? Oder hat das einen anderen Grund?</p> <p>Und dann frage ich mich noch, wie ich damit umgehen soll?</p> <p>Soll ich das einfach ignorieren? Es wirkt sich bei Google doch eher negativ auf die Reputation meiner Website aus, wenn es viele 404-fehler gibt.</p> <p>Gruß Ingo</p> https://forum.selfhtml.org/self/2024/feb/29/weiterleitungen-per-htaccess-in-welcher-reihenfolge oxo888oxo 2024-02-29T18:00:22Z 2024-02-29T18:00:22Z Weiterleitungen per htaccess in welcher Reihenfolge? <p>Hallo</p> <p>Ich habe in meiner .htaaccess-Datei an zwei Stellen Weiterleitungen eingerichtet.</p> <p>Zu Beginn diese hier, um grundsätzlich auf https (ohne www) umzuleiten:</p> <pre><code class="block">RewriteEngine On RewriteCond %{SERVER_PORT} !=443 [OR] RewriteCond %{HTTP_HOST} ^www\.example\.org RewriteRule ^(.*)$ https://example.org/$1 [R=301,L] </code></pre> <p>Und dann weiter unten habe noch noch einzelne Seiten umgeleitet:</p> <pre><code class="block">Redirect 301 /produkte/beispiel-1.php https://example.org/produkte/beispiel-1-neu.php Redirect 301 /produkte/beispiel-2.php https://example.org/produkte/beispiel-1-neu.php </code></pre> <p>Meine Frage ist, ob die Reihenfolge so richtig uns sinnvoll ist. Oder sollte der teil für https (ohne www) unten nach den Umleitungen der einzelnen Seiten kommen?</p> <p>Mir geht es darum, möglichst zu vermeiden, dass ein bestimmter Aufruf zu oft um- bzw. weitergeleitet wird. Auch um es Google möglichst lieb zu machen.</p> <p>Gruß Ingo</p> https://forum.selfhtml.org/self/2024/feb/29/29-02-designing-search-ux-in-2024 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-02-29T11:58:55Z 2024-02-29T11:58:55Z 29.02. Designing Search UX In 2024 <p>Heute 19:00 online: <a href="https://smashingconf.com/online-workshops/workshops/search-ux-vitaly-friedman/" rel="nofollow noopener noreferrer">Designing Search UX In 2024</a> (kostenloser Workshop mit Vitaly Friedman)</p> <p><em lang="en">In many products, search is critical, yet too often it’s forgotten or overlooked. Many users heavily rely on search, and investing time and effort into good search is usually a very good investment. So how do people search and what do they expect from a first-class search experience in 2024? And what can we, as designers, do to design better experiences for them?</em></p> <p><em lang="en">In this free session, we’ll explore how to do just that — how to design better autocomplete, how to deal with complex filters and improve sorting, how to design better search results pages and improve the experience for power users.</em></p> <p><em lang="en">Roll up your sleeves: expect plenty of real-life examples, do’s, don’ts and a healthy dose of “Aha!”-moments. Beware: you might never forget what you’ll learn in this session!</em></p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/feb/28/php-logik-zwei-json-mit-sendedaten-vergleichen-und-differenzen-aufzeigen Tatortreiniger 2024-02-28T11:04:52Z 2024-02-28T11:04:52Z PHP Logik: Zwei JSON mit Sendedaten vergleichen und Differenzen aufzeigen!? <p>Liebe Community,</p> <p>ich habe zwei JSON Datein:</p> <ol> <li>Meine JSON Sendezeiten (exportiert aus meinen Daten) besteht aus timestamp, sender, titel</li> <li>Externe JSON Sendezeiten bestehend aus timestamp, sender, titel</li> </ol> <p>Beispiel:</p> <pre><code class="block language-json"> <span class="token punctuation">{</span> <span class="token property">"Timestamp"</span><span class="token operator">:</span> <span class="token string">"1709586000"</span><span class="token punctuation">,</span> <span class="token property">"Datum"</span><span class="token operator">:</span> <span class="token string">"04.03.2024"</span><span class="token punctuation">,</span> <span class="token property">"Uhrzeit"</span><span class="token operator">:</span> <span class="token string">"22:00"</span><span class="token punctuation">,</span> <span class="token property">"Sender"</span><span class="token operator">:</span> <span class="token string">"HR"</span><span class="token punctuation">,</span> <span class="token property">"Titel"</span><span class="token operator">:</span> <span class="token string">"hessenschau"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> </code></pre> <p>Ich möchte nun meine Json mit der externen JSON vergleichen und Änderungen/Neu Daten angezeigt bekommen. Ich dache zuerst ich könnte mich an dem Titel festhalten. Doch da gibt es z.B. die Tagesschau die mehrfach täglich auf verschiedenen Sendern läuft. Mein zweiter Gedanke war ich erstelle eine Art "HASH" für einen Datensatz zu erstellen, so kann ich einfacher vergleichen.</p> <p>Aber jetzt habe ich einen großen Knoten im Kopf. Wie kann das vergleichen realisieren?</p> <p>array_diff_key?</p> <p>Sicher habt Ihr da bessere Ideen die Datensätze zu vergleichen.</p> <p>Euer Tatortreiniger</p> https://forum.selfhtml.org/self/2024/feb/28/frage-zur-schnittstelle-von-boardgamegeek Passwort 2024-02-28T10:30:16Z 2024-02-28T10:30:16Z Frage zur Schnittstelle von boardgamegeek <p>Hallo</p> <p>Die Seite boardgamegeek bietet eine Schnitstelle in Python an: https://lcosmin.github.io/boardgamegeek/</p> <p>dazu habe ich zwei Fragen: Brauche ich Python auf meinem Webserver, um diese Schnittstelle zu nutzen? Denn das wird bei mir nicht angeboten. Und gibt es eine DAU-Anleitung um auf die BGG-Daten zuzugreifen? :-)</p> <p>Die Quick installl Anleitung auf der verlinkten Seite ist für mich jedenfalls nicht verständlich. Was ist pip? Geht das über SSH?</p> <p>Danke & Gruss</p> https://forum.selfhtml.org/self/2024/feb/28/stoppropagation Linuchs 2024-02-28T04:23:20Z 2024-02-28T04:23:20Z stopPropagation(); <p>Moin,</p> <p>bei meinen Liedtexten kann man zwecks Übung (Singen / Ukulele) eine Textzeile anklicken, dann startet die Audio-Wiedergabe dort.</p> <p><a href="/images/393ce89a-d5f0-11ee-98e8-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/393ce89a-d5f0-11ee-98e8-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Nun möchte ich noch eins draufsetzen und die roten Akkorde anklicken, damit sie erklingen.</p> <p>Doch dann beginnt die Textzeile neu, das ist nicht erwünscht.</p> <p>Ist stopPropagation() das geeignete Mittel und wie wende ich es an?</p> <p>So funktioniert es nicht:</p> <pre><code class="block language-js"><span class="token operator"><</span>b<span class="token operator">></span><span class="token operator"><</span>b <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"cur_pointer"</span> onclick<span class="token operator">=</span><span class="token string">"akkorde.src='../mp3/akk_C_dur.mp3';akkorde.play();this.stopPropagation();"</span><span class="token operator">></span><span class="token constant">C</span><span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span> </code></pre> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/27/werbelink-dienstkleidung-fur-selfhtmler Matthias Scharwies mscharwies@selfhtml.org 2024-02-27T18:09:33Z 2024-02-27T18:09:33Z Werbelink: Dienstkleidung für SELFHTMLer <p>Servus!</p> <p>Grad auf Mastodon gefunden: <a href="https://bildung.social/@heydon@front-end.social/112004524755176933" rel="nofollow noopener noreferrer">https://bildung.social/@heydon@front-end.social/112004524755176933</a></p> <p>Large Heydon Collider schrub:</p> <blockquote> <p>I wore this to a pub and the barman said it gave him disturbing flashbacks to his previous job </p> </blockquote> <p><a href="/images/2fc50950-d59b-11ee-b6b6-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/2fc50950-d59b-11ee-b6b6-9c6b00263d9f.png?size=medium" alt="div hoodie" loading="lazy"></a></p> <p><a href="https://webbed-briefs.teemill.com/product/divs-hoodie/" rel="nofollow noopener noreferrer">https://webbed-briefs.teemill.com/product/divs-hoodie/</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/feb/23/sticky-header-beim-scrollen-logo-verkleinern Jensen 2024-02-23T18:28:52Z 2024-02-23T18:28:52Z Sticky Header beim Scrollen Logo verkleinern <p>Hallo, bin neu im Forum und habe sofort eine Frage ;-)</p> <p>Ich habe ein Codeschnipsel, mit dem ich einen Sticky-Header für mein Logo + Menü erstellt habe, das beim Scrollen in der Höhe kleiner wird. Es funktioniert gut.</p> <p>Jedoch möchte ich erreichen, dass auch das Logo darin sich mit verkleinert. Ist das überhaupt anhand des bestehenden Codes möglich?</p> <pre><code class="block language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--logo-oben-tagline-height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">--logo-oben-tagline-inside-height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> <span class="token property">--header-height-difference</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-height<span class="token punctuation">)</span> - <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-inside-height<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">--logo-oben-tagline-bg</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#logo-oben-tagline</span> <span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-height<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> <span class="token function">var</span><span class="token punctuation">(</span>--header-height-difference<span class="token punctuation">)</span> * -1 <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* Multiply by -1 to get a negative value */</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* Other */</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-bg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 2px 10px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 999 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#logo-oben-tagline .inside</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span>1200px<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span>1200px<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-inside-height<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token comment">/* Other */</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#logo-oben-tagline img</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--logo-oben-tagline-inside-height<span class="token punctuation">)</span> - 20px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Über jede Hilfe / Ansatz wäre ich dankbar.</p> <p>Viele Grüße Jensen</p> https://forum.selfhtml.org/self/2024/feb/19/geloschte-webseite-wiederfinden Ich 2024-02-19T17:03:14Z 2024-02-19T17:03:14Z Gelöschte Webseite wiederfinden <p>guten Tag, ich suche eine Webseite, die ich vor einigen Wochen/Monaten noch im iNet gesehen habe. Nun ist sie verschwunden. Leider weiß ich keine URL. Wie kann man die Seite über Archive wiederfinden?</p> <p>Es geht um einen Typen Namens Prof. Dr. Florian Ebrecht und um Wohnungswirtschaft.</p> <p>Es war die Seite seines Unternehmens.</p> <p>mfG</p> https://forum.selfhtml.org/self/2024/feb/26/mobiles-menu-funktioniert-nicht-richtig Joergi 2024-02-26T02:57:22Z 2024-02-26T02:57:22Z Mobiles Menü funktioniert nicht richtig <p>Hallo zusammen,</p> <p>ich versuche zur Zeit, ein mobile Menü für meine Homepage zu erstellen. Dazu habe ich den untenstehenden freien Code gefunden und entsprechend modifiziert. Auf einem normalen Heimcomputer funktioniert das ganze auch einwandfrei. Wenn man z.B. über "Dropdown 1" mit der Maus fährt, öffnet sich das Untermenü. Beim Verlassen schließt es sich wieder.</p> <p>Auf mobilien Geräten ist das anders. Da muss man auf den entsprechenden Untermenüpunkt klicken. Dieser öffnet sich auch problemlos. Jedoch können die dann nachfolgenden Menüpunkte nicht mehr korrekt angewählt. Klickt man z.B. nach dem Öffnen von Dropdown 1 auf Drowdown 2, schließt sich Dropdown 1 und die Datei "9.htm" wird ausgeführt. Normalerweise sollte sich aber dann nur Dropdown 2 öffnen. Gibt es eine Möglichkeit, das zu beheben? Vielen Dank im voraus für Eure Hilfe. Hier der Code:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">font-family</span><span class="token punctuation">:</span>Arial<span class="token punctuation">}</span> <span class="token selector">.topnav</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>9999<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav a</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #f2f2f2<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 14px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 17px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.active</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #04AA6D<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav .icon</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown .dropbtn</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 17px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 14px 16px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f9f9f9<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 12px 16px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav a:hover, .dropdown:hover .dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #555<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a:hover</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown:hover .dropdown-content</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav a:not(:first-child), .dropdown .dropbtn</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav a.icon</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav.responsive</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.topnav.responsive .icon</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav.responsive a</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.topnav.responsive .dropdown</span> <span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.topnav.responsive .dropdown-content</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.topnav.responsive .dropdown .dropbtn</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>8000<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>topnav<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myTopnav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.htm<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>News<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropbtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown 1<span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span>&#9660 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa fa-caret-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropbtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dropdown 2<span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span>&#9660 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa fa-caret-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>9.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10.htm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:void(0);<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>15px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>☰<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">padding-top</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Responsive Topnav with Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Resize the browser window to see how it works.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hover over the dropdown button to open the dropdown menu.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> x <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"myTopnav"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>x<span class="token punctuation">.</span>className <span class="token operator">===</span> <span class="token string">"topnav"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> x<span class="token punctuation">.</span>className <span class="token operator">+=</span> <span class="token string">" responsive"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> x<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"topnav"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2024/feb/25/mathematik-zum-wochenende Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-02-25T07:21:49Z 2024-02-25T07:21:49Z Mathematik zum Wochenende <p><img src="/images/5bb2481e-d3ae-11ee-921b-9c6b00263d9f.jpg" alt="" loading="lazy"></p> <p>Vier Quadrate. Wie groß ist die grüne Fläche?</p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/feb/25/27-02-smashing-meets-the-future-of-design-systems Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-02-25T07:33:13Z 2024-02-25T07:33:13Z 27.02. Smashing Meets: the Future of Design Systems <p>Am Dienstag, 27.02. um 17:00 MEZ live im Netz:</p> <p lang="en"><a href="https://smashingconf.com/meets-future-design-systems" rel="nofollow noopener noreferrer">The Future of Design Systems</a>: the state of Design Systems and tools, and how AI impacts the future development and management of Design Systems.</p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/feb/21/video-tipp-heydon-pickering-uber-you-dont-know-your-users-and-never-will Matthias Scharwies mscharwies@selfhtml.org 2024-02-21T05:30:30Z 2024-02-21T05:30:30Z Video-Tipp: Heydon Pickering über You don't know your users (and never will) <p>Servus!</p> <p>Grad auf <a href="https://bildung.social/@heydon@front-end.social/111936293018525222" rel="nofollow noopener noreferrer">Mastodon</a> gefunden:</p> <blockquote> <p> I will be speaking at #AxeCon this Wednesday (tomorrow) at 2pm (GMT)</p> </blockquote> <blockquote> <p>My talk is titled <em>The Folly Of Chasing Demographics</em></p> </blockquote> <blockquote> <p>Here is a promo I made...</p> </blockquote> <p><a href="https://vimeo.com/913355854" rel="nofollow noopener noreferrer">https://vimeo.com/913355854</a></p> <p>You don't know your users (and never will)</p> <p>Der Vortrag ist <strong>schon heute um 13:00 unserer Zeit</strong>! (2pm GMT)</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/feb/19/svg-kein-glow-effekt-bei-horizontaler-linie-warum spunky 2024-02-19T09:10:16Z 2024-02-19T09:10:16Z SVG: kein glow-Effekt bei horizontaler Linie, warum? <p>Hallo,</p> <p>Ich möchte eine SVG-Linie mit fließendem und leuchtendem Effekt erstellen. Dies funktioniert auch für Pfadlinien, aber nicht für horizontale oder vertikale Linien. Sobald ich den Filter (filter: url(#glow)") in den letzten beiden Linien hinzufüge, werden die Linien nicht mehr angezeigt. Wie kann man das Problem lösen?</p> <p>Hat jemand eine andere oder bessere Idee für einen Fließ- und Glüheffekt?</p> <p>Danke.</p> <pre><code class="block"><html style="margin: 0; background: #000;"><body> <svg viewBox="0 0 600 600" stroke-linecap="round" fill-opacity="0"> <defs> <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> <fegaussianblur class="blur" result="coloredBlur" stddeviation="5"></fegaussianblur> <femerge> <femergenode in="coloredBlur"></femergenode> <femergenode in="coloredBlur"></femergenode> <femergenode in="coloredBlur"></femergenode> <femergenode in="SourceGraphic"></femergenode> </femerge> </filter> </defs> /* sinus */ <g class="svgWrapper" transform="translate(300,275)"> <path id="svgWrapper1" class="exampleGlow" d="M100,250 C200,0 300,500 400,250" stroke-width=15 stroke=#800 stroke-dasharray=0 stroke-dashoffset=100 filter=url(#glow) transform='translate(-250,-200)'/> </g> <g class="svgWrapper" transform="translate(300,275)"> <path id="svgWrapper2" class="exampleGlow" d="M100,250 C200,0 300,500 400,250" stroke-width=8 stroke=#f00 stroke-dasharray=50,50 stroke-dashoffset=100 filter=url(#glow) box-shadow=0px transform='translate(-250,-200)' style="animation: move 1.0s linear infinite"/> </g> /* horizontal */ <g class="svgWrapper" transform="translate(300,400)"> <path class="exampleGlow" d="M100,250 H400" style="stroke-width: 15; stroke: #008; stroke-dasharray: 0; stroke-dashoffset: 100;" transform="translate(-250,-200)"/> </g> <g class="svgWrapper"> <path class="exampleGlow" d="M150,450 H450" style="stroke-width: 8; stroke: #00f; stroke-dasharray: 75 25; stroke-dashoffset: 100; animation: move 2.0s linear infinite; box-shadow: 0px;"/> </g> </svg> <style> @keyframes move { 100% {stroke-dashoffset: 0; box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);} } @keyframes glow { from {box-shadow: 0px;} to {box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);} } </style> </body> </html> </code></pre> https://forum.selfhtml.org/self/2024/feb/23/after-pseudoelement-mittig-zu-element-platzieren Tobias 2024-02-23T17:15:50Z 2024-02-23T17:15:50Z ::After-Pseudoelement mittig zu Element platzieren <p>Hallo ihr Lieben,</p> <p>ich bräuchte einmal Hilfe beim Gestalten einer Webseite mit CSS. Ich habe dort Profilbilder von Menschen, auf die man klicken soll. Dann öffnet sich deren Profil:</p> <p><a href="/images/536316e8-d26e-11ee-a0ff-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/536316e8-d26e-11ee-a0ff-9c6b00263d9f.png?size=medium" alt="Screenshot der beabsichtigten Webseite" title="Screenshot Profilbild" loading="lazy"></a></p> <p>Ich habe ein ::after Pseudoelement zur "Profilbild"-Klasse der Bilder (= img in figure, erzwingt wordpress so) erstellt. Darin ist der content "-> Profil". Ich möchte jetzt, dass der Schriftzug immer mittig zum Foto angezeigt wird.</p> <p>Momentan sieht meine Notlösung wie folgt aus:</p> <pre><code class="block language-css"><span class="token selector">.Profilbild</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Profilbild img</span> <span class="token punctuation">{</span> transition-duration 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Profilbild::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'→ Profil'</span><span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'GrueneType'</span><span class="token punctuation">;</span> <span class="token property">align-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 37%<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Profilbild:hover::after</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> larger<span class="token punctuation">;</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Profilbild img:hover</span> <span class="token punctuation">{</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 5px 15px -5px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.8<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.01<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transition-duration</span><span class="token punctuation">:</span> 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das ist jetzt aber nicht optimal, da sich die width des <div>-containers je nach viewport verändert, sodass der Abstand von links sich auf die Position im <img> auswirkt. Manchmal ist der Textzug weiter links, mal mittiger.</p> <p>Habt ihr eine bessere Lösung, die an den effekt von text-align: center herankommt?</p> <p>Vielen Dank schon einmal!</p> https://forum.selfhtml.org/self/2024/feb/06/private-anfrage-erhalten-wie-dreht-man-die-uberschrift Rolf B 2024-02-06T09:56:31Z 2024-02-06T09:56:31Z Private Anfrage erhalten: Wie dreht man die Überschrift <p>Hallo alle,</p> <p>ich hatte eine Anfrage per PN. Darin wurde um Hilfe für ein Layout dieser Art gebeten:</p> <p><img src="https://forum.selfhtml.org/images/7f441c46-c466-11ee-bf3c-9c6b00263d9f.jpg" alt="Layoutdarstellung" loading="lazy"></p> <p>Der Headerbereich war als SVG dargestellt. An Hand einer @media-Abfrage sollte bei genügend breitem Bild der Header links an die Seite rücken. Ich wurde gefragt, wie man das im SVG hinbekommt.</p> <p>Da sich die fragende Person direkt an mich gewendet hat, nenne ich keine Namen. Aber ich möchte meinen Lösungsvorschlag vorstellen, falls es weitere Ideen dazu gibt.</p> <p>Es wäre sicherlich irgendwie machbar gewesen, mit @media-Abfragen im SVG Element zu arbeiten. Man hätte das SVG auch rotieren können. Das fand ich aber beides wenig responsiv und vor allem nicht zugänglich (bzw. man hätte den SVG Inhalt als alt-Text doppeln müssen). Deswegen habe ich Abstand davon genommen und eine reine HTML Lösung vorgeschlagen.</p> <p>Normalfall: schmaler Viewport. Header steht oben.</p> <p>Enhancement-Fall: breiter Viewport. Header kommt nach links und wird senkrecht gestellt.</p> <p>Dazu habe ich:</p> <ul> <li>den Body als Grid layoutet</li> <li>bei breitem Bild den head-Bereich nach links gestellt</li> <li>mit writing-mode:vertical-rl und text-orientation:sideways die Überschrift senkrecht gestellt</li> <li>mit rotate:180deg dafür gesorgt, dass sie so herum steht, wie sich der Autor das vorstellt. Mit writing-mode und text-orientation habe ich das nicht lösen können.</li> </ul> <p>Fixe Abmessungen, die ich für eine SVG Implementierung gebraucht hätte, entfallen damit. Und der Text im Header kann obendrein noch umbrechen, wenn der Viewport noch schmaler wird.</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100vh - 16px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid</span><span class="token punctuation">:</span> <span class="token string">"head"</span> auto <span class="token string">"main"</span> 1fr <span class="token string">"footer"</span> auto / 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 50em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">grid</span><span class="token punctuation">:</span> <span class="token string">"head main"</span> 1fr <span class="token string">"head footer"</span> auto / auto 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">writing-mode</span><span class="token punctuation">:</span> vertical-rl<span class="token punctuation">;</span> <span class="token property">rotate</span><span class="token punctuation">:</span> 180deg<span class="token punctuation">;</span> <span class="token property">text-orientation</span><span class="token punctuation">:</span> sideways<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p><strong>Nachtrag:</strong> text-orientation:sideways scheint unnötig, es gibt aber genügend Zeichen, die ohne diese Angabe nicht mitgedreht werden.</p> <p>Ja, den body-margin habe ich als magic number drin, kann man verbessern. Den footer habe ich in meinem Fiddle noch mit drin, für die Attributierung meiner Textquelle.</p> <p><a href="https://jsfiddle.net/Rolf_b/eouj1L39/" rel="noopener noreferrer">So sieht's aus</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/feb/22/filezilla-3-64-und-3-66-ubuntu-fehler-beim-laden-der-warteschlange Linuchs 2024-02-22T14:27:50Z 2024-02-22T14:27:50Z Filezilla 3.64 und 3.66 (Ubuntu): Fehler beim Laden der Warteschlange <p>Moin,</p> <p>sowohl bei Version 3.64 und der heute entpackten 3.66 erscheint beim Start und Beenden diese Meldung:</p> <p><a href="/images/c16f92c4-d18d-11ee-96b4-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/c16f92c4-d18d-11ee-96b4-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Was könnte der Grund sein? Die Datei hat das Datum</p> <p><a href="/images/0a61608e-d18e-11ee-b3e9-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/0a61608e-d18e-11ee-b3e9-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>und die Rechte</p> <p><a href="/images/6019afd6-d18e-11ee-9ac5-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/6019afd6-d18e-11ee-9ac5-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/19/javascript-warum-hat-safari-probleme-mit-const j.j. moz@jeka.info 2024-02-19T20:13:27Z 2024-02-19T20:13:27Z Javascript: Warum hat Safari Probleme mit const? <p>Hallo!</p> <p>Nach über 20 Jahren schau ich hier mal wieder rein.</p> <p>Fast ein Jahr lief ein kleiner Internetauftritt problemlos, bis ich auf die idee gekommen bin, in der Scriptdatei einige <code>var</code> durch <code>const</code> zu ersetzen. <strong>Getestet mit Chromium und Firefox</strong>, alles ok.</p> <p>Es hat acht Wochen gedauert, bis aufgefallen ist, daß in Safari das komplette Script ignoriert wird (Grundfunktionen brauchen nur CSS). Ich hab keinen Mac und kein Iphone und prüfe Safari lediglich mit online-Scrennshots, was Zeitaufwendig ist und ich wegen der Banalität der Änderung wohl für überflüssig gehalten habe (jajahaha...).</p> <p>Frage: Kennt jemand das Problem? Bei meinen Recherchen bin ich auf einige Ergebnisse gekommen, aber nicht schlauer geworden.</p> <p>Das Schript ist hier: <code>peter-hindelang.de/Bilder/script.js</code> Wenn man von den ersten sechs <code>var</code> eine oder mehrere durch <code>const</code> ersetzt, steigt Safari aus.</p> <p>Es ist mir nicht gelungen, das Problem durch Versuch und Irrtum einzugrenzen. Die Welt wird auch mit <code>var</code> nicht untergehen.</p> https://forum.selfhtml.org/self/2024/feb/22/hilfe-vollkommen-unbekannte-sprache-im-firefox-tablet Linuchs 2024-02-22T14:55:02Z 2024-02-22T14:55:02Z Hilfe! Vollkommen unbekannte Sprache im Firefox (Tablet) <p>Moin,</p> <p>irgendwann habe ich mit ungelenken Fingern eine Schaltfläche berührt und die Sprache des Firefox auf dem Samsung-Tablet (Android 6.0.1) verstellt. So sieht es aus:</p> <p><a href="/images/1ada5a02-d192-11ee-8011-9c6b00263d9f.JPG" rel="noopener noreferrer"><img src="/images/1ada5a02-d192-11ee-8011-9c6b00263d9f.JPG?size=medium" alt="" loading="lazy"></a></p> <p>Kann mir bitte jemand im „Blindflug“ zur deutschen Sprache (meinetwegen auch englisch) zurückhelfen?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/06/wie-umrahmt-man-zeichen Linuchs 2024-02-06T10:10:43Z 2024-02-06T10:10:43Z Wie umrahmt man Zeichen? <p>Moin,</p> <p>ich habe in Erinnerung, dass man Zeichen umrahmen kann. Etwa, wenn sich das Zeichen kaum vom Hintergrund (vorgegebene Boomwhacker-Farben) abhebt:</p> <p><a href="/images/51b8a672-c4d7-11ee-9a45-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/51b8a672-c4d7-11ee-9a45-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Mir fehlt das Stichwort für die Recherche. border oder shadow scheint es nicht zu sein.</p> <p>Oder brauche ich da entspr. Schriftfonts?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/19/firefox-auf-dem-tablet-wie-javascript-einschalten-suche-tablet-mit-linux Linuchs 2024-02-19T10:48:15Z 2024-02-19T10:48:15Z Firefox auf dem Tablet - wie Javascript einschalten? | Suche Tablet mit Linux <p>Tablet: Samsung Galaxy SM-T805 Android 6.01</p> <p>Firefox: Version kann ich nicht abfragen, habe versehentlich eine fremde Sprache angetippt, so sieht es aus. Wie komme ich im Blindflug nach D zurück?</p> <p><a href="/images/c8e26f64-cf11-11ee-a46c-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/c8e26f64-cf11-11ee-a46c-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Moin,</p> <p>für meine eigenen Webseiten mit mehreren Audio-Spuren und/oder Video suche ich eine Möglichkeit, die auf dem Tablet lokal anzuschauen und anzuhören.</p> <p>JS wird benötigt, um mehrere Audio- Spuren synchron zu starten und auch, um die Texte à la Karaoke zu markieren (problematische Seite).</p> <p>Wie kann ich im Android-Firefox Javascript aktivieren?</p> <p>Zusatzfrage: Bin bereit, ein neues Tablet zu kaufen, Budget 250€. Gibt's sowas mit Linux(Ubuntu). Dieses Vordrängeln von Google bin ich leid.</p> <p>In der Übersicht wird Firefox zensiert zu „Internet“.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/21/externe-festplatte-wird-nicht-erkannt Markus 2024-02-21T15:33:04Z 2024-02-21T15:33:04Z externe Festplatte wird nicht erkannt <p>Hallo,</p> <p>wenn ich meine Samsung SSD T5 Festplatte an meinen Windows 11 PC anschließe, wird sie nicht erkannt (nicht im Explorer aufgelistet). Woran kann dies liegen?</p> https://forum.selfhtml.org/self/2024/feb/21/mittels-micrsoft-graph-api-einen-kalendereintrag-fur-einen-benutzer-erstellen KevinB 2024-02-21T10:11:27Z 2024-02-21T10:11:27Z Mittels Micrsoft Graph API einen Kalendereintrag für einen Benutzer erstellen <p>Hallo,</p> <p>wir werden bald auch Mitglied der MS Sekte und wechseln zu O365. Um unsere bisherigen intern wunderbar funktionierenden Dienste weiter nutzen zu können, bin ich auf der Suche, wie ich einen Kalendereintrag für einen Benutzer über die Microsoft Graph API erstellen kann.</p> <p>Die APP-Registrierung ist erfolgt und die Berechtigung erteilt. Der Zugriff bspw. um den Benutzernamen über die Mail-Adresse zu bekommen funktioniert auch schonmal.</p> <p>Der Code dafür sieht bspw wie folgt aus:</p> <pre><code class="block">require_once '../vendor/autoload.php'; // Path to Microsoft Graph SDK and OAuth2 Client library use Microsoft\Kiota\Authentication\Oauth\ClientCredentialContext; use Microsoft\Kiota\Abstractions\ApiException; use Microsoft\Graph\Core\Authentication\GraphPhpLeagueAuthenticationProvider; use Microsoft\Graph\GraphServiceClient; $tokenContext = new ClientCredentialContext( $tenantId, $clientId, $clientSecret); $graphServiceClient = new GraphServiceClient($tokenContext); try { $user = $graphServiceClient->users()->byUserId('max.mustermann@example.com')->get()->wait(); echo "User Name = {$user->getDisplayName()} <br/>"; } catch (ApiException $ex) { echo "Fehler: ".$ex->getError()->getMessage(); exit; } </code></pre> <p>Aber der folgende Versuch einen Kalendereintrag zu schreiben</p> <pre><code class="block">$requestBody = new Event(); $requestBody->setSubject('Let\'s go for lunch'); $body = new ItemBody(); $body->setContentType(new BodyType('hTML')); $body->setContent('Does noon work for you?'); $requestBody->setBody($body); $start = new DateTimeTimeZone(); $start->setDateTime('2024-02-22T12:00:00'); $start->setTimeZone(new DateTimeZone('Europe/Berlin')); $requestBody->setStart($start); $end = new DateTimeTimeZone(); $end->setDateTime('2024-02-22T13:00:00'); $end->setTimeZone(new DateTimeZone('Europe/Berlin')); $requestBody->setEnd($end); $location = new Location(); $location->setDisplayName('Harry\'s Bar'); $requestBody->setLocation($location); $result = $graphServiceClient->users()->byUserId('max.mustermann@example.com')->events()->post($requestBody, $requestConfiguration)->wait(); </code></pre> <p>erzeugt den Fehler <code>Fatal error: Uncaught Error: Class 'Event' not found</code></p> <p>Was habe ich falsch gemacht oder vergessen? In Beispiele von MS sind da leider nicht erleuchtend.</p> <p>LG KevinB</p> https://forum.selfhtml.org/self/2024/feb/17/duplikate-beim-kopieren Gerhard 2024-02-17T16:13:16Z 2024-02-17T16:13:16Z Duplikate beim Kopieren <p>Hallo,<br> immer wieder passiert folgendes.<br> Beim Kopieren von Dateien eines Verzeichnisses in ein anderes, garantiert leeres Verzeichnis kommt die Meldung, dass eine Datei bereits vorhanden ist.<br> Wie kann dies passieren?</p> https://forum.selfhtml.org/self/2024/feb/19/rechner-platt-machen Hanno 2024-02-19T09:04:35Z 2024-02-19T09:04:35Z Rechner "platt" machen <p>Hi,<br> ich habe einen gebrauchten Laptop geschenkt bekommen, auf dem Unix und Windows installiert ist.<br> Ich wollte nun beides deinstallieren und den Rechner neu partitionieren. Am Deinstallieren bin ich schon gescheitert.<br> Dann habe ich unter Windows versucht, die Partitionen zu löschen und neu aufzuteilen.<br> Leider ließen sich einige nicht löschen.<br> Wie komme ich zu einem sauberen Laptop, auf dem ich dann Windows installieren kann (die Unix-Fans mögen mir verzeihen)?</p> https://forum.selfhtml.org/self/2024/feb/16/click-event-auf-datalist Nico R. 2024-02-16T11:23:57Z 2024-02-16T11:23:57Z click-Event auf datalist <p>Hallo allerseits,</p> <p>ich versuche, per JS einen per Klick ausgewählten Wert aus einer Dataliste zu erhalten. Hört sich eigentlich banal an, aber ich kriegs nicht hin.</p> <p>Ich habe also ein input-Feld mit einer angehängten datalist. Den Formular-Button zur Weiterverarbeitung möchte ich nur einblenden, wenn wirklich ein Wert aus der Dataliste ausgewählt wurde. Das funktioniert auch, wenn ich den Wert nach dem Tippen per Eingabetaste auswähle. Offenbar bezieht sich das keyup-Event - obwohl ich mich ja eigentlich in der datalist befinde - auf das input-Feld.</p> <p>Beim click auf die datalist verhält sich das offenbar anders. Genauer gesagt tut sich hier gar nichts. Mausaktionen werden von der datalist komplett ignoriert. Die Lösung wäre <strong>selectionchange</strong>, aber das kann ja offenbar nur der Firefox.</p> <p>Hier mein Versuchsscript: <a href="https://fsv-optik.de/tests/datalist.html" rel="nofollow noopener noreferrer">https://fsv-optik.de/tests/datalist.html</a></p> <p>Vielleicht könnt ihr mir ja wieder auf die Sprünge helfen.</p> <p>Schöne Grüße</p> <p>Nico</p> https://forum.selfhtml.org/self/2024/feb/18/viewport-problem-darstellung-website-safari mikhtml24 2024-02-18T10:24:01Z 2024-02-18T10:24:01Z Viewport/Problem Darstellung Website Safari <p>Hallo, ich bin neu im Forum weil ich seit Wochen mit einem Problem kämpfe, das ich nicht lösen kann. Ich habe eine Website erstellt (aus einem Template) und alles funktioniert bestens bis auf ein wichtiges Detail.</p> <p><a href="/images/0cf2ee2a-ce47-11ee-89db-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/0cf2ee2a-ce47-11ee-89db-9c6b00263d9f.jpg?size=medium" alt="Verschiedene dynamische Viewports" loading="lazy"></a></p> <p>Wenn ich die Website öffne stimmt alles und das Menü/Logo werden korrekt angezeigt, auch der Fuillscreen Hintergrund. Wenn ich nun nach unten scrollen und dann eine Site öffne, paßt sich die Website nicht an den neuen Viewport an sondern bleibt im "alten" dadurch wandert das Menü/Logo sowie das Fullscreen Image nach oben und stimmt nicht mehr. Im style.css habe ich</p> <p>.section.fullscreen { min-height: 100vh } verwendet und auf den Websites</p> <p>meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover</p> <p>Ich habe auch gelesen, daß es für Safari svh und andere Werte gibt, aber wie wendet man sie an? Wenn ich height: 100vh; und height: 100 svh, im css angebe dann passiert gar nichts.</p> <p>Kann mir jemand helfen, dieses Problem zu lösen bitte? Die Website ist aus diesem Grund seit Wochen nicht online...</p> https://forum.selfhtml.org/weblog/2024/feb/17/when-das-w3c-aufsassig-wird-css-conditionals-level-5-und-die-kompatibilitat Rolf B 2024-02-17T16:47:04Z 2024-02-17T16:47:04Z @when das W3C aufSASSig wird - CSS Conditionals Level 5 und die Kompatibilität <p>Die CSS Conditionals 5 Spezifikation entwickelt sich. Aber sie haben ein Problem: SASS</p> <p>Wer SASS kennt, weiß es: Man kann – auf dem Server, zur Generierungszeit – Bedingungen formulieren und damit beispielsweise steuern, welche CSS-Variante ein Mixin erzeugt. Das Schlüsselwort, das SASS dafür verwendet, heißt <code>@if</code> – und damit wildert es im Wald der generellen Syntax für @-Regeln, die CSS im Browser verwendet.</p> <p>Das war lange unkritisch, aber das W3C entwickelt seit ein paar Jahren an der Stufe 5 von CSS-Bedingungen (CSS Conditionals Level 5). Die bisherigen Stufen brachten uns <code>@media</code>-Queries für Medientypen und Medienfeatures, sowie <code>@supports</code>-Abfragen für Eigenschaften und Selektoren.</p> <p>Mit Stufe 5 wird <code>@supports</code> um Abfragen für Font-Technologien und Font-Formate erweitert. Die zugehörige Syntax lautet</p> <pre><code class="block language-css"> <span class="token atrule"><span class="token rule">@supports</span> <span class="token function">font-tech</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@supports</span> <span class="token function">font-format</span><span class="token punctuation">(</span>format<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> </code></pre> <p>Als Format können diejenigen Formate angegeben werden, die in der format()-Angabe der src-Eigenschaft einer <a href="https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face" rel="nofollow noopener noreferrer">@font-face Definition</a> zulässig sind, also beispielsweise <code>woff2</code>, <code>truetype</code> oder <code>eot</code>.</p> <p>Font-Technologien sind etwas, was in <a href="https://www.w3.org/TR/css-fonts-4/#font-tech-definitions" rel="nofollow noopener noreferrer">Abschnitt 11 der CSS Fonts 4 Spezifikation</a> beschrieben wird. Wenn Sie Spezialfonts verwenden wollen, die besondere Technologien verwenden, dann sollte sich bei dem jeweiligen Font ein Hinweis auf diese Technologien finden. Wenn nicht, dann sind diese Abfragen für Sie ohne Belang.</p> <h3>Und was hat es nun mit SASS auf sich?</h3><p>Die dritte Neuerung, die uns CSS Conditionals 5 bringen wird, ist eine Zusammenführung von <code>@media</code>- und <code>@supports</code>-Abfragen in eine generelle Abfragesyntax, die auch Abfrageketten und einen Defaultzweig ermöglicht. Also das, was Programmierer schon längst als</p> <pre><code class="block">if (bedingung) ... else if (bedingung) ... else ... </code></pre> <p>kennen.</p> <p>Und hier liegt die Crux: Die Spezifikation verwendet eine @-Regel Syntax, aber <code>@if</code> ist bereits von SASS reserviert worden. Würde natives CSS nun ein <code>@if</code> einführen, so wäre entweder SASS gezwungen, dem Präprozessor genug Intelligenz einzuhauchen, um ein SASS-<code>@if</code> von einem CSS-nativen <code>@if</code> zu unterscheiden – oder alle SASS-Quellen müssten von <code>@if</code> auf ein <code>@-sass-if</code> oder etwas ähnliches umsteigen.</p> <p>Weil SASS eine gewaltige Verbreitung hat, wollte man das vermeiden. Die Spezifikation verwendet statt <code>@if</code> deshalb eine Syntax mit <code>@when</code>:</p> <pre><code class="block">@when bedingung { ... } @else bedingung { ... } @else { /* Default-Fall */ ... } </code></pre> <p>Als Bedingung kommt eine Syntax zum Einsatz, wie sie für <code>@supports</code> eingeführt wurde. Für die bisherigen Abfragen auf Medienfeatures und unterstützte Eigenschaften werden die Pseudofunktionen <code>media()</code> und <code>supports()</code> eingeführt. <code>selector()</code>, <code>font-format()</code> und <code>font-tech()</code> wird von <code>@supports</code> übernommen:</p> <pre><code class="block">@when media(width > 50em) @when supports(background-music:url(foo.wav)) @when selector( body:has(:passive) ) @when font-format(woff2) @when font-tech(color-COLRv0) </code></pre> <p>Die Abfragen auf background-music und :passive sollten in aktuellen Browsern natürlich fehlschlagen…</p> <p>Das lässt sich auch mit <code>AND</code> und <code>OR</code> kombinieren, die Spec enthält dieses Beispiel:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@when</span> <span class="token function">media</span><span class="token punctuation">(</span>width >= 400px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token function">media</span><span class="token punctuation">(</span><span class="token property">pointer</span><span class="token punctuation">:</span> fine<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token function">supports</span><span class="token punctuation">(</span><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* A */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@else</span> <span class="token function">supports</span><span class="token punctuation">(</span><span class="token property">caret-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token function">supports</span><span class="token punctuation">(</span><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">double-rainbow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* B */</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@else</span></span> <span class="token punctuation">{</span> <span class="token comment">/* C */</span> <span class="token punctuation">}</span> </code></pre> <p>Das ist ziemlich großartig, und erspart uns umständliche Doppelabfragen auf <code>width > 50em</code> und <code>width <= 50em</code>. Her damit, sag ich!</p> <p>Womit man aber nicht gerechnet hatte, war der Aufschrei der Community. Wie man denn auf die Idee käme, das so naheliegende <code>@if</code> zu verwerfen, und einen Kniefall vor einem dahergelaufenen Toolfuzzi zu machen? „Tools kommen und gehen, Standards sind für die Ewigkeit“, wurde angeführt, also habe sich doch SASS gefälligst zu bewegen und der Spec Platz zu machen. Und weil die Änderung nicht die Benutzer, sondern die Autoren betrifft, ist das doch alles kein Thema. Schnell mal den Replace auf die Codebasis, SASS updaten, und gut ist. Höre ich da ein leises Mimimi? Pah! Nun gut, Lea Verou hat es freundlicher formuliert.</p> <p>Das ignoriert natürlich den Umstand, dass SASS nicht irgendein zusammengefrickeltes Tool mit 13 Anwendern ist. Es ist 4 Jahre älter ist als der erste CSS-3 Draft, der <code>@media</code>-Featurequeries und eine <code>@supports</code>-Regel einführte. Bei SASS kam damals niemand auf die Idee, dass 2021 ein erster Working Draft für CSS-Bedingungen mit <code>@when</code> (oder <code>@if</code> oder <code>@on</code> oder <code>@case</code> oder was auch immer) veröffentlicht werden würde. Und es ignoriert den Umstand, dass der größte Teil professionell erstellter Webseiten CSS Präprozessoren wie SASS verwendet. Das Mimimi wäre also eher ein Hurrikan.</p> <p>Gut, die Diskussion zu <code>@if</code> vs <code>@when</code> ist etwa 5 Jahre älter, wie Tab Atkins in einem der Zank-Threads zu diesem Thema schrieb, aber dennoch kann man von SASS nicht erwarten, so weit in die Zukunft zu schauen. Viellecht <strong>hätte</strong> man erwarten können, dass SASS nicht den "Namensraum" der @-Regeln in Beschlag nimmt und %-Regeln statt @ Regeln verwendet. Die Diskussionen dazu wirken allerdings teilweise so, als ginge es vor allem ums Rechthaben, und nicht darum, eine praktische Lösung zu finden.</p> <p>Werden wir nun als Partner für <code>@else</code> ein <code>@when</code> bekommen? Oder doch ein <code>@if</code>? Werden SASS-User einen globalen Search&Replace auf ihre Codebasis machen müssen, um <code>@if</code> durch <code>@-if</code> zu ersetzen? Oder gar eine Option, um <code>@if</code> durch <code>%if</code> zu ersetzen? In den Diskussions-Threads ist es stiller geworden, und bislang steht in der CSS Conditionals 5 Spec immer noch ein <code>@when</code>.</p> <p>Aber bisher hat es auch noch kein Browserhersteller unternommen, mit der Implementierung zu beginnen. Bei Chromium, Mozilla und Webkit existieren Implementierungstickets, aber bei keinem steht etwas von "Arbeit begonnen". Wir können uns nur wünschen, dass der Streit bald geklärt wird und @else endlich erfährt, wozu sie die Alternative liefern darf.</p> <p><strong>Quellen</strong></p> <ul> <li><a href="https://www.w3.org/TR/css-conditional-5/" rel="nofollow noopener noreferrer">CSS Conditionals Level 5 Spezifikation</a></li> <li>Kingsley Lubahn auf blog.logrocket.com: <a href="https://blog.logrocket.com/extending-css-when-else-chains-first-look/" rel="nofollow noopener noreferrer">Extending CSS when/else chains: A first look</a></li> <li><a href="https://tabatkins.github.io/specs/css-when-else/" rel="nofollow noopener noreferrer">Tab Atkins erste Idee zu @when und @else</a> und <a href="https://github.com/w3c/csswg-drafts/issues/112" rel="noopener noreferrer">eine Diskussion</a> dazu.</li> <li>Sie führt zum <a href="https://github.com/w3ctag/design-principles/issues/335" rel="noopener noreferrer">Streit um's @when</a> – Lea Verou vs Tab Atkins (Google) und Natalie Weizenbaum (SASS)</li> </ul> https://forum.selfhtml.org/self/2024/feb/18/neueste-version-von-lampp-lokal-installiert-zugriff-auf-lokale-webdateien-funktioniert-nicht-403-seite Yadgar yazdegird@gmx.de 2024-02-18T14:32:51Z 2024-02-18T14:32:51Z Neueste Version von LAMPP lokal installiert... Zugriff auf lokale Webdateien funktioniert nicht (403-Seite) <p>Hi(gh)!</p> <p>Nach einer umfassenden Linux-Neuinstallation versuche ich mein privates Webprojekt (http://www.bergisch-afghanistan.de/khyberspace) auch lokal wieder ans Laufen zu bringen... habe also einen Ordner "khyberspace" in /var/lampp/htdocs/ erstellt, dort alle Rechte rekursiv auf 777 gesetzt und anschließend meine Projektdaten dort hineinkopiert... den Apache- und MariaDB-Server gestartet... aber wenn ich localhost/khyberspace/ eingebe kommt die im Betreff genannte Fehlerseite!</p> <p>Das "Khyberspace"-Webprojekt hat eine index.html, daran kann es also nicht liegen...</p> <p>Bis bald im Khyberspace!</p> <p>Yadgar</p> https://forum.selfhtml.org/self/2024/feb/16/input-textfeld-soll-so-breit-sein-wie-die-maximale-zeichenzahl Linuchs 2024-02-16T14:13:37Z 2024-02-16T14:13:37Z input-Textfeld soll so breit sein wie die maximale Zeichenzahl <p>Moin,</p> <p>sämtliche meiner Input-Felder haben die font-family monospace.</p> <p>Nun könnte man annehmen, dass ein Zeichen 1em breit ist. Wenn ein Feld 50 Zeichen aufnehmen kann, möchte ich max-width:50em setzen.</p> <p>Das klappt gar nicht:</p> <p><a href="/images/429469ba-ccd4-11ee-937b-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/429469ba-ccd4-11ee-937b-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <pre><code class="block language-css"><input required type = <span class="token string">"text"</span> id = <span class="token string">"titel_input"</span> name = <span class="token string">"titel"</span> title = <span class="token string">"titel (varchar 50)"</span> maxlength = 50 style = <span class="token string">"font-family:monospace;max-width:50em;"</span> value = <span class="token string">"[titel]"</span> placeholder = <span class="token string">"Titel max. 50"</span> /> </code></pre> <p>Das Feld soll in derselben Zeile stehen wie sein label (12em). Ohne diese max-width klappt das auch, ist aber ebenfalls breiter als 50 Zeichen.</p> <p><a href="/images/ceda27d4-ccd4-11ee-b079-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/ceda27d4-ccd4-11ee-b079-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Hab'sauch mit size=50 versucht, aber calc( 100% - 13em ) ist stärker, das Feld ist zu lang und gaukelt freie Stellen vor.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/17/logo-bleibt-beim-seiten-verkleiner-nicht-an-seinem-platz Mick62 2024-02-17T17:19:34Z 2024-02-17T17:19:34Z Logo bleibt beim Seiten verkleiner nicht an seinem Platz <p>Mir ist gerade aufgefallen, dass ich ein Problem mit der Seite meiner Kneipe habe. Und zwar wandert das Logo in der Mitte, beim Aufziehen und verleinern der Seite, hin und her springt.</p> <p>das css</p> <pre><code class="block">/*------------------------- ________section gude_______ ---------------------------*/ #welcome{ display: flex; flex-direction: column; align-items: center; margin-top: 0vw; height: 50vh; background-image: url(../images/beer2.jpg); } #welcome>img{ width: 25vw; margin:0rem; } #welcome>h1{ font-family: Verdana, Geneva, Tahoma, sans-serif; color: rgb(77, 67, 100); margin-top: 7vw; } .flex-container { display: flex; height: 40vh; width: 100%; box-sizing: border-box; } .container { display: flex; justify-content: space-between; margin: auto; margin-bottom: 40px; width: 100%; } .box1 { position: relative; min-width: 40%; text-align: center; padding: 20px; border: none; background-color:transparent; } .box2 { position: relative; min-width: 40%; text-align: center; padding: 20px; border:none; background-color:transparent; } @media only screen and (max-width: 900px) { #welcome { /* height: 55vh; */ background-image: url(../images/beer2_th.jpg); } #welcome>img{ width: 42vw; margin:0vw; } #welcome>h1{ font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:larger; color: rgb(31, 23, 46); margin-top: 10vw; } .container { flex-direction: column; /* Änderung: Auf Stapelrichtung ändern */ } .box1, .box2 { max-width: 100%; /* Änderung: Vollständige Breite für kleinere Bildschirme */ margin-left: 0; margin-right: 0; font-size: small; background-color: transparent; } } @media only screen and (max-width: 600px) { #welcome { /* height: 55vh; */ background-image: url(../images/beer2_th.jpg); } #welcome>img{ width: 52vw; margin:8vw; } #welcome>h1{ font-family: Verdana, Geneva, Tahoma, sans-serif; font-size:larger; color: rgb(31, 23, 46); margin-top: 10vw; } } </code></pre> <p><a href="https://www.miflo.de/test/index.html" rel="nofollow noopener noreferrer">die Seite zu probieren hier</a></p> https://forum.selfhtml.org/self/2024/feb/14/pwa-auf-ios-17-4beta-mit-ungewisser-zukunft Felix Riesterer https://felix-riesterer.de 2024-02-14T12:29:33Z 2024-02-14T12:29:33Z PWA auf iOS 17.4beta mit ungewisser Zukunft <p>Liebe Mitlesende,</p> <p>gerade bei Heise gelesen: <a href="https://heise.de/-9627974" rel="nofollow noopener noreferrer">Web-Apps außer Funktion: iOS 17.4 Beta bereitet Entwicklern große Sorge</a></p> <p>[Edit]<a href="https://glm.io/182255" rel="nofollow noopener noreferrer">Golem.de bestätigt</a>[/Edit]</p> <p>Mir gefällt nicht, was Apple da treibt. Ist ja schon höchst fragwürdig, warum man dort bisher keine andere Browser-Engine neben WebKit geduldet hat - und die noch nicht einmal auf dem immer neuesten Stand hält! OS-Upgrade, damit eine Browser-Engine auf eine neue Version kommt? Seriously?</p> <p>Bleibe weiter ein Apple-Gegner.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2024/feb/09/suche-webhosting Linuchs 2024-02-09T09:49:56Z 2024-02-09T09:49:56Z Suche Webhosting <p>Moin,</p> <p>bitte um Empfehlungen für ein Webhosting-Paket für meine private Homepage mit Mail-Adresse, PHP, MySQL.</p> <p>Budget ist 50 € jährlich.</p> <p>Danke schon mal.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/16/self-wiki-offline Matthias Scharwies mscharwies@selfhtml.org 2024-02-16T06:05:35Z 2024-02-16T08:44:46Z SELF-Wiki offline <p>Guten Morgen!</p> <p>Seit einer halben Stunde ist das Wiki offline.</p> <p>Dedlfix ist verständigt.</p> <p>Hoffen wir, dass es zeitnah gefixt werden kann.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/feb/15/seitenkontakte-zahlen-weiterleitung Harrywood info@harrywood.de http://www.harrywood.de 2024-02-15T03:41:44Z 2024-02-15T03:41:44Z Seitenkontakte zählen, Weiterleitung <p>Ich habe eine Frage zum Thema Kontaktzählung einer Seite nach Weiterleitung.</p> <p>Problem: Ich möchte von einer bestehenden Seite auf eine Seite einer anderen Domain weiterleiten, natürlich mit Genehmigung des "Opfers". Zweck ist die Erfassung der Kontakte, die über die Weiterleitung per Link per Klick entstehen. Die Idee: zwischen die Startseite und die Zielseite soll eine sog. Nullseite geschaltet werden, die nur zur Zählung der Kontakte dient. Das könnte ich z.B. eine Zählfunktion per "eXTReMe-Tracking" legen, die Seite wird gleichzeitig auf die Zielseite geschaltet per "0" oder höher, sodass der Betrachter die Schaltung nicht bemerkt. Es wird also nur die Zählseite erfasst, nicht die Zielseite selbst. Das dient der Datensicherheit, denn die Zielseite wird ja nicht "angefasst". Frage: Kann das als laienhafte Idee funktionieren, gibt es doch rechtliche Bedenken, oder gibt es für einen reine HTML-Kenner elegantere Lösungen, die beim Provider keine Gebühren kosten? Einen kurzen Stand über meine "Kenntnisse" soll die o.g. Homepage geben. Etwas anderes als HTML habe ich nie gelernt, sorry! </p> https://forum.selfhtml.org/self/2024/jan/27/problem-wohl-schon-behoben-warnung-domain-fritz-box-ist-in-unbekannten-handen Raketenwilli 2024-01-27T15:13:42Z 2024-01-27T15:13:42Z (Problem wohl schon behoben) Warnung: Domain fritz.box ist in unbekannten Händen <p><a href="https://www.heise.de/news/Verwirrend-Internet-Domain-fritz-box-zeigt-NFT-Galerie-statt-Router-Verwaltung-9610149.html" rel="nofollow noopener noreferrer">https://www.heise.de/news/Verwirrend-Internet-Domain-fritz-box-zeigt-NFT-Galerie-statt-Router-Verwaltung-9610149.html</a></p> <p>Besitzer einer Fritzbox sollten höllisch aufpassen, denn die Sache birgt zwei Gefahren:</p> <ul> <li>Wenn man unterwegs ist und den Link oder Favorit auf <a href="https://fritz.box" rel="nofollow noopener noreferrer">https://fritz.box</a> benutzt: Vortäuschen des Logins in die Fritzbox, Abgreifen von Benutzername und Passwort.</li> <li>in der Fritzbox manuell oder per DHCP registierte Geräte (Rechner, Drucker, ...) werden als „RECHNERNAME.fritz.box“ registriert: Auch hier hätte, bei vorliegender Schädingungsabsicht, ein Angreifer „viele schöne Möglichkeiten“.</li> </ul> <p>Bis eben sah die Analyse der DNS-Auflösung noch so aus:</p> <pre><code class="block">dig fritz.box @1.1.1.1 ; <<>> DiG 9.18.19-1~deb12u1-Debian <<>> fritz.box @1.1.1.1 ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 7543 ;; flags: qr rd ra; QUERY: 1, ANSWER: 5, AUTHORITY: 0, ADDITIONAL: 1 ;; OPT PSEUDOSECTION: ; EDNS: version: 0, flags:; udp: 1232 ; EDE: 3 (Stale Answer) ; EDE: 22 (No Reachable Authority): (time limit exceeded) ;; QUESTION SECTION: ;fritz.box. IN A ;; ANSWER SECTION: fritz.box. 30 IN CNAME site.my.box. site.my.box. 30 IN A 18.215.42.147 site.my.box. 30 IN A 34.232.152.68 site.my.box. 30 IN A 52.20.143.163 site.my.box. 30 IN A 3.221.134.22 </code></pre> <p>Das whois lieferte:</p> <pre><code class="block">Domain Name: FRITZ.BOX Registry Domain ID: D426926400-CNIC Registrar WHOIS Server: whois.namesilo.com Registrar URL: https://www.namesilo.com Updated Date: 2024-01-22T23:06:21.0Z Creation Date: 2024-01-22T23:06:20.0Z </code></pre> <p><strong>Problem behoben?</strong></p> <p>Inzwischen sind beide (DNS-Namensauflösung und Whois-Daten wieder sauber. DNS-Server in Internet lösen den Name nicht mehr auf, der Whoi)s-Eintrag wurde gelöscht.</p> <p><strong>Versursacht bzw. ermöglicht hat das aber AVM.</strong> Denn diese Firma hätte spätens als die TLD „.box“ vergeben wurde eben die Domain „fritz.box“ registrieren <a href="https://en.wikipedia.org/wiki/Special-use_domain_name" rel="nofollow noopener noreferrer">oder besser noch alle Fritz-Boxen per Update auf eine für solche Zwecke reservierte TLD wie „.home“ oder „.private“ umstellen sollen</a>.</p> https://forum.selfhtml.org/self/2024/feb/12/selfmade-homepage-fur-ein-grosses-projekt Cowreline https://cowreline-plantage.com/ 2024-02-12T21:27:25Z 2024-02-12T21:27:25Z Selfmade Homepage für ein großes Projekt <p>Hallo,</p> <p>es geht hierbei um mehrere Kleinigkeiten die ich erfragen muss. Werde es aber nach und nach tun.</p> <p>Darum meine erste frage:</p> <p>Ich habe ein Account bei Ionos und php 8.2 im webhost. Dennoch kann keine PHP Seite angezeigt werden.</p> <p>wie kann ich das ändern?</p> <p>Danke im voraus. Liebe grüße, Cowreline~</p> https://forum.selfhtml.org/self/2024/feb/10/css-hilfe-benotigt Passwort 2024-02-09T23:19:18Z 2024-02-09T23:19:18Z CSS Hilfe benötigt <p>Hallo</p> <p>Ich habe aktuell ein (vermutlich) CSS Problem mit einer Seite. Es geht um das Titelbild. In diesem Titelbild befindet sich ein Text. Auf einem grossen Monitor sieht das alles gut aus, aber auf dem schmalen Handybildschirm ist der Text gequetscht. Da ich mich in CSS nicht gut auskenne, hoffe ich, dass Ihr mir helfen könnt </p> <p>Das Titel-Hintergrundbild wird im header-Tag aufgerufen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>d-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Titel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> T<span class="token entity named-entity" title="&ouml;">&ouml;</span>sstal spielt <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Untertitel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Das Spiele-Wochenende im T<span class="token entity named-entity" title="&ouml;">&ouml;</span>sstal <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> </code></pre> <p>Und der dazu passende CSS Code ist der folgende:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'<?= RESSOURCE_URL ?>/img/game-340574_1280.jpg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 30vh<span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Titel</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 8vh<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Lucida Handwriting"</span><span class="token punctuation">,</span> <span class="token string">"Brush Script MT"</span><span class="token punctuation">,</span> Cursive<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 6em<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> oblique<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.Untertitel</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 15vh<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Lucida Handwriting"</span><span class="token punctuation">,</span> <span class="token string">"Brush Script MT"</span><span class="token punctuation">,</span> Cursive<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> oblique<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p>Wie es dann aussieht: <a href="/images/9cf1cad0-c7a0-11ee-a8a6-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/9cf1cad0-c7a0-11ee-a8a6-9c6b00263d9f.jpg?size=medium" alt="So sieht das auf dem grossen Monitor aus" loading="lazy"></a> So sieht das auf dem grossen Monitor aus</p> <p><a href="/images/f746cb16-c7a0-11ee-afbf-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/f746cb16-c7a0-11ee-afbf-9c6b00263d9f.jpg?size=medium" alt="Ab hier kommts schon zu einem Seitenumbruch, obwohl an den Seiten noch Platz wäre." loading="lazy"></a> Ab hier kommts schon zu einem Seitenumbruch, obwohl an den Seiten noch Platz wäre.</p> <p><a href="/images/053f41da-c7a1-11ee-abaf-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/053f41da-c7a1-11ee-abaf-9c6b00263d9f.jpg?size=medium" alt="So ungefähr sieht es am Handy aus." loading="lazy"></a> So ungefähr sieht es am Handy aus.</p> <p>Ich dachte eigentlich, dass die Schrift mit kleiner werdendem Bereich auch kleiner wird, oder hängt das nur von der Höhe ab?</p> <p>Besten Dank falls Ihr eine Lösung parat habt. Die Screenshots haben jeweils Original-Grösse.</p> https://forum.selfhtml.org/self/2024/feb/13/webseite-testen-und-seo-aber-noch-nicht-online dergumbl 2024-02-13T14:58:42Z 2024-02-13T14:58:42Z Webseite testen und seo aber noch nicht online? <p>Hallo</p> <p>Ich bin schon lange auf selfhtml unterwegs und finde die Seiten sehr gut und hilfreich. Hat mir sehr beim Einstieg in die Programmierwelt geholfen. Nun habe ich Fragen.</p> <p>Wie kann ich bei einer Webseite die Ladezeiten und SEO testen, bevor sie Online geht.</p> <p>Git es dafür Möglichkeiten?</p> <p>Und gibt es überhaupt die Möglichkeit eine Webseite zu hosten ohne das diese Online ist? Damit man diese in realen Bedingungen testen kann. z.B. mit Smartphone und mobilen Geräten.</p> <p>Vielen Dank</p> https://forum.selfhtml.org/self/2024/feb/12/grid-fester-offset-zu-fr-breitenangabe Rolf B 2024-02-12T19:27:24Z 2024-02-12T19:27:24Z Grid, fester Offset zu fr-Breitenangabe? <p>Hallo alle,</p> <p>ich hab da eine Liste:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Block 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Block 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Block 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Die Elemente sind als Grid nebeneinandergesetzt</p> <pre><code class="block language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.grid li</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding-block</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die 50px im Padding sind symbolisch für's Beispiel.</p> <p>Nun möchte ich das erste und das dritte List Item "anspitzen". Das kann ich mit ::before/::after und geschickter Border machen, aber das führt ggf. zu Rundungsfehlern und einer feinen Lücke zwischen li und ::after. Bäh.</p> <p>Darum hatte ich die alternative Idee mit clip-path. Wie gesagt, die 50px sind symbolisch, eigentlich ist's ein var(), und das würde hier alles aufblähen.</p> <pre><code class="block language-css"><span class="token selector">.grid li.a</span> <span class="token punctuation">{</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>0% 50%<span class="token punctuation">,</span> 50px 0%<span class="token punctuation">,</span> 100% 0%<span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 50px 100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.grid li.c</span> <span class="token punctuation">{</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>0% 0%<span class="token punctuation">,</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 50px<span class="token punctuation">)</span> 0%<span class="token punctuation">,</span> 100% 50%<span class="token punctuation">,</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 50px<span class="token punctuation">)</span> 100%<span class="token punctuation">,</span> 0% 100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> -50px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das Padding ist nötig, damit der Inhalt nicht in den Pfeilbereich hineinragt. Dadurch wird der Inhaltsbereich des li aber schmaler. Interessanterweise bewirkt die negative Margin-Angabe, dass der betreffende li-Rand aus der Gridzelle hinausgezogen wird UND das li um die 50px breiter wird. Die Gridzellen an sich bleiben gleich breit.</p> <p>Aber dieser Margin scheint mir ein blöder Hack, der eher zufällig als absichtlich funktioniert, und ich frage mich, wie ich dem Grid korrekt sage, dass die erste und letzte Spalte die Breite "calc(50px + 1fr)" bekommen sollen. Hinschreiben kann ich das so nicht, das ist wohl ungültige Syntax.</p> <p><a href="https://jsfiddle.net/Rolf_b/xu3zre6w/" rel="noopener noreferrer">Anschauungsmaterial</a>, etwas komplexer…</p> <p>Oder geht's nicht anders als so?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/feb/03/ruckruf-wegen-zu-kleiner-schrift JürgenB https://www.j-berkemeier.de 2024-02-03T08:56:50Z 2024-02-03T08:56:50Z Rückruf wegen zu kleiner Schrift <p>Hallo,</p> <p>zur Info: <a href="https://www.spiegel.de/auto/tesla-ruft-millionen-autos-zurueck-wegen-zu-kleiner-schrift-a-cb202a81-a491-4ef3-acec-c132953ba26b" rel="nofollow noopener noreferrer">https://www.spiegel.de/auto/tesla-ruft-millionen-autos-zurueck-wegen-zu-kleiner-schrift-a-cb202a81-a491-4ef3-acec-c132953ba26b</a></p> <p>Ich bin gespannt, wann die ersten Webseiten wegen zu kleiner Schrift zurückgerufen werden .</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2024/jan/27/technik-der-strassenmusik-konnen-zwei-quellen-einen-bluetouth-lautsprecher-speisen Linuchs 2024-01-26T23:58:37Z 2024-01-26T23:58:37Z Technik der Straßenmusik: Können zwei Quellen einen Bluetouth Lautsprecher speisen? <p>Moin Freaks,</p> <p>so langsam nähere ich mich meinem Traum, Straßenmusik zu machen.</p> <p>Da wäre ein Laptop (oder ein Tablet), das die Melodie per Bluetooth auf einen aktiven Lautsprecher gibt.</p> <p><a href="/images/79bb7c9a-bca7-11ee-a608-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/79bb7c9a-bca7-11ee-a608-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Mein ergänzender Gesang wäre als akustische Ergänzung laut genug.</p> <p>Aber die Mundharmonika bräuchte Verstärkung. Ich weiß noch nicht wie, aber ist es möglich, sie als ergänzende Quelle auf denselben Bluetooth-Lautsprecher zu geben?</p> <p>Wenn das Tablet die „Kapelle“ ist, kann ich dann das Smartphone als Mikrofon nutzen?</p> <p>Wie machen das Einmann-Kapellen?</p> <p>Bisher meinte ich, dass Bluetooth eine 1:1 Verbindung ist.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/feb/10/click-handler-fur-tabellenspalte-ausser-thead-tfoot MudGuard http://www.andreas-waechter.de/ 2024-02-10T10:45:00Z 2024-02-10T10:45:00Z Click-Handler für Tabellenspalte (außer thead/tfoot) <p>Hi,</p> <p>ich habe eine Tabelle mit mehreren TBody darin, die jeweils mehrere tr zusammenfassen.</p> <p>Ich hätte jetzt gerne auf einer Spalte einen Click-Handler, der dann Daten aus der betroffenen Zeile braucht.</p> <p>Wie ist das sinnvollste Vorgehen?</p> <p>onclick in jede Zelle der Spalte durch php reingenerieren (nur innerhalb der tbody-Elemente, nicht im thead/tfoot), dabei die Daten für die handler-Funktion gleich als Parameter übergeben</p> <p>Selbiges, aber nicht per PHP, sondern per Javascript im Browser einmal über alle Zellen der betroffenen Spalten gehen und den passenden Funktions-Aufruf samt Parametern reingenerieren</p> <p>EINEN Clickhandler auf der Tabelle, der sich dann anhand des targets die betroffene Zelle und dann über parent die betroffene Zeile raussucht. Dann müßte ich noch rauskriegen, ob der Klick überhaupt die richtige Spalte getroffen hat. *)</p> <p>Gibt's noch ne bessere Variante?</p> <p>(ich brauch keinen fertigen Code, nur mal Aussagen dazu, wie Ihr das angehen würdet)</p> <p>*) ob die richtige Spalte getroffen wurde, kann ich nicht am Inhalt erkennen, der kann bei mir auch leer sein (und der Inhalt anderer Spalten auch). Da muß ich wohl gucken, das wievielte Kind der Zeile das Target ist - verbundene Zellen hab ich zum Glück nicht, so daß das wenigstens zuverlässig sein sollte - Spalten kommen auch eher nicht dazu - nur Zeilen werden es immer mehr …</p> <p>PS: ist nur für mich, also kein Problem mit dem Click auf td wg. accessability ...</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2024/jan/29/frage-zum-wiki-artikel-counter nix 2024-01-29T12:10:24Z 2024-01-29T12:10:24Z Frage zum Wiki-Artikel „counter()“ <p>Die Preisfrage lautet: wer zählt (hier; s. u.) richtig? Schnell ein Stück heruasgeschnittener und auf Wesentliches gekürzter Quelltext:<br> Stylesheet:</p> <pre><code class="block">body { &:not(:has(:target)), &:has(p.default:target) { #extra { display: none; } #default { display: block; } } &:has(p.extra:target) { #extra { display: block; } #default { display: none; } } > article { counter-reset: total; &::after { color: purple; font-size: x-small; font-family: fantasy; content: "— [" counter(total) "] —"; }}} body:has(.extra:target) { & li.extra { display: inline; }} ul { display: contents; } li { list-style-type: none; } name-group { display: inline; counter-reset: nameIndex; li::after { display: inline-block; counter-increment: nameIndex; content: "(" counter(nameIndex) ")"; vertical-align: sub; }} article { display: flex; flex-flow: row wrap; li { display: inline; &:not(.Alias) { counter-increment: total; } &.extra { display: none; } }} </code></pre> <p>HTML:</p> <pre><code class="block"><!DOCTYPE html> <html><head><link rel="stylesheet" type="text/css" href="index.css" /></head> <body> <header> <p id="default" class="default"><a href="#extra">Basis-Info</a></p> <p id="extra" class="extra"><a href="#default">Erweiterte Infos</a></p> </header> <article> <ul> <li class="default"><a href="Adb….html">Ade…</a></li> <name-group> <li class="default"><a href="Ade….html">Ade…</a></li> <li class="default"><a href="Ade….html">Ade…</a></li> </name-group> <li class="default"><a href="Akr….html">Akr…</a></li> <li class="default"><a href="Ale….html">Ale…</a></li> </ul> <ul> <name-group> <li class="extra"><a href="Bell….html">Bel…</a></li> <li class="default"><a href="Bell….html">Bel…</a></li> </name-group> <li class="default"><a href="Bip….html">Bip…</a></li> </ul> </article> </body> </html> </code></pre> <p>Sprich: eine Art Katalog(inhaltsverzeichnis), das beim Klicken auf den Header ggf. mehr Infos ausspuckt.<br> Das Problem aber: bei den Indizes (name-group li::after) sind sie sich noch einig, aber beim Aufklappen zählt Firefox (IMO korrekt) hoch, Safari ignoriert die Extra-Einträge, zählt sie nicht (article::after).</p> <p>BTW: display: hidden und Screen-Reader … das Verstecken von Infos stellt für die eigentlich welches Problem dar? Sehende sehen nix, was dann auch nicht vorgelesen wird? Ich kenne solche Gerätschaften ja nicht, kam nur beim Nachdenken darüber ins Stirnrunzeln …</p> https://forum.selfhtml.org/weblog/2024/jan/01/trend-2024-eine-eigene-webseite Matthias Scharwies mscharwies@selfhtml.org 2024-01-01T12:50:52Z 2024-01-01T12:50:52Z Trend 2024: eine eigene Webseite! <p>2023 stand unter der Frage, zu welchem sozialen Netzwerk man denn nun gehen solle.</p> <p>SELFHTML war schon vorher bei <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">Mastodon</a> im <a href="https://wiki.selfhtml.org/wiki/Fediverse" rel="nofollow noopener noreferrer">Fediverse</a> präsent, aber leider nicht sehr aktiv. Ich gelobe dort regelmäßig Neuigkeiten aus der Webwelt dort hinauszutröten.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Ein bisschen erstaunt war ich, dass einige, die vorher den Umstieg auf das Fediverse propagierten, plötzlich Einladungen zum <em>„blauen Himmel“</em> versprachen.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> Ist das Fediverse nun die Zukunft oder gibt es etwas Besseres?</p> <p>Nachteil von Mastodon ist z.B. die fehlende Möglichkeit Text zu formatieren, selbst Markdown ist (noch) nicht möglich. Andererseits hat sich die anfängliche Leere im täglichen Feed mittlerweile mit Katzen- und Urlaubsbildern gefüllt. </p> <h3>Die Alternative</h3><p>Bereits im letzten Jahr schrieb <a href="https://bildung.social/@Daojoan@mastodon.social/111663265437904903" rel="nofollow noopener noreferrer">Joan Westenberg auf Mastodon</a>:</p> <div style="padding-left:2em"> <em>Own your own website. Own your mailing list. Own your newsletter. Own your blog and prioritise your RSS feed. </em> <p><em>This is the stuff that works in the long term. </em></p> <p><em>Chasing virality on every new shiny platform is a waste of time.</em></p> </div> <p>Und so wie die Seiten von StudiVZ längst im Orkus sind, werden auch andere Social Media Kanäle irgendwann mit Gebührenmodellen überzogen oder unvermittelt abgeschaltet, so dass eine eigene Webseite für Sicherheit sorgt, da sie ja in der eigenen Hand ist.</p> <p><a href="https://matthiasott.com/notes/2024-the-year-of-the-personal-website" rel="nofollow noopener noreferrer">Matthias Ott schrieb heute morgen </a></p> <div style="padding-left:2em"> <em> Ihre persönliche Website ist ein Ort, der Ihnen große kreative Freiheit und Kontrolle bietet. Sie ist ein Ort, an dem Sie schreiben, erstellen und teilen können, was immer Sie möchten, ohne jemanden um Erlaubnis fragen zu müssen. Sie ist auch der perfekte Ort, um neue Dinge zu erforschen und auszuprobieren, z. B. verschiedene Arten von Beiträgen, verschiedene Stile und neue Webtechnologien. Es ist Ihr Spielplatz, Ihre Plattform, Ihre persönliche Ecke im Web.</em> <small>(von mir ins Deutsche übersetzt)</small> </div> <h3>Fazit</h3><p>Eine Präsenz im <a href="https://wiki.selfhtml.org/wiki/Fediverse" rel="nofollow noopener noreferrer">Fediverse</a> ist gut, noch besser ist es jedoch, mit einer eigenen Webseite und einem eigenen Blog die volle Kontrolle über die Daten, den Inhalt und auch das Design zu erhalten!</p> <p>Oft ist ja bereits ein Webauftritt vorhanden, der aber mittlerweile in die Jahre gekommen ist. Hier stellt sich die Frage, ob sich ein Redesign lohnt oder völlig neu angefangen werden sollte.</p> <h3>Unser Ziel für 2024</h3><p>SELFHTML zweifelte in den letzten Jahren ein bisschen an sich selbst und an unserem <em>mission statement</em> <a href="https://wiki.selfhtml.org/wiki/SELFHTML#Everyone.E2.80.99s_a_publisher" rel="nofollow noopener noreferrer">Everyone’s a publisher</a>. Allerdings hatten sich in den letzten Tagen im Forum, auf Discord und per Mail (<em>„Ich habe seit Ewigkeiten nichts mehr gemacht und möchte jetzt mit der Frage nach einem aktuellen Editor nicht als Dummie dastehen!</em>“) Neu- und Wiedereinsteiger mit Fragen gemeldet.</p> <p>Anlass für uns in diesem Jahr das <a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F" rel="nofollow noopener noreferrer"><strong>Wie fange ich an?</strong></a> in unserem Wiki zu überprüfen und gegebenfalls zu aktualisieren:</p> <ol> <li><a href="https://wiki.selfhtml.org/wiki/Wie fange ich an?/der richtige Code-Editor">Welchen Editor sollte ich verwenden?</a> <li><a href="https://wiki.selfhtml.org/wiki/Wie fange ich an?/von der Idee zum Projekt">von der Idee zum Projekt</a><br>eigene HTML-Seiten, Seitengeneratoren oder ein CMS?<ul><li> Hugo, Eleventy und …</li></ul> <li><a href="https://wiki.selfhtml.org/wiki/Wie fange ich an?/Web-Hosting">Web-Hosting</a> <li><a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Templates">PHP/Tutorials/Templates</a><br>(Teile einer Webseite auslagern) <li><a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Einen_RSS-Feed_auslesen">PHP/Tutorials/Einen RSS-Feed auslesen</a> <li>…</li> </ol> <p>Weitere Baustellen und Projekte werden sich dann wohl im Laufe des Jahres ergeben!</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Privat löste ich mich von Twitter, Telegram und WhatsApp - unter anderem, um nicht jeden Tag auf zig Kanälen nach Neuem suchen zu müssen, andererseits auch um ein konsequentes Zeichen zu setzen.<br>Ein Bekannter hat seinen Twitter-Account „stillgelegt“, folgt aber noch Donald Trump, der aus der Zahl seiner Follower Kraft und Bedeutung zieht. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Ehemalige Twitter-Funktionäre versuchten durch eine künstliche Verknappung - Interessierte benötigten eine Einladung eines schon bestehenden Mitglieds - Interesse an der Social-Media-Plattform <strong>Blue Sky</strong> zu wecken. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern HTML_go https://xn--audiobibelne-olb.de UND https://kontakt-vs.de 2023-12-19T10:34:52Z 2023-12-19T10:34:52Z Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern <p>Guten Tag miteinander,</p> <p>nach langen Jahren suche ich hier im Forum mal wieder Rat.</p> <p>Es geht um die Navigationsleiste dieser "nur" in HTML und CSS erstellten Website: <a href="https://www.kontakt-vs.de" rel="nofollow noopener noreferrer">https://www.kontakt-vs.de</a>.</p> <p>Ach ja noch was: das CSS hat größtenteils ein Bekannter erstellt, ich kenne mich damit (noch) zu wenig aus. Und Manpower ist rar und ich sollte ja auch mal was dazulernen; also frage ich hier, nachdem ich in der Suche nicht erfolgreich war ...</p> <p>Also: ich hätte gerne, dass der aktiv ausgewählte Navigationsbereich (z. B. <a href="https://www.kontakt-vs.de/kinderarbeit.html" rel="nofollow noopener noreferrer">https://www.kontakt-vs.de/kinderarbeit.html</a> in der gleichen (türkisgrünen) Farbe hinterlegt <strong>bleibt</strong>, bis der Navigationsbereich gewechselt wird. Derzeit geschieht dies ja nur, solange die Maus in der Navigationsposition schwebt; das dürfte wohl in diesem Bereich (ungefähr) der "standard.css"</p> <pre><code class="block">.topnav a:hover { background-color: #169f94; color: black; } .topnav a.active { background-color: #04AA6D; color: white; } </code></pre> <p>zu ändern sein?</p> <p>Vielen Dank für Hilfestellung!</p> <p>Gruß</p> <p>Holger</p> https://forum.selfhtml.org/self/2024/feb/09/inline-und-block-elemente Mel 2024-02-08T23:14:40Z 2024-02-08T23:14:40Z Inline und Block-Elemente <p>Hi zusammen,</p> <p>habe vielleicht eine dumme Frage, da ich aber neu im Business bin: disst mich bitte nicht.</p> <p>Können alle Elemente in Inline und Block-Elemente unterteilt werden?</p> <p>Ich möchte mir gerade so eine Art Spickzettel machen, mit allen HTML-Tags und wollte diese farblich unterteilen, in Inline- und Block-Elemente. Ist das unnötig?</p> <p>In Eurem Wiki sind die Angaben in den Tags nicht gesetzt, darum vermute ich, dass es unnötig ist?</p> <p>VG Melanie</p> https://forum.selfhtml.org/self/2024/feb/08/laptop-akku-anzeige-defekt Peter 2024-02-08T08:13:02Z 2024-02-08T08:13:02Z Laptop: Akku-Anzeige defekt? <p>Hallo Leute,</p> <p>ich habe seit einigen Tagen ein eigenartiges Problem mit meinem Notebook (Voyo V3):</p> <p>Laut der Akkuanzeige von Windows 10 hat der Akku nur noch 0% und lässt sich nicht mehr aufladen. Wenn ich den Laptop vom Strom wegnehme, geht er jedoch nicht sofort aus, was bei dem Akkustand sonst der Fall gewesen wäre.</p> <p>Der Battery-Report (CMD/ »powercfg /batteryreport«) hat keine Angaben zum aktuellen Ladestatus geliefert, die entsprechende Tabellenspalte bleibt leer.</p> <p>Ich gehe davon aus, dass die Ladeanzeige defekt ist. Gibt es eine Möglichkeit, das zu beheben, sollte man den Akku austauschen oder das ganze Gerät? Es ist jetzt sechs Jahre alt und ich würde vermuten, dass eine Neuanschaffung sinnvoller wäre.</p> <p>Beste Grüße, Peter</p> https://forum.selfhtml.org/self/2023/nov/13/alle-bilder-einer-galerie-mit-dialog-methode-offnen gewe gweber@gmx.info https://www.webersite.de 2023-11-13T12:44:57Z 2023-11-13T12:44:57Z alle Bilder einer Galerie mit dialog- Methode öffnen <p>Hallo, es gibt ja die Möglichkeit,ein Bild per JS in einem dialog-Element vergrößert darzustellen:</p> <pre><code class="block">document.getElementById("show-dialog").addEventListener("click", () => { document.getElementById("dialog").showModal(); }); document.getElementById("close-dialog").addEventListener("click", () => { document.getElementById("dialog").close(); }); </code></pre> <p>Das funktioniert bei mir auch .</p> <p>Frage geht das auch mit allen Bildern einer Galerie (in einem array)?</p> <p>Gruß aus Köln Gerhard</p> https://forum.selfhtml.org/self/2024/jan/30/schrift-und-bilder-grosser-in-chrome-als-in-firefox littbarski 2024-01-30T12:27:18Z 2024-01-30T12:27:18Z Schrift und Bilder größer in Chrome als in Firefox <p>Hallo zusammen,</p> <p>ich bin HTML-Laie, würde aber gerne etwas wissen, was ich mich schon ein paar Jahre frage.</p> <p>Wo kann ich ansetzen, um herauszufinden, warum eine (reine) HTML-Seite, in Chrome (und Edge) ganz anders aussieht als in Firefox? Also von der Text-Größe her, und auch die Bilder werden nicht als 100% angezeigt in Chrome, sondern größer.</p> <p>Liegt dies eher an Browser-Einstellungen, oder gibt es in HTML (Font, Style) bestimmte Vorgaben, die in Firefox ganz anders funktionieren als in Chrome?</p> <p>Meine Vermutung wäre HTML, weil ich bei den Einstellungen in Chrome (die es ja durchaus gibt) keinen Erfolg habe bzw. immer nur Teile besser werden.</p> <p>Ich habe für eine Freundin eine Seite erstellt, und seit langer Zeit ist das so, was uns aber erst jetzt auffiel.</p> <p>Danke für jeden Tipp. Und tut mir leid, dass ich alles so laienhaft und mit wenig Informationen darstelle, ich weiß eben wirklich nicht, wo man ansetzen muss (s.o).</p> https://forum.selfhtml.org/self/2024/feb/08/stylesheet-der-homepage-uberschreiben-eingebundenes-include-kontakt-formular sonne 2024-02-08T15:43:32Z 2024-02-08T15:43:32Z Stylesheet der Homepage überschreiben eingebundenes (include) Kontakt-Formular <p>Hallo, ich binde ein Kontakt-Formular per include ein. Leider zerschießt mir dann die stylesheet aus meiner css Datei das Formular. Das Kontakt-Formular ist keine Eigenkreation, ich nutze ein fertiges Skript mit Spam Schutz usw., das eine eigene css Datei mitbringt. Ich könnte jetzt alle identische CSS Klassen aus den Formular und die für meine Homepage suchen und gegebenenfalls umbenennen. Schöner wäre es, wenn es eine Möglichkeit geben würde, dass die include Kontakt.php Datei auch nur die für sie bestimme css Datei nutzt. Ist das möglich?</p> <p>Grüße</p> https://forum.selfhtml.org/self/2024/feb/01/phplist-interne-sprungmarken-funktionieren-nicht Julia 2024-02-01T14:11:02Z 2024-02-01T14:11:02Z phplist: Interne Sprungmarken funktionieren nicht <p>Liebe Gemeinschaft,</p> <p>zur Newsletter-Erstellung nutzen wir in unserer Orga phplist und haben folgendes Problem: Die Sprungmarken, die wir definieren, funktionieren nicht. Wir haben am Anfang ein Inhaltsverzeichnis und die einzelnen Einträge mit einer internen Sprungmarke versehen. Wenn ich mir diese als Test schicke, springt er sonst wo hin, aber nicht zu dem jeweiligen Eintrag!</p> <p>In der Box, die sich in der Umgebung öffnet, steht der Anzeigetext und der Link-Typ ("Anker in dieser Seite"). Darunter steht dann aber "(Keine Anker im Dokument vorhanden)".</p> <p>Im Quellcode sieht es folgendermaßen aus:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token selector">*</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#wrapper</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span>800px<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span>360px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0 auto<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> **Hier beginnt der Inhalt** <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-left</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&rArr;">&rArr;</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>XYZ<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> **Hier steht weiterer Inhalt** <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>XYZ<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> <p>Warum funktioniert das nicht? Es funktioniert mit allen Ankern nicht.Könntet ihr mir bitte helfen? Was müsste in dem Pop-Up vielleicht noch eingestellt werden (wenn man es nicht über den HTML-Code macht)?</p> <p>LG</p> <p>Julia</p> https://forum.selfhtml.org/self/2024/feb/04/bildersuche Connie 2024-02-04T10:29:15Z 2024-02-04T10:29:15Z Bildersuche <p>Hallo,<br> im Internet gibt es die Bildersuche mit z.B. dem G....<br> Gibt es eine ähnliche Möglichkeit, auf dem PC zu suchen?<br> Danke</p> https://forum.selfhtml.org/self/2024/feb/05/listen-value-attribut-und-counters-bug-oder-unverstandenes-feature Rolf B 2024-02-05T14:02:06Z 2024-02-05T14:02:06Z Listen, value-Attribut und counters() - Bug oder unverstandenes Feature? <p>Hallo alle,</p> <p>ich bin gerade etwas erstaunt. Arg erstaunt! Mein eigentliches HTML war umfangreicher, hier ist die minimalistische Version:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Bananen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Äpfel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Birnen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> </code></pre> <p>Diese Liste wird brav 1,7,8 durchnummeriert, aber jetzt füge ich eine counter<strong>s</strong>()-Ausgabe hinzu:</p> <pre><code class="block language-css"><span class="token selector">li::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">' ('</span> <span class="token function">counters</span><span class="token punctuation">(</span>list-item<span class="token punctuation">,</span> <span class="token string">'.'</span><span class="token punctuation">)</span> <span class="token string">')'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Erwartet:</p> <p>1. Bananen (1)<br> 7. Äpfel (7)<br> 8. Birnen (8)</p> <p>Vorgefunden (Edge Chromium v120)</p> <p>1. Bananen (1)<br> 7. Äpfel (1.7)<br> 8. Birnen (1.8)</p> <p>Das heißt: die Value-Eigenschaft hat nicht, wie die Counters- und HTML-Spec schreiben, einen <code>counter-set: list-item 7</code> durchgeführt, sondern einen <code>counter-reset</code> und einen geschachtelten Zähler erzeugt.</p> <p>Das finde ich jetzt gruselig falsch. Für mein Minibeispiel ist's natürlich wurscht, aber wenn man real mit geschachtelten Zählern und dem value-Attribut arbeitet, führt das gefundene Verhalten zu blödsinniger Darstellung.</p> <p>Als Workaround kann ich mit <code>style="counter-set: list-item 7"</code> arbeiten. Dann ist das Ergebnis richtig. Aber das solle ja eigentlich nicht nötig sein.</p> <p>Bevor ich bei Chromium einen Bug poste: Mache ich was falsch? Bringen andere Browser das auch? Ich habe jetzt nur Chromium parat.</p> <p>Fiddle: <a href="https://jsfiddle.net/vcmh3pf7/1/" rel="noopener noreferrer">https://jsfiddle.net/vcmh3pf7/1/</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/feb/02/kein-div-und-kein-p-im-summary-erlaubt-was-tun fietur 2024-02-02T21:52:52Z 2024-02-02T21:52:52Z Kein <div> und kein <p> im <summary> erlaubt - was tun? <p>Hallo.</p> <p>Warum dürfen weder <code><div></code> noch <code><p></code> innerhalb eines <code><summary></code> stehen?</p> <p>"Element div not allowed as child of element summary in this context." lautet die Validator-Meldung hierzu.</p> <p>Auf meiner Seite habe ich eine Vielzahl von <article>-Containern mit folgendem Aufbau:</p> <pre><code class="block"><article> <details> <summary> <img ...> <p>ein paar Zeilen</p> </summary> <p>weiterer Text>/p> <img ...> <p>...</p> </details> </article> </code></pre> <p>Im CSS ist <code>p {padding:1rem;}</code> notiert. Die Bilder sollen (meist) die gesamte Breite einnehmen.</p> <p>Das obenstehende HTML wird zwar wie gewünscht gerendert, ist aber eben nicht Validator-konform.</p> <p>Wenn ich die <code><p></code>-Tags entferne und <code>summary {padding:1rem;}</code> notiere, wird es zwar konform, aber <code><img></code> erhält unerwünschterweise ebenfalls Ränder. <code>summary :not(img)</code> zu notieren, ändert daran nichts (wäre das überhaupt korrekt so?).</p> <p><code><div></code> darf (weil kein phrasing content) ebenfalls nicht notiert werden. Wählt man hilfsweise etwas wie <code><span></code> und weist so einen Rand zu, wird ja nur die erste Zeile eingerückt, was ebenfalls unerwünscht ist - es passt nicht zum Rest.</p> <p>Wie kann ich im <code><summary></code> Text von Grafik getrennt auszeichnen?</p> https://forum.selfhtml.org/self/2024/feb/03/frage-zum-wiki-artikel-vorlage-weblink Rolf B 2024-02-03T13:50:52Z 2024-02-03T13:50:52Z Frage zum Wiki-Artikel „Vorlage:Weblink“ <p>Hallo Wikiautoren,</p> <p>bin ich der einzige, der diese Vorlage sch...recklich misslungen findet?</p> <ul> <li>Sie erzeugt automatisch einen Listeneintrag</li> <li>Die Parameter sind unübersichtlich. Drei bis Sechs UNBENANNTE Parameter?</li> <li>Sie möchte - mutmaßlich - einen Eintrag in einer Linkliste erzeugen, wie er in der Referenzenliste vorkommt. Aber dann wäre eine Vorlage, die ein <ref></ref>-Element erzeugt, wesentlich sinnvoller.</li> </ul> <p>Ich bin jetzt drüber gestolpert, weil Robert das Konstrukt</p> <p><ref>{{Weblink|...}}</ref> verwendet hat und das Listensternchen in der Vorlage Durcheinander stiftet. Darum habe ich das in einfache <ref>...</ref> umgewandelt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/feb/01/frage-zum-wiki-artikel-element-tag-und-attribut Raoul Becke doc--s0-v1@becke.ch https://becke.ch 2024-02-01T20:54:09Z 2024-02-01T20:54:09Z Frage zum Wiki-Artikel „Element,_Tag_und_Attribut“ <p>Im Abschnitt: "Guter HTML-Stil" steht: <em>Elemente, die in HTML auch ohne schließendes Tag notiert werden dürfen (p, th, td, dt, dd, li), werden immer mit schließendem Tag notiert.</em></p> <p>Das Code Beispiel im darunterliegenden Abschnitt: "Semantik - der Inhalt bestimmt die Struktur" folgt ABER nicht dieser Empfehlung:</p> <pre><code class="block"> <li>Lesen <li>Faulenzen <li>Joggen </code></pre> <p>Können die HTML Code Beispiele bitte so angepasst werden dass sie den Empfehlungen in "Guter HTML-Stil" folgen.</p> https://forum.selfhtml.org/self/2024/feb/03/js-css-use-case-fur-clientwidth-und-getboundingclientrect Matthias Scharwies mscharwies@selfhtml.org 2024-02-03T08:04:54Z 2024-02-03T08:04:54Z JS + CSS: Use Case für clientWidth und getBoundingClientRect() <p>Guten Morgen!</p> <p>Wir haben ja schon einige Beispiele für die Ermittlung von Elementgrößen mit JS.</p> <p>Aber alle - auch der Grundlagen-Artikel <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" rel="nofollow noopener noreferrer">Determining the dimensions of elements</a> stellen eigentlich nur vor, <strong>wie</strong>'s geht, nicht, <strong>wann und wo</strong> man es einsetzen sollte.</p> <p>Habt ihr ein Praxisbeispiel, wo man so etwas anwenden kann?</p> <p>[EDIT] Evtl. in Verbindung mit Lazy Loading - Einschweben von Bildern<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> [/EDIT]</p> <p>Und eines für matchMedia?</p> <p>Vielen Dank im Voraus!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://toruskit.com/blog/how-to-get-element-bounds-without-reflow/" rel="nofollow noopener noreferrer">https://toruskit.com/blog/how-to-get-element-bounds-without-reflow/</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/feb/02/frage-zum-wiki-artikel-selfhtml Verzweifelnde Schülerin 2024-02-02T11:36:55Z 2024-02-02T11:36:55Z Frage zum Wiki-Artikel „SELFHTML“ <p>wie bekomme ich die verlinkung zur nächsten Seite weiß</p> https://forum.selfhtml.org/self/2024/jan/31/firefox-soll-auf-dem-tablet-lokale-html-seiten-aufrufen-wie-heissen-die-ordner Linuchs 2024-01-31T20:12:28Z 2024-01-31T20:12:28Z Firefox soll auf dem Tablet lokale HTML-Seiten aufrufen. Wie heißen die Ordner? <p>Moin,</p> <p>meine selbsterstellen HTML-Seiten möchte ich auf dem Android-Tablet anschauen / anhören. Dazu habe ich vom PC (per USB) Dateien überspielt.</p> <p>So sieht der PC das:</p> <p><a href="/images/dc9b9bd6-c073-11ee-829e-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/dc9b9bd6-c073-11ee-829e-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Das Tablet (eigene Dateien) sieht das anders:</p> <p><code>Gerätespeicher > musik > index.htm</code></p> <p>Der Firefox auf dem Tablet kann offenbar die lokalen Dateien nicht suchen, sowas wie [Strg][O] habe ich nicht gefunden.</p> <p>Versuchte Eingaben in die Adresszeile:</p> <p><code>file:///musik/</code> ergibt eine leere Seite</p> <p><code>file:///storage/musik/</code> ebenfalls.</p> <p>Wie könnte es funktionieren?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/31/counter-und-vererbung Rolf B 2024-01-31T08:57:04Z 2024-01-31T08:57:04Z Counter und Vererbung <p>Hallo alle,</p> <p>ausgehend von Nixens Counterei habe ich nochmal versucht, das Wiki zu verbessern, und kratze mich am Kopf. Es ist natürlich wieder mal ein Edge Case, aber trotzdem...</p> <p>Dieses Beispiel:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>tricorder<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>B<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>flux coupler <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>(or coil-spanner?)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>C<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>self-sealing stem bolt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>mit diesem CSS</p> <pre><code class="block language-css"><span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">counter-reset</span><span class="token punctuation">:</span> FOO 17<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li</span> <span class="token punctuation">{</span> <span class="token property">counter-increment</span><span class="token punctuation">:</span> FOO<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#B span</span> <span class="token punctuation">{</span> <span class="token property">counter-reset</span><span class="token punctuation">:</span> FOO 88<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" - "</span> <span class="token function">counters</span><span class="token punctuation">(</span>FOO<span class="token punctuation">,</span> <span class="token string">'/'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">span::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" - "</span> <span class="token function">counters</span><span class="token punctuation">(</span>FOO<span class="token punctuation">,</span> <span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>(-> <a href="https://jsfiddle.net/Rolf_b/dtnkmqyu/" rel="noopener noreferrer">Fiddle</a>)</p> <p>Gemäß Spec sollte der in #B span erzeugte FOO Counter den FOO-Counter aus dem ul-Element überlagern. D.h. eine counters()-Ausgabe innerhalb dieses span-Elements darf zwei Werte zeigen. Außerhalb dieses Span hingegen…</p> <p>Ebenfalls gemäß Spec sollte ein nachfolgendes Geschwisterelement dieses span den FOO-Counter des Elternelements erben. Counter aus dem vorhergehenden Geschwisterelement sollten <strong>nur dann</strong> geerbt werden, wenn es keinen gleichnamigen Zähler im Elternelement gibt (<a href="https://drafts.csswg.org/css-lists/#inheriting-counters" rel="nofollow noopener noreferrer">Inheriting Counters</a>).</p> <p>Das li::after Element im Listenelement #B sollte demnach den FOO Counter aus dem span nicht übernehmen und nur "19" anzeigen. Chrome und Firefox geben mir aber "19/88" aus, d.h. das im span erzeugte FOO wird an seine Geschwisterelemente weitervererbt.</p> <p>Das gezeigte Verhalten entspricht der Aussage im vorherigen Spec-Abschnitt (<a href="https://drafts.csswg.org/css-lists/#nested-counters" rel="nofollow noopener noreferrer">Nested Counters and Scope</a>): Ein Counter gilt für seine Kind-Elemente und seine nachfolgenden Geschwisterelemente.</p> <p>Aber nach meinem Verständnis widerspricht es den formalen Vererbungsregeln der Spec, wie sie in Inheriting Counters aufgeschrieben sind.</p> <p>Ist die Spec da widersprüchlich oder verstehe ich sie nur nicht?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/jan/31/frage-zum-wiki-artikel-was-ist-ein-webformular-3f nix 2024-01-31T21:46:28Z 2024-01-31T21:46:28Z Frage zum Wiki-Artikel „Was_ist_ein_Webformular%3F“ <p><strong>buttons:</strong></p> <p>„… wie das <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Was_ist_ein_Webformular%3F#Buttons" rel="nofollow noopener noreferrer">button</a>-Element verwendet …“ hat einen Link. Und der Link, der führt umgehend „GOTO 0“ aus.</p> <p>Mir scheint, es sollte besser <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/button" rel="nofollow noopener noreferrer">dahin</a> gehen.</p> https://forum.selfhtml.org/self/2024/jan/29/unerklarlicher-fehler-im-php-programm Sara 2024-01-29T21:24:32Z 2024-01-29T21:24:32Z Unerklärlicher Fehler im PHP-Programm <p>Hallo,<br> trotz langer Suche komme ich nicht dahinter, wo der Fehler liegt.<br> Ich setze jetzt meine Hoffnung auf Euch.</p> <p>Meine PHP-Statements:</p> <pre><code class="block language-php"><span class="token keyword">echo</span> <span class="token string double-quoted-string">"*** \$_SERVER['MyAkt_SeitenDir'] = "</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'MyAkt_SeitenDir'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"<br>***<br>"</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>@<span class="token function">opendir</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'MyAkt_SeitenDir'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token constant">PHP_EOL</span><span class="token punctuation">;</span> <span class="token keyword">require_once</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'MyAkt_SeitenDir'</span><span class="token punctuation">]</span> <span class="token operator">.</span> <span class="token string single-quoted-string">'/meta_ind.php'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string single-quoted-string">'Unzulässiger Aufruf: require_once ('</span> <span class="token operator">.</span> <span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'MyAkt_SeitenDir'</span><span class="token punctuation">]</span> <span class="token operator">.</span> <span class="token string single-quoted-string">'/meta_ind.php)'</span><span class="token punctuation">;</span> <span class="token keyword">exit</span><span class="token punctuation">;</span> </code></pre> <p>Obwohl laut Testausgabe $_SERVER['MyAkt_SeitenDir'] vorhanden ist, kommt die nachfolgende Fehlermeldung:</p> <blockquote> <p>*** $_SERVER['MyAkt_SeitenDir' = /home/mydom/htdocs/de/zSeite<br> ***<br> Unzulässiger Aufruf: require_once (/home/mydom/htdocs/de/zSeite/meta_ind.php)</p> </blockquote> https://forum.selfhtml.org/self/2024/jan/31/firefox-bei-ende-sollen-einige-cookies-nicht-geloscht-werden Linuchss 2024-01-31T19:55:20Z 2024-01-31T19:55:20Z Firefox: Bei Ende sollen einige Cookies NICHT gelöscht werden <p>Moin,</p> <p>abends schließe ich den Firefox (Ubuntu), damit der ganze Dreck an Cookies gelöscht wird.</p> <p>Jedoch soll selfhtml ausgenommen sein:</p> <p><a href="/images/b2857738-c071-11ee-bfc1-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/b2857738-c071-11ee-bfc1-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p><a href="/images/5fbf3c68-c072-11ee-b0ff-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/5fbf3c68-c072-11ee-b0ff-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Cookies werden trotzdem gelöscht. Was läuft da schief?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/weblog/2024/jan/31/navigation-alles-inclusive Matthias Scharwies mscharwies@selfhtml.org 2024-01-31T09:40:12Z 2024-01-31T09:40:12Z Navigation - alles inclusive <p>Eigentlich sollten alle Fragen, die es je zu Navigationen geben könnte, bereits in unserer Doku beantwortet worden sein.</p> <p>Allerdings haben sich die Anforderungen über die Jahre immer wieder geändert, sodass es Zeit für eine Bestandsaufnahme und Komplett-Überarbeitung wurde:</p> <ul> <li><strong><a href="https://wiki.selfhtml.org/wiki/Navigation" rel="nofollow noopener noreferrer">Navigation</a></strong> - alles über Menüs und Navigationen</li> </ul> <h3>Konventionen geben Sicherheit!</h3><p>Bereits 2003 gab es in der alten Doku eine <a href="https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm" rel="nofollow noopener noreferrer">Dynamische Navigationsleiste</a>, die folgende Warnung enthielt:</p> <p><em><strong>Beachten Sie:</strong> Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. …</em> <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Aus heutiger Sicht fällt die Schwachstelle sofort auf: Niemand will raten oder nachlesen müssen, um eine Navigation bedienen zu können.</p> <p>So wie der gewohnte Ort für die Taschenlampe in der Schublade an der Haustür sicherstellt, dass ich sie im Falle eines Stromausfalls auch zur Hand habe, verlassen sich gute Webseiten auf <strong>Konventionen, die Anwendern vertraut sind</strong>, damit Webseiten schnell und kom­for­tabel bedient werden können.</p> <p>Solch ein gewohntes <em>Look & Feel</em> berücksichtigt …</p> <ol> <li>die Leserichtung von oben links nach rechts und positioniert die Navigation gut sichtbar.</li> <li>Die aktuelle Seite ist gekennzeichnet und</li> <li>die Linktexte sind klar und verständlich, damit Nutzer schnell und sicher zur gewünschten Seite kommen.</li> </ol> <p>Um eine Navigation übersichtlich zu halten, kann sie zweitrangige Links zunächst verbergen und diese durch eine Benutzerinteraktion sichtbar machen:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC" rel="nofollow noopener noreferrer">Navigation/Dropdown-Menü</a></li> <li><a href="https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC" rel="nofollow noopener noreferrer">Navigation/Flyout-Menü</a></li> </ul> <h3>Dropdown ohne JavaScript?</h3><p>Früher war eine reine CSS-Lösung, die mit :hover aufgeklappt wurde, möglich, heute reicht das nicht mehr!</p> <p>Warum? Heute ist das Netz größer und vielfältiger geworden:</p> <ul> <li>Mehr als die Hälfte der Nutzer surft mit dem Handy oder Tablet. Dort gibt es keine Maus!</li> <li>Sehbehinderte - aber auch Autofahrer und Menschen am Herd - lassen sich Seiten vorlesen.</li> <li>In ihrer Motorik eingeschränkte Menschen - aber auch IT-Profis navigieren lieber mit der Tab-Taste.</li> </ul> <p>CSS-basierte Dropdown-Menüs basierten darauf, dass ein Nutzer einen Link zweifach benutzen konnte:</p> <ol> <li><code>:hover</code> mit der Maus öffnet das zuvor verborgene Submenü</li> <li>ein Klick aktiviert den Link und führt zur neuen URL</li> </ol> <p>Webseiten, die alle die oben erwähnten Nutzer mit einschließen wollen, müssen das trennen. Deshalb benötigt man neben dem Link einen Button, mit dem man das Untermenü per JS öffnen kann. Dies geschieht über das Setzen und Entfernen eine Klasse, die Formatierung übernimmt CSS.</p> <p>Das im überarbeiteten Tutorial vorgestellte Drowpdown-Menü wird Schritt für schritt aufgebaut und erklärt; bietet aber auch eine <a href="https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC#Kopiervorlage_f.C3.BCr_Ungeduldige" rel="nofollow noopener noreferrer"><strong>Kopiervorlage für Ungeduldige</strong></a>. Sie kann in bestehende Seiten eingebunden werden und erweitert eine „normale“ Navigation mit Liste und Unterlisten zu einem zugänglichen Drowpdown-Menü.</p> <hr> <p>BTW: Das oben erwähnte Beispiel aus dem Jahre 2003 war nicht der einzige Versuch einer Dropdown-Navigation. Dieser Screenshot zeigt ein Beispiel aus dem Jahre 2011 mit einer <code>parentNode</code>-Kette, , weil es den IE6 berücksichtigen musste.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p><a href="/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png?size=medium" alt="Screenshot einer Kette von parentNode, weil es den IE6 berücksichtigen musste" title="Screenshot einer `parentNode`-Kette, weil es den IE6 berücksichtigen musste " loading="lazy"></a></p> <p>Hoffen wir, dass unsere 2024er Version auch mehrere Jahre übersteht! </p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm" rel="nofollow noopener noreferrer">Dynamische Navigationsleiste</a> (de.selfhtml.org/dhtml/beispiele/navigation.htm) <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/Museum/Eine_zug%C3%A4ngliche_Multilevel-Dropdown-Navigation" rel="nofollow noopener noreferrer">Museum/Eine zugängliche Multilevel-Dropdown-Navigation</a> von Beatovich, 2011 <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/jan/17/lesetipp-accessible-notifications-with-aria-live-regions-sara-soueidan Matthias Scharwies mscharwies@selfhtml.org 2024-01-17T07:47:00Z 2024-01-17T07:47:00Z Lesetipp: Accessible notifications with ARIA Live Regions (Sara Soueidan) <p>Guten Morgen,</p> <p>Sara Soueidan hat 2 Kapitel ihres neuen Buchs zum Vorablesen veröffentlicht:</p> <ul> <li><a href="https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/" rel="nofollow noopener noreferrer">Accessible notifications with ARIA Live Regions (Part 1)</a></li> <li><a href="https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/" rel="nofollow noopener noreferrer">Accessible notifications with ARIA Live Regions (Part 2)</a></li> </ul> <hr> <p>Fundstücke auf <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">Mastodon</a>:</p> <p><a href="/images/6b2e4150-b50c-11ee-a082-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/6b2e4150-b50c-11ee-a082-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p><a href="/images/73693208-b50c-11ee-a6a1-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/73693208-b50c-11ee-a6a1-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p><strong>Fazit</strong>: Verwende Aria nur, wenn Du weißt, was du tust!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2023/dec/18/mathematik-zur-letzten-adventswoche ottogal 2023-12-18T11:23:21Z 2023-12-19T06:49:15Z Mathematik zur letzten Adventswoche <p>Hallo in die Runde!</p> <p><a href="/images/abb57aae-9d97-11ee-9193-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/abb57aae-9d97-11ee-9193-9c6b00263d9f.png?size=medium" alt="stern.png" title="stern.png" loading="lazy"></a></p> <p>Die 12 goldenen Punkte sind gleichmäßig auf der Kreislinie verteilt.<br> Die 4 eingezeichneten Strecken verbinden jeweils zwei davon.<br> <em>Man sieht:</em> Diese 4 Strecken gehen durch einen gemeinsamen Punkt.</p> <p>Dies zu beweisen ist die Aufgabe.</p> <p>Viele Grüße<br> ottogal</p> https://forum.selfhtml.org/self/2024/jan/29/dreamweaver-allgemein-und-konkret Detlev 2024-01-29T12:22:54Z 2024-01-29T12:22:54Z Dreamweaver - Allgemein und Konkret <p>Weil mir "Adobe Muse" nicht mehr zur Verfügung steht lerne ich zur Zeit HTML und CSS von Grund auf neu.</p> <p>Allgemein:</p> <p>Das mache ich mit Dreamweaver. Wenn ich bei Fragen dazu im Netz suche, finde ich nur wenige aktuelle Beiträge. Das veranlasst mich zu fragen, ob das Programm überhaupt noch aktuell ist. Es wäre schön, Meinungen von erfahreneren Anwendern aus eurem Kreis zu erhalten. Für mich von Bedeutung ist die Dreamweaver Funktion "Vorlagen".</p> <p>Konkret:</p> <p>Gibt es in Dreamweaver eine Funktion, die folgendes erleichtert?:</p> <ul> <li>Ersetzen Sie das Zeichen & durch die Zeichenfolge &amp; ("Ampersand")</li> <li>Ersetzen Sie das Zeichen < durch die Zeichenfolge &lt; ("lower than")-</li> <li>Ersetzen Sie das Zeichen > durch die Zeichenfolge &gt; ("greater than")-</li> <li>das Zeichen " durch die Zeichenfolge &quot;.</li> </ul> <p>um es dann mittels <code> anzuzeigen. Das einzelne "Suchen und Ersetzen" dieser Zeichen macht nicht wirklich Spass.</p> <p>Danke vorab</p> https://forum.selfhtml.org/self/2024/jan/28/wie-kann-ich-die-existenz-eines-variablennamens-innerhalb-der-datenbank-prufen A. Meier 2024-01-28T00:48:42Z 2024-01-28T00:48:42Z Wie kann ich die existenz eines variablennamens innerhalb der Datenbank prüfen <p>Hallo, ich lese über $_POST übergebene Variablen aus. Dann erfolgt ein UPDATE über die Datenbank.</p> <p>Problem, nicht alle übergebenen Variablen existieren in der Datenbank als (Feldnamen)!</p> <p>Daher Fehler und Abbruch der PHP ausführung. (Fehler erst seit Umstellung von PHP 8.0 auf 8.1!!) (Ausgabe: ...Uncaught mysqli_sql_exception: Unknown column 'Feldnamen'...) Fehlerzeile: ...mysqli_query...</p> <p>Frage: Wie kann ich die in der Datenbank existierenden Feldnamen mit den übergebenen Variablen (durch $_POST) vergleichen. (nicht die Inhalte!!)</p> <p>Gruß und Danke</p> https://forum.selfhtml.org/weblog/2023/nov/01/wird-selfhtml-heute-noch-gebraucht Matthias Scharwies mscharwies@selfhtml.org 2023-11-01T04:59:56Z 2023-11-01T04:59:56Z Wird SELFHTML heute noch gebraucht? <p>Diese Frage, ob SELFHTML heute angesichts sinkender Frequnzen im Forum noch relevant - also bedeutsam und wichtig sei - stellen wir uns immer wieder. Dabei taucht dann auch die Suche nach der Zielgruppe auf, die wir angeblich aus den Augen verloren hätten, bzw. die es gar nicht mehr gäbe.</p> <p>2018 und 2020 hatten wir im Wiki nach <a href="https://wiki.selfhtml.org/wiki/Hilfe:Verbesserungsvorschl%C3%A4ge" rel="nofollow noopener noreferrer">Verbesserungsvorschlägen</a> gefragt.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Diesmal hatte ich mich per Mail an Ehemalige und Aktive aus Forum und Wiki gewandt, ob SELFHTML aus ihrer Sicht heute noch relevant sei.</p> <h3>These: Die Sprache des Webs ist Englisch!</h3><div style="padding-left:2em"> <em> „Jeder kann heute Englisch!“ <p>„Es gibt die MDN und die ist besser!“</em><sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p><em>„Ich persönlich geh' auf StackOverflow!“</p> <p>„Wer so wenig Englisch kann, dass er im Forum nachfragen muss, versteht unsere Tutorials eh nicht.“</em></p> </div> <p>Für <strong>mich persönlich</strong> ist diese Frage eigentlich schon im <em><strong>mission statement</strong></em> von SELFHTML festgelegt:</p> <p>„ <em>… Anfänger gemäß dem aktuellen Stand der Technik an die Erstellung von Webseiten heranführen, aber auch Fortgeschrittenen und Profis als verlässliches Nachschlagewerk dienen.</em>“<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <p>Die Dokumentation ist damals entstanden, um Menschen das <em><strong>„Everyone is a publisher“</strong></em> zu ermöglichen. Deshalb bietet SELFHTML seit 1995 eine Plattform für deutschsprachige Tutorials an und diesem Ansatz ist SELFHTML weiterhin verpflichtet.</p> <p>Auch wenn heute jeder Englisch „kann“, gibt es doch einen Unterschied zwischen der rezeptiven Beherrschung der Sprache - wenn man gut Englisch lesen oder Serien im Originalton verfolgen kann - und dem professionellen Mastering. So ist das Studium von Fachliteratur, bzw. das Formulieren von Fragen auf Stack Overflow doch eine größere Hürde, wenn dies auch noch in der Fremdsprache erfolgen muss.</p> <h3><strong>Anfänger … an die Erstellung von Webseiten heranführen</strong></h3><p>Als ich mich '99 auf das Staatsexamen vorbereitete, verließen zwei Mitstudenten meine Lerngruppe, da sie Webdesigner werden wollten - einer vor, einer nach dem Examen. Ach, was waren das für Zeiten, als HTML & CSS noch cool waren!</p> <p>Heute scheint die Zahl der wirklichen Anfänger überschaubar bis nicht vorhanden. Trotzdem führt die Doku Nutzer über die Seite <a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F" rel="nofollow noopener noreferrer"><strong>Wie fange ich an?</strong></a> direkt zu unseren Anfänger-Kursen:</p> <div class="cards-container" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(17em,1fr)); gap: 2em;"> <div class="card bg-filled" style="grid-row: span 1;background:beige;"> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg"><strong style="font-size: 1.15em;">Einstieg in <span style="color:#c82f04;">HTML</span></strong></a> <span style="float:right; display:block;text-align:end;line-height:100%;font-size:4.5em; color:#c82f04;"></></span><br> der Kurs für die ersten Schritte in HTML und CSS. <p>Schritt für Schritt zur eigenen Webseite</p> <p class="teaser"> <img src="/images/455f8376-67eb-11ee-baaf-b42e9947ef30.png?size=medium" alt="Screenshot unserer Webseite aus dem HTML-Einstieg"></p> </div> <div class="card"> <img src="/images/629240d6-67ec-11ee-a1c6-b42e9947ef30.png?size=medium" alt="CSS-logo" style="width:80px;float:right"> <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg"><strong style="font-size: 1.15em;">Einstieg in CSS</strong></a> <ul><li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden">Stylesheet einbinden</a></li> <li>Warum Layouts mit CSS?</li> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen">Webseiten responsiv umbauen</a></li> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/vom_Entwurf_zum_Layout">vom Entwurf zum Layout</a></li> </ul> <p class="teaser">Stylesheets für HTML und SVG</p> <p class="teaser"> <img src="/images/bc90606a-7870-11ee-b833-b42e9947ef30.png?size=medium" alt="Screenshot unserer Webseite aus dem CSS-Einstieg"></p> </div> <div> <img src="/images/39b200c6-67f0-11ee-b9d5-b42e9947ef30.png?size=medium" alt="Icon für JS-Einstieg" style="width:80px;float:right"> <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg"><strong style="font-size: 1.15em;">Einstieg in JavaScript</strong></a> <ul> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Erste_Schritte">Erste Schritte</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Programmieren_und_Debuggen">Programmieren und Debuggen</a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Funktionen">Funktionen</a></li> </ul> </div> <div class="card"> <img src="/images/77669d3e-67ee-11ee-beb7-b42e9947ef30.png?size=medium" alt="SVG-Logo des W3C" style="width:80px;float:right"> <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg"><strong style="font-size: 1.15em;">Einstieg in SVG</strong></a> <ul> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg#Warum_SVG_nutzen.3F">Warum SVG nutzen?</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen">SVG mit CSS stylen</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren">SVG mit CSS animieren</a></li> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/barrierefreie SVGs">barrierefreie SVGs</a></li> </ul> <p>Step by step eigene SVGs erstellen</p> </div> </div> <p>Uns als Autoren ist es dabei egal, ob die Nutzer aus einem jahrhundertealten Bauerngeschlecht oder einer Brennpunktschule in der Großstadt kommen. Das <a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Stil" rel="nofollow noopener noreferrer">Siezen unserer Leser ist Tradition</a>, bei neuen Tutorials könnte man auf das heute üblichere Du wechseln.</p> <h3><strong>… auch Fortgeschrittenen und Profis … dienen</strong></h3><p>Ich hatte in den letzten Wochen viele Ehemalige, sowie im Wiki Aktive angeschrieben und um ihren Eindruck, bzw. Rat gefragt. Dabei kam immer wieder zum Vorschein, dass wir zu wenig zu Fortgeschrittenen-Themen hätten.</p> <p>Hier müssen wir wohl unsere Hausaufgaben machen und mehr Tutorials für Fortgeschrittene anbieten, bzw. die vorhandenen Artikel besser präsentieren:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials" rel="nofollow noopener noreferrer"><strong>CSS/Tutorials</strong></a></li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials" rel="nofollow noopener noreferrer"><strong>JavaScript/Tutorials</strong></a></li> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials" rel="nofollow noopener noreferrer"><strong>SVG/Tutorials</strong></a></li> </ul> <div style="padding-left:2em"> <em>„Ich mache nichts mehr mit HTML, ich arbeite jetzt im Backend.“</em> </div> <p>Unser Bereich <a href="https://wiki.selfhtml.org/wiki/Webserver" rel="nofollow noopener noreferrer"><strong>Webserver</strong></a> könnte ausgebaut werden, bietet aber bereits einiges.</p> <p>Im Feedback erhielt ich zwei Angebote zu Tutorials über <a href="https://wiki.selfhtml.org/wiki/Node.js" rel="nofollow noopener noreferrer">Node.js</a> und die neue WebGPU - ich freu' mich jetzt schon!</p> <h4><strong>Ab wann ist man denn ein Fortgeschrittener?</strong></h4><p>Ein häufig auftretendes Problem ist, dass sich viele im Forum Fragende gar nicht als Anfänger sehen.</p> <div style="padding-left:2em"> <p><em>„Einige Beispiele munter zusammenkopiert - funktioniert!“</em></p> <p><em>„Und noch was dazu - hoppla, was ist da los - der Browser muss einen Bug haben!“</em></p> </div> <p>Diese Fragesteller lassen sich nur mit Mühe von ihren fehlerhaften Ansätzen abbringen. Hier können Tutorials ein Problem von der Aufgabenstellung bis zur barrierefreien Lösung anschaulich und unterhaltsam behandeln.</p> <h3><strong>Warum die Frage nach der Zielgruppe?</strong></h3><p>Implizit beinhalten die Fragen nach Relevanz und Zielgruppe auch immer die Frage, ob man nicht besser Schluss machen sollte. Ich hoffe, dass ich einige überzeugen kann, weiterzumachen und zumindest 2025 die 30 Jahre vollzumachen.</p> <p>Hier möchte ich unseren Vorstand Janosch Zoller zitieren:</p> <div style="padding-left:2em;"> <em>Wir haben auch jetzt noch täglich tausende Seitenaufrufe, wo Menschen im Zweifel von unseren Inhalten profitieren. <p>Das wird immer wieder durch die Kleinspender bestätigt, die in Regelmäßigkeit ein paar Euronen da lassen - und das obwohl wir alles andere als aggressiv für Spenden werben. Insofern ist das wiki so wie es ist nicht verkehrt; es wird von einigen Menschen aktiv genutzt.</p> <p>… Wegen mir kann es einfach so weiterlaufen wie es ist - solange es zig Menschen täglich glücklich macht, ist es eine Bereicherung und erhaltenswert.</p> <p>Daher ist es für mich auch keine Option, den Verein dicht zu machen, solange wir noch derart aktiv gelesen werden.</p> <p>Der Vergleich mit den 00er-Jahren ist nicht repräsentativ und hinkt auf allen Ebenen. Man darf nicht immer dem Glanz alter Zeiten nachhängen, sondern muss sich fragen: "Was haben wir heute? Ist es erhaltenswert?". Ich beantworte für mich Letzteres mit einem uneingeschränkten Ja, deshalb mache ich weiter.</em><sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></p> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/Hilfe:Verbesserungsvorschl%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe:Verbesserungsvorschläge</a> im SELF-Wiki <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Die MSDN wurde depubliziert; die deutschsprachige MDN mittlerweile durch eine Weiterleitung auf die englischsprachige Version ersetzt. Wie das mit Mozilla und der finanziellen Unterstützung durch Google langfristig aussieht, wissen nur die Götter. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein#Wir_.C3.BCber_uns" rel="nofollow noopener noreferrer">SELFHTML:Verein - Wir über uns</a> <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p>Janosch Zoller am 20.06.2021 im <a href="https://forum.selfhtml.org/verein/2021/jun/20/interessanter-verein-umstandehalber-in-gute-hande-abzugeben/1789435#m1789435" rel="noopener noreferrer">internen Forum</a> <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/jan/18/suchmaschinen-management fietur 2024-01-18T12:10:47Z 2024-01-18T12:10:47Z Suchmaschinen-Management <p>Hallo, ich habe ein praktische Frage, die zwar nicht unmittelbar etwas mit HTML zu tun hat, aber große Auswirkungen haben kann.</p> <p>Ich kenne drei Möglichkeiten der Zugangs-/Scan-Begrenzung:</p> <ul> <li>die robots.txt</li> </ul> <p>Dort verbiete ich den Zugriff auf Dateitypen wie PDFs oder einzelne Ordner; wer sich nicht daran hält, landet auf meiner schwarzen Liste; funktioniert ganz gut, nachdem die ohnehin robots-ignoranten Crawler aussortiert wurden.</p> <ul> <li>die .htaccess</li> </ul> <p>Hier steht das Gleiche in <s>grün</s> wirksam:</p> <pre><code class="block"><FilesMatch "\.(png|jpe?g|webp|gif|mp4|mp3)$"> Header set X-Robots-Tag "noindex" </FilesMatch> <FilesMatch "\.pdf$"> Header set X-Robots-Tag "noindex, nofollow" </FilesMatch> </code></pre> <ul> <li>Direkt auf der Seite im <head></li> </ul> <p>Ich habe derzeit noch ein <code><meta name="robots" content="noindex,nofollow"></code> eingebunden. Das funktioniert zu meiner Überraschung sehr gut - bisher wird die Seite noch von keiner Suchmaschine gelistet. Zwar kamen die ersten Besucher aus Fernost (und -west) bereits wenige Stunden nach Registrierung der Domain, aber die Zahl der (unnötig bis unerwünschten) Zugriffe liegt noch erfreulich niedrig.</p> <p>Dass die Seite nicht auffindbar ist, soll jedoch kein Dauerzustand bleiben. Zwar verfolgt die Seite keinerlei kommerzielle Interessen, aber eine Auffindbarkeit auch ohne genaue Kenntnis des Domainnamens sollte dennoch gegeben sein. Dazu brauche ich nur <code>noindex</code> wieder zu entfernen, das ist schon klar.</p> <p>Aber es gibt Fallstricke. Ich habe beispielsweise für manche Beiträge eine Bewertungsfunktion in Form zweier als Buttons getarnter Links. Sollte ein Robot einen dieser Links anwählen (und sich für das voten des anderen disqualifizieren), verfälscht das die Bewertung und Beteiligung. Hier wäre ein <code>rel="nofollow"</code> im <code><a href=...></code> das Mittel der Wahl, oder?</p> <p>Ein anderes Problem ist, dass ich neben nicht zu indizierenden Dokumenten (PDF's) auf der Startseite unterschiedliche Beiträge aufführe. Einige davon dürfen oder sollen indiziert werden, während andere eher nur für menschliche und bereits auf der Seite befindliche Besucher gedacht sind. Und hier lautet meine Frage: Wie kann ich für solche <code><article></code> ein Finetuning vornehmen, so dass Google und Co einzelne davon indizieren, andere aber links liegen lassen?</p> https://forum.selfhtml.org/self/2024/jan/10/frage-zum-wiki-artikel-flyout-men-c3-bc-bzgl-details Robert B. 2024-01-10T08:12:37Z 2024-01-10T08:12:37Z Frage zum Wiki-Artikel „Flyout-Menü“ bzgl. details <p>Hallo zusammen, hallo <a href="/users/3833" class="mention registered-user" rel="noopener noreferrer">@Matthias Scharwies</a>,</p> <p>im o.g. Wikiartikel heißt es zur <a href="https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#Alternative:_details" rel="nofollow noopener noreferrer">alternativen Verwendung des <code>details</code>-Elements</a>:</p> <blockquote> <p>Screenreader lesen das details-Element als „“ vor, was natürlich abschreckend ist.</p> </blockquote> <p>Wird damit der komplette Inhalt von <code>details</code> nicht vorgelesen oder wie ist dieser Hinweis zu verstehen?</p> <p>Vielen Dank und viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2024/jan/26/das-smartphone-als-externe-festplatte-zu-benutzen-funktioniert-nicht-richtig Hans 2024-01-26T08:52:56Z 2024-01-26T08:52:56Z Das Smartphone als externe Festplatte zu benutzen funktioniert nicht richtig <p>Hallo Leute,</p> <p>ich habe ein Blackviews N6000-Smartphone, mit dem ich ganz zufrieden bin. Es hat eine ausreichend großen Speicherplatz. Wenn ich jedoch mittels USB etwas hinüberkopiere, dauert es ewig (ca. 5h für 1GB!). Die Dateien sind dann jedoch am Laptop nicht benutzbar. Bei meinem älteren Smartphone klappt das jedoch ohne Probleme. Weiß jemand, ob es dafür eine Lösung gibt? Kann es sein, dass der Smartphone-Speicher bei einigen Modellen grundsätzlich langsamer funktioniert und nicht als externe Festplatte brauchbar ist?</p> <p>Vielen Dank! Beste Grüße, Hans</p> https://forum.selfhtml.org/self/2024/jan/23/von-japan-lernen-matheunterricht-der-zum-denken-anregt Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-01-23T07:15:45Z 2024-01-23T07:15:45Z Von Japan lernen: Matheunterricht, der zum Denken anregt <p>Interessanter Artikel, auch für die hier versammelte Lehrerschaft: <a href="https://deutsches-schulportal.de/unterricht/von-japan-lernen-matheunterricht-der-zum-denken-anregt/?utm_source=pocket-newtab-de-de" rel="nofollow noopener noreferrer">Von Japan lernen: Matheunterricht, der zum Denken anregt</a></p> <p>Teaser: Im Dezember hat die neue PISA-Studie bestätigt, was viele schon haben kommen sehen: die schlechtesten Ergebnisse aller Zeiten für Deutschland, ein dramatischer Absturz seit 2018 – wie in vielen anderen Ländern auch. Nicht so in Japan; dort sind die Leistungen in Mathematik gestiegen. Seit Jahren belegt das Land Spitzenplätze in den Rankings. Das <em>Schulportal</em> hat sich den Matheunterricht in Japan genauer angesehen – mit überraschenden Befunden.</p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/jan/14/selfhtml-treffen-am-27-januar Matthias Scharwies mscharwies@selfhtml.org 2024-01-14T06:08:59Z 2024-02-04T14:17:21Z SELFHTML-Treffen am 27. Januar <p>Guten Morgen,</p> <p>liebe Mitglieder des Vereins und Interessierte,</p> <p>am 27.01. startet um 10:00 unser <a href="https://forum.selfhtml.org/events/9" rel="noopener noreferrer"><strong>SELFHTML-Treffen 2024-01</strong></a> auf Discord.</p> <p>Wir hatten am letzten SELF-Treffen im Novenber einige Arbeitsgruppen gebildet, deren Ergebnisse wir vorstellen und diskutieren möchten.</p> <hr> <p>Parallel habe ich auf <a href="https://bildung.social/@selfhtml/111748380866545840" rel="nofollow noopener noreferrer">Mastodon</a> und Discord Umfragen gestartet, wie wir unsere Leser ansprechen sollen.</p> <p>Das kann nach einer Zielgruppendefinition der nächste Schritt sein, welche Regeln wir für künftige Redaktionsarbeit aufstellen wollen.</p> <p>Ich freue mich auf alle und eine fruchtbare Diskussion.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <p>BTW: Ich wundere mich immer wieder über das regelmäßig erscheinende Feedback auf unseren Blog-Artikel vom 01.11. - Die Leute sehen das wohl auf der Startseite. Da muss ich (das eingebundene) <a href="https://wiki.selfhtml.org/wiki/SELFHTML/Blog" rel="nofollow noopener noreferrer">SELFHTML/Blog</a> wohl öfter aktualisieren, oder doch einen RSS-Feed programmieren!</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/jan/24/parameterubergabe-von-konventionellem-php-programm-zu-objektor-programm Silja 2024-01-24T19:26:41Z 2024-01-24T19:26:41Z Parameterübergabe von konventionellem PHP-Programm zu objektor. Programm <p>Hallo,<br> wie wird ein objektorientiertes Programm aus einem konventionellen PHP-Programm aufgerufen und wie kann ich im folgenden Statement</p> <pre><code class="block">$mail->Subject = 'Here is the subject'; </code></pre> <p>den Text 'Here is the subject' als Parameter übergeben?</p> https://forum.selfhtml.org/self/2024/jan/21/mit-audacity-einen-song-einen-halben-ton-tiefer-setzen-wie Linuchs 2024-01-21T00:53:38Z 2024-01-21T00:53:38Z Mit Audacity einen Song einen halben Ton tiefer setzen - wie? <p>Moin, liebe Musiküsse,</p> <p>„<a href="https://yt.artemislena.eu/watch?v=Q9xCXO_PCQI" rel="nofollow noopener noreferrer">Heute hier, morgen dort</a>“ wird von Hannes Wader in C# gesungen.</p> <p>Wir (Ukulele-Anfänger) möchten die Audio-Datei auf C ändern, um es begleiten zu können.</p> <p>Ich habe es mit Audacity trotz mehrerer „Anleitungen“ nicht hinbekommen, die Tonart gezielt „abzusenken“. Habe nur Vorschläge gefunden, wie man Aliens oder Monster sprechen lassen kann. Aber keinen gezielten Wechsel der Tonart.</p> <p>Dies und mehr habe ich versucht: [Effekt] - [Tonhöhe ändern]</p> <p><a href="/images/e73f56a8-b7f5-11ee-a0b3-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/e73f56a8-b7f5-11ee-a0b3-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Habe nicht den geringsten Verdacht, was Halbtöne in Halbschritten sein könnten. Diverse Ganzzahlen mit + und - ausprobiert und nicht hinter das Konzept gekommen.</p> <p>Wer kann helfen?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/25/angualr-und-zoomen Lowterm 2024-01-25T12:24:09Z 2024-01-25T12:24:09Z Angualr und Zoomen <p>Hallo zusammen,</p> <p>ich habe da ein Problem mit dem Vergrößern eines Bildes im Browser. Ich zoome via JS (in Angular) ein beliebiges Bild, solange bis das Bild großer als der Anzeigebereich des Browsers ist. Bis dahin ist auch alles gut. Das Problem ist, dass man nun nur nach rechts scrollen kann und der Linke Bereich des Bildes, der sich nun außerhalb des Browser-Sichtbereches befindet, nicht mehr zu sehen ist und der Scrollbalken auch bereits ganz links steht und man kann auch nicht mehr weiter nach links scrollen, um das restliche Bild zu sehen.</p> <p>Gibt es einen Trick, wie man handhaben kann oder mit css?</p> <pre><code class="block language-css"> <span class="token selector">:host</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.scroll-container</span> <span class="token punctuation">{</span> <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">-ms-overflow-style</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.zoom</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.29<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Liegt es eventuell an dem bereits verwendeten CSS?</p> <p>Gruß</p> https://forum.selfhtml.org/self/2024/jan/24/25-01-css-cafe-blind-css-exfiltration-stealing-user-data-from-unknown-web-pages-via-css Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2024-01-24T10:27:40Z 2024-01-24T10:27:40Z 25.01. CSS Café: Blind CSS Exfiltration: Stealing user data from unknown web pages via CSS <p>Morgen, 25.01 16:00 im CSS Café mit Gareth Heyes: <a href="https://www.meetup.com/css-cafe/events/298480761/" lang="en" rel="nofollow noopener noreferrer">Blind CSS Exfiltration: Stealing user data from unknown web pages via CSS</a></p> <p><em lang="en">This talk delves into a new hacking attack class of Blind CSS Exfiltration! A method to extract data using pure CSS from unknown web pages even when executing scripts is not an option due to strict Content Security Policy (CSP) or sanitization mechanisms like DOMPurify.</em></p> <p><em lang="en">I’ll begin by discussing the landscape of current CSS exfiltration techniques and their limitations. The talk then introduces the concept of Blind CSS Exfiltration, focusing on its reliance on CSS variables and attribute selectors to extract data. A key aspect of this technique is the novel use of the :has CSS selector, which significantly broadens the scope of data that can be exfiltrated from unknown web page structures.</em></p> <p><em lang="en">Throughout the presentation, I will demonstrate how CSS variables can be employed as triggers for conditional requests using background images, and how attribute selectors can be used to extract specific data based on the presence or absence of certain characters.</em></p> <p><em lang="en">I will also explore using the combination of :has and :not selectors to skip already exfiltrated data, and the utilisation of @import chaining for extracting a large amount of data. The session will culminate with practical demonstrations, including the use of a server to initiate the exfiltration process and display the results in the browser in pure CSS.</em></p> <p><em lang="en">Attendees will leave with a deeper understanding of CSS’s potential for exfiltration and the skills to test for and protect against this new attack.</em></p> <p lang="art-x-kwejian">Kwakoni Yiquan</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> https://forum.selfhtml.org/self/2024/jan/21/gutes-mailprogramm-gesucht Lothar 2024-01-21T09:49:23Z 2024-01-21T09:49:23Z Gutes Mailprogramm gesucht <p>Hi,<br> mit welchem PHP-Mailprogramm kann ich in Windows 11 möglichst sicher mails versenden, die ich aufgrund von Angaben im Kontaktformular generiere?<br> Danke Lothar</p> https://forum.selfhtml.org/self/2024/jan/17/in-welcher-reihenfolge-werden-domcontentloaded-abgearbeitet Linuchs 2024-01-17T13:37:09Z 2024-01-17T13:37:09Z In welcher Reihenfolge werden DOMContentLoaded abgearbeitet? <p>Moin,</p> <p>für Liedtexte mit Audio- und Videospuren lade ich mehrere .js Dateien</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../css/formatiert_a3_a5_a6.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span class="token comment"><!-- *.htm?a6 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../css/setze_seitenzahlen.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span class="token comment"><!-- *.htm?a6Nr.04 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../css/lied_mehrspurig.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../css/tempo_handler.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../css/setze_akkorde.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>und jede enthält</p> <pre><code class="block language-js">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <p>Wenn die Akkorde gesetzt werden, wird in lied_mehrspurig die Lautstärke NICHT verringert.</p> <p>Da ich keine Idee habe, ob diese Funktionen nacheinander oder zeitgleich abgearbeitet werden, weiß ich nicht, nach welcher Art Fehler ich suchen muss.</p> <p>Javascript meldet keine Fehler, aber macht es einfach nicht</p> <pre><code class="block language-js"><span class="token comment">// alle Audios auf halbe Lautstaerke</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span> <span class="token string">"audio"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span> <span class="token punctuation">)</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span> <span class="token string">"audio"</span> <span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>volume <span class="token operator">=</span> <span class="token number">0.2</span><span class="token punctuation">;</span> </code></pre> <p>Habe den Dateien-Mix auf den Server geladen, damit ihr inspizieren könnt.</p> <p>Vom Server geholt, wird jetzt (bei mir) die Tonart (C ist Standard) nicht gesetzt, das Ergebnis sieht so aus:</p> <p><a href="/images/2cc6ed5a-b53d-11ee-92e0-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/2cc6ed5a-b53d-11ee-92e0-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>To|nika Do|minante Su|bdominante sollte so aussehen:</p> <p><a href="/images/ecf502c0-b53c-11ee-a0a5-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/ecf502c0-b53c-11ee-a0a5-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/weblog/2024/jan/21/oklch-farbe-und-helligkeit Matthias Scharwies mscharwies@selfhtml.org 2024-01-21T08:01:14Z 2024-01-21T08:01:14Z OKLCH: greller, bunter und so weiter? <p>Auf unserer MV im November fielen uns unerklärliche Werte in unserer Farbpalette auf. Die Recherche dazu führte zu einer umfassenden Neubearbeitung unserer Wikiseiten zu Farbangaben und Farbpaletten:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Farbe" rel="nofollow noopener noreferrer"><strong>Farbe</strong></a></li> </ul> <p>Unsere Farbpalette bestand aus vier Grundtönen und entsprechenden Pastellfarben:</p> <table> <tr> <td style="background:hsl(201 50% 40%);color:white;padding:0.5em 3em;">blau</td> <td style="background:hsl(201 50% 40% /0.1);padding:0.5em 1em;"">hsl(201 50% 40% /0.1)</td> </tr> <tr> <td style="background:hsl(44 75% 50%);padding:0.5em 3em;">gelb</td> <td style="background:hsl(44 75% 50% /0.1);padding:0.5em 1em;"">hsl(44 75% 50% /0.1)</td> </tr> <tr> <td style="background:hsl(13 96% 40%);color:white;padding:0.5em 3em;">rot</td> <td style="background:hsl(13 96% 40% /0.1);padding:0.5em 1em;"">hsl(13 96% 40% /0.1)</td> </tr> <tr> <td style="background:hsl(80 45% 50%);padding:0.5em 3em;">grün</td> <td style="background:hsl(80 45% 50% /0.2);padding:0.5em 1em;"">hsl(80 45% 50% /0.2)</td> </tr> </table> <p>Erste Reaktion unserer Mitglieder: <strong>„Wo sind die Kommas?“</strong></p> <p>Schon seit längerem wurde die Schreibweise der Farbfunktionen so angepasst, dass Parameter innerhalb von CSS-Funktionen mit Leerzeichen getrennt werden. Ein optionaler Alphawert wird - wie oben gezeigt - nach einem Slash notiert. Auch unser SELF-Wiki verwendet bereits seit Februar 2022 nur noch die neue, einfachere Schreibweise!</p> <p>Zweite Reaktion: <strong>„Warum ist der Alphawert bei Hellgrün anders?“</strong></p> <p>Ich hatte versucht, aus bestehenden HEX-Werten durch die Umrechnung in hsl() eine Systematik zu finden. Allerdings gibt es bei HSL, der Mischung aus Farbton (<em><strong>H</strong>ue</em>); Sättigung und Helligkeit (<em><strong>L</strong>ightness</em>) das Problem, dass die mit hsl() beschriebenen Werte nicht mit der <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#Helligkeit_in_HSL" rel="nofollow noopener noreferrer">wahrgenommenen Helligkeit</a> übereinstimmen.</p> <h3>neue Farbräume</h3><p>Eigentlich jedem klar, aber dann doch wieder erwischt: Es gibt eben nicht <strong>die</strong> drei Grund- und x Sekundärfarben, die Farbnamen und die 16,7 Farben des RGB-Farbraums. In der Natur gibt viel mehr Farbtöne, auch das menschliche Auge kann mehr als den RGB-Farbraum erfassen. Die 8-Bit des RGB-Farbraums sind nur eine Festlegung.</p> <p>Um Farben besser darstellen zu können, gibt es nun die Möglichkeit weitere Farbräume in CSS zu nutzen.</p> <p>Unter den vielfältigen Möglichkeiten sticht besonders die oklch()-Funktion hervor, die im <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#CIELAB_Farbmodelle" rel="nofollow noopener noreferrer">OKLAB-Farbraum</a> Farben durch ihre Bestandteile …</p> <ul> <li><em><strong>L</strong>ightness</em> (Helligkeit)</li> <li><em><strong>C</strong>hroma</em> (relative Buntwirkung)</li> <li><em><strong>H</strong>ue</em> (Farbton)</li> </ul> <p>definiert.</p> <p><strong>Anmerkung:</strong> Bei der Überarbeitung der Wikiseiten standen wir vor dem Problem, dass unsere Desktop-Monitore das volle Spektrum der Farben noch nicht ausnutzen und wir zum Testen immer wieder unsere fortschrittlicheren Mobilgeräte nutzen mussten. Auch wird die mächtige relative Syntax noch nicht im Firefox unterstützt. Trotzdem ist es eine interessante Entwicklung mit neuen Möglichkeiten!</p> <p>Entdecke die Welt der Farben:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Farbe" rel="nofollow noopener noreferrer"><strong>Farbe</strong></a> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbangaben" rel="nofollow noopener noreferrer"><strong>Farbangaben</strong></a><br> Farbnamen, currentColor, etc</li> <li><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle" rel="nofollow noopener noreferrer"><strong>Farbmodelle</strong></a><br> rgb(), HEX, hsl() und das neue oklch()</li> <li><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbkonzept" rel="nofollow noopener noreferrer"><strong>Farbkonzept</strong></a><br> vom Farbkreis über die Harmonielehre zur Farbpalette</li> <li><a href="https://wiki.selfhtml.org/wiki/Farbe/Farben_und_Kontraste" rel="nofollow noopener noreferrer"><strong>Farben und Kontraste</strong></a><br> der Klassiker von Jan Eric Hellbusch mit vielen Beispielen!</li> </ul> </li> </ul> <p><strong>PS</strong>: Im Zuge der Überarbeitung haben wir auch unsere Beispielvorlage um eine Direktansicht ergänzt. Vielen Dank an <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> https://forum.selfhtml.org/self/2024/jan/20/frefox-119-0-1-i-tag-wird-nicht-ausgefuhrt-sondern-angezeigt Linuchs 2024-01-20T09:44:16Z 2024-01-20T09:44:16Z Frefox 119.0.1 <i> tag wird nicht ausgeführt, sondern angezeigt. <p>10:49 Bevor sich jemand reinkniet, ich habe da einen Verdacht ...</p> <p>10:53 ja, den generierten String übergebe ich mit <code>htmlspecialchars( $row['bezeichnung1'] )</code></p> <p>also <strong>falscher Alarm</strong>. Seltsam, dass das bei [Untersuchen] verschwiegen wird.</p> <p>Moin,</p> <p>wenn ich mit einem Teilstring suche, z.B. schoko, dann möchte ich alle Artikelbezeichnungen, die schoko enthalten.</p> <p>Bei der Anzeige soll der Suchbegriff rot eingefärbt werden, aber Firefox zeigt dieses:</p> <p><a href="/images/c4150e0e-b776-11ee-8e4a-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/c4150e0e-b776-11ee-8e4a-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Natürlich habe ich mir das unter [Untersuchen] angesehen:</p> <p><a href="/images/57fae09e-b777-11ee-9e0a-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/57fae09e-b777-11ee-9e0a-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>und verstehe nicht, warum <code><i></code> nicht ausgeführt wird. Erst als ich den Part aus der Konsole (äußeres HTML) hierher kopiere, sehe ich Seltsames:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>artikel_id=8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/?zp=p202<span class="token entity named-entity" title="&">&amp;</span>artikel_id=8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>i class='crot'<span class="token entity named-entity" title=">">&gt;</span>Schoko<span class="token entity named-entity" title="<">&lt;</span>/i<span class="token entity named-entity" title=">">&gt;</span>lade Honig-Salz-Mandel<span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> </code></pre> <p>Mit PHP generiere ich das so:</p> <pre><code class="block language-php"> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token variable">$cookie_bezeichnung1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// GESUCHTE ZEICHEN bezeichnung1 MARKIEREN</span> <span class="token variable">$heystack</span> <span class="token operator">=</span> <span class="token function">mb_strtolower</span><span class="token punctuation">(</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$needle</span> <span class="token operator">=</span> <span class="token function">mb_strtolower</span><span class="token punctuation">(</span> <span class="token variable">$cookie_bezeichnung1</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$start_pos</span> <span class="token operator">=</span> <span class="token function">mb_strpos</span><span class="token punctuation">(</span> <span class="token variable">$heystack</span><span class="token punctuation">,</span> <span class="token variable">$needle</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">mb_substr</span><span class="token punctuation">(</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token variable">$start_pos</span> <span class="token punctuation">)</span> <span class="token operator">.</span><span class="token string double-quoted-string">"<i class=crot>"</span><span class="token operator">.</span><span class="token function">mb_substr</span><span class="token punctuation">(</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token variable">$start_pos</span><span class="token punctuation">,</span><span class="token function">mb_strlen</span><span class="token punctuation">(</span><span class="token variable">$needle</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token operator">.</span><span class="token string double-quoted-string">"</i>"</span> <span class="token operator">.</span><span class="token function">mb_substr</span><span class="token punctuation">(</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'bezeichnung1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token variable">$start_pos</span> <span class="token operator">+</span><span class="token function">mb_strlen</span><span class="token punctuation">(</span><span class="token variable">$needle</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Woanders funktioniert das dutzende Male, was ist in diesem Fall falsch?</p> <p>Das Programm ist leider nicht öffentlich.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/19/zertifikatsproblem-nach-providerwechsel Gerdi 2024-01-19T20:55:36Z 2024-01-19T20:55:36Z Zertifikatsproblem nach Providerwechsel <p>Guten Abend,<br> wenn ich beim neuen Provider meine Daten mit filezilla hochladen möchte, kommt die Meldung "Hostname passt nicht zum Zertifikat".<br> Angezeigt werden noch Zertifikats-Daten des früheren Providers.<br> Wie kann ich dies beheben?<br> Grüße Gerdi</p> https://forum.selfhtml.org/self/2024/jan/16/popover-statt-per-klick-per-mouseover-offnen MudGuard http://www.andreas-waechter.de/ 2024-01-16T17:11:18Z 2024-01-16T17:11:18Z Popover statt per Klick per Mouseover öffnen? <p>Hi,</p> <p>ich nutze auf einer "nur für mich" Seite (also muß nix Barrierefreies sein, Maus ist vorhanden) viele Popovers a la</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">popovertarget</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>special33<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zeigen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>special33<span class="token punctuation">"</span></span> <span class="token attr-name">popover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/sonder/23/2014_1.webp<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Sonder 2014-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Sonder, Jahr 2014, Nr. 1<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Das Besondere des Besonderen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> </code></pre> <p>Das funktioniert auch wunderbar (im Firefox erst, nachdem ich das Feature enabled hab, aber auch das ist kein Problem, ist ja nur für mich).</p> <p>Ach ja, vielen Dank an denjenigen (ich find's grad nicht mehr), der das popover-Zeug hier vor ein paar Wochen mal erwähnt hat!</p> <p>So, funktionieren tut's. Auch, daß das Popover geschlossen wird, wenn ich auf einen anderen "Zeigen"-Button klicke. Derzeit sind's so um die 600 solche Buttons.</p> <p>Ich hätte gerne (zusätzlich?), daß sich das Popover nicht erst bei Klick auf den Button öffnet, sondern bereits, wenn die Maus über dem Button schwebt.</p> <p>Ist das mit <strong>kleinem</strong> Aufwand möglich? Gibt's da evtl. ein Attribut a la popoveractivation="hover" oder so?</p> <p>Kiloweise Javascript würde ich eher ungern einbauen.</p> <p>Danke,</p> <p>Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2024/jan/18/was-ist-der-user-agent-go-http-client-2-0 oxo888oxo 2024-01-18T13:51:55Z 2024-01-18T13:51:55Z Was ist der User agent Go-http-client/2.0 ? <p>Hallo</p> <p>In meinen Server-Logfiles finde ich sehr oft den Useragent Go-http-client/2.0. Ist das ein Bot? Oder ist das was anderes? Macht es Sinn, den bei mir auszusperren?</p> <p>Gruß Ingo</p> https://forum.selfhtml.org/self/2024/jan/18/firefox-viele-instanzen-obwohl-nur-startseite Lisa 2024-01-17T23:24:11Z 2024-01-17T23:24:11Z Firefox viele Instanzen obwohl nur Startseite <p>Hi,</p> <p>kann mir jemand erklären warum Firefox so viele Instanzen öffnet, obwohl ich doch nur die Startseite aufrufe? Das war früher nicht. Wenn ich den Browser schliesse, taucht der auch nicht mehr in Taskmanager auf, aber solbald ich öffne direkt mal 10 Instanzen.</p> <p><a href="/images/67555694-b58f-11ee-a1be-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/67555694-b58f-11ee-a1be-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>lg.</p> https://forum.selfhtml.org/self/2024/jan/12/sehr-dunne-link-unterstreichungen oxo888oxo https://spaceart.de/ 2024-01-12T10:54:44Z 2024-01-12T10:54:44Z Sehr dünne Link-Unterstreichungen <p>Hallo</p> <p>Es geht mir um das Thema Link-Unterstreichung. Man soll aus verschiedenen Gründen Links ja unterstrichen darstellen.</p> <p>Auf meiner Website setze ich das auch um. Aber die Unterstreichung hätte ich gerne noch dezenter.</p> <p>Ich habe heute eine Website gefunden, auf der das sehr schön gelungen ist. Und zwar diese hier: <a href="https://kulturbanause.de/" rel="nofollow noopener noreferrer">https://kulturbanause.de/</a></p> <p>Könnt Ihr mir sagen, wie man es hinbekommt, dass die Unterstreichungen so schön dünn sind?</p> <p>Gruß Ingo</p> https://forum.selfhtml.org/self/2024/jan/16/ist-meine-seite-safe-ohne-cookie-banner Christian der Unentbehrliche 2024-01-16T16:43:12Z 2024-01-16T16:43:12Z Ist meine Seite "safe" ohne Cookie Banner? <p>Hallo an alle,</p> <p>ich würde gerne diesen hässlichen Cookie Banner auf meiner Webseite vermeiden.</p> <p>Hoste alle Google Fonts selbst, die Grundstruktur meiner Seite wurde auch von mir gescriptet (einfache HTML/CSS/JavaScript/PHP Kombination), allerdings benutze ich Plugins für eine 3D Visualisierung, bei denen ich mir nicht sicher sind, ob die nicht nach Hause telefonieren.</p> <p>Die Netzwerkanalyse der Browser Entwicklertools gibt als Host für sämtliche Ressourcen aber <code>localhost</code> an, daher scheint an dieser Front alles klar zu sein.</p> <p><code>http://localhost</code> scheint zwar in <code>Local Storage</code>, <code>Session Storage</code>, <code>Cookies</code> und <code>Shared Storage</code> des Anwendungen-Reiters auf, dort finden sich aber keine Einträge.</p> <p>Außerdem habe ich eine YouTube Link, der aber erst "freigeschalten" werden muss (YouTube wird nach Erlaubnis via PHP nachgeladen und eingebettet). Diese "Freischaltung" muss seitens der UserInnen erfolgen, denen folgender Text vorgesetzt wird:</p> <pre><code class="block">Sie sind im Begriff, ein externes YouTube Video zu laden. Hierbei gelten die Cookiebestimmungen und Nutzungsbedingungen von YouTube. Hier klicken, um fortzufahren. </code></pre> <p>Ist meine Seite safe für den Upload ins Weltweite Netz oder übersehe ich noch etwas?</p> <p>Vielen Dank! Christian</p> https://forum.selfhtml.org/self/2023/dec/06/umstellung-mariadb-nun-codierungsproblem 1211chef 2023-12-06T12:03:16Z 2023-12-06T12:03:16Z umstellung mariadb, nun codierungsproblem <p>hi leute, ich war schon ewig nicht mehr aktiv hier.</p> <p>mein serverbetreiber hat von mariadb 10.3 auf 10.6 ungestellt, und nun habe ich ein umlautproblem.</p> <p>in meinen alten perlscripten lese ich sql daten ein und speichere sie auch, collation der textfelder stehen alle auf latin1_swedish_ci. hat bisher immer problemlos funktioniert, alle ausgaben und eingaben mit umlauten korrekt, aber seit der umstellung nicht mehr.</p> <p>mein problem ist jetzt auch, liegt es an alten programmierfehlern meinerseits, oder hat mein serverbetreiber irgendeine einstellung falsch gesetzt?</p> <p>da ich in perl einlese, kann es damit zusammenhängen?</p> <p>ich will jetzt ungern im datenbestand rumpfuschen, eine spalte hab ich leider eh schon vernichtet weil ich versucht habe auf utf8mb4 umzustellen. war ein fehler leider.</p> <p>im moment komme ich nicht weiter, und mein serverbetreiber sagt es liegt an mir ...</p> <p>grüsse, gust</p> https://forum.selfhtml.org/self/2024/jan/13/wer-sucht-hat-gerade-zu-viel-zeit nix 2024-01-13T20:03:00Z 2024-01-13T20:03:00Z Wer sucht hat gerade zu viel Zeit? <p><a href="https://forum.selfhtml.org/self/2024/jan/12/sehr-dunne-link-unterstreichungen/1812739#m1812739" rel="noopener noreferrer">Beim Karnickel-Thema</a> bin ich im Nachgang auf eine (vage) Idee gekommen.<br> Wegen eines Problems, das ich (vom Wesen her) auch andernorts sehe. Dabei geht es darum, daß man lange suchen kann, wenn man zwar „im richtigen Buch“ sucht, dabei aber nicht weiß, welches Kapitel das Gesuchte beschreibt und es nicht nur (wenn überhaupt) erwähnt. Laßt mich als Beispiel das Thema mit der Link-Unterstreichung „des Karnickels“ (s.o.) nehmen: es gibt einige Möglichkeiten, sich der gewünschten Darstellung zu nähern. Wer nicht sowieso schon weiß, wie das mit dem Unterstreichen funktioniert, versucht es vielleicht damit, im Wiki die Suchfunktion mit „text“ zu füttern … oder doch eher etwas mit … hmmm „a“? Eher „Link“? …<br> Jedenfalls muß man schnell mal ausgiebig suchen, dabei öfter mal längere Listen mit Bezeichnern auf sich vielleicht erleuchtende Lämpchen (wer hat schon Düsentriebs Helferlein zur Hand, das ggf. zuflüstert, was so ein „ungefähr englisches Wort“ assoziieren könnte?) hin abklopfen.</p> <p>Jedenfalls habe ich so eine (aber leider wenig konkrete) Ahnung von einer grafischen Darstellung ähnlich der Inspektoren (Layout → Boxmodell), von der aus man durch Anklicken entsprechender Teile der jeweiligen Darstellung zu einer Übersicht „vielleicht thematisch passend“ gelangt. Also z. B. „unten rum“ findet man dann <code>text-decoration</code>, <code>border-bottom</code> (mit Erwähnung von <code>border</code>und auch <code>border-block˚ …), </code>outline` …</p> <p>Irgendwie könnte man damit zwar auch nicht verhindern, daß sich diese „Karnickel“ so vermehren. Aber wenn man wenigstens einen „Stall“ findet, in dem das gesuchte, das richtige, sitzt … (und dann bitte fast das Gleiche nochmal, aber zu Swift, den da zu findenden Objektstrukturen … oder: was geht schneller? Das Rad zum drölfzigsten Mal erfinden oder mit Suchmaschinen um erleuchtende Suchbegriffe ringen? — Ja, klar, der Teil ist hier OT)</p> https://forum.selfhtml.org/self/2024/jan/13/frage-zum-wiki-artikel-text nix 2024-01-13T19:51:57Z 2024-01-13T19:51:57Z Frage zum Wiki-Artikel „text“ <p>Ist das so beabsichtigt? <a href="/images/2860f136-b24d-11ee-9a6d-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/2860f136-b24d-11ee-9a6d-9c6b00263d9f.png?size=medium" alt="Ein Fehler? Oder ein Fehler! Das ist hier die Frage." loading="lazy"></a> Ich hatte jedenfalls beim Hinsehen erst mal gedacht, da hätte jemand <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Validierungs-Stylesheet" rel="nofollow noopener noreferrer">so ein spezielles Stylesheet</a> liegen lassen.</p> https://forum.selfhtml.org/self/2024/jan/12/scanner-liefert-tab-als-suffix-wie-erkenne-ich-das-keydown-greift-nicht Linuchs 2024-01-12T20:09:58Z 2024-01-12T20:09:58Z ERLEDIGT: Scanner liefert TAB als Suffix, wie erkenne ich das? Keydown greift nicht? <p>Moin,</p> <p><strong>HAT SICH ERLEDIGT, der Tab von Scanner wird als keydown erkannt.</strong></p> <p>heute ist mein EAN Scanner gekommen, damit ich meine Einkäufe erfassen kann.</p> <p>Bisher habe ich EAN per Tastatur eingegeben und ab 3 Stellen kommen per Ajax Vorschläge, von denen ich einen per Klick übernehmen kann. Das soll auch so bleiben:</p> <p><a href="/images/9cbd64ac-b184-11ee-a7f7-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/9cbd64ac-b184-11ee-a7f7-9c6b00263d9f.png?size=medium" alt="" loading="lazy"></a></p> <p>Der Scanner liefert die EAN mit dem Suffix TAB. Dann muss ich keine Vorschläge holen, sondern gezielt diesen einen Datensatz und damit die Felder der form füllen, als ob ich einen Vorschlag gewählt hätte. Falls der Satz fehlt, muss der Artikel neu angelegt werden.</p> <pre><code class="block language-js"><span class="token operator"><</span>input id <span class="token operator">=</span> <span class="token string">"such_ean"</span> type <span class="token operator">=</span> <span class="token string">"text"</span> name <span class="token operator">=</span> <span class="token string">"ean"</span> size <span class="token operator">=</span> <span class="token number">13</span> maxlength <span class="token operator">=</span> <span class="token number">13</span> value <span class="token operator">=</span> <span class="token string">"[such_ean]"</span> title <span class="token operator">=</span> <span class="token string">"such_ean (20)"</span> oninput <span class="token operator">=</span> <span class="token string">"getEan( this )"</span> onblur <span class="token operator">=</span> <span class="token string">"holeEan( this )"</span> <span class="token operator">></span> <span class="token operator">&</span>nbsp<span class="token punctuation">;</span> art_id <span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"id"</span><span class="token operator">></span><span class="token punctuation">[</span>id<span class="token punctuation">]</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> </code></pre> <p>onblur greift sehr wohl, aber das Feld und sein Wert steht der function holeEan nicht mehr zur Verfügung.</p> <p>Mit einem addEventListener auf "such_ean" komme ich auch nicht weiter, da wird ja kein key gedrückt.</p> <p>Und es müssen nicht immer 13 Stellen sei, es gibt kürzere EAN.</p> <p>Hat jemand eine Idee?</p> <p>Gruß, Linuchs</p> <p>P.S. Der Scanner kann auch [Enter] liefern, dann wird aber die form abgeschickt.</p> https://forum.selfhtml.org/self/2024/jan/11/beispielvorschau-kaum-ist-sie-da-schon-ist-sie-wieder-weg Rolf B 2024-01-11T21:48:13Z 2024-01-11T21:48:13Z BeispielVorschau - kaum ist sie da, schon ist sie wieder weg! <p>Hallo alle,</p> <p>ich habe die neue Wikivorlage <code>{{BeispielVorschau}}</code>, die als Alternative zu <code>{{Beispiel}}</code> die direkte Einbindung von iframes in den Wikitext ermöglichen sollte, wieder gelöscht. Wem das nichts sagt, braucht nicht weiterzulesen </p> <p>Löschgrund: <code>{{Beispiel}}</code> kann jetzt beides. Realisiert ist das mit einem Beispielmodul <code>{{LiveBeispiel}}</code>, das man entweder alleine oder zusammen mit <code>{{BeispielCode}}</code>, <code>{{BeispielText}}</code> und <code>{{BeispielWiki}}</code> einsetzen kann. Bei dieser Gelegenheit ist auch der Parameter <code>vorschau-hoehe</code>, den ich nur in <code>{{BeispielVorschau}}</code> eingebaut hatte, mit nach <code>{{Beispiel}}</code> gewandert.</p> <p>Die bisher einzige Seite, auf der <code>{{BeispielVorschau}}</code> verwendet wurde, habe ich umgestellt. Aus</p> <pre><code class="block">{{BeispielVorschau|zeige=Beispiel:Foo.html|vorschau-hoehe=10em}} </code></pre> <p>wird nun</p> <pre><code class="block">{{Beispiel|zeige=Beispiel:Foo.html|vorschau-hoehe=10em| {{LiveBeispiel}} }} </code></pre> <p><em>Edit Rolf b: vorschau<s>e</s></em></p> <p>Das ist zwar verböser, aber dafür innerhalb der Beispiele-Semantik des Wikis logischer. Ich habe die Doku von <code>{{Beispiel}}</code> angepasst.</p> <p>Die Doku anzupassen war die meiste Arbeit. Das JavaScript, das im Hintergrund den iframe und die Tabs erzeugt, konnte das eigentlich schon alles.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/oct/19/herbstliche-mathematik Rolf B 2023-10-19T16:24:16Z 2023-10-19T16:24:16Z Herbstliche Mathematik <p>Hallo,</p> <p>ein echter Agg für den Herbst:</p> <p><a href="/images/fa7be542-69bc-11ee-abcd-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/fa7be542-69bc-11ee-abcd-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Ihr kennt diese Aufgaben ja und wisst, dass das richtige Verstehen der Aufgabe üblicherweise Teil des Problems ist.</p> <p>Viel Spaß </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/jan/10/frage-zum-wiki-artikel-bildwechsler Matthias Wagner mat.wagner.87@gmail.com 2024-01-10T22:39:34Z 2024-01-10T22:39:34Z Frage zum Wiki-Artikel „Bildwechsler“ <p>Hallo Zusammen</p> <p>ich möchte ein Bildwechsler basteln, bei welchem mehrere einzelne Gallerien erstellt werden. Dass heisst, wie kann ich die Bilder von Peru und Garda trennen? Das heisst ich möchte in der Lightbox nur Bilder der jeweiligen id.</p> <p>Kann mir jemand helfen?</p> <p>Danke euch. Grüsse Matthias</p> https://forum.selfhtml.org/self/2024/jan/10/info-kleiner-bug-in-der-beispiel-vorlage-fixed Rolf B 2024-01-10T21:25:19Z 2024-01-10T21:25:19Z Info: Kleiner Bug in der Beispiel-Vorlage - fixed <p>Hallo alle,</p> <p>ich hatte neulich in der Beispiel-Vorlage, mit der wir diese "Quelltext"/"Vorschau" Tabs für die Wiki-Beispiele machen, einen kleinen Bug eingebaut.</p> <p>Hintergrund: Die Tabs sind eigentlich Links und JS macht Tabs draus - und wenn man mit der rechten Maustaste draufdrückt und "in neuem Tab öffnen" sagt, folgt man dem Link</p> <p>Der Bug war: die URLs waren vertauscht. Das ist nun korrigiert. Sorry, Jürgen!</p> <p>Und damit diejenigen, die gerne den Links folgen, auch ohne rechte Maustaste zurecht kommen, habe ich jetzt noch eingebaut, dass ein Doppelklick dem Link folgt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2024/jan/03/selfwiki-wie-fange-ich-an Matthias Scharwies mscharwies@selfhtml.org 2024-01-03T06:12:10Z 2024-01-03T06:12:10Z SELFWiki: Wie fange ich an? + Seiteninspektor <p>Servus!</p> <p>Nachdem in den letzten Wochen mehrfach nach dem „richtigen“ Code-Editor gefragt wurde und ich dann immer wieder auf die eher versteckt liegende Seite Grundlagen/Webprojekte/entwickeln verlinkte, habe ich das alles auf</p> <p><a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F" rel="nofollow noopener noreferrer"><strong>Wie fange ich an?</strong></a></p> <p>umgebogen.</p> <p>Das erste Kapitel muss ich noch überarbeiten.</p> <p>Jetzt meine Frage: Wie würdet ihr <a href="https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen" rel="nofollow noopener noreferrer"><strong>Webprojekte/testen</strong></a> (umbe)nennen?</p> <ul> <li>Webprojekte testen </li> <li>Arbeiten mit dem Seiteninspektor </li> <li>Testen und Entwickeln mit dem Seiteninspektor</li> <li>Der Seiteninspektor - dein Freund und Helfer</li> <li>…</li> </ul> <p>Und wohin würdet ihr das schieben?</p> <ul> <li>im HNR</li> <li>Als Unterseite von Wie fange ich an?</li> <li>Woanders? <ul> <li>Im HTML-Einstieg und auch im CSS-Einstieg wird's angesprochen, dort wäre es aber zu umfangreich.</li> </ul> </li> </ul> <p>Auf jeden Fall muss das dann in die jeweiligen Übersichtsseiten von CSS und HTML rein.</p> <p>Am Besten auch ein Video, wie man das macht. (Ich weiß <a href="/users/243" class="mention registered-user" rel="noopener noreferrer">@Felix Riesterer</a> - für sowas braucht's gute Leute! )</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> https://forum.selfhtml.org/self/2024/jan/05/input-type-range-und-input-type-number-verbinden JürgenB https://www.j-berkemeier.de 2024-01-05T16:51:34Z 2024-01-05T16:51:34Z input type=range und input type=number verbinden <p>Hallo,</p> <p>ich bin der Meinung, dass in vielen Fällen zu einem <code><input type=range></code> ein <code>input type=number></code> gehört. Mit dem Schieber kann schnell den Wert einstellen, aber nur grob, fürs Genaue dient die Zahleingabe. Im jetzigen Entwurf mache ich das so:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Rot<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>255<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>255<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> <p>Die <code>value</code> werden dann durch ein Javascript gekoppelt.</p> <p>Jetzt darf man natürlich ein Label nicht zwei Inputs zuordnen. Gibt es irgendeine „best practice“ hierfür? Oder muss ich da ein Custom-Element für basteln?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2023/dec/14/adventskalender Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-12-14T13:18:45Z 2023-12-14T13:18:45Z Adventskalender <p>Ich muss mal ein Lob für den diesjährigen <a href="https://forum.selfhtml.org/advent/2023" rel="noopener noreferrer">SELFHTML-Adventskalender</a> loswerden. Ich finde ihn gut gelungen. Nichts Hochwissenschaftliches, aber das muss es ja nicht sein. Ein Thema, unterhaltsam, in sich konsistent. Chapeau!</p> <p>Ich hab eine <a href="https://bittersmann.de/talks/adventskalender/" rel="nofollow noopener noreferrer">kleine Sammlung von Adventskalendern</a> zusammengestellt<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> – von aktuellen und solchen, die es leider nicht mehr gibt. Die vorjährigen Türchen bieten aber immer noch viel Wissenswertes.</p> <p>Eine <a href="https://adrianroselli.com/2023/12/web-development-advent-calendars-for-2023.html" rel="nofollow noopener noreferrer">größere Sammlung</a> hat Adrian Roselli. Der SELFHTML-Adventskalender ist darin auch vertreten.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="la">Ad astra per aspera</em> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Den Code für die Seite kann man auch in diesem <a href="https://codepen.io/gunnarbittersmann/pen/poGYGPv" rel="noopener noreferrer">Codepen</a> sehen. Auf <a href="https://noti.st/gunnarbittersmann/UmYXcc/adventskalender" rel="nofollow noopener noreferrer">Notist</a> ist alles nochmal verlinkt. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/jan/09/firefox-119-0-1-console-log-gibt-nichts-aus Linuchs 2024-01-09T09:28:25Z 2024-01-09T09:28:25Z Firefox 119.0.1: console.log() gibt nichts aus <p>Moin,</p> <p>vermutlich mit irgendeinem Update wurde console.log() deaktiviert, alert() zeigt aber an.</p> <p>Wie kann ich das wieder aktivieren?</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2024/jan/08/computerpionier-niklaus-wirth-ist-gestorben JürgenB https://www.j-berkemeier.de 2024-01-08T18:01:15Z 2024-01-08T18:01:15Z Computerpionier Niklaus Wirth ist gestorben <p>Hallo,</p> <p>ein großer Computerpionier ist von uns gegangen.</p> <p><a href="https://ethz.ch/de/news-und-veranstaltungen/eth-news/news/2024/01/der-computerpionier-niklaus-wirth-ist-gestorben.html" rel="nofollow noopener noreferrer">https://ethz.ch/de/news-und-veranstaltungen/eth-news/news/2024/01/der-computerpionier-niklaus-wirth-ist-gestorben.html</a></p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2024/jan/08/zu-css-deklarationen-mit-einer-zeichenkette-als-wert JimKnopf 2024-01-08T07:17:21Z 2024-01-08T07:17:21Z zu CSS-Deklarationen mit einer Zeichenkette als Wert <p>Moin moin,</p> <p>unten auf der <em>problematischen Seite</em> unter <em>Beachten Sie</em> heißt es:</p> <blockquote> <ol start="2"> <li><ul style=list-style-type: ;"></li> </ol> </blockquote> <p>Ein Universalattribut mit einem vereinzelten Anführungszeichen - das sieht sehr verdächtig aus. Sollte das vielleicht heißen:</p> <ol start="2"> <li><ul style="list-style-type: ';'"></li> </ol> <p>Darüber hinaus fände ich einen Hinweis hilfreich, wie man allgemein beim HTML-style-Attribut mit CSS-Deklarationen umgehen sollte, die eine Zeichenkette als Wert haben und daher irgend eine Form von Anführungszeichen benötigen. Ich denke es ist nicht verkehrt, vor der möglichen Kollision mit den Anführungszeichen des style-Attributs zu warnen. Mir scheint <a href="https://wiki.selfhtml.org/wiki/HTML/Attribute/style" rel="nofollow noopener noreferrer">HTML/Attribute/style</a> ein guter Ort für solch einen Hinweis zu sein.</p> <p>Schließlich gibt es noch eine Inkonsistenz bei <em>list-style-position</em>: <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/list-style-position" rel="nofollow noopener noreferrer">CSS/Eigenschaften/list-style-position</a> nennt als Standardwert <em>inside</em>. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Listen/Gestaltung_mit_CSS#list-style-position" rel="nofollow noopener noreferrer">HTML/Tutorials/Listen/Gestaltung mit CSS --> list-style-position</a> dagegen bezeichnet <em>outside</em> als Standardwert. Mein Firefox hält sich offenbar an <em>outside</em>.</p> <p>Gruß... JimKnopf</p> <div class="signature">-- <br> die Bäume im Wald haben ihre Wurzeln unten </div> https://forum.selfhtml.org/self/2024/jan/08/code-editoren JimKnopf 2024-01-08T05:02:12Z 2024-01-08T05:02:12Z Code-Editoren <p>Servus,</p> <p>mein Lieblings-HTML-Editor unter Linux ist Bluefish. Bluefish kann eigentlich alles was Kate kann, bietet aber zusätzlich Unterstützung für Codesnippets (spart viel Arbeit!). Ich schätze auch besonders Bluefishs leistungsfähige Such- bzw. Such- und Ersetzungsfunktion. Die bietet leicht einstellbar sehr nützliche Optionen, z.B. ob nur die aktuell bearbeitete Datei oder alle von Bluefish geöffneten Dateien einbezogen werden sollen.</p> <p>Laut <a href="https://www.heise.de/download/product/bluefish-7119" rel="nofollow noopener noreferrer">heise Download</a> soll es Bluefish auch für Windows und und Mac geben, ich kenne ihn aber nur unter Linux. Bei Kubuntu gehört er zur Standardausstattung. Auf meinem Kubuntu-System läuft er sehr stabil.</p> <p>Ich schlage vor, Bluefish unter <a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/der_richtige_Code-Editor#Editoren_f.C3.BCr_Linux.2FUnix-Derivate" rel="nofollow noopener noreferrer">Editoren für Linux/Unix-Derivate</a> hinzuzufügen.</p> <p>Gruß... JimKnopf</p> <p>P.S.: ich bin z.Zt. bei meiner Tochter und meinem Schwiegersohn in Oberbayern zu Besuch, deshalb heute mal eine bayerische Grußform.</p> <div class="signature">-- <br> die Bäume im Wald haben ihre Wurzeln unten </div> https://forum.selfhtml.org/self/2024/jan/07/frage-zum-wiki-artikel-aria Robert B. 2024-01-06T23:30:14Z 2024-01-06T23:30:14Z Frage zum Wiki-Artikel „aria-*“ <p>Hallo,</p> <p>ich verstehe die Angaben im verlinkten Artikel nicht. Was soll mir zum Beispiel folgendes sagen (Original Copy&Paste aus dem Wiki-Artikel)?</p> <blockquote> <p><code><spanid="aria-autocomplete">aria-autocomplete</span></code><br> Zeigt an, ob bei Benutzereingaben Vorschläge zur Auto-Vervollständigung angeboten werden.</p> </blockquote> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2024/jan/05/navigation-von-codepen-ist-meine-meinung-nach-fehlehaft Mick62 2024-01-05T21:25:17Z 2024-01-05T21:25:17Z Navigation von Codepen ist meine Meinung nach Fehlehaft <p>Dort habe ich ein für mich schöne Navbar gefunden, doch nach der responsiven Ansicht, die mir auch gefällt, ist das Menue, beim vergrößern bis auf das Logo leer. Ist hier jemand der den Fehler im CSS bzw. Java-Script erkennt und mir verrät?</p> <p><a href="https://codepen.io/KevinohKelvin/pen/MMQGOj" rel="noopener noreferrer">https://codepen.io/KevinohKelvin/pen/MMQGOj</a></p> https://forum.selfhtml.org/self/2023/dec/20/self-wiki-farbe Matthias Scharwies mscharwies@selfhtml.org 2023-12-20T05:09:11Z 2023-12-20T05:09:11Z Self-Wiki: Farbe <p>Guten Morgen!</p> <p>grad <a href="https://bildung.social/@ct_bergstrom@fediscience.org/111593244196832542" rel="nofollow noopener noreferrer">auf Mastodon gefunden</a>:</p> <blockquote> <p>So color spaces are really starting to piss me off. Anyone have a favored tutorial / explainer about what they are, how they work, and how to use them to e.g. post photos online?</p> </blockquote> <p><a href="/images/eb432a4e-9ca3-11ee-a4c0-9c6b00263d9f.png" rel="noopener noreferrer"><img src="/images/eb432a4e-9ca3-11ee-a4c0-9c6b00263d9f.png?size=medium" alt="Some bullshit about color spaces from deep in the bowels of Lightroom's export menu system." title="Some bullshit about color spaces from deep in the bowels of Lightroom's export menu system." loading="lazy"></a></p> <p>Die Kommentare, die <em><strong>für Fotos</strong></em> weiterhin RGB empfehlen, überwogen.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <hr> <p>Wir hatten ja auch angefangen, den Bereich <a href="https://wiki.selfhtml.org/wiki/Farbe" rel="nofollow noopener noreferrer"><strong>Farbe</strong></a> zu überarbeiten.</p> <p>Durch das CSS Color Module level 4 (Level 6 ist schon in der Pipeline) ergeben sich da viele Neuerungen.</p> <p><strong>Wie können wir hier Anfänger zu einem Einstiegs-Tutorial mit den Basics leiten, Profis aber auf der Übersichtseite mittels eines Aha-Effekts hin zum Color Module Level 4 verlocken?</strong></p> <p><a href="/users/68" class="mention registered-user" rel="noopener noreferrer">@JürgenB</a> fragte mehrfach, wie Anfänger denn anfangen sollten.</p> <h3><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbangaben" rel="nofollow noopener noreferrer"><strong>Farbe/Farbangaben</strong></a></h3><p>Das wird hier imho ganz gut erklärt, das <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbangaben#Die_VGA-Palette_.2816_Farben.29" rel="nofollow noopener noreferrer">Beispiel</a> ist evtl. etwas zu einfach. Was meint ihr?</p> <p>Die bisher gezeigte Tabelle zu den 216 websicheren Farben für GIF ist rausgeflogen, zu Recht?</p> <p>Die ca. 150 Farbnamen sind für ein Farbkonzept problematisch,</p> <blockquote> <p>„<em>Deshalb ist darkgray (aus X11) heller als gray (aus den VGA-Farben).</em>“</p> </blockquote> <p>→ Also stellen wir im nächsten Kapitel 16.7 Mio Farben vor:</p> <h3><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle" rel="nofollow noopener noreferrer"><strong>Farbe/Farbmodelle</strong></a></h3><h4><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#RGB-Modell_.28Rot.2FGr.C3.BCn.2FBlau-Mischung.29" rel="nofollow noopener noreferrer">RGB-Modell (Rot/Grün/Blau-Mischung)</a></h4><p>RGB-Raum, der erst am Ende als sRBG weiter spezifiziert wird.</p> <ul> <li>seit Februar '22 haben wir die Leerzeichen-separierten Werte im ganzen Wiki</li> <li>damals fiel <code>rgba()</code> heraus, mittlerweile sind <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#Transparenz_mit_Alphakanal" rel="nofollow noopener noreferrer">Transparenzen</a> wieder ein ganzer Absatz.</li> <li><strong>Neu:</strong> Es gibt jetzt interaktive Visualisierungen, die als Beispiel angelegt sind. Langfristig soll hier die Vorschau-Ansicht der Beispiel-Vorlage aktiviert werden, damit diese <a href="https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Rgb-1.html#view_result" rel="nofollow noopener noreferrer">Farbmischer</a> gleich zu sehen sind.</li> <li>Benötigt man bei den Hex-Werten eine Erklärung des Begriffs? Die deutsche Wikiseite ist eher schwierig, die englische besser. Eine Umrechnungstabelle würde eher ins Glossar passen. <strong>Was meint ihr?</strong></li> </ul> <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> hatte eine zündende Idee,<code>hsl()</code> interaktiv zu visualisieren, das kommt demnächst!</p> <h4><a href="https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#CIE-LAB_Farbmodelle" rel="nofollow noopener noreferrer">CIE-LAB_Farbmodelle</a></h4><p>Das war uns allen neu, und ist erst mal nur der Vollständikeit halber erwähnt.</p> <ul> <li>welche Farbräume müssten jetzt kommen? Als nächster Abschnitt oder in einem neuen Kapitel?</li> </ul> <p>Ich persönlich würde hier noch lab(), lch() aber auch oklab() und oklch() besprechen.</p> <p><strong>Hier sind wir uns überhaupt nicht klar, ob man die Erklärung zu OKLAB-Farbraum gleich zum CIE-LAB schieben soll und ob man dort Beispiele oder eher Infografiken benötigt.</strong></p> <h3>Farbinterpolation</h3><p>Das Kapitel der Farbinterpolation beschreibt dann für Fortgeschrittene die Mischung bei Verläufen, Filtern und color-mix().</p> <p>Große Frage für mich:</p> <p>Wann ...</p> <ul> <li>ein Frickl-Beispiel, auf das extra geklickt werden muss?</li> <li>ein inline-div, das evtl. in älteren Browser nicht angezeigt wird?</li> <li>eine (SVG)-Grafik, die im Text steht, aber wsl. nur aus RGB-Farben besteht.</li> </ul> <p><strong>Wer hier Fachwissen zu Farben hat und das mit uns teilen möchte: Herzlich willkommen!</strong></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Die Signatur findet sich auf der Rückseite des Beitrags. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>advice my photography professor gave me: color spaces are like the box of crayons you have to work with when you make an image. some boxes will have more kinds of crayons than others, but generally you can get away with using the basic box of crayons (sRGB). the bigger boxes of crayons are usually made for specific purposes/to be used with specific devices. most screens and monitors really work best with sRGB anyways, so even if you put up an image you made with the bigger box of crayons, those other screens won't be able to replicate it with their own crayons. basically: use sRGB unless something or someone is specifically asking you to use something else. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2024/jan/05/womit-lasst-sich-center-bei-svg-grafiken-ersetzen fietur 2024-01-05T13:38:20Z 2024-01-05T13:38:20Z Womit lässt sich <center> bei SVG-Grafiken ersetzen? <p>Hallo,</p> <p>alle Jahre wieder ist eine Überarbeitung der eigenen Seite an der Reihe. Und dazu gehört dann u.a. der Check mit dem HTML-Validator. Und seit Jahren wird <code><center></code> angemeckert und vorgeschlagen, das über CSS zu erledigen. Verständlich, aber bisweilen umständlich. Denn <code>.center {margin-left:auto; margin-right:auto; text-align:center;}</code> ist leider nicht äquivalent zu <code><center></code>.</p> <p>Konkret geht es bei mir um die Platzierung von einem oder mehreren Symbole in einer Tabellenzelle.</p> <p>Die SVG-Symbole werden im CSS definiert:</p> <pre><code class="block">.svg_symbol { width:1em; height:1em; background-repeat:no-repeat; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 10 10" fill="%23ff0000"%3E%3Crect x="0" y="0" width="10" height="10"/%3E%3C/svg%3E'); } </code></pre> <p>Im HTML zeigt</p> <p><code><td><center><div class=svg_symbol></div></center></td></code></p> <p>das Symbol wie gewünscht mittig an. Mit der vorgeschlagenen Ersetzung</p> <p><code><td class=center><div class=svg_symbol></div></td></code></p> <p>erscheint das Symbol mitnichten mittig, sondern links ausgerichtet. Mit ausschließlich Text in der Zelle erscheint dieser korrekt mittig. Beim Mischen von Text und Symbol aber wird auch der Text linksbündig. Das verwundert mich gelinde gesagt etwas und unterscheidet die CSS-Lösung von <code><center></code> und macht sie so erstmal unbrauchbar.</p> <p>Oder doch nicht - wie müsste denn <code><center></code> ersetzt werden?</p> <p>Mit einem anderen Ansatz</p> <pre><code class="block"><tr><td div class=center><svg width="1em" viewBox="0 0 10 10" fill="#ff0000"><rect x="0" y="0" width="10" height="10"/></svg></div></td></tr> </code></pre> <p>funktioniert zwar das Zentrieren. Aber: Hunderte von Symbolen in meiner Tabelle blähen das HTML unnötig auf. Und die Symbole sollten ja gerade raus aus dem HTML.</p> <p>...und ups! HTML-konform soll kein <code><center></code> verwendet werden, aber dann wird das im CSS liegende Symbol nicht mittig. Und mit der CSS-Lösung <code>.center</code> funktioniert nur das HTML-SVG, nicht aber das "Trennung von Form und Inhalt"-konforme CSS-SVG.</p> https://forum.selfhtml.org/self/2024/jan/05/umleitung-auf-404-fehlerseite-in-einem-verzeichnis-verhindern Gagga https://www.Lotterfee.com 2024-01-05T17:01:24Z 2024-01-05T17:01:24Z Umleitung auf 404-Fehlerseite in einem Verzeichnis verhindern <p>Hallo!</p> <p>Innerhalb meiner Wordpress-Seite existiert eine Umleitung auf eine 404-Fehlerseite. Das ist auch gut so. Allerdings will ich die Umleitung für den Zugriff auf ein Verzeichnis verhindern, auf das lediglich aus meiner Software heraus zugegriffen wird.</p> <p>Ist das möglich?</p> <p>Gruß Gagga</p> https://forum.selfhtml.org/self/2024/jan/05/benotige-hilfe-bei-eigenem-website-template Ch3fK0cH 2024-01-05T16:16:16Z 2024-01-05T16:16:16Z benötige hilfe bei eigenem website template <p>Guten Abend liebe community,</p> <p>und zwar geht es um folgendes, ich bin gerade dabei mir das HTML und das CSS bei zu bringen.</p> <p>Ich habe nun um einfach mal die Theorie, in der Praxis umzusetzen mich an ein eigenes Template basierend auf HTML und CSS versucht.</p> <p>Nun stehe ich vor einem Problem das ich selber scheinbar nicht gelöst bekomme weil mir einfach mal die erfahrung fehlt.</p> <p>Und zwar habe ich versucht die navigationsbar über ein Slider was allerdings noch aus einem Bild besteht zu setzen, und die Navigationsbar Sticky an den oberen rand der website zu sticken mit "position: Sticky; und top: 0px;"</p> <p>nun habe ich aber einige andere probleme und das alle anderen container die ich anlegen möchte irgendwie auch alle sich ganz oben an der website anheften obwohl sie sich unter dem slider anheften sollen.</p> <p>könnte sich vieleicht jemand mal meine HTML und meine CSS anschauen und mir was wo ich dort fehler verbaut habe? und wie ich die probleme am besten lösen könnte?</p> <p>die Navigationsbar habe ich von einem anderen Forum übernommen und versucht entsprechend meines designs anzupassen.</p> <p>ich bedanke mich schonmal im vorraus das ihr euch die zeit und mühe macht mir zu helfen.</p> <p><a href="/images/9aeb7dd4-abe5-11ee-8878-9c6b00263d9f.jpg" rel="noopener noreferrer"><img src="/images/9aeb7dd4-abe5-11ee-8878-9c6b00263d9f.jpg?size=medium" alt="Auf diesem Screenshot ist der about container im rotenbereich ich möchte ich aber gerne im Grünen feld direkt unter dem Sliderbild haben und das die navigation beim scroll quasi mit scrollt." loading="lazy"></a></p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cs2 Gaming clan since 2015<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cs Clan since 2024<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>saints gaming<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400<span class="token punctuation">'</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>stylesheet<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>text/css<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/css/style.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stroke<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>standard-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img/headerlogo.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Downloads<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nice staff<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>standard-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slider-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-highlighted<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>welcome to saints gaming<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>we are competetive<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis beatae aliquid eos quae atque illum dignissimos est nihil delectus quo? <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>standard-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-highlighted<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>welcome to saints gaming<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>we are competetive<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis beatae aliquid eos quae atque illum dignissimos est nihil delectus quo? <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css">*<span class="token comment">/* (*) alle elemente selectieren*/</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Roboto'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.standard-container</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 1080px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav img</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav img:after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* NAVIGATION */</span> <span class="token selector">nav</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #000000a6<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 30px 0<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 5px 0px orange<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul li a</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span> <span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul li a, nav ul li a:after, nav ul li a:before</span> <span class="token punctuation">{</span> <span class="token property">transition</span><span class="token punctuation">:</span> all .5s<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul li a:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #555<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* stroke */</span> <span class="token selector">nav.stroke ul li a</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav.stroke ul li a:after</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 0%<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'.'</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav.stroke ul li a:hover:after</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Slider Content*/</span> <span class="token selector">.slider</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span> 0.6<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>#<span class="token punctuation">)</span></span><span class="token punctuation">;</span><span class="token comment">/*../img/big.jpeg*/</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.slider-content</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 250px 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.slider-content h2</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 900<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.slider-content p</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* About Content*/</span> <span class="token selector">.about</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> burlywood<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2024/jan/05/eigene-fehlermeldung-bei-mailserver-connect-fail Der Frank 2024-01-05T16:14:37Z 2024-01-05T16:14:37Z Eigene Fehlermeldung bei Mailserver Connect Fail <p>Guten Abend,</p> <p>und zwar teste ich gerade die Funktionen meines Mail Formulars:</p> <pre><code class="block language-php"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">mail</span><span class="token punctuation">(</span><span class="token variable">$to</span><span class="token punctuation">,</span> <span class="token variable">$subject</span><span class="token punctuation">,</span> <span class="token variable">$message</span><span class="token punctuation">,</span> <span class="token variable">$headers</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"Email erfolgreich versandt."</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">header</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"HTTP/1.1 500 Internal Server Error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">echo</span> <span class="token string double-quoted-string">"SO EIN UNGLÜCK! ...(Beschwichtigende Worte)"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Teste ich das am Localhost, kann natürlich keine Verbindung zu irgendeinem "externen" Mailserver hergestellt werden, daher sollte <code>SO EIN UNGLÜCK! ...(Beschwichtigende Worte)</code> ausgegeben werden.</p> <p>HOWEVER,</p> <p>ich bekomme auch die Warnung <code><br /> <b>Warning</b>: mail(): Failed to connect to mailserver at // ETC.</code> jedes Mal in mein Frontend mitgeliefert.</p> <p>Wie lässt sich das unterbinden?</p> <p>Vielen Dank durch die Bank, Frank</p> https://forum.selfhtml.org/self/2024/jan/05/frage-zum-wiki-artikel-drag-and-drop onder 2024-01-05T17:56:02Z 2024-01-05T17:56:02Z Frage zum Wiki-Artikel „Drag_and_Drop“ <p>hi bei dieser drag&drob vorlage kann ich den button neues verschoiebbares block erstellen in der vorlage nirgens finden ist es irgenwo versteckt?</p> https://forum.selfhtml.org/self/2024/jan/04/frage-bzw-bitte-zum-wiki-artikel-loading Robert B. 2024-01-04T21:07:36Z 2024-01-04T21:07:36Z Frage bzw. Bitte zum Wiki-Artikel „loading“ <p>Hallo zusammen,</p> <p>durch den <em>HTMHell Adventskalender-Eintrag für den 14. Dezember</em> bin ich auf <a href="https://www.htmhell.dev/adventcalendar/2023/14/#2-optimise-images-optimise-them-again-and-then-once-more-for-good-luck" rel="nofollow noopener noreferrer"><code>loading=lazy</code></a> gestoßen, was wir auch im Wiki haben. Ich habe das dortige Beispiel ergänzt, beim Testen mit meinen Webseiten allerdings nur im Netzwerk-Tab an Hand des Origins einen Hinweis gefunden, weil die Bilder trotzdem alle sofort geladen worden sind. Kann das eventuell mit einer „schwergewichtigeren“ Seite oder an Hand eigenen Wissens verifizieren?</p> <p>Vielen Dank und viele Grüße<br> Robert</p> https://forum.selfhtml.org/self/2024/jan/03/php-module-api-und-php-api-unterschiedlich KevinB 2024-01-03T13:15:07Z 2024-01-03T13:15:07Z PHP Module API und PHP API unterschiedlich <p>Hallo (und ein frohes neues Jahr),</p> <p>ich habe unter Linux (Ubuntu 22.0.4.3 LTS, PHP 8.3) ein PHP-Modul kompiliert über</p> <pre><code class="block">phpize ./configure make make test </code></pre> <p>Bei <code>make test</code> wird aber dennoch angemeckert, dass die module API unterschiedlich ist:</p> <pre><code class="block">Module compiled with module API=20190902 PHP compiled with module API=20230831 </code></pre> <p>Ich habe es auch schon versucht mit <code>./configure --with-php-config=/usr/bin/php-config</code> Leider auch ohne Änderung.</p> <p>Wie kann ich das Module so kompilieren, damit die API Version übereinstimmt? Oder kann ich (dreist) einfach die Module API Version ändern?</p> <p>LG Kevin</p> https://forum.selfhtml.org/self/2023/dec/21/blend-mode-saturation-ich-kapiere-es-nicht Rolf B 2023-12-21T21:43:17Z 2023-12-21T21:43:17Z blend-mode = "saturation" - Ich kapiere es nicht. <p>Hallo alle,</p> <p>ich möchte einen HSL Farbkreis so modifizieren, dass die Farben darin zur Mitte hin ihre Sättigung verlieren. Eigentlich also das, was ich <a href="https://forum.selfhtml.org/self/2023/dec/20/self-wiki-farbe/1812295#m1812295" rel="noopener noreferrer">hier</a> gezeigt habe - aber ich möchte das Selbermalen des Farbkreises vermeiden und dachte, ich könnte den conic-gradient des Farbkreises mit einem radial-gradient überlagern und dabei einen Überblendmodus einsetzen, der die Sättigung herausnimmt.</p> <p>Das Ergebnis sollte dann so aussehen ("handgemalt" im Canvas):</p> <p><img src="/images/ed0c362a-a042-11ee-b852-9c6b00263d9f.png" alt="" loading="lazy"></p> <p>Das <strong>sollte</strong> nach meinem Verständnis mit <code>background-blend-mode: saturation</code> gehen, wenn ich die beiden folgenden Bilder überblende. Links ein Farbkreis mit grauem Zentrum (20px Radius, erstellt durch Überlagerung eines konischen Gradienten mit einem Radialgradienten, der ab 20px transparent ist), rechts ein Radialverlauf mit einem Innenraum, der 0% Sättigung hat (20px Radius, wie links) und 100% außen. Bei Überblendmodus "saturation" <strong>sollte</strong> die Farbe der Sättigungsmaske wurscht sein.</p> <p><img src="/images/cbabb712-a047-11ee-a112-9c6b00263d9f.png" alt="" loading="lazy"></p> <p>Auf CSSisch gesprochen, sieht es so aus:</p> <pre><code class="block language-css"><span class="token selector">canvas, div</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 1/1<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div</span> <span class="token punctuation">{</span> <span class="token property">--conic</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span> circle at center<span class="token punctuation">,</span> #808080 20px<span class="token punctuation">,</span> transparent 20px<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">conic-gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span> yellow<span class="token punctuation">,</span> lime<span class="token punctuation">,</span> cyan<span class="token punctuation">,</span> blue<span class="token punctuation">,</span> magenta<span class="token punctuation">,</span> red<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">--radial</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span> circle closest-side at center<span class="token punctuation">,</span> #808080 20px<span class="token punctuation">,</span> #ff0000<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div:nth-child(1)</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--conic<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-blend-mode</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div:nth-child(2)</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radial<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Dass sich das Farbrad mit <code>in hsl longer hue, red, red</code> einfacher erstellen lässt, weiß ich, aber der Fuchs versteht das nicht und für den springe ich ja hier durch den Stöckchenwald.</p> <p>Ja. Und dann kommt das dritte div, das beides zusammenfügen soll:</p> <pre><code class="block language-css"><span class="token selector">div:nth-child(3)</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--radial<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--conic<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-blend-mode</span><span class="token punctuation">:</span> saturation<span class="token punctuation">,</span> normal<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das Ergebnis sieht im Vergleich mit der Wunschvorstellung so aus: (<a href="https://jsfiddle.net/Rolf_b/nL2q17mp/" rel="noopener noreferrer">JSFiddle dazu</a>)</p> <p><img src="/images/3a19318e-a048-11ee-8c7f-9c6b00263d9f.png" alt="" loading="lazy"> <img src="/images/ed0c362a-a042-11ee-b852-9c6b00263d9f.png" alt="" loading="lazy"></p> <p>Mal zu hell, mal zu dunkel, sowohl in Chrome wie auch in Firefox - was läuft da falsch mit diesem Überblendungsmodus? Das Fiddle zeigt die Quellen, den CSS-Mix und die durch Ringe erzeugte Wunschvorstellung im Canvas - im Fuchs natürlich kaputt.</p> <p>Oder verstehe ich diesen Überblendmodus nur nicht? Das ist nämlich kein alleiniges CSS Problem - wenn ich im Canvas die globalCompositeOperation auf "saturation" setze und die CSS-Gradienten im Canvas male, passiert exakt das gleiche. Ich habe ein Fiddle gemacht, das genau das tut: <a href="https://jsfiddle.net/Rolf_b/cf8y0ghx/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/cf8y0ghx/</a>. Mit einem Mouseover kann man die Farbwerte erkunden (rgb2hsl aus dem Wiki-Farbwähler). Man sieht, wie die L-Werte wild herumspringen, obwohl sie in beiden Quell-Bitmaps bei 50% bleiben.</p> <p>Ist dieser Überblendmodus einfach kaputt? MDN schreibt: saturation nimmt Hue und Lightness der unteren Bitmap sowie die Saturation der oberen Bitmap und baut das zur Ergebnisfarbe. Jedoch…</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/dec/30/css-style-wird-nicht-vererbt Christian 2023-12-30T16:13:43Z 2023-12-30T16:13:43Z CSS Style wird nicht vererbt <p>Hallo, ich habe aktuell ein seltsames Problem, welches ich mal auf den folgenden einfachen Code runtergebrochen habe:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> test1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>test2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Der Text "test1" ist weiß. Aber müsste nicht der Text "test2" ebenfalls weiß sein? Ich meine, dass das immer so gewesen ist. Aber dem ist nicht so. Das wirft auf einmal meine ganze Homepage durcheinander, wenn ich da für jede innere Tabelle oder andere "Innereien" jeweils auch einen Style vorgeben muss. (Im Original sind es Klassen, aber wie gesagt, hier mal vereinfacht dargestellt)</p> <p>Ich bin echt ein wenig am verzweifeln...</p> <p>Im Original ist die Klasse, die die weiße Schrift regelt, auch dafür zuständig, die Hintergrundfarbe und vor allem die transparenz einzustellen. D.h. wenn ich die gleiche Klasse nochmals für test2 nehmen würde, hätte ich zwei halbtransparente Hintergründe übereinander. Das will ich nicht.</p> <p>Das hat so auch all die Jahre funktioniert, ich bin mir ganz sicher. Nur jetzt auf einmal nicht mehr.</p> <p>Was ist denn da los?</p> https://forum.selfhtml.org/weblog/2023/dec/01/advent-advent-das-raumschiff-brennt Rolf B https://forum.selfhtml.org/advent/2023 2023-12-01T09:41:18Z 2023-12-01T09:41:18Z Advent, Advent, das Raumschiff brennt? <p>Adventskalender 2023</p> <p>Liebe Selfhtml-Freunde,</p> <p>SELFHTML e. V. wünscht euch eine schöne und besinnliche Adventszeit. Lasst euch nicht zu sehr vom allzu plötzlich bevorstehenden Weihnachten stressen.</p> <p>Bei der Suche nach Themen für einen Adventskalender sind wir auf das Wirrwarr von Sonderzeichen gestoßen, die bei der Entwicklung von Software verwendet werden. Es gibt eine Menge davon, sie kommen oft genug auch noch in Kombination vor und das schlimmste ist, in jeder Programmiersprache bedeuten sie etwas anderes.</p> <p>Die Kalenderkärtchen sind als Teaser gedacht, die euch zu den entsprechenden Seiten im Selfhtml Wiki führen. Es kann gut sein, dass wir nicht alle Bedeutungsvarianten eines Zeichens oder Operators gefunden haben. Gebt uns dann gerne einen Tipp.</p> <p>Viel Spaß damit - <a href="https://forum.selfhtml.org/advent/2023" rel="noopener noreferrer">hier geht's zum Kalender</a><br> <em>Rolf</em></p> <div class="signature">-- <br> ️ </div> https://forum.selfhtml.org/weblog/2023/dec/24/frohe-weihnachten Matthias Scharwies mscharwies@selfhtml.org 2023-12-24T04:44:32Z 2023-12-24T04:44:32Z Frohe Weihnachten! <p>In den letzten Jahren sprach ich immer wieder von Krisen und Umbruch - mittlerweile scheint das schon normal zu sein.</p> <p>Andererseits zeigte die Ungewissheit im Spätsommer auch, was es alles Gutes gab.</p> <p>Unser Forum läuft dank Christian Kruse störungsfrei und - auch wenn die Frequenz langsam abnimmt - mittlerweile in einer freundlichen Atmosphäre.</p> <p>Das Wiki wächst immer weiter sowohl in die Tiefe als auch in die Breite. Seit März gibt es sogar eine Referenz und Tutorials zu <a href="https://wiki.selfhtml.org/wiki/MathML" rel="nofollow noopener noreferrer">MathML</a>, das jetzt in allen Browsern unterstützt wird. Die Zahl der Autoren bleibt erfreulich konstant, wobei hier Rolf B als Fachkundiger und stets Aktiver besonders zu danken ist. Auch der diesjährige Adventskalender ist ihm und seinen Ideen zu verdanken!</p> <p>Der Verein hat seit November einen neuen Vorstand. Herzlich willkommen Rolf und Wiebke!</p> <p>Monatliche Vorstandstreffen und drei Developer Teams sollen SELFHTML künfitg stetig weiterentwickeln.</p> <p>Im Namen des Vereins SELFHTML e.V. wünsche ich allen Mitgliedern, Förderern und Freunden des Vereins ein frohes Weihnachtsfest sowie ein gesundes und auch sonst rundum erfolgreiches neues Jahr.</p> https://forum.selfhtml.org/weblog/2023/dec/04/htmlhell-der-etwas-andere-adventskalender Matthias Scharwies mscharwies@selfhtml.org 2023-12-04T12:31:14Z 2023-12-04T12:31:14Z HTMLHell - „Da brauchst du kein JavaScript für!“ <p>Auch HTMLHell von Manuel Matuzović hat dieses Jahr einen <a href="https://www.htmhell.dev/adventcalendar/" rel="nofollow noopener noreferrer">Adventskalender</a>, der sich - anders als der Name vermuten lässt - für semantisches HTML und ein barrierefreies, benutzerfreundliches Web einsetzt.</p> <p>Am 02. Dezember fand ich dort den empfehlenswerten Artikel <a href="https://www.htmhell.dev/adventcalendar/2023/2/" rel="nofollow noopener noreferrer">„You don't need JavaScript for that“</a> von Kilian Valkhof, von dem ich hier die Kernaussage übersetzt wiedergeben möchte:</p> <h2>Das Prinzip der geringsten Leistung</h2> <p>(<em><strong>the rule of least power</strong></em>) <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>„Dies ist eines der Grundprinzipien der Webentwicklung und bedeutet, dass Sie die <strong>am wenigsten leistungsfähige Sprache für einen bestimmten Zweck wählen sollten.</strong></p> <p>Im Web bedeutet dies, dass man HTML gegenüber CSS und dann CSS gegenüber JS vorzieht. JS ist die vielseitigste der drei Sprachen, weil man damit beschreibt, wie der Browser reagieren soll, aber es kann auch kaputt gehen, es kann nicht geladen werden und es braucht zusätzliche Ressourcen zum Herunterladen, Parsen und Ausführen. Außerdem ist es sehr einfach, Tastaturbenutzer und Menschen, die unterstützende Technologien verwenden, auszuschließen.</p> <p>Im Gegensatz zu JS, das imperativ ist, sind HTML und CSS deklarativ. Man sagt dem Browser, <strong>was er tun soll</strong>, <strong>nicht wie</strong> er es tun soll. Das bedeutet, dass der Browser selbst entscheiden kann, wie er es macht, und zwar auf die effizienteste Art und Weise.</p> <p>Da HTML- und CSS-Funktionen vom Browser gehandhabt werden, sind sie leistungsfähiger, nativer, anpassungsfähiger an Benutzerpräferenzen und allgemein zugänglicher. Das bedeutet nicht, dass dies immer der Fall sein wird (vor allem, wenn es um die Zugänglichkeit geht), aber wenn der Browser die schwere Arbeit für Sie erledigt, werden Ihre Endbenutzer im Allgemeinen eine bessere Erfahrung haben.“</p> <h2>Beispiele</h2> Kilian demonstriert dies an Beispielen, die wir ähnlich auch im Wiki haben. <h3>Flip-Flop-Schalter</h3> <p>Ein <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#FlipFlop-Schalter" rel="nofollow noopener noreferrer">FlipFlop-Schalter</a> oder toggle-Switch ist ein Software-Feature, das zwischen zwei Zuständen hin- und her schaltet.</p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-Tut-button-5.html" width="900" height="550" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#FlipFlop-Schalter">SELFHTML</a> </p> </iframe> <p>Wie Sie im Beispiel sehen, funktioniert so etwas <strong>ohne</strong> Javascript.</p> <p>Ich habe zwei Empfehlungen:</p> <ol> <li>Nutzen Sie das Standardverhalten der HTML-Elemente!</li> <li>Lesen Sie <a href="https://www.htmhell.dev/adventcalendar/2023/2/" rel="nofollow noopener noreferrer">den Artikel von Kilian Valkhof</a>!<br> Er demonstriert noch weitere Anwendungsfälle, in denen auf JavaScript verzichtet werden kann!<br> (Auch die anderen Artikel des Adventskalenders sind lesenswert!)</li> </ol> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://en.wikipedia.org/wiki/Rule_of_least_power" rel="nofollow noopener noreferrer">Rule of least power</a> (wikipedia.en.org) <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2023/nov/30/blue-beanie-day Matthias Scharwies mscharwies@selfhtml.org 2023-11-30T05:13:34Z 2023-11-30T05:13:34Z Blue-Beanie-Day <p>Heute, am 30.11., ist wieder <a href="https://de.wikipedia.org/wiki/Blue_Beanie_Day" rel="nofollow noopener noreferrer"><strong>Blue Beanie Day</strong></a>; ein Aktionstag, um auf die Wichtigkeit von <a href="https://wiki.selfhtml.org/wiki/Webstandards" rel="nofollow noopener noreferrer"><strong>Webstandards</strong></a> aufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.</p> <p>Webstandards sind dort nicht nur die Festlegungen durch die Spezifikationen, sondern das Bemühen Webseiten durch best practices für alle benutzbar zu machen. SELFHTML bemüht sich diesen Gedanken an Barrierefreiheit ständig im Blick zu halten.</p> https://forum.selfhtml.org/weblog/2023/nov/26/selfhtml-410-gone Matthias Scharwies mscharwies@selfhtml.org 2023-11-26T12:11:13Z 2023-11-26T12:11:13Z SELFHTML - 410 GONE? <p>Am 24.-26.11.2023 fand das jährliche SELF-Treffen in Mainz statt. Im Vorfeld gab es Stimmen, dass man die Gelegenheit zu einer Diskussion nutzen sollte, ob der Verein heute noch handlungsfähig sei und ob es nicht besser sei, ihn jetzt in Ruhe abzuwickeln. Trübe Stimmung im trüben Novemberwetter - als mich Felix plötzlich auf eine rote Ampel hinwies. Das Mainzelmännchen zauberte uns ein Lächeln ins Gesicht!</p> <p>Höhepunkt für mich war der Freitagabend im Eisgrub-Bräu. Wie jedes Jahr bangte ich, ob sich der reservierte Tisch denn überhaupt füllen würde. Keine Sorge - im Minutentakt tauchten reisegestresste SELFer auf, die sich im urigen Bierkeller schnell wohlfühlten und mit Staunen auf die Biersäulen am Nachbartisch schauten. Neben den Vereinsmitgliedern nutzte Linuchs aus dem Forum die Gelegenheit uns einmal live zu erleben! Sein Urteil: Wir sind gar nicht so schlimm!</p> <p><a href="/images/7f90d7c6-8cde-11ee-b136-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/7f90d7c6-8cde-11ee-b136-b42e9947ef30.jpg?size=medium" alt="Stadtführung durch Chnutz vom Hopfen" title="Stadtführung" loading="lazy"></a></p> <p>Um Acht kam Chnutz vom Hopfen und durfte wegen seiner Nachtwächterlampe leider nicht hineinkommen. Deswegen führte er uns auf einem Rundgang durch Mainz und unterhielt uns mit seinem kurzweiligen, sehr interessanten Fakten rund um Johann Gensfleisch und brachte uns die Stadtgeschichte näher.</p> <h3>Samstag</h3><p>Die Mitgliederversammlung (<a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2023" rel="nofollow noopener noreferrer">Protokoll</a>) brachte viele Fragen und Diskussionen, aber auch schnell ein Ergebnis: wir hatten mehrere Freiwiliige, die sich für ein Amt zur Verfügung stellten und so konnte die Wahl schnell über die Bühne gehen. Vorstand sind:</p> <p>Matthias Scharwies</p> <p>Rolf Borchmann</p> <p>Wiebke Knäpper</p> <p>Der Verein bedankt sich bei den ausgeschiedenen Vorständen und wünscht ihnen alles Gute.</p> <p>Die Diskussionen sind nicht abgeschlossen - es haben sich Arbeitsgruppen gebildet, die ihre Ergebnisse bei einer <a href="https://forum.selfhtml.org/events/9" rel="noopener noreferrer">virtuellen Mitgliederversammlung am 27. Januar 2024</a> präsentieren werden.</p> <h3>Sonntag</h3><p>Nach einem gemeinsamen Spaziergang am Rhein trafen wir die anderen vor dem Gutenbergmuseum. Das Museum ist sehr sehenswert und hat einen Schatz an Drucken und Büchern - unter anderem stieß Jürgen auf Doctor Syntax:</p> <p><a href="/images/fc2c66ea-8ce0-11ee-8414-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/fc2c66ea-8ce0-11ee-8414-b42e9947ef30.jpg?size=small" alt="Doctor Syntax" title="Doctor Syntax" loading="lazy"></a></p> <p><a href="https://commons.wikimedia.org/wiki/File:SYNTAX(1813)_-_00_-_The_Revd_Doctor_Syntax_(frontispiece).jpg" rel="nofollow noopener noreferrer">"The Tour of Doctor Syntax: in search of the picturesque ... Fifth edition, with new plates. By William Combe." (1813)</a> (aus Wikimedia Commons)</p> <p>Ob er uns helfen kann, schwierige Fachbegriffe anschaulich zu vermitteln?</p> <h3>Fazit</h3><p><a href="/images/b6652b6e-8ce1-11ee-8d94-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/b6652b6e-8ce1-11ee-8d94-b42e9947ef30.jpg?size=small" alt="Mainzelmännchen in Ampel" title="Mainzelmännchen in Ampel" loading="lazy"></a></p> <p>Noch auf dem Weg zum Bahnhof kam ich wieder an „unserer“ Ampel vorbei, die diesmal auf Grün stand: <strong>Es geht weiter!</strong></p> <p><strong><a href="https://wiki.selfhtml.org/wiki/HTTP/Statuscodes#1xx:_Informativ" rel="nofollow noopener noreferrer">SELFHTML - 100 Continue</a></strong></p> <p>PS: Wir sehen uns am 03.05.2024 in Hannover zum <a href="https://forum.selfhtml.org/events/10" rel="noopener noreferrer">SELF-Treffen 2024</a> wieder und feiern dann das 20-jährige Jubiläum des Vereins.</p> https://forum.selfhtml.org/weblog/2023/oct/25/popover-ohne-programmieren Matthias Scharwies mscharwies@selfhtml.org 2023-10-25T07:33:13Z 2023-10-25T07:33:13Z Popover ohne Programmieren! <p>Aufklappbare Infoboxen gehören zu den immer wieder gefragten UI-Elementen. Bis jetzt wurden sie mit viel CSS und sogar JavaScript nachgebaut, bzw. gab es in diversen Frameworks voneinander abweichende Implementierungen.</p> <p>Jetzt gibt es eine <strong>Native Umsetzung in HTML</strong>, die von der <a href="https://open-ui.org/" rel="nofollow noopener noreferrer">open-ui.org</a> entworfen und zur Standardisierung vorgeschlagen wurde:</p> <p>Mit nur wenigen Zeilen HTML bauen Sie ein Popover:</p> <p><button popovertarget="t1">Tooltipp</button></p> <div id="t1" popover style="background-color:#c82f04;color:white;border:thin solid #333;padding:1rem;margin:2rem auto;">Infobox, die zusätzliche Informationen enthält.</div> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">popovertarget</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>t1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tooltipp<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>t1<span class="token punctuation">"</span></span> <span class="token attr-name">popover</span><span class="token punctuation">></span></span> Infobox, die zusätzliche Informationen enthält. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Auch eine <a href="https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren" rel="nofollow noopener noreferrer">Lightbox</a> ist so möglich:</p> <p><button popovertarget="t2"><img src="/images/5ebc6a26-73a0-11ee-9ec9-b42e9947ef30.jpg?size=thumb" alt="Burg in Nürnberg, Sonnenaufgang" loading="lazy"></button></p> <div id="t2" popover style="background-color:#999;position:absolute;color:white;border:thin solid #333;padding:1rem;"><button popovertarget="t2" popovertargetaction="hide" style=" border: none; border-radius: 0 0 0 8px; background-color: #c82f04; color: white; cursor: pointer; position: absolute; right: 0.25rem; font-size: 1.25em; font-weight: bold; padding: 0.25em 0.4em; text-align: center; top: 0.5rem;"> X </button><img src="/images/5ebc6a26-73a0-11ee-9ec9-b42e9947ef30.jpg?size=medium" alt="Burg in Nürnberg, Sonnenaufgang" loading="lazy">.</div> <p>Und das Gute - Es wird bereits von vielen Browsern unterstützt, für den Firefox gibt es einen Polyfill:</p> <p><a href="/images/810e8eb0-7337-11ee-b272-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/810e8eb0-7337-11ee-b272-b42e9947ef30.png?size=large" alt="" loading="lazy"></a></p> <p>Mehr erfahren Sie in unserem neuen Tutorial: <a href="https://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover" rel="nofollow noopener noreferrer"><strong>Tooltips mit Popover</strong></a></p> <h3><strong>Warum nicht mit ein bisschen CSS selbst einen Tooltip bauen?</strong></h3><p>Dafür müsste man ein Element mit :hover oder :focus sichtbar machen, absolut positionieren und dann noch an den z-index denken. Doch nicht so einfach, oder?</p> <p>Im neuen Popover sind solche Dinge und die Fokusverwaltung bereits integriert.</p> <script src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest" crossorigin="anonymous" defer ></script> https://forum.selfhtml.org/weblog/2023/sep/25/schicke-schachteln-css-nesting-ist-in-den-browsern-angekommen Rolf B 2023-09-25T19:10:53Z 2023-09-25T19:10:53Z Schicke Schachteln - CSS Nesting ist in den Browsern angekommen <p>Geschachtelte CSS Regeln waren früher ein Anwendungsfall von CSS Präprozessoren. Aber nun schlägt das Imperium zurück!</p> <p>Kennt ihr das? Ihr habt ein <code><div></code>, eine <code><figure></code>, eine <code><section></code>, oder was auch sonst, und darin jede Menge Zeugs. Die Styles für dieses Zeug sollen aber nur dann zutreffen, wenn sie gerade in diesem speziellen Elternelement stecken.</p> <p>Also bekommt das Elternelement eine ID oder eine Klasse, und nun folgen siebenunddrölfzig CSS Regeln, die alle einen Selektor haben, der mit dieser ID oder dieser Klasse beginnt. Und dabei bleibt es natürlich nicht, es gibt weitere Schachtelungen, und irgendwann wird die Sache lästig.</p> <p>Herbei, LESS oder SASS oder SCSS oder wie auch immer der CSS Präprozessor eures geringsten Misstrauens heißt, und ihr könnt Dinge formulieren wie</p> <pre><code class="block language-css"><span class="token selector">#foo</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1em<span class="token punctuation">;</span> <span class="token selector">h2</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token selector">img</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Und wenn euch dieser #foo Bereich nicht interessiert, klickt ihr im Editor eures Vertrauens auf das Einklapp-Icon und alles ist ausgeblendet.</p> <p>Und dafür müsst ihr in eurem Entwickler-Toolstack eine node.js-Instanz laufen lassen, die nach jedem Speichern eure .less-Dateien in .css Dateien konvertiert.</p> <p>Das geht besser! Die CSS Nesting Spezifikation ist in den Browsern angekommen und erlaubt es euch, die gezeigte Schachtelung exakt so in nativem CSS zu schreiben. Naja, nicht ganz, Chromium-Browser haben noch Schwierigkeiten mit Elementselektoren und wollen davor den speziellen Schachtelungselektor <code>&</code> sehen. Der Firefox hat die aktuelle Fassung der Spezifikation schon besser drauf und braucht das <code>&</code> nicht.</p> <p>Das <code>&</code> ist nur dann wichtig, wenn die Selektoren nicht stumpf von links nach rechts aneinandergehängt werden sollen, sondern wenn klargestellt werden muss, ob ein Nachfahrenkombinator (die Leerstelle) verwendet werden soll oder die Selektoren direkt zu einem verbundenen Selektor (z.B. <code>p.foo</code> als Verbund aus Element- und Klassenselektor) zusammengesetzt werden sollen.</p> <p>Man kann sogar „falsch herum“ schachteln, wofür das <code>&</code> ebenfalls gebraucht wird:</p> <pre><code class="block language-css"><span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em 1em<span class="token punctuation">;</span> <span class="token selector">aside > &</span> <span class="token punctuation">{</span> <span class="token property">padding-inline</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Hiermit bekommen p Elemente ein Block-Padding von 0.5em und ein Inline-Padding von 1em (ich rede hier von den <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/Logische_Eigenschaften" rel="nofollow noopener noreferrer">logischen Eigenschaften</a>), aber wenn das p Element direktes Kind eines aside ist, wird das Inline-Padding auf 0.5em reduziert.</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Schachtelung" rel="nofollow noopener noreferrer">Lest den ausführlichen Artikel zu CSS-Nesting im Selfhtml-Wiki!</a></p> https://forum.selfhtml.org/weblog/2023/oct/01/zwischenbilanz-2-3-quartal Matthias Scharwies mscharwies@selfhtml.org 2023-10-01T06:42:09Z 2023-10-01T06:42:09Z Zwischenbilanz 2. + 3. Quartal <p>Ich hatte ja im März eine <a href="https://forum.selfhtml.org/self/2023/mar/30/zwischenbilanz-1-quartal-2023/1807474#m1807474" rel="noopener noreferrer">Zwischenbilanz</a> für das erste Quartal gepostet.</p> <p>Hier kommt nun die ursprünglich für Juni geplante - leider etwas verspätete - Zwischenbilanz, was im <em><strong>2. und 3.</strong></em> Quartal angepackt wurde!</p> <p>Nicht alle Änderungen sind hier aufgeführt, aber Einiges ist doch besonders erwähnenswert:</p> <p> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut#Guter_HTML-Stil" rel="nofollow noopener noreferrer"><strong>Guter HTML-Stil</strong></a> ist jetzt direkt im HTML-Tutorial integriert, analog dazu <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax#Guter_CSS-Stil" rel="nofollow noopener noreferrer"><strong>Guter CSS-Stil</strong></a> im CSS-Einstieg <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p> @Jürgen B hat die <a href="https://wiki.selfhtml.org/wiki/OnePager/Komfort-Version" rel="nofollow noopener noreferrer"><strong>Komfort-Version eines OnePagers</strong></a> entwickelt und in einem Tutorial erklärt. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p> <a href="https://wiki.selfhtml.org/wiki/Webserver/htaccess" rel="nofollow noopener noreferrer"><strong>htaccess</strong></a>: Die 6-teilige Reihe ist inhaltlich und sprachlich geglättet und redigiert worden.</p> <p> <a href="https://wiki.selfhtml.org/wiki/MathML/Geometrie_mit_MathML,_SVG_und_JavaScript" rel="nofollow noopener noreferrer"><strong>Geometrie mit MathML, SVG und JavaScript</strong></a> ist ein Tutorial, das die Brücke zwischen HTML, MathML und SVG schlägt und unter anderem Drag&Drop für SVG erklärt.</p> <p> <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries/Container_Queries" rel="nofollow noopener noreferrer"><strong>Container Queries</strong></a> erklärt die neuen Containerabfragen und auch die flexiblen <code>cqw</code>-Werte, mit denen fluide Typografie möglich wird.</p> <p> <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Schachtelung" rel="nofollow noopener noreferrer"><strong>CSS/Tutorials/Selektoren/Schachtelung</strong></a> <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> führt in die Welt des CSS-Nesting ein!</p> <h3>ToDo für's 4. Quartal</h3><p>Leider ist einiges liegen geblieben.</p> <blockquote> <p>Schaut mal auf unsere <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">Baustellenseite</a>. Hier sind die imho wichtigsten davon:</p> </blockquote> <p> <a href="https://wiki.selfhtml.org/wiki/File_Upload" rel="nofollow noopener noreferrer"><strong>File Upload</strong></a></p> <blockquote> <p>Das war Thema im Januar - ich habe 3 Artikel zusammengefasst, es bleibt ab <a href="https://wiki.selfhtml.org/wiki/File_Upload#Auswahl_mit_Drag_und_Drop" rel="nofollow noopener noreferrer">hier</a> einiges zu tun: Drag & Drop, Fetch ...</p> </blockquote> <p> <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Multimedia/Playlists" rel="nofollow noopener noreferrer"><strong>Multimedia/Playlists</strong></a></p> <blockquote> <p>Das hat Linuchs mal gefragt, Dauer und Ende von Medien mit JS ermitteln, mehrere Playlists als Liste haben und per JS an den Player senden.</p> </blockquote> <p> <a href="https://wiki.selfhtml.org/wiki/PHP/Tutorials/Templates" rel="nofollow noopener noreferrer"><strong>PHP/Tutorials/Templates</strong></a></p> <blockquote> <p>Hier sind sowohl in Kap 3. Verarbeitung als auch Kap 4. Ausgabe zwei ToDos drin.</p> </blockquote> <h3>Warum diese Übersichten?</h3><blockquote>Mir wäre wichtig, dass SELFHTML kein One-Man-Project eines Nicht-ITlers ist, sondern eben das Gesamtkunstwerk einer netten Truppe, bei der auch Neue mitmachen wollen.<br><cite>SELF-Forum: <a href="https://forum.selfhtml.org/self/2023/mar/30/zwischenbilanz-1-quartal-2023/1807474#m1807474">Zwischenbilanz 1 Quartal 2023</a> vom 30.03.2023</cite> </blockquote> <blockquote> <p>Ich würde mir wünschen, dass sich <strong>jeder</strong> SELFer im Q4 <strong>eine Aufgabe vornimmt</strong> und diese dann bearbeitet! (In der Schule würde ich die Aufgaben verteilen und dann bei Nichtgefallen mit dem Kollegen tauschen lassen!)</p> </blockquote> <p>Alles was vorzeigbar ist, sollten wir dann auf <a href="https://bildung.social/@selfhtml" rel="nofollow noopener noreferrer">Mastodon </a>/ <a href="https://discord.com/invite/BMbmbd4qUa" rel="nofollow noopener noreferrer">Discord </a>vorstellen, damit wir in der Öffentlichkeit wieder präsenter werden.</p> <p>Vielen Dank an <a href="/users/13769" class="mention registered-user" rel="noopener noreferrer">@Hörnchen</a> für unseren neuen Discord-Auftritt, der neues Leben in die Bude gebracht hat. <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> PS: Ein Stammtisch wäre auch mal wieder nett! </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/Barrierefreiheit" rel="nofollow noopener noreferrer"><strong>Barrierefreiheit</strong></a> soll eben nicht nachträglich als Fremdkörper aufgepfropft, sondern von Anfang an berücksichtigt werden! <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><strong>Man könnte …</strong> da noch vieles einbauen. Wichtig ist, dass Interessierte ein funktionierendes Beispiel haben, mit dem sie weiterarbeiten können. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>Neben unserem Discord-Kanal kommt auch das zarte Pflänzchen YouTube-Kanal zwischen den Steinen hervor, wobei wir da noch nichts Vorzeigbares vorzuweisen haben. <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2022/jun/16/endlich-nach-27-jahren-ist-der-internet-explorer-geschichte Matthias Scharwies mscharwies@selfhtml.org 2022-06-16T19:02:29Z 2022-06-16T19:02:29Z Endlich - der Internet Explorer ist Geschichte! <p>Erst darauf hingefiebert und dann fast vergessen - seit gestern ist der Internet Explorer Geschichte.</p> <p>Auf <a href="https://twitter.com/EddyVinckk/status/1536645664804941824" rel="nofollow noopener noreferrer">Twitter</a> wird gefeiert, dass der Internet Explorer endgültig ausläuft. Auch wenn er zum Schluss oft nur während der Installation eines neuen Systems benutzt wurde, um einen „richtigen“ Browser herunterzuladen, musste man in vergangen Jahren eben doch mehrere Stylesheets entwickeln und über <a href="https://wiki.selfhtml.org/wiki/Browserweiche" rel="nofollow noopener noreferrer">Browserweichen</a> oder CSS-Hacks aktivieren.</p> <p>Im SELF-Wiki gibt es noch etliche Hinweise auf das besondere Verhalten des Internet Explorers, die nun sukzessive entfernt werden können.</p> <p>Das SELF-Wiki ist ein Projekt, das auf gemeinsamer, freiwilliger Zusammenarbeit basiert. Bitte trauen Sie sich, solche <a href="https://wiki.selfhtml.org/index.php?search=Internet+Explorer&title=Spezial%3ASuche&go=Seite" rel="nofollow noopener noreferrer">Fundstellen</a> zu sichten und gegebenfalls zu aktualisieren!</p> https://forum.selfhtml.org/weblog/2022/feb/15/wussten-sie-schon-selfhtml-gibts-auch-auf-twitter Matthias Scharwies mscharwies@selfhtml.org https://twitter.com/SELFHTML 2022-02-15T04:28:02Z 2022-02-15T04:28:02Z Wussten Sie schon? - SELFHTML gibt's auch auf Twitter <p>Schon seit mehreren Jahren hat SELFHTML einen <a href="https://twitter.com/SELFHTML" rel="nofollow noopener noreferrer">Twitter-Kanal</a>, auf dem Gunnar Bittersmannn (<a href="https://twitter.com/g16n" rel="nofollow noopener noreferrer">@g16n</a>) News und Interessantes über Webdesign, Technologie und Typografie retweeted.</p> <p>Seit gestern haben wir 1000 Abonnenten oder neudeutsch „Follower“, die unsere „Tweets“ - Kurznachrichten mit maximal 280 Zeichen verfolgen.</p> <p>Parallel zu den Lesetipps im Forum erhalten wir so gefilterte Neuigkeiten, die uns immer auf dem aktuellen Stand halten! Vielen Dank an <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> für seine Arbeit!</p> <p>Zukünftig sollen dort auch neue und aktualisierte Inhalte des SELF-Wiki beworben werden.</p> https://forum.selfhtml.org/weblog/2023/may/30/css-selektoren-nth-match Rolf B 2023-05-30T10:33:25Z 2023-05-30T10:33:25Z CSS Selektoren - :nth-match() vs :nth-child(... of S) <p>Die Selektion von HTML-Elementen mit der CSS Pseudoklasse <code>:nth-child()</code> wird schwierig, wenn die Elemente noch zusätzlich über Klassen- oder Attributselektoren eingegrenzt werden sollen und die Kindelement-Zählung nur innerhalb der zusätzlichen Selektoren stattfinden soll.</p> <p>Um das zu lösen, wurde bereits 2011, im ersten Entwurf der CSS Selectors Level 4 Spezifikation, die Pseudoklasse :nth-match() vorgeschlagen.</p> <p>Lesen Sie hier, was daraus wurde.</p> <hr> <h3>Das Problem</h3><p>Angenommen, Sie hätten eine Tabelle und möchten die Lesbarkeit dadurch verbessern, dass Sie nach jeder dritten Zeile eine horizontale Linie einfügen. Das gelingt beispielsweise mit</p> <pre><code class="block language-css"><span class="token selector">#mytable tbody tr:nth-of-type(3n)</span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> thin solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Solange alle Rows der Tabelle dargestellt werden, wird auf diese Weise unter jeder dritten Zeile ein Strich gezogen. Aber was ist, wenn diese Tabelle noch eine Filterfunktion hätte, und die sichtbaren Zeilen mit einer Klasse <code>match</code> versehen werden. Die CSS-Regel für eine solche Filterung könnte so aussehen:</p> <pre><code class="block language-css"><span class="token selector">#mytable.filtered tbody tr:not(.match)</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Möchte man die Hilfslinien ergänzen, könnte man das so versuchen:</p> <pre><code class="block bad language-css"><span class="token selector">#mytable tbody tr.match:nth-of-type(3n)</span> <span class="token punctuation">{</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> thin solid black<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Aber das funktioniert nicht, weil der Selektor <code>tr.match:nth-of-type(3n)</code> aus drei Teilen besteht (Elementselektor, Klassenselektor, Pseudoklassenselektor), die alle unabhängig voneinander bewertet werden und deren Ergebnis UND-verknüpft wird.</p> <dl> <dt><strong>Teil 1:</strong> <em>Elementtypselektor <code>tr</code></em></dt> <dd>Betrachte nur <code>tr</code>-Elemente</dd> <dt><strong>Teil 2:</strong> <em>Klassenselektor <code>.match</code></em></dt> <dd>Betrachte nur Elemente mit der Klasse <code>match</code></dd> <dt><strong>Teil 3:</strong> <em>strukturelle Pseudoklasse :nth-of-type()</em></dt> <dd>Betrachte nur Elemente, die das 0-te, 3-te, 6-te, 9-te, … ihres Elementtyps sind</dd> </dl> <p>In einer Tabelle mit 5 Zeilen, in der die Zeilen 1 und 5 sichtbar sind, würde dieser Selektor auf keine Zeile zutreffen, weil in jeder Zeile entweder der Klassenselektor <code>.match</code> oder der Pseudoklassenselektor <code>:nth-of-type(3n)</code> unzutreffend ist.</p> <h3>Was tun?</h3><p>Was gebraucht wird, ist ein zweistufiges Vorgehen. Zunächst müssen alle sichtbaren Rows ermittelt werden, und von diesen Rows diejenigen mit gerader Nummer. Bisher ging das nur mit Hilfe von JavaScript.</p> <p>Tatsächlich gibt es schon seit 2011 einen Vorschlag für eine CSS-Lösung: die <code>:nth-match</code> Pseudoklasse. <code>tr.match:nth-match(3n)</code> würde das Gewünschte leisten. Diese Pseudoklasse wurde allerdings 2013 wieder verworfen, zu Gunsten einer erweiterten Syntax von <code>:nth-child()</code>:</p> <pre><code class="block language-css"><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>An+B of S<span class="token punctuation">)</span> </code></pre> <p>Safari unterstützt das seit 2015. Der Rest der Browserwelt hat sich acht Jährchen Bedenkzeit gegönnt, aber seit März 2023 steht dieser Selektor in Chromium-Browsern (Version 111) zur Verfügung, im April erschien Opera 98 mit diesem Feature und Firefox ist im Mai mit Version 113 nachgezogen (siehe Kompatibilität bei <a href="https://caniuse.com/css-nth-child-of" rel="noopener noreferrer">caniuse.com</a>).</p> <h3>Wie ist dieses <code>S</code> zu verstehen?</h3><p>Dabei handelt es sich um einen CSS Selektor, der die Elemente bestimmt, die für :nth-child berücksichtigt werden sollen. Die Spezifikation ist hier noch etwas im Fluss. Der neueste Entwurf besagt, dass es sich dabei um eine „complex-real-selector-list“ handele, was bedeutet: ein CSS Selektor, in dem außer <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Pseudoelement" rel="nofollow noopener noreferrer">Pseudoelementen</a> alles verwendet werden kann, selbst Kommata. Der offizielle Working Draft formuliert allgemeiner und spricht von einer "complex-selector-list parsed as a forgiving selector", d.h. die Einschränkung der Pseudoelemente ist nicht vorhanden. Dafür wird aber gefordert, dass für den Fall, dass eine <a href="https://wiki.selfhtml.org/wiki/Selektor-Liste" rel="nofollow noopener noreferrer">Selektorliste</a> einen ungültigen Selektor enthält, die übrigen Selektoren der Liste trotzdem berücksichtigt werden sollen.</p> <p>Für unser Beispiel mit der gefilterten Zebrastreifentabelle würden wir also schreiben können:</p> <pre><code class="block language-css"><span class="token selector">#mytable.filtered tbody tr:nth-child(3n of .match)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #e0e0e0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>wodurch dann nur die Elemente für die nth-child-Zählung berücksichtig werden, die die Klasse .match tragen.</p> <h3>Wo überall geht das?</h3><p>Die gleiche Erweiterung existiert für :nth-last-child().</p> <p>Was es <strong>nicht</strong> gibt, ist die of-Erweiterung für :nth-of-type. Das hat einen guten Grund: die <code>:nth-of-type()</code>-Pseudoklasse ist ein Sonderfall von <code>:nth-child(… of S)</code>:</p> <pre><code class="block bad language-css"><span class="token selector">#mytable tbody tr:nth-of-type(3n of .match)</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> </code></pre> <p>Ziehen Sie den Elementselektor für <code>tr</code> einfach in die Klammer hinein, wodurch :nth-child ganz automatisch die Selektion des Elementtyps mit übernimmt.</p> <pre><code class="block language-css.good">#mytable tbody :nth-child(3n of tr.match) { ... } </code></pre> https://forum.selfhtml.org/weblog/2022/sep/30/makeover-fur-das-self-wiki Matthias Scharwies mscharwies@selfhtml.org 2022-09-30T21:32:26Z 2022-09-30T21:32:26Z Makeover für das SELF-Wiki <p>Am 14. September wurde unser Wiki ein Achtel Jahrhundert (12,5 Jahre) alt! In unserer <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik#Der_Wiki-Neustart" rel="nofollow noopener noreferrer">Vereins-Chronik</a> gibt es einen Überblick mit vielen Screenshots aus vergangenen Jahren.</p> <p>Wir wollten das unrunde Jubiläum zum Anlass für ein Makeover nehmen, das auf der <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2021#Landing_Page_und_Unterst.C3.BCtzerseiten" rel="nofollow noopener noreferrer">Mitgliederversammlung 2021</a> beschlossen wurde.</p> <h3>1. Landing page</h3><p>Die bisherige <em>Landing Page</em> unter selfhtml.org wurde depubliziert und in das SELF-Wiki integriert.</p> <p>Dafür wurden …</p> <ul> <li>die Inhalte der <em>Landing Page</em> auf die Seite <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein" rel="nofollow noopener noreferrer">SELFHTML:Verein</a> übertragen. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></li> <li>die Navigationen des Wiki in der Werkzeugleiste links neu angeordnet</li> <li>die <a href="https://wiki.selfhtml.org/wiki/" rel="nofollow noopener noreferrer">Startseite des Wiki</a> völlig neu gestaltet</li> </ul> <h3>2. Startseite</h3><p>Bisher wurde die Startseite per JavaScript zum „Inhaltsverzeichnis“ umbenannt. Sie war eher eine alphabetische Linksammlung, in der viele Links doppelt und dreifach präsentiert wurden.</p> <p><a href="/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Künftig stellt die neue <a href="https://wiki.selfhtml.org/wiki/" rel="nofollow noopener noreferrer">Startseite</a> Interessantes aus dem SELF-Universum vor. Es gibt aber weiterhin unser <a href="https://wiki.selfhtml.org/wiki/Inhalt" rel="nofollow noopener noreferrer">alphabetisches Inhaltsverzeichnis</a>!</p> <h3>3. CSS und Dark Mode</h3><p>Um das Wiki barrierefreier zu machen, wurden die seit 2010 verwendeten Vorlagen geprüft und überarbeitet. Viele, weniger oft benutzte Vorlagen wurden ersetzt; die <a href="https://blog.selfhtml.org/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung" rel="noopener noreferrer">Vorlage:Iconset</a> depubliziert.</p> <p>Leider beschränkt sich die Mediawiki-Software, um eine Kompatibilität auch mit ältesten Browserversionen zu garantieren, auf HTML4.01-Elemente. Deshalb wurden die inhaltsleeren div-Elemente zumindest mit role-Attributen anstelle von nicht zugänglichen Klassen versehen.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>note<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hinweis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Das CSS wurde behutsam angepasst und bis auf wenige Ausnahmen werden die Vorlagen jetzt ohne farbigen Hintergrund gestaltet. So wirkt es weniger bunt und ermöglicht höhere Kontraste, die das Lesen erleichtern.</p> <p><a href="/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png?size=medium" alt="Vorlagen und Boxen - vor und nach dem Wiki-Makeover" title="Vorlagen und Boxen - vor und nach dem Wiki-Makeover" loading="lazy"></a></p> <p>Zusätzlich ermöglicht das CSS nun das Eingehen auf Benutzerwünsche. Es gibt einen Dark Mode, der bei entsprechenden Einstellungen im OS oder Browser aktiviert wird, sowie den Verzicht auf Animationen bei entsprechenden Settings.</p> <p>Blog-Serie zum Makeover 2022</p> <ol> <li><strong>Makeover für das SELF-Wiki</strong></li> <li><a href="https://blog.selfhtml.org/2022/oct/01/oranger-text-auf-weissem-grund" rel="noopener noreferrer">Oranger Text auf weißem Grund?</a></li> <li>Icons und Grafiken</li> </ol> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Die bisherige Landing Page war nur über github erreichbar und so nur schwierig zu aktualisieren. Andererseits waren ihre Inhalte wie das <em>mission statement</em> oft bereits an anderer Stelle als <em>duplicate content</em> vorhanden. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2023/feb/25/wordpress-individuell-mit-css-gestalten Matthias Scharwies mscharwies@selfhtml.org 2023-02-25T04:59:40Z 2023-02-25T04:59:40Z Wordpress - individuell mit CSS gestalten <p>Herzlichen Glückwunsch! Mit WordPress haben Sie das erfolgreichste CMS installiert, dass sich ohne viel Kenntnisse des Anwenders in nur 8 Minuten fast von selbst installiert.</p> <p>Kann man das auch individuell mit CSS gestalten? - Ja, klar!</p> <p>Ausgangspunkt war die Frage, ob, man ein „Textelement über Bild positionieren“ könne.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <h3>Der schnelle Weg</h3><p>Um WordPress individuell anzupassen, können sie direkt im Blockeditor ihr HTML mit Klassen versehen und für diese dann CSS-Festlegungen deklarieren.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p><em>Design → Anpassen → Zusätzliches CSS:</em></p> <h3>Der bessere Weg</h3><p>Es gibt in Wordpress eine Vielzahl von Stylesheets und daneben komplette Themes, die neben Speziellen Seiten-Templates wieder viele Stylesheets mitbringen.</p> <p>Damit dort vorgenommene Änderungen bei einer automatischen Aktualisierung nicht überschrieben werden, empfiehlt es sich ein eigenes <em><strong>Child Theme</strong></em> zu definieren.</p> <p>→ <a href="https://wiki.selfhtml.org/wiki/WordPress/Child_Theme_einrichten" rel="nofollow noopener noreferrer"><strong>WordPress/Child Theme einrichten</strong></a></p> <h3>Und wie überlagert man nun ein Bild mit einem halbtransparentem Text?</h3><p>Wenn man Text über das Bild legen will, kann man nicht vom aktuellen Standpunkt am Monitor ausgehen.</p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Bilder_pr%C3%A4sentieren-4.html" width="800" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Bilder_pr%C3%A4sentieren-4.html">Einschwebende Bildunterschriften</a> </p> </iframe> <p>Hier muss der Bild-Container mit <code>position: relative</code>zum Bezugspunkt werden, in dem dann Bild und Beschreibungstext absolut positioniert werden.</p> <p>Dann kann die Bildunterschrift entsprechend oben oder unten „angeklebt werden“:</p> <pre><code class="block language-css"><span class="token selector">#gallery figure</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">figure img</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#gallery > figure > figcaption</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>→ <a href="https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Einbindung_mit_img#Einschwebende_Bildunterschriften" rel="nofollow noopener noreferrer"><strong>Bilder im Internet/Einbindung mit img</strong></a></p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>„<em>Das große Foto wird ja von einem halbtransparenten Textfeld überlagert. So ähnlich soll es auch aussehen. Ich habe dazu das Element mit margin -685px versehen. Das ist aber keine ideale Lösung, weil der Effekt auf unterschiedlichen Bildschirmen auch unterschiedlich ist.</em>“ <br>SELF-Forum <a href="https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806452#m1806452" rel="noopener noreferrer">Textelement über Bild positionieren</a> vom 23.02.2023 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://wordpress.com/de/support/bearbeiten-von-css/" rel="nofollow noopener noreferrer">Hinzufügen von individuellem CSS</a> (wordpress.com) <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2023/jan/31/gesucht-autoren-m-w-d Matthias Scharwies mscharwies@selfhtml.org 2023-01-31T05:27:52Z 2023-01-31T05:27:52Z Gesucht: Autoren (m,w,d) <p>ChatGPT ist in aller Munde und trotzdem muss manchmal trotzdem doch der (menschliche) Fachmann ran.</p> <p>Unser Wiki besteht mittlerweile aus über 8.000 Seiten, davon 2.742 Artikeln. Andererseits entwickelt sich die Welt von HTML und CSS immer weiter.</p> <h3>neue Methoden und Funktionen</h3><p>Im Januar ergänzte <a href="https://wiki.selfhtml.org/wiki/Spezial:Beitr%C3%A4ge/Heha" rel="nofollow noopener noreferrer">Heha</a> einige neue Methoden im Math-Object. Schnell fiel auf, dass es auch in CSS neue <a href="https://wiki.selfhtml.org/wiki/CSS/Funktionen/Math-Funktionen" rel="nofollow noopener noreferrer">Mathe-Funktionen</a> gibt. <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> schrieb innerhalb kurzer Zeit einen neuen, umfangreichen Artikel. Live-Beispiele werden nachgereicht, wenn die Browserunterstützung - zur Zeit nur Safari und manchmal Firefox- besser wird (Chrome soll mit Version 111 nachziehen).</p> <p>Vielen Dank an die beiden!</p> <h3>Nicht alles, was früher galt, ist heute noch aktuell</h3><p>Auch die bestehenden Seiten müssen immer wieder angepasst werden. Oft sind es nur Kleinigkeiten wie das Einfügen eines Links, manchmal die Verbesserung eines Beispiels.</p> <p>Hier finden wir immer wieder Verbesserungswürdiges. Leider hat der Tag aber auch nur 24 Stunden und wir können nicht immer so viel schaffen, wie wir wollen.</p> <p>Deshalb nun unser Aufruf:</p> <h3><strong>HELP WANTED</strong></h3><h4>Was brauchen wir?</h4><p>Freiwillige, die sich an eins unserer <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDos</a> machen oder ein <a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Wie_sehen_gute_Tutorials_aus.3F" rel="nofollow noopener noreferrer">selbstgewähltes Thema veröffentlichen</a>. Tipps aus der Praxis kann eben doch kein Bot schreiben!</p> <h4>Wer ist unsere Zielgruppe?</h4><p>Interessierte Amateure, die …</p> <ul> <li>lieber verständliches Deutsch lesen, als sich technische Themen in einer Fremdsprache erkämpfen müssen</li> <li>Code-Snippets kopieren und ändern, dann aber doch wissen wollen, wie es genau funktioniert.</li> <li>Semi-professionelle Entwickler, die sich auf dem neuesten Stand halten wollen.</li> </ul> <h3>Deshalb:</h3><p><strong>Helfen Sie mit und verbessern Sie das SELF-Wiki durch <a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Mitmachen" rel="nofollow noopener noreferrer">Ihre Mitarbeit</a>!</strong></p> https://forum.selfhtml.org/weblog/2022/dec/30/webdesign-trend-2023-auf-google-fonts-verzichten Matthias Scharwies mscharwies@selfhtml.org 2022-12-30T07:30:05Z 2022-12-30T07:30:05Z Webdesign-Trend 2023 - Auf Direkt-Einbindung von Google-Fonts verzichten! <p>Vor einem Jahr schreckte ein Urteil des Landgerichts München Seitenbetreiber auf: Eine ungefragte Einbindung von Google-Fonts stellt eine Verletzung des Persönlichkeitsrechts durch Datenschutzverstoß dar.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>11 Monate später gab es neue Schlagzeilen: Ein Nachfolger des Freiherrn von Gravenreuth<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> ließ mit einem Programm Webseiten nach eingebundenen Google-Fonts suchen, täuschte Besuche einer realen Person vor und verschickte Abmahnungen.<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> Auch wenn die Staatsanwaltschaft <em>nur</em> die automatisierte Suche als kriminell einstuft, ist dies doch ein Rückschlag für das Unwesen der Abmahnungen vermeintlicher Mitbewerber.</p> <h3>Der rechtlich einwandfreie Weg</h3><p>Informieren Sie Seitenbesucher in einer <a href="https://wiki.selfhtml.org/wiki/Grundlagen/Rechtsfragen/Datenschutzerkl%C3%A4rung" rel="nofollow noopener noreferrer">Datenschutzerklärung</a> über die Speicherung und Weitergabe persönlicher Daten und holen Sie sich eine Einverständniserklärung ein.</p> <p>Leider wirkt so ein Cookie-Banner wie eine Barriere, die man erst überwinden muss, um an die Seiteninhalte zu kommen. Deshalb empfiehlt SELFHTML ...</p> <h3>Die praktische Variante</h3><p>Verzichten Sie auf externe CDN und binden Sie Fonts selbst ein. Dieses Tutorial zeigt, wie's geht:</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Google-Fonts_selbst_hosten" rel="nofollow noopener noreferrer"><strong>HTML/Tutorials/Google-Fonts selbst hosten</strong></a></p> <p>Zumal ein Grund, Fonts oder Anderes von CDNs zu verwenden, schon seit 2 Jahren nicht mehr existiert. Früher hatten Browser Ressourcen von CDNs gecachet. Wenn man auf eine Seite kam, die einen Font verwendete, den man beim Besuch einer anderen Website schon geladen hatte, wurde der Font aus dem Cache geholt. Heute tun Browser das nicht mehr. CDNs bringen keinen Performance-Gewinn.<sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></p> <p><a href="/images/20169842-8813-11ed-b334-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/20169842-8813-11ed-b334-b42e9947ef30.jpg?size=medium" alt="Google-Fonts über CDN haben keine Vorteile mehr!" loading="lazy"></a></p> <p>Übrigens: Kein Verein, keine Schule und auch kein <a href="https://de.m.wikipedia.org/wiki/Kleine_und_mittlere_Unternehmen" rel="nofollow noopener noreferrer">KMU</a> <em><strong>braucht</strong></em> kostenlose Dienstleistungen wie Google Analytics. Wann haben Sie oder Ihr Systembetreuer diese Statistiken denn das letzte Mal ausgewertet?</p> <p>2023 wäre Zeit, einmal zu überprüfen, wie man seine Webseite unter dem Gesichtspunkt der Datensparsamkeit optimiert und auf das Cookie-Banner verzichten kann!</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://www.gesetze-bayern.de/Content/Document/Y-300-Z-BECKRS-B-2022-N-612" rel="nofollow noopener noreferrer">20.01.2022, Az. 3 O 17493/20</a> (gesetze-bayern.de) <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Recht_und_Links" rel="nofollow noopener noreferrer">SELFHTML:Verein/Chronik/Recht und Links</a> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p><a href="https://www.tagesspiegel.de/berlin/abzocke-wegen-google-fonts-auf-webseiten-razzia-bei-berliner-abmahnanwalt-kilian-lenard-9071191.html" rel="nofollow noopener noreferrer">Betrugsmasche „Google-Fonts“: Razzia bei Berliner Abmahnanwalt Kilian Lenard</a> (tagesspiegel.de) <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p><a href="https://twitter.com/PixelAmbacht/status/1494272370076536840" rel="nofollow noopener noreferrer">Roel Nieskens</a> (twitter.com) <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2022/dec/24/frohe-weihnachten Matthias Scharwies mscharwies@selfhtml.org 2022-12-24T06:34:07Z 2022-12-24T06:34:07Z Frohe Weihnachten! <p>Eigentlich hatte ich in Mails und Briefen dieses Jahr „ruhige und hustenfreie Zeit“ gewünscht.</p> <p>Nicht jeder hatte vorher gehustet und nicht jeder - wenn auch die meisten - braucht die Ruhe. Deshalb einen <em><strong>„frohen“</strong></em> Gruß an alle!</p> <h3>Was war</h3><p>Das letzte Jahr war geprägt vom Umbruch nach dem Vorstandswechsel. Martin Kunkel, im Forum seit 2005 als Der Martin aktiv, erklärte sich bereit, im Vorstand mitzuarbeiten und wurde zum 2. Vorsitzenden gewählt.</p> <p>Wir wollten zeigen, dass wir noch handlungsfähig sind und nahmen uns folgerichtig eine Erneuerung unserer seit 2010 nahezu unveränderten <em>Landing pages</em> vor. Das <a href="https://blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki" rel="noopener noreferrer">Makeover für das SELF-Wiki</a> ist leider noch nicht abgeschlossen, aber zumindest auf den Weg gebracht.</p> <p>Der Adventskalender des Jahres 2021 konzentrierte sich auf das Thema Barrierefreiheit. Vielen Dank an <a href="/users/821" class="mention registered-user" rel="noopener noreferrer">@Marc</a> für die Blogbeiträge und Aktualisierungen im Wiki.</p> <p>Dieses Jahr sammelten wir die häufigen Fragen, die wir künftig wieder prominenter präsentieren wollen.</p> <h3>Was wird</h3><p>Wir erhalten außerhalb des Forums viele Anfragen per Mail. In einer Standardantwort (da <em>„unsere manpower begrenzt ist, können wir individuelle Fachfragen leider nicht persönlich beantworten.“</em>) verweisen wir auf's Forum und das Wiki.</p> <p>Dieser Mangel an Freiwilligen, bzw. die Tatsache, dass unsere Aktiven eben auch in Familie und Beruf aktiv sind, führt dazu, dass wir leider nicht alle unsere - manchmal zugegebenermaßen hochfliegenden - Pläne realisieren konnten.</p> <p>Andererseits bietet das vorhandene SELFHTML-Wissen im Wiki eben bereits jetzt eine Antwort auf die meisten Fragen.</p> <p>In diesem Sinne …</p> <p>Frohe Weihnachten und ein gutes Jahr 2023!</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/weblog/2022/nov/30/adventskalender-2022 Matthias Scharwies mscharwies@selfhtml.org 2022-11-30T18:44:20Z 2022-11-30T18:44:20Z Adventskalender 2022 <p>Auch in diesem Jahr möchte SELFHTML wieder einen Adventskalender für die Community anbieten.</p> <p>In unserem Forum und in den eingehenden Emails ist uns aufgefallen, dass es sich bei den Themen häufig nicht um <em>cutting-edge-technologies</em> für <em>early-adopter</em>, sondern um den ganz normalen Wahnsinn handelt, den man eigentlich doch auch selbst gewusst hat.</p> <p>Deshalb kommen hier die 24 häufigsten Fragen aus der FAQ, deren Antworten dem professionellen Entwickler leicht von der Hand gehen, unserer Zielgruppe - den Amateuren und semi-professionellen Webdesignern - jedoch Ideen und Anregungen für die eigene Arbeit geben.</p> <p>Der Worte sind genug gewechselt, … hier geht's endlich zum <a href="https://forum.selfhtml.org/advent/2022" rel="noopener noreferrer">Adventskalender</a>!</p> https://forum.selfhtml.org/weblog/2022/oct/01/oranger-text-auf-weissem-grund Matthias Scharwies mscharwies@selfhtml.org 2022-09-30T22:02:31Z 2022-09-30T22:02:31Z Oranger Text auf weißem Grund? <p>Teil 2 unserer <a href="https://blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki" rel="noopener noreferrer">Makeover-Serie</a></p> <p>Die bis 2022 im SELF-Wiki verwendete Linkfarbe <code>#2673bf</code> hat auf weißem Hintergrund einen Kontrast von <a href="https://webaim.org/resources/contrastchecker/?fcolor=2673BF&bcolor=FFFFFF" rel="nofollow noopener noreferrer">4.90:1</a>, was für großen Text ausreicht, für kleinen Fließtext jedoch nicht akzeptiert werden kann. Auf farbigen Hintergünden ist der Kontrast noch schlechter.</p> <p>Als das CSS untersucht wurde, fiel auf, dass die Farbe der Linktexte bei <code>:hover</code> zu <span style="color:#df6c20">orange</span> (auf weiß! - Kontrast <a href="https://webaim.org/resources/contrastchecker/?fcolor=DF6C20&bcolor=FFFFFF" rel="nofollow noopener noreferrer">3.33:1</a>) wechselte.</p> <h2 id="Vergleich_der_verwendeten_Linkfarben">Vergleich der bisher verwendeten Linkfarben</h2> <p>In dieser Tabelle sieht man das alte <span style="padding:0 .5em;background:#3983ab; color:white;">dunkelblau</span> und weitere Farbvarianten im Vergleich zur aktuellen Linkfarbe und zum <span style="padding:0 .5em;background: #337599; color: white;">SELF-blau</span> der Farbtabelle. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <table class="cf-default-table"> <tr> <th style="width:10.5em;">Farbe </th> <th> Beispiel </th> <th> Kontrast </th></tr> <tr> <td style="background-color: #2673bf; color: white; padding:.3em .5em;"> #2673bf <br> hsl(210 67% 45%) </td> <td> <span style="color:#2673bf;">aktuelle Linkfarbe im Wiki</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=2673BF&bcolor=FFFFFF">4.90:1</a><br /><span style="color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">FAIL</span> </td></tr> <tr> <td style="background-color: #3481CD; color: white; padding:.3em .5em;"> #3481CD <br> hsl(210 60% 50%) </td> <td> <span style="color:#2673bf;">aktuelle Linkfarbe im Forum und Blog</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=3481CD&bcolor=FFFFFF">4.06:1</a><br /><span style="color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">FAIL</span> </td></tr> <tr> <td style="background-color: #3983ab; color: white; padding:.3em .5em;">ehemaliges SELF-Blau <br> #3983ab <br /> hsl(201 50% 45%) </td> <td> <span style="color:#3983ab;">Linktext in SELF-blau</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=3983AB&bcolor=FFFFFF">4.19:1</a><br /><span style="color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">FAIL</span> </td></tr> <tr> <td style="background-color: #337599; color: white; padding:.3em .5em;"> neues SELF-Blau <br> #337599 <br /> hsl(201 50% 40%) </td> <td> <span style="color:#337599;">Vorschlag, bei dem alle oben aufgeführten Hintergründe passen</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=306F91&bcolor=FFFFFF">5.06:1</a><br /><span style="color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">PASS</span> </td></tr> <tr> <td style="background-color: #24219d; color: white; padding:.3em .5em;"> visited <br> #24219d <br> </td> <td> <span style="color:#24219d;">bisheriges visited im Wiki</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=24219d&bcolor=FFFFFF">11.8:1</a><br /><span style="color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">PASS</span> </td></tr> <tr> <td style="background-color: #df6c20; color: white; padding:.3em .5em;"> orange <br> #df6c20 <br> </td> <td> <span style="color:#df6c20;">a:hover im Wiki</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=DF6C20&bcolor=FFFFFF">3.33:1</a><br /><span style="color:white; background:#df6c20; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">WTF&#160;?</span> </td></tr> <tr> <td style="background-color: #990909; color: white; padding:.3em .5em;"> rot-braun <br> #990909 <br> </td> <td> <span style="color:#990909;">a:hover im Wiki (in Navigationen)</span> </td> <td> <a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/?fcolor=990909&bcolor=FFFFFF">8.75:1</a><br /><span style="color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;">PASS</span> </td></tr></table> <p>Höchste Zeit unser Farbkonzept zu überprüfen und zu verbessern!</p> <h2>unsere SELF-Farbpalette</h2> <p>... wurde 2010 von schuer aus dem gekauften Waipoua-Theme für den Wordpress-Blog entwickelt und 2012-2014 von performer für die ganze SELF-Welt angepasst:</p> <p>Die <a href="https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle#Farbt.C3.B6ne" rel="nofollow noopener noreferrer">SELF-Farbpalette</a> besteht aus je 4 Grund- und Pastelltönen, die die 0.1fache Deckung des Grundtons haben, (<strong>Ausnahme</strong> ist hellgrün mit 0.2)</p> <ul> <li>müssen in <code>hex</code> oder <code>rgb()</code> ohne Alphakanal umgerechnet werden, damit dunkler Hintergrund nicht durchscheint.</li> <li>die blaue Linkfarbe hat aber besonders bei Pastellhintergründen nicht genug Kontrast<br>→ 2 Alternativen: <ul> <li>dunklere Linkfarbe oder</li> <li>Verzicht auf farbigen Hintergrund!</li> </ul> </li> </ul> <p>Diese Farbpalette wurde so erweitert, dass sie überall ausreichende Kontraste erzielt und auch im Dunklen Modus noch ganz gut aussieht!</p> <h2 id="links">Kennzeichnungen von Links </h2> <p>Grundsätzlich sollten Links durch <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS#Mehrfachkennzeichnung" rel="nofollow noopener noreferrer">mehrere Merkmale erkennbar</a> sein, was gerade bei den Vorlagen mit den farbigen Hintergründen nicht eingehalten wurde. Im Fließtext sind Links durch die blaue Linkfarbe und Unterstreichung erkennbar. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> Bei <code>:hover</code> und <code>:focus</code> kommt hellblauer Hintergrund dazu.</p> <p>Blog-Serie zum Makeover 2022</p> <ol> <li><a href="https://blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki" rel="noopener noreferrer">Makeover für das SELF-Wiki</a></li> <li><strong>Oranger Text auf weißem Grund?</strong></li> <li>Icons und Grafiken</li> </ol> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Ist ihnen aufgefallen, dass die <code>hsl()</code>-Funktionen ohne Komma notiert wurden? - Normalerweise werden mehrere Werte in CSS durch Leerzeichen getrennt. Dies wurde nun vom W3C vereinheitlicht.<br>SELF-Wiki: <a href="https://wiki.selfhtml.org/wiki/Grafik/Farbe/Farbmodelle" rel="nofollow noopener noreferrer">Farbmodelle</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Textlinks in Aufzählungen wie in der Sidebar oder auf den Inhaltsverzeichnissen der Portalseiten werden nur durch die Linkfarbe gekennzeichnet. Dies wird auch vom W3C <a href="https://www.w3.org/TR/css-color-4/" rel="nofollow noopener noreferrer">z. B. hier</a> so gehandhabt. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2022/aug/31/immer-wieder-gefragt Matthias Scharwies mscharwies@selfhtml.org 2022-08-31T17:37:04Z 2022-08-31T17:37:04Z Immer wieder gefragt … <p>Oft steht man vor einem Problem und kommt nicht weiter, da man gar nicht weiß, was genau nicht funktioniert. Und falls man dann doch den Kern des Problems entdeckt hat, ist es gar nicht so einfach ohne Kenntnis des passenden Fachbegriffs eine Lösung im Netz zu finden.</p> <p>In solchen Fällen ist das SELF-Forum und immer wieder auch unsere Mailadresse ein beliebter Anlaufpunkt. Teilweise können die Fragenden direkt dort abgeholt werden, wo ihr Problem aufgetreten ist - oft erhalten sie auch Hinweise zu Aspekten, nach den sie gar nicht gefragt haben. Manche saugen diese zusätzlichen Informationen dankbar auf, andere ignorieren dies leider geflissentlich.</p> <p>In letzter Zeit schien es wieder einmal, also ob sich diese Fragen im Wochentakt wiederholen. Deshalb listen wir nun die häufigsten Fragen zusammen mit einer ausführlicheren Fehlerbeschreibung in unserem seit langem bestehenden FAQ-Bereich, der sich nun im moderneren Aussehen präsentiert:</p> <p><a href="https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F#FAQ" rel="nofollow noopener noreferrer"><strong>FAQ</strong> im SELF-Wiki</a></p> <p>Für jede Frage existieren auch Links auf entsprechende Tutorials in unserem Wiki.</p> https://forum.selfhtml.org/weblog/2022/jul/22/hgroup-ist-wieder-da Matthias Scharwies mscharwies@selfhtml.org 2022-07-22T04:31:25Z 2022-07-22T04:31:25Z Outline raus! Dafür ist hgroup wieder da! <p>… oder war es nie weg?</p> <p>In seinem Artikel <a href="https://css-tricks.com/roundup-of-recent-document-outline-chatter/" rel="nofollow noopener noreferrer"><em>Roundup of Recent Document Outline Chatter</em></a> auf css-tricks gibt Geoff Graham die neuesten Entwicklungen um den <em><strong>document-outline-algorithm</strong></em> wieder.</p> <p>Dieser sollte HTML-Dokumente anhand ihrer Seitenstruktur, bzw. auf Elemente wie <code>section</code>, <code>article</code>und <code>aside</code> analysieren und dann eine semantisch passende Gliederung erstellen.</p> <p>Dies scheiterte an zwei Dingen: Es wurde von den Browser-Herstellern nie implementiert und mit der Überschriftenhierarchie von <code>h1</code> bis <code>h6</code> hätte man dies eigentlich bereits ohne Umwege bewerkstelligen können. Aus diesen Gründen wird nun der <em>document-outline-algorithm</em> entfernt.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>An seine Stelle soll eine Überschriften-basierte Gliederung treten. Dabei gibt es vor allem das Problem, dass oft mehrere Überschriften verschiedener Hierarchien verwendet werden, um Überschriften mit Untertiteln zu kombinieren:</p> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Willkommen in W3Docs<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Bei uns können Sie alles über HTML lernen.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Immer aktuell mit HTML 5!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> <p>Solche Kombinationen würden ein Inhaltsverzeichnis und auch eine Gliederung durch Robots unnötig kompliziert und unübersichtlich machen.</p> <p>Aus diesem Grund sollte ein umschließendes <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/hgroup" rel="nofollow noopener noreferrer">hgroup</a>-Element nur die <code>h1</code> als Überschrift erkennen. <code>hgroup</code> wurde aber nicht in HTML5 übernommen und galt daher als obsolet. Im <em>Living Standard</em> der WHATWG blieb es aber erhalten.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <p>Nachdem nun die HTML5-Spezifikation der W3C nicht weiterentwickelt wird, ist es ganz offiziell wieder dabei. Im Unterschied zu früher enthält es aber nur <strong>eine</strong> Überschrift, der ein oder mehrere Textabsätze voranstehen oder folgen:</p> <pre><code class="block good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Willkommen bei SELFHTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Bei uns können Sie alles über HTML lernen.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Immer aktuell mit dem Living Standard von HTML!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>hgroup</span><span class="token punctuation">></span></span> </code></pre> <p>Der bestehende Wiki-Artikel zur <em>document-outline</em> wurde durch eine Weiterleitung auf <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung#.C3.9Cberschriften" rel="nofollow noopener noreferrer">HTML/Tutorials/Seitenstrukturierung</a> ersetzt. Dieses Tutorial enthält nun auch ein Beispiel mit <code>hgroup</code>.</p> <p>Auch der Referenz-Artikel <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/hgroup" rel="nofollow noopener noreferrer">HTML/Elemente/hgroup</a> ist aktualisiert!</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>whatwg/html: <a href="https://github.com/whatwg/html/pull/7829" rel="noopener noreferrer">replace current outline algorithm with one based on heading levels #7829</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>WHATWG: <a href="https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element" rel="nofollow noopener noreferrer">the-hgroup-element</a> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2022/apr/30/navigationen-oben-oder-unten Matthias Scharwies mscharwies@selfhtml.org 2022-04-30T20:30:28Z 2022-04-30T20:30:28Z Navigationen - oben oder unten? <p>Aus einer unverfänglichen Frage im Forum (<a href="https://forum.selfhtml.org/self/2022/apr/25/warum-soll-die-navigation-im-quelltext-neuerdings-uber-dem-haupttext-stehen/1798713#m1798713" rel="noopener noreferrer">Warum soll die Navigation im Quelltext neuerdings über dem Haupttext stehen?</a>) entwickelte sich ein umfangreicheres Projekt, das noch nicht ganz abgeschlossen ist:</p> <h3>Position des nav-Elements im HTML-Markup</h3><p>Mit <strong>Erwartungskonformität</strong> (ISO 9241-110)<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup><sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> werden Konventionen zusammengefasst, die dem Nutzer eine einheitliche, ihm vertraute Gestaltung sichern.</p> <p>Nutzer sind es gewöhnt, die Hauptnavigation auf einer Webseite oben vorzufinden. Oder links. (Schreibrichtung von links nach rechts, Zeilen von oben nach unten vorausgesetzt.) Man bräuchte schon sehr gute Gründe, um von dieser Konvention abzuweichen.</p> <p>Oben bzw. links heißt: am Anfang im DOM. Die visuelle Reihenfolge sollte der Reihenfolge im DOM entsprechen; andernfalls dürften sehende Tastaturnutzer und sehende Screenreader-Nutzer ziemlich verwirrt sein. <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <h3>Ein Flyout-Menü</h3><p>Aus der folgenden Diskussion um Skip-Links, die es ermöglichen direkt zum Inhalt zu springen, sollte ein neues Beispiel für das SELF-Wiki entstehen:</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Flyout-Men%C3%BC" rel="nofollow noopener noreferrer">HTML/Tutorials/Navigation/Flyout-Menü</a></p> <p>Bis jetzt finden sich dort zwei Varianten:</p> <ol> <li>Eine Variante erreicht die Interaktivität des Auf- und Zuklappens mit ein bisschen JavaScript.</li> <li>Die zweite Variante wählt die vermeintlich „einfachere“ Version mit dem details-Element. Allerdings zeigten Tests, dass hier die Zugänglichkeit nicht 100%ig gegeben ist, was in einem anderen Thread heiß diskutiert wurde. <sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></li> </ol> <p>Sobald es beruflich etwas ruhiger wird, wird der Wiki-Artikel fertig gestellt! Versprochen!</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="http://www.kommdesign.de/texte/din.htm" rel="nofollow noopener noreferrer">Die EN ISO 9241 - 10</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://www.procontext.de/aktuelles/2020/06/iso-9241-110-in-neuer-auflage-erschienen.html" rel="nofollow noopener noreferrer">Dialogprinzipien wurden überarbeitet und heißen jetzt Interaktionsprinzipien – Usability-Norm ISO 9241-110 in neuer Auflage erschienen</a> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>Gunnar Bittersmann im <a href="https://forum.selfhtml.org/self/2022/apr/25/warum-soll-die-navigation-im-quelltext-neuerdings-uber-dem-haupttext-stehen/1798778#m1798778" rel="noopener noreferrer">SELF-Forum </a> <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p>SELF-Forum: <a href="https://forum.selfhtml.org/self/2022/may/01/menu-mit-details-und-summary-im-screenreader-voiceover/1798815#m1798815" rel="noopener noreferrer">Menü mit details und summary im Screenreader VoiceOver</a> <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2022/mar/26/gif-heute Matthias Scharwies mscharwies@selfhtml.org 2022-03-26T04:06:59Z 2022-03-26T04:06:59Z GIF - heute noch aktuell? <p>Vor wenigen Tagen starb Stephen E. Wilhite an Covid. Er wurde als Erfinder des GIF-Grafikformats berühmt. Das <em>Graphics Interchange Format</em>, kurz <strong>GIF</strong> ist ein <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen" rel="nofollow noopener noreferrer">Grafikformat</a> für Bilder mit einer Farbpalette von max. 256 Farben, inkl. einer „Transparenzfarbe“. Es erlaubt eine verlustfreie Kompression der Bilder.</p> <p>Besonders interessant: Es können mehrere (übereinanderliegende) Einzelbilder in einer Datei abgespeichert werden, die dann als Animationen interpretiert werden.</p> <p>Zwischenzeitlich waren <em>animated GIFs</em> als Klickibunti verpönt. WhatsApp, Facebook (aka <em>„Insta für alte Leute“</em>) und Twitter haben ihnen eine Renaissance verschafft.</p> <h2 id="alternativen">Alternativen heute</h2> <p>Im Webdesign ist gibt es heute mehrere Alternativen: Da Wilhite und seine Firma Compuserve den Lempel-Ziv-Welch-Algorithmus zur Komprimierung verwendeten, klagte der ursprüngliche Rechteinhaber Unisys auf Lizenzgebühren. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Deshalb wurde 1994 das rechtefreie <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten" rel="nofollow noopener noreferrer"><strong>PNG</strong>-Format</a> entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard.</p> <p>Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#WebP" rel="nofollow noopener noreferrer"><strong>WebP</strong></a>, das bereits von allen Brwosern unterstützt wird, sowie AVIF, die beide eine noch bessere Komprimierung aufweisen.</p> <p>Andererseits werden heute viele Grafiken <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials" rel="nofollow noopener noreferrer">direkt in <strong>SVG</strong></a> erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren" rel="nofollow noopener noreferrer">CSS animiert</a> und verlustfrei und immer gestochen scharf skaliert werden. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> <p>Grundlegendes Problem von animierten GIFs ist die mangelnde Steuerbarkeit durch den Benutzer. Während dies bei einer drehenden Erdkugel nur unbequem ist, vertragen manche Nutzer aus gesundheitlichen Gründen keine Animationen. Um hier auf Benutzerwünsche einzugehen, wurde die <code>prefers-reduced-motion</code>-Medienabfrage geschaffen. <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <p>Eine solche Media Query kann im CSS, aber auch direkt im <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/picture" rel="nofollow noopener noreferrer">picture</a>-Element verwendet werden:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CG_Heart.gif<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(prefers-reduced-motion: no-preference)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Heart-screenshot.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Herz, Computergenerierter Querschnitt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> </code></pre> <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html" width="800" height="420"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html</a> </p> </iframe> <p>In diesem Beispiel wird abgefragt, welche Nutzereinstellungen zu Animationen vorhanden sind. Falls keine Festlegung getroffen wurde, wird das animated GIF gezeigt. Falls der Wert <code>reduce</code> gesetzt wurde, wird ein statischer Screenshot gezeigt.</p> <p>Noch besser wäre eine Einbindung als Film (siehe <a href="https://upload.wikimedia.org/wikipedia/commons/3/3f/CG_heart_90fps.webm" rel="nofollow noopener noreferrer">Datei als webm</a>), da dieser dann vom Nutzer gestartet und beliebig gestoppt werden kann.</p> <p>Im Netz gibt es weitere Vorschläge, dies auch durch Skripte zu realisieren. Auf dev.to habe ich einen Artikel gefunden, der zeigt, wie man das GIF aufsplittet, in WebP verwandelt und bei <code>prefers-reduced-motion=reduce</code> eben unbeweglich darstellt. Aber der Artikel selbst warnt vor einem Einsatz im wirklichen Leben! <sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></p> <p>Andere schlagen vor mit canvas oder PHP einen Screenshot des GIFs zu machen und diesen dann wiederzugeben.</p> <p><strong>tl;dr</strong>:</p> <p>Für komplexe Infografiken und Animationen sind entweder Videos oder SVGs empfehlenswert, die vom Benutzer gesteuert werden können.</p> <p>Ist ein <em>animated GIF</em> bereits vorhanden, kann man mit einem Screenshot als <em>fallback</em> Nutzerwünsche berücksichtigen.</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Wikipedia: <a href="https://de.wikipedia.org/wiki/Graphics_Interchange_Format" rel="nofollow noopener noreferrer">Graphics Interchange Format</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="/images/4ad1d258-acd7-11ec-bde6-b42e9947ef30.gif" rel="noopener noreferrer"><img src="/images/4ad1d258-acd7-11ec-bde6-b42e9947ef30.gif?size=medium" alt="" loading="lazy"></a>Bei einem GIF wie <a href="https://wiki.selfhtml.org/wiki/Datei:Wait.gif" rel="nofollow noopener noreferrer">hier</a> sieht man das Problem. Die Rastergafik ist pixelig. Eine Änderung von Farbe, Geschwindigkeit, etc kann nur mit einem Grafik-Programm vorgenommen werden. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>SELF-Blog: <a href="https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel" rel="noopener noreferrer">Multimedia- Wie viel ist zu viel?</a> vom 01.08.2021 <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p>dev.to <a href="https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg" rel="nofollow noopener noreferrer">Pausing GIF animations on dev.to for those who <code>prefer-reduced-motion</code> [hack 1] </a> <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung Matthias Scharwies mscharwies@selfhtml.org 2022-02-21T23:58:12Z 2022-02-21T23:58:12Z Geht das auch im IE? - eine Geschichte der Iconsets zur Browserunterstützung <p>Die Doku beschrieb von Anfang an nicht nur den Soll-Zustand der Spezifikationen, sondern eben auch die tatsächlich vorhandene Browserunterstützung.</p> <p>Die ersten Versionen waren geprägt von der Zeit der Browserkriege, in der manche proprietären Elemente eben nur in einem Browser funktionierten. Heute ist die Anzeige dieser Browserunterstützung lange nicht mehr so wichtig wie früher, da selbst völlig neue Features oft sehr schnell von allen Browsern übernommen werden. Die schnelle Versionierung im Wochenabstand (bald haben Chrome und Firefox die 100 erreicht) wirkt im Vergleich zur Vergangenheit paradiesisch.</p> <p>Mit dem Ende des Internet Explorer und dem kommenden Makeover wird nun auch die im Wiki verwendete <a href="https://wiki.selfhtml.org/wiki/Vorlage:Iconset" rel="nofollow noopener noreferrer">Vorlage:Iconset</a> beerdigt.</p> <h2>Zeit für einen kleinen Rückblick:</h2> <p><strong>center-Element aus der Doku 4.0</strong> (21.01.1996)</p> <p><a href="/images/819dd898-932a-11ec-b1a2-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/819dd898-932a-11ec-b1a2-b42e9947ef30.png?size=medium" alt="center-Element aus der Doku4.0 (21.01.1996)" title="center-Element aus der Doku4.0 (21.01.1996)" loading="lazy"></a></p> <p>Können Sie alle vier Icons noch erkennen/zuordnen? <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <hr> <p><strong>font-Element aus der Doku 7.0</strong> (27.04.1998)</p> <p><a href="/images/ca42ecf6-936f-11ec-8f2d-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/ca42ecf6-936f-11ec-8f2d-b42e9947ef30.png?size=medium" alt="font-Element aus der Doku 7.0 (27.04.1998)" title="font-Element aus der Doku 7.0 (27.04.1998)" loading="lazy"></a></p> <p>Hier sind die einzelnen Icons den heutigen schon ähnlicher.</p> <hr> <p>Im SELF-Wiki wurden die Einzelbilder ab 2010 zu einem, bzw. zwei Sprites zusammengefasst, deren Versionen Sie heute noch vergleichen können:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Datei:Iconset.png" rel="nofollow noopener noreferrer">Datei:Iconset.png</a></li> <li><a href="https://wiki.selfhtml.org/wiki/Datei:Iconset-Extended.png" rel="nofollow noopener noreferrer">Datei:Iconset-Extended.png</a></li> </ul> <p>Da mit der schnellen Versionierung von Chrome und Firefox immer mehr Änderungen an der Spritegrafik nötig wurden, wurde zusätzlich eine Vorlage:Browsericonset eingeführt, in der Icons und Versionsnummern als getrennte Parameter übergeben wurden.</p> <p>Wichtiger wurde ein optionaler Link zu caniuse, der in der <a href="https://wiki.selfhtml.org/wiki/Vorlage:Caniuse" rel="nofollow noopener noreferrer">Vorlage:Caniuse</a> erfolgt.</p> <p>Dabei fiel auf, dass in den überwiegenden Fällen die Icons heute einfach nur Verzierung sind, die ihre ehemals prominente Rolle verloren haben. Während in der Vergangheit mehrfach überlegt wurde, ein eigenes Icon für fehlende IE-Unterstützung zu kreieren, hat sich dies nun mit dem Ende des Uralt-Browsers erledigt.</p> <p>Die <a href="https://wiki.selfhtml.org/wiki/Vorlage:Caniuse" rel="nofollow noopener noreferrer">Vorlage:Caniuse</a> bietet nun einen Link zu einer Visualisierung, die nicht nur aktuelle, sondern eben auch vergangene und zukünftige Versionen und Marktanteile umfasst. Sie ist behutsam neu gestaltet worden.</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Das linke Icon zeigt, dass dies ein „<em>Sprachelement von HTML 3.0 (irgendwann vielleicht doch noch offizieller Sprachstandard)</em>" sei. Das rechte Element bezieht sich auf den UDI-Browser, von dem nur in der <a href="https://en.wikipedia.org/wiki/UdiWWW" rel="nofollow noopener noreferrer">englischsprachigen Wikipedia</a> Spuren zu finden sind. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2022/jan/31/css-voll-normal-sind-css-resets-heute-noch-notig Matthias Scharwies mscharwies@selfhtml.org 2022-01-31T19:23:48Z 2022-01-31T19:23:48Z CSS - voll normal! Sind CSS-Resets heute noch nötig? <p>CSS revolutionierte die Gestaltung von Webseiten. Leider gab es aber große Inkonsistenzen zwischen den verschiedenen Browsern. Während der Internet Explorer bei Listen die Einrückungen über <code>margin</code> vornahm, verwendeten die anderen Browser dafür <code>padding</code>. Grund genug, alle Browser-Einstellungen in einem <strong>CSS-Reset</strong> zurückzusetzen:</p> <pre><code class="block language-css"><span class="token selector">ul, ol, li</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Andere empfahlen diese Regel mit dem Universalselektor <code>* {...}</code>, um gleich alle HTML-Elemente so zu „normalisieren“. Schließlich gab es das Problem unterschiedlicher Darstellungen auch beim Boxmodell-Fehler des Quirks Mode. Es gab immer radikalere CSS-Resets, die teilweise sogar Links erst einmal in Textfarbe und ohne Unterstreichung „normalisierten“. Eine Übersicht über diese CSS-Resets gibt es im <a href="https://codepen.io/chriscoyier/pen/JpLzjd" rel="noopener noreferrer">HTML Kitchen-Sink</a> von Chris Coyier. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Nachdem der Internet Explorer nun von wenigen Reservaten abgesehen endlich ausgestorben ist und sich die Default-Stylesheets der anderen Browser nicht groß unterscheiden, stellt sich nun die Frage, ob CSS-Resets heute noch nötig sind und welche Einstellungen sie denn enthalten sollten.</p> <p>Elija Manor zeigt in dieser Visualiserung, dass eine Normalisierung einiger, weniger Eigenschaften bereits ausreichen würde:</p> <p><a href="/images/27d59170-8335-11ec-a287-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/27d59170-8335-11ec-a287-b42e9947ef30.png?size=medium" alt="Visualizing CSS-Resets von Elija Manor" title="Visualizing CSS-Resets von Elija Manor" loading="lazy"></a></p> <p>Welche Eigenschaften sollte man heute normalisieren?</p> <h2>all</h2> <p>Elad Shechter schlug im Gespräch mit Chris Coyier ein neues CSS-Reset vor, das Gebrauch der neuen <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/all" rel="nofollow noopener noreferrer">all</a>-Eigenschaft und unset-Wertes macht. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p> <pre><code class="block language-css"><span class="token selector">*:where(:not(iframe, canvas, img, svg, video):not(svg *))</span> <span class="token punctuation">{</span> <span class="token property">all</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Mit diesen Zeilen werden alle Festlegungen des User-Agent-Stylesheets außer für die <code>display</code>-Eigenschaft entfernt.</p> <h2>box-sizing</h2> <p>In einem Folgepost überlegt Chris Coyier, ob <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing" rel="nofollow noopener noreferrer">box-sizing</a> überhaupt noch normalisiert werden muss.<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup></p> <pre><code class="block language-css"><span class="token selector">*, *::before, *::after</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Da immer mehr Layouts mit Grid und Flexbox realisiert werden, bei denen <code>fr</code>-Einheiten und flexible Breiten zum Zuge kommen, ist die Einstellung des Box-Modells selbst bei Elementen mit <code>padding</code> und <code>margin</code> eigentlich nicht mehr nötig.</p> <h2>text-size-adjust</h2> <p>Mobile Safari vergrößert bei iPhones die Standardschriftgröße, wenn Sie eine Website vom Hoch- ins Querformat wechseln. Dies sollte die Lesbarkeit von nicht für Mobilgeräte optimierten Websites verbessern. Während dies in einer Zeit, in der buchstäblich keine Website für Mobilgeräte optimiert war, zweifellos nützlich war, ist es heutzutage deutlich weniger hilfreich. Deshalb ist hier ein CSS-Reset der <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/text-size-adjust" rel="nofollow noopener noreferrer">text-size-adjust</a>-Eigenschaft empfehlenswert. <sup class="footnote-ref"><a href="#fn4" id="fnref4">[4]</a></sup></p> <pre><code class="block language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">-webkit-text-size-adjust</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">text-size-adjust</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>PS: Im SELF-Wiki werden CSS-Resets in unserem <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg" rel="nofollow noopener noreferrer">Einstieg in CSS</a>-Kurs im <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Ausblick#Normalisierung" rel="nofollow noopener noreferrer">letzten Kapitel (Ausblick) </a>beschrieben.</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Ein ausführlichere Geschichte der CSS-Resets finden Sie bei Peter Müller: <a href="https://html-und-css.de/css-resets/" rel="nofollow noopener noreferrer">Eine kurze Geschichte der »CSS Resets«</a> vom 20. Juli 2020 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>css-tricks: <a href="https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/" rel="nofollow noopener noreferrer">An Interview With Elad Shechter on “The New CSS Reset” </a> am 19.10.2021 <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p>css-tricks: <a href="https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/" rel="nofollow noopener noreferrer">Notes on Josh Comeau’s Custom CSS Reset </a> von Chris Coyier, 05.01.2022 <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> <li id="fn4" class="footnote-item"><p>css-tricks: <a href="https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/" rel="nofollow noopener noreferrer">Your CSS reset needs text-size-adjust</a> von Chris Coyier am Feb 11, 2022 <a href="#fnref4" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2021/dec/24/20-21-22 Matthias Scharwies mscharwies@selfhtml.org 2021-12-24T06:07:28Z 2021-12-24T06:07:28Z 20, 21 -22 … <p><strong>Weihnachtsbrief 2021</strong></p> <p>Warten, zählen, hoffen, bangen …</p> <p>2021 war wieder ein Jahr des Wartens und Zählens. Nicht Wetter und Unternehmungslust bestimmten, ob man rausdurfte. Es wurden Inzidenzen verglichen, Statistiken analysiert und die Tage bis zum Ende der Quarantäne oder zum erhofften Impftermin gezählt.</p> <p>2021 war wie schon 2020 ein besonderes Jahr, das uns mit der Corona-Pandemie enorm belastete. Zusätzlich wurde im März Matthias Apsel plötzlich aus unserer Mitte gerissen <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> – sein freundliches Wesen, sein Humor und vor allem sein Know-how fehlen uns.</p> <p>Eigentlich sollte das Jahr unter dem Schwerpunkt-Thema <strong>Integration</strong> stehen: Nachdem unser Wordpress-Blog aufgrund eines fehlerhaften Plugins keine Kommentare mehr darstellte, nahm sich Christian Kruse der Sache an und schrieb einen Blog, der im Forum integriert war. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> Selbstverständlich übertrug er dabei alle <a href="https://blog.selfhtml.org/archive" rel="noopener noreferrer">bestehenden Beiträge</a> seit 2008. Vielen Dank dafür.</p> <p>Im Oktober konnten wir uns trotz Pandemie und 2G in Hamburg treffen und den Verein auf neue Schienen setzen. Auch wenn es einige Absagen gab – schließlich kamen mehr als vorher befürchtet! Martin Kunkel wurde zum 2. Vorsitzenden gewählt. Herzlich willkommen im Vorstands-Team!</p> <p>Im Herbst überraschte mich Marc mit dem <a href="https://blog.selfhtml.org/2021/nov/29/adventskalender-2021" rel="noopener noreferrer">Adventskalender</a>, den er vorbereitet hatte. Das Thema <a href="https://wiki.selfhtml.org/wiki/Barrierefreiheit" rel="nofollow noopener noreferrer">Barrierefreiheit</a> wird oft missverstanden, geht uns aber alle an!</p> <blockquote>Ein barrierefreies Produkt kann von jedem Menschen besser genutzt werden. So gibt es keinen Menschen auf der Welt, der einen kleinen Button schneller drücken kann als einen großen.</blockquote> <p>Marc nutzte die Gelegenheit, uns Personen und interessante Blogs aus der deutschsprachigen a11y-Szene vorzustellen. Dabei wurden auch unsere bestehenden Wiki-Seiten überprüft und aktualisiert. Vielen Dank an Marc Haunschild.</p> <p>Die im Blog veröffentlichten Kalenderbeiträge wurden auf unserem Twitter-Kanal <sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> <em>getweetet</em>, sodass wir einige neue Twitter-Abonnenten bekamen. Gunnar Bittersmann retweeted sonst Nachrichten und Trends aus der englischsprachigen Welt.</p> <p>Warum man unseren Twitter-Kanal nicht auf der Startseite findet? Das fragten wir uns in Hamburg auch und planen eine sanfte Renovierung unserer Strukturen. Es gibt aber keinen Countdown, bei dem Sie und wir die Tage abzählen. Schauen Sie einfach immer mal wieder zu uns rein!</p> <p>Frohe Weihnachten und ein gutes neues Jahr!</p> <p>Matthias Scharwies, 1. Vorsitzender</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://blog.selfhtml.org/2021/mar/11/besturzt-und-fassungslos-matthias-apsel-ist-gestorben" rel="noopener noreferrer">Bestürzt und Fassungslos – Matthias Apsel ist gestorben</a> vom 11.03.2021 <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://blog.selfhtml.org/2021/jan/24/neues-weblog" rel="noopener noreferrer">Neues Weblog!</a> vom 24.01.2021 <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> <li id="fn3" class="footnote-item"><p><a href="https://twitter.com/SELFHTML" rel="nofollow noopener noreferrer">twitter.com/SELFHTML</a> <a href="#fnref3" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/weblog/2021/dec/23/aria-live-regionen Matthias Scharwies mscharwies@selfhtml.org https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen 2021-12-23T04:03:13Z 2021-12-23T04:03:13Z ARIA-live Regionen <p>Wenn es darum geht, deutsche Quellen für Barrierefreiheit zu nennen, landet man unwillkürlich immer wieder bei denselben Menschen und Firmen. Eine von den sehr aktiven ist die tollwerk GmbH aus Nürnberg mit einem tollen Blog über Barrierefreiheit.</p> <p>tollwerk, beziehungsweise ihr „Chef“ Joschi Kuphal (deren „Führungskonzept“ Quantum sieht keinen echten Chef vor) organisieren unter anderem den Accessibility Club, der regelmäßig als Side-Event die beyondtellerrand bereichert, aber auch davon unabhängig statt findet.</p> <p>Wer sich für die vielen Aktivitäten und Verdienste von tollwerk und Joschi Kuphal interessiert, findet auf der Website reichlich Lesestoff, auch über das spannende „Quantum-System“ genannte Arbeitskonzept.</p> <p>Darüberhinaus sind Beiträge von Gastautoren gern gesehen in der (noch kleinen, aber feinen) Wissenssammlung auf der Website. Beispielhaft möchte ich den Artikel von Sonja Weckenmann aufführen. Dafür gibt es zwei Gründe: erstens ist der Artikel die vielleicht beste deutschsprachige, frei zugängliche Zusammenfassung von ARIA-Live-Regionen. Wer den Artikel durchliest ist zu diesem Thema umfassend und nach heutigem Stand abschließend informiert.</p> <p>Zusätzlich hat Sonja Weckenmann dazu im deutschsprachigen technica11y-Kanal zu diesem Thema gesprochen (auch eine der Baustellen, auf denen Joschi Kuphal mitwirkt).</p> <p>Hier die Links</p> <p>Zum Text <a href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" rel="nofollow noopener noreferrer">ARIA Live-Regionen</a></p> <p>Zum Vortrag (Hinweis: YouTube-Video. YouTube gehört zu Google und sammelt Daten!) <a href="https://www.youtube.com/watch?app=desktop&v=klqgya6jfY4" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?app=desktop&v=klqgya6jfY4</a></p> https://forum.selfhtml.org/weblog/2021/dec/21/mindscreen-blog-und-veranstaltungshinweise Matthias Scharwies mscharwies@selfhtml.org 2021-12-21T05:00:35Z 2021-12-21T05:00:35Z mindscreen: Blog und Veranstaltungshinweise <p>Gerade in deutscher Sprache gleicht das Zusammentragen von Informationen zur Barrierefreiheit einem Puzzlespiel. Die Informationen sind verstreut und zusammenhängende Sammlungen sind rar. (Eine schöne Sammlung dazu findet sich übrigens bei uns im <a href="Barrierefreiheit#Weblinks" rel="noopener noreferrer">SELF-Wiki</a>) ;-)</p> <p>Kleinen Agenturen, die sich dem Thema - zum Teil schon seit vielen Jahren - verschrieben haben, kommt dabei eine große Bedeutung zu. Sie engagieren sich oft auch über die Monetarisierung hinaus, entwickeln Lösungen und beteiligen sich an OpenSource-Projekten. Die eine oder andere Agentur hat daher auch bereits den Weg in den Adventskalender gefunden. Bisher unerwähnt geblieben ist mindscreen von Annett und Stefan Farnetani, die sich im TYPO3-Umfeld engagieren (mit dem Inhaber hatte ich meinen ersten intensiven Austausch beim TYPO3 Accessibility Sprint, an dem wir beide teilnahmen). mindscreen ist unter anderem der Hersteller einer ausgezeichneten Software zum Testen von Webangeboten auf Barrierefreiheit.</p> <p>Das Team von mindscreen veröffentlicht zum Thema, stellt Expertise zur Verfügung (zum Beispiel bei Vorträgen der IAAP D-A-CH - <a href="https://iaap-dach.org/veranstaltungen/alles-unter-einem-d-a-ch.html" rel="nofollow noopener noreferrer">https://iaap-dach.org/veranstaltungen/alles-unter-einem-d-a-ch.html</a>), unterstützt Fronta11y (4. Türchen) und engagiert sich in den beiden relevanten Berufsverbänden IAAP und German UPA. Bei letzterer leitet Stefan Farnetani den AK Barrierefreiheit.</p> <p>Unter anderem trägt der Blog mit regelmäßigen Beiträgen zur Barrierefreiheit zum allgemeinen Wissensschatz bei und in der Eventliste finden sich regelmäßig Veranstaltungen zum Thema Barrierefreiheit.</p> <p>Viel Spaß mit dem Link im heutigen Türchen (nicht erschrecken - es sind auch englischsprachige Beiträge dabei!</p> <p>Event-Liste</p> <ul> <li><a href="https://www.mindscreen.de/web-accessibility-events" rel="nofollow noopener noreferrer">https://www.mindscreen.de/web-accessibility-events</a></li> </ul> <p>Blog</p> <ul> <li><a href="https://www.mindscreen.de/blog" rel="nofollow noopener noreferrer">https://www.mindscreen.de/blog</a></li> </ul> <p>Marc Haunschild</p> https://forum.selfhtml.org/weblog/2021/dec/20/manuel-matuzovic-die-superpower-der-tabulator-taste Matthias Scharwies mscharwies@selfhtml.org 2021-12-20T03:55:46Z 2021-12-20T03:55:46Z Manuel Matuzovic: Die Superpower der Tabulator-Taste <p>Manuel ist nach eigenen Angaben zur Barrierefreiheit gekommen, weil er sich an einem Wettbewerb beteiligt hat, bei der ein barrierefreies Produkt abgegeben werden sollte und seine Einreichung war nicht barrierefrei.</p> <p>Als er daraufhin begann, sich in das Thema einzuarbeiten, ließ es ihn nicht mehr los. Er tritt als Redner auf (einmal haben wir gemeinsam im Accessibility Club vorgetragen <a href="https://accessibility-club.org/event/accessibility-club-meetup-8-2" rel="nofollow noopener noreferrer">https://accessibility-club.org/event/accessibility-club-meetup-8-2</a>), hat ein eigenes Blog mit vielen Beiträgen zum Thema und hat nun sogar einen Kurs bei dem berühmten Smashing Magazine (<a href="https://smashingconf.com/online-workshops/workshops/manuel-matuzovic-apr" rel="nofollow noopener noreferrer">https://smashingconf.com/online-workshops/workshops/manuel-matuzovic-apr</a>) - ein toller Kollege, den ich für seine unterhaltsame und fachlich souveräne Art schätze. Eine sehr angenehme Kombination.</p> <p>Am bekanntesten ist vermutlich seine Website <a href="https://www.htmhell.dev/" rel="nofollow noopener noreferrer">https://www.htmhell.dev/</a>, in der die dunkle Seite der Webentwicklung einen Ehrenplatz gefunden hat.</p> <p>Jetzt kommt das große ABER: Es ist üblich, Artikel über Webtechniken oder Vorträge in englischer Sprache zu halten. So war bisher nichts in deutscher Sprache verfasst, was es von Manuel zu hören und zu lesen gibt.</p> <p>Glücklicherweise hat er auf Twitter „laut“ nachgedacht, ob er nicht mal etwas auf deutsch verfassen sollte und ich habe die Gelegenheit genutzt ihn dazu zu ermuntern. Pünktlich zum Adventskalender gibt es eine Premiere: ein deutscher Blogbeitrag über die Superkraft der Tabulator-Taste. Ein kurzweiliger Beitrag über sein erklärtes „Lieblingswerkzeuge für Barrierefreiheit-Checks“ (<a href="https://www.matuzo.at/blog/de/testing-with-tab/" rel="nofollow noopener noreferrer">https://www.matuzo.at/blog/de/testing-with-tab/</a>).</p> <p>Zu seinem ansonsten englischen Blog führt der Link unten - auch wenn es schwer fällt: versucht euch dran! Es lohnt sich. Und wenn ich das Zwitschern eines kleinen Vogels richtig verstanden habe, wird es dort womöglich in Zukunft noch weitere deutsche Körnchen zu picken geben. ;-)</p> <p><a href="https://www.matuzo.at/blog/de/testing-with-tab/" rel="nofollow noopener noreferrer">https://www.matuzo.at/blog/de/testing-with-tab/</a></p> <p><a href="https://www.matuzo.at/" rel="nofollow noopener noreferrer">https://www.matuzo.at/</a></p> <p>Marc Haunschild</p> https://forum.selfhtml.org/weblog/2021/dec/11/technica11y Matthias Scharwies mscharwies@selfhtml.org 2021-12-11T03:43:25Z 2021-12-11T03:43:25Z technica11y <p>Automatisierung war bereits an Tag 9 ein Thema. Die Tools selber sind in der Regel auf Englisch und hier soll es nur um deutsche Quellen gehen.</p> <p>Immerhin bietet mit tenon.io einer der größeren kommerziellen Anbieter eine Plattform für deutsche Vorträge. Die bekannte englischsprachige Vortragsreihe technica11y hat mit <strong>„technica11y auf Deutsch“</strong> einen Ableger für uns „Germans“ erhalten.</p> <p>Hier finden unter der Leitung von Gastgeber Joschi Kuphal seit diesem Jahr regelmäßige Talks über Barrierefreiheit statt und die Sammlung wächst ständig. Nicht nur interessant wegen den bereits vergangenen Veranstaltungen, sondern auch wegen dem, was noch kommen wird. Gleich zum Auftakt hat Eric Eggert vom W3C mit einem seiner seltenen Beiträge auf Deutsch überrascht (<a href="https://www.youtube.com/watch?v=L1dyBc5IYok&list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq&index=1" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=L1dyBc5IYok&list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq&index=1</a>).</p> <p>Sehenswert sind aber alle Beiträge, so erfahren wir von Maja Benke wie Legastheniker mit Texten umgehen und was man bei der Erstellung von Webseiten zu beachten hat (<a href="https://www.youtube.com/watch?v=fNYNrWDHBFY" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=fNYNrWDHBFY</a>). Markus Herrmann erklärt, worauf bei der Verwendung von vue zu achten ist (<a href="https://www.youtube.com/watch?v=ML-zverajdg" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=ML-zverajdg</a>) und viele weitere spannende Vorträge sind bereits angekündigt oder in Planung.</p> <p>Technica11y auf deutsch <a href="https://www.youtube.com/watch?v=L1dyBc5IYok&list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=L1dyBc5IYok&list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq</a></p> <p>Marc Haunschild</p> https://forum.selfhtml.org/weblog/2021/dec/10/die-prufverfahren-von-t-systems-und-bik-im-vergleich Matthias Scharwies mscharwies@selfhtml.org 2021-12-10T04:21:14Z 2021-12-10T04:21:14Z Die Prüfverfahren von T-Systems und BIK im Vergleich <p>Im Grunde kann man Testverfahren unterscheiden in</p> <ul> <li>automatische Tests, die lediglich einige wenige Vorgaben an Barrierefreiheit prüfen können</li> <li>Manuelle Tests durch Experten, die alle Vorgaben an die Barrierefreiheit überprüfen und aufgrund von sorgfältiger Ausbildung, Erfahrung und Strategien bei der Qualitätssicherung versuchen, damit den menschlichen Faktor der subjektiven Bewertung auf ein Minimum zu reduzieren</li> <li>Nutzertests, bei denen sogenannte authentische Nutzer ein Produkt nutzen und die Erfahrung bewerten. Als authentische Nutzer werden Menschen mit Behinderungen bezeichnet, die täglich Hilfsmittel verwenden.</li> </ul> <p>Jede Methode hat ihre Vor- und Nachteile. Automatische Tests scheitern an Aufgaben wie „Macht ein Alternativtext Sinn“, machen aber keine Fehler - sie finden aber wirklich jedes Bild ohne Alternativ-Text.</p> <p>Experten sind viel zu selten authentische Nutzer, die entsprechenden manuellen Tests berücksichtigen nur gesetzliche Vorgaben und das reicht nicht immer, um für Menschen mit Behinderungen ein gutes Nutzererlebnis bereit zu stellen. Aber Experten haben eben eine entsprechende Ausbildung und können die Ergebnisse interpretieren und dazu beraten.</p> <p>Authentische Nutzer wiederum geben mitunter sehr subjektive Berichte ab und ein Gehörloser kann schlecht für einen Sehbehinderten sprechen. Es sei denn er ist gehörlos und hat eine Fehlsichtigkeit. Das ist dann aber wieder ein Spezialfall.</p> <p>Man sieht, wie schwierig es ist „richtig“ zu testen und wie der Aufwand von automatischen Tests über manuelle Tests zu Nutzertests steigt - im Idealfall werden alle diese Methoden nacheinander angewandt. In der Regel kann man aber schon froh sein, wenn ein digitales Produkt den gesetzlichen Vorgaben entspricht, wofür ein manueller Test nötig ist. Daher kommt den manuellen Tests eine zentrale Bedeutung zu.</p> <p>In Deutschland gibt es zwei relevante Testverfahren: den BIK-BITV-Test und den Test der T-Systems Multimedia Solutions GmbH.</p> <p>Gisela Kollotzek, Absolventin im Studiengang „Computer Science and Media“, hat die Ergebnisse ihrer Masterthesis über dieses Thema im Juni vorgestellt.</p> <p>Der Vortrag und weitere Materialien einschließlich der Masterthesis selber finden sich hinter dem folgenden Link auf der Website der Hochschule für Medien Stuttgart</p> <p><a href="https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/2021/06/01/webinar-manuelle-pruefverfahren-fuer-webseiten-nach-bitv-2-0/" rel="nofollow noopener noreferrer">https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/2021/06/01/webinar-manuelle-pruefverfahren-fuer-webseiten-nach-bitv-2-0/</a></p> <p>Marc Haunschild</p> <p>PS: Dies ist bereits das zweite Türchen mit einem spannenden Vortrag der Hochschule der Medien - es gibt mehr und wer auch in Zukunft bei der Vorstellung einer Masterthesis live dabei sein will, findet alle Ankündigungen und vergangenen Webinare dort auf der Website unter folgendem Link:</p> <p><a href="https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/category/news-events/" rel="nofollow noopener noreferrer">https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/category/news-events/</a></p> https://forum.selfhtml.org/weblog/2021/dec/07/barrierefreiheitsstarkungsgesetz-european-accessibility-act Matthias Scharwies mscharwies@selfhtml.org 2021-12-07T00:57:51Z 2021-12-07T00:57:51Z Barrierefreiheitsstärkungsgesetz/ European Accessibility Act <p>Seit jeher veranlasst die Europäische Union sogenannte Harmonisierungen. Dabei geht es darum, die unterschiedlichen Gesetze in der Union zu vereinheitlichen. So wird es für einen Spanier leichter eine Dienstleistung in Skandinavien anzubieten oder für einen deutschen Hersteller etwas in Osteuropa zu verkaufen. Natürlich profitieren auch alle Bürger davon. Denn sie können sich darauf verlassen, dass viele aus dem Heimatland bekannte Regeln auch im Rest der EU gelten.</p> <p>Die DSGVO ist ein bekanntes Beispiel dafür. Was die <a href="https://wiki.selfhtml.org/wiki/Barrierefreiheit" rel="nofollow noopener noreferrer">Barrierefreiheit</a> angeht, hat die EU 2016 eine Richtlinie erlassen. Diese trägt die Bezeichnung 2016/2102. Zu der Richtlinie gehört eine Norm, die öffentliche Stellen erfüllen müssen.</p> <p>Die EU hat es dabei nicht belassen, sondern hat weitere Mindestanforderungen gestellt, die die Mitgliedsländer umsetzen müssen. Diesmal sind Teile der Wirtschaft betroffen. Das ist der sogenannte European Accessibility Act. Die Umsetzung in deutsches Recht trägt den schwer lesbaren Namen „Barriere-freiheits-stärkungs-gesetz“.</p> <p>Das Gesetz hat schon viel Kritik bekommen. So müssen Bankautomaten künftig zwar für Menschen mit Behinderungen bedienbar sein. Sie dürfen aber an Orten aufgestellt werden, die zum Beispiel für Menschen mit Gehhilfen oder Rollstühlen nicht erreichbar sind.</p> <p>Wie dem auch sei: sicher ist das ein erster Wurf und besser als vorher, also nichts.</p> <p>Vermutlich wird die EU weiter nachlegen. Menschen mit Behinderungen hoffen darauf. Aber es ist für alle Betroffenen schwer auszuhalten, dass es so langsam voran geht.</p> <p>Das Barrierefreiheitsstärkungsgesetz auf der offiziellen Seite des Bundesministeriums für Arbeit und Soziales (BMAS)</p> <ul> <li><a href="https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html" rel="nofollow noopener noreferrer">https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html</a></li> </ul> <p>Kritische Anmerkungen der Aktion Mensch</p> <ul> <li><a href="https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreiheitsstaerkungsgesetz-nur-kleine-schritte-zur-inklusion" rel="nofollow noopener noreferrer">https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreiheitsstaerkungsgesetz-nur-kleine-schritte-zur-inklusion</a></li> </ul> <p>Marc Haunschild</p> https://forum.selfhtml.org/weblog/2021/dec/06/sag-ichs Matthias Scharwies mscharwies@selfhtml.org 2021-12-06T01:38:28Z 2021-12-06T01:38:28Z Sag ich's? <p>Für viele Arbeitnehmerinnen stellt sich gar nicht in erster Linie die Frage, wie man als Mensch mit Behinderungen oder (chronischen) Erkrankungen eine barrierefreie Arbeitsumgebung beantragt oder sogar beim Arbeitgeber einfordert.</p> <p>Gerade in der freien Wirtschaft befürchten viele Arbeitnehmerinnen berufliche Nachteile, wenn physische oder psychische Einschränkungen im Arbeitsumfeld bekannt werden. Sie leben dann häufig in einem zermürbenden Zwiespalt: Sag ich es - oder sag ich es nicht?</p> <p>Eine Entscheidungshilfe will die gleichlautende Seite der Universität Köln sein. Hier finden Betroffene neben einem ausführlichen Fragebogen zur Einschätzung der persönlichen Situation begleitende redaktionelle Texte, die bei der Entscheidung helfen wollen.</p> <p>Auch interessant für Angehörige und alle, die sich in die Situation, in die Zweifel und Fragen hineinversetzen und sich sensibilisieren lassen wollen.</p> <p><a href="https://sag-ichs.de/start" rel="nofollow noopener noreferrer">sag-ichs.de/start</a></p> <p>Marc Haunschild</p> https://forum.selfhtml.org/weblog/2021/nov/30/blue-beanie-day Matthias Scharwies mscharwies@selfhtml.org 2021-11-30T04:04:29Z 2021-11-30T04:04:29Z Blue-Beanie-Day <p>Heute, am 30.11., ist wieder <a href="https://de.wikipedia.org/wiki/Blue_Beanie_Day" rel="nofollow noopener noreferrer"><strong>Blue Beanie Day</strong></a>; ein Aktionstag, um auf die Wichtigkeit von <a href="https://wiki.selfhtml.org/wiki/Webstandards" rel="nofollow noopener noreferrer"><strong>Webstandards</strong></a>aufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.</p> <p>Webstandards sind dort nicht nur die Festlegungen durch die Spezifikationen, sondern das Bemühen Webseiten durch best practices für alle benutzbar zu machen. SELFHTML bemüht sich diesen Gedanken an Barrierefreiheit ständig im Blick zu halten.</p> <p>Deshalb ist der <a href="https://blog.selfhtml.org/2021/nov/29/adventskalender-2021" rel="noopener noreferrer">diesjährige Adventskalender</a> der Barrierefreiheit gewidmet!</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/weblog/2021/nov/29/adventskalender-2021 Matthias Scharwies mscharwies@selfhtml.org https://forum.selfhtml.org/advent/2021 2021-11-29T17:36:01Z 2021-11-29T17:36:01Z Adventskalender 2021 <p>Der diesjährige Adventskalender ist der Barrierefreiheit gewidmet - ein Thema für alle, das jeden und alle angeht. Warum ist das so?</p> <p>Barrierefreiheit ist für uns alle gut. Das ist die wichtigste Erkenntnis aus 20 Jahren Berufserfahrung. Es geht nicht darum Menschen mit Behinderungen exklusive Features anzubieten, die nur für diese Nutzergruppe sinnvoll sind.</p> <p>Es geht darum, sich von Beginn an zu überlegen, wie man eine Webseite so baut, dass sie von allen Besucherinnen effizient genutzt werden kann.</p> <p><strong>Barrierefreiheit ist also keine Summe von Funktionen, sondern ein Konzept.</strong></p> <p>Es macht genauso viel Sinn, eine Website so zu entwickeln, dass sie auf <strong>allen Geräten</strong> wie Smartphones, Computern und Smart-TVs funktioniert, wie es Sinn macht, eine Website für <strong>alle Menschen</strong> zu erstellen.</p> <p>Hierbei geht es darum, dass eine Website genutzt werden kann, wenn man sieht oder nicht sieht, wenn man hört oder nicht hört, wenn man seine Arme benutzen kann oder nicht. Und alle anderen Menschen haben Wahlmöglichkeiten. Im ÖPNV können untertitelte Videos ohne Ton geschaut werden. In grellem Sonnenschein, wo das Display nicht mehr viel anzeigt, können Filme gehört werden - in beiden Fällen ohne etwas zu verpassen.</p> <p>Barrierefreie Inhalte können nicht nur unabhängig vom verwendeten Ausgabegerät (Bildschirm oder Kopfhörer) genutzt werden. Auch bei der Eingabe hat man die freie Wahl: Spracheingabe, Maus, Tastatur oder Touch - alles geht, so wie man gerade mag und was gerade bequem ist.</p> <p>Jeder Mensch der Welt trifft eine große Taste schneller und sicherer als eine kleine Taste.</p> <p>Barrierefreie Webseiten sind bessere Webseiten. Sie kommen. Freuen wir uns drauf. Und machen mit!</p> <p>Hier geht's zum diesjährigen <a href="https://forum.selfhtml.org/advent/2021" rel="noopener noreferrer">Adventskalender</a>!</p> <p>Eine frohe Weihnachtszeit!</p> <p>Marc Haunschild</p> <p>Übrigens: Unser Beitragsbild oben ist eine abgewandelte Version des offiziellen Logos der Unesco für Barrierefreiheit. Sie kennzeichnet unsere Beiträge zum Thema.</p> https://forum.selfhtml.org/meta/2019/oct/08/addblocker-demnachst-verboten Henry 2019-10-08T17:42:45Z 2019-10-08T17:42:45Z AddBlocker demnächst verboten? <p>Hallo,</p> <p>ich muss sagen, sehe das mit gemischten Gefühlen. Addblocker finde ich nicht nur sinnvoll, sondern auf älteren Rechnern als essentiell notwendig an. So kann ich viele Seiten, besonders die "großen" Medienanbieter, gar nicht mehr ohne schauen. Die Scripte und der Medienballast dort zwingen meine älteren Rechner zum Schneckentempo. Die Medienfirmen ärgern sich zwar,laufen aber weiter ind eren eigene "YAHOO"-Falle, nämlich Quantität vor Qualität oder anders gesagt je mehr Tracking und Werbung umso besser.</p> <p>Jetzt ist dieser hier benannte Adblock Plus aber schon ziemlich Mafialike, "<em>due wolle werbung zeigen, wir nur vielleichte zulasse wenne 30% vonne Kuchen, capisce?</em>"</p> <p>Das Problem, was ich hier sehe ist der Revisionsansatz, kommen die nämlich damit durch, seh ich auch schwarz für "seriöse( weiß man nie so genau)" Anbieter, wie mein geliebtes uBlock Origin.</p> <p>Wie seht ihr das?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/oct/17/discord-kommunikationstest TS ts-self@online.de https://bitworks.de 2019-10-17T10:13:57Z 2019-10-17T10:13:57Z Discord Kommunikationstest <p>Hello,</p> <p>ich mach ja noch eine Weile "Klinik- und Rehahopping", bis es endlich 'was nützt. An der MGV würde ich aber gerne teilnehmen. Bis Dienstag bin ich mal wieder zuhause und würde in dieser Zeit gerne die benötigte Software auf meinen alten LinuxLappi draufspielen <strong>und ausprobieren</strong>.</p> <p>Wann könnten wir denn einen Kommunikationstest durchführen?</p> <p>Glück Auf<br> Tom vom Berg</p> <div class="signature">-- <br> Es gibt nichts Gutes, außer man tut es!<br> Das Leben selbst ist der Sinn. </div> https://forum.selfhtml.org/meta/2019/aug/23/mathematik-zum-wochenende Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-08-23T14:42:33Z 2019-08-23T14:42:33Z Mathematik zum Wochenende <p>Hallo alle,</p> <p><a href="/images/23dadb02-c5b4-11e9-9c45-b42e9947ef30.jpeg" rel="noopener noreferrer"><img src="/images/23dadb02-c5b4-11e9-9c45-b42e9947ef30.jpeg?size=medium" alt="Parkplatz" loading="lazy"></a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/meta/2019/oct/15/sprache-zum-dienstag Henry 2019-10-15T04:37:53Z 2019-10-15T04:37:53Z Sprache zum Dienstag <p>Hallo,</p> <p>ich las gerade etwas, was mich auf einen Gedanken brachte. Warum gibt es hier immer nur Matherätsel, wie wäre es denn mal mit einem Orthographie/Sprachrätsel zum zb. Dienstag?</p> <p><strong>Der 85-jährige Papst geht in Pension.</strong></p> <p>Was ist daran falsch, wie wäre es richtig?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/sep/30/kunstliche-gesichter Henry 2019-09-30T15:55:49Z 2019-09-30T15:55:49Z Künstliche Gesichter <p>Hallo,</p> <p>ich las gerade <a href="https://www.spiegel.de/netzwelt/web/werbegesichter-aus-dem-computer-ist-hier-noch-irgendjemand-echt-a-1289324.html" rel="nofollow noopener noreferrer">diesen Artikel</a> und kam dadurch auf <a href="https://generated.photos/" rel="nofollow noopener noreferrer">dieses Projekt</a>. Bin aber nicht sicher ob ich den Artikel richtig verstehe. Sind alle diese runterladbaren Bilddateien künstlich oder teilkünstlich oder mal so/mal so? Also wenn ich das richtig verstanden habe, dann schon ALLE. Wenn das so ist, würde mich ein direkter Vergleich mit dem Quellbild interessieren, finde aber sowas nicht oder habe ich das übersehen?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/oct/10/wo-bin-ich Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-10-10T10:08:14Z 2019-10-10T10:08:14Z Wo bin ich? <p>Hallo alle,</p> <p><a href="/images/d47fd38e-eb45-11e9-91a9-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/d47fd38e-eb45-11e9-91a9-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/meta/2019/oct/04/selfhtml-wiki-file-upload-drag-drop-funktioniert-nicht Henry 2019-10-04T01:10:04Z 2019-10-04T01:10:04Z selfhtml Wiki file upload drag drop funktioniert nicht <p>Hallo,</p> <p>bei mir tut sich in <a href="https://wiki.selfhtml.org/wiki/JavaScript/File_Upload#Auswahl_mit_Drag_und_Drop" rel="nofollow noopener noreferrer">dem Beispiel</a> nichts, weder im Frickl noch direkt.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/sep/26/darstellung-der-threads-unterschiedlich Henry 2019-09-26T20:20:47Z 2019-09-26T20:20:47Z Darstellung der Threads unterschiedlich <p>Hallo,</p> <p>gerade habe ich festgestellt, dass manche Verweise in Suchmaschinen nicht unbedingt den Thread treffen, so wie ich die kenne.</p> <p><a href="https://forum.selfhtml.org/self/2018/jul/20/pro-strich-contra-pflichtfelder-im-kontaktformular/1726906?rm=thread#tree-m1726906" rel="noopener noreferrer">Bsispiel</a>. Hier wird eine andere Ansicht gezeigt, zwar sieht man den Baum aber keine Posts, oben steht Beitrag lesen, aber nicht anklickbar. Im Prinzip egal, weil beim Klick auf beliebige Postüberschrift darin, erscheint wieder gewohnte Ansicht, nur eben etwas verwirrend. Was ist mit dieser speziellen Ansicht beabsichtigt?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/sep/17/was-haltet-ihr-erfahrungen-vom-signal-messenger Henry 2019-09-16T23:18:10Z 2019-09-16T23:18:10Z Was haltet ihr (Erfahrungen) vom Signal Messenger? <p>Hallo,</p> <p>heute landete ich zufällig, nach Lesen einiger Artikel, bei diesem Messenger. Nach einiger Recherche und dem sehr positiven Feedback zu dieser Software, auch von bekannten Unterstützern, die sich mit der Materie auskennen, dachte ich wow, warum ist das nicht längst so präsent im Netz, dass es locker Whatsapp ablöst. Geld genug für Werbung haben die schließlich. Dachte so bei mir, da müsste mal dringend eine Medienkampagne her. Aber natürlich wollte ich es erst mal ausprobieren.</p> <p>Als ich dann aber die erforderlichen Berechtigungen sah, verging mir die Lust, weil ich höhere Erwartungen hatte. Insbesondere hatte ich gehofft, das wäre jetzt vielleicht mal ein Messenger, der sich nicht die vorhanden Kontakte einverleibt, sondern zb. eine eigene seperate Kontaktverwaltung mitbringt. Noch schlimmer, warum will der die Standortfreigabe?</p> <p>Selbst wenn keine Daten als Klartext beim Anbieter landen, schreckt mich die Anforderung bei einem Unternehmen, dem der Datenschutz an oberster Stelle steht, schon ab. Sehe ich das zu kritisch? Was sind eure Erfahrungen damit?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/sep/16/bug-in-der-suche derdicki 2019-09-16T00:18:01Z 2019-09-16T00:18:01Z Bug in der Suche <p>Hallihallo!</p> <p>Ich habe soeben die Suchfunktion bemüht, und bin dabei über einen Bug gestolpert. Gesucht habe ich nach "upload" im SelfHTML Forum, Start- und Enddatum habe ich auf Standard gelassen.</p> <p>Zum Fehler: Es gibt aktuell 331 Treffer, verteilt auf viele Seiten. Leider ist die Pagination ab Seite 2 "kaputt". Ich habe den Link von Seite 2 zu Seite 3 mal als problematische Seite eingetragen.</p> <p>"Kaputt" bedeutet hier, dass man von Seite 2 aus immer wieder auf Seite 2 landet, egal welche Seitenzahl man anwählt. Wie man an der "problematischen Seite" sehen kann, ist zwar ganz am Anfang der Parameter "p=3" vorhanden, aber direkt nach dem "utf8=[haken]" wird er wieder durch "p=2" überschrieben.</p> <p>Ich hoffe, die Angaben reichen, um den Fehler lokalisieren zu können.</p> <p>Beste Grüsse, Tobias Hahner</p> https://forum.selfhtml.org/meta/2019/sep/14/backlinks TS ts-self@online.de https://bitworks.de 2019-09-14T07:04:38Z 2019-09-14T07:04:38Z Backlinks? <p>Hello,</p> <p>hatten wir im Forum nicht schon mal Backlinks unter den Beiträgen?<br> Sind die wegrationalisiert worden?</p> <p>Glück Auf<br> Tom vom Berg</p> <div class="signature">-- <br> Es gibt nichts Gutes, außer man tut es!<br> Das Leben selbst ist der Sinn. </div> https://forum.selfhtml.org/meta/2019/sep/16/antworten-nciht-mehr-moglich marctrix self@mhis.de https://www.mhis.de 2019-09-16T05:04:22Z 2019-09-16T05:04:22Z Antworten nciht mehr möglich <p>Hej <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a>,</p> <p>ich habe den "Antworten"-Button unter jedem Post, kann ihn aber nicht mehr benutzen. - Bediene ich den verkehrt? Muss ich vielleicht mit der Maus aus Richtung Jerusalem mit einem Schwenk nach Süd-Ost auf den Button fahren und ihn dann dreimal klicken? Oder ist das ein Spam-Schutz: Darf ich nur noch einen Post pro 15 Minuten beantworten? </p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> https://forum.selfhtml.org/meta/2019/sep/14/lesetipp-uberwachung-durch-sim-karte Henry 2019-09-13T23:03:47Z 2019-09-13T23:03:47Z Lesetipp: Überwachung durch SIM-Karte <p>Hallo,</p> <p><a href="https://www.spiegel.de/netzwelt/gadgets/smartphone-spionage-neuartiger-angriff-auf-alte-sim-karten-technik-a-1286697.html" rel="nofollow noopener noreferrer">Sehr interessant</a>.</p> <p>Besonders der Absatz:</p> <p><em>Aus ihren Beobachtungen schließen die Forscher, dass es sich um keine Massenüberwachung handle. Die Angriffsmethode sei aber so entworfen, dass "eine große Anzahl an Personen aus verschiedenen Gründen überwacht werden kann". Man sei "ziemlich sicher, dass diese Schadsoftware von einem bestimmten Privatunternehmen entwickelt wurde, das mit Regierungen zusammenarbeitet, um Personen zu überwachen".</em></p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/sep/16/aktuelles-interview-mit-edward-snowden marctrix self@mhis.de https://www.mhis.de 2019-09-16T07:05:41Z 2019-09-16T07:05:41Z Aktuelles Interview mit Edward Snowden <p>Hej alle,</p> <p>aktuell wie eh und je und sicher einige, erstaunlich offene Antworten, auf manche Frage. Z.B. warum zur Hölle ausgerechnet Russland? <a href="https://www.zdf.de/nachrichten/heute/whistleblower-edward-snowden-im-zdf-interview-100.html" rel="nofollow noopener noreferrer"> Im Gespräch mit Edward Snowden (Interview des ZDF vom 15.9.2019)</a></p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> https://forum.selfhtml.org/meta/2019/sep/08/digitale-gesundheit-und-kunstliche-intelligenz Athina_S 2019-09-08T16:30:27Z 2019-09-08T16:30:27Z Digitale Gesundheit und Künstliche Intelligenz! <p>Hallo liebe Forenmitglieder,</p> <p>mein Name ist Athina und bin Psychologiestudentin im Masterstudiengang. Ich mache im Rahmen meiner Abschlussarbeit eine Studie zum Thema „Vertrauen in Gesundheitsanwendungen mit künstlicher Intelligenz“! Das hat zwar nichts direkt mit der Thematik Ihres Forums zu tun, jedoch bin ich auf der Suche nach verschiedenen Teilnehmer mit unterschiedlichen Interessen um eine repräsentative Studie zu gewährleisten.</p> <p>Ich würde mich sehr freuen, wenn Sie (18+) sich kurz die Zeit nehmen würden, mich in diesem Forschungsprojekt zu unterstützen.</p> <p>Über folgenden Link gelangen Sie zur Umfrage:</p> <p><a href="https://www.unipark.de/uc/StudentInnen_2015_2016/f2e8/" rel="nofollow noopener noreferrer">https://www.unipark.de/uc/StudentInnen_2015_2016/f2e8/</a></p> <p>Herzlichen Dank im Voraus!</p> <p>Univ.-Prof. Dr. phil. habil. Christiane Eichenberg, Sigmund Freud PrivatUniversität Wien</p> <p>Dr. Nikos Green, Berlin</p> <p>Dr. Markus Langer, Universität des Saarlandes</p> <p>Athina Schroiff Bsc., Sigmund Freud PrivatUniversität Wien Kontakt: athina.schroiff@gmx.de</p> https://forum.selfhtml.org/meta/2019/sep/09/meshstruktur-im-www-fordern-was-surfen-eigentlich-sein-sollte TS ts-self@online.de https://bitworks.de 2019-09-09T05:11:42Z 2019-09-09T05:11:42Z Meshstruktur im WWW fördern - was "surfen" eigentlich sein sollte <p>Hello,</p> <p>es geht mir schon länger durch den Kopf, dass die "Geben heißt Zurückbekommen"-Mentalität, die das HTTP-Internet am Anfang schnell wachsen ließ, so ziemlich den Bequemlichkeiten von erst Katalogen, dann Suchmaschinen und heute (a)sozialen Diensten zum Opfer gefallen ist.</p> <p>Wie könnte man aber jetzt dafür sorgen, dass eine Meshstruktur wieder entsteht, also Backlinks (halb)automatisch registriert werden könnten?</p> <p><strong>Bsp:</strong><br> Ich verlinke auf einer meiner Seiten mitten im Thema eine fremde Seite und nun möchte ich bei dieser z. B. in den Fußnoten einen Rücklink bekommen.</p> <p>Wie könnte man hierfür ein leicht implementierbares System aufbauen, möglichst ohne JavaScript, zuf Not aber eben auch mit.</p> <p>Der Backlinker sollte immer die Kontrolle behalten über seine Backlinks.</p> <p>Glück Auf<br> Tom vom Berg</p> <div class="signature">-- <br> Es gibt nichts Gutes, außer man tut es!<br> Das Leben selbst ist der Sinn. </div> https://forum.selfhtml.org/meta/2019/sep/09/beitrage-drucken-lasst-sich-das-einstellen Henry 2019-09-09T09:03:21Z 2019-09-09T09:03:21Z Beiträge drucken, lässt sich das einstellen? <p>Hallo,</p> <p>beim Drucken einzelner Threads/Posts ensteht keine schöne Formatierung und ist nur unvollständig. Ist das ein Einstellungssache oder liegt ein Bug vor?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/sep/07/selfhtml-wird-25-das-muss-gefeiert-werden Matthias Scharwies mscharwies@selfhtml.org 2019-09-07T04:23:00Z 2019-09-07T04:23:00Z SELFHTML wird 25 - das muss gefeiert werden! <h3>Save the Date</h3><p><strong>Am 04.06.2020 wird SELFHTML 25 Jahre alt!</strong></p> <p>Aus diesem Anlass wollen wir vom 05.-07. Juni 2020 ein SELF-Treffen in Mannheim veranstalten.</p> <ul> <li>Freitag: <strong>geselliges Beisammensein</strong></li> <li>Samstag: <strong>Workshop</strong> (Themen werden noch bekannt gegeben)</li> <li>Sonntag: <ul> <li>10:00 Mitgliederversammlung</li> <li>12:00 Quadratisch, praktisch, gut - <strong>Stadtführung</strong> durch eine barocke Planstadt</li> </ul> </li> </ul> <p>Bis jetzt ist noch nicht viel geplant, aber ich will schon mal den Termin bekannt geben, dass ihr ihn blocken könnt. Im <a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">Anmeldeformular</a> gibt es weitere Informationen.</p> <p><strong>Warum Mannheim?</strong></p> <p>Wir wünschen uns, dass der Gründer <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Wie_alles_begann_%E2%80%93_Stefan_M%C3%BCnz_erz%C3%A4hlt" rel="nofollow noopener noreferrer">Stefan Münz</a> teilnimmt, und da er jetzt in der Pfalz wohnt, dies für ihn ein Katzensprung ist.</p> <p><strong>Warum wieder <a href="https://www.jugendherberge.de/jugendherbergen/mannheim-international-17//portraet/" rel="nofollow noopener noreferrer"><strong>Jugendherberge</strong></a>?</strong></p> <p>Ja, wir kommen langsam in die Jahre und die JHs sind nicht mehr so billig wie in unserer Jugend. Trotzdem ist ein Tagungsraum in der JH viel billiger als im Hotel, und wir haben eine Auswahl von Mehrbettzimmern und Doppelzimmern zur Verfügung. Durch die Konzentration auf eine innenstadtnahe Örtlichkeit können wir möglichst viel Zeit gemeinsam verbringen.</p> <p>Ihr könnt natürlich auch woanders übernachten und dann zu uns stoßen.</p> <p><strong>Wieso Workshop?</strong></p> <p>Höhepunkt des 2018er Treffen war Marctrix‘ <a href="https://blog.selfhtml.org/2018/09/17/workshop-barrierefreiheit/" rel="noopener noreferrer">Workshop Barrierefreiheit</a> über vorgelesene Webseiten. Der Samstag soll keine MV (ist am Sonntag), sondern interessante und unterhaltsame Aktionen bringen, sodass wir auch Ehemalige und Interessierte anlocken können.</p> <p>Deshalb wollen wir auch relativ früh - 9 Monate vorher – mit dem Planen und Werben beginnen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div> https://forum.selfhtml.org/meta/2019/sep/04/einstellung-gelesene-beitrage-zusammenklappen-im-nested-modus Christian Kruse https://wwwtech.de/about 2019-09-04T13:18:52Z 2019-09-04T13:18:52Z Einstellung „gelesene Beiträge zusammenklappen“ im Nested-Modus <p>Hallo alle,</p> <p>duch einen Bug wurde für die Einstellung „gelesene Beiträge zusammenklappen“ im Nested-Modus ein falscher Wert gespeichert, so dass nur die JS-Version auf Client-Seite funktioniert hat. Ich habe den Bug behoben, aber leider muss das nun jeder, der diese Einstellung verwenden möchte, manuell wieder einstellen.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/meta/2019/aug/23/lesetipp-uberwachungsstaat Henry 2019-08-23T12:31:29Z 2019-08-23T12:31:29Z Lesetipp: Überwachungsstaat <p>Hallo,</p> <p>eigentlich wundern mich <a href="https://netzpolitik.org/2019/mecklenburg-vorpommern-expertinnen-kritisieren-geplantes-polizeigesetz/" rel="noopener noreferrer">solche Meldungen </a>gar nicht mehr. Was mich aber ewig wundern lässt, dass Regierungen die solche und mit Sicherheit noch gewagtere Ambitionen haben, immer wieder gewählt werden. Ich würde ja gerne auswandern, aber leider ist es bei den Ländern, die mich interessieren auch nicht anders.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/aug/27/dhl-seit-4-stunden-offline Henry 2019-08-27T19:09:27Z 2019-08-27T19:09:27Z DHL seit 4 Stunden offline <p>Hallo,</p> <p>DHL seit 4 Stunden offline, wollte es nur mal erwähnen, falls sich jemand wundert und denkt es liegt an seinem System. Schon krass, wie sich das auswirkt, wenn man drauf angewiesen ist.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/aug/27/update-fur-apples-osse Auge 2019-08-27T13:23:27Z 2019-08-27T13:23:27Z Update für Apples OSse <p>Hallo</p> <p><a href="https://heise.de/-4505955" rel="nofollow noopener noreferrer">Laut Heise hat Apple geschlampt</a> und einen mit iOS 12.3 behobenen Fehler mit iOS 12.4 wieder eingeführt. Es steht ein Update auf iOS 12.4.1 und entsprechende Versionen für die anderen betroffenen OSse bereit.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/meta/2019/aug/27/nestedansicht-markiere-beitrage-als-gelesen-wenn-sie-in-den-viewport-scrollen Christian Kruse https://wwwtech.de/about 2019-08-27T06:07:47Z 2019-08-27T06:07:47Z Nested-Ansicht: markiere Beiträge als gelesen, wenn sie in den Viewport scrollen <p>Hallo alle,</p> <p>ich habe ein neues Feature implementiert: es ist jetzt möglich, in der Benutzer-Konfiguration einzustellen, dass neue Beiträge in der Nested-Ansicht als gelesen markiert werden sollen, wenn sie in den Viewport scrollen. Dieses Feature benötigt JavaScript und deaktiviert die herkömmliche Gelesen-Markierung bei Abruf des Postings.</p> <p>Ich nutze dafür die <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="nofollow noopener noreferrer">Intersection Observer API</a>, die in <a href="https://caniuse.com/#feat=intersectionobserver" rel="noopener noreferrer">allen modernen Browsern</a> implementiert ist. Wenn der Posting-Content (die gelbe/beige Box) zu 40% in den Viewport gescrollt sind, wird dann das Posting als gelesen markiert.</p> <p>Postings, die bei Laden des Threads bereits dieses Kriterium erfüllen, werden dann auch direkt als gelesen markiert.</p> <p><strong>Dieses Feature ist noch experimentell.</strong> Wenn es also Probleme oder Vorschläge gibt, gerne hier Rückmeldung geben.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/meta/2019/aug/21/active-nicht-gesetzt-im-ursprungsposting MudGuard http://www.andreas-waechter.de/ 2019-08-21T08:16:49Z 2019-08-21T08:16:49Z active nicht gesetzt im Ursprungsposting <p>Hi,</p> <p>im Postingbaum unterhalb einer Nachricht ist bei dem zum aktuellen Eintrag gehörigen Zeile im Baum die Klasse active im header-Element gesetzt.</p> <p>Außer: das aktuelle Posting ist die Wurzel des Baums - dann fehlt die Klasse active beim header.</p> <p>Ist das Absicht?</p> <p>Meine im User-CSS eingestellte Markierung des aktuellen Postings funktioniert daher leider nicht, wenn ich gerade das Wurzel-Posting geöffnet habe.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/meta/2019/aug/23/icons-laden-nicht-mehr Felix Riesterer https://felix-riesterer.de 2019-08-23T06:45:21Z 2019-08-23T06:45:21Z Icons laden nicht mehr <p>Liebe Mitlesende,</p> <p>vielleicht ist das bei euch ja anders, aber bei mir laden auf der <code>users</code>-Seite diverse Icons nicht mehr:</p> <ul> <li>https://forum.selfhtml.org/images/cforum-voting-area-icons.svg#info-standard</li> <li>https://forum.selfhtml.org/images/bronze.png</li> <li>https://forum.selfhtml.org/images/silver.png</li> <li>https://forum.selfhtml.org/images/gold.png</li> </ul> <p>In der obigen Liste sollten jetzt eigentlich keine Texte sichtbar sein, sondern Bilder.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> <p><strong>Edit:</strong> ich habe das Bild-Markdown entfernt /ck</p> https://forum.selfhtml.org/meta/2019/aug/22/frame-und-frameset-mag-deprecated-sein-ist-aber-unverandert-bestandteil-alterer-htmlspezifikationen Felix Riesterer https://felix-riesterer.de 2019-08-22T05:45:29Z 2019-08-22T05:45:29Z <frame> und <frameset> mag deprecated sein, ist aber unverändert Bestandteil älterer HTML-Spezifikationen <p>Liebe Mitlesende,</p> <p>gerade wollte ich in Sachen "wie ging das damals mit den Framesets?" im Wiki nachschlagen, finde aber nur noch Weiterleitungen auf eine Referenz-Seite, die zu einer MDN-Seite verweist, auf der nur noch eine Warnung steht, von wegen "deprecated". Das ist bezüglich HTML5 alles schön und gut. Aber wenn jemand aus <code>$Gründen</code> HTML4.1 verwenden möchte, wo steht das dann im Wiki?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/meta/2019/aug/04/mathematik-zum-wochenende Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-08-04T11:20:58Z 2019-08-04T11:20:58Z Mathematik zum Wochenende <p>Welcher Anteil des Halbkreises ist jeweils schraffiert? (Als Dezimalzahl angeben.)</p> <p>Was kommt als nächstes?</p> <p><a href="/images/e1b6b142-b6a9-11e9-8fcb-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/e1b6b142-b6a9-11e9-8fcb-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/meta/2019/aug/13/zu-diesem-forum Henry 2019-08-13T21:27:45Z 2019-08-13T21:27:45Z Zu diesem Forum <p>Hallo,</p> <p>dass in den letzten Jahren die Anzahl der Fragen hier stetig abgenommen hat, zumindest habe ich den Eindruck, ist nichts verglichen mit der gegenwärtigen Flaute. Deshalb habe ich mich heute mal im Netz umgeschaut wie es bei anderen Foren aussieht, Resultat ähnlich.</p> <p>Liegt das am Sommerloch oder ist im Moment jede erdenkliche Frage schon auf gefühlt hunderten Seiten bereits beantwortet worden?</p> <p>Oder, ist wegen den ganzen Baukastenmodellen der Bedarf einfach nicht mehr da?</p> <p>Ich schreibe das hier auch nur, weil im Moment tatsächlich nichts hier zu beantworten wäre, kommt doch mal was rein, weiß ich schon, längere Antwort besser nicht formulieren, weil garantiert schon einige simultan am beantworten sind.</p> <p>Auch überlege ich wie viel Arbeit CK und auch andere hier reinstecken, ob das dann schon leicht an Masochismus grenzt, oder gibt es, was ich leider nicht rausgefunden habe, noch andere die diese Software hier nutzen?</p> <p>Übrigens beim Schreiben hier fällt mir immer wieder etwas auf, frage ich dann aber gleich im neuen Thread, weil normale Thematik.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/aug/12/latex-zeitweise-deaktiviert Christian Kruse https://wwwtech.de/about 2019-08-12T11:44:00Z 2019-08-12T11:44:00Z LaTeX zeitweise deaktiviert <p>Moin,</p> <p>aufgrund einer durch das KaTeX-Plugin verursachten XSS-Lücke habe ich die LaTeX-Unterstützung erstmal deaktiviert. Ich habe gerade keine Zeit, eine funktionierende Alternative einzubauen; ich schaue heute Abend mal, dass ich da was mit MathJax hinbekomme; es wird dann allerdings wohl auf ein rein Client-seitiges rendern von LaTeX hinauslaufen.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/meta/2019/aug/07/datenschutz-freie-meinungsausserung-und-ich-habe-doch-nichts-zu-verbergen Lisa 2019-08-06T22:46:20Z 2019-08-06T22:46:20Z Datenschutz, freie Meinungsäusserung und "Ich habe doch nichts zu verbergen" <p>Hallo,</p> <p>ich las gerade <a href="https://www.n-tv.de/politik/Erneut-Deutscher-in-Tuerkei-festgenommen-article21191167.html" rel="nofollow noopener noreferrer">diesen Artikel</a> und dachte so bei mir, wann begreifen die Menschen eigentlich wie wichtig eine relative Anonymität ist. Und schon gar nicht diese exhibitionistische Lebensentblößung auf Facebook&Co.</p> <p>Sehr oft, viel zu oft, höre ich immer wieder "Ich habe ja nichts zu verbergen". Klingt zwar wie eine Standardredewendung, aber die meinen das ernst. Jeder hat was zu verbergen, sei es bei einer zu kreativen oder nicht vollständigen Steuererklärung, dem eventuellen Versicherungsbetrug bei Gebäude, Hausrat oder Privathaftpflicht, ja sogar Diebstahl (höre oft von überraschend vielen Handwerkern in großen Firmen, die noch oft von alten Zeiten prahlen, was sie da so alles mitgehen haben lassen), Schwarzarbeit, die Liste wäre endlos. Dazu kommen strafrechtlich unproblematische Sachen wie Lügen, Fremdgehen, etc... Selbst von vielen dieser Leute höre ich den Satz.</p> <p>So, aber selbst wenn jemand noch nie etwas Unrechtes gemacht hat, so kann er doch früher oder später sehr wohl in diese Lage kommen und da er eh dann schon gläsern ist... Hier im aktuellen Fall geht es schlicht um eine Meinungsäußerung (wenn es denn stimmt) die zum Verhängnis wird. Ein andere Fall, der mir bekannt ist, war es ebenso Facebook. Ein Mädchen, dass die Heimreise aus den USA antreten musste, weil sie auf FB andere Reisegründe als beim Einreisevisum eingetragen hatte.</p> <p>Wo soll das noch hinführen liebe Leute? Solange Ihr (damit meine ich die, die diesen Satz gebrauchen) eure Denkweise nicht ändert und gar kein Interesse habt eure Privatsphäre und privaten Infos mit aller Macht schützen und verteidigen zu wollen, wird es niemals besser, nur schlimmer. Denn glaubt mal nicht, dass die Regierungen nur Facebook auswerten und je mehr die Menschen sich an diesen Missbrauch gewöhnen, umso hemmungsloser nutzen die Regierungen (Nicht nur die Türkei, alle) dies aus. Wacht auf.</p> <p>lg.</p> https://forum.selfhtml.org/meta/2019/aug/15/lesetipp-wenn-touchscreens-toten Matthias Scharwies mscharwies@selfhtml.org 2019-08-15T05:35:53Z 2019-08-15T05:35:53Z Lesetipp: "Wenn Touchscreens töten!" <p>Servus!</p> <p>Grad in der Süddeutschen gefunden: <a href="https://www.sueddeutsche.de/digital/touchscreens-us-navy-technologie-forschritt-1.4561288" rel="nofollow noopener noreferrer">Wenn Touchscreens töten </a></p> <blockquote> <p>Am 21. August 2017 stieß der US-Zerstörer mit einem Tanker zusammen. Schuld war offenbar auch ein Touchscreen.</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Heute mal keine Signatur </div> https://forum.selfhtml.org/meta/2019/aug/15/browserhinweis-von-drittanbieter-hier Henry 2019-08-15T13:59:32Z 2019-08-15T13:59:32Z Browserhinweis von Drittanbieter hier? <p>Hallo,</p> <p>bin gerade etwas verwundert. Seit langem mal wieder hier mit dem IE. Prompt bekomme ich eine Meldung, Browser veraltet:</p> <p><a href="/images/1ac777f2-bf63-11e9-814f-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/1ac777f2-bf63-11e9-814f-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>An sich ja keine schlechte Sache, nur von einem Drittanbieter und dann noch ein Link dahin? Bedeutet ja auch wahrscheinlich, wenn ich den Quellcode richtig deute, dass meine Konfiguration dorthin übermittelt wurde.</p> <p>OK, ist aber euere Entscheidung, doch zumindest wollte ich mal wissen, was das denn für ein Verein dort ist. Stellt sich erst mal raus, dass es ein Projekt eines sonst komemrziellen Anbieters ist. Aber ich finde noch was raus, was entweder durch Inkompetenz oder durch Absicht so gemacht wird, nämlich eine Irreführung.</p> <p><a href="/images/390e1ee0-bf64-11e9-b8bc-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/390e1ee0-bf64-11e9-b8bc-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Klicke ich hier auf "Benachrichtigung testen" erscheint das hier: <a href="/images/78eedcd4-bf64-11e9-b626-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/78eedcd4-bf64-11e9-b626-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Mein Browser ist also veraltet? Nein ist er nicht, soll mich aber wohl verleiten um auf Browser aktualisieren zu klicken und so weiter...</p> <p>Sehe ich das zu engstirnig?</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/aug/14/apple-locked-me-out-of-its-walled-garden-it-was-a-nightmare Christian Kruse https://wwwtech.de/about 2019-08-14T10:01:38Z 2019-08-14T10:01:38Z „Apple locked me out of its walled garden. It was a nightmare“ <p>Hallo alle,</p> <p>weil es doch den ein oder anderen Apple-User hier gibt:</p> <p><a href="https://qz.com/1683460/what-happens-to-your-itunes-account-when-apple-says-youve-committed-fraud/" rel="nofollow noopener noreferrer">Apple locked me out of its walled garden. It was a nightmare</a></p> <blockquote> <p>All in all, I was locked out of my account for roughly two months. Had I not taken advantage of my internal Apple contacts, I may not have gotten my account back. I spent a large part of those two months in a kind of grief, mourning not only the loss of a collection of media built up over a decade and a half, but also all the products I owned that no longer functioned as they were supposed to.</p> </blockquote> <p>Yay. </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/meta/2019/aug/14/gerade-hat-das-syntaxhighlighting-fur-php-in-der-vorschau-nicht-geklappt Felix Riesterer https://felix-riesterer.de 2019-08-14T10:38:07Z 2019-08-14T10:38:07Z Gerade hat das Syntaxhighlighting für PHP in der Vorschau nicht geklappt. <p>Liebe Mitlesende, lieber <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a>,</p> <p>anscheinend will in der Vorschaubox unter meinem Eingabeformular das Syntaxhighlighting für PHP nicht. CSS und JavaScript macht es tadellos. Man kann es sehen, wenn man meinen Beitrag beantworten will und mein Posting in Gänze als Zitat vorlädt und dann in die Vorschaubox schaut.</p> <pre><code class="block language-css"><span class="token selector">#fff</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span> </code></pre> <pre><code class="block language-php"><span class="token variable">$_POST</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'a'</span><span class="token punctuation">]</span> </code></pre> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/meta/2019/aug/12/sprachwissenschaft-was-ist-eine-transperson-und-so-entstehen-neue-worter Henry 2019-08-12T18:26:34Z 2019-08-12T18:26:34Z Sprachwissenschaft: Was ist eine Transperson? Und so entstehen neue Wörter <p>Hallo,</p> <p>kennt ihr das, in eurem Bekanntenkreis gibt es mal wieder einen, der ein neues Wort aufgeschnappt hat und sich meint damit wichtig zu fühlen, wenn er es oft genug gebraucht? Kennt ihr sicher, gibt nämlich immer solche irgendwo.</p> <p>Bei mir entsteht dann eher das Gegenteil, ich ärgere mich darüber, dass viele diesem Knochen hinterherlaufen wie ein Hündchen seinem Stock und habe automatisch eine Ablehnung dagegen. Sogar bei berechtigten Korrekturen, die uns anders im Gebrauch waren. So war z.B. lange Zeit der umgangssprachliche, wie auch oft literarische Artikel für Zölibat ein "das". Kaum betonen einige Personen in Talkshows ein "der Zölibat", betonen andere es umso mehr und machen es sich zur Lebensaufgabe andere damit zu belehren "ich weiß es aber besser es heißt...". Ähnlich Accessoire, früher oft wohklingender (in meinen Ohren, wenn auch falsch), assesuoar, nun extra betont aksessuoar, wobei das in diesem Fall natürlich noch nachvollziehbar und völlig OK ist. Ich frage mich halt nur immer, wie sich Kunstbegriffe durchsetzen und wer so was initiiert. Doch diesmal werde ich Zeuge bei so einem Prozess:</p> <p><a href="/images/9480f286-bd2d-11e9-b8f8-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/9480f286-bd2d-11e9-b8f8-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> <p>Wie man unschwer erkennt, schreibt hier wieder einer vom anderen ab, bzw. nutzen alle die gleiche Quelle. Nun war ich neugierig und habe versucht rauszufinden, woher dieses Wort kommt, Fehlanzeige. Gibt zwar den Begriff Transfrau/Mann/gender, als Person nahezu nicht. Wobei das bei dem Artikel auch völlig unerwartet und zusammenhanglos, aber mehrfach genutzt wird. Und schon habe ich wieder diese Blockkade, selbst wenn das irgendwann sogar mal im Duden stehen sollte, weil ich mich nicht manipulieren lassen möchte (lässt sich natürlich nicht immer vermeiden), auch nicht in der Sprache, weil irgendein Fuzzy meint hier ein neues Wort zu etablieren, bin eben kein Hund der sich aufs Stöckchen freut.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/meta/2019/aug/11/mathematik-zum-wochenende Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-08-11T09:43:43Z 2019-08-11T09:43:43Z Mathematik zum Wochenende <p>Kleine Aufgabe zum Sonntag:</p> <p>Ein Drittel des regulären Sechsecks ist schraffiert. Wie ist das Verhältnis <em>a</em> : <em>b</em>?</p> <p><a href="/images/c1d4a32a-bc1c-11e9-ba3a-b42e9947ef30.jpeg" rel="noopener noreferrer"><img src="/images/c1d4a32a-bc1c-11e9-ba3a-b42e9947ef30.jpeg?size=medium" alt="" loading="lazy"></a></p> <p>Kleine Aufgabe heißt: Wer mit Wurzeln oder Winkelfunktionen auffährt, macht die Aufgabe groß.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/meta/2019/aug/10/warum-ich-jetzt-durch-wegbleiben-abstimme Der Teufel, der auf "Belzbub" hört 2019-08-10T15:20:30Z 2019-08-10T15:20:30Z Warum ich jetzt durch Wegbleiben abstimme <blockquote> <p>Mit dieser neuen Funktion können Sie Beiträge als „fachlich nicht hilfreich“ oder auch subjektiv negativ bewerten. Dies soll nicht dazu dienen, missliebige Foristen auszugrenzen, sondern anderen zeigen, dass mindestens ein Forumsnutzer mit Bewertungsrechten mit dem Beitrag nicht einverstanden ist. Bewerten Sie daher bitte den Inhalt, nicht den Verfasser.</p> </blockquote> <p>Ich habe oft genug vorgeschlagen, dass bei negativen Bewertungen eine Begründung verlangt werden sollte. Denn ohne eine solche sind diese in höchstem Maße</p> <ol> <li>unkonstruktiv (denn unbegründete Bewertungen helfen mangels Informationen nicht beim Verbessern) und</li> <li>geeignet, die Stimmung im Forum erheblich zu verschlechtern. Dafür gibt es sprichwörtlich megabyteweise Belege in der Datenbank des Forums.</li> </ol> <p>Ich habe es oft genug geschrieben, dass die derzeitige Ausgestaltung der Bewertungsfunktion nicht nur ein Potential zum Missbrauch bietet sondern (aus meiner Sicht:offensichtlich) missbraucht wird. Als Reaktion kommen nur Totschlagargumente à la</p> <blockquote> <p><em><strong>"Oh nööö, darüber haben wir 5768787 mal geredet."</strong></em></p> </blockquote> <p>Ein Befassen mit meinem Argument <em>"ist nicht hilfreich und sorgt nur für miese Stimmung"</em> ist indes nicht mal im Ansatz erkennbar, es kommt immer nur Mist wie der obige.</p> <p>Es ist es aus meiner Sicht auch begründet so, dass diese Reaktion am wahrscheinlichsten aus dem Grund erfolgt, dass eben einige derjenigen, die das zu bestimmen haben, sich eben dieser Funktion in Abhängigkeit nur von der Person des Verfassers zu bedienen. Ich nenne das "Mobbing" weil es es eine Form des Mobbings ist.</p> <p>Auch in anderer Hinsicht verstößt der Verein und die Mods gegen eigene Regeln. Betrachten wir mal die aktuelle Forums-Hauptseite:</p> <ol> <li>Wie groß ist der Anteil an Beiträgen zu Fachfragen - gerade von den Mods?</li> <li>Wie groß ist der Anteil der Threads zu Fachfragen - gerade von den Stammpostern?</li> <li>Und wie groß ist der Anteil von völlig sachfremden Themen und Beiträgen, die mit "selfHTML" eigentlich nichts zu tun haben?</li> </ol> <p>Damit meine ich</p> <ol> <li>Lesetipp - Im Labyrinth der Lehrpläne: Wie digitale Bildung langsam in die Schulen findet</li> <li>IT-Gehälter stabil trotz Fachkräftemangel</li> <li>Mathematik zur Wochenmitte</li> <li>Lesetipp: Historische Rechenmaschine Harvard Mark I</li> <li>Neuer Beitrag im Blog: wie die Tech‐Giganten sich unterscheiden beim Datensammeln</li> <li>Mathematik zum Wochenende</li> <li>Sklaverei 2.0 (Aral Balkan)</li> </ol> <p>Nach dem Zählen und Addieren der zugehörigen Blahfaselbeiträge sollte man sich überlegen, wie das Forum aus Sicht eines Hilfesuchenden wirkt: Nämlich wie ein wirrer Haufen nutzloser (aber, ohne ersichtlichen Grund teilweise mit vielen +1 versehenen) Postings zwischen denen man sich - falls man denn eine solche erhält, die tatsächlich hilfreiche(n) Antworte(n) selbst raussuchen muss. Da kann man auch gleich wieder zur Suchmaschine zurück. Und so wie die Nutzerzahlen (insbesondere die Anzahl der Fragen pro Tag, inzwischen pro Woche) sich entwickelt haben machen das offensichtlich auch viele. (Übrigens ist auch der Link zu "neuer Beitrag" zu versteckt.)</p> <p>Diese ganzen Themen gehören mindestens verschoben. Aber wer stellt die ins Haupt-Forum? Die Mods. Wer lobt sich gegenseitig für den Mist? Die Mods. Wer hat meinen Vorschlag für eine Spielwiese verworfen? ...</p> <p><strong>"Ich habe es nicht nötig, Perlen vor die Säue zu werfen"</strong></p> <p>Als ich im Mai in den Urlaub gefahren bin hatte ich mehrfach darum gebeten, einem Fragesteller zu helfen, was zu diesem Zeitpunkt schon kaum noch ein anderer tat:</p> <ul> <li><a href="https://forum.selfhtml.org/self/2019/may/20/heise-punkt-de-google-sperrt-android-updates-und-den-play-store-fuer-huawei/1749149#m1749149" rel="noopener noreferrer">https://forum.selfhtml.org/self/2019/may/20/heise-punkt-de-google-sperrt-android-updates-und-den-play-store-fuer-huawei/1749149#m1749149</a></li> <li><a href="https://forum.selfhtml.org/self/2019/may/20/heise-punkt-de-google-sperrt-android-updates-und-den-play-store-fuer-huawei/1749166#m1749166" rel="noopener noreferrer">https://forum.selfhtml.org/self/2019/may/20/heise-punkt-de-google-sperrt-android-updates-und-den-play-store-fuer-huawei/1749166#m1749166</a></li> </ul> <p>Später hat sich hier zwar jemand von den Mods (der nicht "Urlaub" von "ich hab's sowas von satt hier" unterscheiden konnte oder wollte) aufmunternd bepunktet darüber lustig gemacht und das als "theatralischen Abgang" (oder so ähnlich) bezeichnet - aber geholfen hat dem Nutzer niemand mehr - wohl weil er schwierig zu verstehen war und weil das Arbeit machte.</p> <p><a href="https://forum.selfhtml.org/self/2019/may/11/phpmyadmin-nicht-start/1749231#m1749231" rel="noopener noreferrer">https://forum.selfhtml.org/self/2019/may/11/phpmyadmin-nicht-start/1749231#m1749231</a></p> <p>Resultat: Nach dem Urlaub war der Thread archiviert. Der Fragsteller ist seit dem weg und fragt jetzt woanders. Ebenso wie es zahlreiche andere Fragesteller aus ähnlichen Gründen auch sind.</p> <p>Das macht eines klar: <strong>Statuspunkte und Reputation kann man hier inzwischen einfacher und bequemer mit "ein wenig Scheiße labern" - und Mobben - erlangen</strong>. Und das wird also auch getan.</p> <p><strong>Und ich bin jetzt auch weg.</strong></p> <p>Ich sehe nicht, dass ich hier was verbessern kann, denn Argumente zählen nicht. Und es bringt mir auch nichts - im Gegenteil: Ich verschwende Zeit und sehe sogar die Gefahr einer begründungs- und grundlosen Schädigung meiner Reputation. Es ist ziemlich krude von mir zu erwarten, dass ich mich auch noch anmelde oder gar dem Verein beitrete. Denn dort würde ich auch nur hören, dass man doch alles schon 5768787 besprochen habe und deshalb keinerei Grund sieht, etwas zu überdenken und zu besprechen - was aber - ich meine das Forum - "voll gegen die Wand" läuft. Schaut es Euch doch einfach mal an.</p> <p>Ich hab's satt.</p> <pre><code class="block">P.S. Die Software vergisst bei der Vorschau und beim Speichern munter den Autor und den Betreff. Ich werd mich aber nirgendwo anmelden um das als Bug zu melden. </code></pre> https://forum.selfhtml.org/meta/2019/aug/07/mathematik-zur-wochenmitte Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-08-07T09:19:52Z 2019-08-07T09:19:52Z Mathematik zur Wochenmitte <p><a href="/images/3c89b6f4-b8f4-11e9-85ca-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/3c89b6f4-b8f4-11e9-85ca-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>Wie groß ist die Fläche des gleichschenkligen Dreiecks mit Basis der Länge 6 und Inkreisradius 1?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/meta/2019/aug/08/bewertungsregeln-verstanden Robert B. 2019-08-08T13:36:39Z 2019-08-08T13:36:39Z Bewertungsregeln verstanden? <p>Moin,</p> <p>nach dem Lesen <a href="https://www.heise.de/ct/artikel/Stack-Overflow-Gruender-Joel-Spolsky-Dokumentation-ist-ein-Mythos-4482941.html" rel="nofollow noopener noreferrer">eines <em>c't</em>-Interviews mit dem Stackexchange-Gründer <em>Joel Spolsky</em></a> habe ich vermutlich einen Teil <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bewertungsregeln#einen_Beitrag_negativ_bewerten" rel="nofollow noopener noreferrer">unserer Bewertungsregeln</a> verstanden:</p> <blockquote> <p>die Hupe ist aus Sicherheitsgründen notwendig. Aber meistens benutzen die Leute die Hupe nur, um ihrem Ärger Luft zu machen. Jeff schlug vor, dass man für jedes Mal Hupen fünf Dollar bezahlen soll: Wer sie braucht, um einen Unfall zu verhindern, wird sie trotzdem benutzen, wer nur genervt ist, eher nicht.</p> </blockquote> <p>Viele Grüße<br> Robert</p> https://forum.selfhtml.org/meta/2019/aug/06/neue-beitrageauch-innerhalb-des-fadens-melden Linuchs 2019-08-06T09:23:20Z 2019-08-06T09:23:20Z Neue Beiträge auch innerhalb des Fadens melden <p>Moin,</p> <p>erstmal ein Lob, dass neue Beiträge in die Forum-Übersicht eingefügt werden, ohne die Webseite neu zu laden.</p> <p>Wo kann ich dieses Konzept nachlesen?</p> <p>Schön wäre es, die gleiche Dienstleistung auch im Faden selbst zu haben.</p> <p>Zwar wird kurz eingeblendet, dass jemand in meinen Fäden (alle?) geantwortet hat, aber um das lesen zu können, muss ich auf die Forum-Ebene zurück. Und dann wieder in den Faden runter, in dem ich doch sowieso bin.</p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/meta/2019/aug/02/debugging-besonders-lange-fehlersuche Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-08-02T11:09:08Z 2019-08-02T11:09:08Z Debugging - besonders lange Fehlersuche <p>Hallo alle,</p> <p>aufgrund einiger aktueller Threads, möchte ich die Fehlersuchen zusammentragen, die sehr lange gedauert haben und bereits mit sehr kleinem Aufwand behoben werden konnten, frei nach dem Motto kleine Ursache – große Wirkung.</p> <hr> <p>Meine Lieblingsfehlermeldung ist für prepared statements <em>number of bound variables does not match number of tokens</em>. Die Fehlermeldung entsteht natürlich in der Zeile, in der das Statement ausgeführt wird. Ich hatte ca. 10 Spalten zu bearbeiten und der Fehler war<br> <code class="bad">…, foo = : bar, …</code> statt <code class="good">…, foo = :bar, …</code></p> <p>Ich hab alles gezählt …</p> <hr> <p>So, nun seid ihr dran. Bei welcher Debugging-Aktion habt ihr so richtig ‍♂️ bzw. ‍♀️ machen müssen?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/meta/2019/aug/06/benutzer-hervorheben-vs-v5 MudGuard http://www.andreas-waechter.de/ 2019-08-06T12:59:20Z 2019-08-06T12:59:20Z Benutzer hervorheben vs. V5 <p>Hi,</p> <p>in den Einstellungen gibt es (nach wie vor der Umstellung auf V5) die Möglichkeit, Benutzernamen hervorzuheben.</p> <p>Ich sehe im HTML keinerlei Unterschied zwischen dort eingestellten Benutzern und "normalen" Nutzern. Ich hätte z.B. im Link mit Beschriftung <Username> eine Klasse erwartet (a la class="highlighted". Aber da ist nix.</p> <p>Ist das Feature abgeschafft? Dann müßte noch die Einstellung dafür entsorgt werden.</p> <p>Oder vergessen worden, wieder einzubauen?</p> <p>Ich meine, es gab früher auch eine class="self" oder so, um den eigenen Benutzernamen hervorzuheben - damit man eigene Postings schneller findet …</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/meta/2019/aug/06/logos-benotingt Christian Kruse https://wwwtech.de/about 2019-08-06T05:17:37Z 2019-08-06T05:17:37Z Logos benötigt <p>Moin zusammen,</p> <p>für V5 hätte ich gerne SVG-Varianten der folgenden Logos:</p> <ul> <li><a href="https://github.com/ckruse/cforum/blob/master/app/assets/images/selfhtml-forum-small-weihnachtsmuetze.png" rel="noopener noreferrer">Weihnachtslogo klein</a></li> <li><a href="https://github.com/ckruse/cforum/blob/master/app/assets/images/selfhtml-forum-weihnachtsmuetze.png" rel="noopener noreferrer">Weihnachtslogo groß</a></li> <li>Blue-Beanie-Day klein – dafür hatte ich nichtmal ein Logo </li> <li><a href="https://github.com/ckruse/cforum/blob/6cff9500bbf1693545502071ef52f6698423030a/app/assets/images/selfhtml-forum-blue-beanie.png" rel="noopener noreferrer">Blue-Beanie-Day groß</a></li> </ul> <p>Leider bin ich kein gut genügender Grafiker, um das selber zu machen. Es wäre daher schön, wenn ich ein wenig Hilfe dafür aus der Community bekommen könnte. Wer meldet sich freiwillig? </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/meta/2019/aug/06/selfhtmlfarbpalette Matthias Scharwies mscharwies@selfhtml.org 2019-08-06T06:32:19Z 2019-08-06T06:32:19Z SELFHTML-Farbpalette <p>Servus!</p> <p>Im Zuge der <a href="https://forum.selfhtml.org/meta/2019/aug/06/logos-benotingt/1754767#m1754767" rel="noopener noreferrer">Diskussion um SVG-Versionen</a> unseres Logos habe ich mal unsere SELF-Farbpalette neu gegliedert:</p> <p><a href="https://wiki.selfhtml.org/wiki/Hilfe:SELFHTML-Farbtabelle" rel="nofollow noopener noreferrer">Hilfe:SELFHTML-Farbtabelle</a></p> <p>Neben den Farbtönen an sich wird auch die aktuelle Verwendung, und, noch wichtiger, der Kontrast angezeigt!</p> <p>Aufbauend auf den <strong>4 Grundfarben</strong> kann man mit einem Alphawert von 0.1 <strong>helle Farbtöne</strong> erzeugen:</p> <p><a href="https://wiki.selfhtml.org/wiki/Hilfe:SELFHTML-Farbtabelle#Farbt.C3.B6ne" rel="nofollow noopener noreferrer">Hilfe:SELFHTML-Farbtabelle#Farbtöne</a></p> <p>Das haut ganz gut hin, nur der Farbton <code>lichtes Grün</code> wurde von <a href="/users/3771" class="mention registered-user" rel="noopener noreferrer">@Performer</a> mit <code>hsla(80, 45%, 48%,.2) </code>anders zusammengestellt.</p> <p>Im Graubereich gibt es mit <code>hsla(202, 16%, 45%, .5)</code>und <code>hsl(196, 23%, 81%) </code> zwei ähnliche Töne, die man zusammenfassen müsste.</p> <p>Leider gibt es eine Baustelle: die <a href="https://wiki.selfhtml.org/wiki/Hilfe:SELFHTML-Farbtabelle#unterschiedliche_Linkfarben" rel="nofollow noopener noreferrer">Linkfarben </a>der SELF-Welt strahlen in allen Blautönen, die im Contrast Checker leider nicht bestehen.</p> <p>Wenn wir das SELF-Blau ein bisschen auf <code>hsl(201, 50%, 40%)</code> verdunkelten, würde es mit [1:5.07] bestehen. Das müsste ein Grafiker entscheiden, ob dann die Farbpalette mit Gelb, blau, grün und rot noch passen würde.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Heute mal keine Signatur </div> https://forum.selfhtml.org/meta/2019/jun/22/classic-forum-v5 Christian Kruse https://wwwtech.de/about 2019-06-22T05:06:50Z 2019-07-23T05:00:09Z Classic Forum V5 <p>Guten Morgen zusammen,</p> <p>die Umstellung ist soweit durch: hier läuft jetzt das Classic Forum V5. Neben diversen technischen Neuerungen (es wird jetzt <a href="https://elixir-lang.org/" rel="nofollow noopener noreferrer">Elixir</a> mit <a href="https://phoenixframework.org/" rel="nofollow noopener noreferrer">Phoenix</a> als Server-Technologie benutzt und eine Mischung aus Vanilla JS und React im Frontend) ist die wichtigste Neuerung wohl, dass Tags jetzt global sind. In jedem Sub-Forum sind die gleichen Tags verfügbar.</p> <p>Auch die Autocomplete-Funktion verhält sich jetzt etwas anders. Sie wird nicht mehr durch Enter ausgelöst, sondern durch Tab und verhält sich damit ähnlicher zu den Autocomplete-Funktionen in Editoren. Enter war einfach zu invasiv. Die Navigation mit den Pfeiltasten um ein Element auszuwählen und dann mit Enter zu bestätigen sollte allerdings weiterhin gehen.</p> <p>Ansonsten: wie gehabt, es wird Anfangs sicherlich etwas holperig sein, aber ihr hättet ja auch vorher testen können Fehler gerne <a href="https://github.com/ckruse/cforum_ex/" rel="noopener noreferrer">bei Github</a> melden; wenn ihr sie hier meldet, muss ich sie dann von Hand umtragen. Sonst verliere ich den Überblick. Danke </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/meta/2019/jul/29/was-tun-wenn-user-hier-passwort-nicht-mehr-weiss-und-email-nicht-mehr-vorhanden Lisa 2019-07-29T13:50:39Z 2019-07-29T13:50:39Z Was tun wenn User hier Passwort nicht mehr weiß und Email nicht mehr vorhanden? <p>Hallo,</p> <p>ich wollte mich gerade mal wieder nach langer Zeit einloggen, stellte aber fest, dass ich das Passwort nicht mehr weiß. Die Passwortvergessenfunktion verlangt dann nach einer Email. Gibt man die Falsche ein, erscheint nicht mal ein Hinweis, "diese ist nicht bekannt" oder so was, dadurch eher das Gefühl der Request geht nicht durch. Mit dem Benutzernamen kommt dann zwar eine Meldung, die dürfte aber nichts bringen, da die wahrscheinlich Email nicht mehr existiert. Wie soll ich da jetzt weiter vorgehen?</p> <p>lg.</p>