Mit der Projektarbeit an Fotogram haben wir im Kurs zum ersten Mal Berührungspunkte mit JavaScript.
Folgend erläutert die User-Story, welcheAnforderung das Projekt hat.
Als Besucher der Seite möchte ich die Fotogalerie in kleiner Vorschau sehen, damit ich mir einen schnellen Überblick über die Bilder verschaffen kann.
- Alle Fotos werden dynamisch über JavaScript gerendert und in einem kleinen Format (Thumbnail) auf der Seite angezeigt.
- Fotos haben einen hover Effekt.
Als Besucher möchte ich ein Foto durch Anklicken in großer Ansicht öffnen können, damit ich Details besser erkennen kann.
- Nutze den vorhandenen Platz, so dass Bilder in Detailansicht deutlich größer als in der Thumbnail-Ansicht sind.
Als Besucher möchte ich in der Großansicht nach links und rechts klicken können, um zum vorherigen oder nächsten Bild zu gelangen, damit ich die Galerie bequem durchblättern kann.
- Die Großansicht lässt sich entweder mit einem Button oder einem Klick auf den Hintergrund schließen.
- Buttons sind an einer festen Stelle fixiert in der großen Ansicht.
- Die Dialogansicht, einschließlich der "Vorwärts"-, "Rückwärts"- und "Schließen"-Funktionen, muss komplett mit der Tastatur bedienbar sein (z.B. mit den Pfeiltasten und der Esc-Taste).
Als Besucher möchte ich, dass die Seite ein flüssiges Erlebnis bietet und die Fotos schnell laden.
- Die Bilder sind komprimiert (max. 500kb je Bild)