Interaktiver Stegosaurus

Im Rahmen des Moduls «BUUx562 Web-Technologien und Web-Design NT FS24» wurden zwei Webseiten erstellt. Eine davon mit Hilfe des Tools WordPress, die andere von Grund auf mit HTML, CSS und JavaScript. Dabei habe ich mich entschieden, die zuvor mit WordPress erstellte Website in HTML mit allen Funktionalitäten so gut wie möglich nachzubauen.

Die WordPress-Seite ist bis am 12.03.2024 unter folgendem Pfad abrufbar: https://wowekego.myhostpoint.ch/. Es handelt sich um einen Blog mit Startseite und zwei Unterseiten. Für die WordPress-Seite wurde das Thema «Tewenty Tewnty-Four» gewählt. Dieses wurde anschliessend angepasst. Genauer wurde der Header verändert, um die Links zu den beiden Unterseiten anzuzeigen und der Footer so weit angepasst, dass dieser immer zu der Hauptseite verlinkt und einen Disclaimer enthält. Der Body wurde auf das Wesentliche reduziert. Dazu gehört ein eine Schaltfläche mit einem Link zum «Interaktiven Stegosaurus», welcher der Hauptinhalt der Seite bildet. Darunter befindet sich eine Slideshow mit Bildern eines Stegosaurus-Skeletts. Darunter befindet sich weiter ein Zitat aus einem Wikipedia-Artikel.

Auf der Unterseite «Lerne den interaktiven Stegosaurus kennen» befindet sich ein Bild eines Stegosaurus-Skeletts. Mit Hilfe der Plugins «Draw Attention» und «Elementor» wurden einzelne Bildteile gemappt, damit diese mit dem Cursor angewählt werden können. Beim Klicken wird der Besucher auf einen Wikipedia-Abschnitt des gewählten Skelett-Bestandteils weitergeleitet, welcher mit der anwählbaren Schaltfläche verlinkt wurde.

Die zweite Unterseite des Blogs, «Finde den Stegosaurus in deiner Nähe», beinhaltet eine Anzeige für das Sauriermuseum in Aathal (ZH) mit eingebetteter Karte von Google Maps, welche die Funktion eines Routenplaners beinhaltet. Oberhalb der Karte befindet sich eine Schaltfläche, welche auf die Webseite des Sauriermuseums verlinkt, genauer den Abschnitt mit den Öffnungszeiten und Eintrittspreisen.

Die HTML-Seite wurde auf den Server hasn.ch hochgeladenen und ist unter dem Pfad https://hasn.ch/students/11_Wullschleger/htmlcss/ abrufbar. Am anspruchsvollsten war das Implementieren der Mapping-Funktion für den «Interaktiven Stegosaurus».

Die Mapping-Funktion konnte ohne grössere Probleme mittels CSS auf das Bild angewendet werden. Leider hat sich der Effekt für das Aufleuchten des entsprechenden Bereichs, wie es im Screenshot der WordPress-Seite erkennbar ist, als schwierig herausgestellt. Nach Ausprobieren verschiedener Lösungen bin ich zum Schluss gekommen, dass die Hover-Funktion der verwendeten jQuery die vielversprechendste Methode ist. Leider leuchtete der Bereich bis zum Schluss nicht auf, obwohl der Code korrekt war und der Effekt nicht von einem anderen Effekt überschrieben werden sollte. Zur Kontrolle wurde ein «console.log»-Befehl in die Funktion integriert. Bei jedem Überfahren mit dem Cursor erfasst die Konsole einen Log-Eintrag, wodurch die Anwendung der Funktion ersichtlich wird.

Die Arbeit mit WordPress habe ich als sehr intuitiv empfunden. Es lässt sich damit in kurzer Zeit eine professionell aussehende Webseite, beziehungsweise ein Blog, erstellen. Die HTML-Programmierung ist deutlich aufwendiger, ermöglicht allerdings eine bessere Steuerung der einzelnen Inhalte, weshalb ich persönlich diese Methode bevorzuge.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert