<feed xml:lang="de" xmlns="http://www.w3.org/2005/Atom">
  <id>tag:forum.selfhtml.org,2005:/self</id>
  <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/" rel="alternate" type="text/html"/>
  <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org//feed/atom" rel="self" type="application/atom+xml"/>
  <title>SELFHTML-Blog</title>
  <updated>2026-01-06T05:02:22Z</updated>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2026/jan/06/selfhtml-halt-sich-an-webstandards</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2026-01-06T05:02:22Z</published>
    <updated>2026-01-06T05:02:22Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2026/jan/06/selfhtml-halt-sich-an-webstandards#m1823579" rel="alternate" type="text/html"/>
    <title>SELFHTML hält sich an Webstandards!</title>
    <content type="html">&lt;p&gt;Aber was sind &lt;em&gt;„die Standards“&lt;/em&gt; denn überhaupt?&lt;br&gt;
Und tun das die Browser-Hersteller selbst denn auch?&lt;/p&gt;
&lt;p&gt;In der Zeit der &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#Browserkrieg&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Browserkriege&lt;/a&gt; kämpfte SELFHTML auf der Seite der Guten dafür, dass sich alle Browser an die vom W3C verabschiedeten Standards hielten. Mit dabei der Netscape-Nachfolger Mozilla und eine unbekannte Browser-Schmiede, die sich &lt;em&gt;„Don&apos;t be Evil“&lt;/em&gt; auf die Fahnen geschrieben hatte.&lt;/p&gt;
&lt;p&gt;Wer seine Webseiten korrekt erstellte, konnte das durch ein &lt;em&gt;Badge&lt;/em&gt; kennzeichnen:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/fdfbd60e-e53a-11f0-ad2b-9c6b003e9157.svg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/fdfbd60e-e53a-11f0-ad2b-9c6b003e9157.svg&quot; alt=&quot;Badge des W3C, um anzuzeigen, dass Webseite auf HTML 4.0 geprüft wurde.&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Die Regeln für die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Webstandards&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Webstandards&lt;/a&gt; waren klar:
Aus einem &lt;em&gt;Draft&lt;/em&gt; wurde nach gemeinsamen Diskussionen eine &lt;em&gt;Candidate Recommendation&lt;/em&gt; und sobald dies von 2 Browsern implementiert und getestet wurde, war der Weg frei zur offiziellen &lt;em&gt;Recommendation&lt;/em&gt; (Empfehlung).&lt;/p&gt;
&lt;p&gt;Mittlerweile hat sich das schleichend verändert. Im &lt;em&gt;&lt;strong&gt;Living Standard&lt;/strong&gt;&lt;/em&gt; der WHATWG werden &lt;em&gt;Drafts&lt;/em&gt; erstellt und sofort implementiert. Eine &lt;em&gt;Recommendation&lt;/em&gt; wird erst verabschiedet, wenn sich das Feature „gesetzt“ hat.&lt;/p&gt;
&lt;p&gt;Andererseits „dürfen“ die Browser-Hersteller entscheiden, was in den Standard kommt und was nicht.&lt;/p&gt;
&lt;p&gt;Wusstet ihr, dass SVG2 noch gar kein offizieller Standard ist, sondern sich erst im Status des CR befindet?&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; Die Browserhersteller setzten um, was ihnen wichtig erschien und ignorierten die Spec, bzw den Entwurf.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; Auch wenn wir seit Jahren SVG2 im Wiki beschreiben und auch aktiv einsetzen – „offiziell“ ist das nicht.&lt;/p&gt;
&lt;p&gt;2015 beschloss Chrome &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SMIL&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;SMIL&lt;/a&gt;, das seit 1998(!) vom W3C als &lt;em&gt;REC&lt;/em&gt; festgelegt war, als &lt;em&gt;deprecated&lt;/em&gt; abzuschaffen und ließ sich von seiner Tochter YouTube, die SMIL für Untertitel benötigt, gerade noch davon abbringen. 2025 wiederholt sich dies mit dem Versuch, XSLT abzuschaffen.&lt;/p&gt;
&lt;p&gt;Auch wenn wir den Bedeutungsverlust des W3C bedauern, können wir uns auf die herkömmliche Art „Webstandards“ zu definieren, nicht mehr verlassen.&lt;/p&gt;
&lt;p&gt;Deshalb hat sich ein pragmatischer Ansatz durchgesetzt:&lt;br&gt;
Anstatt bis zur offiziellen Zertifizierung durch das W3C zu warten, bieten MDN/Caniuse eine &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;em&gt;&lt;strong&gt;Baseline&lt;/strong&gt;&lt;/em&gt;&lt;/a&gt; an, die sich an der tatsächlichen Verbreitung orientiert.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/2838b474-e549-11f0-8750-9c6b003e9157.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/2838b474-e549-11f0-8750-9c6b003e9157.png?size=medium&quot; alt=&quot;Screenshot MDN Baseline widely available mit Browser-Icons&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;SELFHTML richtet sich danach und hat seit 2022 den Browsersupport von einem Sprite mit zahllosen Browser-Logos durch einen Link bei Caniuse ersetzt.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Auch in eigenen Stylesheets verwenden wir nichts, was MDN/Caniuse nicht als &lt;em&gt;Baseline&lt;/em&gt; darstellt. Dass &lt;em&gt;„Baseline“&lt;/em&gt; nach MDN eine Obermenge von „W3C &lt;em&gt;(Candidate) Recommendation&lt;/em&gt;“ ist, ist leider so.&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/SVG2/#status&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Scalable Vector Graphics (SVG) 2&lt;/a&gt; (W3C Candidate Recommendation 04 October 2018) &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2016/nov/28/svg-2-was-lange-waehrt&quot; rel=&quot;noopener noreferrer&quot;&gt;SVG 2 - was lange währt …&lt;/a&gt; SELF-Blog vom 8. November 2016&lt;br&gt;
Warum SVG2 immer noch nicht verabschiedet ist und welche Neuerungen von den Browser-Herstellern implementiert wurden. &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung&quot; rel=&quot;noopener noreferrer&quot;&gt;Geht das auch im IE? - eine Geschichte der Iconsets zur Browserunterstützung&lt;/a&gt;&lt;br&gt;
SELF-Blog vom 22.02.22 &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/24/frohe-weihnachten</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-12-24T05:55:27Z</published>
    <updated>2025-12-24T05:55:27Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/24/frohe-weihnachten#m1823443" rel="alternate" type="text/html"/>
    <title>Frohe Weihnachten!</title>
    <content type="html">&lt;p&gt;Im Namen des Vereins SELFHTML e.V. wünsche ich allen Mitgliedern, Förderern und Freunden des Vereins ein frohes Weihnachtsfest und ein beruflich wie privat erfolgreiches neues Jahr.&lt;/p&gt;
&lt;p&gt;Damit verbunden natürlich auch Zeit der Erholung; der Druck, sich wegen fehlender Geschenke und Aufmerksamkeiten in den Trubel der verkaufsoffenen Sonntage stürzen zu müssen, ist vorbei. Dafür kann man sich dann schon mal auf die meist noch stressigeren Umtauschaktionen vorbereiten.&lt;/p&gt;
&lt;p&gt;Wenn wir das vergangene Jahr Revue passieren lassen, haben wir keine großen Meilensteine erreicht, sondern viele kleine Schritte zurückgelegt. Die Frequenz im Forum nimmt weiter ab, ermöglicht uns aber auch, Fragenden schnell zu antworten.  Dass manche die „schnellere und freundlichere“ Hilfe der KI-Assistenten uns vorziehen, war Anlass für den diesjährigen Adventskalender. Die Themen rund um &lt;em&gt;Best practices&lt;/em&gt; sind im Bereich &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Programmiertechnik&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Programmiertechnik&lt;/a&gt; gesammelt, besonderes Augenmerk legten wir auf weiterführende Links zu Tutorials mit guten Beispielen. Meine Hoffnung ist es, dass sich dort jemand doch festliest und nicht mit der fertigen &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Copy-and-paste&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Copy &amp; Paste&lt;/a&gt;-Lösung zufrieden ist.&lt;/p&gt;
&lt;p&gt;Es liegt in der Natur der Dinge, dass das Wiki und seine Inhalte niemals abgeschlossen sein werden. Einige Seiten und Bereiche sind auch jetzt schon wieder (oder immer noch?) überarbeitungswürdig. Hier suchen wir nach wie vor engagierte Autoren, die das Wiki weiter voranbringen, und sei es auch nur durch die Verbesserung von Tippfehlern oder das schickere Formatieren von Beispielen.&lt;/p&gt;
&lt;p&gt;Dabei soll aber nicht vergessen werden, dass Mitglieder, Förderer und Freunde des Vereins auch dieses Jahr zahllose Stunden und Mühen in den Betrieb des Vereins und der Infrastruktur investiert haben.&lt;/p&gt;
&lt;p&gt;Besonderer Dank gebührt hier Bertie, der die Cards sowie die Artikel selbst durch zahllose Icons und Infografiken veranschaulicht und damit verbessert hat.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/ed5b6892-e089-11f0-b891-9c6b003e9157.svg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/ed5b6892-e089-11f0-b891-9c6b003e9157.svg&quot; alt=&quot;Drei Könige vor Bethlehem folgen einem Kometen / Stern; SVG mit Filterffekten von Bertie Lemmenmeier&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Ich wünsche allen frohe Weihnachten und ein gutes Jahr 2026 – in der Hoffnung, dass wir wie die drei Weisen aus dem Morgenland dem Stern folgen und mit kleinen Schritten unserem Ziel vorankommen.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/23/pfade-in-svg</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
      <uri>https://wiki.selfhtml.org/wiki/Pfade_in_SVG</uri>
    </author>
    <published>2025-12-23T05:50:33Z</published>
    <updated>2025-12-23T05:50:33Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/23/pfade-in-svg#m1823239" rel="alternate" type="text/html"/>
    <title>Pfade in SVG</title>
    <content type="html">&lt;p&gt;Mittlerweile hat sich SVG als &lt;em&gt;&lt;strong&gt;das&lt;/strong&gt;&lt;/em&gt; Format für Icons und Cliparts durchgesetzt. Es gibt genügend Bibliotheken im Netz; ich verwende oft &lt;a href=&quot;https://commons.wikimedia.org/w/index.php?search=icons&amp;title=Special%3AMediaSearch&amp;type=image&amp;filemime=svg&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Wikimedia Commons&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Selbst zu zeichnen führt oft zu klareren Strukturen mit wenigen, bewusst ausgewählten Elementen, die sich anschließend leichter mit CSS formatieren lassen.&lt;/p&gt;
&lt;p&gt;Es liegt nahe, dies auch einmal durch KI erledigen zu lassen:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/fb54faba-dfbe-11f0-a404-9c6b003e9157.svg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/fb54faba-dfbe-11f0-a404-9c6b003e9157.svg&quot; alt=&quot;Mit KI erzeugter Baum&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Auf unserem &lt;a href=&quot;https://forum.selfhtml.org/self/2025/nov/03/stammtisch-am-mittwoch/1822671?view_all=yes#m1822671&quot; rel=&quot;noopener noreferrer&quot;&gt;Stammtisch&lt;/a&gt; waren die Meinungen gespalten: einige fanden das Ergebnis gut und erkannten eine Palme, andere wollten es am Liebsten selbst probieren.&lt;/p&gt;
&lt;p&gt;Und da beißt sich die Katze in den Schwanz: Selbst zeichnen scheint umständlich und ohne Grafikprogramm zu kompliziert.&lt;/p&gt;
&lt;p&gt;Hier möchte SELFHTML mit einigen kleinen Helferlein zum Selbermachen animieren:&lt;/p&gt;
&lt;p&gt;In unserem Tutorial &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Pfade_in_SVG&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Pfade in SVG&lt;/strong&gt;&lt;/a&gt; haben wir für die verschiedenen Bézier-Kurven und arc-Bögen interaktive Beispiele erstellt, die sich mit Drag &amp; Drop beliebig verändern lassen:&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-13-path-cubic-bezier-2.html&quot; width=&quot;900&quot; height=&quot;720&quot; name=&quot;SELFHTML&quot; title=&quot;Bézier-Kurven&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Startseite&quot;&gt;SELFHTML&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;Ich persönlich muss bei den &lt;em&gt;arc flags&lt;/em&gt; und &lt;em&gt;sweep flags&lt;/em&gt; immer noch ausprobieren, in welche Richtung es geht:&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-10-arcs.html&quot; width=&quot;900&quot; height=&quot;760&quot; name=&quot;SELFHTML&quot; title=&quot;Arc-Bogen-Generator&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Startseite&quot;&gt;SELFHTML&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;Des Weiteren gibt es nun zwei kleine &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Pfade_in_SVG/Helferlein&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Helferlein&lt;/strong&gt;&lt;/a&gt;:&lt;/p&gt;
&lt;p&gt;In unserem Pfad-Konvertierer können Pfade so vereinfacht werden, dass sie später umso leichter weiterverarbeitet werden können. Das Ergebnis wird gleich angezeigt, sodass man sehen kann falls bei den Bézier-Kurven einige Dezimalstellen zu viel entfernt hat:&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Pfad-Konvertierer.html&quot; width=&quot;900&quot; height=&quot;760&quot; name=&quot;SELFHTML&quot; title=&quot;Pfad-Konvertierer&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Startseite&quot;&gt;SELFHTML&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;&lt;strong&gt;PS&lt;/strong&gt;: Wusstet ihr schon, dass diese Pfad-Kommandos nicht nur in SVG, sondern mittlerweile auch in vielen CSS-Eigenschaften über die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Funktionen/path()&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;path()&lt;/a&gt;-CSS-Funktion verwendet werden?&lt;br&gt;
→ &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Animation/Pfad-Animationen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Pfad-Animationen&lt;/strong&gt; mit offset-path&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/21/4-advent-plane-listen-oder-zeit-zum-durchschnaufen</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-12-21T06:53:10Z</published>
    <updated>2025-12-21T06:53:10Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/21/4-advent-plane-listen-oder-zeit-zum-durchschnaufen#m1823233" rel="alternate" type="text/html"/>
    <title>4.Advent – Pläne, Listen oder Zeit zum Durchschnaufen?</title>
    <content type="html">&lt;p&gt;Bereits am 17. hatten wir &lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;ToDo-Listen&lt;/a&gt; thematisiert. Dabei soll es heute aber nicht um DOM-Manipulation, sondern um Zweck und Zwang dieser Listen gehen.&lt;/p&gt;
&lt;p&gt;Wahrscheinlich führt jeder in irgendeiner Art Terminkalender, ToDo-Listen mit unerledigten Aufgaben und gute Vorsätze, was man ab Neujahr alles anders (und vor allem öfter) machen will.&lt;/p&gt;
&lt;p&gt;Vor einem solchen Berg künftiger Aufgaben möchte man manchmal verzweifeln. Hier hilft es oft, die Aufgaben zu gewichten und sich für den nächsten Tage bzw. die nächste Woche nur die wichtigsten und dringendsten drei Dinge aufzuschreiben und vorzunehmen.&lt;/p&gt;
&lt;p&gt;Bei der Vorbereitung zum Tutorial stieß ich in der Wikipedia&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; auf den Begriff &lt;em&gt;&lt;strong&gt;to-don&apos;t&lt;/strong&gt;&lt;/em&gt;:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;If you aren’t reaching your goals, the solution probably isn’t to take on more work. Instead, consider what you might stop doing. You’ll have more time for what really matters if you eliminate unnecessary busy work. 
&lt;p&gt;… Take a piece of paper and divide it in half. On the left-hand side, make a list of all of your daily tasks, and on the right-hand side, make a list of your biggest “wins” — the work milestones you’re most proud of. Draw a line connecting each of your wins to related daily tasks, and circle those tasks.&lt;br&gt;Finally, step back and look at what’s left uncircled on your list. &lt;br&gt;These are the tasks that you should either stop doing, significantly minimize, or delegate to others.&lt;/p&gt;
&lt;p&gt;Abandoning work that isn’t helping you meet your goals will give you more time to focus on the work that is — and then to revel in your success.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Dieser Tipp&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; kann unseren Kopf frei kriegen von der immer größeren Last, alle Dinge leisten zu müssen. Nehmt euch für morgen 3 Dinge vor und lasst den Rest gut sein!&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://bildung.social/tags/lifehack&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;#lifehack&lt;/a&gt;&lt;/p&gt;
&lt;div style=&quot;border:thick solid; padding:1em; width:22em;&quot;&gt;
&lt;p&gt;&lt;strong&gt;#1221&lt;/strong&gt;
&lt;p&gt;Geht raus und genießt den Weihnachtsmarkt oder die Natur, aber nicht um &lt;code&gt;n&lt;/code&gt;Kilometer in höchstens &lt;code&gt;x&lt;/code&gt; Minuten zu schaffen!
&lt;/div&gt; 
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://de.wikipedia.org/wiki/To-do-Liste&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;To-Do-Liste&lt;/a&gt; (de.wikipedia.org) &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://hbr.org/tip/2020/07/make-a-to-dont-list&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Make a “To-Don’t” List&lt;/a&gt; (hbr.org) &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/20/cool-urls-never-change</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-12-20T05:37:40Z</published>
    <updated>2025-12-20T05:37:40Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/20/cool-urls-never-change#m1823222" rel="alternate" type="text/html"/>
    <title>„Cool URLs never change!“</title>
    <content type="html">&lt;p&gt;Wir benutzen das SELF-Wiki ja selbst zum Nachschauen und Stöbern. Ärgerlich, wenn wir auf Lücken und veraltete Inhalte treffen.&lt;br&gt;
Noch ärgerlicher, wenn Links ins Leere laufen. Manche Seiten werden verschoben, andere gar gelöscht.&lt;/p&gt;
&lt;p&gt;Aufgefallen ist uns dies in der SVG-Referenz, in der Links auf die SVG2-Spec plötzlich (?) ins Leere liefen.  &lt;/p&gt;
&lt;p&gt;→ &lt;a href=&quot;https://www.w3.org/TR/SVG2/single-page.html#text-TextAnchorProperty&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;www.w3.org/TR/SVG2/single-page.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Es gab ja mal die Konvention &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/Dateiorganisation#Cool_URIs_don.27t_change.21&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Cool URIs don&apos;t change!&lt;/strong&gt;&lt;/a&gt;, dass man Webseiten so anlegt, dass sie gleichbleiben, archiviert werden oder eine &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Webserver/htaccess/Umleitungen_mit_mod_rewrite&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;301er-Weiterleitung&lt;/a&gt; auf die neue URL leitet. Schade, dass sich das W3C da rausnimmt.&lt;/p&gt;
&lt;p&gt;Die neue Spec der SVG-Attribute ist mittlerweile bei der &lt;a href=&quot;https://svgwg.org/svg2-draft/text.html#TextAnchorProperty&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;svgwg.org/svg2-draft/text.html&lt;/a&gt; zu finden, wobei immer mehr ehemalige SVG-Attribute in den neuen CSS-Modulen wie Masken und Beschneidungen, etc zu finden sind.&lt;br&gt;
Das kostete wieder einen halben Nachmittag, die Referenzseiten durchzugehen und auf tote Links zu checken. Danke an den W3C, dass wir nicht arbeitslos werden!  &lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Das war Anlass für uns, nach einem &lt;a href=&quot;https://wiki.selfhtml.org/wiki/PHP/Tutorials/Link-Checker&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Link-Checker&lt;/a&gt; zu schauen.  Alexander Brock hatte 2005 einen bei SELFHTML-Aktuell veröffentlicht, der 2020 mit DOMDocument und cURL aktualisiert wurde.&lt;/p&gt;
&lt;p&gt;Und da fällt uns wieder auf: Wir haben einiges im PHP-Bereich, aber keinen Kümmerer, der dort durchgeht und nicht nur tote Links, sondern auch veraltete Inhalte durchforstet, pflegt und gegebenfalls zurückschneidet (&lt;em&gt;Wiki-Gardening&lt;/em&gt;)&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Mitmachen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Freiwillige gesucht!&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/14/doomscrolling</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-12-14T05:19:38Z</published>
    <updated>2025-12-14T05:19:38Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/14/doomscrolling#m1823186" rel="alternate" type="text/html"/>
    <title>#doomscrolling</title>
    <content type="html">&lt;p&gt;… &lt;strong&gt;in der Dauerschleife?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Wenn ich eine Tüte Chips aufmache, und das gute Glutamat rieche, schaltet sich mein Verstand aus und ich greife immer wieder in die Tüte, bis sie leer ist.&lt;/p&gt;
&lt;p&gt;Das ist im Grunde eine &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Programmiertechnik/Programmierlogik#Schleifen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Schleife&lt;/a&gt;, wie man sie aus der Programmierung kennt:&lt;br&gt;
&lt;em&gt;„Solange Chips in der Tüte sind, greife hinein.“&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Der „Fehler“ im Algorithmus ist, dass keine Abbruchbedingung wie &lt;em&gt;„Ich habe genug gegessen“&lt;/em&gt; eingebaut ist. Der Algorithmus ist also sehr effektiv, aber schlecht kontrolliert.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Semiprofessionelle Webentwickler mögen unsere &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Programmiertechnik/Programmierlogik&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Tutorials&lt;/a&gt; belächeln, das Kochrezept wurde jedoch bewusst ausgewählt, um zu zeigen, dass Algorithmen unseren Alltag bestimmen.&lt;/p&gt;
&lt;p&gt;Apropos bestimmen: Wir im Vorstand hatten uns dabei ertappt, dass wir abends in einer Dauerschleife von Youtube-Videos plötzlich immer wieder die gleichen Themen vorgeschlagen bekamen. Was einem erst im Gespräch mit anderen Schicksalsgenossen auffällt: Auch das ist ein Algorithmus, der allerdings von anderen genauso „programmiert“ wurde, um uns auf der Webseite zu halten, Werbung zu genießen und möglichst noch ins Abo-Modell zu schleusen.&lt;/p&gt;
&lt;p&gt;Der „Fehler“ im Algorithmus ist, dass keine Abbruchbedingung wie &lt;em&gt;„Ich habe genug geschaut“&lt;/em&gt; eingebaut ist. Der Algorithmus ist also sehr effektiv, aber leider nicht von uns, sondern vom Anbieter kontrolliert.&lt;/p&gt;
&lt;p&gt;Sobald uns dies bewusst wird, könnten wir eigentlich unser „eigenes“ Programm starten.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Verwende Schleifen&lt;/strong&gt; …&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;mit einer festen Anzahl von Wiederholungen:
&lt;ul&gt;
&lt;li&gt;Schaue nur 2 Videos, dann gehst du aber raus an die frische Luft!&lt;br&gt;
Kannst du dich selbst von der Dauerschleife losreißen?&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Baue einen &lt;strong&gt;#break&lt;/strong&gt; ein, der die Schleife durchbricht:
&lt;ul&gt;
&lt;li&gt;Schaue nur solange, bis der Waserkessel für den Tee pfeift!&lt;/li&gt;
&lt;li&gt;Stelle dir einen Wecker, der dir Arbeits- und Pausenzeiten bewusst macht.&lt;br&gt;
→ &lt;a href=&quot;https://de.wikipedia.org/wiki/Pomodoro-Technik&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Pomodoro-Technik&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;mit einer anderen Funktion:
&lt;ul&gt;
&lt;li&gt;Auf Mastodon gibt es das &lt;a href=&quot;https://bildung.social/search?q=%23bloomscrolling&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;#bloomscrolling&lt;/a&gt;, bei dem ein Kontrapunkt zu den pessimistischen Nachrichten unserer Zeit gesetzt werden soll.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Raus an die frische Luft!&lt;/strong&gt;&lt;br&gt;
Auch wenn es im Dezember nicht immer sonnig ist, tut selbst die feuchte Luft, die mich anfangs noch abgeschreckt hatte, meiner geplagten Lunge gut, die sonst nur trockene Büroluft bekommt.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Passend dazu stieß ich heute auf einen &lt;a href=&quot;https://bildung.social/@ojelabii@norden.social/115714737120676178&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Post&lt;/a&gt;, der die ganze Misere illustriert:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/40616730-d8ab-11f0-b3d3-9c6b003e9157.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/40616730-d8ab-11f0-b3d3-9c6b003e9157.jpg?size=medium&quot; alt=&quot;Bild eines alten Telefons; Text: When the phone was tied with a wire - Humans were free…;Quelle: Internet&quot; title=&quot;Bild eines alten Telefons; Text: When the phone was tied with a wire - Humans were free...; Quelle: Internet&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Und deshalb unser &lt;a href=&quot;https://bildung.social/tags/lifehack&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;#lifehack&lt;/a&gt;&lt;/p&gt;
&lt;div style=&quot;border:thick solid; padding:1em; width:25em;&quot;&gt;
&lt;p&gt;&lt;strong&gt;#1214&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Nehmen Sie ihr digitales Endgerät nicht mit ins Bett  
&lt;br&gt;(und am Besten auch nicht mit auf die Couch!)&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Lasst uns zusammen die Schleife(n) durchbrechen und das tun, was uns gut tut!&lt;/p&gt;
&lt;p&gt;BTW: Und falls wieder jemand im Forum fragt, wie man mehrspaltige Konstrukte auf einen breiten Bildschirm bringt …&lt;br&gt;
die Masse der Menschen geht mit Smartphones und Tablets ins Netz, deshalb:&lt;br&gt;
&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Responsiv(es_Webdesign)#Mobile_first&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Mobile first!&lt;/strong&gt;&lt;/a&gt; (Aber nur im CSS, nicht im #reallife)&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/07/eliza-auf-die-1</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-12-07T05:31:53Z</published>
    <updated>2025-12-07T05:31:53Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/07/eliza-auf-die-1#m1823131" rel="alternate" type="text/html"/>
    <title>ELIZA auf die 1?</title>
    <content type="html">&lt;p&gt;1964 schockte Joseph Weizenbaum die Welt mit ELIZA, einem der ersten Programme zur Sprachverarbeitung, das mit Menschen in normal wirkendem Textdialog kommunizieren konnte.&lt;br&gt;
