Design und Programmierung für Anfänger – Design und Code für Anfänger

Neue Rubrik – Design und Code – Herzlich Willkommen

Design und Code ist eine neue Rubrik von Schulhof-Programmierung. Schwerpunkt der Rubrik wird es nicht sein, irgendwelche Grafik-Programme zu erklären, dazu gibt es auf Youtube Tausende von Videos, die du dir reinziehen kannst. Schwerpunkt wird die Programmierung sein, Darstellung von Farben im Code, Abstufungen, Text-Hintergründe, alles was im Bereich Design liegt, oder wie kann ich in Sekundenschnelle auf meinem Online-Shop aus einem roten Button im Code einen grünen Button machen. Die Seite soll dir helfen, zusätzlich ein spezielles Code-Wissen aufzubauen, das dir überall weiterhelfen wird, egal welche technische Anwendung du am Start hast.

Hier gibt es eine Menge zu lernen… Wenn du das Thema cool und spannend findest, dann bleib auf jeden Fall dran. Wenn du die Grundlagen bestimmer Programmier-Techniken beherrscht bist du nicht nur schneller sondern auch etwas schlauer als andere-.)

Genug gequatscht, es geht los….

Viel Spaß!

Wie kann man die Hintergrund-Farbe einer gesamten Webseite verändern? Wo kann ich das sehen? Wie kann ich die Farben beliebig einstellen? Zum Beispiel willst du eine Webseite mit coolem schwarzem Hintergrund und weißer Farbe. Das sind Basics, die du kennen solltest.

Check das Video ( Hintergrund-Farbe einer Webseite verändern im Code)

Es ist bereits jetzt schon riesiges Thema, am 28.06.2025 geht das Barrierefreiheitsstärkungsgesetz in Kraft. Das heißt Webseiten, Apps oder Online-Shops müssen barrierefrei sein. Auch als Designer ist es natürlich wichtig, dass du hier gute Kenntnisse besitzt. Was ist genau ein Focus, der sich um einen Button legt und wozu ist dieser gut und wie ist das aufgebaut? Video

Was ist barrierefreier Code eigentlich? mehr

In diesem Video wird dir gezeigt wie du eine einfache Navigation aufbaust, und ein Logo, das du vielleicht zur Verfügung hast einbaust. Ich zeige dir, wie du den CSS Code auslagerst, so dass der Code übersichtlich bleibt, außerdem ist es wichtig, dass du dir auch Design-technisch überlegst, wie breit soll die Fokus-Umrandung sein, damit das ganze auch cool aussieht, wenn jemand sich mit der Tab-Taste durch die Navigation und durch das Logo klickt.

Außerdem wird die Navigation mit einem Screenreader zusätzlich getestet, am Schluss des Videos, denn du musst sicherstellen bis spätestens 28.06.2025, dass deine Sachen barrierefrei aufgebaut und entwickelt worden sind z. B. auch für eine blinde Person, die sich die Links deiner Navigation vorlesen lässt, dass dies mit einem Screenreader ( Sprachsoftware), ohne Probleme funktioniert.

Der Test wird am Schluss mit dem NVDA-Screenreader durchgeführt. Video ( ca. 30 Minuten)

Wie dick soll die Umrandung sein, wenn sich jemand nur mit der Tabtaste auf deinem Online-Shop bewegt?

Der Beispiel-Button Video ( 16 min)

( barrierefreies Coden – Design) – Steuerung über genaue CSS-Angaben

Einzelne Wörter in verschiedenen Farben darstellen – Wie und wo sehe ich das im Code? Video ( 35 min)

Hintergrund-Farbe einer WordPress im CSS- verändern ( CSS-Code) Video ( geht nicht bei jedem Theme so)

Das solltest du unbedingt wissen und wie dieser funktioniert. Ein Prüftool. (Barrierefreiheit) – Video

Hexal und RGB-Werte im Code 15 Minuten – Video

GSAP (GreenSock Animation Platform) ist eine leistungsstarke JavaScript-Bibliothek, die hauptsächlich für die Erstellung von Animationen in Webprojekten verwendet wird. Sie ermöglicht Entwicklern, komplexe Animationen einfach und effizient zu gestalten, die flüssig und performant ablaufen, auch bei anspruchsvollen visuellen Effekten.

Hier sind einige Kernpunkte zu GSAP im Bereich der Programmierung:

Animation von DOM-Elementen: GSAP kann HTML-Elemente, CSS-Eigenschaften, SVG-Grafiken und sogar Canvas-Elemente animieren. Es bietet eine präzise Kontrolle über Timing, Sequenzen und Übergänge.

Performance: Eine der Stärken von GSAP ist die Performance. Es ist so konzipiert, dass Animationen flüssig laufen, selbst auf mobilen Geräten oder bei umfangreichen Animationen.

Einfache Syntax: Mit GSAP ist es leicht, Animationen zu erstellen. Zum Beispiel kann man ein Element animieren, indem man den gsap.to() oder gsap.from() Befehl verwendet.

GSAP und ähnliche Animationstechniken werden in der Webentwicklung für verschiedene Zwecke eingesetzt. Hier sind einige Hauptanwendungsbereiche und Vorteile:

1. Verbesserung der Benutzererfahrung (User Experience, UX)

• Feedback und Interaktion: Animationen helfen, Benutzern Feedback über ihre Aktionen zu geben. Zum Beispiel, wenn ein Benutzer auf einen Button klickt und dieser sich visuell verändert oder eine Animation startet, vermittelt das ein direktes Feedback, dass die Aktion erfolgreich ausgeführt wurde.
• Leitfaden für den Benutzer: Animationen können genutzt werden, um den Benutzer durch eine Webseite oder App zu führen, indem sie visuelle Hinweise auf wichtige Elemente oder Bereiche geben.
• Geschmeidige Übergänge: Anstatt plötzliche Layout-Wechsel oder Ladebildschirme anzuzeigen, können Animationen genutzt werden, um weiche Übergänge zwischen verschiedenen Seiten oder Komponenten zu schaffen.

2. Verstärkung von Branding und Design

• Einprägsame Markenauftritte: Marken können durch gezielte Animationen einprägsamer wirken. Bewegungen und Interaktionen, die das Design und den Charakter der Marke unterstreichen, sorgen für Wiedererkennungswert und ein kohärentes Nutzererlebnis.
• Ästhetik: Animationen verleihen Webseiten visuelle Dynamik und machen sie optisch ansprechender. Sie können dazu beitragen, das Design lebendig wirken zu lassen und die allgemeine Atmosphäre zu verbessern.

3. Erklärungen und Datenvisualisierung

• Infografiken und Diagramme: Animationen helfen, komplexe Daten verständlicher zu machen. Zum Beispiel können Balkendiagramme oder Statistiken schrittweise animiert werden, um die Entwicklung von Daten über die Zeit zu veranschaulichen.
• Erklärvideos und Illustrationen: Bewegte Grafiken können zur Erklärung von Abläufen oder Konzepten verwendet werden, die statische Bilder oder Text nur schwer verständlich machen würden.

4. Interaktive Spiele und Anwendungen

• Webbasierte Spiele: GSAP und ähnliche Animationsbibliotheken eignen sich hervorragend, um Animationen in Spielen zu erstellen, z. B. Bewegungen von Charakteren, Spielumgebungen oder Animationen bei Benutzeraktionen.
• Dynamische Webanwendungen: Komplexe, interaktive Webanwendungen (z. B. interaktive Karten, Simulationen oder E-Commerce-Seiten) nutzen Animationen, um die Dynamik und Reaktionsfähigkeit der Anwendung zu erhöhen.

5. Aufmerksamkeit lenken

• Wichtige Inhalte hervorheben: Mit Animationen können wichtige Elemente wie Call-to-Action-Buttons, Angebote oder neue Features hervorgehoben werden. Diese ziehen die Aufmerksamkeit der Nutzer und lenken den Fokus auf die wesentlichen Inhalte.
• Ablenkungen minimieren: Animationen können dazu beitragen, unerwünschte Ablenkungen zu minimieren, indem sie Übergänge und Bewegungen harmonisch gestalten, sodass der Benutzer flüssig durch den Inhalt geführt wird.

6. Storytelling und immersive Erlebnisse

• Animierte Erzählungen: Animationen ermöglichen es Entwicklern, Erzählungen visuell zum Leben zu erwecken. Dies wird oft in Form von animierten Geschichten oder interaktiven Erlebnissen genutzt, bei denen die Benutzer durch Animationen und Interaktionen in die Handlung eintauchen.
• Mikrointeraktionen: Kleine, subtile Animationen wie das Aufleuchten von Icons, der Wechsel von Menüpunkten oder Animationen beim Scrollen tragen dazu bei, ein nahtloses und immersives Erlebnis zu schaffen.

7. Scroll-basierte Animationen

• Scroll-Trigger: Mit GSAP lassen sich Animationen auslösen, wenn ein Benutzer auf der Seite scrollt. Dies wird oft genutzt, um Inhalte auf dynamische Weise ein- und auszublenden oder für Parallax-Effekte, bei denen sich Hintergrundbilder langsamer als der Vordergrund bewegen.

Zusammengefasst:

GSAP und andere Animationstechniken bieten Entwicklern die Möglichkeit, Webseiten interaktiver, ansprechender und funktionaler zu gestalten. Sie verbessern das Design, die Benutzerführung und die Interaktion und können gleichzeitig komplexe Informationen visuell leichter zugänglich machen.