Kategorie: Onlinekram

In dieser Kategorie – naja, Onlinekram halt: Vor allem HTML-, CSS- und JavaScript-Experimente, außerdem Wordpress-Plugins und Datenschutzsachen.

Umsetzung der DSGVO

Wie angekündigt, hier ein dritter Teil der Serie zur DSGVO. Die anderen beiden gibt es hier (Teil 1) und hier (Teil 2). Folgende Modifikationen und Einstellungen habe ich vorgenommen: 1. WordPress-Funktionen Ich empfehle ein eigenes (Child-) Theme, damit alle Änderungen update-sicher sind und nicht bei jedem Theme-Update übergebügelt werden. Grundsätzlich können alle folgenden Änderungen direkt in die functions.php (liegt im Ordner [WordPress-Verzeichnis]/wp-content/themes/[aktivesTheme]/) eingefügt werden: 1.1 Checkbox ins Kommentare-Formular einbasteln Ich […]

Weiterlesen

Welche Daten verarbeite ich?

Das war tatsächlich die spannendste Frage in diesem Zusammenhang: Welche personenbezogenen Daten verarbeite ich eigentlich? Hier hat die DSGVO (Was das ist? Hier Teil 1) tatsächlich einen ihrer (für mich) größten Mehrwerte ausgespielt: Alle machen sich nun endlich einmal Gedanken darüber, was sie da eigentlich mit ihren Webseiten „anrichten“! Die Informationelle Selbstbestimmung hat ziemlich starke Gegner: Die DSGVO zwingt die Webseitenbetreibenden nun also – spätestens beim notwendigen Verfassen der angepassten […]

Weiterlesen

Die DSGVO und ich

Ich bin wieder online. 🙂 Das war durchaus ein gutes Stück Arbeit. Die EU Datenschutz-Grundverordnung (umgangssprachlich: DSGVO, offiziell: "Verordnung (EU) 2016/679", strukturierte Online-Version u.a. hier) hat ja bekanntermaßen einiges an Staub aufgewirbelt. Für viele Netzangebote wie meines bedeutet sie, dass die Betreibenden nicht nur – wie bisher – Administrator/in, Frontend-Designer/in, Redakteur/in, Autor/in, Moderator/in, etc. in Personalunion sind, sondern darüber hinaus die Rollen "Datenschutzbeauftragte/r" und "Hausjurist/in" nun auch dazu gehören. Ich […]

Weiterlesen

CSS: Hüpfende Bälle

Hier also – wie angekündigt – ein weiteres Projekt aus der Kategorie "Funny CSS Stuff": Heute geht es um animierte, halbwegs realistisch hübpfende bunte Bälle mit Schatten: 1. Worum es geht… … im Schnelldurchlauf in diesem Video: 2. Das HTML: Weniger ist mehr Wir benötigen nur eine Bühne und Bälle. Die Doppelklassen der Bälle erklärt sich aus dem Wunsch nach aufgeräumtem Code. Die Klasse ball sorgt für das grundsätzliche Design, […]

Weiterlesen

Post-Its und Notizzettel

1. Worum gehts? Selten habe ich einen so dermaßen treffenden Beitragstitel geschrieben 🙂 Hier geht es also um die reine CSS-seitige Gestaltung von Post-Its und/oder Notizzetteln, die dann z.B. so aussehen können: Post-It Ein wenig Text … … und ein Link Notiz mit Pin Ein wenig Text … … und ein Link   2. Der Zettel Das Ganze gibts jetzt hier zum Nachbasteln, Schritt für Schritt. Beginnen wir mit dem […]

Weiterlesen

CSS: Das Flexbox-Modul

1. Warum ich Flexbox-Fan bin? Vorkonfektionierte Frameworks wie das Responsive Grid System, xy.css, pure.css, Bootstrap oder UIkit haben sicher ihre Vorteile, sind aber in der Nutzung nicht immer supereinfach, Außerdem bin ich – und der/die ein oder andere Leser/in – immer daran interessiert, alles (1) "from scratch" und (2) ganz alleine selber zu machen. Und von Grund auf verstehen, was da eigentlich passiert – oder daran verzweifeln und am Ende […]

Weiterlesen

CSS-Transitions

Zu Beginn wieder eine Spielerei 🙂 Rakete! Via jQuery wird über den Button eine Klasse zweier Container (für die Rakete und den Hintergrund) getoggelt, bei denen die Position mittels CSS Transition animiert wird. Es gibt aber auch sinnvolle Beispiele, z.B. beim Button-Design: Auch hier auf der Seite wird übrigens der Menü-Button via toggleClass() und CSS Transitions animiert: Und das geht "recht einfach": Der Button besteht lediglich aus zwei divs, einem […]

Weiterlesen

CSS: Filter-Effekte

CSS-Filter sind Manipulationen an Texten oder Bildern ist eine "nicht-destruktive" Veränderung. Das "Original" wird also nicht verändert, sondern lediglich in der Ausgabe (hier dem Rendering des Browsers) nach entsprechenden Vorgaben angezeigt. Bilder und Texte können mit folgenden Filtern versehen werden (alphabetisch): blur() – Weichzeichnen brightness() – Helligkeit ändern contrast() – Kontrast ändern drop-shadow() – Schlagschatten grayscale() – Graustufen hue-rotate() – "Farbtonrotation" invert() – Umkehren opacity() – Deckkraft saturate() – Sättigung […]

Weiterlesen

CSS-Transitions

Ein erstes "reines CSS"-Beispiel – eine nette Spielerei: Los / Zurück Dieses Anwendungsbeispiel verwendet unprefixed transitions. Funktioniert nicht in Internet Explorer 9 (oder älter) und nicht in Oprea mini. Vgl. https://caniuse.com/#search=transitions Hier verwende ich übrigens eine unsichtbare Checkbox, die mit dem (als Button gestylte) Klick / Tap auf das Label de-/aktiviert wird. Die Pseudoklasse :checked dient dazu, um das Folgeelement ~ #carway .car zu animieren. Hier die Codes: HTML <div […]

Weiterlesen

:hover-Effekte für Touchscreens?

Bei dem Artikel zu CSS-Transitions ist mir mal wieder aufgefallen, wie selbstverständlich (sprich: altmodisch, da desktop-sozialisiert 🙂 ) man mit der Pseudoklasse :hover umgeht, obwohl doch Benutzer von Endgeräten mit Touchscreens nicht "hovern" können. Da aber irgendwas zwischen 30 und 50% aller Seitenaufrufe im Internet (je nach Quelle, Tendenz: steigend) von Mobilgeräten getätigt werden, ist das ein wenig vermessen – vor allem, wenn man den Anspruch hat, geräte-unabhängige Webseiten zu […]

Weiterlesen

CSS-Transitions

Was sind Transitions und wem können sie zugewiesen werden? Transitions sind dynamische Änderungen von CSS-Eigenschaften. Diese können so manipuliert werden, dass weiche fließende Übergänge entstehen, welche wie Animationen wirken. Transitions sind nicht zu verwechseln mit CSS Animations und CSS Transformatios. Transitions können den meisten HTML-Elementen über CSS-Klassen oder -IDs zugewiesen werden. Dabei definiert man einen Wert einer CSS-Eigenschaft als Anfangs- und einen davon abweichenden Wert der gleichen Eigenschaft als Endpunkt […]

Weiterlesen