Die bekannteste Variante hieß DOCTOR und imitierte einen Rogers’schen Psychotherapeuten – also jemanden, der die Aussagen des Gesprächspartners in Fragen umformt. So fühlten sich die Menschen ernst genommen und begannen frei zu erzählen.&lt;/p&gt;
&lt;p&gt;1964 schockte die Welt Joseph Weizenbaum damit, dass sie das Gespräch mit dem Computer dem Kontakt mit Menschen vorzog.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;2022 kam ChatGPT, mittlerweile bietet jeder Konzern sein eigenes LLM an.&lt;/p&gt;
&lt;p&gt;Wie solche Language Learning Modelle funktionieren, ist eigentlich bekannt. Große Mengen Text werden durchforstet, um vorhandene Lösungen zu finden. Sie suchen dabei nicht nach fertigen Antworten, sondern erkennen Muster und Wahrscheinlichkeiten, um neue Antworten zu erzeugen, die zu den Eingaben passen.&lt;/p&gt;
&lt;p&gt;Dass man das Modell mit besseren, klareren oder strukturierteren Fragen   gezielter steuern kann und so oft genauere oder relevantere Antworten erhält, ist eigentlich bekannt.&lt;/p&gt;
&lt;p&gt;Dass man Ergebnisse stets auf Richtigkeit testen und prüfen muss, auch. (Und dass man dazu tief in der Materie sein muss.)&lt;/p&gt;
&lt;h3&gt;&lt;strong&gt;Warum Menschen lieber mit der KI als mit anderen Menschen reden.&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;Und es lässt sich wieder beobachten, dass Menschen den Kontakt mit der KI vorziehen. Neben dem Aspekt, dass KI „fertige“ Lösungen ausspuckt, ist der freundliche Umgangston einer der Gründe die KI zu bevorzugen.&lt;/p&gt;
&lt;p&gt;Jeder, auch ein Anfänger mit einer falsch formulierten Frage, erhält eine freundliche Entgegnung.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;„Gute Frage!“&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;„Tolle Idee!“&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;„Nice work!“&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Die Entwickler achten bewusst darauf, dass KI freundlich, ermutigend und kooperativ wirkt. Das vermeidet Konflikte und macht die Nutzung angenehmer.
Lob oder Bestätigung ist ein einfacher Weg, diese Wirkung zu erzeugen. Allerdings kann diese Empathie für manche Nutzer so attraktiv werden, dass sich einzelne Fragen zu &lt;em&gt;&lt;strong&gt;ChatBait&lt;/strong&gt;&lt;/em&gt;&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; entwickeln, die schließlich süchtig nach dem Kontakt mit der freundlichen KI macht.&lt;/p&gt;
&lt;h4&gt;&lt;strong&gt;Es gibt keine dummen Fragen! Oder doch?&lt;/strong&gt;&lt;/h4&gt;&lt;p&gt;Allerdings bestätigt diese Freundlichkeit auch Leute, die die „falschen“ Fragen stellen, dass sie auf dem richtigen Weg seien:&lt;/p&gt;
&lt;p&gt;&lt;em&gt;„Wie kann ich einen Button absolut 50px vom Rand positionieren.“&lt;/em&gt;&lt;br&gt;
&lt;em&gt;„Gute Idee, hier ist der Code!“&lt;/em&gt; - ohne zu berücksichtigen, dass das auf verschiedenen Viewports ganz andere Wirkungen hat.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;„Kann ich den Abstand zwischen Überschrift und nächster Zeile auf 0 reduzieren.“&lt;/em&gt;&lt;br&gt;
&lt;em&gt;„Tolle Frage - reduziere &lt;code&gt;line-height&lt;/code&gt;, &lt;code&gt;margin&lt;/code&gt; und &lt;code&gt;padding&lt;/code&gt;.“&lt;/em&gt; - ohne zu berücksichtigen, dass so die Lesbarkeit leidet.&lt;/p&gt;
&lt;p&gt;Und hier hat menschliche Kommunikation (z.B. im SELF-Forum) einen großen Nachteil: Fragen für die KI werfen immer eine „fertige“ Antwort aus. Fragenden ohne Fachwissen reicht das oft aus und sie werden das nicht mit &lt;em&gt;prompts&lt;/em&gt; nachschärfen.&lt;/p&gt;
&lt;p&gt;Menschen mit Fachwissen können mit solch ungenau formulierten Fragen oftmals nichts anfangen und reagieren unwirsch oder stellen erst einmal unfreundlich klingende Fragen, wie &lt;em&gt;„Was willst du denn erreichen?“&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Verständlich, dass man sich (oder seine Ideen) auf seinen ersten Schritten in der Webentwicklung nicht ständig in Frage gestellt sehen möchte. Allerdings führt diese Vorgehensweise eben oft nur zu halbgaren Lösungen.&lt;/p&gt;
&lt;p&gt;ChatGPT liefert eine Lösung, die Neulinge wahrscheinlich nicht in Anspruch nehmen.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;✅&lt;em&gt;Wenn du möchtest, kann ich dir auch erklären:&lt;br&gt;
✨ wie man KI so promptet, dass sie kein Lob gibt
&lt;/p&gt;
&lt;p&gt;Sag einfach Bescheid!&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4&gt;&lt;strong&gt;Was können wir Menschen tun?&lt;/strong&gt;&lt;/h4&gt;&lt;p&gt;Als jemand, der im Bildungswesen täglich mit Menschen arbeitet, habe ich begonnen, bei Fragen und Wortmeldungen wieder öfter mit einer positiven Verstärkung zu antworten.&lt;/p&gt;
&lt;p&gt;Bei jedem Thema sollten wir bewusst machen, dass gute Lösungen nur mit guten Fragestellungen erreicht werden und diese Ziele transparent machen. Deshalb ist das Oberthema des diesjährigen Adventskalenders nicht die &lt;strong&gt;eine&lt;/strong&gt; fertige Lösung, sondern der Blick auf allgemeingültige Prinzipien.&lt;/p&gt;
&lt;p&gt;Wichtiger als kurze Frage- und-Antwort-Runden im Forum ist direkter Kontakt im &lt;em&gt;real-life&lt;/em&gt;, den wir leider nur einmal im Jahr haben (&lt;a href=&quot;https://forum.selfhtml.org/events/14&quot; rel=&quot;noopener noreferrer&quot;&gt;nächstes Jahr in Halle/Saale&lt;/a&gt;), sowie unsere &lt;a href=&quot;https://forum.selfhtml.org/self/2025/nov/03/stammtisch-am-mittwoch/1822671#m1822671&quot; rel=&quot;noopener noreferrer&quot;&gt;wöchentlichen Stammtische auf SenfCall&lt;/a&gt;, zu denen jeder eingeladen ist.&lt;/p&gt;
&lt;p&gt;Ich wünsche allen einen ruhigen und friedlichen 2. Advent und dass wir ELIZA (und ihre künstlichen Freunde) ruhig auf die 3, 4 oder gar noch weiter nach hinten setzen.&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://de.wikipedia.org/wiki/ELIZA&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;ELIZA&lt;/a&gt; (de.wikipedia.org) &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://presse.wdr.de/plounge/wdr/programm/2025/12/20251201_kuenstliche_naehe.html&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Künstliche Nähe / Doku über KI, Vertrauen und Abhängigkeit&lt;/a&gt; von Christian Schiffer, wdr.de &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/01/1-adventskalender-2025</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>vorstand@selfhtml.org</email>
    </author>
    <published>2025-12-01T16:39:23Z</published>
    <updated>2025-12-01T16:39:23Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/dec/01/1-adventskalender-2025#m1823069" rel="alternate" type="text/html"/>
    <title>Adventskalender 2025</title>
    <content type="html">&lt;p&gt;Auch dieses Jahr hatten wir eigentlich vor, einen Adventskalender anzubieten, überlegten aber lange, auf welchem Gebiet wir mit den &lt;em&gt;Language Learning Models&lt;/em&gt; überhaupt noch mithalten können.&lt;/p&gt;
&lt;p&gt;Viele Fragen im Forum drehen sich nicht mehr um &lt;em&gt;best practices&lt;/em&gt;, sondern wie man eben &lt;em&gt;diesen &lt;strong&gt;einen&lt;/strong&gt;&lt;/em&gt; Abstand reduzieren könne.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;„Liebes SELFHTML, ich habe inzwischen in KI einige Anfragen […] gestellt.&lt;br&gt;
[…]&lt;br&gt;
Da ich meine Anwendung schnell realisieren möchte, ohne stundenlang oft ausschweifenden Text in Selfhtml lesen zu müssen, werde ich mich (sic) jetzt tatsächlich von KI helfen lassen.“&lt;/em&gt;&lt;br&gt;
&lt;a href=&quot;https://forum.selfhtml.org/self/2025/nov/15/fragen-zum-hamburger-button/1822959#m1822959&quot; rel=&quot;noopener noreferrer&quot;&gt;Gabriele am 22.11.2025&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Braucht es da überhaupt noch einen Adventskalender mit Links zu Beispielen und &lt;em&gt;ausschweifenden&lt;/em&gt; Tutorials?&lt;/p&gt;
&lt;h3&gt;Buttons mit KI erzeugen - und hinterher ändern?&lt;/h3&gt;&lt;p&gt;Es ist kein Problem ein LLM mit der Erzeugung des CSS für einen Button zu beauftragen. Die KI lobt uns für unsere gute Idee, durchforstet in Sekunden bestehende Webseiten und Tutorials und spuckt uns dann das Ergbenis aus.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;„Und siehe, es war gut!“&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Erst, wenn ich dieses CSS verändern möchte, stehe ich erneut vor der Wahl: Soll ich mich in den Code einarbeiten oder erneut die KI fragen?&lt;/p&gt;
&lt;p&gt;Ein intelligent aufgebauter Button kann mit einem Handgriff verändert werden, sodass spätestens beim 2. Mal der eigene Code schneller aus das Ergebnis aus dem Netz ist.&lt;/p&gt;
&lt;p&gt;→ &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Formulare/Gestaltung_mit_CSS#Magic_Numbers&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Wartungsarmes CSS am Beispiel eines Buttons&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Fundamentale Programmier- und Software-Design-Prinzipien&lt;/h3&gt;&lt;p&gt;Beim Programmieren geht es nicht nur darum, dass ein Programm oder ein CSS--Schnipsel funktioniert. Gute Software soll auch verständlich, erweiterbar und wartbar sein. Genau dabei helfen grundlegende Programmier- und Design-Prinzipien.&lt;/p&gt;
&lt;p&gt;Diese Prinzipien helfen dabei, sauberen Code zu schreiben, der leichter zu verstehen, zu testen und zu erweitern ist. Wer sie früh lernt und anwendet, programmiert langfristig effizienter und mit weniger Frust.&lt;/p&gt;
&lt;p&gt;In den nächsten Tagen bis Weihnachten werden wir versuchen, Prinzipien und &lt;em&gt;&lt;strong&gt;best practices&lt;/strong&gt;&lt;/em&gt;  kurzweilig und interessant zu präsentieren, die es Programmierern und Entwicklern ermöglichen, bessere und nachhaltigere Ergebnisse zu erzielen.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/f8fa7388-cedb-11f0-afcd-9c6b003e9157.svg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/f8fa7388-cedb-11f0-afcd-9c6b003e9157.svg&quot; alt=&quot;Schriftzug SELFHTML mit Logo und zwei Elfen&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Und hier geht&apos;s endlich zum&lt;br&gt;
&lt;a href=&quot;https://forum.selfhtml.org/advent/2025&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;strong&gt;Adventskalender 2025&lt;/strong&gt;&lt;/a&gt;!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/nov/30/blue-beanie-day</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-11-30T08:47:15Z</published>
    <updated>2025-11-30T08:47:15Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/nov/30/blue-beanie-day#m1823050" rel="alternate" type="text/html"/>
    <title>Blue Beanie Day</title>
    <content type="html">&lt;p&gt;Wie jedes Jahr wird heute am 30.11.2025 der &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Blue_Beanie_Day&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Blue Beanie Day&lt;/strong&gt;&lt;/a&gt; gefeiert.&lt;/p&gt;
&lt;p&gt;Ziel des Tages ist, an Webstandards und barrierefreies Internet zu erinnern.&lt;/p&gt;
&lt;p&gt;Ist euer &lt;em&gt;Dark Mode&lt;/em&gt; wirklich augenfreundlicher oder sind die Kontraste zu gering?&lt;/p&gt;
&lt;p&gt;Das könnte man mit den &lt;a href=&quot;https://wave.webaim.org/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;WAVE&lt;/strong&gt; Web Accessibility Evaluation Tools&lt;/a&gt; testen.&lt;/p&gt;
&lt;p&gt;Sind unsere Texte und besonders Formulare wirklich verständlich? Auch für Nicht-Profis und Gelegenheits-Nutzer?&lt;/p&gt;
&lt;p&gt;Und der Dauerbrenner - sind &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Einbindung_mit_img#Alternativtext&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Alternativ-Texte&lt;/a&gt; zu den Bildern wirklich aussagekräftig?&lt;/p&gt;
&lt;p&gt;Wem noch ein weiterer Aspekt auf den Nägeln brennt, kann das ja in die Kommentare schreiben!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/nov/16/anekdote-mein-macbook-ist-kaputt</id>
    <author>
      <name>Bertie</name>
      <uri>https://bertie.ch</uri>
    </author>
    <published>2025-11-16T08:57:40Z</published>
    <updated>2025-11-16T08:57:40Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/nov/16/anekdote-mein-macbook-ist-kaputt#m1822860" rel="alternate" type="text/html"/>
    <title>Anekdote &quot;Mein MacBook ist kaputt!&quot;</title>
    <content type="html">&lt;p&gt;&lt;strong&gt;&quot;Hilfe, ich glaub&apos; mein MacBook ist kaputt, ich kann nicht bestellen!&quot;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Meine Schwiegermutter tönt am Telefon sehr verärgert. Vor Ihrer Pensionierung hatte sie in einer Behörde Jahre am Bildschirm gearbeitet, ist heute digital gut ausgestattet mit MacBook / iPad / iPhone.&lt;/p&gt;
&lt;p&gt;&quot;Ich kann diesen Haken nicht weg klicken, aber ich will doch mein glutenfreies Brot nicht am anderen Ende der Schweiz abholen gehen!&quot;&lt;/p&gt;
&lt;p&gt;Ich sehe mir das per Fernwartung an:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/4e40e21a-c2c9-11f0-822f-9c6b003e9157.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/4e40e21a-c2c9-11f0-822f-9c6b003e9157.jpg?size=medium&quot; alt=&quot;Screenshot eines Checkout Warenkorbs, es gibt einen Haken und zwei Optionen, aber scheinbar kein Feld, um die zweite Option auszuwählen&quot; title=&quot;Checkout Warenkorb&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&quot;Klick&apos; einfach auf den unteren Haken&quot; - &quot;Was, warum? &lt;strong&gt;Ach so!!!&lt;/strong&gt;&quot;.&lt;/p&gt;
&lt;p&gt;Ich lege den Hörer auf und sehe mir im &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Seiteninspektor&lt;/a&gt; den Code an.
Natürlich sind das &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Formulare/Auswahllisten#Radio-Buttons&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Radio-Buttons&lt;/a&gt;:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/69f3a3c6-c2c9-11f0-9198-9c6b003e9157.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/69f3a3c6-c2c9-11f0-9198-9c6b003e9157.jpg?size=medium&quot; alt=&quot;Screenshot der Seite im Seiteninspektor: zwei Radio-Buttons&quot; title=&quot;Seiteninspektor&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Ohne CSS sähen die so aus:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/8cfb121e-c2c9-11f0-a488-9c6b003e9157.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/8cfb121e-c2c9-11f0-a488-9c6b003e9157.jpg?size=medium&quot; alt=&quot;zwei Radio-Buttons - ohne CSS klar erkennbar!&quot; title=&quot;ohne CSS&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;… und meine Schwiegermutter hätte vermutlich problemlos alleine bestellen können.&lt;/p&gt;
&lt;p&gt;Siehe auch:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Formulare/Auswahllisten&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Formulare/Auswahllisten&lt;/strong&gt;&lt;/a&gt;&lt;br&gt;
Wie man Radio-Buttons und Checkboxen mit CSS so formatieren kann,&lt;br&gt;
dass Nutzer sie einfach bedienen können.&lt;/li&gt;
&lt;/ul&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/nov/10/vorstandstreffen-in-hannover</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-11-10T18:02:58Z</published>
    <updated>2025-11-10T18:02:58Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/nov/10/vorstandstreffen-in-hannover#m1822783" rel="alternate" type="text/html"/>
    <title>Vorstandstreffen in Hannover</title>
    <content type="html">&lt;p&gt;Seit Mai hatten wir monatliche Treffen über Senfcall und sonst nur gemailt, jetzt sollte eine ordentliche Übergabe gemacht werden und dazu war ein persönliches Treffen notwendig. Dafür trafen wir uns letztes Wochenende in den Hannover Docks im &lt;a href=&quot;https://www.backwerk.bio/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Backwerk&lt;/a&gt; und konnten einiges anpacken.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/3464ca76-bf7e-11f0-a78a-9c6b003e9157.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/3464ca76-bf7e-11f0-a78a-9c6b003e9157.jpg?size=small&quot; alt=&quot;Drei Laptops, Kaffee und Kuchen im Backwerk in Hannover&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;
Vieles was wir besprochen haben, hat erst einmal keine Auswirkungen nach außen, dient aber der Erleichterung für uns.&lt;/p&gt;
&lt;p&gt;Ich hatte zwar eine Kiste mit allen Aktenordnern mitgebracht (seit der Vereinsgründung 2004 hat sich einiges angesammelt), das war letztendlich aber doch nicht nötig, weil wir künftig unsere Dokumente bei NextCloud aufbewahren, wo wir vom Vorstand alle gemeinsam zugreifen können. Es kann von den anderen Vorständen eingesehen werden, wer Änderungen vorgenommen hat.&lt;/p&gt;
&lt;p&gt;Die Kassenprüfung wird entweder als PDF angezeigt oder dann passend ausgedruckt.&lt;/p&gt;
&lt;p&gt;Großes Thema in Mannheim im Mai 2025 war die Frage des Web-Hostings. Hier und in anderen Bereichen haben wir uns gekümmert und die Verträge und Zugänge so aktualisiert, dass alle vom Vorstand Zugang haben. Manitu stellt uns einen Server zum Testen zur Verfügung.&lt;/p&gt;
&lt;p&gt;Erstes Projekt wird entgegen unser bisherigen Planung nicht die Mediawiki-Installation, sondern ein neuer Mailserver. Wir haben – historisch gewachsen -  fast 100 Mailkonten, aber viel weniger Menschen, die diese Mails bearbeiten,  leiden unter einer Flut von Spam und wollen doch nur in Ruhe arbeiten.&lt;/p&gt;
&lt;p&gt;&lt;quote&gt;&lt;i style=&quot;color:grey&quot;&gt;&gt; Ich würde heutzutage immer davon abraten, einen eigenen Mailserver zu betreiben.&lt;/i&gt;&lt;/quote&gt;&lt;/p&gt;
&lt;p&gt;Das tun wir aktuell und geplant ist es, das eben nicht mehr zu machen, sondern eine Fertiglösung von Manitu zu nutzen. Das hat keine sichtbaren Änderungen nach außen, dient aber der Erleichterung für uns.&lt;/p&gt;
&lt;p&gt;Generell kann man sagen, dass es immer besser ist, sich bei einem Kaffee und Kuchen (danke f��r das Büffet!) persönlich zu treffen, als eine Videokonferenz durchzuführen.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/511daa0c-bf7e-11f0-87f2-9c6b003e9157.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/511daa0c-bf7e-11f0-87f2-9c6b003e9157.jpg?size=small&quot; alt=&quot;Drei warme Brüder&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;
&lt;em&gt;Nicht nur heiße Luft, sondern Energie liefern die 3 warmen Brüder!&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Aus diesem Grund kam auch das nächste SELF-Treffen zu Sprache. Der Termin wurde ja bereits festgesetzt - der Ort hat sich geändert:&lt;/p&gt;
&lt;p&gt;Wir treffen uns am 24.-26.04.2025 in
&lt;a href=&quot;https://forum.selfhtml.org/events/14&quot;&gt;&lt;strong&gt;Halle (Saale)&lt;/strong&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Ich konnte auf dem Rückweg die Räumlichkeiten in Augenschein nehmen und bin begeistert. Weitere Informationen werden zeitnah erfolgen!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/aug/07/wrap-my-text-but-pretty-please</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2025-08-07T09:12:45Z</published>
    <updated>2025-08-07T09:12:45Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/aug/07/wrap-my-text-but-pretty-please#m1821289" rel="alternate" type="text/html"/>
    <title>Wrap my Text, but pretty please!</title>
    <content type="html">&lt;p&gt;Zeilenumbruch ist ein längst gelöstes Problem. Oder doch nicht?&lt;/p&gt;
&lt;p&gt;Das Problem bei Zeilenumbrüchen ist, dass man sie nicht immer dem Browser überlassen möchte. Bei normalem Fließtext, wie in diesem Absatz, ist das kein Problem und da macht er es auch – zumeist – hübsch genug, aber es gibt auch Situationen, wo der Standardumbruch einem Schriftsetzer die Schamröte ins Gesicht treibt.&lt;/p&gt;
&lt;p&gt;Es ist schwierig, die Problematik im Browser vorzuführen, weil ich den von Dir genutzten Font nicht kenne. Aber versuchen wir es einmal. Ein Problem ist beispielsweise, wenn im Text sehr lange Wörter auftauchen, wie der Donaudampfschifffahrtskapitänmützenbandorden. Der kann zu einer sehr kurzen Textzeile führen und ein weißes Loch in den Absatz reißen. Ein &quot;hübscher&quot; Umbruch würde versuchen, die Zeilen davor etwas früher umzubrechen und damit mehr Text vor den Donau...orden zu bringen.&lt;/p&gt;
&lt;p&gt;Genauso unschön ist es, wenn das letzte Wort eines Absatzes alleine auf seiner Zeile gesetzt wird.&lt;/p&gt;
&lt;p&gt;Hier hilft die seit Mai 2024 als Baseline gesetzte CSS Eigenschaft &lt;code&gt;text-wrap&lt;/code&gt; (&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Text-wrap&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;ausführlich hier im Wiki&lt;/a&gt;) weiter. Ihr Normalwert ist &lt;code&gt;auto&lt;/code&gt;, was dem herkömmlichen Umbruch entspricht.&lt;/p&gt;
&lt;p&gt;Des weiteren kennt sie den Wert &lt;code&gt;balance&lt;/code&gt;, was beispielsweise bei Tabellenüberschriften helfen kann. Warum sollte eine Spaltenüberschrift beispielsweise als&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;	Vertriebsumsätze im  
	September
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;gesetzt werden? Schöner ist&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;	Vertriebsumsätze  
	im September
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Das kann man auch durch ein manuelles &lt;code&gt;&lt;br&gt;&lt;/code&gt; erreichen, sicher. Aber dann muss man ständig darauf aufpassen. Mit &lt;code&gt;text-wrap: balance;&lt;/code&gt; kümmert sich der Browser darum.&lt;/p&gt;
&lt;p&gt;Und das Donau...orden-Problem könnte sie auch lösen. Ja, sicher, der erste Lösungsansatz muss sein, das Wortmonster großzügig mit &lt;code&gt;&amp;shy;&lt;/code&gt; anzureichern, um Trennchancen zu eröffnen, oder generell mit &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/hyphens&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;hyphens&lt;/a&gt; die automagische Silbentrennung einzuschalten.&lt;/p&gt;
&lt;p&gt;Durch einen etwas knapperen Umbruch der ersten Zeilen entsteht dies:&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Es ist schwierig, die Problematik im Browser vorzuführen, weil ich den von Dir genutzten&lt;br&gt;
Font nicht kenne. Aber versuchen wir es einmal. Ein Problem entsteht beispielsweise&lt;br&gt;
dann, wenn im Vorführtext viel zu lange Wörter auftauchen, wie der Donaudampfschifffahrtskapitänmützenbandorden. Der kann zu einer sehr kurzen Textzeile führen und ein weißes Loch in den Absatz reißen. Ein &quot;hübscher&quot; Umbruch würde versuchen, die Zeilen davor etwas früher umzubrechen und damit mehr Text vor den Donau...orden&lt;br&gt;
zu bringen.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Viel besser ist es nicht, aber das Loch ist immerhin etwas kleiner geworden (und ja, ich musste den Text leicht abändern, weil die Kursivschrift eine andere Laufweite hat als die Normalschrift  )&lt;/p&gt;
&lt;p&gt;Leider ist pretty-Formatierung aufwändig und die Browser geben sich nicht unbedingt die größte Mühe damit. Die gezeigte „Lückenverkleinerung“ wird beispielsweise von Chrome nicht automatisch ausgeführt. Dass das Wort &quot;zu&quot; in der letzten Zeile landet statt in der vorletzten – wo Platz dafür wäre – hingegen schon.&lt;/p&gt;
&lt;p&gt;Im verlinkten Wiki-Artikel befindet sich eine kleine Demonstration, wie dein Browser auf pretty reagiert. Spiele etwas mit der Fensterbreite, um zu sehen, ob etwas passiert, und was passiert.&lt;/p&gt;
&lt;p&gt;Vielen Dank an Gunnar Bittersmann, dass er meine Nase auf diese Eigenschaft gestoßen hat.  &lt;/p&gt;
&lt;p&gt;&lt;em&gt;Rolf&lt;/em&gt;&lt;/p&gt;
&lt;div class=&quot;signature&quot;&gt;-- &lt;br&gt;
sumpsi - posui - obstruxi
&lt;/div&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/jul/18/offline-wiki-juli-2025</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2025-07-18T19:21:31Z</published>
    <updated>2025-07-18T19:21:31Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/jul/18/offline-wiki-juli-2025#m1820939" rel="alternate" type="text/html"/>
    <title>Offline-Wiki Juli 2025</title>
    <content type="html">&lt;p&gt;Immerhin nur 15 Monate später gibt es eine Neuauflage des &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML/Offline-Wiki&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Offline-Wikis&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Das Komplettpaket ist weiter angewachsen, auf 466 MB Download und 700 MB auf der Festplatte. Während der Installation wird der Platz für Download-Dateien UND Installation benötigt.&lt;/p&gt;
&lt;p&gt;Die Bilder belegen den meisten Speicherplatz. Das ist vor allem den neuen SVG Bildern geschuldet, für die das Wiki automatische Vorschaubilder erzeugt. Die nutzen wir zwar normalerweise nicht, aber wir können es dem Wiki auch nicht abgewöhnen.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Rolf&lt;/em&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/jun/02/matthias-scharwies-selfhtml-wird-30-das-muss-gefeiert-werden</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-06-02T04:23:28Z</published>
    <updated>2025-06-02T04:23:28Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/jun/02/matthias-scharwies-selfhtml-wird-30-das-muss-gefeiert-werden#m1820300" rel="alternate" type="text/html"/>
    <title>SELFHTML wird 30 – das muss gefeiert werden!</title>
    <content type="html">&lt;p&gt;Bereits 2020 wollten wir uns in Mannheim treffen und das 25-jährige Jubiläum feiern. Wegen Corona wurde der Frühjahrstermin in den Oktober geschoben, die Inzidenzen sorgten aber trotzdem für Absagen.&lt;/p&gt;
&lt;p&gt;Nun wollten wir es fünf Jahre später noch einmal wagen. Mannheim war erneut gesetzt, um Stefan Münz zumindest entfernungsmäßig entgegen zu kommen.&lt;/p&gt;
&lt;h3&gt;Freitag&lt;/h3&gt;&lt;p&gt;Am Freitag trafen wir nacheinander in der Jugendherberge direkt am Rhein ein. Um 15:00 lud uns Gunnar in seinen Tech Talk ein, in dem er seinen Kollegen den Verein und sein &lt;a href=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:2025-Quiz.html&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Jubiläums-Quiz&lt;/a&gt; vorstellte.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; Vielen Dank!&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/73dc65ce-3f68-11f0-a17c-9c6b00263d9f.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/73dc65ce-3f68-11f0-a17c-9c6b00263d9f.jpg?size=medium&quot; alt=&quot;Blick über den Rhein nach Ludwigshafen&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Nach und nach trafen unsere Gäste ein und erzählten von ihren Anreise-Abenteuern. Zu Acht gingen wir ins Zwei Hasen, dem wir noch eine Chance gaben. Die telefonische Reservierung hatte geklappt – die ursprünglich zu lang erscheinende Tafel füllte sich bald so sehr, dass ein zweiter Tisch nötig wurde. Als Patrick aus der Pfalz fragte, wer denn am längsten dabei sei, musste Stefan Farbe bekennen, dass er seit Juni 1995 dabei sei. Patrick meinte ungläubig: „Bist du dann Stefan Münz?“ Stefan bliebt ausgesuchter Gesprächspartner und wurde für sein Werk gefeiert. Neben einer Vorstellungsrunde gab es viel Gelegenheit für Smalltalk und Fachsimpeleien.&lt;/p&gt;
&lt;p&gt;Fazit: KI und LLMs können keine Gespräche mit Freunden ersetzen!&lt;/p&gt;
&lt;h3&gt;Samstag&lt;/h3&gt;&lt;p&gt;„Für die vernetzende Technik ist gesorgt“ schien mir so selbstverständlich, dass ich es gar nicht mehr erwähnt hatte, bis ich das Fehlen eines USB-C-auf-HDMI-Adapter bemerkte, den mir dann Ben dankenswerterweise zur Verfügung stellte.&lt;/p&gt;
&lt;h4&gt;Mitgliederversammlung&lt;/h4&gt;&lt;p&gt;Um 10:00 begrüßte ein Giveaway in Form eines &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Spickzettel&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;DIN A3-Spickzettel&lt;/a&gt;s zum Grid Layout alle Teilnehmer. Wie im &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2025&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Protokoll&lt;/a&gt; festgehalten, konnten wir 2024 viele Projekte wie Logo und Wort-Bildmarken, Personas für unsere Zielgruppe und die Cards für eine bessere Wiki-Struktur sowie das Makeover fertigstellen und umsetzen, manches – für den Vorstand wichtigeres – musste jedoch liegenbleiben.&lt;/p&gt;
&lt;p&gt;Mit Julius Cordes sind wir nun im Vorstand wieder komplett und hoffen, jetzt das Hosting und die überfällige Modernisierung der Technik angehen zu können.&lt;/p&gt;
&lt;h4&gt;&lt;strong&gt;Un&lt;/strong&gt;conference&lt;/h4&gt;&lt;p&gt;Nach dem Mittagessen ging&apos;s dann zu unseren Talks.&lt;/p&gt;
&lt;p&gt;Steve Weidel hat ein Video erstellt, das zeigt, wie unser HTML-Einstiegs-Tutorial mit einem Screenreader klingt. Bemerkenswert war dabei weniger, wie gut VoiceOver Texte vorlesen kann, sondern vor allem, wie blinde Nutzer mithilfe des sogenannten Rotors gezielt alle Überschriften, Links oder Bilder aufrufen können. Dabei wurde deutlich, dass die Demo-Seite eigentlich zu wenige Überschriften enthält. Das Video wird demnächst im Wiki allen zur Verfügung gestellt.&lt;/p&gt;
&lt;p&gt;Dass Barrierefreiheit neben hohen Kontrasten auch verständlichen Text umfasst, referierte Patrick, dessen Kunden aufgrund einer unklaren Preisstrutkur, die selbst ein LLM nicht versteht, plötzlich aus den Rankings flogen.&lt;/p&gt;
&lt;p&gt;Rolf stellte uns vor, wie SELFHTML die Mediawiki-Installation mit einem eigenen Skin anpasst. So sind unsere Skripte zum Teil weiter als die derzeit verwendete Mediawiki-Version erlaubt; dabei findet sich innerhalb des Skins nur der Loader für dieses Skript, dass dann außerhalb der Wiki-internen Skripte läuft.&lt;/p&gt;
&lt;p&gt;Zum Schluss präsentierte Gunnar seine Kuckucksuhr. Ausgangspunkt war die Frage im Forum, wie man 5 Buttons äquidistant auf einer Kreislinie verteilt. Er zeigte, dass „man da nicht mit JavaScript raufballern muss“, sondern dass modernes CSS erlaubt, solche Berechnungen ohne magic numbers auszuführen. Die Ziffern sind in einer Liste und werden mit CSS in arabisch oder römischen Ziffern notiert. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h4&gt;Stadt-Wand-Kunst&lt;/h4&gt;&lt;p&gt;Im Wettlauf gegen die Uhr fuhren wir nun zum neuen Meßplatz, um unseren Rundgang durch die Neckarstadt zu beginnen. Dabei führte uns Mme Thuault-Pfähler kenntnisreich durch die Wandmalereien der Neckarstadt. Eine Zeitlang lenkte uns ein Storch ab, dazwischen war immer wieder das Zwitschern der Papageien zu hören.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/90cf8a1c-3f68-11f0-9dcd-9c6b00263d9f.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/90cf8a1c-3f68-11f0-9dcd-9c6b00263d9f.jpg?size=medium&quot; alt=&quot;Storch&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/a1c5d768-3f68-11f0-aa6c-9c6b00263d9f.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/a1c5d768-3f68-11f0-aa6c-9c6b00263d9f.jpg?size=medium&quot; alt=&quot;Wandmalerei in MA-Neckarstadt; Mensch läuft durch Ziffern einer Uhr&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Abends kehrten wir, wie vor 5 Jahren, wieder im LongDream ein, wobei es in der Zwischenzeit einen Eigentümerwechsel gab. Fachkräftemangel überall: Es gab keinen Barkeeper, sodass wir auf Alkoholisches verzichten mussten, was angesichts der vielen Mocktails zu verkraften war.&lt;/p&gt;
&lt;h3&gt;Sonntag&lt;/h3&gt;&lt;p&gt;Waren am Samstag bereits einige neue Gesichter gegenüber dem Freitag zu sehen, gab es beim Frühstück erneut ein großes Hallo, als sich uns Norbert vorstellte. Gerade aus dem Urlaub zurückgekommen, wollte er uns aber am letzten Tag noch kennen lernen.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/9a3482f6-3f68-11f0-b287-9c6b00263d9f.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/9a3482f6-3f68-11f0-b287-9c6b00263d9f.jpg?size=medium&quot; alt=&quot;Uhren und Zifferblätter im Technoseum&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Wir fuhren ins Technoseum und gingen in Kleingruppen durch die weitläufige Ausstellung; wobei sich immer wieder gute Gespräche über Exponate – aber auch die Themen der vergangenen Tage ergaben.&lt;/p&gt;
&lt;p&gt;Ebenfalls in Kleingruppen ging es dann zum Bahnhof, wo wir versprachen, uns bald wiederzusehen.&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Die &lt;a href=&quot;https://noti.st/gunnarbittersmann/zN18na/30-jahre-selfhtml&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Slides (quadratisch wegen Mannheim) und Links zu Ressourcen&lt;/a&gt; gibt’s auf Notist.
Dies ist nach 2005 und 2016 das dritte Quiz. Siehe auch:
&lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz#Anwendungsbeispiele&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz &lt;/a&gt; &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://noti.st/gunnarbittersmann/550bdY/where-no-one-has-gone-before-the-cuckoo-clock-incident&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Slides, Links zu Ressourcen und etlichen Codepens&lt;/a&gt; gibt’s wieder auf Notist. &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/jun/02/30-dreissig-jahre</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-06-02T04:04:18Z</published>
    <updated>2025-06-02T04:04:18Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/jun/02/30-dreissig-jahre#m1820299" rel="alternate" type="text/html"/>
    <title>30 (Dreißig) Jahre?!?</title>
    <content type="html">&lt;p&gt;Gastbeitrag von Thomas J Sebestyen&lt;/p&gt;
&lt;p&gt;30 (Dreißig) Jahre?!?&lt;/p&gt;
&lt;p&gt;Sind das wirklich schon 30 Jahre?&lt;/p&gt;
&lt;p&gt;Unfassbar!&lt;/p&gt;
&lt;p&gt;Was aber für mich noch unfassbarer ist:  ich war ein Teil davon.&lt;/p&gt;
&lt;p&gt;Meine Zeit bei SELFHTML beginnt im September 1998 mit einer Mail und mit einer
Frage an Stefan (Münz) und seiner Antwort: „Es gibt bei mir keinen Mail-Support mehr für Fragen, weil es einfach insgesamt zu viele Fragen geworden sind.“ Und mit einem Link auf das damals gerade einmal ein paar Monate alte Forum.&lt;/p&gt;
&lt;p&gt;Ich war zuerst nur Leser im Forum, dann – nach und nach – habe ich Antworten
gegeben und bereits im 1999, als am Schliersee das erste SELF-Treffen stattfand, war ich auch dabei. Es gab bereits den Bereich „Selfaktuell“ als ich dann im Januar 2000 eine Mail mit dem Betreff „Einladung in den SELFDEVELOPER-Bereich“ von Stefan erhielt. Das war quasi der „offizielle“ Beginn des SELFHTML Redaktionsteams.&lt;/p&gt;
&lt;p&gt;Die Zeit tat, was sie heute auch noch macht: sie vergeht.&lt;/p&gt;
&lt;p&gt;Viele, sehr viele Diskussionen im Forum,  manche &lt;em&gt;„sophisticated“&lt;/em&gt; manche heftig. Forum-Schließungen, Initiativen wie  „KidsHTML“, neue Versionen von SELFHTML, die Gründung des Vereins in 2004, neue Forum-Software und nicht zuletzt das Wiki.&lt;/p&gt;
&lt;p&gt;Ja … „DAS Wiki“ und eine „Test-Version“ im 2006. Das war auf meinem privaten Web-Server. Eigentlich wollte ich damals nur das &quot;MediaWiki&quot; in SELFHTML-Design als Anregung zeigen. Dass &quot;heise&quot; dann gleich darüber berichtet hat, war unerwartet. Es war gleichzeitig witzig und erschreckend, wie schnell sich die Information herumgesprochen hat.&lt;/p&gt;
&lt;p&gt;Was soll ich noch dazu sagen? Ihr habt ja bereits in der &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Vereins-Chronik&lt;/a&gt; alles sehr  gut
zusammengetragen vom Versuch mit „SDML“ bis hin zum zweiten Wiki. Da war ich noch dabei, aber das Jahr 2010 markiert auch schon meinen leisen Ausstieg aus SELFHTML. Nach 12 Jahren war die Luft und Lust an der „Sache“ für mich dann irgendwie auch zu Ende.&lt;/p&gt;
&lt;p&gt;Was mich aber mit Freude und ja, auch mit etwas Stolz erfüllt, ist, dass SELFHTML trotz des mehrfach angestimmten Totengesangs immer noch sehr lebendig ist und dass „die nächste Generation“ mit den Idealen, die auch wir hatten, an SELFHTML weiterarbeitet.&lt;/p&gt;
&lt;p&gt;Thomas J Sebestyen&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/may/25/das-internet-weitererzahlen-selfhtml-wird-30</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-05-25T03:40:34Z</published>
    <updated>2025-05-25T03:40:34Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/may/25/das-internet-weitererzahlen-selfhtml-wird-30#m1820149" rel="alternate" type="text/html"/>
    <title>Das Internet weitererzählen - SELFHTML wird 30!</title>
    <content type="html">&lt;p&gt;Gastbeitrag von Stefan Münz:&lt;/p&gt;
&lt;p&gt;Mittlerweile hat nicht nur SELFHTML eine lange Tradition - nein, auch meine Beiträge zu den Jubiläen werden immer mehr. Vor zwanzig Jahren, zum zehnten Geburtstag (Kindergeburtstag, ha!), beschrieb ich, wie ich in den 90ern über CompuServe ins Internet fand, und wie ich die erste wilde Zeit im Web als Erklärbär erlebte (&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Wie_alles_begann_%E2%80%93_Stefan_M%C3%BCnz_erz%C3%A4hlt&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Wie alles begann&lt;/a&gt;).&lt;/p&gt;
&lt;p&gt;Zehn Jahre später - zu diesem Zeitpunkt war ich selber schon längst nicht mehr aktiv beim Projekt - hatte sich selbiges dank engagierter Leute gerade aus einer großen Existenzkrise befreit, wodurch sich die Überschrift des Jubiläumsartikels von 2015 erklärte (&lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2015/jun/04/totgesagte-leben-laenger-selfhtml-ist-20&quot; rel=&quot;noopener noreferrer&quot;&gt;Totgesagte leben länger - SELFHTML ist 20!&lt;/a&gt;). Auch das viertel Jahrhundert musste natürlich gefeiert werden, wozu ich in einem Artikel Vergleiche zu einer mittlerweile in Ungnade gefallenen Klima-Ikone zog und die großen Plattformen als &quot;Sargnägel des Webs&quot; bezeichnete (&lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2020/jun/04/zusammenhaenge-schaffen-selfhtml-wird-25&quot; rel=&quot;noopener noreferrer&quot;&gt;Zusammenhänge schaffen ‒ SELFHTML wird 25&lt;/a&gt;).&lt;/p&gt;
&lt;p&gt;Damit ist die Kontinuität zur Gegenwart eigentlich schon hergestellt. Denn die Problematik der Plattformen hat sich in den letzten fünf Jahren - das kann man nicht anders sagen - exponentiell verschärft. Waren es seinerzeit noch eher netztopologische und monopolkritische Überlegungen, die mich gegen die großen &quot;walled gardens&quot; argumentieren ließen, so sind die Folgen mittlerweile längst politisch relevant. Allem voran ist da natürlich die Übernahme von Twitter durch Elon Musk zu nennen, der sich in der Folgezeit als deutlich faschistoid entpuppte und durch sein durchgedrehtes Auftreten in der Öffentlichkeit, das mit der Übernahme des Kurznachrichtendienstes begann und ihm ein Megaphon der Superlative verpasste, mit zur Errichtung des antidemokratischen Trump-Regimes beigetragen hat. Es fällt einem aber auch die annullierte Präsidentschaftswahl in Rumänien 2024 ein, als ein in der &quot;offiziellen Öffentlichkeit&quot; weitgehend unbekannter Kandidat namens Călin Georgescu offenbar mit tatkräftiger russischer Unterstützung über TikTok erhebliche Teile der rumänischen Bevölkerung mit einseitigen, populistischen Kurzvideos für sich vereinnahmte.&lt;/p&gt;
&lt;p&gt;In einem spontanen Selbstversuch, den ich im gleichen Jahr unternahm, lernte ich den Sog der TikTok-Welt selbst kennen. Ich registrierte mich dort neu mit einem ebenfalls neuen, nur für diesen Zweck angelegten Google-Konto. Der Algorithmus kannte mich also noch nicht, und auch Google konnte ihm nichts verraten. Zu den ersten Videos, die mir nach dem Aufschlagen dort angeboten wurden, gehörten:&lt;/p&gt;
&lt;p&gt;​&quot;&lt;em&gt;Ich bin trotz aller Warnungen nach Russland ausgewandert und das ist echt toll da jetzt, nicht mehr wie früher, als die Mafia regierte&lt;/em&gt;&quot;.&lt;br&gt;
​&quot;&lt;em&gt;Die 10 Städte in Rheinland-Pfalz mit den meisten Türken&lt;/em&gt;&quot;.&lt;br&gt;
​&quot;&lt;em&gt;AFD zerlegt klimareligiösen Linksradikalen der behauptet Deutschland ist an allem schuld&quot;&lt;/em&gt;.&lt;br&gt;
&lt;em&gt;​&quot;Ein Blick auf die Türklingeltafel eines großen Wohnhauses in Frankfurt, mit lauter Namen, so der Sprecher, die klingen wie Cevapcici&quot;.&lt;/em&gt;&lt;br&gt;
​&quot;&lt;em&gt;Annalena Baerbock hat letztes Jahr 135.000 Euro für Makeup ausgegeben - auf Steuerzahlerkosten&lt;/em&gt;&quot;.&lt;br&gt;
​&quot;&lt;em&gt;Junge Deutschtürken, die zugeben, schon mal kriminell gewesen zu sein&quot;&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;In der Praxis treffen diese Inhalte jedoch eher selten auf Boomer mit Altmedienhintergrund, sondern vorwiegend auf jüngere Menschen, die kein Fernsehen und keine Tageszeitungen mehr kennen, und die oft auch nicht mehr mit den dort gewachsenen journalistischen Standards vertraut sind. Ihre &quot;Weltsicht&quot; speist sich abgesehen vom Lebensalltag in vielen Fällen nur noch aus dem Input von Plattformen wie YouTube, Instagram oder eben Tiktok. Influencer, schnelle Trends und virale Inhalte - alles dosiert von Algorithmen, die vor allem wissen, wie man Menschen triggert.&lt;/p&gt;
&lt;p&gt;Die Situation verstärkt sich aktuell sogar nochmals, da dank der KI-Entwicklungen der letzten und nächsten Jahre immer weniger &quot;echte&quot; Content-Produzierende nötig sind. Man lässt einfach die Large Language Models &quot;träumen&quot;, und KI-basierte Bild- oder Video-Generatoren generieren täuschend echte Deepfakes oder provozierende Sharepics. Wie viel davon wahr ist, interessiert ohnehin kaum jemanden mehr.&lt;/p&gt;
&lt;p&gt;Es wäre allerdings verkehrt, das Problem der Plattformen nur auf Menschen abzuwälzen, denen die Kraft oder der Background fehlt, um sich dem algorithmischen Sog zu entziehen. Der Fall Twitter / X zeigt leider, dass gerade auch viele Prominente und sonst durchaus &quot;geistesstarke&quot; Persönlichkeiten an Klickzahlen und algorithmisch eskalierenden Viraleffekten zu hängen scheinen wie kleine Kinder. Und wenn sie dann endlich vor Elons verseuchter Plattform fliehen, taumeln sie mehr oder weniger schnell in die Fänge der nächsten Plattform. Dazwischen nehmen sie nur dubioses Niemandsland wahr, in dem irgendwelche Freaks siedeln, die etwas von &quot;Augenhöhe&quot; faseln. Dagegen wirkt eine neue Plattform, auf der schnell die alten Influencer-Verhältnisse wiederhergestellt sind, wie eine hippe, junge Großstadt. Das Problem ist nur, dass jede Plattform früher oder später monetarisiert werden muss und dann meist in die Hände irgendwelcher Kapital-Glücksritter fällt.&lt;/p&gt;
&lt;p&gt;Um es mit einem Vergleich zu den 90ern auszudrücken: es ist, als wenn es das Web mit HTML und CSS längst gäbe, aber die meisten wollen lieber alles in Flash haben, weil es da so viel mehr blinkt und funkelt - alle Warnungen in den Wind schlagend, dass das eine proprietäre Blackbox sei, die den geistigen Fortschritt, den HTML und CSS darstellen, geradewegs wieder vernichte.&lt;/p&gt;
&lt;p&gt;Die gute Nachricht aus der Geschichte ist: HTML und CSS im Verbund mit client- und serverseitigem Scripting haben sich letztlich gegen Flash durchgesetzt. Das lässt hoffen, dass &lt;a href=&quot;https://www.w3.org/TR/activitypub/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;ActivityPub&lt;/a&gt; und &lt;a href=&quot;https://www.w3.org/TR/activitystreams-core/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;ActivityStreams&lt;/a&gt; es ihnen im Bereich SocialMedia irgendwann gleichtun werden. Beide Spezifikationen werden sogar ebenfalls vom W3-Konsortium gepflegt, das auch HTML und CSS als offene Standards etabliert hat.&lt;/p&gt;
&lt;p&gt;Beide Spezifikationen beschreiben im Verbund ein Protokoll, ein Datenset und API-Endpoints, wie User eines Internet-Hosts Inhalte für andere User vom gleichen oder anderen Hosts bereitstellen können, wie andere User darauf zugreifen können, und wie all diese User von ihren Hosts aus untereinander agieren können, also z.B. um einander zu folgen, Inhalte zu liken, zu kommentieren oder weiter zu verteilen. Eigentlich sind es nur moderne Varianten älterer Standards. Einer der besten Kenner der Materie, Matthias Pfefferle, &lt;a href=&quot;https://notiz.blog/2024/04/26/activitypub-the-evolution-of-rss/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;erklärt die Zusammenhänge&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Und genauso, wie HTML und CSS im Verbund mit dem HTTP-Protokoll eine &quot;Sphäre&quot; namens World Wide Web begründeten, bilden AcitivityPub und ActivityStreams eine soziale Sphäre, das &lt;a href=&quot;https://digitalcourage.de/digitale-selbstverteidigung/fediverse&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Fediverse&lt;/a&gt;. Es ist genau das, was Elons Plattform-Flüchtlinge auf ihrer Reise als das dubiose Niemandsland mit den Freaks wahrnehmen. Ja - derzeit blinkt und funkelt es dort noch nicht so flashy, obwohl Zugangs-Software wie Mastodon oder Pixelfed immer mehr Verbreitung finden. Und tatsächlich gibt es im Fediverse auch dieses etwas säuerliche Urbewohner-Moralin, über das gerne mal die Nase gerümpft wird, weil es versucht, ein paar Regeln aufzustellen, zum Beispiel die Regel, alle in Postings verwendeten Bilder aus Gründen der Inklusion mit ALT-Texten zu versehen. Das zeigt aber nur, dass es sich eben um eine &quot;soziale&quot; Sphäre handelt, die nicht nur aus dem technischen Part besteht. SocialMedia braucht neben smoother Technik immer auch normative Regulierung - von außen, aber besser noch von innen.&lt;/p&gt;
&lt;p&gt;In der kleinen, aber menschelnden Welt des SELFHTML-Forums hatten wir in den Anfangsjahren, also den späten 90ern, zur technischen Bewältigung des Datenaufkommens ein sogenanntes &quot;Schwanzabschneider&quot;-Script, und zur Regulierung epische selbstbezügliche Diskussionen mit Forumsschließungen als Ultimo Ratio. Seit dieser Frühzeit ist viel passiert. Die tausendfache Menge an Menschen ist mittlerweile im Internet unterwegs, und die meisten von ihnen kommunizieren dort auch.&lt;/p&gt;
&lt;p&gt;Was also braucht es, um sie von den Plattformen weg ins Fediverse zu locken? Neben deutlicherer Aufklärung über die Algorithmen der SocialMedia-Plattformen (mehr Vergleiche zu Drogen und Gehirnwäsche bitte!) und einer ernsthaften (auch politisch geführten) Debatte über notwendige Grenzen des Influencings im Zeitalter der Desinformation benötigt das Gespann der Activity-Spezifikationen innovative Software und technische Lösungen, die noch mehr aus der Sache herausholen als es die bisherigen Anwendungen tun. Um beim Vergleich zu den 90ern zu bleiben: da fühlt sich das Fediverse derzeit noch an, wie mit Mosaic oder Viola im Web unterwegs zu sein, während sich die Plattformen gerade in der dritten Runde des Browserkriegs zwischen Netscape und Internet Explorer befinden. Ein &quot;Fediverse 2.0&quot;, das jenseits der Dotcom-Blase aufsetzt, wäre deshalb der Wunsch. Mit so vergleichbar coolen Sachen, wie es damals im Web 2.0 die neu aufkommenden Blogs, Feeds, Wikis und Social-Bookmarking-Dienste waren. Mit mehr intelligenter Server- und Software-Power zwischen den Fediverse-Instanzen. Mehr Gefundenes beim Suchen, keine unvollständig auf die eigene Instanz geladenen Diskussionen mehr, und mehr Echtzeit-Feeling. Für all das braucht es aber auch flammende Developer-Herzen, und die wiederum brauchen vielleicht erst mal eine Quelle der Inspiration, so wie damals SELFHTML für viele eine war. Eine Art SELFACTIVITY-Projekt. Vielleicht kann ja sogar SELFHTML selbst noch einmal zu einer solchen Quelle der Inspiration für Visionäre und Startups werden. Mit dem &lt;a href=&quot;https://wiki.selfhtml.org/wiki/ActivityPub&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Artikel über ActivityPub&lt;/a&gt; ist ja bereits ein Anfang gemacht!&lt;/p&gt;
&lt;p&gt;In diesem Sinne wünsche ich dem Projekt und dem Verein dahinter, dass es weiterhin das Web erklärt und das, was dort wichtig ist, weiter so erzählt, dass es sich jetzt liest wie der Weg in die Zukunft, und später wie erlebte Geschichte. Dabei muss sich das vermittelte Wissen nicht krampfhaft nur auf die ursprünglichen Kernsprachen des Web, wie HTML und CSS und vielleicht noch etwas JavaScript beschränken. Das offene Konzept des SELFHTML-Wikis erlaubt es durchaus, von Server-Virtualisierung bis zum Design von API-Routen so ziemlich alle nur denkbaren Aspekte zu behandeln, die rund um moderne Websites oder Web-Backends eine Rolle spielen. Und wenn sich die Frontends nun mal weiter weg vom Browser hin zu mobilen Apps verlagern, spricht auch nichts dagegen, deren typische Technologien oder Sprachen zu beschreiben - sofern es sich um offene Standards handelt. Die Grenze für potentielle neue Inhalte sollte keine technologische sein. Die Grenze sollten proprietäre, nicht-offene Technologien sein, hinter denen sich in der Regel kapitalgierige Gatekeeper verbergen, denen es nie um die Sache selbst geht. Ruhe in Frieden, Flash! Und ruhet hoffentlich ebenfalls irgendwann alle in Frieden, ihr hirnwäschenden Plattformen und proprietären Protokolle!&lt;/p&gt;
&lt;p&gt;Stefan Münz&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/may/22/jahresbericht-des-vorstands</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-05-22T06:54:49Z</published>
    <updated>2025-05-22T06:54:49Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/may/22/jahresbericht-des-vorstands#m1820099" rel="alternate" type="text/html"/>
    <title>Jahresbericht des Vorstands</title>
    <content type="html">&lt;p&gt;Für die Mitgliederversammlung 2025, die im Rahmen des &lt;a href=&quot;https://forum.selfhtml.org/events/12&quot; rel=&quot;noopener noreferrer&quot;&gt;diesjährigen SELF-Treffens&lt;/a&gt; am 24.05.2025 stattfindet, möchte ich hier vorab den Jahresbericht des Vorstands veröffentlichen.&lt;/p&gt;
&lt;p&gt;Dabei blicken wir nicht nur auf die letzten zwei - sondern wegen des Jubiläums  auf 30(!) Jahre SELFHTML zurück!&lt;/p&gt;
&lt;h3&gt;Die Anfänge&lt;/h3&gt;&lt;p&gt;&lt;em&gt;„An einem ungemütlichen Januarabend 1995 saß ich in einer Münchener Kneipe mit dem ahnungsvollen Namen „Forum“. Dort hörte ich an einem Nebentisch erstmals jemanden vom so genannten „World Wide Web“ reden.“&lt;/em&gt; So beschrieb Stefan Münz, &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Wie_alles_begann_%E2%80%93_Stefan_M%C3%BCnz_erz%C3%A4hlt&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;wie alles begann.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Da es keine Doku zu HTML gab, schuf Stefan selbst eine und veröffentlichte sie erst im Compuserve-Forum und dann im Internet. Daraus entstand eine rege Community und ein Verein, die sich immer weiter entwickeln.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik&quot;&gt;&lt;img src=&quot;/images/61f28274-36d7-11f0-8fb0-9c6b00263d9f.png&quot; alt=&quot;Card der Vereinschronik&quot; width=&quot;400&quot; style=&quot;float:right;&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Mehr findet ihr hier …&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;→ SELFHTML:Verein/Chronik&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Wiki&lt;/h3&gt;&lt;p&gt;Auch wenn die ersten Versionen der Doku erfolgreich waren, es gab doch immer wieder Errata und Neuerungen im Webdesign, die gesammelt und in der nächsten Version veröffentlicht wurden.&lt;/p&gt;
&lt;p&gt;Seit 2010 gibt es unser Wiki, in dem jeder Mensch Änderungen vornehmen und das gemeinsame Wissen aktuell halten und erweitern kann.&lt;/p&gt;
&lt;p&gt;Und trotzdem führte der Trend zur Professionalisierung einerseits und die Möglichkeit in sozialen Medien ohne Kenntnisse zu posten, zu abnehmenden Nutzerzahlen und zur Frage, ob &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/nov/01/wird-selfhtml-heute-noch-gebraucht&quot; rel=&quot;noopener noreferrer&quot;&gt;SELFHTML heute noch gebraucht wird?&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Auf der Mitgliedsversammlung 2023 in Mainz wurde dies Frage eindeutig mit Ja beantwortet. Mit neuem Schwung bildeten sich zahlreiche Arbeitsgruppen, die das Jahr 2024 mit 3(!) Mitgliederversammlungen und zahlreichen Diskussionen prägten.&lt;/p&gt;
&lt;h4&gt;Wiki-Struktur&lt;/h4&gt;&lt;p&gt;Die 2023 vorgestellte überarbeitete Farbpalette wurde für die 2024 eingeführten &lt;em&gt;&lt;strong&gt;Cards&lt;/strong&gt;&lt;/em&gt; verwendet, die die vorhandenen Kurse auf den Übersichtsseiten anschaulich präsentieren.&lt;/p&gt;
&lt;p&gt;Die vorhandenen Tutorials wurden dabei auf Aktualität überprüft und gegebenenfalls angepasst. Trotzdem bleibt die Zahl unserer &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Kategorie:ToDo&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Baustellen &lt;/a&gt; nahezu gleich, verlagert sich aber immer weiter in Randthemen hinein.&lt;/p&gt;
&lt;p&gt;Nachdem im Winter oft nur 4-5 Aktive pro Monat im Wiki unterwegs waren, gab es im Frühling immer wieder neue und alte Nutzer, die kleinere Änderungen vornehmen. &lt;a href=&quot;/users/6547&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Rolf B&lt;/a&gt;, &lt;a href=&quot;/users/68&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@JürgenB&lt;/a&gt; und &lt;a href=&quot;/users/243&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Felix Riesterer&lt;/a&gt; liefern immer wieder eigene, größere Beiträge. Danke dafür!&lt;/p&gt;
&lt;h4&gt;Zielgruppen-Personas&lt;/h4&gt;&lt;p&gt;Janosch und Wiebke entwickelten &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Zielgruppen-Personas&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;em&gt;&lt;strong&gt;Personas&lt;/strong&gt;&lt;/em&gt;&lt;/a&gt; - fiktive Personenbeschreibungen potenzieller Nutzer, mit denen wir künftig gezielter &lt;strong&gt;für&lt;/strong&gt; eine bestimmte Gruppe schreiben und auf deren Kenntnisstand eingehen können.&lt;br&gt;
In einem zweiten Schritt wollen wir genauer festlegen, wie &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Wie_sehen_gute_Tutorials_aus.3F&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;gute Tutorials aussehen sollen&lt;/a&gt; - ein Projekt für&apos;s kommende Jahr.&lt;/p&gt;
&lt;h4&gt;Logo&lt;/h4&gt;&lt;p&gt;Das Live-Treffen im Mai in Hannover brachte ein &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:SELFHTML-Logos&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;neues Logo &lt;/a&gt;(nämlich das alte) und Wort-Bild-Marken, für die es bis jetzt aber noch keinen Anwendungsfall gibt, sowie einen &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Style-Guide&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Style-Guide&lt;/a&gt;, der nahezu nichts festlegt, weil heute viel mehr Gewicht auf &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Media_Queries/Benutzereinstellungen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Feature-Abfragen&lt;/a&gt; gelegt wird.&lt;/p&gt;
&lt;h3&gt;Forum&lt;/h3&gt;&lt;p&gt;Das Forum läuft und ist im Großen und Ganzen friedlich! Alles gut!&lt;/p&gt;
&lt;h3&gt;Technik&lt;/h3&gt;&lt;p&gt;Die Server laufen, dank &lt;a href=&quot;/users/1&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Christian Kruse&lt;/a&gt; und &lt;a href=&quot;/users/27&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@dedlfix&lt;/a&gt;. Auch dafür vielen Dank!&lt;/p&gt;
&lt;p&gt;Trotzdem kam es um den Jahreswechsel herum zu zwei Ausfällen, die jedoch schnell behoben werden konnten. Während der Grund bei einem im Rechenzentrum lag, erinnerte uns der zweite Ausfall doch daran, dass wir uns an eine Modernisierung unserer technischen Infrastruktur machen müssen.&lt;/p&gt;
&lt;h3&gt;Finanzen&lt;/h3&gt;&lt;p&gt;Auch wenn immer wieder Förderer wegbrechen, kommen ohne große Werbung neue dazu. Darüber hinaus gibt es immer wieder Kleinspender, die so ihre Dankbarkeit dem Verein / der Doku gegenüber ausdrücken.&lt;/p&gt;
&lt;p&gt;Finanziell müssen wir uns keine Sorgen machen, da die Server von manitu und Termitel gesponsert werden. Vielen Dank!&lt;/p&gt;
&lt;p&gt;Der Kassenbericht wird während der MV vorgestellt. Diese findet während des SELF-Treffens vom 23.05.-25.05.2025 in Mannheim statt. &lt;a href=&quot;/users/14208&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Bertie&lt;/a&gt; hat dafür ein Logo entworfen, das den rasterförmigen Grundriss der &lt;a href=&quot;https://de.wikipedia.org/wiki/Quadratestadt&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Quadratestadt&lt;/a&gt; aufnimmt und die Entwicklung unseres Vereins visualisiert:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/58c3686a-36e8-11f0-9c80-9c6b00263d9f.svg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/58c3686a-36e8-11f0-9c80-9c6b00263d9f.svg&quot; alt=&quot;vereinfachte Darstellung der Quadratestadt Mannheim Mit alten und neuen SELF-Logos&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Matthias Scharwies&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/may/13/working-draft-podcast-revision-661</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-05-13T16:25:40Z</published>
    <updated>2025-05-13T16:25:40Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/may/13/working-draft-podcast-revision-661#m1819970" rel="alternate" type="text/html"/>
    <title>Working Draft Podcast: Revision 661</title>
    <content type="html">&lt;p&gt;&lt;strong&gt;SelfHTML wird 30 – ein Web-Urgestein feiert Geburtstag&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;SelfHTML gehört zu den ganz Großen der deutschsprachigen Weblandschaft – und das seit 1994. Wer sich in den Nullerjahren HTML, CSS oder JavaScript beigebracht hat, ist an dieser Seite kaum vorbeigekommen. Grund genug, dieses Jubiläum mit einer eigenen Folge zu feiern!&lt;/p&gt;
&lt;p&gt;In dieser Revision spricht Schepp mit Matthias Scharwies – aktiver Maintainer, Mitgestalter der Community und einer der Menschen, die SelfHTML bis heute weiterentwickeln. Wir sprechen über die Geschichte, die Gegenwart und die Zukunft einer der traditionsreichsten Dokumentationen rund ums Web.&lt;/p&gt;
&lt;p&gt;Matthias erzählt, wie SelfHTML in den 90ern entstanden ist, wie es zu einem Fixpunkt für Web-Einsteiger:innen wurde und welche Meilensteine das Projekt seitdem erlebt hat. Vom klassischen HTML-Handbuch bis zum heutigen Community-Wiki – vieles hat sich verändert, aber der Geist ist geblieben.&lt;/p&gt;
&lt;p&gt;Wir reden darüber, wie sich das Projekt über die Jahre hinweg geöffnet hat, wie Beiträge organisiert sind, wie man selbst mitmachen kann – und warum das Forum nach wie vor ein guter Ort ist, um Fragen zu stellen. Auch spannende Randgeschichten aus der Redaktion kommen zur Sprache.&lt;/p&gt;
&lt;p&gt;Ein Highlight im Jubiläumsjahr ist das &lt;a href=&quot;https://forum.selfhtml.org/self/2025/apr/11/self-treffen-2025-unconference/1819538#m1819538&quot; rel=&quot;noopener noreferrer&quot;&gt;SelfHTML-Treffen 2025 in Mannheim, das als Unconference &lt;/a&gt;stattfindet. Matthias gibt einen Ausblick darauf, was dort geplant ist, warum sich ein Besuch lohnt – und wie viel Motivation und Energie aus solchen persönlichen Begegnungen entstehen kann.&lt;/p&gt;
&lt;p&gt;Natürlich schauen wir auch nach vorn: Was fehlt aktuell? Wie lassen sich neue Webstandards wie „Open UI“ einbauen? Und wie bleibt man bei einem so gewachsenen Projekt überhaupt handlungsfähig? Matthias gibt Einblicke in Tools, Arbeitsweisen und den pragmatischen Umgang mit Legacy-Strukturen.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/apr/29/ich-wollte-doch-nur-dass-der-link-die-tabellenzelle-fullt</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2025-04-29T08:59:24Z</published>
    <updated>2025-04-29T08:59:24Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/apr/29/ich-wollte-doch-nur-dass-der-link-die-tabellenzelle-fullt#m1819706" rel="alternate" type="text/html"/>
    <title>Ich wollte doch nur, dass der Link die Tabellenzelle füllt...</title>
    <content type="html">&lt;p&gt;Vieles beim Webdesign ist völlig logisch und selbstverständlich.&lt;br&gt;
Logischerweise vergisst man genauso selbstverständlich die Feinheiten, wenn es darauf ankommt.&lt;/p&gt;
&lt;p&gt;Ein weiterer Fall aus dem Nähkästchen des alten Programmierers…&lt;/p&gt;
&lt;p&gt;Dienstlicherseits pflege ich eine Webseite, in der eine Liste verfügbarer PDFs als HTML Table angezeigt wird. Durch einen Klick auf einen Link in der Zeile kann man das PDF in einem neuen Tab öffnen. Die Webseite an sich ist trivial, der Hirnschmalz steckt in dem virtuellen Druckerservice, durch den diverse Anwendungen unseres Großrechners ihre Ausgaben erstellen können, ohne zu merken, dass das gar kein Drucker ist.&lt;/p&gt;
&lt;p&gt;Die Anwendung ist Legacy-Zeug von 2005 und obwohl ich im Laufe der Zeit vieles neu geschrieben habe, steckt noch viel alter Kram im CSS. Der &quot;Anzeigen&quot; Link füllt die Zeile, aber nur dadurch, dass da eine fixe Höhe zugewiesen wird. Das passt nicht immer, manche Zeilen enthalten Zusatzinfos  in einer anderen Spalte und sind höher.&lt;/p&gt;
&lt;p&gt;Also, neues Ziel: Mach den Link automagisch so hoch wie die Zeile ist. Das mit JavaScript zu tun ist sicher möglich, aber bestimmt unnötig. Also habe ich guten Mutes dies hier geschrieben:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;td&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
   &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;pdf.aspx?id=...&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token entity named-entity&quot; title=&quot;&amp;nbsp;&quot;&gt;&amp;nbsp;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;visually-hidden&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Dokument anzeigen&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
   &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;td&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.documents a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pdf.png&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; no-repeat center&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;#8F8&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Der grüne Zusatzhintergrund ist für diesen Artikel hereingekommen, zur Visualisierung des a-Elements.&lt;/p&gt;
&lt;p&gt;Und das klappt natürlich - nicht!&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/images/9d705edc-24d2-11f0-948a-9c6b00263d9f.png&quot; alt=&quot;&quot; loading=&quot;lazy&quot;&gt;&lt;/p&gt;
&lt;p&gt;Das Icon ist oben und nicht in der Mitte, weil aus anderen Gründen vertical-align:top für die Zellen gesetzt ist. Und man sieht überhaupt nur deshalb irgendwas davon, weil der visuell versteckte span ebenfalls neu ist und vorher nur ein &amp;nbsp; im Link stand, den ich vergessen hatte zu löschen.&lt;/p&gt;
&lt;p&gt;Offenbar ist die Zelle also nicht so hoch wie die Zeile, sonst würde das a Element ja höher sein, oder? Das table-Layoutmodell ist ja sowieso der beste Kopfschmerzgenerator. Also habe ich hinzugefügt:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.documents td&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Und der Effekt war natürlich - NULL.&lt;/p&gt;
&lt;p&gt;Nachdem ich die Suchmaschine meines geringsten Misstrauens zu Rate gezogen hatte, erweist es sich, dass es gar nicht funktionieren kann. Ganz logisch und selbstverständlich: Eine Höhe von 100% braucht eine Bezugshöhe. Mein table-Element hatte aber keine height-Attribut und damit war die Höhe &lt;code&gt;auto&lt;/code&gt;, was in einer Tabellenzelle als Bezugshöhe für Prozentangaben untauglich ist.&lt;/p&gt;
&lt;p&gt;Einige Lösungen im Web empfehlen &lt;code&gt;height: 1px&lt;/code&gt; für die Tabelle - was tatsächlich funktioniert, aber aus meiner Sicht ein Geschmäckle hat.&lt;/p&gt;
&lt;p&gt;Besser und expressiver ist hingegen&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;table.documents&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; fit-content&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;was Chromia seit 2015 können (Chromium 46), Webkits seit 2017 (Safari 11) und Geckos seit 2021 (Firefox 94).&lt;/p&gt;
&lt;p&gt;Für Chromia ist die Angabe &lt;code&gt;height:100%;&lt;/code&gt; für die Zelle unnötig, aber Firefox braucht sie, damit es funktioniert.&lt;/p&gt;
&lt;p&gt;Zusammengefasst:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;table.documents&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; fit-content&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;.documents td&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;.documents a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;pdf.png&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; no-repeat center&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; #8F8&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Und dann geht&apos;s.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/images/83686c26-24d4-11f0-b0f5-9c6b00263d9f.png&quot; alt=&quot;&quot; loading=&quot;lazy&quot;&gt; - &lt;img src=&quot;/images/94387a28-24d4-11f0-85c1-9c6b00263d9f.png&quot; alt=&quot;&quot; loading=&quot;lazy&quot;&gt;&lt;/p&gt;
&lt;p&gt;Das Dankeschön geht an &lt;a href=&quot;https://stackoverflow.com/questions/3215553/make-a-div-fill-an-entire-table-cell#answer-73399942&quot; rel=&quot;noopener noreferrer&quot;&gt;Kaperstone bei StackOverflow&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Rolf&lt;/em&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/apr/06/sommerzeit-input-type-date-und-javascript</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2025-04-05T22:11:46Z</published>
    <updated>2025-04-05T22:11:46Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/apr/06/sommerzeit-input-type-date-und-javascript#m1819450" rel="alternate" type="text/html"/>
    <title>Sommerzeit, input type=&quot;date&quot; und JavaScript</title>
    <content type="html">&lt;p&gt;Aus der Rubrik „Das Nähkästchen des alten Programmierers“.&lt;br&gt;
Oder: Wie dumm man sein kann…&lt;/p&gt;
&lt;p&gt;&lt;code&gt;input type=&quot;date&quot;&lt;/code&gt; Elemente stellen ihr Datum in einer &lt;code&gt;valueAsDate&lt;/code&gt; Eigenschaft bereit. Wehe dem, der das Date-Objekt darin falsch behandelt.&lt;/p&gt;
&lt;p&gt;Ich wollte ja eigentlich was ganz einfaches machen. Da war ein Edit-Formular, mit dem Tagesdatum darauf, und ich wollte zwei Buttons &quot;Gestern&quot; und &quot;Morgen&quot; hinzufügen, um zum Wechseln des Tages nicht erst das Formular schließen und für den neuen Tag öffnen zu müssen.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;label&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;for&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;editDatum&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Datum:&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;input&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;editDatum&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;date&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;datum&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;button&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;morgen&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Nächster Tag&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Das sollte doch einfach sein. Dachte ich.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block bad language-js&quot;&gt;document
   &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;button[name=morgen]&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
   &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;click&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; nachMorgen&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; editDateField &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;#editDatum&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;nachMorgen&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;

   editDateField&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;valueAsDate&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setDate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      editDateField&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;valueAsDate&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getDate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;
   &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

   &lt;span class=&quot;token function&quot;&gt;reloadData&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Das Thema „Was mache ich mit ggf. ungespeicherten Daten im aktuellen Form“ habe ich für den Blogartikel ausgelassen.&lt;/p&gt;
&lt;p&gt;Ja. Denkste. Es passierte überhaupt nichts. Was auch logisch ist – woher soll das DOM mitbekommen, dass das Date-Objekt aktualisiert wurde.&lt;/p&gt;
&lt;p&gt;Man muss es schon so machen, dass die Änderung bemerkt wird:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block bad language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;morgen&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;

   &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; datum &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; editDateField&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;valueAsDate&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

   datum&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setDate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;datum&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getDate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   editDateField&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;valueAsDate &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; datum&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

   &lt;span class=&quot;token function&quot;&gt;reloadData&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Immer noch schlecht? Ja, tatsächlich, immer noch schlecht. Die Partnerfunktion &lt;code&gt;gestern()&lt;/code&gt; hatte ich auch gebaut und bin dann zum Testen lustig hin und her gewechselt.&lt;/p&gt;
&lt;p&gt;Bis ich auf den 30. März zurückgegangen bin, zurück in die Zukunft wollte und mir überraschend etwas an den nötigen 1,21 Gigawatt fehlte. Das Datumsfeld blieb auf dem 30. März stehen.&lt;/p&gt;
&lt;p&gt;Der Grund steht natürlich in der HTML Spezifikation, und genauso natürlich übersieht man ihn, wenn man nicht ganz genau hinguckt.&lt;/p&gt;
&lt;p&gt;Beim Zuweisen an valueAsDate wird das Date-Objekt in einen String umgewandelt. Und zwar für Zeitzone 0, alias UTC. Schauen wir uns an, was am 30. März, dem Sonntag, an dem 2025 die Sommerzeit beginnt, geschieht.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; tag &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;2025-03-30&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tag&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toString&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// Sun Mar 30 2025 01:00:00 GMT+0100 &lt;/span&gt;

tag&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setDate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tag&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getDate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;tag&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toString&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// Mon Mar 31 2025 01:00:00 GMT+0200&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Das ist das Problem: setDate() erhöht zwar den Tag, belässt die Zeit aber exakt wie sie ist, auf ein Uhr. Nur kommt leider die Sommerzeit dazwischen, das heißt: ein Uhr ist jetzt nicht mehr null Uhr UTC, sondern 23 Uhr UTC des Vortages.&lt;/p&gt;
&lt;p&gt;Mozilla schreibt es ganz klar:&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The date returned should always be interpreted as a UTC time—for example, using methods like getUTCDate() instead of getDate(). If you are not careful, the result may be off by 1&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Das zurückgegebene Date sollte immer als eine UTC-Zeit interpretiert werden – zum Beispiel dadurch, dass man Methoden wie getUTCDate() verwendet statt getDate(). Wenn Sie nicht achtgeben, kann das Ergebnis um 1 daneben liegen.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Und genauso war es bei mir.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block good language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;morgen&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;

   &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; datum &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; editDateField&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;valueAsDate&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

   datum&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setUTCDate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;datum&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getUTCDate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   editDateField&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;valueAsDate &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; datum&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

   &lt;span class=&quot;token function&quot;&gt;reloadData&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Kaum macht man es richtig, so funktioniert es auch schon.&lt;/p&gt;
&lt;p&gt;Der Übergang vom März zum April ist übrigens gar kein Problem. Setzt man im März den Tag auf 32, springt er automatisch in den Folgemonat.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Rolf&lt;/em&gt;&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/valueAsDate#value&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/valueAsDate#value&lt;/a&gt; &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/mar/31/kein-backup-kein-mitleid</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-03-31T03:40:44Z</published>
    <updated>2025-03-31T03:40:44Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/mar/31/kein-backup-kein-mitleid#m1819397" rel="alternate" type="text/html"/>
    <title>Kein Backup - kein Mitleid!</title>
    <content type="html">&lt;p&gt;Heute - am 31.03.  - ist &lt;strong&gt;World Backup Day&lt;/strong&gt; - Anlass für einige Gedanken.&lt;/p&gt;
&lt;p&gt;Reichte ganz früher eine Spindel mit CDs, ist heute schon das Einsortieren von Dokumenten und Medien aus den Bereichen Familie, Freizeit und Beruf eine Lebensaufgabe. Andererseits kosten Festplatten nur einen Bruchteil gegenüber früher und Cloud-Dienste speichern Deine Daten sogar kostenlos!&lt;/p&gt;
&lt;p&gt;Umso schlimmer, wenn die Fotos aus dem letzten Urlaub oder das Projekt aus dem Vorjahr nicht nur nicht mehr auffindbar, sondern ganz weg sind. Die Gründe können vielfältig sein:&lt;/p&gt;
&lt;p&gt;Hardware kann ausfallen, Viren oder Ransomware können Daten zerstören, und versehentliches Löschen passiert schneller als man denkt.&lt;/p&gt;
&lt;p&gt;Ein befreundeter Pfarrer klagte mir einmal sein Leid:&lt;/p&gt;
&lt;p&gt;„Niemand glaubt mehr an Gott, aber jeder, dass seine Festplatte ewig leben wird!“&lt;/p&gt;
&lt;p&gt;Ich persönlich verlasse mich „eigentlich“ auf mein Office-365 und OneDrive, das von meinem Arbeitgeber für 5 Geräte in der Famile gesponsert wird. Was aber, wenn ich doch einmal meinen Job verliere (&lt;em&gt;unwahrscheinlich&lt;/em&gt;), das Internet ausfällt (&lt;em&gt;passiert immer wieder einmal!&lt;/em&gt;) oder ich aus Versehen komplette Ordner lösche (&lt;em&gt;leider auch schon passiert&lt;/em&gt;)?&lt;/p&gt;
&lt;p&gt;Besondere Brisanz hat das Thema bekommen, dass die Zentralen fast aller Cloud-Dienste in den USA sitzen, auch wenn sie angeben, unsere Daten nur innerhalb der EU zu speichern. Stand die USA noch vor einem halben Jahr für ein attraktives Urlaubsziel, erscheint sie heute als dunkle Wolke, die ihr Missliebiges einfach löschen oder ausschalten kann.&lt;/p&gt;
&lt;p&gt;Deshalb ist es wichtig, sich beizeiten einige Strategien zur Datensicherung zu überlegen!&lt;/p&gt;
&lt;h3&gt;3-2-1-Regel&lt;/h3&gt;&lt;p&gt;Es gibt eine einfache 3-2-1-Backup-Regel:&lt;/p&gt;
&lt;p&gt;✔ 3 Kopien deiner Daten haben (Original + zwei Backups)&lt;/p&gt;
&lt;p&gt;✔ 2 verschiedene Speichermedien nutzen (z. B. Festplatte &amp; Cloud)&lt;/p&gt;
&lt;p&gt;✔ 1 Backup extern lagern (Cloud oder externe Festplatte außerhalb des Hauses)&lt;/p&gt;
&lt;p&gt;Dieser Artikel kann nicht &lt;em&gt;&lt;strong&gt;die eine&lt;/strong&gt;&lt;/em&gt; Anleitung für perfekte Datensicherheit geben, aber ich persönlich hatte schon vor Wochen begonnen, alles aus der Cloud auf meine externe Festplatte zu kopieren. Sie befindet sich auch nicht mehr im Arbeitszimmer, sondern an einem seperaten Ort.&lt;/p&gt;
&lt;h3&gt;NAS&lt;/h3&gt;&lt;p&gt;Für eine Familie oder ein KMU sollte man überlegen, ob man nicht ein NAS an den Router anschließt, um selbst seine eigene &lt;em&gt;Cloud&lt;/em&gt; zu hosten. Es gibt fertige Lösungen der bekannten Firmen zu kaufen, aber auch viele Selbstbauanleitungen, wie man einen Einplatinen-Computer mit vorhandenen Festplatten zum Selbstbau-NAS zusammenschraubt.&lt;br&gt;
Ob mein Raspi-Eigenbau hält, werde ich Euch in einem Jahr berichten!&lt;/p&gt;
&lt;h3&gt;restic&lt;/h3&gt;&lt;p&gt;Datensicherungssoftware wie &lt;a href=&quot;https://restic.net/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Restic&lt;/a&gt; ermöglicht es, nicht nur die Daten, sondern auch die Systemzustände des Computers zu bewahren. Der Clou bei &lt;em&gt;restic&lt;/em&gt; ist, dass es immer ein Vollbackup macht, intern aber durch Deduplizierung nur der Speicherplatz eines inkrementellen Backups gebraucht wird.&lt;/p&gt;
&lt;p&gt;Im Backup sind sowohl die Inhalte als auch die Metadaten verschlüsselt. &lt;em&gt;restic&lt;/em&gt; kann sein Backup so ziemlich überall hin speichern: Dateisystem, Cloud, sftp-Server.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Es wäre schön, wenn Lesende ihre Erfahrungen und Strategien anderen weitergeben könnten. Was für den einen Allgemeinwissen ist, kann dem noch nicht Eingeweihten Denkanstoß und Motivation sein.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/mar/23/social-media-mit-unicode-formatieren</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-03-23T07:00:39Z</published>
    <updated>2025-03-23T07:00:39Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/mar/23/social-media-mit-unicode-formatieren#m1819283" rel="alternate" type="text/html"/>
    <title>Social Media mit Unicode formatieren?</title>
    <content type="html">&lt;p&gt;In Mastodon kann man Text nicht formatieren - oder doch?
&lt;a href=&quot;https://bildung.social/@aardrian@toot.cafe&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;@aardrian &lt;/a&gt; warnt vor der Verwendung dekorativer Unicode-Schriften in Social Media - ich habe dazu einen Wiki-Artikel geschrieben:&lt;/p&gt;
&lt;p&gt;In &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Zeichencodierung/Fake_Bold&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Zeichencodierung/Fake Bold&lt;/a&gt; habe ich kurz gezeigt, wie das Formatieren geht - natürlich ohne Link, da es ja &lt;strong&gt;keine&lt;/strong&gt; Nachahmer finden soll - und wie es sich in Web Speech anhört.&lt;/p&gt;
&lt;p&gt;Bis jetzt hatten wir zu diesem Thema nur einen Link auf eine SO-Diskussion:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://meta.stackoverflow.com/questions/342024&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;           ?&lt;/a&gt; - die ebenfalls vor dem Einsatz solcher Stilmittel warnte.&lt;/p&gt;
&lt;p&gt;Langfristig sollten wir auf eine Mastodon-Instanz wechseln (oder selbst einrichten), die HTML-Formatierungen in inline-Elementen erlaubt.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/mar/14/heute-gehts-nicht-um-ki-sondern-nur-um-p</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2025-03-14T00:49:29Z</published>
    <updated>2025-03-14T00:49:29Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2025/mar/14/heute-gehts-nicht-um-ki-sondern-nur-um-p#m1819189" rel="alternate" type="text/html"/>
    <title>Heute geht&apos;s nicht um KI, sondern nur um π</title>
    <content type="html">&lt;p&gt;Der &lt;em&gt;&lt;strong&gt;Pi Day&lt;/strong&gt;&lt;/em&gt; wird jährlich am 14. März gefeiert. Der März ist der 3. Monat, im Amerikanischen sieht das Datum also wie 3/14 aus.&lt;/p&gt;
&lt;p&gt;Das war für uns Anlass genug, unsere Seite &lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Math/PI&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Math.PI&lt;/strong&gt;&lt;/a&gt; auf Aktualität zu überprüfen.&lt;/p&gt;
&lt;p&gt;Da es bisher nur wenige Zeilen JavaScript waren - es ist ja „nur“ eine Konstante, die man auslesen und für Berechnungen nutzen kann - sollen nun einige Beispiele mit SVG und MathML visualisiert werden.&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-math.PI-3.html&quot; width=&quot;800&quot; height=&quot;750&quot; name=&quot;SELFHTML&quot; title=&quot;Das Selfhtml Wiki&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-math.PI-3.html&quot;&gt;SELFHTML&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;Eine ausführlichere Erklärung findet sich auf der &lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Math/PI&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Wikiseite&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Seit März 2023 gibt es neben HTML und SVG eine weitere auf XML basierende Sprache im SELF-Wiki: Mit &lt;a href=&quot;https://wiki.selfhtml.org/wiki/MathML&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;MathML&lt;/strong&gt;&lt;/a&gt; lassen sich mathematische Formeln so auszeichnen, dass sie von Browsern und Screenreadern gelesen und verstanden werden. In SVG wurden solche Formeln bisher rein grafisch geschrieben.&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-math.PI-2.html&quot; width=&quot;800&quot; height=&quot;200&quot; name=&quot;SELFHTML&quot; title=&quot;Das Selfhtml Wiki&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS-math.PI-2.html&quot;&gt;SELFHTML&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;Dieses Beispiel ist „nur“ SVG mit CSS:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/979670ca-006d-11f0-8eb6-9c6b00263d9f.svg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/979670ca-006d-11f0-8eb6-9c6b00263d9f.svg&quot; alt=&quot;Kreiszahl π mit Nachkommastellen, die immer kleiner werden.&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Jede Nachkommastelle ist in einem &lt;code&gt;tspan&lt;/code&gt; geschachtelt, der mit &lt;code&gt;font-size: 0.96em&lt;/code&gt; 4% kleiner als sein Vorgänger ist.&lt;/p&gt;
&lt;p&gt;Vielen Dank an &lt;a href=&quot;/users/6547&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Rolf B&lt;/a&gt; und &lt;a href=&quot;/users/68&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@JürgenB&lt;/a&gt; für die Zuarbeit!&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Eine Bitte:&lt;/strong&gt; Wer noch Beispiele und Ideen für unser Wiki hat, immer her damit!&lt;br&gt;
Der nächste PI Day ist am 14.03.2026!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/dec/24/danke-danke-danke</id>
    <author>
      <name>Matthias Scharwies</name>
    </author>
    <published>2024-12-24T04:52:50Z</published>
    <updated>2024-12-24T04:52:50Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/dec/24/danke-danke-danke#m1818160" rel="alternate" type="text/html"/>
    <title>Danke, danke, danke!</title>
    <content type="html">&lt;p&gt;Es gibt nur zwei Tage im Jahr,&lt;br&gt;
an denen man nichts tun kann:&lt;br&gt;
&lt;strong&gt;gestern&lt;/strong&gt; und &lt;strong&gt;morgen&lt;/strong&gt;!&lt;/p&gt;
&lt;p&gt;Dalai Lama&lt;/p&gt;
&lt;p&gt;Wie in jedem Jahr seit 2012&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; möchte ich in einem  &lt;strong&gt;Weihnachtsbrief&lt;/strong&gt; in einem Rückblick die vielen Mitstreiter würdigen, die unser Projekt am Laufen halten.&lt;/p&gt;
&lt;p&gt;Oft scheint es, als ob der Verein nur noch aus einigen wenigen Einzelkämpfern besteht. Dabei wird aber vergessen, was im Hintergrund läuft: Christian Kruse und dedlfix halten die Technik störungsfrei am Laufen; die Server werden durch Termitel und Manitu gesponsert. Ohne dieses Engagement gäbe es das Projekt schon lange nicht mehr.&lt;/p&gt;
&lt;p&gt;Der Verein dankt auch den Fördermitgliedern und Einzelspendern, die das Projekt finanziell unterstützen und so die Zukunft sichern. Allerdings suchen wir 2025 wieder einen Finanzvorstand, da Wiebke Knaepper auf eigenen Wunsch ausgeschieden ist.&lt;/p&gt;
&lt;p&gt;In unseren sichtbarsten Bereichen - dem &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Wiki&lt;/strong&gt;&lt;/a&gt; - arbeiten wir weiter an der Modernisierung. Vielen Dank an &lt;a href=&quot;/users/6547&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Rolf B&lt;/a&gt;, Jürgen und Felix für ihr Engagement beim Makeover, aber auch beim Schreiben und Redigieren von Artikeln und Tutorials. Im Wiki benötigen wir dringend Mitarbeitende, die sich unserer &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Kategorie:ToDo&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Baustellen&lt;/a&gt; annehmen, aber auch bereits Bestehendes immer wieder neu unter die Lupe nehmen, ob es noch verbessert werden kann.&lt;/p&gt;
&lt;p&gt;Im &lt;a href=&quot;https://forum.selfhtml.org/&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;strong&gt;Forum&lt;/strong&gt;&lt;/a&gt; wird es jedes Jahr ruhiger. Das ist aber nicht so schlecht, wie es sich anhört, wenn man bedenkt, dass dort ohne Anmeldung gepostet werden darf. Durch die Konzentration auf Fachthemen, die von den Moderatoren durchgesEtzt wird, bliebt es für unsere Verhältnisse doch friedlich.&lt;/p&gt;
&lt;p&gt;Herzlichen Dank an alle, die SELFHTML im vergangenen Jahr inhaltlich, technisch oder menschlich unterstützt haben - sei es durch Artikel, Feedback und Kritik, Spenden und vieles mehr. Wir wünschen wir allen Lesern einen guten Start ins neue Jahr und hoffen auf ein spannendes Jahr 2025! Im Mai werden wir unser &lt;a href=&quot;https://forum.selfhtml.org/events/12&quot; rel=&quot;noopener noreferrer&quot;&gt;30-jähriges Jubiläum&lt;/a&gt; feiern - nicht selbstverständlich in unserer schnelllebigen Zeit!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;2012 schrieb Matthias Aspel den ersten &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2012/dec/25/weihnachtsbrief&quot; rel=&quot;noopener noreferrer&quot;&gt;Weihnachtsbrief&lt;/a&gt; als Vorsitzender.&lt;br&gt;
Bereits 2005 brachte Stefan Münz einen &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2005/dec/24/weihnachten_2005&quot; rel=&quot;noopener noreferrer&quot;&gt;launigen Weihnachtsbrief&lt;/a&gt; heraus, der sich rund um X-Mas und den X-Man drehte, mit vielen Weisheiten aus dem &lt;em&gt;Usenet&lt;/em&gt;. &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/nov/29/adventskalender-2024</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
      <uri>https://forum.selfhtml.org/advent/2024</uri>
    </author>
    <published>2024-11-29T20:28:07Z</published>
    <updated>2025-01-01T09:26:40Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/nov/29/adventskalender-2024#m1817849" rel="alternate" type="text/html"/>
    <title>Adventskalender 2024</title>
    <content type="html">&lt;p&gt;Wie in jedem Jahr wollen wir auch dieses Jahr einen Adventskalender anbieten.&lt;/p&gt;
&lt;p&gt;Thema ist - im Vorgriff auf das Jubiläum nächstes Jahr:&lt;/p&gt;
&lt;h3&gt;&lt;a href=&quot;https://forum.selfhtml.org/advent/2024&quot; rel=&quot;noopener noreferrer&quot;&gt;Best Practice in Beispielen&lt;/a&gt;&lt;/h3&gt;&lt;p&gt;aus unserem Wiki. Es hat sich in den letzten Monaten einiges getan, was wir hier präsentieren wollen:&lt;/p&gt;
&lt;p&gt;Hier geht&apos;s zum &lt;a href=&quot;https://forum.selfhtml.org/advent/2024&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;strong&gt;Adventskalender 2024&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;SELFHTML wünscht eine besinnliche Weihnachtszeit mit nicht zu viel Stress und Hektik!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/nov/04/save-the-date-noch-200-tage-bis-zum-self-treffen</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2024-11-04T11:46:19Z</published>
    <updated>2024-11-04T11:46:19Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/nov/04/save-the-date-noch-200-tage-bis-zum-self-treffen#m1817458" rel="alternate" type="text/html"/>
    <title>Save the Date: noch 200 Tage bis zum SELF-Treffen</title>
    <content type="html">&lt;p&gt;Dieses Jahr hatten wir es mit drei Mitgliederversammlungen - im &lt;em&gt;real life&lt;/em&gt;, aber auch online -  ein bisschen übertrieben; es gab aber auch viel zu besprechen.&lt;/p&gt;
&lt;p&gt;Allerdings steht nächstes Jahr unser großes Jubiläumstreffen vor der Tür! Vom &lt;a href=&quot;https://forum.selfhtml.org/events/12&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;strong&gt;23. - 25.05.2025&lt;/strong&gt; wollen wir &lt;strong&gt;30 Jahre SELFHTML&lt;/strong&gt;&lt;/a&gt; feiern.&lt;/p&gt;
&lt;p&gt;Stefan Münz berichtete 2005 aus Anlass des 10-jährigen Bestehens von SELFHTML:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;An einem ungemütlichen Januarabend 1995 saß ich in einer Münchener Kneipe mit dem ahnungsvollen Namen „Forum“.&lt;/em&gt;&lt;br&gt;
&lt;em&gt;Dort hörte ich an einem Nebentisch erstmals jemanden vom so genannten „World Wide Web“ reden. Er schwärmte davon, wie genial es sei, einfach selbst Informationen bereit zu stellen und beliebige andere Informationen von anderen Anbietern zu verlinken. Der Redner benutzte Begriffe wie „Homepage“, „Browser“, „Server“ und „Linklisten“ – es war alles sehr verwirrend.&lt;/em&gt;&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Es wäre bestimmt eine gute Idee, den &lt;em&gt;genius loci&lt;/em&gt; dort wieder einzufangen. Eine kurze Recherche zeigte aber, dass dies aber nicht mehr möglich ist. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; Wahrscheinlich hätten wir uns die Münchner Preise eh&apos; nicht leisten können.&lt;/p&gt;
&lt;p&gt;Deshalb treffen wir &lt;a href=&quot;https://forum.selfhtml.org/events/12&quot; rel=&quot;noopener noreferrer&quot;&gt;uns (wieder - nach 2020) in Mannheim&lt;/a&gt; und hoffen auf zahlreiche Mitglieder, Urgesteine und Ehemalige.&lt;/p&gt;
&lt;p&gt;In den kommenden Wochen und Monaten werden wir immer wieder über geplante Aktivitäten imformieren, aber tragt euch den Termin jetzt schon ein!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Wie_alles_begann_%E2%80%93_Stefan_M%C3%BCnz_erz%C3%A4hlt#Wie_alles_begann_.E2.80.93_Stefan_M.C3.BCnz_erz.C3.A4hlt&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Wie alles begann – Stefan Münz erzählt&lt;/a&gt;&lt;br&gt;
&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik#Anf.C3.A4nge&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;SELFHTML:Verein/Chronik&lt;/a&gt; &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://www.abendzeitung-muenchen.de/muenchen/stadtviertel/das-cafe-forum-macht-nach-26-jahren-dicht-art-541468&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Das Café Forum macht nach 26 Jahren dicht&lt;/a&gt; (AZ vom 31.07.2017) &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/sep/29/workshop-wein-in-wurzburg</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2024-09-29T16:47:26Z</published>
    <updated>2024-09-29T16:47:26Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/sep/29/workshop-wein-in-wurzburg#m1816911" rel="alternate" type="text/html"/>
    <title>Workshop &amp; Wein in Würzburg</title>
    <content type="html">&lt;p&gt;Ende September nutzten wir die zentrale Lage Würzburgs, um uns für ein Wochenende zu treffen und den Stand der Dinge zu besprechen.&lt;/p&gt;
&lt;p&gt;Durch den Verzögerungen beim Vorstandswechsel hatten wir es beim SELF-Treffen in Hannover nicht geschafft, den Jahresabschluss vorzunehmen und den Vorstand zu entlasten. Dies konnte nun in einer 3. (!) &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2024-3&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Mitgliederversammlung (Protokoll)&lt;/a&gt; nachgeholt werden.&lt;/p&gt;
&lt;p&gt;Obwohl die MV über Discord erfolgte, nutzten wir die Gelegenheit zu einem mehrstündigen Vorstandstreffen, um das anstehende Makeover und eine grundlegende
Überarbeitung des Frickl zu besprechen. Nur im Nachhinein lustig war ein vermeintlicher Serverausfall, als wir drei das Wiki, bzw. den Wowbagger-Server nicht mehr erreichen konnten. Der Grund fand sich dann im Netzwerk unseres Tagungsraums, das durch einen Handy-Hotspot ersetzt wurde. Ergebnisse werdet ihr zeitnah sehen.&lt;/p&gt;
&lt;p&gt;Die Mitgliederversammlung ging schnell über die Bühne: Juristisch war die Entlastung des Vorstands nötig; interessanter war die Vorfreude auf das &lt;a href=&quot;https://forum.selfhtml.org/events/12&quot; rel=&quot;noopener noreferrer&quot;&gt;SELF-Treffen in Mannheim&lt;/a&gt;, das vom 23.05.-25.05.2025 in Mannheim stattfinden wird. Dort wird der 30. Geburtstag von SELFHTML gebührend gefeiert!&lt;/p&gt;
&lt;p&gt;Anschließend ging es zum Main, um die letzten Sonnenstrahlen einzufangen.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/bd2b8a6a-7e80-11ef-9bbb-9c6b00263d9f.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/bd2b8a6a-7e80-11ef-9bbb-9c6b00263d9f.jpg?size=medium&quot; alt=&quot;SELFer vor dem alten Kran am Main&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Der Sonntagmorgen diente einerseits einem kurzen Spaziergang zur Marienfestung, andererseits einem längerem Zug durchs Wiki, um neue Baustellen für die Zukunft zu finden!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/may/22/position-absolute-left-50-top-50-transform-translate-50-50</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2024-05-22T13:56:49Z</published>
    <updated>2024-05-22T13:56:49Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/may/22/position-absolute-left-50-top-50-transform-translate-50-50#m1815251" rel="alternate" type="text/html"/>
    <title>Vertikal Zentrieren - endlich gelöst?</title>
    <content type="html">&lt;p&gt;&lt;em&gt;Ach wie war doch ehedem&lt;br&gt;
Das Table Layout so bequem&lt;br&gt;
Ein schneller vertical-align&lt;br&gt;
Ausrichten kann so einfach sein.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Aber, wie wir alle wissen, sind Layout-Tabellen pfui. Und nebenbei auch umständlich. Und unresponsiv. Und Und Und…&lt;/p&gt;
&lt;p&gt;Vertikal zentrieren konnten sie jedoch perfekt. Die Funktionsweise der &lt;code&gt;vertical-align&lt;/code&gt;-Eigenschaft, die den Inhalt einer Tabellenzelle ausrichtet, versuchten Generationen von CSS-Newbies auf andere Elemente zu übertragen und fluchten, wenn nichts ging. Oder etwas Unerwartetes, denn die Spec-Autoren hatten beschlossen, dass man außerhalb von Tabellen mit &lt;code&gt;vertical-align&lt;/code&gt; die Baseline-Ausrichtung von Inline-Elementen steuert. Und das funktioniert so kontra-intuitiv, dass &lt;strong&gt;ich&lt;/strong&gt; es bisher nicht begriffen habe und in diesem Leben wohl auch nicht mehr begreifen werde.&lt;/p&gt;
&lt;p&gt;Seit wir uns von den Layout-Tabellen verabschiedet haben, wurden viele „Techniken“ entwickelt, um eine vertikale Zentrierung zu erreichen, ohne dabei die Größe der Elemente festzuschreiben. Eine der gruseligsten Varianten war die absolute Positionierung und das Zurechtschieben der Elemente mit&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block bad language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.centered&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; absolute&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;left&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 50%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 50%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;transform&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;translate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;-50%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;-50%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Wer nicht weiß, dass top/left ihre Prozente auf den Elterncontainer beziehen und transform seine Prozente auf das transformierte Element, versteht das nie.&lt;/p&gt;
&lt;p&gt;Unser Wiki listet das Flexbox-Layout als Königsweg auf. Man macht den Elterncontainer zur Flexbox und sorgt mit justify-content und align-items dafür, dass das zu zentrierende Element horizontal und vertikal in der Mitte landet. Mit Hilfe des Grid-Layouts kann man Ähnliches erreichen.&lt;/p&gt;
&lt;p&gt;Aber muss man deshalb für jede Zentrierung eine Flexbox oder ein Grid aufmachen? Muss man, wenn der Ausrichtungscontainer nicht nur Text, sondern auch HTML-Elemente als Kinder enthält, noch ein Sicherheits-div oder -span drumherum machen, weil Flexbox oder Grid sonst das Inline-Layout zerstören?&lt;/p&gt;
&lt;p&gt;Die Antwort steht seit 2012 in den Startlöchern. Bereits die erste Fassung der &lt;a href=&quot;https://www.w3.org/TR/2012/WD-css3-align-20120612/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;CSS 3 Spezifikation zum Box Alignment&lt;/a&gt; sah vor, dass die Eigenschaft &lt;code&gt;align-content&lt;/code&gt; auf Blockelemente angewendet werden kann und deren Inhalt vertikal ausrichtet. Oben, Mitte, Unten, wo man es möchte. Die Browserhersteller fanden aber, das sei unwichtig, und haben es nicht implementiert.&lt;/p&gt;
&lt;p&gt;Im März 2024 war es endlich so weit: Die Chromium-basierenden Browser und Safari 17.4 unterstützen die Eigenschaft für &lt;code&gt;display:block&lt;/code&gt;-Elemente. Firefox hat sich einen Monat mehr gegönnt.&lt;/p&gt;
&lt;p&gt;Wie es mit &lt;code&gt;align-content&lt;/code&gt; geht, findet ihr seit heute im Selfhtml Wiki:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/Inhalte_zentrieren&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Inhalte zentrieren&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Rolf&lt;/em&gt;&lt;/p&gt;
&lt;div class=&quot;signature&quot;&gt;-- &lt;br&gt;
sumpsi - posui - obstruxi
&lt;/div&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/may/15/experiment-discord-fazit-nach-einem-jahr</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2024-05-15T03:02:49Z</published>
    <updated>2024-05-15T03:02:49Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/may/15/experiment-discord-fazit-nach-einem-jahr#m1815166" rel="alternate" type="text/html"/>
    <title>Experiment Discord - Fazit nach einem Jahr</title>
    <content type="html">&lt;p&gt;Im Juni &apos;23 wurde vorgeschlagen, den bestehenden &lt;a href=&quot;https://discord.gg/eb9PnjfcGj&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Discord-Server&lt;/strong&gt;&lt;/a&gt; mit Text-Kanälen zu erweitern. Wir, d.h. der Vorstand stimmten zu und wollten das beobachten. Wichtig war uns persönlich, dass dies von anderen aus dem Verein übernommen werden sollte, um nicht bisher Aktiven noch mehr aufzubürden.&lt;/p&gt;
&lt;p&gt;Nach knapp einem Jahr ist es nun Zeit für ein Fazit:&lt;/p&gt;
&lt;h3&gt;1. Grundsätzliches:&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;SELFHTML e.V.&lt;/strong&gt; ist der Trägerverein für die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Doku&lt;/strong&gt;&lt;/a&gt; und Bildungsangebote, unterstützt durch ein Forum (und früher auch einen IRC-Chat).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Discord&lt;/strong&gt; wird von uns seit vielen Jahren für die Online-Mitgliederversammlungen und seit Corona auch für Stammtische genutzt.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; Vorher hatten wir &lt;s&gt;Teamviewer&lt;/s&gt; TeamSpeak und einen privaten BigBlueButton-Server.&lt;/p&gt;
&lt;h3&gt;2. Discord&lt;/h3&gt;&lt;p&gt;Discord ist ein kommerzielles Produkt, auch wenn es scheinbar nichts kostet. Auf der Suche nach Gestaltungsmöglichkeiten stieß ich immer wieder auf kostenpflichtige Abonnements, die eine Formatierung des Aussehens ermöglichen würden. Da verzichten wir dankend!&lt;/p&gt;
&lt;p&gt;Da lobe ich mir das &lt;a href=&quot;https://forum.selfhtml.org/&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;strong&gt;Forum&lt;/strong&gt;&lt;/a&gt;: Das wurde extra so programmiert, um Code mit Syntax-Highlighting übersichtlich zu posten; Die Thread-Struktur zeigt die vorhandenen Antworten.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Übrigens&lt;/strong&gt;: Im Forum gibt es keine Anmeldepflicht!&lt;/p&gt;
&lt;p&gt;Aber als angemeldeter Nutzer kann man das Aussehen personalisieren und zwischen nested- und Einzel-Ansicht der Beiträge auswählen.&lt;/p&gt;
&lt;h3&gt;3. Text-Kanäle&lt;/h3&gt;&lt;p&gt;Angefangen hatte es mit einem eigenen &lt;code&gt;#meme&lt;/code&gt;-Kanal, der  &lt;code&gt;#general&lt;/code&gt; von Spam und Unsinn freihalten sollte. Mittlerweile gab es rund ein Dutzend Kanäle, auf denen wenig Fragen auftauchen.&lt;/p&gt;
&lt;blockquote style=&quot;font-style: italic;&quot;&gt;
Irgendwie erinnert mich die Aufteilung in Themenbereiche an ein Board. Problem bei Boards ist dann immer die Sortierung, die teilweise durch Administratoren geändert wird.
&lt;p&gt;(&quot;Dieser Beitrag wurde verschoben. Klick auf diesen Link, um an die neue Position zu gelangen.&quot;)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Ein solches Verschieben ist bei Discord unmöglich!&lt;/p&gt;
&lt;p&gt;Stefan Münz hatte schon 2002 seine Gedanken zu &lt;a href=&quot;http://webkompetenz.wikidot.com/selfhtml:foren-und-boards&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Foren und Boards&lt;/a&gt; geäußert.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; Konsens für SELFHTML war, dass das Forum &lt;strong&gt;keine&lt;/strong&gt; Fach-Unterforen haben sollte.&lt;/p&gt;
&lt;p&gt;Deshalb wurde auch Discord aufgeräumt:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;#brauche-hilfe&lt;/code&gt; sammelt Fragen. Bei der Beantwortung sollte auf entsprechende Tutorials in der Doku und auf das Forum verwiesen werden.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;#ankündigungen&lt;/code&gt; ist unser Ankündigungskanal, in dem nur Moderatoren schreiben dürfen.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h3&gt;4. Fazit&lt;/h3&gt;&lt;p&gt;Bis jetzt wuchs die Zahl der Abonnenten; es gab aber nur wenige Kontakte mit Neuen, die auch im Wiki aktiv wurden, geschweige denn neue Mitglieder für unseren Verein.&lt;/p&gt;
&lt;p&gt;Allerdings hatte ich Kontakt mit einem unserer &lt;em&gt;volunteers&lt;/em&gt;, der uns wertvolle Impulse für die weitere Arbeit gab.&lt;/p&gt;
&lt;p&gt;Bezüglich der Regeln soll es zwischen Forum und Discord keine Abweichungen geben, daher gelten in Discord die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Forum/Charta_des_SELFHTML-Forums#Verhaltensrichtlinien_f.C3.BCr_alle_Teilnehmer&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Forums-Charta#Verhaltensrichtlinien für alle Teilnehmer&lt;/a&gt;!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Früher hatte mal jemand auf &lt;code&gt;#general&lt;/code&gt; Fragen gestellt, die wir erst 10 Tage später am Stammtisch gesehen hatten.   &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Gedanken: &lt;a href=&quot;http://webkompetenz.wikidot.com/selfhtml:foren-und-boards&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Foren und Boards&lt;/a&gt; –  erschienen: 17.03.2002&lt;br&gt;
von Stefan Münz: Artikel über zwei konkurrierende Modelle für web-basierte Online-Diskussionen –  mit einem Plädoyer für das Foren-Modell &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Ich benachrichtige alle Abonnenten mit einem &lt;code&gt;@everyone&lt;/code&gt;. Wem das zu aufdringlich ist, kann &lt;a href=&quot;https://support.discord.com/hc/de/articles/215253148-Wie-stoppe-ich-everyone-Erw%C3%A4hnungen-von-bestimmten-Servern&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;@everyone-Erwähnungen von bestimmten Servern stoppen&lt;/a&gt; &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/may/08/self-treffen-und-jubilaum-in-hannover</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2024-05-08T18:55:43Z</published>
    <updated>2024-05-08T18:55:43Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/may/08/self-treffen-und-jubilaum-in-hannover#m1815087" rel="alternate" type="text/html"/>
    <title>Der rote Faden</title>
    <content type="html">&lt;p&gt;Letztes Wochenende trafen wir uns in Hannover, um einerseits das ganz normale jährliche Treffen mit &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2024-2&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Mitgliederverammlung&lt;/a&gt; und einem Workshop zu unserem immer noch anstehenden Wiki-Makeover durchzuführen und andererseits das 20-jährige Jubiläum des Vereins zu feiern, der am &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Gr%C3%BCndungsprotokoll_2004&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;21.05.2004 gegründet&lt;/a&gt; wurde.&lt;/p&gt;
&lt;div style=&quot;float:right;margin-left:1em;&quot;&gt;&lt;img src=&quot;/images/2612a38c-0d71-11ef-b18c-9c6b00263d9f.jpg&quot; width=&quot;400&quot; alt=&quot;Roter Faden am Leibnizufer,  von Bernd Schwabe in Hannover&quot;&gt;
&lt;/div&gt;
Jürgen B kam mit seinem Fahrrad als erster in die Innenstadt und entdeckte einen &lt;strong&gt;roten Faden&lt;/strong&gt;, der die Sehenswürdigkeiten der Innenstadt miteinander verband. Als wir uns „unterm Schwanz“ trafen, folgten wir ebendiesem entlang der Hannöverschen Sehenswürdigkeiten bis zu unserem Freitagstreffpunkt. Dort begann der informelle Teil, bei dem alle halbe Stunde ein lang verloren geglaubter Freund begrüßt wurde. 
&lt;p&gt;Der Raum im Freizeitheim erwies sich als freundlicher Saal mit Balkon ins Grüne und einem Beamer, der schon lief. Leider erwies sich dieser bei der Vorstellung der im November beschlossenen &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Farbpalette&lt;/a&gt; als wenig lichtstark, sodass wir uns  unsere eigenen Geräte  zu Hilfe nehmen mussten.&lt;/p&gt;
&lt;p&gt;Thema seit November war die Frage, ob es ein neues Logo bräuchte. Viele Vereinsmitglieder sahen darin die Chance verkrustete Strukturen aufzubrechen, andere waren mit dem Bestehenden eigentlich ganz zufrieden. Nach einer lebhaften Diskussion und Abstimmung steht nun fest:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:SELFHTML-Logos&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Das alte Logo ist das neue Logo!&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div style=&quot;float:right;margin-left:1em;&quot;&gt;&lt;img src=&quot;/images/b92ad2fa-1142-11ef-b989-9c6b00263d9f.svg&quot; alt=&quot;Logo des SELFHTML e.V&quot;&gt;
&lt;/div&gt;
&lt;p&gt;Einzige Änderung: Die Farben sind an die neue Farbpalette angepasst!&lt;/p&gt;
&lt;p&gt;In einem zweiten Schritt werden eine (oder mehrere) Wort-Bild-Marken, die auf dieser Bildmarke, bzw. den darin verwendeten Farben und Schriften basieren, entwickelt und dann im Forum vorgestellt. Bitte habt dafür ein wenig Geduld, bis wir euch diese Entwürfe vorstellen!&lt;/p&gt;
&lt;p&gt;Nach einer kurzen Unterbrechung wurde der Nachmittag für einen Workshop genutzt. Das Makeover ist 2022 ja leider steckengeblieben - mittlerweile ist das Thema Barrierefreiheit aber noch wichtiger geworden. Deshalb haben wir erneut unsere Vorlagen und das UI des Wiki unter die Lupe genommen. Die Bestandsaufnahme, die von einer kreativen und sachlichen Atmosphäre geprägt war, führte zu umfangreichen Verbesserungen, die in den nächsten Tagen und Wochen schrittweise umgesetzt werden.&lt;/p&gt;
&lt;div style=&quot;float:right;margin-left:1em;&quot;&gt;&lt;img src=&quot;/images/9d771e1c-11a4-11ef-9a36-9c6b00263d9f.jpg&quot; width=&quot;400&quot; alt=&quot;Stairway, eine verbogene und zerquetschte Wendeltreppe von Maria Sosnowska im Sprengelmuseum Hannover&quot;&gt;
&lt;/div&gt;
Wir beendeten unseren Workshop relativ früh, um noch die Abendsonne am Maschsee zu genießen. Mit einem Spaziergang entlang des roten Fadens gingen wir zurück in Richtung Unterkunft. 
&lt;p&gt;Am Sonntag sollte es wie immer mal um etwas anderes als Fachsimpeleien geben. Nachdem wir lange vergeblich den durch Bauarbeiten ins zweite Obergeschoss verlegten Eingang des Sprengelmuseums gesucht hatten, konnten wir endlich die Kunstwerke von Picasso und Max Beckmann bestaunen und genießen - zum Schluss fanden wir sogar noch unseren roten Faden wieder.&lt;/p&gt;
&lt;p&gt;Maria Sosnowska hatte eine Wendeltreppe so bearbeitet, dass sie nur noch als Knäuel von Blech und Plasik erschien - und doch zeigte sich der rote Faden in Form des Geländers, der steil nach oben führte.&lt;/p&gt;
&lt;p&gt;Was an diesem Wochenende etwas zu kurz kam, war das Jubiläum des Vereins an sich. Da haben wir &lt;a href=&quot;https://forum.selfhtml.org/events/12&quot; rel=&quot;noopener noreferrer&quot;&gt;mit dem nächsten Treffen&lt;/a&gt;, dass 30 Jahre Projekt SELFHTML feiert, eine neue Aufgabe, die wir ebenfalls in den nächsten Wochen angehen werden.&lt;/p&gt;
&lt;div&gt;
Matthias Scharwies&lt;br&gt;
Vorsitzender SELFHTML e.V.
&lt;/div&gt;
&lt;div style=&quot;text-align:center; margin-block:2em;&quot;&gt;
&lt;strong style=&quot;color:oklch(50% 0.2 35);font-size:1.25em;&quot;&gt;Save the Date:&lt;/strong&gt;&lt;br&gt;SELF-Treffen 2025 (30 Jahre Projekt SELFHTML) &lt;br&gt;am 23.-25.05.2025
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;/images/3fa8207c-11a6-11ef-9fd1-9c6b00263d9f.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/3fa8207c-11a6-11ef-9fd1-9c6b00263d9f.png?size=medium&quot; alt=&quot;Grafik, die den Übergang vom klassischen Netz-Logo in braun zu unserem weißen S im Jahre 2024 zeigt und das Jubiläum des Vereins SELFHTML e.V. illustriert.&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/may/02/barrierefrei-brauch-ich-das-ja</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2024-05-02T11:04:33Z</published>
    <updated>2024-05-02T11:04:33Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/may/02/barrierefrei-brauch-ich-das-ja#m1814767" rel="alternate" type="text/html"/>
    <title>Barrierefrei - Brauch&apos; ich das? - Ja!</title>
    <content type="html">&lt;p&gt;Im Forum kommt es immer wieder zu rhetorischen Fragen, deren Antwort aus Sicht des Fragenden schon feststeht:&lt;br&gt;&lt;br&gt;&lt;/p&gt;
&lt;div style=&quot;color: #a94442;background-color: #f2dede;padding: 1em;border-left: thick solid;&quot;&gt;&lt;pre&gt;
Das soll jetzt wirklich nicht aggressiv oder trollig 
klingen, aber ... 
Warum sollte ich mir für jedes Bild ein blödsinniges 
alt-Tag (sic!) ausdenken?
&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Warum das alt-Attribut wichtig ist, stand schon in der verlinkten Wiki-Seite:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Einbindung_mit_img#alt_-_Beschreibungen_f.C3.BCr_Bilder_und_Grafiken&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Bilder im Internet/Einbindung mit img&lt;/a&gt;:&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;Es gibt mehrere Szenarien, warum Bilder nicht angezeigt werden.&lt;/li&gt;
&lt;li&gt;Ohne alt-Attribut wird &lt;strong&gt;irgendetwas&lt;/strong&gt; also z.B. den Dateinamen ohne Endung - im schlimmsten Fall etwas wie dsc_img_2345 - vorgelesen, wenn es keinen &lt;em&gt;accessible Name&lt;/em&gt; (zugänglichen Namen) gibt. Wie dieser gebildet wird, regelt eine eigenen Spezifikation, die &lt;a href=&quot;https://www.w3.org/TR/accname-1.1/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Accessible Name and Description Computation 1.1&lt;/a&gt; &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/li&gt;
&lt;li&gt;Ein leeres alt-Attribut &lt;code&gt;alt=&quot;&quot;&lt;/code&gt; verhindert dies; genügt formal den Kriterien des Validators, aber nicht den Menschen.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Einige Tage später legte unser &lt;em&gt;anonymous&lt;/em&gt; nach:&lt;/p&gt;
&lt;div style=&quot;color: #a94442;background-color: #f2dede;padding: 1em;border-left: thick solid;&quot;&gt;&lt;pre&gt;
Das ändert natürlich nichts daran, dass man Websites, 
auf die Menschen mit Einschränkungen angewiesen sein könnten, 
auch entsprechend so gestalten sollte.
&lt;/pre&gt;&lt;/div&gt;
&lt;h3&gt;&lt;strong&gt;1. Webseiten werden für (alle) Menschen gemacht!&lt;/strong&gt;&lt;/h3&gt;&lt;div style=&quot;color: #a94442;background-color: #f2dede;padding: 1em;border-left: thick solid;&quot;&gt;&lt;pre&gt;
„Meine Nutzer sind mit meiner Webseite zufrieden 
und ich habe noch nie Beschwerden gehört.“
&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Das freut mich für dich, aber im allgemeinen suchen Menschen nach passenden Seiten und verlassen diese schnell wieder, wenn sie ihnen nicht gefallen, ohne einen Evaluationsbogen auszufüllen oder ein Feedback zu geben.&lt;/p&gt;
&lt;div style=&quot;color: #a94442;background-color: #f2dede;padding: 1em;border-left: thick solid;&quot;&gt;&lt;pre&gt;
„Wie viel Prozent der Nutzer sind das? 
Auf die paar kann ich verzichten!“
&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Hier gibt es zwei Probleme: Das Ausbleiben von Beschwerden, bzw. von Nutzern ist unbemerkt.&lt;/p&gt;
&lt;p&gt;Im zweiten Weltkrieg wurde überlegt, wie man Flugzeuge gegen feindlichen Beschuss stärker schützen könnte. Dabei wurde analysiert, welche Einschusslöcher zurückgekehrte Flugzeuge hätten und wie man diese Stellen mit Platten verstärken könnte.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/f555e438-086c-11ef-9104-9c6b00263d9f.svg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/f555e438-086c-11ef-9104-9c6b00263d9f.svg&quot; alt=&quot;Illustration of hypothetical damage pattern on a WW2 bomber. Based on a not-illustrated report by Abraham Wald (1943), picture concept by Cameron Moll (2005, claimed on Twitter and credited by Mother Jones), new version by McGeddon based on a Lockheed PV-1 Ventura drawing (2016), vector file by Martin Grandjean (2021).&quot;)&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Was auffiel: Es gab keine Treffer im Bereich der Motoren und der Kabine! Waren sie schon ausreichend geschützt - Nein: Treffer dort führten dazu, dass das Flugzeug abstürzte und für eine Untersuchung nicht zurückkehrte.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Bezogen auf unsere Webseiten muss jeder Autor überlegen, wie er alle Nutzer erreichen kann:&lt;/p&gt;
&lt;p&gt;Und da würde ich vor unseren Alternativtexten ansetzen. Wichtiger als jede technische Struktur ist der Inhalt und die Form, in der sie dargeboten wird.&lt;/p&gt;
&lt;p&gt;Häufigster Wunsch bei Umfragen ist verständlicher Text, bzw. leichte Sprache für den Inhalt&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Webdesign/Content_is_king!&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Content is king!&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Barrierefreiheit/leichte_Sprache&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Barrierefreiheit/leichte Sprache&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Wenn der Inhalt dann durch Grafiken illustriert, d.h. veranschaulicht wird, sollte für jede Grafik eine kurze Beschreibung gefunden werden. Das macht weniger
Arbeit als das Zuschneiden und Aufhellen im Grafikprogramm. Auch ein &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Sprechender_Link&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;sprechender Name&lt;/a&gt; anstelle der kryptischen Bezeichnungen der Kameras hilft, das Bild später wiederzufinden.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Achtung&lt;/strong&gt;: Das &lt;strong&gt;nachträgliche&lt;/strong&gt; Hinzufügen von einer Vielzahl von Alternativtexten artet in Arbeit aus!&lt;/p&gt;
&lt;div style=&quot;color: #a94442;background-color: #f2dede;padding: 1em;border-left: thick solid;&quot;&gt;
„Auch wenn der Validator meckert - meine Webseite funzt doch?“
&lt;/div&gt;
&lt;p&gt;Der Validator ist keine Kontrollinstanz, sondern ein Werkzeug um sicherzustellen, dass Webstandards eingehalten werden. Das scheint heute nicht mehr so wichtig, weil Browser nicht mehr abstürzen. Trotzdem sollten auch nicht-professionelle Webseitenbastler anstreben, ihre Webseiten so gut wie möglich zu bauen. Und dazu gehören nun einmal inklusives Design, dass alle Nutzer anspricht!&lt;/p&gt;
&lt;p&gt;Für Nutzer, die ihre bestehende Webseite auf Schwachstellen überprüfen wollen:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Barrierefreiheit/Webseiten_auf_Barrierefreiheit_testen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Webseiten auf Barrierefreiheit testen&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;2. Gesetzliche Pflicht&lt;/h3&gt;&lt;p&gt;Nachdem Behörden und öffentliche Institutionen ihre Webseiten schon seit 2019 barrierefrei gestalten müssen, verpflichtet das seit 2021 beschlossene &lt;a href=&quot;https://bfsg-gesetz.de/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Barrierefreiheitsstärkungsgesetz&lt;/a&gt; ab 28.06.2025 Webseiten zur Barrierefreiheit für gewerblichen Unternehmen mit Ausnahme von Kleinstunternehmen.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Barrierefreiheit/Was_ist_das_eigentlich%3F#Gesetzliche_Grundlagen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Barrierefreiheit/Gesetzliche Grundlagen&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Do it right the first time!&lt;/strong&gt;&lt;/em&gt; Dann werden keine langwierigen Nachbesserungen nötig!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Die &quot;Computation&quot; des accName ist wirklich so kompliziert. Auch title-Attribut, aria-Attribute und anderes können einbezogen werden.&lt;br&gt;
&lt;a href=&quot;https://www.w3.org/TR/accname-1.1/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Accessible Name and Description Computation 1.1&lt;/a&gt; &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://de.wikipedia.org/wiki/Survivorship_Bias&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Survivorship Bias&lt;/a&gt; (de.wikipedia.org) &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/apr/16/offline-wiki-3-jahre-spater</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2024-04-16T19:00:03Z</published>
    <updated>2024-04-16T19:00:03Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/apr/16/offline-wiki-3-jahre-spater#m1814594" rel="alternate" type="text/html"/>
    <title>Offline-Wiki - 3 Jahre später</title>
    <content type="html">&lt;p&gt;Hallo zusammen,&lt;/p&gt;
