de:modul:m291:learningunits:lu17:aufgaben:a_webawards

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu17:aufgaben:a_webawards [2026/07/05 21:49] – angelegt gkochde:modul:m291:learningunits:lu17:aufgaben:a_webawards [2026/07/05 22:15] (aktuell) – gkoch
Zeile 23: Zeile 23:
 ==== 🌐 Webby Awards ==== ==== 🌐 Webby Awards ====
  
-{{ :m291:lu17:webby_awards.png?direct&280 |Webby Awards – Logo und Website}}\\ +{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_21.53.02.png?direct&600| Webby Awards – Logo und Website}}\\ 
-//[Platzhalter: Screenshot webbyawards.com – Startseite oder Kategorie-Übersicht]//+//Screenshot webbyawards.com – Kategorie-Übersicht Websites and Mobile Sites//
  
-**[[https://webbyawards.com|webbyawards.com]]** → Categories → Websites & 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. 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 important 80%>+<WRAP center round info 80%>
 Für diese Aufgabe: **nur Websites und Apps** anschauen – keine Podcasts oder Social-Media-Kampagnen. Für diese Aufgabe: **nur Websites und Apps** anschauen – keine Podcasts oder Social-Media-Kampagnen.
 </WRAP> </WRAP>
- 
----- 
  
 ==== 🇨🇭 Best of Swiss Web ==== ==== 🇨🇭 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//
  
-{{ :m291:lu17:best_of_swiss_web.png?direct&280 |Best of Swiss Web – Logo und Website}}\\ +**[[https://www.bestofswissweb.swiss|bestofswissweb.swiss]]** → Hall of Fame
-//[Platzhalter: Screenshot bestofswissweb.swiss – Hall of Fame oder Gewinner-Übersicht]// +
- +
-**[[https://www.bestofswissweb.swiss|bestofswissweb.swiss]]** → Hall of Fame oder Gewinner+
  
 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. 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 ==== ==== 🏆 Awwwards ====
  
-{{ :m291:lu17:awwwards.png?direct&280 |Awwwards – Logo und Website}}\\ +{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_22.01.22.png?direct&600| Awwwards – Logo und Website}}\\ 
-//[Platzhalter: Screenshot awwwards.com – Winners-Übersicht mit mehreren Projekten]//+//Screenshot awwwards.com – Winners-Übersicht mit mehreren Projekten//
  
-**[[https://www.awwwards.com|awwwards.com]]** → Winners+**[[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. 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 ==== ==== 📰 Grimme Online Award ====
  
-{{ :m291:lu17:grimme_online_award.png?direct&280 |Grimme Online Award – Logo und Website}}\\ +{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_22.04.25.png?direct&600| Grimme Online Award – Logo und Website}}\\ 
-//[Platzhalter: Screenshot grimme-online-award.de – Preisträger-Archiv]//+//Screenshot grimme-online-award.de – Preisträger-Archiv//
  
-**[[https://www.grimme-online-award.de|grimme-online-award.de]]** → Preisträger+**[[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. 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 important 80%>+<WRAP center round info 80%>
 Für diese Aufgabe: **nur Websites und Apps** anschauen – keine Podcasts oder Social-Media-Kampagnen. Für diese Aufgabe: **nur Websites und Apps** anschauen – keine Podcasts oder Social-Media-Kampagnen.
 </WRAP> </WRAP>
  
----- 
  
 ==== 🧪 FWA – Favourite Website Awards ==== ==== 🧪 FWA – Favourite Website Awards ====
  
-{{ :m291:lu17:fwa.png?direct&280 |FWA – Favourite Website Awards Logo}}\\ +{{:de:modul:m291:learningunits:lu17:aufgaben:screenshot_2026-07-05_at_22.07.22.png?direct&600| FWA – Favourite Website Awards Logo}}\\ 
-//[Platzhalter: Screenshot thefwa.com – aktuelle Winners-Übersicht]//+//Screenshot thefwa.com – aktuelle Winners-Übersicht//
  
-**[[https://thefwa.com|thefwa.com]]** → Winners+**[[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. 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.
Zeile 94: Zeile 87:
 **Maximum:** 20 Punkte pro Projekt (4 × 5 Sterne) **Maximum:** 20 Punkte pro Projekt (4 × 5 Sterne)
  
-===== Schritt-für-Schritt =====+===== Vorgehen =====
  
 **1. Projekte entdecken (10 Min.)**\\ **1. Projekte entdecken (10 Min.)**\\
Zeile 127: Zeile 120:
 | **Technische Qualität** | 1–5 | | **Technische Qualität** | 1–5 |
  
-===== Zusatzaufgabe: Video für Fortgeschrittene =====+===== Zusatzaufgabe / Alternative: Video für Fortgeschrittene ===== 
 +Wenn Sie schnell fertig sind oder sich für moderne CSS-Techniken interessieren:
  
-{{ :m291:lu17:una_kravets_css_day.png?direct&400 |Una Kravets – Modern UI Patterns, CSS Day 2026}}\\ +{{youtube>8FSLsVAJj2w?}}\\ 
-//[Platzhalter: Thumbnail des YouTube-Videos «Modern UI Patterns – Una Kravets – CSS Day 2026»]//+//YouTube-Video «Modern UI Patterns – Una Kravets – CSS Day 2026»//
  
-Wenn Sie schnell fertig sind oder sich für moderne CSS-Techniken interessieren:+Dauer: 53:40 (nur Teile davon schauen – s. unten)
  
-**[[https://www.youtube.com/watch?v=8FSLsVAJj2w|Modern UI Patterns – Una Kravets – CSS Day 2026]]** | Dauer: 53:40+Link: [[https://www.youtube.com/watch?v=8FSLsVAJj2w|Modern UI Patterns – Una Kravets – CSS Day 2026]]
  
 <WRAP center round info 80%> <WRAP center round info 80%>
Zeile 142: Zeile 136:
 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. 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 ^ ^ 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 | | **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 |
Zeile 148: Zeile 143:
 | **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 | | **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 | | **6** | Mobile Form-Faktoren & Gesten | Swipe-Gesten mit reinem CSS umsetzen, um native App-Interaktionen im Web nachzuahmen. | 43:40–49:03 |
 +</WRAP>
  • de/modul/m291/learningunits/lu17/aufgaben/a_webawards.1783280956.txt.gz
  • Zuletzt geändert: 2026/07/05 21:49
  • von gkoch