Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| de:modul:m291:learningunits:lu17:aufgaben:a_webawards [2026/07/05 21:52] – gkoch | de: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? | + | {{:de:modul:m291: |
| - | //[Platzhalter: | + | // |
| **[[https:// | **[[https:// | ||
| Zeile 30: | Zeile 30: | ||
| 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 | + | <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. | ||
| </ | </ | ||
| - | |||
| - | ---- | ||
| ==== 🇨🇭 Best of Swiss Web ==== | ==== 🇨🇭 Best of Swiss Web ==== | ||
| + | {{: | ||
| + | // | ||
| - | {{ : | + | **[[https:// |
| - | // | + | |
| - | + | ||
| - | **[[https:// | + | |
| 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? | + | {{:de:modul:m291: |
| - | //[Platzhalter: | + | // |
| - | **[[https:// | + | **[[https:// |
| 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 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, | ||
| - | ---- | ||
| ==== 📰 Grimme Online Award ==== | ==== 📰 Grimme Online Award ==== | ||
| - | {{ :m291:lu17:grimme_online_award.png? | + | {{:de:modul:m291: |
| - | //[Platzhalter: | + | // |
| - | **[[https:// | + | **[[https:// |
| Deutschsprachiger Award mit Fokus auf journalistischen und gesellschaftlichen Mehrwert. Prämiert werden Projekte, die das Netz sinnvoll bereichern: interaktive Dokumentationen, | Deutschsprachiger Award mit Fokus auf journalistischen und gesellschaftlichen Mehrwert. Prämiert werden Projekte, die das Netz sinnvoll bereichern: interaktive Dokumentationen, | ||
| - | <WRAP center round important | + | <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. | ||
| </ | </ | ||
| - | ---- | ||
| ==== 🧪 FWA – Favourite Website Awards ==== | ==== 🧪 FWA – Favourite Website Awards ==== | ||
| - | {{ :m291:lu17:fwa.png? | + | {{:de:modul:m291: |
| - | //[Platzhalter: | + | // |
| - | **[[https:// | + | **[[https:// |
| Einer der ältesten Web-Awards (seit 2000). Fokus auf experimentelle, | Einer der ältesten Web-Awards (seit 2000). Fokus auf experimentelle, | ||
| Zeile 94: | Zeile 87: | ||
| **Maximum: | **Maximum: | ||
| - | ===== 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: | + | ===== Zusatzaufgabe |
| + | Wenn Sie schnell fertig sind oder sich für moderne CSS-Techniken interessieren: | ||
| - | {{ : | + | {{youtube> |
| - | //[Platzhalter: | + | //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:// | + | Link: [[https:// |
| <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: | | **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: | ||
| 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: | | **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: | ||
| | **6** | Mobile Form-Faktoren & Gesten | Swipe-Gesten mit reinem CSS umsetzen, um native App-Interaktionen im Web nachzuahmen. | 43: | | **6** | Mobile Form-Faktoren & Gesten | Swipe-Gesten mit reinem CSS umsetzen, um native App-Interaktionen im Web nachzuahmen. | 43: | ||
| + | </ | ||