&lt;p&gt;endlich ist es mal wieder gelungen, dass Offline-Wiki zu aktualisieren. Der Stand ist jetzt der vom 12. April 2024, und es ist um über 100MB gewachsen.&lt;/p&gt;
&lt;p&gt;Der Grund sind nicht die Textmassen, die wir erfasst haben, sondern der Umstand, dass wir viele Grafiken hinzugefügt haben und Mediawiki – gerade für SVG-Bilder – Vorschauversionen in vielen Auflösungsstufen erzeugt. Dadurch sammelt sich eine Menge an. Der Bilderordner umfasst 300MB, und 225MB davon sind die Vorschaugrafiken. Leider ist das nicht zu vermeiden.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML/Offline-Wiki&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Hier geht&apos;s zu den Downloads und zur Installationsanleitung&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Vielen Dank nochmal an Dedlfix, dass er den Offline-Prozess so gescriptet hat, dass auch ein Linux-Noob wie ich das hinbekommen habe  &lt;/p&gt;
&lt;p&gt;Was die weiteren Updatezyklen des Offlinewiki angeht, gelobe ich Besserung.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Rolf&lt;/em&gt;&lt;/p&gt;
&lt;div class=&quot;signature&quot;&gt;-- &lt;br&gt;
sumpsi - posui - obstruxi
&lt;/div&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/mar/18/wir-erzwingen-ihre-einstimmung</id>
    <author>
      <name>Felix Riesterer</name>
    </author>
    <published>2024-03-18T09:15:06Z</published>
    <updated>2024-03-18T09:15:06Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/mar/18/wir-erzwingen-ihre-einstimmung#m1814147" rel="alternate" type="text/html"/>
    <title>Wir erzwingen Ihre Einstimmung!</title>
    <content type="html">&lt;p&gt;In der Netzgemeinde hat sich der Begriff des &lt;strong&gt;Cookie-Terror-Banners&lt;/strong&gt;
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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/ecc3642e-e505-11ee-a4dd-9c6b00263d9f.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/ecc3642e-e505-11ee-a4dd-9c6b00263d9f.png?size=medium&quot; alt=&quot;Ansicht der Seite heise.de mit offenem Cookie-Banner&quot; title=&quot;Heise-Startseite mit Cookie-Banner&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Entweder man schont seine Nerven und willigt brav in alles ein, was &lt;a href=&quot;https://blog.fefe.de/?ts=9ebe1abc&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;dem
Ausspähen von Daten Tür und Tor
öffnen&lt;/a&gt; kann, oder man installiert
sich ein passendes Browser-Plugin, das einem die Werbung und
datenschnüffelnde Cookies vom Hals hält wie z.B. &lt;a href=&quot;https://ublockorigin.com/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;uBlock
origin&lt;/a&gt;.
Wir wären aber nicht SELFHTML, wenn wir nicht auch eine Idee hätten, wie man sich nervige Einblendungen vom
Hals halten könnte.&lt;/p&gt;
&lt;p&gt;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?&lt;/p&gt;
&lt;h3&gt;Userscripte im Browser via Plugin&lt;/h3&gt;&lt;p&gt;Mit entsprechenden Browser-Plugins wie z.B.
&lt;a href=&quot;https://www.tampermonkey.net/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Tampermonkey&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;JavaScript im Browser bietet mit dem
&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;MutationObserver&lt;/a&gt;
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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// ==UserScript==&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @name Anti Terror Banner Script&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @namespace http://tampermonkey.net/&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @version 0.1&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @description try to take over the world!&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @author Anti Terrorist Banner Coder&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @match https://*/*&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @match http://*/*&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @icon none&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @grant none&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// @run-at document-end&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// ==/UserScript==&lt;/span&gt;
 
