Impressum

Angaben gemäß § 5 TMG

Lichterlino
Projekt im Rahmen des Moduls User Centered Design
Jade Hochschule Wilhelmshaven

Friedrich-Paffrath-Straße 101
26389 Wilhelmshaven
Deutschland

Projektverantwortliche

• Veronika Gerlitz
• Pauline Rimmele
• Lotta Therese Hoffmann

Kontakt

E-Mail: lichterlino@jade-hs.de

Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV

Veronika Gerlitz
Pauline Rimmele
Lotta Therese Hoffmann

Projektinformationen

Textquellen

• Weißer Hai: Wikipedia – Weißer Hai & WWF – Weißer Hai
• Licht unter Wasser: Wikipedia – Sichtweite unter Wasser
• Seepferdchen: WWF – Seepferdchen
• Seestern: Wikipedia – Seesterne & GEOlino – Seesterne
• Clownfisch: Wikipedia – Echter Clownfisch & Tiergalaxie – Clownfisch Steckbrief
• Kugelfisch: tierchenwelt – Kugelfisch & Wikipedia – Kugelfische
• Oktopus: WWF Junior – Oktopusse, Wikipedia – Kraken & Die Maus – Oktopus
• Korallen: WWF Junior – Korallen

Bildnachweise

Die auf dieser Website verwendeten Illustrationen wurden teilweise mittels KI generiert und von Veronika Gerlitz und Lotta Therese Hoffmann erstellt. Zusätzlich werden Bilder von Pexels verwendet.

• Clownfisch – Pexels
• Koralle – Pexels
• Kugelfisch – Pexels zum klicken
• Oktopus – Pexels
• Seepferdchen – Pexels
• Weißer Hai – Pexels
• Seestern – Pexels

KI-Verzeichnis

Zur Erstellung von Teilen des Quellcodes wurde die KI Gemini und Chat GPT genutzt. Alle angegebenen KI-Prompts wurden zwischen dem 13. April und dem 07. Juni abgerufen.

Homepage:

• „Das ist mein Code. Wie kann ich es machen, dass der Slider nicht nur das Bild wechselt, sondern gleichzeitig auch den Text über dem Bild ändert? Außerdem soll im Hintergrund des Bildes ein Link liegen.“
• „Ich habe ein Dropdown-Menü in meiner Navigation gebaut. Das Öffnen und Schließen beim Klick auf den Menüpunkt klappt schon. Aber im Moment bleibt das Menü für immer offen, wenn man irgendwo anders auf die Seite klickt. Wie kann ich erkennen, dass der Nutzer irgendwohin geklickt hat, was nicht das Menü ist, und das Dropdown dann automatisch wieder schließen?“
• „Mein CSS-Layout ist kaputt. Ich habe eine Navigationsleiste, die sich über den Header schiebt. Ganz rechts in der Leiste sitzt ein Bild von einer Sonne. Weil die Sonne da rechts drin ist, verschiebt sich mein eigentliches Menü total nach links und ist nicht mehr in der Mitte des Bildschirms. Ich möchte aber, dass die Links perfekt zentriert bleiben und die Sonne einfach rechts daneben 'schwebt'. Wie geht das?“
• „Wie mache ich ein Pop-up-Fenster für die Spielweltseiten, die noch nicht programmiert sind?“
• „Das ist mein Code, hast du noch Ideen für eine bessere Barrierefreiheit?“
• „Wie kann ich bubbles aufsteigen lassen, wenn ich auf ein Image klicke?“

Index, Anleitung und Spielerklärung:

• „Wie baue ich mein Logo und Icon mittig zentriert in meine Infokästen ein?“
• „Ich brauche einen großen 'Spiel starten'-Button für Kinder.“
• „Wie kann ich mein Sonnen-Icon schweben lassen und bei Anklicken aufleuchten lassen?“
• „Das ist mein Code, hast du noch Ideen, wie ich meine Website für Kinder ansprechender gestalten kann?“

Suchbild:

• 12. Mai 11:58 Uhr: „Das ist mein aktueller Code. Das Logo liegt hinter der Overlay-Ebene. Wie kann ich das ändern?“
• 16. Mai 20:08 Uhr: „Die Objekte sind nach dem Anklicken über der Overlay-Ebene zu sehen. Woran liegt das?“
• 26. Mai 11:16 Uhr: „Der Oktopus und der Fisch schwimmen nach dem Beenden einer Runde in die falsche Richtung. Ändere den Code so, dass sie sich wie die anderen Objekte umdrehen. Ändere sonst nichts am Code.“
• 28. Mai 12:49 Uhr: „Wenn der Lichtschalter an ist, soll man trotzdem noch den Cursor sehen. Ändere sonst nichts am Code.“
• 29. Mai 12:49 Uhr: „Kannst du den beweglichen Kreis im Overlay als Lichtkegel darstellen? Mache den Lichtstrahl etwas schwächer als den Lichtkreis am Ende. Gib mir den gesamten Code.“
• „Füge unten rechts in die Seite über dem Overlay einen Lichtschalter ein. Dieser soll durch anklicken die Overlayseite ausblenden und den Hintergrund mit den Objekten für 3 Sekunden sichtbar machen. Der Lichtschalter soll erst auftauchen, wenn 30 Sek. lang kein Objekt mehr gefunden wurde.“

Infoseite:

• „Wie kann ich im CSS einstellen, dass alle Bilder genau gleich groß sind, ohne dass sie verzerrt werden? Und wie schaffe ich es, dass sie sich leicht vergrößern, wenn man mit der Maus drüberfährt?“
• „Wie lege ich fest, dass in meiner Textbox links der Text steht und rechts ein Bild eingefügt werden kann?“