Webseite für die Österreichisch-Algerische Gesellschaft

Ich hab eine neue Website für die Österreichisch-Algerische Gesellschaft erstellt. Die Seite ist responsive, und sowohl für Desktop und Mobiltelefon optimiert. Hier ansehen:

https://oesterreich-algerien.at

Grundlagen:

• HTML5: Semantische Struktur für klare Inhalte und gute Zugänglichkeit.
• CSS3: Fortschrittliches Styling für Layout und Design, inklusive:
  • CSS Variablen (Custom Properties): Für ein konsistentes und leicht anpassbares Theme.
  • Responsive Design: Durchdachter Einsatz von Media Queries, um eine optimale Darstellung auf allen Gerätegrößen (Desktop, Tablet, Smartphone) sicherzustellen.
  • Flexbox & CSS Grid: Für flexible und robuste Layout-Strukturen der verschiedenen Inhaltsbereiche.
• Modernes JavaScript (ES6+): Für die gesamte dynamische Funktionalität und Interaktivität der Seite, geschrieben in Vanilla JS.

Dynamik & Interaktivität:

• Modulare JavaScript-Architektur: Logik aufgeteilt in spezialisierte Manager-Skripte (für Events, Publikationen, News etc.) und ein Haupt-Skript für eine gute Organisation und Wartbarkeit.
• Asynchrones Laden von Inhalten: Nachrichten, Veranstaltungen und Publikationen werden dynamisch aus JSON-Dateien via Workspace und async/await geladen. Dies ermöglicht einfache Inhaltsupdates ohne direkte HTML-Bearbeitung.
• Client-Side Templating: HTML-Strukturen für dynamische Inhalte werden direkt im JavaScript generiert (mittels Template Literals).
• Interaktive UI-Elemente:
  • Hamburger-Menü: Für eine intuitive mobile Navigation.
  • Modales Formular: Für Kontakt- und Mitgliedschaftsanfragen, mit AJAX-basierter Übermittlung ohne Neuladen der Seite.
  • Klickbare Content-Boxen: Publikationen und Veranstaltungen sind als komplette Kacheln klickbar und führen zu Detailseiten.
  • Einklappbare Sektionen: Inhalte wie “Über Uns” und “Vorstand” können auf kleineren Bildschirmen für eine bessere Übersicht ein- und ausgeklappt werden.
• URL-Parameter-Verarbeitung: Für die Anzeige spezifischer Detailseiten (z.B. für einzelne Publikationen oder Veranstaltungen).

Benutzererfahrung (UX) & Performance:

• Lazy Loading für Bilder: Bilder werden erst geladen, wenn sie in den sichtbaren Bereich des Nutzers gelangen, was die anfängliche Ladezeit der Seite verbessert.
• Scroll-Animationen: Dezente Fade-In-Effekte und Tipp-Animationen für Textelemente beim Scrollen, um die Seite lebendiger zu gestalten (gesteuert via Intersection Observer).
• Hero-Slideshow: Dynamischer Bildwechsel im Header-Bereich der Startseite.
• Smooth Scrolling: Sanftes Scrollen zu Ankerpunkten auf der Seite.
• Cookie-Banner: Implementierung eines Cookie-Banners mit Speicherung der Nutzereinwilligung im localStorage.

SEO & Barrierefreiheit:

• Einsatz von semantischem HTML und relevanten Meta-Tags (description, keywords, robots).
• Implementierung von Strukturierten Daten (Schema.org via JSON-LD) für eine bessere Auffindbarkeit durch Suchmaschinen.
• Verwendung von title-Attributen und alt-Texten für Bilder.

Externe Bibliotheken & Werkzeuge:

• jQuery: Wird geladen (möglicherweise für spezifische, kleine Aufgaben oder Abhängigkeiten von Drittanbieter-Skripten wie Lightbox).
• Font Awesome: Für skalierbare Vektor-Icons.
• Lightbox.js: Zur vergrößerten Darstellung von Bildern in Galerien.