&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&apos;use strict&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; terrorBanners &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// sp_message_container&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;[id^=&quot;sp_message_container&quot;]&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;classes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;html&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;sp-message-open&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// onetrust&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;#onetrust-consent-sdk&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// ion-modal&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ion-modal&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// cc_banner&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;.cc-banner&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// usercentrics&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;#usercentrics-root&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// didomi&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;#didomi&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;classes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;body&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;didomi-popup-open&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// cmpbox&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;#cmpbox, #cmpbox2&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;body&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;style&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// cmp-modal&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token literal-property property&quot;&gt;classes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;*&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;modal-backdrop&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;*&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;modal-cmp&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// needsclick&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;div.needsclick&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// snigel&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;div.snigel-cmp-framework&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// gdpr-consent-tool&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;elements&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;div#gdpr-consent-tool-wrapper&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; observer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;MutationObserver&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;mutations&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   
    terrorBanners&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;banner&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
     
      &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;elements&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        Array&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelectorAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;elements&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
          &lt;span class=&quot;token parameter&quot;&gt;element&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; element&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;parentNode&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;removeChild&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;element&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
       
      &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;attributes&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; attributes &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
          banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;attributes &lt;span class=&quot;token keyword&quot;&gt;instanceof&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Array&lt;/span&gt;
          &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;attributes
          &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;attributes&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

        attributes&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;data&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;element &lt;span class=&quot;token operator&quot;&gt;&amp;&amp;&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
            Array&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelectorAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;element&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
              &lt;span class=&quot;token parameter&quot;&gt;element&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; element&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;removeAttribute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
          &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

      &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classes&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; classes &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
          banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classes &lt;span class=&quot;token keyword&quot;&gt;instanceof&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Array&lt;/span&gt;
          &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classes
          &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;banner&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classes&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

        classes&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;data&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;element &lt;span class=&quot;token operator&quot;&gt;&amp;&amp;&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
            Array&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;from&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelectorAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;element&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
              &lt;span class=&quot;token parameter&quot;&gt;element&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; element&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;remove&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
          &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  observer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;observe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;body&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token literal-property property&quot;&gt;subtree&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token literal-property property&quot;&gt;childList&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token literal-property property&quot;&gt;attributes&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token literal-property property&quot;&gt;characterData&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token literal-property property&quot;&gt;attributeOldValue&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token literal-property property&quot;&gt;characterDataOldValue&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Im großen Array &lt;code&gt;terrorBanners&lt;/code&gt; stehen einzelne Objekte, in denen die
