Lernziele
Wir greifen auf eine grosse Datenbank zu und erstellen damit eine Web-App fürs Handy basierend auf HTML und CSS.
Projektschritte
- Gruppen bilden (zu zweit oder alleine)
- Projektantrag schreiben und einreichen
- Arbeit an Projekt, Führen des Arbeitsjournals
- Schreiben des Projektberichts
- Abgabe Projektbericht und Webseite
- Kurzes Vorstellen der Webseite
Anforderungsspezifikation Auftraggeber
Der Auftraggeber wünscht eine WebApp für TV-Serien und/oder Filme mit mindestens den folgenden 5 Seiten:
- Startseite
- eigenes Logo
- Anzeige «Empfehlung Film/Serie»
- Suchformular, um nach Inhalten zu suchen
- Suchtreffer-Seite
- Treffer-Liste anzeigen
- pro Treffer Link zur Detailseite
- Detailseite «Film/Serie»
- Informationen zum Film/zur Serie anzeigen:
- Beschreibung, Schauspieler, ev. weiteres wie Staffeln (bei Serien), usw…
- Detailseite «Person»
- Infos zu dieser Person
- Liste von Filmen/Serien
- Über die App
- Wer hat die App programmiert? Team vorstellen.
- Hinweis auf omdb (wegen Copyright)
Das Ganze soll einheitlich und schön gestaltet sein und auf dem Smartphone gut funktionieren.
Technische Anforderungen
Wir realisieren dieses Projekt mit Python, dem Web-Framework «Bottle» und SQL-Zugriff auf die Datenbank «omdb».
Fachspezifikation
In den Fachspezifikationen beschreibt der Auftragnehmer (die Gruppe) konkret wie die Anforderungen des Auftraggebers umgesetzt werden sollen. Erst wenn der Auftraggeber die Fachspezifikationen akzeptiert, sollte die eigentliche Umsetzungsarbeit beim Auftragnehmer beginnen.
Vorschlag (kann und soll geändert/ergänzt werden)
- HTML-Suchformular auf der Startseite mit Python auswerten und Resultate auf der Suchtreffer-Seite anzeigen.
- Durch den Primärschlüssel können die Detailseiten verlinkt werden. Diese zeigen weitere Informationen an.
- Eigenes Design für die Seiten mit CSS gestalten. Stylesheet in externer CSS-Datei. Passend zum eigenen Logo.
- «Empfehlungs-Seite»: auf Startseite eine «featured TV-Serie» bewerben
- (eigene Ideen: Navigation? immer zurück-Knopf, oder immer Link zur Startseite?)
- (eigene Ideen: Bilder einfügen? Schauspieler, Poster?)
- (eigene Ideen: …)
- …
Wireframes/Mockups
Wireframes von Webseiten sind skizzenhafte Layout-Anordnungen der einzelnen Seite. Es soll grob gesagt werden, wo welche Elemente auftauchen. Die etwas detaillierteren Mockups führen das Layout dann genauer aus und fügen ein Design dazu.
Wireframes/Mockups können entweder auf Papier von Hand erstellt und eingescannt/fotografiert werden. Dazu existieren Vorlagen für bestimmte Formate. Man kann dies natürlich auch mit einem Zeichenprogramm, oder mit Powerpoint oder mit spezialisierten Apps/Webseiten erstellen!
- https://wireframe.cc (online wireframe-tool)
- https://www.sketchize.com (vorlagen als PDF)
- …
Projektantrag
Der zu Beginn einzureichende Projektantrag umfasst die folgenden Punkte:
- Erweiterte Fachspezifikation (siehe Vorschlag oben, anpassen und erweitern)
- Titel der Webseite/des Projektes
- alle Gruppenmitglieder aufführen
- Arbeitsplan (Teilaufgaben, Tests, Zwischenziele, …)
- Wireframes/Mockups der Webseiten (Start-, Suchtreffer- und Detailseite sowie deren Abhängigkeiten)
Der Projektantrag ist als PDF per E-Mail an den Auftraggeber (die LK) einzureichen.
Arbeitsjournal
Wird mit der LK geteilt, beinhaltet Antwort auf die folgenden Fragen (Ende jedes Arbeitsblock):
- Was haben wir heute erreicht?
- Wo sind wir auf Probleme gestossen?
- Wo stehen wir in unserem Zeitplan und was sind unsere nächsten Schritte?
Abgabe
Die Abgabe setzt sich aus dem Projektbericht und der Webseite zusammen:
- Projektbericht (als PDF per E-Mail an Auftraggeber/LK):
- Zusammenstellung der vervollständigten Anforderungs- und Fachspezifikation.
- Bericht über erreichtes Resultat und offen gebliebene Punkte.
- Bericht über die Arbeitsresultate der einzelnen Gruppenmitglieder
(«wie habt Ihr Euch organisiert?») - Dokumentation der Webseiten-Struktur
- funktionierende Website (Ordner mit allen Dateien als ZIP-Datei per E-Mail oder gesamter Ordner geteilt über OneDrive)
Bewertung
Das Projekt wird bewertet. Die Note setzt sich wie folgt zusammen:
| Gebiet | Anteil Gesamtnote |
|---|---|
| Arbeitsweise (Projektantrag, Arbeitsjournal, Termineinhaltung) | 20% |
| Webseite (Vollständigkeit, Navigation, Design, Code, Originalität) | 60% |
| Projektbericht (Vollständigkeit, erreichte Resultate, Bericht der Arbeitsresultate, Dokumentation der Webseite) | 20% |
Alexandruionascu via Wikimedia Commons, CC BY-SA 4.0 ↩︎