====== Auftrag LU17 – Ausblick: Das Web von heute ======

**Zeit:** 30 Minuten | **Abgabe:** Moodle → LU17 Sammlung Ausblick (2 Projekte pro Person)

===== Ausgangslage =====

Sie haben in diesem Jahr gelernt, wie moderne Weboberflächen funktionieren – von HTML und CSS über Vue.js bis zu Testing und Deploy. In dieser Aufgabe verlassen Sie die Rolle der Entwicklerin / des Entwicklers und schlüpfen in die Rolle eines **Jury-Mitglieds bei einem Web-Award**.

Sie beurteilen echte, preisgekrönte Webprojekte – und erkennen dabei, was heute im Web alles möglich ist.

===== Auftrag =====

Wählen Sie von den Award-Plattformen **zwei Projekte** aus. Beurteilen Sie beide nach den vier Kriterien und laden Sie Ihre Einträge in Moodle hoch.

<WRAP center round info 80%>
Am Ende der Lektion werden zwei oder mehr Personen zufällig ausgewählt (je nach Zeit). Sie öffnen eines ihrer Projekte live im Browser, präsentieren es der Klasse in 5 Minuten und erklären ihre Bewertung.
</WRAP>

===== Award-Plattformen =====

Wählen Sie Projekte aus **einer oder mehreren** dieser Plattformen:

==== 🌐 Webby Awards ====

{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_21.53.02.png?direct&600| Webby Awards – Logo und Website}}\\
//Screenshot webbyawards.com – Kategorie-Übersicht Websites and Mobile Sites//