jeweiligen Erkennungsmerkmale hinterlegt sind. Ein solches Objekt kann
diese Eigenschaften haben:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;elements - Selektor für Elemente, die zu entfernen sind&lt;/li&gt;
&lt;li&gt;attributes - Objekt (oder ein Array solcher Objekte), welches Namen
von Attributen definiert, die von Objekten entfernt werden müssen:
&lt;ul&gt;
&lt;li&gt;element - Selektor für Elemente, die dieses Attribut haben können&lt;/li&gt;
&lt;li&gt;name - Name des Attributs&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;classes - Objekt (oder ein Array solcher Objekte), welches Namen von
Klassen definiert, die von Objekten entfernt werden müssen:
&lt;ul&gt;
&lt;li&gt;element - Selektor für Elemente, die diese Klasse haben können&lt;/li&gt;
&lt;li&gt;name - Name der Klasse&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Fazit&lt;/h3&gt;&lt;p&gt;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.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/feb/17/when-das-w3c-aufsassig-wird-css-conditionals-level-5-und-die-kompatibilitat</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2024-02-17T16:47:04Z</published>
    <updated>2024-02-17T16:47:04Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/feb/17/when-das-w3c-aufsassig-wird-css-conditionals-level-5-und-die-kompatibilitat#m1813608" rel="alternate" type="text/html"/>
    <title>@when das W3C aufSASSig wird - CSS Conditionals Level 5 und die Kompatibilität</title>
    <content type="html">&lt;p&gt;Die CSS Conditionals 5 Spezifikation entwickelt sich. Aber sie haben ein Problem: SASS&lt;/p&gt;
&lt;p&gt;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 &lt;code&gt;@if&lt;/code&gt; – und damit wildert es im Wald der generellen Syntax für @-Regeln, die CSS im Browser verwendet.&lt;/p&gt;
&lt;p&gt;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 &lt;code&gt;@media&lt;/code&gt;-Queries für Medientypen und Medienfeatures, sowie &lt;code&gt;@supports&lt;/code&gt;-Abfragen für Eigenschaften und Selektoren.&lt;/p&gt;
&lt;p&gt;Mit Stufe 5 wird &lt;code&gt;@supports&lt;/code&gt; um Abfragen für Font-Technologien und Font-Formate erweitert. Die zugehörige Syntax lautet&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;   &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@supports&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;font-tech&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; ... &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
   &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@supports&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;font-format&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;format&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; ... &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Als Format können diejenigen Formate angegeben werden, die in der format()-Angabe der src-Eigenschaft einer &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;@font-face Definition&lt;/a&gt; zulässig sind, also beispielsweise &lt;code&gt;woff2&lt;/code&gt;, &lt;code&gt;truetype&lt;/code&gt; oder &lt;code&gt;eot&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Font-Technologien sind etwas, was in &lt;a href=&quot;https://www.w3.org/TR/css-fonts-4/#font-tech-definitions&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Abschnitt 11 der CSS Fonts 4 Spezifikation&lt;/a&gt; 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.&lt;/p&gt;
&lt;h3&gt;Und was hat es nun mit SASS auf sich?&lt;/h3&gt;&lt;p&gt;Die dritte Neuerung, die uns CSS Conditionals 5 bringen wird, ist eine Zusammenführung von &lt;code&gt;@media&lt;/code&gt;- und &lt;code&gt;@supports&lt;/code&gt;-Abfragen in eine generelle Abfragesyntax, die auch Abfrageketten und einen Defaultzweig ermöglicht. Also das, was Programmierer schon längst als&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block&quot;&gt;if (bedingung)
   ...
else if (bedingung)
   ...
else
   ...
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;kennen.&lt;/p&gt;
&lt;p&gt;Und hier liegt die Crux: Die Spezifikation verwendet eine @-Regel Syntax, aber &lt;code&gt;@if&lt;/code&gt; ist bereits von SASS reserviert worden. Würde natives CSS nun ein &lt;code&gt;@if&lt;/code&gt; einführen, so wäre entweder SASS gezwungen, dem Präprozessor genug Intelligenz einzuhauchen, um ein SASS-&lt;code&gt;@if&lt;/code&gt; von einem CSS-nativen &lt;code&gt;@if&lt;/code&gt; zu unterscheiden – oder alle SASS-Quellen müssten von &lt;code&gt;@if&lt;/code&gt; auf ein &lt;code&gt;@-sass-if&lt;/code&gt; oder etwas ähnliches umsteigen.&lt;/p&gt;
&lt;p&gt;Weil SASS eine gewaltige Verbreitung hat, wollte man das vermeiden. Die Spezifikation verwendet statt &lt;code&gt;@if&lt;/code&gt; deshalb eine Syntax mit &lt;code&gt;@when&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block&quot;&gt;@when bedingung {
   ...
}
@else bedingung {
...
}
@else {            /* Default-Fall */
   ...
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Als Bedingung kommt eine Syntax zum Einsatz, wie sie für &lt;code&gt;@supports&lt;/code&gt; eingeführt wurde. Für die bisherigen Abfragen auf Medienfeatures und unterstützte Eigenschaften werden die Pseudofunktionen &lt;code&gt;media()&lt;/code&gt; und &lt;code&gt;supports()&lt;/code&gt; eingeführt. &lt;code&gt;selector()&lt;/code&gt;, &lt;code&gt;font-format()&lt;/code&gt; und &lt;code&gt;font-tech()&lt;/code&gt; wird von &lt;code&gt;@supports&lt;/code&gt; übernommen:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block&quot;&gt;@when media(width &gt; 50em) 
@when supports(background-music:url(foo.wav))
@when selector( body:has(:passive) )
@when font-format(woff2)
@when font-tech(color-COLRv0)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Die Abfragen auf background-music und :passive sollten in aktuellen Browsern natürlich fehlschlagen…&lt;/p&gt;
&lt;p&gt;Das lässt sich auch mit &lt;code&gt;AND&lt;/code&gt; und &lt;code&gt;OR&lt;/code&gt; kombinieren, die Spec enthält dieses Beispiel:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@when&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;media&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;width &gt;= 400px&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;and&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;media&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;pointer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; fine&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;and&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;supports&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; flex&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* A */&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@else&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;supports&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;caret-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; pink&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;and&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;supports&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;double-rainbow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* B */&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@else&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/* C */&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Das ist ziemlich großartig, und erspart uns umständliche Doppelabfragen auf &lt;code&gt;width &gt; 50em&lt;/code&gt; und &lt;code&gt;width &lt;= 50em&lt;/code&gt;. Her damit, sag ich!&lt;/p&gt;
&lt;p&gt;Womit man aber nicht gerechnet hatte, war der Aufschrei der Community. Wie man denn auf die Idee käme, das so naheliegende &lt;code&gt;@if&lt;/code&gt; 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.&lt;/p&gt;
&lt;p&gt;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 &lt;code&gt;@media&lt;/code&gt;-Featurequeries und eine &lt;code&gt;@supports&lt;/code&gt;-Regel einführte. Bei SASS kam damals niemand auf die Idee, dass 2021 ein erster Working Draft für CSS-Bedingungen mit &lt;code&gt;@when&lt;/code&gt; (oder &lt;code&gt;@if&lt;/code&gt; oder &lt;code&gt;@on&lt;/code&gt; oder &lt;code&gt;@case&lt;/code&gt; 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.&lt;/p&gt;
&lt;p&gt;Gut, die Diskussion zu &lt;code&gt;@if&lt;/code&gt; vs &lt;code&gt;@when&lt;/code&gt; 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 &lt;strong&gt;hätte&lt;/strong&gt; man erwarten können, dass SASS nicht den &quot;Namensraum&quot; 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.&lt;/p&gt;
&lt;p&gt;Werden wir nun als Partner für &lt;code&gt;@else&lt;/code&gt; ein &lt;code&gt;@when&lt;/code&gt; bekommen? Oder doch ein &lt;code&gt;@if&lt;/code&gt;? Werden SASS-User einen globalen Search&amp;Replace auf ihre Codebasis machen müssen, um &lt;code&gt;@if&lt;/code&gt; durch &lt;code&gt;@-if&lt;/code&gt; zu ersetzen? Oder gar eine Option, um &lt;code&gt;@if&lt;/code&gt; durch &lt;code&gt;%if&lt;/code&gt; zu ersetzen? In den Diskussions-Threads ist es stiller geworden, und bislang steht in der CSS Conditionals 5 Spec immer noch ein &lt;code&gt;@when&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;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 &quot;Arbeit begonnen&quot;. 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.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Quellen&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.w3.org/TR/css-conditional-5/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;CSS Conditionals Level 5 Spezifikation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Kingsley Lubahn auf blog.logrocket.com: &lt;a href=&quot;https://blog.logrocket.com/extending-css-when-else-chains-first-look/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Extending CSS when/else chains: A first look&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://tabatkins.github.io/specs/css-when-else/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Tab Atkins erste Idee zu @when und @else&lt;/a&gt; und &lt;a href=&quot;https://github.com/w3c/csswg-drafts/issues/112&quot; rel=&quot;noopener noreferrer&quot;&gt;eine Diskussion&lt;/a&gt; dazu.&lt;/li&gt;
&lt;li&gt;Sie führt zum &lt;a href=&quot;https://github.com/w3ctag/design-principles/issues/335&quot; rel=&quot;noopener noreferrer&quot;&gt;Streit um&apos;s @when&lt;/a&gt; – Lea Verou vs Tab Atkins (Google) und Natalie Weizenbaum (SASS)&lt;/li&gt;
&lt;/ul&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/jan/31/navigation-alles-inclusive</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2024-01-31T09:40:12Z</published>
    <updated>2024-01-31T09:40:12Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/jan/31/navigation-alles-inclusive#m1813156" rel="alternate" type="text/html"/>
    <title>Navigation - alles inclusive</title>
    <content type="html">&lt;p&gt;Eigentlich sollten alle Fragen, die es je zu Navigationen geben könnte, bereits in unserer Doku beantwortet worden sein.&lt;/p&gt;
&lt;p&gt;Allerdings haben sich die Anforderungen über die Jahre immer wieder geändert, sodass es Zeit für eine Bestandsaufnahme und Komplett-Überarbeitung wurde:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Navigation&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Navigation&lt;/a&gt;&lt;/strong&gt; - alles über Menüs und Navigationen&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Konventionen geben Sicherheit!&lt;/h3&gt;&lt;p&gt;Bereits 2003 gab es in der alten Doku eine &lt;a href=&quot;https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Dynamische Navigationsleiste&lt;/a&gt;, die folgende Warnung enthielt:&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Beachten Sie:&lt;/strong&gt; Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. …&lt;/em&gt; &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Aus heutiger Sicht fällt die Schwachstelle sofort auf: Niemand will raten oder nachlesen müssen, um eine Navigation bedienen zu können.&lt;/p&gt;
&lt;p&gt;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 &lt;strong&gt;Konventionen, die Anwendern vertraut sind&lt;/strong&gt;, damit Webseiten schnell und kom­for­tabel bedient werden können.&lt;/p&gt;
&lt;p&gt;Solch ein gewohntes &lt;em&gt;Look &amp; Feel&lt;/em&gt; berücksichtigt …&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;die Leserichtung von oben links nach rechts und positioniert die Navigation gut sichtbar.&lt;/li&gt;
&lt;li&gt;Die aktuelle Seite ist gekennzeichnet und&lt;/li&gt;
&lt;li&gt;die Linktexte sind klar und verständlich, damit Nutzer schnell und sicher zur gewünschten Seite kommen.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Um eine Navigation übersichtlich zu halten, kann sie zweitrangige Links zunächst verbergen und diese durch eine Benutzerinteraktion sichtbar machen:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Navigation/Dropdown-Menü&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Navigation/Flyout-Menü&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Dropdown ohne JavaScript?&lt;/h3&gt;&lt;p&gt;Früher war eine reine CSS-Lösung, die mit :hover aufgeklappt wurde, möglich, heute reicht das nicht mehr!&lt;/p&gt;
&lt;p&gt;Warum? Heute ist das Netz größer und vielfältiger geworden:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Mehr als die Hälfte der Nutzer surft mit dem Handy oder Tablet. Dort gibt es keine Maus!&lt;/li&gt;
&lt;li&gt;Sehbehinderte - aber auch Autofahrer und Menschen am Herd - lassen sich Seiten vorlesen.&lt;/li&gt;
&lt;li&gt;In ihrer Motorik eingeschränkte Menschen - aber auch  IT-Profis navigieren lieber mit der Tab-Taste.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;CSS-basierte Dropdown-Menüs basierten darauf, dass ein Nutzer einen Link zweifach benutzen konnte:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;code&gt;:hover&lt;/code&gt; mit der Maus öffnet das zuvor verborgene Submenü&lt;/li&gt;
&lt;li&gt;ein Klick aktiviert den Link und führt zur neuen URL&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Das im überarbeiteten Tutorial vorgestellte Drowpdown-Menü wird Schritt für schritt aufgebaut und erklärt; bietet aber auch eine &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC#Kopiervorlage_f.C3.BCr_Ungeduldige&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Kopiervorlage für Ungeduldige&lt;/strong&gt;&lt;/a&gt;. Sie kann in bestehende Seiten eingebunden werden und erweitert eine „normale“ Navigation mit Liste und Unterlisten zu einem zugänglichen Drowpdown-Menü.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;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 &lt;code&gt;parentNode&lt;/code&gt;-Kette, , weil es den IE6 berücksichtigen musste.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png?size=medium&quot; alt=&quot;Screenshot einer Kette von parentNode, weil es den IE6 berücksichtigen musste&quot; title=&quot;Screenshot einer `parentNode`-Kette, weil es den IE6 berücksichtigen musste &quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Hoffen wir, dass unsere 2024er Version auch mehrere Jahre übersteht!  &lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Dynamische Navigationsleiste&lt;/a&gt; (de.selfhtml.org/dhtml/beispiele/navigation.htm) &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Museum/Eine_zug%C3%A4ngliche_Multilevel-Dropdown-Navigation&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Museum/Eine zugängliche Multilevel-Dropdown-Navigation&lt;/a&gt; von Beatovich, 2011 &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/jan/21/oklch-farbe-und-helligkeit</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2024-01-21T08:01:14Z</published>
    <updated>2024-01-21T08:01:14Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/jan/21/oklch-farbe-und-helligkeit#m1812893" rel="alternate" type="text/html"/>
    <title>OKLCH: greller, bunter und so weiter?</title>
    <content type="html">&lt;p&gt;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:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Farbe&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Farbe&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Unsere Farbpalette bestand aus vier Grundtönen und entsprechenden Pastellfarben:&lt;/p&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td style=&quot;background:hsl(201 50% 40%);color:white;padding:0.5em 3em;&quot;&gt;blau&lt;/td&gt; 
&lt;td style=&quot;background:hsl(201 50% 40% /0.1);padding:0.5em 1em;&quot;&quot;&gt;hsl(201 50% 40% /0.1)&lt;/td&gt;
&lt;/tr&gt; 
&lt;tr&gt;
&lt;td style=&quot;background:hsl(44 75% 50%);padding:0.5em 3em;&quot;&gt;gelb&lt;/td&gt; 
&lt;td style=&quot;background:hsl(44 75% 50% /0.1);padding:0.5em 1em;&quot;&quot;&gt;hsl(44 75% 50% /0.1)&lt;/td&gt;
&lt;/tr&gt; 
&lt;tr&gt;
&lt;td style=&quot;background:hsl(13 96% 40%);color:white;padding:0.5em 3em;&quot;&gt;rot&lt;/td&gt; 
&lt;td style=&quot;background:hsl(13 96% 40% /0.1);padding:0.5em 1em;&quot;&quot;&gt;hsl(13 96% 40% /0.1)&lt;/td&gt;
&lt;/tr&gt; 
&lt;tr&gt;
&lt;td style=&quot;background:hsl(80 45% 50%);padding:0.5em 3em;&quot;&gt;grün&lt;/td&gt; 
&lt;td style=&quot;background:hsl(80 45% 50% /0.2);padding:0.5em 1em;&quot;&quot;&gt;hsl(80 45% 50% /0.2)&lt;/td&gt;
&lt;/tr&gt; 
&lt;/table&gt;
&lt;p&gt;Erste Reaktion unserer Mitglieder: &lt;strong&gt;„Wo sind die Kommas?“&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;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!&lt;/p&gt;
&lt;p&gt;Zweite Reaktion: &lt;strong&gt;„Warum ist der Alphawert bei Hellgrün anders?“&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;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 (&lt;em&gt;&lt;strong&gt;H&lt;/strong&gt;ue&lt;/em&gt;); Sättigung und Helligkeit (&lt;em&gt;&lt;strong&gt;L&lt;/strong&gt;ightness&lt;/em&gt;) das Problem, dass die mit hsl() beschriebenen Werte nicht mit der &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#Helligkeit_in_HSL&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;wahrgenommenen Helligkeit&lt;/a&gt; übereinstimmen.&lt;/p&gt;
&lt;h3&gt;neue Farbräume&lt;/h3&gt;&lt;p&gt;Eigentlich jedem klar, aber dann doch wieder erwischt: Es gibt eben nicht &lt;strong&gt;die&lt;/strong&gt; 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.&lt;/p&gt;
&lt;p&gt;Um Farben besser darstellen zu können, gibt es nun die Möglichkeit weitere Farbräume in CSS zu nutzen.&lt;/p&gt;
&lt;p&gt;Unter den vielfältigen Möglichkeiten sticht besonders die oklch()-Funktion hervor, die im &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle#CIELAB_Farbmodelle&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;OKLAB-Farbraum&lt;/a&gt; Farben durch ihre Bestandteile …&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;L&lt;/strong&gt;ightness&lt;/em&gt; (Helligkeit)&lt;/li&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;C&lt;/strong&gt;hroma&lt;/em&gt; (relative Buntwirkung)&lt;/li&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;H&lt;/strong&gt;ue&lt;/em&gt; (Farbton)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;definiert.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Anmerkung:&lt;/strong&gt; 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!&lt;/p&gt;
&lt;p&gt;Entdecke die Welt der Farben:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Farbe&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Farbe&lt;/strong&gt;&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Farbe/Farbangaben&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Farbangaben&lt;/strong&gt;&lt;/a&gt;&lt;br&gt;
Farbnamen, currentColor, etc&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Farbe/Farbmodelle&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Farbmodelle&lt;/strong&gt;&lt;/a&gt;&lt;br&gt;
rgb(), HEX, hsl() und das neue oklch()&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Farbe/Farbkonzept&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Farbkonzept&lt;/strong&gt;&lt;/a&gt;&lt;br&gt;
vom Farbkreis über die Harmonielehre zur Farbpalette&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Farbe/Farben_und_Kontraste&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Farben und Kontraste&lt;/strong&gt;&lt;/a&gt;&lt;br&gt;
der Klassiker von Jan Eric Hellbusch mit vielen Beispielen!&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;PS&lt;/strong&gt;: Im Zuge der Überarbeitung haben wir auch unsere Beispielvorlage um eine Direktansicht ergänzt. Vielen Dank an &lt;a href=&quot;/users/6547&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Rolf B&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/jan/01/trend-2024-eine-eigene-webseite</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2024-01-01T12:50:52Z</published>
    <updated>2024-01-01T12:50:52Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2024/jan/01/trend-2024-eine-eigene-webseite#m1812447" rel="alternate" type="text/html"/>
    <title>Trend 2024: eine eigene Webseite!</title>
    <content type="html">&lt;p&gt;2023 stand unter der Frage, zu welchem sozialen Netzwerk man denn nun gehen solle.&lt;/p&gt;
&lt;p&gt;SELFHTML war schon vorher bei &lt;a href=&quot;https://bildung.social/@selfhtml&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Mastodon&lt;/a&gt; im &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Fediverse&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Fediverse&lt;/a&gt; präsent, aber leider nicht sehr aktiv. Ich gelobe dort regelmäßig Neuigkeiten aus der Webwelt dort hinauszutröten.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; Ein bisschen erstaunt war ich, dass einige, die vorher den Umstieg auf das Fediverse propagierten, plötzlich Einladungen zum &lt;em&gt;„blauen Himmel“&lt;/em&gt; versprachen.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; Ist das Fediverse nun die Zukunft oder gibt es etwas Besseres?&lt;/p&gt;
&lt;p&gt;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.  &lt;/p&gt;
&lt;h3&gt;Die Alternative&lt;/h3&gt;&lt;p&gt;Bereits im letzten Jahr schrieb &lt;a href=&quot;https://bildung.social/@Daojoan@mastodon.social/111663265437904903&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Joan Westenberg auf Mastodon&lt;/a&gt;:&lt;/p&gt;
&lt;div style=&quot;padding-left:2em&quot;&gt;
&lt;em&gt;Own your own website. Own your mailing list. Own your newsletter. Own your blog and prioritise your RSS feed. &lt;/em&gt;
&lt;p&gt;&lt;em&gt;This is the stuff that works in the long term. &lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Chasing virality on every new shiny platform is a waste of time.&lt;/em&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://matthiasott.com/notes/2024-the-year-of-the-personal-website&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Matthias Ott schrieb heute morgen &lt;/a&gt;&lt;/p&gt;
&lt;div style=&quot;padding-left:2em&quot;&gt;
&lt;em&gt;
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.&lt;/em&gt; &lt;small&gt;(von mir ins Deutsche übersetzt)&lt;/small&gt;
&lt;/div&gt;
&lt;h3&gt;Fazit&lt;/h3&gt;&lt;p&gt;Eine Präsenz im &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Fediverse&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Fediverse&lt;/a&gt; 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!&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3&gt;Unser Ziel für 2024&lt;/h3&gt;&lt;p&gt;SELFHTML zweifelte in den letzten Jahren ein bisschen an sich selbst und an unserem &lt;em&gt;mission statement&lt;/em&gt; &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML#Everyone.E2.80.99s_a_publisher&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Everyone’s a publisher&lt;/a&gt;. Allerdings hatten sich in den letzten Tagen im Forum, auf Discord und per Mail (&lt;em&gt;„Ich habe seit Ewigkeiten nichts mehr gemacht und möchte jetzt mit der Frage nach einem aktuellen Editor nicht als Dummie dastehen!&lt;/em&gt;“) Neu- und Wiedereinsteiger mit Fragen gemeldet.&lt;/p&gt;
&lt;p&gt;Anlass für uns in diesem Jahr das &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Wie fange ich an?&lt;/strong&gt;&lt;/a&gt; in unserem Wiki zu überprüfen und gegebenfalls zu aktualisieren:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Wie fange ich an?/der richtige Code-Editor&quot;&gt;Welchen Editor sollte ich verwenden?&lt;/a&gt; 
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Wie fange ich an?/von der Idee zum Projekt&quot;&gt;von der Idee zum Projekt&lt;/a&gt;&lt;br&gt;eigene HTML-Seiten, Seitengeneratoren oder ein CMS?&lt;ul&gt;&lt;li&gt; Hugo, Eleventy und …&lt;/li&gt;&lt;/ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Wie fange ich an?/Web-Hosting&quot;&gt;Web-Hosting&lt;/a&gt; 
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/PHP/Tutorials/Templates&quot;&gt;PHP/Tutorials/Templates&lt;/a&gt;&lt;br&gt;(Teile einer Webseite auslagern)
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/PHP/Tutorials/Einen_RSS-Feed_auslesen&quot;&gt;PHP/Tutorials/Einen RSS-Feed auslesen&lt;/a&gt;
&lt;li&gt;…&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Weitere Baustellen und Projekte werden sich dann wohl im Laufe des Jahres ergeben!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;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.&lt;br&gt;Ein Bekannter hat seinen Twitter-Account „stillgelegt“, folgt aber noch Donald Trump, der aus der Zahl seiner Follower Kraft und Bedeutung zieht. &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;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 &lt;strong&gt;Blue Sky&lt;/strong&gt; zu wecken. &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/dec/31/silvester-knaller-exklusive-akkordeons-ohne-javascript</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-12-31T09:38:09Z</published>
    <updated>2023-12-31T09:38:09Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/dec/31/silvester-knaller-exklusive-akkordeons-ohne-javascript#m1812423" rel="alternate" type="text/html"/>
    <title>Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!</title>
    <content type="html">&lt;p&gt;Im Oktober stellten wir die neuen &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/oct/25/popover-ohne-programmieren&quot; rel=&quot;noopener noreferrer&quot;&gt;Popover-Boxen&lt;/a&gt; vor, mit der die &lt;a href=&quot;https://open-ui.org/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;open-ui.org&lt;/a&gt; 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.&lt;/p&gt;
&lt;h3&gt;Exklusive Akkordeons&lt;/h3&gt;&lt;p&gt;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 &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Elemente/details&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;details&lt;/a&gt;-Element.&lt;/p&gt;
&lt;p&gt;Eine Variante des Akkordeon-Musters ist das &lt;strong&gt;exklusive Akkordeon&lt;/strong&gt;, bei dem nur eines der Offenlegungs-Widgets gleichzeitig geöffnet werden kann.&lt;/p&gt;
&lt;p&gt;Bis jetzt musste das mit viel JavaScript und noch mehr ARIA-Attributen von Hand nachgebaut werden. &lt;strong&gt;Jetzt&lt;/strong&gt; 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.&lt;/p&gt;
&lt;p&gt;Im Oktober klang das noch wie Zukunftsmusik, im Dezember haben das die neuesten Versionen von Chrome, Edge und Safari schon implementiert:&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-6.html&quot; width=&quot;900&quot; height=&quot;600&quot; name=&quot;SELFHTML_in_a_box&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon&quot;&gt;Exklusives Akkordeon&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;h3&gt;Registerkarten&lt;/h3&gt;&lt;p&gt;Auch Registerkarten (&lt;em&gt;Tab Panels&lt;/em&gt;) sind so möglich:&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_details-7.html&quot; width=&quot;900&quot; height=&quot;400&quot; name=&quot;SELFHTML_in_a_box&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Exklusives_Akkordeon&quot;&gt;Exklusives Akkordeon&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;Für den Firefox und ältere Browserversionen helfen einige Zeilen Javascript!
Das ausführliche Tutorial kannst du im SELF-Wiki lesen:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Infobox/Akkordeon mit details&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;So endet 2023 mit einem wirklichen „Silvester-Knaller“ und wir können uns auf 2024 und viel Neues freuen!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/dec/24/frohe-weihnachten</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-12-24T04:44:32Z</published>
    <updated>2023-12-24T04:44:32Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/dec/24/frohe-weihnachten#m1812348" rel="alternate" type="text/html"/>
    <title>Frohe Weihnachten!</title>
    <content type="html">&lt;p&gt;In den letzten Jahren sprach ich immer wieder von Krisen und Umbruch - mittlerweile scheint das schon normal zu sein.&lt;/p&gt;
&lt;p&gt;Andererseits zeigte die Ungewissheit im Spätsommer auch, was es alles Gutes gab.&lt;/p&gt;
&lt;p&gt;Unser Forum läuft dank Christian Kruse störungsfrei und - auch wenn die Frequenz langsam abnimmt - mittlerweile in einer freundlichen Atmosphäre.&lt;/p&gt;
&lt;p&gt;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 &lt;a href=&quot;https://wiki.selfhtml.org/wiki/MathML&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;MathML&lt;/a&gt;, 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!&lt;/p&gt;
&lt;p&gt;Der Verein hat seit November einen neuen Vorstand. Herzlich willkommen Rolf und Wiebke!&lt;/p&gt;
&lt;p&gt;Monatliche Vorstandstreffen und drei Developer Teams sollen SELFHTML künfitg stetig weiterentwickeln.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/dec/04/htmlhell-der-etwas-andere-adventskalender</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-12-04T12:31:14Z</published>
    <updated>2023-12-04T12:31:14Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/dec/04/htmlhell-der-etwas-andere-adventskalender#m1811987" rel="alternate" type="text/html"/>
    <title>HTMLHell - „Da brauchst du kein JavaScript für!“</title>
    <content type="html">&lt;p&gt;Auch HTMLHell von Manuel Matuzović hat dieses Jahr einen &lt;a href=&quot;https://www.htmhell.dev/adventcalendar/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Adventskalender&lt;/a&gt;, der sich - anders als der Name vermuten lässt - für semantisches HTML und ein barrierefreies, benutzerfreundliches Web einsetzt.&lt;/p&gt;
&lt;p&gt;Am 02. Dezember fand ich dort den empfehlenswerten Artikel &lt;a href=&quot;https://www.htmhell.dev/adventcalendar/2023/2/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;„You don&apos;t need JavaScript for that“&lt;/a&gt; von Kilian Valkhof, von dem ich hier die Kernaussage übersetzt wiedergeben möchte:&lt;/p&gt;
&lt;h2&gt;Das Prinzip der geringsten Leistung&lt;/h2&gt;
&lt;p&gt;(&lt;em&gt;&lt;strong&gt;the rule of least power&lt;/strong&gt;&lt;/em&gt;) &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;„Dies ist eines der Grundprinzipien der Webentwicklung und bedeutet, dass Sie die &lt;strong&gt;am wenigsten leistungsfähige Sprache für einen bestimmten Zweck wählen sollten.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Im Gegensatz zu JS, das imperativ ist, sind HTML und CSS deklarativ. Man sagt dem Browser, &lt;strong&gt;was er tun soll&lt;/strong&gt;, &lt;strong&gt;nicht wie&lt;/strong&gt; er es tun soll. Das bedeutet, dass der Browser selbst entscheiden kann, wie er es macht, und zwar auf die effizienteste Art und Weise.&lt;/p&gt;
&lt;p&gt;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.“&lt;/p&gt;
&lt;h2&gt;Beispiele&lt;/h2&gt;
Kilian demonstriert dies an Beispielen, die wir ähnlich auch im Wiki haben.
&lt;h3&gt;Flip-Flop-Schalter&lt;/h3&gt;
&lt;p&gt;Ein &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#FlipFlop-Schalter&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;FlipFlop-Schalter&lt;/a&gt; oder toggle-Switch ist ein Software-Feature, das zwischen zwei Zuständen hin- und her schaltet.&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-Tut-button-5.html&quot; width=&quot;900&quot; height=&quot;550&quot; name=&quot;SELFHTML_in_a_box&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#FlipFlop-Schalter&quot;&gt;SELFHTML&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;Wie Sie im Beispiel sehen, funktioniert so etwas &lt;strong&gt;ohne&lt;/strong&gt; Javascript.&lt;/p&gt;
&lt;p&gt;Ich habe zwei Empfehlungen:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Nutzen Sie das Standardverhalten der HTML-Elemente!&lt;/li&gt;
&lt;li&gt;Lesen Sie &lt;a href=&quot;https://www.htmhell.dev/adventcalendar/2023/2/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;den Artikel von Kilian Valkhof&lt;/a&gt;!&lt;br&gt;
Er demonstriert noch weitere Anwendungsfälle, in denen auf JavaScript verzichtet werden kann!&lt;br&gt;
(Auch die anderen Artikel des Adventskalenders sind lesenswert!)&lt;/li&gt;
&lt;/ol&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/Rule_of_least_power&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Rule of least power&lt;/a&gt; (wikipedia.en.org) &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/dec/01/advent-advent-das-raumschiff-brennt</id>
    <author>
      <name>Rolf B</name>
      <uri>https://forum.selfhtml.org/advent/2023</uri>
    </author>
    <published>2023-12-01T09:41:18Z</published>
    <updated>2023-12-01T09:41:18Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/dec/01/advent-advent-das-raumschiff-brennt#m1811913" rel="alternate" type="text/html"/>
    <title>Advent, Advent, das Raumschiff brennt?</title>
    <content type="html">&lt;p&gt;Adventskalender 2023&lt;/p&gt;
&lt;p&gt;Liebe Selfhtml-Freunde,&lt;/p&gt;
&lt;p&gt;SELFHTML e. V. wünscht euch eine schöne und besinnliche Adventszeit. Lasst euch nicht zu sehr vom allzu plötzlich bevorstehenden Weihnachten stressen.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Viel Spaß damit   - &lt;a href=&quot;https://forum.selfhtml.org/advent/2023&quot; rel=&quot;noopener noreferrer&quot;&gt;hier geht&apos;s zum Kalender&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Rolf&lt;/em&gt;&lt;/p&gt;
&lt;div class=&quot;signature&quot;&gt;-- &lt;br&gt;
 ️  
&lt;/div&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/nov/30/blue-beanie-day</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-11-30T05:13:34Z</published>
    <updated>2023-11-30T05:13:34Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/nov/30/blue-beanie-day#m1811899" rel="alternate" type="text/html"/>
    <title>Blue-Beanie-Day</title>
    <content type="html">&lt;p&gt;Heute,  am 30.11., ist wieder &lt;a href=&quot;https://de.wikipedia.org/wiki/Blue_Beanie_Day&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Blue Beanie Day&lt;/strong&gt;&lt;/a&gt;; ein Aktionstag, um auf die Wichtigkeit von &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Webstandards&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Webstandards&lt;/strong&gt;&lt;/a&gt; aufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/nov/26/selfhtml-410-gone</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-11-26T12:11:13Z</published>
    <updated>2023-11-26T12:11:13Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/nov/26/selfhtml-410-gone#m1811867" rel="alternate" type="text/html"/>
    <title>SELFHTML - 410 GONE?</title>
    <content type="html">&lt;p&gt;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!&lt;/p&gt;
&lt;p&gt;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!&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/7f90d7c6-8cde-11ee-b136-b42e9947ef30.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/7f90d7c6-8cde-11ee-b136-b42e9947ef30.jpg?size=medium&quot; alt=&quot;Stadtführung durch Chnutz vom Hopfen&quot; title=&quot;Stadtführung&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3&gt;Samstag&lt;/h3&gt;&lt;p&gt;Die Mitgliederversammlung (&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2023&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Protokoll&lt;/a&gt;) 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:&lt;/p&gt;
&lt;p&gt;Matthias Scharwies&lt;/p&gt;
&lt;p&gt;Rolf Borchmann&lt;/p&gt;
&lt;p&gt;Wiebke Knäpper&lt;/p&gt;
&lt;p&gt;Der Verein bedankt sich bei den ausgeschiedenen Vorständen und wünscht ihnen alles Gute.&lt;/p&gt;
&lt;p&gt;Die Diskussionen sind nicht abgeschlossen - es haben sich Arbeitsgruppen gebildet, die ihre Ergebnisse bei einer &lt;a href=&quot;https://forum.selfhtml.org/events/9&quot; rel=&quot;noopener noreferrer&quot;&gt;virtuellen Mitgliederversammlung am 27. Januar 2024&lt;/a&gt; präsentieren werden.&lt;/p&gt;
&lt;h3&gt;Sonntag&lt;/h3&gt;&lt;p&gt;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:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/fc2c66ea-8ce0-11ee-8414-b42e9947ef30.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/fc2c66ea-8ce0-11ee-8414-b42e9947ef30.jpg?size=small&quot; alt=&quot;Doctor Syntax&quot; title=&quot;Doctor Syntax&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://commons.wikimedia.org/wiki/File:SYNTAX(1813)_-_00_-_The_Revd_Doctor_Syntax_(frontispiece).jpg&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&quot;The Tour of Doctor Syntax: in search of the picturesque ... Fifth edition, with new plates. By William Combe.&quot; (1813)&lt;/a&gt; (aus Wikimedia Commons)&lt;/p&gt;
&lt;p&gt;Ob er uns helfen kann, schwierige Fachbegriffe anschaulich zu vermitteln?&lt;/p&gt;
&lt;h3&gt;Fazit&lt;/h3&gt;&lt;p&gt;&lt;a href=&quot;/images/b6652b6e-8ce1-11ee-8d94-b42e9947ef30.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/b6652b6e-8ce1-11ee-8d94-b42e9947ef30.jpg?size=small&quot; alt=&quot;Mainzelmännchen in Ampel&quot; title=&quot;Mainzelmännchen in Ampel&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Noch auf dem Weg zum Bahnhof kam ich wieder an „unserer“ Ampel vorbei, die diesmal auf Grün stand: &lt;strong&gt;Es geht weiter!&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTTP/Statuscodes#1xx:_Informativ&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;SELFHTML - 100 Continue&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;PS: Wir sehen uns am 03.05.2024 in Hannover zum  &lt;a href=&quot;https://forum.selfhtml.org/events/10&quot; rel=&quot;noopener noreferrer&quot;&gt;SELF-Treffen 2024&lt;/a&gt; wieder und feiern dann das 20-jährige Jubiläum des Vereins.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/nov/01/wird-selfhtml-heute-noch-gebraucht</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-11-01T04:59:56Z</published>
    <updated>2023-11-01T04:59:56Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/nov/01/wird-selfhtml-heute-noch-gebraucht#m1811436" rel="alternate" type="text/html"/>
    <title>Wird SELFHTML heute noch gebraucht?</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;2018 und 2020 hatten wir im Wiki nach &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Verbesserungsvorschl%C3%A4ge&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Verbesserungsvorschlägen&lt;/a&gt; gefragt.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; Diesmal hatte ich mich per Mail an Ehemalige und Aktive aus Forum und Wiki gewandt, ob SELFHTML aus ihrer Sicht heute noch relevant sei.&lt;/p&gt;
&lt;h3&gt;These: Die Sprache des Webs ist Englisch!&lt;/h3&gt;&lt;div style=&quot;padding-left:2em&quot;&gt;
&lt;em&gt;
„Jeder kann heute Englisch!“
&lt;p&gt;„Es gibt die MDN und die ist besser!“&lt;/em&gt;&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;„Ich persönlich geh&apos; auf StackOverflow!“&lt;/p&gt;
&lt;p&gt;„Wer so wenig Englisch kann, dass er im Forum nachfragen muss, versteht unsere Tutorials eh nicht.“&lt;/em&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Für &lt;strong&gt;mich persönlich&lt;/strong&gt; ist diese Frage eigentlich schon im &lt;em&gt;&lt;strong&gt;mission statement&lt;/strong&gt;&lt;/em&gt; von SELFHTML festgelegt:&lt;/p&gt;
&lt;p&gt;„ &lt;em&gt;… 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.&lt;/em&gt;“&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Die Dokumentation ist damals entstanden, um Menschen das &lt;em&gt;&lt;strong&gt;„Everyone is a publisher“&lt;/strong&gt;&lt;/em&gt; zu ermöglichen. Deshalb bietet SELFHTML seit 1995 eine Plattform für deutschsprachige  Tutorials an  und diesem Ansatz ist SELFHTML weiterhin verpflichtet.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3&gt;&lt;strong&gt;Anfänger … an die Erstellung von Webseiten heranführen&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;Als ich mich &apos;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 &amp; CSS noch cool waren!&lt;/p&gt;
&lt;p&gt;Heute scheint die Zahl der wirklichen Anfänger überschaubar bis nicht vorhanden. Trotzdem führt die Doku Nutzer über die Seite &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Wie fange ich an?&lt;/strong&gt;&lt;/a&gt; direkt zu unseren Anfänger-Kursen:&lt;/p&gt;
&lt;div class=&quot;cards-container&quot; style=&quot;display: grid;
  grid-template-columns: repeat(auto-fill,minmax(17em,1fr));
  gap: 2em;&quot;&gt;
&lt;div class=&quot;card bg-filled&quot; style=&quot;grid-row: span 1;background:beige;&quot;&gt;
&lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg&quot;&gt;&lt;strong style=&quot;font-size: 1.15em;&quot;&gt;Einstieg in &lt;span style=&quot;color:#c82f04;&quot;&gt;HTML&lt;/span&gt;&lt;/strong&gt;&lt;/a&gt;
&lt;span style=&quot;float:right; display:block;text-align:end;line-height:100%;font-size:4.5em; color:#c82f04;&quot;&gt;&lt;/&gt;&lt;/span&gt;&lt;br&gt;
der Kurs für die ersten Schritte in HTML und CSS.
&lt;p&gt;Schritt für Schritt zur eigenen Webseite&lt;/p&gt;
&lt;p class=&quot;teaser&quot;&gt;
&lt;img src=&quot;/images/455f8376-67eb-11ee-baaf-b42e9947ef30.png?size=medium&quot; alt=&quot;Screenshot unserer Webseite aus dem HTML-Einstieg&quot;&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;img src=&quot;/images/629240d6-67ec-11ee-a1c6-b42e9947ef30.png?size=medium&quot; alt=&quot;CSS-logo&quot; style=&quot;width:80px;float:right&quot;&gt;
&lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg&quot;&gt;&lt;strong style=&quot;font-size: 1.15em;&quot;&gt;Einstieg in CSS&lt;/strong&gt;&lt;/a&gt;
&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden&quot;&gt;Stylesheet einbinden&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Warum Layouts mit CSS?&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen&quot;&gt;Webseiten responsiv umbauen&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/vom_Entwurf_zum_Layout&quot;&gt;vom Entwurf zum Layout&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p class=&quot;teaser&quot;&gt;Stylesheets für HTML und SVG&lt;/p&gt;
&lt;p class=&quot;teaser&quot;&gt;
&lt;img src=&quot;/images/bc90606a-7870-11ee-b833-b42e9947ef30.png?size=medium&quot; alt=&quot;Screenshot unserer Webseite aus dem CSS-Einstieg&quot;&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;img src=&quot;/images/39b200c6-67f0-11ee-b9d5-b42e9947ef30.png?size=medium&quot; alt=&quot;Icon für JS-Einstieg&quot; style=&quot;width:80px;float:right&quot;&gt;
&lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg&quot;&gt;&lt;strong style=&quot;font-size: 1.15em;&quot;&gt;Einstieg in JavaScript&lt;/strong&gt;&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Erste_Schritte&quot;&gt;Erste Schritte&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Programmieren_und_Debuggen&quot;&gt;Programmieren und Debuggen&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Funktionen&quot;&gt;Funktionen&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;img src=&quot;/images/77669d3e-67ee-11ee-beb7-b42e9947ef30.png?size=medium&quot; alt=&quot;SVG-Logo des W3C&quot; style=&quot;width:80px;float:right&quot;&gt;
&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg&quot;&gt;&lt;strong style=&quot;font-size: 1.15em;&quot;&gt;Einstieg in SVG&lt;/strong&gt;&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg#Warum_SVG_nutzen.3F&quot;&gt;Warum SVG nutzen?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen&quot;&gt;SVG mit CSS stylen&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren&quot;&gt;SVG mit CSS animieren&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/barrierefreie SVGs&quot;&gt;barrierefreie SVGs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Step by step eigene SVGs erstellen&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Uns als Autoren ist es dabei egal, ob die Nutzer aus einem jahrhundertealten Bauerngeschlecht oder einer Brennpunktschule in der Großstadt kommen.
Das &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Stil&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Siezen unserer Leser ist Tradition&lt;/a&gt;, bei neuen Tutorials könnte man auf das heute üblichere Du wechseln.&lt;/p&gt;
&lt;h3&gt;&lt;strong&gt;… auch Fortgeschrittenen und Profis … dienen&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Hier müssen wir wohl unsere Hausaufgaben machen und mehr Tutorials für Fortgeschrittene anbieten, bzw. die vorhandenen Artikel besser präsentieren:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;CSS/Tutorials&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/JavaScript/Tutorials&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;JavaScript/Tutorials&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SVG/Tutorials&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;SVG/Tutorials&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;padding-left:2em&quot;&gt;
&lt;em&gt;„Ich mache nichts mehr mit HTML, ich arbeite jetzt im Backend.“&lt;/em&gt;
&lt;/div&gt;
&lt;p&gt;Unser Bereich &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Webserver&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Webserver&lt;/strong&gt;&lt;/a&gt; könnte ausgebaut werden, bietet aber bereits einiges.&lt;/p&gt;
&lt;p&gt;Im Feedback erhielt ich zwei Angebote zu Tutorials über &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Node.js&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Node.js&lt;/a&gt; und die neue WebGPU - ich freu&apos; mich jetzt schon!&lt;/p&gt;
&lt;h4&gt;&lt;strong&gt;Ab wann ist man denn ein Fortgeschrittener?&lt;/strong&gt;&lt;/h4&gt;&lt;p&gt;Ein häufig auftretendes Problem ist, dass sich viele im Forum Fragende gar nicht als Anfänger sehen.&lt;/p&gt;
&lt;div style=&quot;padding-left:2em&quot;&gt; 
&lt;p&gt;&lt;em&gt;„Einige Beispiele munter zusammenkopiert - funktioniert!“&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;„Und noch was dazu - hoppla, was ist da los - der Browser muss einen Bug haben!“&lt;/em&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3&gt;&lt;strong&gt;Warum die Frage nach der Zielgruppe?&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Hier möchte ich unseren Vorstand Janosch Zoller zitieren:&lt;/p&gt;
&lt;div style=&quot;padding-left:2em;&quot;&gt;
&lt;em&gt;Wir haben auch jetzt noch täglich tausende Seitenaufrufe, wo Menschen im Zweifel von unseren Inhalten profitieren.
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;… 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.&lt;/p&gt;
&lt;p&gt;Daher ist es für mich auch keine Option, den Verein dicht zu machen, solange wir noch derart aktiv gelesen werden.&lt;/p&gt;
&lt;p&gt;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: &quot;Was haben wir heute? Ist es erhaltenswert?&quot;. Ich beantworte für mich Letzteres mit einem uneingeschränkten Ja, deshalb mache ich weiter.&lt;/em&gt;&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn4&quot; id=&quot;fnref4&quot;&gt;[4]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Verbesserungsvorschl%C3%A4ge&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Hilfe:Verbesserungsvorschläge&lt;/a&gt; im SELF-Wiki &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;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. &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein#Wir_.C3.BCber_uns&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;SELFHTML:Verein  - Wir über uns&lt;/a&gt; &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn4&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Janosch Zoller am 20.06.2021 im &lt;a href=&quot;https://forum.selfhtml.org/verein/2021/jun/20/interessanter-verein-umstandehalber-in-gute-hande-abzugeben/1789435#m1789435&quot; rel=&quot;noopener noreferrer&quot;&gt;internen Forum&lt;/a&gt; &lt;a href=&quot;#fnref4&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/oct/25/popover-ohne-programmieren</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-10-25T07:33:13Z</published>
    <updated>2023-10-25T07:33:13Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/oct/25/popover-ohne-programmieren#m1811303" rel="alternate" type="text/html"/>
    <title>Popover ohne Programmieren!</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Jetzt gibt es eine &lt;strong&gt;Native Umsetzung in HTML&lt;/strong&gt;, die von der &lt;a href=&quot;https://open-ui.org/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;open-ui.org&lt;/a&gt; entworfen und zur Standardisierung vorgeschlagen wurde:&lt;/p&gt;
&lt;p&gt;Mit nur wenigen Zeilen HTML bauen Sie ein Popover:&lt;/p&gt;
&lt;p&gt;&lt;button popovertarget=&quot;t1&quot;&gt;Tooltipp&lt;/button&gt;&lt;/p&gt;
  &lt;div id=&quot;t1&quot; popover style=&quot;background-color:#c82f04;color:white;border:thin solid #333;padding:1rem;margin:2rem auto;&quot;&gt;Infobox, die zusätzliche Informationen enthält.&lt;/div&gt;
&lt;pre&gt;&lt;code class=&quot;block language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;popovertarget&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;t1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Tooltipp&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;t1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;popover&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    Infobox, die zusätzliche Informationen enthält.
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;  
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Auch eine &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Lightbox&lt;/a&gt; ist so möglich:&lt;/p&gt;
&lt;p&gt;&lt;button popovertarget=&quot;t2&quot;&gt;&lt;img src=&quot;/images/5ebc6a26-73a0-11ee-9ec9-b42e9947ef30.jpg?size=thumb&quot; alt=&quot;Burg in Nürnberg, Sonnenaufgang&quot; loading=&quot;lazy&quot;&gt;&lt;/button&gt;&lt;/p&gt;
&lt;div id=&quot;t2&quot; popover style=&quot;background-color:#999;position:absolute;color:white;border:thin solid #333;padding:1rem;&quot;&gt;&lt;button popovertarget=&quot;t2&quot;
			popovertargetaction=&quot;hide&quot; style=&quot;	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;&quot;&gt; X &lt;/button&gt;&lt;img src=&quot;/images/5ebc6a26-73a0-11ee-9ec9-b42e9947ef30.jpg?size=medium&quot; alt=&quot;Burg in Nürnberg, Sonnenaufgang&quot; loading=&quot;lazy&quot;&gt;.&lt;/div&gt;
&lt;p&gt;Und das Gute - Es wird bereits von vielen Browsern unterstützt, für den Firefox gibt es einen Polyfill:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/810e8eb0-7337-11ee-b272-b42e9947ef30.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/810e8eb0-7337-11ee-b272-b42e9947ef30.png?size=large&quot; alt=&quot;&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Mehr erfahren Sie in unserem neuen Tutorial: &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Tooltips mit Popover&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;&lt;strong&gt;Warum nicht mit ein bisschen CSS selbst einen Tooltip bauen?&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;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?&lt;/p&gt;
&lt;p&gt;Im neuen Popover sind solche Dinge und die Fokusverwaltung bereits integriert.&lt;/p&gt;
&lt;script
  src=&quot;https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest&quot;
  crossorigin=&quot;anonymous&quot;
  defer

&gt;&lt;/script&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/oct/01/zwischenbilanz-2-3-quartal</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-10-01T06:42:09Z</published>
    <updated>2023-10-01T06:42:09Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/oct/01/zwischenbilanz-2-3-quartal#m1810830" rel="alternate" type="text/html"/>
    <title>Zwischenbilanz 2. + 3. Quartal</title>
    <content type="html">&lt;p&gt;Ich hatte ja im März eine &lt;a href=&quot;https://forum.selfhtml.org/self/2023/mar/30/zwischenbilanz-1-quartal-2023/1807474#m1807474&quot; rel=&quot;noopener noreferrer&quot;&gt;Zwischenbilanz&lt;/a&gt; für das erste Quartal gepostet.&lt;/p&gt;
&lt;p&gt;Hier kommt nun die ursprünglich für Juni geplante - leider etwas verspätete - Zwischenbilanz, was im &lt;em&gt;&lt;strong&gt;2. und 3.&lt;/strong&gt;&lt;/em&gt; Quartal angepackt wurde!&lt;/p&gt;
&lt;p&gt;Nicht alle Änderungen sind hier aufgeführt, aber Einiges ist doch besonders erwähnenswert:&lt;/p&gt;
&lt;p&gt;  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut#Guter_HTML-Stil&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Guter HTML-Stil&lt;/strong&gt;&lt;/a&gt; ist jetzt direkt im HTML-Tutorial integriert, analog dazu &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax#Guter_CSS-Stil&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Guter CSS-Stil&lt;/strong&gt;&lt;/a&gt; im CSS-Einstieg &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;   @Jürgen B hat die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/OnePager/Komfort-Version&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Komfort-Version eines OnePagers&lt;/strong&gt;&lt;/a&gt; entwickelt und in einem Tutorial erklärt. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;   &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Webserver/htaccess&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;htaccess&lt;/strong&gt;&lt;/a&gt;: Die 6-teilige Reihe ist inhaltlich und sprachlich geglättet und redigiert worden.&lt;/p&gt;
&lt;p&gt;  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/MathML/Geometrie_mit_MathML,_SVG_und_JavaScript&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Geometrie mit MathML, SVG und JavaScript&lt;/strong&gt;&lt;/a&gt; ist ein Tutorial, das die Brücke zwischen HTML, MathML und SVG schlägt und unter anderem Drag&amp;Drop für SVG erklärt.&lt;/p&gt;
&lt;p&gt;   &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Media_Queries/Container_Queries&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Container Queries&lt;/strong&gt;&lt;/a&gt; erklärt die neuen Containerabfragen und auch die flexiblen &lt;code&gt;cqw&lt;/code&gt;-Werte, mit denen fluide Typografie möglich wird.&lt;/p&gt;
&lt;p&gt;  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Schachtelung&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;CSS/Tutorials/Selektoren/Schachtelung&lt;/strong&gt;&lt;/a&gt; &lt;a href=&quot;/users/6547&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Rolf B&lt;/a&gt; führt in die Welt des CSS-Nesting ein!&lt;/p&gt;
&lt;h3&gt;ToDo für&apos;s 4. Quartal&lt;/h3&gt;&lt;p&gt;Leider ist einiges liegen geblieben.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Schaut mal auf unsere &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Kategorie:ToDo&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Baustellenseite&lt;/a&gt;. Hier sind die imho wichtigsten davon:&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/File_Upload&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;File Upload&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Das war Thema im Januar - ich habe 3 Artikel zusammengefasst, es bleibt ab &lt;a href=&quot;https://wiki.selfhtml.org/wiki/File_Upload#Auswahl_mit_Drag_und_Drop&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;hier&lt;/a&gt; einiges zu tun: Drag &amp; Drop, Fetch ...&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Multimedia/Playlists&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Multimedia/Playlists&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;  &lt;a href=&quot;https://wiki.selfhtml.org/wiki/PHP/Tutorials/Templates&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;PHP/Tutorials/Templates&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Hier sind sowohl in Kap 3. Verarbeitung als auch Kap 4. Ausgabe zwei ToDos drin.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;Warum diese Übersichten?&lt;/h3&gt;&lt;blockquote&gt;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.&lt;br&gt;&lt;cite&gt;SELF-Forum: &lt;a href=&quot;https://forum.selfhtml.org/self/2023/mar/30/zwischenbilanz-1-quartal-2023/1807474#m1807474&quot;&gt;Zwischenbilanz 1 Quartal 2023&lt;/a&gt; vom 30.03.2023&lt;/cite&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;Ich würde mir wünschen, dass sich &lt;strong&gt;jeder&lt;/strong&gt; SELFer im Q4 &lt;strong&gt;eine Aufgabe vornimmt&lt;/strong&gt; und diese dann bearbeitet! (In der Schule würde ich die Aufgaben verteilen und dann bei Nichtgefallen mit dem Kollegen tauschen lassen!)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Alles was vorzeigbar ist, sollten wir dann auf &lt;a href=&quot;https://bildung.social/@selfhtml&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Mastodon &lt;/a&gt;/ &lt;a href=&quot;https://discord.com/invite/BMbmbd4qUa&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Discord &lt;/a&gt;vorstellen, damit wir in der Öffentlichkeit wieder präsenter werden.&lt;/p&gt;
&lt;p&gt;Vielen Dank an &lt;a href=&quot;/users/13769&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Hörnchen&lt;/a&gt; für unseren neuen Discord-Auftritt, der neues Leben in die Bude gebracht hat. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Herzliche Grüße&lt;/p&gt;
&lt;p&gt;Matthias Scharwies&lt;/p&gt;
&lt;div class=&quot;signature&quot;&gt;-- &lt;br&gt;
PS: Ein Stammtisch wäre auch mal wieder nett!
&lt;/div&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Barrierefreiheit&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Barrierefreiheit&lt;/strong&gt;&lt;/a&gt; soll eben nicht nachträglich als Fremdkörper aufgepfropft, sondern von Anfang an berücksichtigt werden! &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;strong&gt;Man könnte …&lt;/strong&gt; da noch vieles einbauen. Wichtig ist, dass Interessierte ein funktionierendes Beispiel haben, mit dem sie weiterarbeiten können. &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Neben unserem Discord-Kanal kommt auch das zarte Pflänzchen YouTube-Kanal zwischen den Steinen hervor, wobei wir da noch nichts Vorzeigbares vorzuweisen haben. &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/sep/25/schicke-schachteln-css-nesting-ist-in-den-browsern-angekommen</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2023-09-25T19:10:53Z</published>
    <updated>2023-09-25T19:10:53Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/sep/25/schicke-schachteln-css-nesting-ist-in-den-browsern-angekommen#m1810776" rel="alternate" type="text/html"/>
    <title>Schicke Schachteln - CSS Nesting ist in den Browsern angekommen</title>
    <content type="html">&lt;p&gt;Geschachtelte CSS Regeln waren früher ein Anwendungsfall von CSS Präprozessoren. Aber nun schlägt das Imperium zurück!&lt;/p&gt;
&lt;p&gt;Kennt ihr das? Ihr habt ein &lt;code&gt;&lt;div&gt;&lt;/code&gt;, eine &lt;code&gt;&lt;figure&gt;&lt;/code&gt;, eine &lt;code&gt;&lt;section&gt;&lt;/code&gt;, 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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#foo&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.1em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

   &lt;span class=&quot;token selector&quot;&gt;h2&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;font-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; bold&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;justify-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; space-between&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

      &lt;span class=&quot;token selector&quot;&gt;img&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 30%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
   &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Und wenn euch dieser #foo Bereich nicht interessiert, klickt ihr im Editor eures Vertrauens auf das Einklapp-Icon und alles ist ausgeblendet.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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 &lt;code&gt;&amp;&lt;/code&gt; sehen. Der Firefox hat die aktuelle Fassung der Spezifikation schon besser drauf und braucht das &lt;code&gt;&amp;&lt;/code&gt; nicht.&lt;/p&gt;
&lt;p&gt;Das &lt;code&gt;&amp;&lt;/code&gt; 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. &lt;code&gt;p.foo&lt;/code&gt; als Verbund aus Element- und Klassenselektor) zusammengesetzt werden sollen.&lt;/p&gt;
&lt;p&gt;Man kann sogar „falsch herum“ schachteln, wofür das &lt;code&gt;&amp;&lt;/code&gt; ebenfalls gebraucht wird:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;p&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0.5em 1em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

   &lt;span class=&quot;token selector&quot;&gt;aside &gt; &amp;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;padding-inline&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0.5em&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
   &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Hiermit bekommen p Elemente ein Block-Padding von 0.5em und ein Inline-Padding von 1em (ich rede hier von den &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/Logische_Eigenschaften&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;logischen Eigenschaften&lt;/a&gt;), aber wenn das p Element direktes Kind eines aside ist, wird das Inline-Padding auf 0.5em reduziert.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Schachtelung&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Lest den ausführlichen Artikel zu CSS-Nesting im Selfhtml-Wiki!&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/may/30/css-selektoren-nth-match</id>
    <author>
      <name>Rolf B</name>
    </author>
    <published>2023-05-30T10:33:25Z</published>
    <updated>2023-05-30T10:33:25Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/may/30/css-selektoren-nth-match#m1809122" rel="alternate" type="text/html"/>
    <title>CSS Selektoren - :nth-match() vs :nth-child(... of S)</title>
    <content type="html">&lt;p&gt;Die Selektion von HTML-Elementen mit der CSS Pseudoklasse &lt;code&gt;:nth-child()&lt;/code&gt; 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.&lt;/p&gt;
&lt;p&gt;Um das zu lösen, wurde bereits 2011, im ersten Entwurf der CSS Selectors Level 4 Spezifikation, die Pseudoklasse :nth-match() vorgeschlagen.&lt;/p&gt;
&lt;p&gt;Lesen Sie hier, was daraus wurde.&lt;/p&gt;
&lt;hr&gt;
&lt;h3&gt;Das Problem&lt;/h3&gt;&lt;p&gt;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&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#mytable tbody tr:nth-of-type(3n)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;border-bottom&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; thin solid black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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 &lt;code&gt;match&lt;/code&gt; versehen werden. Die CSS-Regel für eine solche Filterung könnte so aussehen:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#mytable.filtered tbody tr:not(.match)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;visibility&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;collapse&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Möchte man die Hilfslinien ergänzen, könnte man das so versuchen:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block bad language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#mytable tbody tr.match:nth-of-type(3n)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;border-bottom&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; thin solid black&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Aber das funktioniert nicht, weil der Selektor &lt;code&gt;tr.match:nth-of-type(3n)&lt;/code&gt; aus drei Teilen besteht (Elementselektor, Klassenselektor, Pseudoklassenselektor), die alle unabhängig voneinander bewertet werden und deren Ergebnis UND-verknüpft wird.&lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt;&lt;strong&gt;Teil 1:&lt;/strong&gt; &lt;em&gt;Elementtypselektor &lt;code&gt;tr&lt;/code&gt;&lt;/em&gt;&lt;/dt&gt;
&lt;dd&gt;Betrachte nur &lt;code&gt;tr&lt;/code&gt;-Elemente&lt;/dd&gt;
&lt;dt&gt;&lt;strong&gt;Teil 2:&lt;/strong&gt; &lt;em&gt;Klassenselektor &lt;code&gt;.match&lt;/code&gt;&lt;/em&gt;&lt;/dt&gt;
&lt;dd&gt;Betrachte nur Elemente mit der Klasse &lt;code&gt;match&lt;/code&gt;&lt;/dd&gt;
&lt;dt&gt;&lt;strong&gt;Teil 3:&lt;/strong&gt; &lt;em&gt;strukturelle Pseudoklasse :nth-of-type()&lt;/em&gt;&lt;/dt&gt;
&lt;dd&gt;Betrachte nur Elemente, die das 0-te, 3-te, 6-te, 9-te, … ihres Elementtyps sind&lt;/dd&gt;
&lt;/dl&gt;
&lt;p&gt;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 &lt;code&gt;.match&lt;/code&gt; oder der Pseudoklassenselektor &lt;code&gt;:nth-of-type(3n)&lt;/code&gt; unzutreffend ist.&lt;/p&gt;
&lt;h3&gt;Was tun?&lt;/h3&gt;&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Tatsächlich gibt es schon seit 2011 einen Vorschlag für eine CSS-Lösung: die &lt;code&gt;:nth-match&lt;/code&gt; Pseudoklasse. &lt;code&gt;tr.match:nth-match(3n)&lt;/code&gt; würde das Gewünschte leisten. Diese Pseudoklasse wurde allerdings 2013 wieder verworfen, zu Gunsten einer erweiterten Syntax von &lt;code&gt;:nth-child()&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;nth-child&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;An+B of S&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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 &lt;a href=&quot;https://caniuse.com/css-nth-child-of&quot; rel=&quot;noopener noreferrer&quot;&gt;caniuse.com&lt;/a&gt;).&lt;/p&gt;
&lt;h3&gt;Wie ist dieses &lt;code&gt;S&lt;/code&gt; zu verstehen?&lt;/h3&gt;&lt;p&gt;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 &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Pseudoelement&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Pseudoelementen&lt;/a&gt; alles verwendet werden kann, selbst Kommata. Der offizielle Working Draft formuliert allgemeiner und spricht von einer &quot;complex-selector-list parsed as a forgiving selector&quot;, d.h. die Einschränkung der Pseudoelemente ist nicht vorhanden. Dafür wird aber gefordert, dass für den Fall, dass eine &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Selektor-Liste&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Selektorliste&lt;/a&gt; einen ungültigen Selektor enthält, die übrigen Selektoren der Liste trotzdem berücksichtigt werden sollen.&lt;/p&gt;
&lt;p&gt;Für unser Beispiel mit der gefilterten Zebrastreifentabelle würden wir also schreiben können:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#mytable.filtered tbody tr:nth-child(3n of .match)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
   &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #e0e0e0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;wodurch dann nur die Elemente für die nth-child-Zählung berücksichtig werden, die die Klasse .match tragen.&lt;/p&gt;
&lt;h3&gt;Wo überall geht das?&lt;/h3&gt;&lt;p&gt;Die gleiche Erweiterung existiert für :nth-last-child().&lt;/p&gt;
&lt;p&gt;Was es &lt;strong&gt;nicht&lt;/strong&gt; gibt, ist die of-Erweiterung für :nth-of-type. Das hat einen guten Grund: die &lt;code&gt;:nth-of-type()&lt;/code&gt;-Pseudoklasse ist ein Sonderfall von &lt;code&gt;:nth-child(… of S)&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block bad language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#mytable tbody tr:nth-of-type(3n of .match)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; ... &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Ziehen Sie den Elementselektor für &lt;code&gt;tr&lt;/code&gt; einfach in die Klammer hinein, wodurch :nth-child ganz automatisch die Selektion des Elementtyps mit übernimmt.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css.good&quot;&gt;#mytable tbody :nth-child(3n of tr.match) { ... }
&lt;/code&gt;&lt;/pre&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/feb/25/wordpress-individuell-mit-css-gestalten</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-02-25T04:59:40Z</published>
    <updated>2023-02-25T04:59:40Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/feb/25/wordpress-individuell-mit-css-gestalten#m1806481" rel="alternate" type="text/html"/>
    <title>Wordpress - individuell mit CSS gestalten</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Kann man das auch individuell mit CSS gestalten? - Ja, klar!&lt;/p&gt;
&lt;p&gt;Ausgangspunkt war die Frage, ob, man ein „Textelement über Bild positionieren“ könne.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h3&gt;Der schnelle Weg&lt;/h3&gt;&lt;p&gt;Um WordPress individuell anzupassen, können sie direkt im Blockeditor ihr HTML mit Klassen versehen und für diese dann CSS-Festlegungen deklarieren.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Design → Anpassen → Zusätzliches CSS:&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;Der bessere Weg&lt;/h3&gt;&lt;p&gt;Es gibt in Wordpress eine Vielzahl von Stylesheets und daneben komplette Themes, die neben Speziellen Seiten-Templates wieder viele Stylesheets mitbringen.&lt;/p&gt;
&lt;p&gt;Damit dort vorgenommene Änderungen bei einer automatischen Aktualisierung nicht überschrieben werden, empfiehlt es sich ein eigenes &lt;em&gt;&lt;strong&gt;Child Theme&lt;/strong&gt;&lt;/em&gt; zu definieren.&lt;/p&gt;
&lt;p&gt;→ &lt;a href=&quot;https://wiki.selfhtml.org/wiki/WordPress/Child_Theme_einrichten&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;WordPress/Child Theme einrichten&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Und wie überlagert man nun ein Bild mit einem halbtransparentem Text?&lt;/h3&gt;&lt;p&gt;Wenn man Text über das Bild legen will, kann man nicht vom aktuellen Standpunkt am Monitor ausgehen.&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Bilder_pr%C3%A4sentieren-4.html&quot; width=&quot;800&quot; height=&quot;400&quot; name=&quot;SELFHTML_in_a_box&quot;&gt;
  &lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Bilder_pr%C3%A4sentieren-4.html&quot;&gt;Einschwebende Bildunterschriften&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;Hier muss der Bild-Container mit &lt;code&gt;position: relative&lt;/code&gt;zum Bezugspunkt werden, in dem dann Bild und Beschreibungstext absolut positioniert werden.&lt;/p&gt;
&lt;p&gt;Dann kann die Bildunterschrift entsprechend oben oder unten „angeklebt werden“:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;#gallery figure&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; relative&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token selector&quot;&gt;figure img&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 100%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; 

&lt;span class=&quot;token selector&quot;&gt;#gallery &gt; figure &gt; figcaption&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; absolute&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;bottom&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;→ &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Einbindung_mit_img#Einschwebende_Bildunterschriften&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Bilder im Internet/Einbindung mit img&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;„&lt;em&gt;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.&lt;/em&gt;“ &lt;br&gt;SELF-Forum &lt;a href=&quot;https://forum.selfhtml.org/self/2023/feb/23/textelement-uber-bild-positionieren/1806452#m1806452&quot; rel=&quot;noopener noreferrer&quot;&gt;Textelement über Bild positionieren&lt;/a&gt; vom 23.02.2023 &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://wordpress.com/de/support/bearbeiten-von-css/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Hinzufügen von individuellem CSS&lt;/a&gt; (wordpress.com) &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/jan/31/gesucht-autoren-m-w-d</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2023-01-31T05:27:52Z</published>
    <updated>2023-01-31T05:27:52Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2023/jan/31/gesucht-autoren-m-w-d#m1805911" rel="alternate" type="text/html"/>
    <title>Gesucht: Autoren (m,w,d)</title>
    <content type="html">&lt;p&gt;ChatGPT ist in aller Munde und trotzdem muss manchmal trotzdem doch der (menschliche) Fachmann ran.&lt;/p&gt;
&lt;p&gt;Unser Wiki besteht mittlerweile aus über 8.000 Seiten, davon 2.742 Artikeln. Andererseits entwickelt sich die Welt von HTML und CSS immer weiter.&lt;/p&gt;
&lt;h3&gt;neue Methoden und Funktionen&lt;/h3&gt;&lt;p&gt;Im Januar ergänzte &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Spezial:Beitr%C3%A4ge/Heha&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Heha&lt;/a&gt; einige neue Methoden im Math-Object. Schnell fiel auf, dass es auch in CSS neue &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Funktionen/Math-Funktionen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Mathe-Funktionen&lt;/a&gt; gibt. &lt;a href=&quot;/users/6547&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Rolf B&lt;/a&gt;  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).&lt;/p&gt;
&lt;p&gt;Vielen Dank an die beiden!&lt;/p&gt;
&lt;h3&gt;Nicht alles, was früher galt, ist heute noch aktuell&lt;/h3&gt;&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Deshalb nun unser Aufruf:&lt;/p&gt;
&lt;h3&gt;&lt;strong&gt;HELP WANTED&lt;/strong&gt;&lt;/h3&gt;&lt;h4&gt;Was brauchen wir?&lt;/h4&gt;&lt;p&gt;Freiwillige, die sich an eins unserer &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Kategorie:ToDo&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;ToDos&lt;/a&gt; machen oder ein &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel#Wie_sehen_gute_Tutorials_aus.3F&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;selbstgewähltes Thema veröffentlichen&lt;/a&gt;. Tipps aus der Praxis kann eben doch kein Bot schreiben!&lt;/p&gt;
&lt;h4&gt;Wer ist unsere Zielgruppe?&lt;/h4&gt;&lt;p&gt;Interessierte Amateure, die …&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;lieber verständliches Deutsch lesen, als sich technische Themen in einer Fremdsprache erkämpfen müssen&lt;/li&gt;
&lt;li&gt;Code-Snippets kopieren und ändern, dann aber doch wissen wollen, wie es genau funktioniert.&lt;/li&gt;
&lt;li&gt;Semi-professionelle Entwickler, die sich auf dem neuesten Stand halten wollen.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Deshalb:&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;Helfen Sie mit und verbessern Sie das SELF-Wiki durch &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Mitmachen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Ihre Mitarbeit&lt;/a&gt;!&lt;/strong&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/dec/30/webdesign-trend-2023-auf-google-fonts-verzichten</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-12-30T07:30:05Z</published>
    <updated>2022-12-30T07:30:05Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/dec/30/webdesign-trend-2023-auf-google-fonts-verzichten#m1805124" rel="alternate" type="text/html"/>
    <title>Webdesign-Trend 2023 - Auf Direkt-Einbindung von Google-Fonts verzichten!</title>
    <content type="html">&lt;p&gt;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.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;11 Monate später gab es neue Schlagzeilen: Ein Nachfolger des Freiherrn von Gravenreuth&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; ließ mit einem Programm Webseiten nach eingebundenen Google-Fonts suchen, täuschte Besuche einer realen Person vor und verschickte Abmahnungen.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt; Auch wenn die Staatsanwaltschaft &lt;em&gt;nur&lt;/em&gt; die automatisierte Suche als kriminell einstuft, ist dies doch ein Rückschlag für das Unwesen der Abmahnungen vermeintlicher Mitbewerber.&lt;/p&gt;