**[[https://webbyawards.com|webbyawards.com]]** → Winners → Websites & Mobile Sites

Der «Oscar des Internets» – seit 1996 der bekannteste Web-Award weltweit. Prämiert werden Websites, Apps, Video, Podcast und Social Media in über 100 Kategorien.

<WRAP center round info 80%>
Für diese Aufgabe: **nur Websites und Apps** anschauen – keine Podcasts oder Social-Media-Kampagnen.
</WRAP>

==== 🇨🇭 Best of Swiss Web ====
{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_21.56.29.png?direct&600| Best of Swiss Web – Logo und Website}}\\
//Screenshot bestofswissweb.swiss – Hall of Fame//

**[[https://www.bestofswissweb.swiss|bestofswissweb.swiss]]** → Hall of Fame

Der wichtigste Schweizer Digital-Award. Prämiert werden Schweizer Unternehmen und Agenturen für herausragende digitale Projekte. Besonders relevant: Hier sehen Sie, was Schweizer Agenturen und Firmen umsetzen – ein direkter Blick in Ihren zukünftigen Arbeitsmarkt.

==== 🏆 Awwwards ====

{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_22.01.22.png?direct&600| Awwwards – Logo und Website}}\\
//Screenshot awwwards.com – Winners-Übersicht mit mehreren Projekten//

**[[https://www.awwwards.com|awwwards.com]]** → View Winners

Die wichtigste internationale Plattform der Webdesign-Community. Täglich werden neue Projekte von einer Fachjury bewertet. Hier sehen Sie die technische und gestalterische Avantgarde des Webs – viele Gewinner verwenden genau die CSS- und JavaScript-Techniken, die wir in M291 angeschaut haben.


==== 📰 Grimme Online Award ====

{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_22.04.25.png?direct&600| Grimme Online Award – Logo und Website}}\\
//Screenshot grimme-online-award.de – Preisträger-Archiv//

**[[https://www.grimme-online-award.de|grimme-online-award.de]]** → Archiv → Jahr auswählen → (Zur Gesamtansicht aller Preisträger auf einer Seite)

Deutschsprachiger Award mit Fokus auf journalistischen und gesellschaftlichen Mehrwert. Prämiert werden Projekte, die das Netz sinnvoll bereichern: interaktive Dokumentationen, Datenjournalismus, digitale Bildungsangebote. Weniger Design-fokussiert, dafür inhaltlich stark.

<WRAP center round info 80%>
Für diese Aufgabe: **nur Websites und Apps** anschauen – keine Podcasts oder Social-Media-Kampagnen.
</WRAP>


==== 🧪 FWA – Favourite Website Awards ====

{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_22.07.22.png?direct&600| FWA – Favourite Website Awards Logo}}\\
//Screenshot thefwa.com – aktuelle Winners-Übersicht//

**[[https://thefwa.com|thefwa.com]]**

Einer der ältesten Web-Awards (seit 2000). Fokus auf experimentelle, technisch mutige und künstlerische Webprojekte. Gut für alle, die sich für kreative Experimente im Web interessieren.

===== Bewertungskriterien =====

Beurteilen Sie jedes Projekt nach diesen vier Kriterien. Vergeben Sie jeweils **1–5 Sterne**.

^ Kriterium ^ Was wird bewertet ^
| **Design, Animation & Interaktion** | Farben, Typografie, Layout, visueller Gesamteindruck; Bewegung, Übergänge und wie die Seite auf Eingaben reagiert |
| **Inhalt & Aufbereitung** | Qualität und Relevanz des Inhalts (Text, Fotos, Videos); gibt es eine klare Geschichte oder einen roten Faden? Werden Inhalte kreativ vermittelt – z.B. durch Scrollytelling, interaktive Elemente oder Games? |
| **User Experience** | Intuition, Klarheit, Führung durch den Inhalt; findet man sich zurecht ohne nachzudenken? |
| **Technische Qualität** | Ladezeit und Performance; funktioniert die Seite auf dem Smartphone? |

**Maximum:** 20 Punkte pro Projekt (4 × 5 Sterne)

===== Vorgehen =====

**1. Projekte entdecken (10 Min.)**\\
Öffnen Sie eine oder mehrere der Plattformen. Stöbern Sie in den Gewinnern und Nominierten. Klicken Sie sich durch – lassen Sie sich überraschen.

**2. Zwei Projekte auswählen (5 Min.)**\\
Wählen Sie zwei Projekte, die Sie interessant, beeindruckend oder auch fragwürdig finden. Es müssen keine perfekten Projekte sein – wichtig ist, dass Sie etwas dazu sagen können.

**3. Beurteilen & direkt in Moodle eintragen (15 Min.)**\\
Öffnen Sie das Projekt und füllen Sie den Moodle-Eintrag (LU17 – Sammlung Ausblick) parallel dazu aus. Erstellen Sie zuerst einen **Screenshot** der Website:

<WRAP center round box 80%>
  * **Windows:** %%Win + Shift + S%% → Bereich auswählen → in Moodle einfügen
  * **Mac:** %%Cmd + Shift + 4%% → Bereich auswählen → Datei vom Desktop hochladen
</WRAP>

Nach Ihrem Eintrag können Sie die Projekte Ihrer Klasse sehen und sich inspirieren lassen.

===== Moodle-Felder =====

Füllen Sie für jedes Projekt alle Pflichtfelder aus:

^ Feld ^ Was eingeben ^
| **Screenshot** | Screenshot der Website (Vollseite oder aussagekräftiger Ausschnitt) |
| **Plattform** | Von welchem Award stammt das Projekt? (Webby / Best of Swiss Web / Awwwards / Grimme / FWA / Andere) |
| **Titel** | Name der Website / App |
| **Link** | URL der Website |
| **Beschreibung** | Was macht dieses Projekt besonders? Was hat Sie überrascht oder beeindruckt? Warum verdient es einen Award – oder warum nicht? //(3–5 Sätze)// |
| **Design, Animation & Interaktion** | 1–5 |
| **Inhalt & Aufbereitung** | 1–5 |
| **User Experience** | 1–5 |
| **Technische Qualität** | 1–5 |

===== Zusatzaufgabe / Alternative: Video für Fortgeschrittene =====
Wenn Sie schnell fertig sind oder sich für moderne CSS-Techniken interessieren:

{{youtube>8FSLsVAJj2w?}}\\
//YouTube-Video «Modern UI Patterns – Una Kravets – CSS Day 2026»//

Dauer: 53:40 (nur Teile davon schauen – s. unten)

Link: [[https://www.youtube.com/watch?v=8FSLsVAJj2w|Modern UI Patterns – Una Kravets – CSS Day 2026]]

<WRAP center round info 80%>
Dieses Video richtet sich an Fortgeschrittene und ist auf Englisch. Es werden CSS-Techniken gezeigt, die wir im Unterricht noch nicht behandelt haben – das ist gewollt. Es geht nicht darum, jeden Code zu verstehen, sondern darum zu sehen, **was mit modernem CSS bereits möglich ist**, und Inspiration für zukünftige Projekte zu sammeln.
</WRAP>

Wählen Sie **zwei Themenblöcke** aus der Tabelle. Schauen Sie sich die entsprechenden Abschnitte an (in 1.5× Geschwindigkeit) und suchen Sie im Web je ein Beispiel, das diese CSS-Technik einsetzt. Tragen Sie die Beispiele ebenfalls in Moodle ein.

<WRAP center round box 80%>
^ Block ^ Thema ^ Inhalt & Relevanz ^ Minute ^
| **2** | User Preferences & Modernes Theming | Fortgeschrittene Techniken für Dark Mode, Kontraste und Schriftstärken. Wie sich Corporate Design automatisch an Nutzerbedürfnisse anpasst. | 04:27–11:17 |
| **3** | Noise Reduction & Scroll-Interaktionen | Platz sparen auf dem Bildschirm: Wie Header elegant ausgeblendet werden und UI-Elemente beim Scrollen minimiert werden, um den Fokus auf den Inhalt zu legen («Hidey Bars»). | 11:18–18:00 |
| **4** | Layered UI & Intelligente Popover | Moderne Tooltips und Menüs mit der Popover-API und Anchor Positioning – damit Overlays in Web-Apps immer perfekt ausgerichtet sind. | 18:00–30:30 |
| **5** | View Transitions & Mikro-Animationen | Psychologie der Bewegung: Wie kleine Interaktionen die User Experience hochwertiger wirken lassen. Das «Morphing» von Elementen erzeugt ein flüssiges App-Gefühl im Browser. | 30:31–43:39 |
| **6** | Mobile Form-Faktoren & Gesten | Swipe-Gesten mit reinem CSS umsetzen, um native App-Interaktionen im Web nachzuahmen. | 43:40–49:03 |
</WRAP>