&lt;h3&gt;Der rechtlich einwandfreie Weg&lt;/h3&gt;&lt;p&gt;Informieren Sie Seitenbesucher in einer &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Grundlagen/Rechtsfragen/Datenschutzerkl%C3%A4rung&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Datenschutzerklärung&lt;/a&gt; über die Speicherung und Weitergabe persönlicher Daten und holen Sie sich eine Einverständniserklärung ein.&lt;/p&gt;
&lt;p&gt;Leider wirkt so ein Cookie-Banner wie eine Barriere, die man erst überwinden muss, um an die Seiteninhalte zu kommen. Deshalb empfiehlt SELFHTML ...&lt;/p&gt;
&lt;h3&gt;Die praktische Variante&lt;/h3&gt;&lt;p&gt;Verzichten Sie auf externe CDN und binden Sie Fonts selbst ein. Dieses Tutorial zeigt, wie&apos;s geht:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Google-Fonts_selbst_hosten&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;HTML/Tutorials/Google-Fonts selbst hosten&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn4&quot; id=&quot;fnref4&quot;&gt;[4]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/20169842-8813-11ed-b334-b42e9947ef30.jpg&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/20169842-8813-11ed-b334-b42e9947ef30.jpg?size=medium&quot; alt=&quot;Google-Fonts über CDN haben keine Vorteile mehr!&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Übrigens: Kein Verein, keine Schule und auch kein &lt;a href=&quot;https://de.m.wikipedia.org/wiki/Kleine_und_mittlere_Unternehmen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;KMU&lt;/a&gt; &lt;em&gt;&lt;strong&gt;braucht&lt;/strong&gt;&lt;/em&gt; kostenlose Dienstleistungen wie Google Analytics. Wann haben Sie oder Ihr Systembetreuer diese Statistiken denn das letzte Mal ausgewertet?&lt;/p&gt;
&lt;p&gt;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!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://www.gesetze-bayern.de/Content/Document/Y-300-Z-BECKRS-B-2022-N-612&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;20.01.2022, Az. 3 O 17493/20&lt;/a&gt; (gesetze-bayern.de) &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik/Recht_und_Links&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;SELFHTML:Verein/Chronik/Recht und Links&lt;/a&gt; &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://www.tagesspiegel.de/berlin/abzocke-wegen-google-fonts-auf-webseiten-razzia-bei-berliner-abmahnanwalt-kilian-lenard-9071191.html&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Betrugsmasche „Google-Fonts“: Razzia bei Berliner Abmahnanwalt Kilian Lenard&lt;/a&gt; (tagesspiegel.de) &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn4&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://twitter.com/PixelAmbacht/status/1494272370076536840&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Roel Nieskens&lt;/a&gt; (twitter.com) &lt;a href=&quot;#fnref4&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/dec/24/frohe-weihnachten</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-12-24T06:34:07Z</published>
    <updated>2022-12-24T06:34:07Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/dec/24/frohe-weihnachten#m1804981" rel="alternate" type="text/html"/>
    <title>Frohe Weihnachten!</title>
    <content type="html">&lt;p&gt;Eigentlich hatte ich in Mails und Briefen dieses Jahr „ruhige und hustenfreie Zeit“ gewünscht.&lt;/p&gt;
&lt;p&gt;Nicht jeder hatte vorher gehustet und nicht jeder - wenn auch die meisten - braucht die Ruhe. Deshalb einen &lt;em&gt;&lt;strong&gt;„frohen“&lt;/strong&gt;&lt;/em&gt; Gruß an alle!&lt;/p&gt;
&lt;h3&gt;Was war&lt;/h3&gt;&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Wir wollten zeigen, dass wir noch handlungsfähig sind und nahmen uns folgerichtig eine Erneuerung unserer seit 2010 nahezu unveränderten &lt;em&gt;Landing pages&lt;/em&gt;  vor. Das &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki&quot; rel=&quot;noopener noreferrer&quot;&gt;Makeover für das SELF-Wiki&lt;/a&gt; ist leider noch nicht abgeschlossen, aber zumindest auf den Weg gebracht.&lt;/p&gt;
&lt;p&gt;Der Adventskalender des Jahres 2021 konzentrierte sich auf das Thema Barrierefreiheit. Vielen Dank an &lt;a href=&quot;/users/821&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Marc&lt;/a&gt; für die Blogbeiträge und Aktualisierungen im Wiki.&lt;/p&gt;
&lt;p&gt;Dieses Jahr sammelten wir die häufigen Fragen, die wir künftig wieder prominenter präsentieren wollen.&lt;/p&gt;
&lt;h3&gt;Was wird&lt;/h3&gt;&lt;p&gt;Wir erhalten außerhalb des Forums viele Anfragen per Mail.  In einer Standardantwort (da &lt;em&gt;„unsere manpower begrenzt ist,  können wir individuelle Fachfragen leider nicht persönlich beantworten.“&lt;/em&gt;) verweisen wir auf&apos;s Forum und das Wiki.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Andererseits bietet das vorhandene SELFHTML-Wissen im Wiki eben bereits jetzt eine Antwort auf die meisten Fragen.&lt;/p&gt;
&lt;p&gt;In diesem Sinne …&lt;/p&gt;
&lt;p&gt;Frohe Weihnachten und ein gutes Jahr 2023!&lt;/p&gt;
&lt;p&gt;Matthias Scharwies&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/nov/30/adventskalender-2022</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-11-30T18:44:20Z</published>
    <updated>2022-11-30T18:44:20Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/nov/30/adventskalender-2022#m1804275" rel="alternate" type="text/html"/>
    <title>Adventskalender 2022</title>
    <content type="html">&lt;p&gt;Auch in diesem Jahr möchte SELFHTML wieder einen Adventskalender für die Community anbieten.&lt;/p&gt;
&lt;p&gt;In unserem Forum und in den eingehenden Emails ist uns aufgefallen, dass es sich bei den Themen häufig nicht um &lt;em&gt;cutting-edge-technologies&lt;/em&gt; für &lt;em&gt;early-adopter&lt;/em&gt;, sondern um den ganz normalen Wahnsinn handelt, den man eigentlich doch auch selbst gewusst hat.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Der Worte sind genug gewechselt, … hier geht&apos;s endlich zum &lt;a href=&quot;https://forum.selfhtml.org/advent/2022&quot; rel=&quot;noopener noreferrer&quot;&gt;Adventskalender&lt;/a&gt;!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/oct/01/oranger-text-auf-weissem-grund</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-09-30T22:02:31Z</published>
    <updated>2022-09-30T22:02:31Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/oct/01/oranger-text-auf-weissem-grund#m1802407" rel="alternate" type="text/html"/>
    <title>Oranger Text auf weißem Grund?</title>
    <content type="html">&lt;p&gt;Teil 2 unserer &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki&quot; rel=&quot;noopener noreferrer&quot;&gt;Makeover-Serie&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Die bis 2022 im SELF-Wiki verwendete Linkfarbe &lt;code&gt;#2673bf&lt;/code&gt; hat auf weißem Hintergrund einen Kontrast von &lt;a href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=2673BF&amp;bcolor=FFFFFF&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;4.90:1&lt;/a&gt;, 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.&lt;/p&gt;
&lt;p&gt;Als das CSS untersucht wurde, fiel auf, dass die Farbe der Linktexte bei &lt;code&gt;:hover&lt;/code&gt; zu &lt;span style=&quot;color:#df6c20&quot;&gt;orange&lt;/span&gt; (auf weiß! - Kontrast &lt;a href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=DF6C20&amp;bcolor=FFFFFF&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;3.33:1&lt;/a&gt;) wechselte.&lt;/p&gt;
&lt;h2 id=&quot;Vergleich_der_verwendeten_Linkfarben&quot;&gt;Vergleich der bisher verwendeten Linkfarben&lt;/h2&gt;
&lt;p&gt;In dieser Tabelle sieht man das alte &lt;span style=&quot;padding:0 .5em;background:#3983ab; color:white;&quot;&gt;dunkelblau&lt;/span&gt; und weitere Farbvarianten im Vergleich zur aktuellen Linkfarbe und zum &lt;span style=&quot;padding:0 .5em;background: #337599; color: white;&quot;&gt;SELF-blau&lt;/span&gt; der Farbtabelle. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;table class=&quot;cf-default-table&quot;&gt;
&lt;tr&gt;
&lt;th style=&quot;width:10.5em;&quot;&gt;Farbe
&lt;/th&gt;
&lt;th&gt; Beispiel
&lt;/th&gt;
&lt;th&gt; Kontrast
&lt;/th&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;background-color: #2673bf; color: white; padding:.3em .5em;&quot;&gt; #2673bf
&lt;br&gt; hsl(210 67% 45%)
&lt;/td&gt;
&lt;td&gt; &lt;span style=&quot;color:#2673bf;&quot;&gt;aktuelle Linkfarbe im Wiki&lt;/span&gt;
&lt;/td&gt;
&lt;td&gt; &lt;a rel=&quot;nofollow&quot; class=&quot;external text&quot; href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=2673BF&amp;bcolor=FFFFFF&quot;&gt;4.90:1&lt;/a&gt;&lt;br /&gt;&lt;span style=&quot;color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;&quot;&gt;FAIL&lt;/span&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;background-color: #3481CD; color: white; padding:.3em .5em;&quot;&gt; #3481CD
&lt;br&gt; hsl(210 60% 50%)
&lt;/td&gt;
&lt;td&gt; &lt;span style=&quot;color:#2673bf;&quot;&gt;aktuelle Linkfarbe im Forum und Blog&lt;/span&gt;
&lt;/td&gt;
&lt;td&gt; &lt;a rel=&quot;nofollow&quot; class=&quot;external text&quot; href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=3481CD&amp;bcolor=FFFFFF&quot;&gt;4.06:1&lt;/a&gt;&lt;br /&gt;&lt;span style=&quot;color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;&quot;&gt;FAIL&lt;/span&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;background-color: #3983ab; color: white; padding:.3em .5em;&quot;&gt;ehemaliges SELF-Blau
&lt;br&gt; #3983ab &lt;br /&gt; hsl(201 50% 45%)
&lt;/td&gt;
&lt;td&gt; &lt;span style=&quot;color:#3983ab;&quot;&gt;Linktext in SELF-blau&lt;/span&gt;
&lt;/td&gt;
&lt;td&gt; &lt;a rel=&quot;nofollow&quot; class=&quot;external text&quot; href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=3983AB&amp;bcolor=FFFFFF&quot;&gt;4.19:1&lt;/a&gt;&lt;br /&gt;&lt;span style=&quot;color:white; background:#c82f04 ; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;&quot;&gt;FAIL&lt;/span&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;background-color: #337599; color: white; padding:.3em .5em;&quot;&gt; neues SELF-Blau
&lt;br&gt; #337599 &lt;br /&gt; 
hsl(201 50% 40%)
&lt;/td&gt;
&lt;td&gt; &lt;span style=&quot;color:#337599;&quot;&gt;Vorschlag, bei dem alle oben aufgeführten Hintergründe passen&lt;/span&gt;
&lt;/td&gt;
&lt;td&gt; &lt;a rel=&quot;nofollow&quot; class=&quot;external text&quot; href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=306F91&amp;bcolor=FFFFFF&quot;&gt;5.06:1&lt;/a&gt;&lt;br /&gt;&lt;span style=&quot;color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;&quot;&gt;PASS&lt;/span&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;background-color: #24219d; color: white; padding:.3em .5em;&quot;&gt; visited
&lt;br&gt; #24219d &lt;br&gt;
&lt;/td&gt;
&lt;td&gt; &lt;span style=&quot;color:#24219d;&quot;&gt;bisheriges visited im Wiki&lt;/span&gt;
&lt;/td&gt;
&lt;td&gt; &lt;a rel=&quot;nofollow&quot; class=&quot;external text&quot; href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=24219d&amp;bcolor=FFFFFF&quot;&gt;11.8:1&lt;/a&gt;&lt;br /&gt;&lt;span style=&quot;color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;&quot;&gt;PASS&lt;/span&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;background-color: #df6c20; color: white; padding:.3em .5em;&quot;&gt; orange
&lt;br&gt; #df6c20 &lt;br&gt;
&lt;/td&gt;
&lt;td&gt; &lt;span style=&quot;color:#df6c20;&quot;&gt;a:hover im Wiki&lt;/span&gt;
&lt;/td&gt;
&lt;td&gt; &lt;a rel=&quot;nofollow&quot; class=&quot;external text&quot; href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=DF6C20&amp;bcolor=FFFFFF&quot;&gt;3.33:1&lt;/a&gt;&lt;br /&gt;&lt;span style=&quot;color:white; background:#df6c20; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;&quot;&gt;WTF&amp;#160;?&lt;/span&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;background-color: #990909; color: white; padding:.3em .5em;&quot;&gt; rot-braun
&lt;br&gt; #990909 &lt;br&gt;
&lt;/td&gt;
&lt;td&gt; &lt;span style=&quot;color:#990909;&quot;&gt;a:hover im Wiki (in Navigationen)&lt;/span&gt;
&lt;/td&gt;
&lt;td&gt; &lt;a rel=&quot;nofollow&quot; class=&quot;external text&quot; href=&quot;https://webaim.org/resources/contrastchecker/?fcolor=990909&amp;bcolor=FFFFFF&quot;&gt;8.75:1&lt;/a&gt;&lt;br /&gt;&lt;span style=&quot;color:white; background:#8db243; font-weight:bold;padding: 0.2em 1em;border-radius: 8px;&quot;&gt;PASS&lt;/span&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;p&gt;Höchste Zeit unser Farbkonzept zu überprüfen und zu verbessern!&lt;/p&gt;
&lt;h2&gt;unsere SELF-Farbpalette&lt;/h2&gt;
&lt;p&gt;... 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:&lt;/p&gt;
&lt;p&gt;Die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Hilfe:Farbtabelle#Farbt.C3.B6ne&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;SELF-Farbpalette&lt;/a&gt; besteht aus je 4 Grund- und Pastelltönen, die die 0.1fache Deckung des Grundtons haben, (&lt;strong&gt;Ausnahme&lt;/strong&gt; ist hellgrün mit 0.2)&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;müssen in &lt;code&gt;hex&lt;/code&gt; oder &lt;code&gt;rgb()&lt;/code&gt; ohne Alphakanal umgerechnet werden, damit dunkler Hintergrund nicht durchscheint.&lt;/li&gt;
&lt;li&gt;die blaue Linkfarbe hat aber besonders bei Pastellhintergründen nicht genug Kontrast&lt;br&gt;→ 2 Alternativen:
&lt;ul&gt;
&lt;li&gt;dunklere Linkfarbe oder&lt;/li&gt;
&lt;li&gt;Verzicht auf farbigen Hintergrund!&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Diese Farbpalette wurde so erweitert, dass sie überall ausreichende Kontraste erzielt und auch im Dunklen Modus noch ganz gut aussieht!&lt;/p&gt;
&lt;h2 id=&quot;links&quot;&gt;Kennzeichnungen von Links &lt;/h2&gt;
&lt;p&gt;Grundsätzlich sollten Links durch &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS#Mehrfachkennzeichnung&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;mehrere Merkmale erkennbar&lt;/a&gt; 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. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; Bei &lt;code&gt;:hover&lt;/code&gt; und &lt;code&gt;:focus&lt;/code&gt; kommt hellblauer Hintergrund dazu.&lt;/p&gt;
&lt;p&gt;Blog-Serie zum Makeover 2022&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki&quot; rel=&quot;noopener noreferrer&quot;&gt;Makeover für das SELF-Wiki&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Oranger Text auf weißem Grund?&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Icons und Grafiken&lt;/li&gt;
&lt;/ol&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Ist ihnen aufgefallen, dass die &lt;code&gt;hsl()&lt;/code&gt;-Funktionen ohne Komma notiert wurden? - Normalerweise werden mehrere Werte in CSS durch Leerzeichen getrennt. Dies wurde nun vom W3C vereinheitlicht.&lt;br&gt;SELF-Wiki: &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Grafik/Farbe/Farbmodelle&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Farbmodelle&lt;/a&gt; &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;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 &lt;a href=&quot;https://www.w3.org/TR/css-color-4/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;z. B. hier&lt;/a&gt; so gehandhabt. &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-09-30T21:32:26Z</published>
    <updated>2022-09-30T21:32:26Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/sep/30/makeover-fur-das-self-wiki#m1802406" rel="alternate" type="text/html"/>
    <title>Makeover für das SELF-Wiki</title>
    <content type="html">&lt;p&gt;Am 14. September wurde unser Wiki ein Achtel Jahrhundert (12,5 Jahre) alt! In unserer &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik#Der_Wiki-Neustart&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Vereins-Chronik&lt;/a&gt; gibt es einen Überblick mit vielen Screenshots aus vergangenen Jahren.&lt;/p&gt;
&lt;p&gt;Wir wollten das unrunde Jubiläum zum Anlass für ein Makeover nehmen, das auf der &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Protokolle/Mitgliederversammlung_2021#Landing_Page_und_Unterst.C3.BCtzerseiten&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Mitgliederversammlung 2021&lt;/a&gt; beschlossen wurde.&lt;/p&gt;
&lt;h3&gt;1. Landing page&lt;/h3&gt;&lt;p&gt;Die bisherige &lt;em&gt;Landing Page&lt;/em&gt; unter selfhtml.org wurde depubliziert und in das SELF-Wiki integriert.&lt;/p&gt;
&lt;p&gt;Dafür wurden …&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;die Inhalte der &lt;em&gt;Landing Page&lt;/em&gt; auf die Seite &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SELFHTML:Verein&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;SELFHTML:Verein&lt;/a&gt; übertragen. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/li&gt;
&lt;li&gt;die Navigationen des Wiki in der Werkzeugleiste links neu angeordnet&lt;/li&gt;
&lt;li&gt;die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Startseite des Wiki&lt;/a&gt; völlig neu gestaltet&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;2. Startseite&lt;/h3&gt;&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/4b655ab0-96c9-11ec-8367-b42e9947ef30.png?size=medium&quot; alt=&quot;&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Künftig stellt die neue &lt;a href=&quot;https://wiki.selfhtml.org/wiki/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Startseite&lt;/a&gt; Interessantes aus dem SELF-Universum vor. Es gibt aber weiterhin unser &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Inhalt&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;alphabetisches Inhaltsverzeichnis&lt;/a&gt;!&lt;/p&gt;
&lt;h3&gt;3. CSS und Dark Mode&lt;/h3&gt;&lt;p&gt;Um das Wiki barrierefreier zu machen, wurden die seit 2010 verwendeten Vorlagen geprüft und überarbeitet. Viele, weniger oft benutzte Vorlagen wurden  ersetzt; die &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung&quot; rel=&quot;noopener noreferrer&quot;&gt;Vorlage:Iconset&lt;/a&gt; depubliziert.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;note&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;heading&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Hinweis&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;...&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/421baae4-2c11-11ed-ad02-b42e9947ef30.png?size=medium&quot; alt=&quot;Vorlagen und Boxen - vor und nach dem Wiki-Makeover&quot; title=&quot;Vorlagen und Boxen - vor und nach dem Wiki-Makeover&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Blog-Serie zum Makeover 2022&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Makeover für das SELF-Wiki&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/oct/01/oranger-text-auf-weissem-grund&quot; rel=&quot;noopener noreferrer&quot;&gt;Oranger Text auf weißem Grund?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Icons und Grafiken&lt;/li&gt;
&lt;/ol&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Die bisherige Landing Page war nur über github erreichbar und so nur schwierig zu aktualisieren. Andererseits waren ihre Inhalte wie das &lt;em&gt;mission statement&lt;/em&gt; oft bereits an anderer Stelle als &lt;em&gt;duplicate content&lt;/em&gt; vorhanden. &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/aug/31/immer-wieder-gefragt</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-08-31T17:37:04Z</published>
    <updated>2022-08-31T17:37:04Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/aug/31/immer-wieder-gefragt#m1801754" rel="alternate" type="text/html"/>
    <title>Immer wieder gefragt  …</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F#FAQ&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;FAQ&lt;/strong&gt; im SELF-Wiki&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Für jede Frage existieren auch Links auf entsprechende Tutorials in unserem Wiki.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/jul/22/hgroup-ist-wieder-da</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-07-22T04:31:25Z</published>
    <updated>2022-07-22T04:31:25Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/jul/22/hgroup-ist-wieder-da#m1800678" rel="alternate" type="text/html"/>
    <title>Outline raus! Dafür ist hgroup wieder da!</title>
    <content type="html">&lt;p&gt;… oder war es nie weg?&lt;/p&gt;
&lt;p&gt;In seinem Artikel &lt;a href=&quot;https://css-tricks.com/roundup-of-recent-document-outline-chatter/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;em&gt;Roundup of Recent Document Outline Chatter&lt;/em&gt;&lt;/a&gt; auf css-tricks gibt Geoff Graham die neuesten Entwicklungen um den &lt;em&gt;&lt;strong&gt;document-outline-algorithm&lt;/strong&gt;&lt;/em&gt; wieder.&lt;/p&gt;
&lt;p&gt;Dieser sollte HTML-Dokumente anhand ihrer Seitenstruktur, bzw. auf Elemente wie &lt;code&gt;section&lt;/code&gt;, &lt;code&gt;article&lt;/code&gt;und &lt;code&gt;aside&lt;/code&gt; analysieren und dann eine semantisch passende Gliederung erstellen.&lt;/p&gt;
&lt;p&gt;Dies scheiterte an zwei Dingen: Es wurde von den Browser-Herstellern nie implementiert und mit der Überschriftenhierarchie von &lt;code&gt;h1&lt;/code&gt; bis &lt;code&gt;h6&lt;/code&gt; hätte man dies eigentlich bereits ohne Umwege bewerkstelligen können. Aus diesen Gründen wird nun der &lt;em&gt;document-outline-algorithm&lt;/em&gt; entfernt.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;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:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block bad language-html&quot;&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Willkommen in W3Docs&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Bei uns können Sie alles über HTML lernen.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;h2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;h3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Immer aktuell mit HTML 5!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;h3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Solche Kombinationen würden ein Inhaltsverzeichnis und auch eine Gliederung durch Robots unnötig kompliziert und unübersichtlich machen.&lt;/p&gt;
&lt;p&gt;Aus diesem Grund sollte ein umschließendes &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Elemente/hgroup&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;hgroup&lt;/a&gt;-Element nur die &lt;code&gt;h1&lt;/code&gt; als Überschrift erkennen. &lt;code&gt;hgroup&lt;/code&gt; wurde aber nicht in HTML5 übernommen und galt daher als obsolet. Im &lt;em&gt;Living Standard&lt;/em&gt; der WHATWG blieb es aber erhalten.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;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 &lt;strong&gt;eine&lt;/strong&gt; Überschrift, der ein oder mehrere Textabsätze voranstehen oder folgen:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block good language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;hgroup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Willkommen bei SELFHTML&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Bei uns können Sie alles über HTML lernen.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Immer aktuell mit dem Living Standard von HTML!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;hgroup&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Der bestehende Wiki-Artikel zur &lt;em&gt;document-outline&lt;/em&gt; wurde durch eine Weiterleitung auf &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung#.C3.9Cberschriften&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;HTML/Tutorials/Seitenstrukturierung&lt;/a&gt; ersetzt. Dieses Tutorial enthält nun auch ein Beispiel mit &lt;code&gt;hgroup&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Auch der Referenz-Artikel &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Elemente/hgroup&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;HTML/Elemente/hgroup&lt;/a&gt; ist aktualisiert!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;whatwg/html: &lt;a href=&quot;https://github.com/whatwg/html/pull/7829&quot; rel=&quot;noopener noreferrer&quot;&gt;replace current outline algorithm with one based on heading levels #7829&lt;/a&gt; &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;WHATWG: &lt;a href=&quot;https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;the-hgroup-element&lt;/a&gt; &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/jun/16/endlich-nach-27-jahren-ist-der-internet-explorer-geschichte</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-06-16T19:02:29Z</published>
    <updated>2022-06-16T19:02:29Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/jun/16/endlich-nach-27-jahren-ist-der-internet-explorer-geschichte#m1799838" rel="alternate" type="text/html"/>
    <title>Endlich - der Internet Explorer ist Geschichte!</title>
    <content type="html">&lt;p&gt;Erst darauf hingefiebert und dann fast vergessen - seit gestern ist der Internet Explorer Geschichte.&lt;/p&gt;
&lt;p&gt;Auf &lt;a href=&quot;https://twitter.com/EddyVinckk/status/1536645664804941824&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Twitter&lt;/a&gt; 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 &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Browserweiche&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Browserweichen&lt;/a&gt; oder CSS-Hacks aktivieren.&lt;/p&gt;
&lt;p&gt;Im SELF-Wiki gibt es noch etliche Hinweise auf das besondere Verhalten des Internet Explorers, die nun sukzessive entfernt werden können.&lt;/p&gt;
&lt;p&gt;Das SELF-Wiki ist ein Projekt, das auf gemeinsamer, freiwilliger Zusammenarbeit basiert. Bitte trauen Sie sich, solche &lt;a href=&quot;https://wiki.selfhtml.org/index.php?search=Internet+Explorer&amp;title=Spezial%3ASuche&amp;go=Seite&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Fundstellen&lt;/a&gt; zu sichten und gegebenfalls zu aktualisieren!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/apr/30/navigationen-oben-oder-unten</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-04-30T20:30:28Z</published>
    <updated>2022-04-30T20:30:28Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/apr/30/navigationen-oben-oder-unten#m1798808" rel="alternate" type="text/html"/>
    <title>Navigationen - oben oder unten?</title>
    <content type="html">&lt;p&gt;Aus einer unverfänglichen Frage im Forum (&lt;a href=&quot;https://forum.selfhtml.org/self/2022/apr/25/warum-soll-die-navigation-im-quelltext-neuerdings-uber-dem-haupttext-stehen/1798713#m1798713&quot; rel=&quot;noopener noreferrer&quot;&gt;Warum soll die Navigation im Quelltext neuerdings über dem Haupttext stehen?&lt;/a&gt;) entwickelte sich ein umfangreicheres Projekt, das noch nicht ganz abgeschlossen ist:&lt;/p&gt;
&lt;h3&gt;Position des nav-Elements im HTML-Markup&lt;/h3&gt;&lt;p&gt;Mit &lt;strong&gt;Erwartungskonformität&lt;/strong&gt; (ISO 9241-110)&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; werden Konventionen zusammengefasst, die dem Nutzer eine einheitliche, ihm vertraute Gestaltung sichern.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h3&gt;Ein Flyout-Menü&lt;/h3&gt;&lt;p&gt;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:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Flyout-Men%C3%BC&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;HTML/Tutorials/Navigation/Flyout-Menü&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Bis jetzt finden sich dort zwei Varianten:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Eine Variante erreicht die Interaktivität des Auf- und Zuklappens mit ein bisschen JavaScript.&lt;/li&gt;
&lt;li&gt;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. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn4&quot; id=&quot;fnref4&quot;&gt;[4]&lt;/a&gt;&lt;/sup&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Sobald es beruflich etwas ruhiger wird, wird der Wiki-Artikel fertig gestellt! Versprochen!&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;http://www.kommdesign.de/texte/din.htm&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Die EN ISO 9241 - 10&lt;/a&gt; &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://www.procontext.de/aktuelles/2020/06/iso-9241-110-in-neuer-auflage-erschienen.html&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Dialogprinzipien wurden überarbeitet und heißen jetzt Interaktionsprinzipien – Usability-Norm ISO 9241-110 in neuer Auflage erschienen&lt;/a&gt; &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Gunnar Bittersmann im &lt;a href=&quot;https://forum.selfhtml.org/self/2022/apr/25/warum-soll-die-navigation-im-quelltext-neuerdings-uber-dem-haupttext-stehen/1798778#m1798778&quot; rel=&quot;noopener noreferrer&quot;&gt;SELF-Forum
&lt;/a&gt; &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn4&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;SELF-Forum: &lt;a href=&quot;https://forum.selfhtml.org/self/2022/may/01/menu-mit-details-und-summary-im-screenreader-voiceover/1798815#m1798815&quot; rel=&quot;noopener noreferrer&quot;&gt;Menü mit details und summary im Screenreader VoiceOver&lt;/a&gt; &lt;a href=&quot;#fnref4&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/mar/26/gif-heute</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-03-26T04:06:59Z</published>
    <updated>2022-03-26T04:06:59Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/mar/26/gif-heute#m1797681" rel="alternate" type="text/html"/>
    <title>GIF - heute noch aktuell?</title>
    <content type="html">&lt;p&gt;Vor wenigen Tagen starb  Stephen E. Wilhite an Covid. Er wurde als Erfinder des GIF-Grafikformats berühmt. Das &lt;em&gt;Graphics Interchange Format&lt;/em&gt;, kurz &lt;strong&gt;GIF&lt;/strong&gt; ist ein &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Grafikformat&lt;/a&gt; für Bilder mit einer Farbpalette von max. 256 Farben, inkl. einer „Transparenzfarbe“. Es erlaubt eine verlustfreie Kompression der Bilder.&lt;/p&gt;
&lt;p&gt;Besonders interessant: Es können mehrere (übereinanderliegende) Einzelbilder in einer Datei abgespeichert werden, die dann als Animationen interpretiert werden.&lt;/p&gt;
&lt;p&gt;Zwischenzeitlich waren &lt;em&gt;animated GIFs&lt;/em&gt; als Klickibunti verpönt. WhatsApp, Facebook (aka &lt;em&gt;„Insta für alte Leute“&lt;/em&gt;) und Twitter haben ihnen eine Renaissance verschafft.&lt;/p&gt;
&lt;h2 id=&quot;alternativen&quot;&gt;Alternativen heute&lt;/h2&gt;
&lt;p&gt;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. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; Deshalb wurde 1994 das rechtefreie &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;PNG&lt;/strong&gt;-Format&lt;/a&gt; entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard.&lt;/p&gt;
&lt;p&gt;Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#WebP&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;WebP&lt;/strong&gt;&lt;/a&gt;, das bereits von allen Brwosern unterstützt wird, sowie AVIF, die beide eine noch bessere Komprimierung aufweisen.&lt;/p&gt;
&lt;p&gt;Andererseits werden heute viele Grafiken &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SVG/Tutorials&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;direkt in &lt;strong&gt;SVG&lt;/strong&gt;&lt;/a&gt; erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit &lt;a href=&quot;https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;CSS animiert&lt;/a&gt; und verlustfrei und immer gestochen scharf skaliert werden. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html&quot; width=&quot;800&quot; height=&quot;300&quot;&gt;
&lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;h2 id=&quot;barrierefrei&quot;&gt;Barrierefreiheit&lt;/h2&gt;
&lt;p&gt;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 &lt;code&gt;prefers-reduced-motion&lt;/code&gt;-Medienabfrage geschaffen. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Eine solche Media Query kann im CSS, aber auch direkt im &lt;a href=&quot;https://wiki.selfhtml.org/wiki/HTML/Elemente/picture&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;picture&lt;/a&gt;-Element verwendet werden:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;picture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;source&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;srcset&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;CG_Heart.gif&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; 
          &lt;span class=&quot;token attr-name&quot;&gt;media&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;(prefers-reduced-motion: no-preference)&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Heart-screenshot.png&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; 
       &lt;span class=&quot;token attr-name&quot;&gt;alt&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;Herz, Computergenerierter Querschnitt&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;/&lt;/span&gt;picture&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;iframe src=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html&quot; width=&quot;800&quot; height=&quot;420&quot;&gt;
&lt;p&gt;Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  &lt;a href=&quot;https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html&lt;/a&gt;
  &lt;/p&gt;
&lt;/iframe&gt;
&lt;p&gt;In diesem Beispiel wird abgefragt, welche Nutzereinstellungen zu Animationen vorhanden sind. Falls keine Festlegung getroffen wurde, wird das animated GIF gezeigt. Falls der Wert &lt;code&gt;reduce&lt;/code&gt; gesetzt wurde, wird ein statischer Screenshot gezeigt.&lt;/p&gt;
&lt;p&gt;Noch besser wäre eine Einbindung als Film (siehe &lt;a href=&quot;https://upload.wikimedia.org/wikipedia/commons/3/3f/CG_heart_90fps.webm&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Datei als webm&lt;/a&gt;), da dieser dann vom Nutzer gestartet und beliebig gestoppt werden kann.&lt;/p&gt;
&lt;p&gt;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 &lt;code&gt;prefers-reduced-motion=reduce&lt;/code&gt; eben unbeweglich darstellt. Aber der Artikel selbst warnt vor einem Einsatz im wirklichen Leben! &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn4&quot; id=&quot;fnref4&quot;&gt;[4]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Andere schlagen vor mit canvas oder PHP einen Screenshot des GIFs zu machen und diesen dann wiederzugeben.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;tl;dr&lt;/strong&gt;:&lt;/p&gt;
&lt;p&gt;Für komplexe Infografiken und Animationen sind entweder Videos oder SVGs empfehlenswert, die vom Benutzer gesteuert werden können.&lt;/p&gt;
&lt;p&gt;Ist ein &lt;em&gt;animated GIF&lt;/em&gt; bereits vorhanden, kann man mit einem Screenshot als &lt;em&gt;fallback&lt;/em&gt; Nutzerwünsche berücksichtigen.&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Wikipedia: &lt;a href=&quot;https://de.wikipedia.org/wiki/Graphics_Interchange_Format&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Graphics Interchange Format&lt;/a&gt; &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;/images/4ad1d258-acd7-11ec-bde6-b42e9947ef30.gif&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/4ad1d258-acd7-11ec-bde6-b42e9947ef30.gif?size=medium&quot; alt=&quot;&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;Bei einem GIF wie &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Datei:Wait.gif&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;hier&lt;/a&gt; sieht man das Problem. Die Rastergafik ist pixelig. Eine Änderung von Farbe, Geschwindigkeit, etc kann nur mit einem Grafik-Programm vorgenommen werden. &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;SELF-Blog: &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel&quot; rel=&quot;noopener noreferrer&quot;&gt;Multimedia- Wie viel ist zu viel?&lt;/a&gt; vom 01.08.2021 &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn4&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;dev.to &lt;a href=&quot;https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Pausing GIF animations on dev.to for those who &lt;code&gt;prefer-reduced-motion&lt;/code&gt; [hack 1] &lt;/a&gt; &lt;a href=&quot;#fnref4&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-02-21T23:58:12Z</published>
    <updated>2022-02-21T23:58:12Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/feb/22/geht-das-auch-im-ie-eine-geschichte-der-iconsets-zur-browserunterstutzung#m1796483" rel="alternate" type="text/html"/>
    <title>Geht das auch im IE? - eine Geschichte der Iconsets zur Browserunterstützung</title>
    <content type="html">&lt;p&gt;Die Doku beschrieb von Anfang an nicht nur den Soll-Zustand der Spezifikationen, sondern eben auch die tatsächlich vorhandene Browserunterstützung.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Mit dem Ende des Internet Explorer und dem kommenden Makeover wird nun auch die  im Wiki verwendete &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Vorlage:Iconset&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Vorlage:Iconset&lt;/a&gt; beerdigt.&lt;/p&gt;
&lt;h2&gt;Zeit für einen kleinen Rückblick:&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;center-Element aus der Doku 4.0&lt;/strong&gt; (21.01.1996)&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/819dd898-932a-11ec-b1a2-b42e9947ef30.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/819dd898-932a-11ec-b1a2-b42e9947ef30.png?size=medium&quot; alt=&quot;center-Element aus der Doku4.0 (21.01.1996)&quot; title=&quot;center-Element aus der Doku4.0 (21.01.1996)&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Können Sie alle vier Icons noch erkennen/zuordnen? &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;font-Element aus der Doku 7.0&lt;/strong&gt;  (27.04.1998)&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/ca42ecf6-936f-11ec-8f2d-b42e9947ef30.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/ca42ecf6-936f-11ec-8f2d-b42e9947ef30.png?size=medium&quot; alt=&quot;font-Element aus der Doku 7.0  (27.04.1998)&quot; title=&quot;font-Element aus der Doku 7.0  (27.04.1998)&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Hier sind die einzelnen Icons den heutigen schon ähnlicher.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Im SELF-Wiki wurden die Einzelbilder ab 2010 zu einem, bzw. zwei Sprites zusammengefasst, deren Versionen Sie heute noch vergleichen können:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Datei:Iconset.png&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Datei:Iconset.png&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.selfhtml.org/wiki/Datei:Iconset-Extended.png&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Datei:Iconset-Extended.png&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Wichtiger wurde ein optionaler Link zu caniuse, der in der &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Vorlage:Caniuse&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Vorlage:Caniuse&lt;/a&gt; erfolgt.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Vorlage:Caniuse&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Vorlage:Caniuse&lt;/a&gt; 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.&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Das linke Icon zeigt, dass dies ein „&lt;em&gt;Sprachelement von HTML 3.0 (irgendwann vielleicht doch noch offizieller Sprachstandard)&lt;/em&gt;&quot; sei. Das rechte Element bezieht sich auf den UDI-Browser, von dem nur in der &lt;a href=&quot;https://en.wikipedia.org/wiki/UdiWWW&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;englischsprachigen Wikipedia&lt;/a&gt; Spuren zu finden sind. &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/feb/15/wussten-sie-schon-selfhtml-gibts-auch-auf-twitter</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
      <uri>https://twitter.com/SELFHTML</uri>
    </author>
    <published>2022-02-15T04:28:02Z</published>
    <updated>2022-02-15T04:28:02Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/feb/15/wussten-sie-schon-selfhtml-gibts-auch-auf-twitter#m1796188" rel="alternate" type="text/html"/>
    <title>Wussten Sie schon? - SELFHTML gibt&apos;s auch auf Twitter</title>
    <content type="html">&lt;p&gt;Schon seit mehreren Jahren hat SELFHTML einen &lt;a href=&quot;https://twitter.com/SELFHTML&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Twitter-Kanal&lt;/a&gt;, auf dem Gunnar Bittersmannn (&lt;a href=&quot;https://twitter.com/g16n&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;@g16n&lt;/a&gt;) News und Interessantes über Webdesign, Technologie und Typografie retweeted.&lt;/p&gt;
&lt;p&gt;Seit gestern haben wir 1000 Abonnenten oder neudeutsch „Follower“, die unsere „Tweets“ - Kurznachrichten mit maximal 280 Zeichen verfolgen.&lt;/p&gt;
&lt;p&gt;Parallel zu den Lesetipps im Forum erhalten wir so gefilterte Neuigkeiten, die uns immer auf dem aktuellen Stand halten! Vielen Dank an &lt;a href=&quot;/users/20&quot; class=&quot;mention registered-user&quot; rel=&quot;noopener noreferrer&quot;&gt;@Gunnar Bittersmann&lt;/a&gt; für seine Arbeit!&lt;/p&gt;
&lt;p&gt;Zukünftig sollen dort auch neue und aktualisierte Inhalte des SELF-Wiki beworben werden.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/jan/31/css-voll-normal-sind-css-resets-heute-noch-notig</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2022-01-31T19:23:48Z</published>
    <updated>2022-01-31T19:23:48Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2022/jan/31/css-voll-normal-sind-css-resets-heute-noch-notig#m1795790" rel="alternate" type="text/html"/>
    <title>CSS - voll normal! Sind CSS-Resets heute noch nötig?</title>
    <content type="html">&lt;p&gt;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 &lt;code&gt;margin&lt;/code&gt; vornahm, verwendeten die anderen Browser dafür &lt;code&gt;padding&lt;/code&gt;. Grund genug,  alle Browser-Einstellungen in einem &lt;strong&gt;CSS-Reset&lt;/strong&gt; zurückzusetzen:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;ul, ol, li&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Andere empfahlen diese Regel mit dem Universalselektor &lt;code&gt;* {...}&lt;/code&gt;, 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 &lt;a href=&quot;https://codepen.io/chriscoyier/pen/JpLzjd&quot; rel=&quot;noopener noreferrer&quot;&gt;HTML Kitchen-Sink&lt;/a&gt; von Chris Coyier. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Elija Manor zeigt in dieser Visualiserung, dass eine Normalisierung  einiger, weniger Eigenschaften bereits ausreichen würde:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;/images/27d59170-8335-11ec-a287-b42e9947ef30.png&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;img src=&quot;/images/27d59170-8335-11ec-a287-b42e9947ef30.png?size=medium&quot; alt=&quot;Visualizing CSS-Resets von Elija Manor&quot; title=&quot;Visualizing CSS-Resets von Elija Manor&quot; loading=&quot;lazy&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Welche Eigenschaften sollte man heute normalisieren?&lt;/p&gt;
&lt;h2&gt;all&lt;/h2&gt;
&lt;p&gt;Elad Shechter schlug im Gespräch mit Chris Coyier ein neues CSS-Reset vor, das Gebrauch der neuen &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/all&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;all&lt;/a&gt;-Eigenschaft und unset-Wertes macht. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;*:where(:not(iframe, canvas, img, svg, video):not(svg *))&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; unset&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; revert&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Mit diesen Zeilen werden alle Festlegungen des User-Agent-Stylesheets außer für die &lt;code&gt;display&lt;/code&gt;-Eigenschaft entfernt.&lt;/p&gt;
&lt;h2&gt;box-sizing&lt;/h2&gt;
&lt;p&gt;In einem Folgepost überlegt Chris Coyier, ob &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;box-sizing&lt;/a&gt; überhaupt noch normalisiert werden muss.&lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;*, *::before, *::after&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;box-sizing&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; border-box&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Da immer mehr Layouts mit Grid und Flexbox realisiert werden, bei denen &lt;code&gt;fr&lt;/code&gt;-Einheiten und flexible Breiten zum Zuge kommen, ist die Einstellung des Box-Modells selbst bei Elementen mit &lt;code&gt;padding&lt;/code&gt; und &lt;code&gt;margin&lt;/code&gt; eigentlich nicht mehr nötig.&lt;/p&gt;
&lt;h2&gt;text-size-adjust&lt;/h2&gt;
&lt;p&gt;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 &lt;a href=&quot;https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/text-size-adjust&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;text-size-adjust&lt;/a&gt;-Eigenschaft empfehlenswert. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn4&quot; id=&quot;fnref4&quot;&gt;[4]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;block language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;-webkit-text-size-adjust&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;text-size-adjust&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;PS: Im SELF-Wiki werden CSS-Resets in unserem &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Einstieg_in_CSS&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Einstieg in CSS&lt;/a&gt;-Kurs im &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Einstieg_in_CSS/Syntax#Normalisierung&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Syntax-Kapitel&lt;/a&gt; beschrieben.&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;Ein ausführlichere Geschichte der CSS-Resets finden Sie bei Peter Müller: &lt;a href=&quot;https://html-und-css.de/css-resets/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Eine kurze Geschichte der »CSS Resets«&lt;/a&gt; vom 20. Juli 2020 &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;css-tricks: &lt;a href=&quot;https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;An Interview With Elad Shechter on “The New CSS Reset” &lt;/a&gt; am 19.10.2021 &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;css-tricks: &lt;a href=&quot;https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Notes on Josh Comeau’s Custom CSS Reset &lt;/a&gt; von Chris Coyier, 05.01.2022 &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn4&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;css-tricks: &lt;a href=&quot;https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Your CSS reset needs text-size-adjust&lt;/a&gt; von Chris Coyier am Feb 11, 2022 &lt;a href=&quot;#fnref4&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/24/20-21-22</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2021-12-24T06:07:28Z</published>
    <updated>2021-12-24T06:07:28Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/24/20-21-22#m1794776" rel="alternate" type="text/html"/>
    <title>20, 21 -22 …</title>
    <content type="html">&lt;p&gt;&lt;strong&gt;Weihnachtsbrief 2021&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Warten, zählen, hoffen, bangen …&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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 &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn1&quot; id=&quot;fnref1&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; – sein freundliches Wesen, sein Humor und vor allem sein Know-how fehlen uns.&lt;/p&gt;
&lt;p&gt;Eigentlich sollte das Jahr unter dem Schwerpunkt-Thema &lt;strong&gt;Integration&lt;/strong&gt; 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. &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn2&quot; id=&quot;fnref2&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; Selbstverständlich  übertrug er dabei alle &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/archive&quot; rel=&quot;noopener noreferrer&quot;&gt;bestehenden Beiträge&lt;/a&gt; seit 2008. Vielen Dank dafür.&lt;/p&gt;
&lt;p&gt;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!&lt;/p&gt;
&lt;p&gt;Im Herbst überraschte mich Marc mit dem &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/nov/29/adventskalender-2021&quot; rel=&quot;noopener noreferrer&quot;&gt;Adventskalender&lt;/a&gt;, den er vorbereitet hatte. Das Thema &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Barrierefreiheit&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Barrierefreiheit&lt;/a&gt; wird oft missverstanden, geht uns aber alle an!&lt;/p&gt;
&lt;blockquote&gt;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.&lt;/blockquote&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Die im Blog veröffentlichten Kalenderbeiträge wurden auf unserem Twitter-Kanal &lt;sup class=&quot;footnote-ref&quot;&gt;&lt;a href=&quot;#fn3&quot; id=&quot;fnref3&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt; &lt;em&gt;getweetet&lt;/em&gt;, sodass wir einige neue Twitter-Abonnenten bekamen. Gunnar Bittersmann retweeted sonst Nachrichten und Trends aus der englischsprachigen Welt.&lt;/p&gt;
&lt;p&gt;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!&lt;/p&gt;
&lt;p&gt;Frohe Weihnachten und ein gutes neues Jahr!&lt;/p&gt;
&lt;p&gt;Matthias Scharwies, 1. Vorsitzender&lt;/p&gt;
&lt;hr class=&quot;footnotes-sep&quot;&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn1&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/mar/11/besturzt-und-fassungslos-matthias-apsel-ist-gestorben&quot; rel=&quot;noopener noreferrer&quot;&gt;Bestürzt und Fassungslos – Matthias Apsel ist gestorben&lt;/a&gt; vom 11.03.2021 &lt;a href=&quot;#fnref1&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn2&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/jan/24/neues-weblog&quot; rel=&quot;noopener noreferrer&quot;&gt;Neues Weblog!&lt;/a&gt; vom 24.01.2021 &lt;a href=&quot;#fnref2&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn3&quot; class=&quot;footnote-item&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://twitter.com/SELFHTML&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;twitter.com/SELFHTML&lt;/a&gt; &lt;a href=&quot;#fnref3&quot; class=&quot;footnote-backref&quot;&gt;↩︎&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/23/aria-live-regionen</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
      <uri>https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen</uri>
    </author>
    <published>2021-12-23T04:03:13Z</published>
    <updated>2021-12-23T04:03:13Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/23/aria-live-regionen#m1794748" rel="alternate" type="text/html"/>
    <title>ARIA-live Regionen</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Zusätzlich hat Sonja Weckenmann dazu im deutschsprachigen technica11y-Kanal zu diesem Thema gesprochen (auch eine der Baustellen, auf denen Joschi Kuphal mitwirkt).&lt;/p&gt;
&lt;p&gt;Hier die Links&lt;/p&gt;
&lt;p&gt;Zum Text
&lt;a href=&quot;https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;ARIA Live-Regionen&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Zum Vortrag (Hinweis: YouTube-Video. YouTube gehört zu Google und sammelt Daten!) &lt;a href=&quot;https://www.youtube.com/watch?app=desktop&amp;v=klqgya6jfY4&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.youtube.com/watch?app=desktop&amp;v=klqgya6jfY4&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/21/mindscreen-blog-und-veranstaltungshinweise</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2021-12-21T05:00:35Z</published>
    <updated>2021-12-21T05:00:35Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/21/mindscreen-blog-und-veranstaltungshinweise#m1794659" rel="alternate" type="text/html"/>
    <title>mindscreen: Blog und Veranstaltungshinweise</title>
    <content type="html">&lt;p&gt;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 &lt;a href=&quot;Barrierefreiheit#Weblinks&quot; rel=&quot;noopener noreferrer&quot;&gt;SELF-Wiki&lt;/a&gt;) ;-)&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Das Team von mindscreen veröffentlicht zum Thema, stellt Expertise zur Verfügung (zum Beispiel bei Vorträgen der IAAP D-A-CH - &lt;a href=&quot;https://iaap-dach.org/veranstaltungen/alles-unter-einem-d-a-ch.html&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://iaap-dach.org/veranstaltungen/alles-unter-einem-d-a-ch.html&lt;/a&gt;), 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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Viel Spaß mit dem Link im heutigen Türchen (nicht erschrecken - es sind auch englischsprachige Beiträge dabei!&lt;/p&gt;
&lt;p&gt;Event-Liste&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.mindscreen.de/web-accessibility-events&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.mindscreen.de/web-accessibility-events&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Blog&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.mindscreen.de/blog&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.mindscreen.de/blog&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Marc Haunschild&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/20/manuel-matuzovic-die-superpower-der-tabulator-taste</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2021-12-20T03:55:46Z</published>
    <updated>2021-12-20T03:55:46Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/20/manuel-matuzovic-die-superpower-der-tabulator-taste#m1794631" rel="alternate" type="text/html"/>
    <title>Manuel Matuzovic: Die Superpower der Tabulator-Taste</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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 &lt;a href=&quot;https://accessibility-club.org/event/accessibility-club-meetup-8-2&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://accessibility-club.org/event/accessibility-club-meetup-8-2&lt;/a&gt;), hat ein eigenes Blog mit vielen Beiträgen zum Thema und hat nun sogar einen Kurs bei dem berühmten Smashing Magazine (&lt;a href=&quot;https://smashingconf.com/online-workshops/workshops/manuel-matuzovic-apr&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://smashingconf.com/online-workshops/workshops/manuel-matuzovic-apr&lt;/a&gt;)  - ein toller Kollege, den ich für seine unterhaltsame und fachlich souveräne Art schätze. Eine sehr angenehme Kombination.&lt;/p&gt;
&lt;p&gt;Am bekanntesten ist vermutlich seine Website &lt;a href=&quot;https://www.htmhell.dev/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.htmhell.dev/&lt;/a&gt;, in der die dunkle Seite der Webentwicklung einen Ehrenplatz gefunden hat.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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“ (&lt;a href=&quot;https://www.matuzo.at/blog/de/testing-with-tab/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.matuzo.at/blog/de/testing-with-tab/&lt;/a&gt;).&lt;/p&gt;
&lt;p&gt;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. ;-)&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.matuzo.at/blog/de/testing-with-tab/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.matuzo.at/blog/de/testing-with-tab/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.matuzo.at/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.matuzo.at/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Marc Haunschild&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/11/technica11y</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2021-12-11T03:43:25Z</published>
    <updated>2021-12-11T03:43:25Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/11/technica11y#m1794381" rel="alternate" type="text/html"/>
    <title>technica11y</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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 &lt;strong&gt;„technica11y auf Deutsch“&lt;/strong&gt; einen Ableger für uns „Germans“ erhalten.&lt;/p&gt;
&lt;p&gt;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 (&lt;a href=&quot;https://www.youtube.com/watch?v=L1dyBc5IYok&amp;list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq&amp;index=1&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.youtube.com/watch?v=L1dyBc5IYok&amp;list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq&amp;index=1&lt;/a&gt;).&lt;/p&gt;
&lt;p&gt;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 (&lt;a href=&quot;https://www.youtube.com/watch?v=fNYNrWDHBFY&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.youtube.com/watch?v=fNYNrWDHBFY&lt;/a&gt;). Markus Herrmann erklärt, worauf bei der Verwendung von vue zu achten ist (&lt;a href=&quot;https://www.youtube.com/watch?v=ML-zverajdg&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.youtube.com/watch?v=ML-zverajdg&lt;/a&gt;) und viele weitere spannende Vorträge sind bereits angekündigt oder in Planung.&lt;/p&gt;
&lt;p&gt;Technica11y auf deutsch
&lt;a href=&quot;https://www.youtube.com/watch?v=L1dyBc5IYok&amp;list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.youtube.com/watch?v=L1dyBc5IYok&amp;list=PLLuwoY7nxnR3mAd6J00J1nfI_-uiuibiq&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Marc Haunschild&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/10/die-prufverfahren-von-t-systems-und-bik-im-vergleich</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2021-12-10T04:21:14Z</published>
    <updated>2021-12-10T04:21:14Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/10/die-prufverfahren-von-t-systems-und-bik-im-vergleich#m1794364" rel="alternate" type="text/html"/>
    <title>Die Prüfverfahren von T-Systems und BIK im Vergleich</title>
    <content type="html">&lt;p&gt;Im Grunde kann man Testverfahren unterscheiden in&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;automatische Tests, die lediglich einige wenige Vorgaben an Barrierefreiheit prüfen können&lt;/li&gt;
&lt;li&gt;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&lt;/li&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;In Deutschland gibt es zwei relevante Testverfahren: den BIK-BITV-Test und den Test der T-Systems Multimedia Solutions GmbH.&lt;/p&gt;
&lt;p&gt;Gisela Kollotzek, Absolventin im Studiengang „Computer Science and Media“, hat die Ergebnisse ihrer Masterthesis über dieses Thema im Juni vorgestellt.&lt;/p&gt;
&lt;p&gt;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&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/2021/06/01/webinar-manuelle-pruefverfahren-fuer-webseiten-nach-bitv-2-0/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/2021/06/01/webinar-manuelle-pruefverfahren-fuer-webseiten-nach-bitv-2-0/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Marc Haunschild&lt;/p&gt;
&lt;p&gt;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:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/category/news-events/&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://digitalisierung.hdm-stuttgart.de/barrierefreiheit/category/news-events/&lt;/a&gt;&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/07/barrierefreiheitsstarkungsgesetz-european-accessibility-act</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2021-12-07T00:57:51Z</published>
    <updated>2021-12-07T00:57:51Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/07/barrierefreiheitsstarkungsgesetz-european-accessibility-act#m1794244" rel="alternate" type="text/html"/>
    <title>Barrierefreiheitsstärkungsgesetz/ European Accessibility Act</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Die DSGVO ist ein bekanntes Beispiel dafür. Was die &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Barrierefreiheit&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;Barrierefreiheit&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;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“.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Wie dem auch sei: sicher ist das ein erster Wurf und besser als vorher, also nichts.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Das Barrierefreiheitsstärkungsgesetz auf der offiziellen Seite des Bundesministeriums für Arbeit und Soziales (BMAS)&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Kritische Anmerkungen der Aktion Mensch&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreiheitsstaerkungsgesetz-nur-kleine-schritte-zur-inklusion&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreiheitsstaerkungsgesetz-nur-kleine-schritte-zur-inklusion&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Marc Haunschild&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/06/sag-ichs</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2021-12-06T01:38:28Z</published>
    <updated>2021-12-06T01:38:28Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/dec/06/sag-ichs#m1794240" rel="alternate" type="text/html"/>
    <title>Sag ich&apos;s?</title>
    <content type="html">&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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?&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Auch interessant für Angehörige und alle, die sich in die Situation, in die Zweifel und Fragen hineinversetzen und sich sensibilisieren lassen wollen.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://sag-ichs.de/start&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;sag-ichs.de/start&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Marc Haunschild&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/nov/30/blue-beanie-day</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
    </author>
    <published>2021-11-30T04:04:29Z</published>
    <updated>2021-11-30T04:04:29Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/nov/30/blue-beanie-day#m1794076" rel="alternate" type="text/html"/>
    <title>Blue-Beanie-Day</title>
    <content type="html">&lt;p&gt;Heute,  am 30.11., ist wieder &lt;a href=&quot;https://de.wikipedia.org/wiki/Blue_Beanie_Day&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Blue Beanie Day&lt;/strong&gt;&lt;/a&gt;; ein Aktionstag, um auf die Wichtigkeit von &lt;a href=&quot;https://wiki.selfhtml.org/wiki/Webstandards&quot; rel=&quot;nofollow noopener noreferrer&quot;&gt;&lt;strong&gt;Webstandards&lt;/strong&gt;&lt;/a&gt;aufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Deshalb ist der &lt;a href=&quot;https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/nov/29/adventskalender-2021&quot; rel=&quot;noopener noreferrer&quot;&gt;diesjährige Adventskalender&lt;/a&gt; der Barrierefreiheit gewidmet!&lt;/p&gt;
&lt;p&gt;Matthias Scharwies&lt;/p&gt;
</content>
  </entry>
  <entry>
    <id>https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/nov/29/adventskalender-2021</id>
    <author>
      <name>Matthias Scharwies</name>
      <email>mscharwies@selfhtml.org</email>
      <uri>https://forum.selfhtml.org/advent/2021</uri>
    </author>
    <published>2021-11-29T17:36:01Z</published>
    <updated>2021-11-29T17:36:01Z</updated>
    <link href="https://news-technologi.netlify.app/host-https-blog.selfhtml.org/2021/nov/29/adventskalender-2021#m1794049" rel="alternate" type="text/html"/>
    <title>Adventskalender 2021</title>
    <content type="html">&lt;p&gt;Der diesjährige Adventskalender ist der Barrierefreiheit gewidmet - ein Thema für alle, das jeden und alle angeht. Warum ist das so?&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Es geht darum, sich von Beginn an zu überlegen, wie man eine Webseite so baut, dass sie von allen Besucherinnen effizient genutzt werden kann.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Barrierefreiheit ist also keine Summe von Funktionen, sondern ein Konzept.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Es macht genauso viel Sinn, eine Website so zu entwickeln, dass sie auf &lt;strong&gt;allen Geräten&lt;/strong&gt; wie Smartphones, Computern und Smart-TVs funktioniert, wie es Sinn macht, eine Website für &lt;strong&gt;alle Menschen&lt;/strong&gt; zu erstellen.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Jeder Mensch der Welt trifft eine große Taste schneller und sicherer als eine kleine Taste.&lt;/p&gt;
&lt;p&gt;Barrierefreie Webseiten sind bessere Webseiten. Sie kommen. Freuen wir uns drauf. Und machen mit!&lt;/p&gt;
&lt;p&gt;Hier geht&apos;s zum diesjährigen &lt;a href=&quot;https://forum.selfhtml.org/advent/2021&quot; rel=&quot;noopener noreferrer&quot;&gt;Adventskalender&lt;/a&gt;!&lt;/p&gt;
&lt;p&gt;Eine frohe Weihnachtszeit!&lt;/p&gt;
&lt;p&gt;Marc Haunschild&lt;/p&gt;
&lt;p&gt;Übrigens: Unser Beitragsbild oben ist eine abgewandelte Version des offiziellen Logos der Unesco für Barrierefreiheit. Sie kennzeichnet unsere Beiträge zum Thema.&lt;/p&gt;
</content>
  </entry>
</feed>