diff --git a/web/13/labor/13_aufgaben.md b/web/13/labor/13_aufgaben.md new file mode 100644 index 0000000..41742c8 --- /dev/null +++ b/web/13/labor/13_aufgaben.md @@ -0,0 +1,66 @@ +# Übungsblatt 13 + +*Für das gesamte Übungsblatt ist keine Abgabe erforderlich.* + +## 1. Übung zu Responsive Design: Media Queries + +**Frage:** Welche *Media Query* trifft auf welches Gerät zu? + +a. Smartphone: 320 x 480px + +![Smartphone](img/Smartphone_h.png) + +b. Smartphone quer gehalten: 960 x 640px + +![Smartphone quer](img/Smartphone_q.png) + +c. PC-Bildschirm: 1600 x 900px mit Browserfenster: 800 x 500px + +![PC mit Bildschirm](img/PC.png) + +d. Tablet quer gehalten: 2048 x 1539px + +![Tablet](img/Tablet.jpg) + +1. +```css +@media screen +``` + +2. +```css +@media screen and (max-width: 800px) +``` + +3. +```css +@media screen and (orientation: portrait) +``` + +4. +```css +@media screen and (min-device-width: 900px) +``` + +5. +```css +@media screen and (min-width: 900px) +``` + +6. +```css +@media print and (min-width: 30cm) +``` + +7. +```css +@media screen and (max-device-height: 1400px) +``` + +## 2. Übung zu Barrierefreiheit + + +**Aufgabenstellung**: Gegen welche WCAG-Erfolgskriterien verstößt folgendes Web-Kontaktformular? + +![Kontaktformular](img/Kontaktformular.png) + diff --git a/web/13/labor/demos/01_Lieblingsbuecher.html b/web/13/labor/demos/01_Lieblingsbuecher.html new file mode 100644 index 0000000..e49a711 --- /dev/null +++ b/web/13/labor/demos/01_Lieblingsbuecher.html @@ -0,0 +1,67 @@ + + + + + + + Meine Lieblingsbücher + + + + +
+ Buecher +
+ + + +
+

Lieblingsbücher

+ +
+ Die + Einladung +
+
+ Sebastian Fitzek +
+ ca. 400 +
+
+ Monster +

+ Nele Neuhaus +
+ ca. 560 +
+
+ Eine Frage + der Chemie

+ Bonnie Garmus +
+ ca. 464 +
+ +
+ Die Waffen + des Lichts

+ Ken Follett
+ ca. 880 +
+
+ + + + \ No newline at end of file diff --git a/web/13/labor/demos/01_styles_Lieblingsbuecher.css b/web/13/labor/demos/01_styles_Lieblingsbuecher.css new file mode 100644 index 0000000..cc9ec5c --- /dev/null +++ b/web/13/labor/demos/01_styles_Lieblingsbuecher.css @@ -0,0 +1,89 @@ +body { + margin: 0; + padding: 0; +} + +#logo-container { + background-color: cadetblue; + width: 10%; + height: 10%; + position: absolute; + top: 0%; + left: 0%; + + display: flex; + align-items: center; + justify-content: center; +} + +#logo-container img { + display: block; + height: 100%; + margin: auto; +} + +#navbar-container { + background-color: rgb(155, 207, 209); + width: 90%; + height: 10%; + position: absolute; + top: 0%; + left: 10%; +} + +#navbar-container a, +#navbar-container a:visited { + float: left; + width: 20%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + + text-decoration: none; + color: rgb(4, 60, 116); +} + +#navbar-container a:hover { + background-color: rgb(225, 236, 236); +} + +.content-container { + background-color: rgb(229, 228, 222); + width: 100%; + height: 90%; + position: absolute; + top: 10%; + left: 0%; + text-align: center; +} + +.buch-element { + float: left; + background-color: rgb(210, 194, 168); + height: 150px; + width: 18%; + padding: 1.5em 0; + margin: 10px 1% 10px 1%; +} + +@media screen and (max-width: 700px) { + + #logo-container img { + max-width: 100%; + height: auto; + } + + #navbar-container a, + #navbar-container a:visited { + font-size: 0.7em; + } + + .buch-element { + float: none; + width: 98%; + position: static; + font-size: 0.9em; + } +} \ No newline at end of file diff --git a/web/13/labor/demos/02_ellipsis.html b/web/13/labor/demos/02_ellipsis.html new file mode 100644 index 0000000..dc84063 --- /dev/null +++ b/web/13/labor/demos/02_ellipsis.html @@ -0,0 +1,16 @@ + + + + + + + Beispielseite + + + +
+ Dies ist ein sehr langer Text, der abgeschnitten wird. +
+ + + \ No newline at end of file diff --git a/web/13/labor/demos/02_styles_ellipsis.css b/web/13/labor/demos/02_styles_ellipsis.css new file mode 100644 index 0000000..a7c6821 --- /dev/null +++ b/web/13/labor/demos/02_styles_ellipsis.css @@ -0,0 +1,7 @@ +.ellipsis { + width: 160px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border: 1px solid #999; +} \ No newline at end of file diff --git a/web/13/labor/demos/03_namedtags_screenreader.html b/web/13/labor/demos/03_namedtags_screenreader.html new file mode 100644 index 0000000..e73038c --- /dev/null +++ b/web/13/labor/demos/03_namedtags_screenreader.html @@ -0,0 +1,46 @@ + + + + + + Named Tags: Beispielseite + + +
+ +
+ +
+

Willkommen auf unserer barrierefreien Seite mit Named Tags

+
+

Unsere Angebote

+

Hier findest du eine Übersicht unserer Dienstleistungen.

+
+
+

Kontakt

+
+ + + + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/web/13/labor/demos/04_aria.html b/web/13/labor/demos/04_aria.html new file mode 100644 index 0000000..c2275da --- /dev/null +++ b/web/13/labor/demos/04_aria.html @@ -0,0 +1,24 @@ + + + + + + + Beispielseite + + + + + +
+ Ohne ARIA absenden +
+ + +
+ Mit ARIA absenden +
+ + + + \ No newline at end of file diff --git a/web/13/labor/demos/04_styles_aria.css b/web/13/labor/demos/04_styles_aria.css new file mode 100644 index 0000000..8066f47 --- /dev/null +++ b/web/13/labor/demos/04_styles_aria.css @@ -0,0 +1,21 @@ +.custom-button { + float: left; + background-color: #0078D4; + color: white; + padding: 0.6em 1.2em; + font-size: 1rem; + border-radius: 6px; + cursor: pointer; + margin: 0px 5px; +} + +.custom-button:hover, +.custom-button:focus { + background-color: #005A9E; + outline: 2px solid #005A9E; + outline-offset: 2px; +} + +.custom-button:active { + background-color: #004578; +} \ No newline at end of file diff --git a/web/13/labor/demos/05_styles_voiceover.css b/web/13/labor/demos/05_styles_voiceover.css new file mode 100644 index 0000000..d4585e0 --- /dev/null +++ b/web/13/labor/demos/05_styles_voiceover.css @@ -0,0 +1,31 @@ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + padding: 2rem; +} + +header, +nav, +main, +footer { + margin-bottom: 2rem; +} + +nav a { + margin-right: 1rem; + text-decoration: underline; + color: #0055aa; +} + +button { + padding: 0.5rem 1rem; + font-size: 1rem; + background-color: #0055aa; + color: white; + border: none; + border-radius: 4px; +} + +button:focus { + outline: 3px solid #ffaa00; +} \ No newline at end of file diff --git a/web/13/labor/demos/05_voiceover.html b/web/13/labor/demos/05_voiceover.html new file mode 100644 index 0000000..38ec8ea --- /dev/null +++ b/web/13/labor/demos/05_voiceover.html @@ -0,0 +1,69 @@ + + + + + + + + Screen Reader Demo + + + +
+

Willkommen zur Screen Reader-Demo

+

Diese Seite zeigt, wie barrierefreies Webdesign mit Screenreader funktioniert.

+
+ + + +
+
+

Demo starten

+

Drücken Sie den folgenden Button, um eine Beispielaktion auszuführen:

+ +
+ +
+

Tipps zur Bedienung

+ +
+ +
+

Beispielbild mit barrierefreiem Alternativtext

+
+ Eine schlafende schwarze Katze auf einem gemütlichen Bett. Dieses Bild soll positive Gefühle während einer anstrengenden Lehrveranstaltung auslösen. + +
+
+ + +
+

Kontakt

+

Bei Fragen zur Barrierefreiheit erreichen Sie mich unter:

+
+ t.steger@hs-mannheim.de +
+
+
+ + + + + \ No newline at end of file diff --git a/web/13/labor/demos/img/buecher.png b/web/13/labor/demos/img/buecher.png new file mode 100644 index 0000000..a8340d2 Binary files /dev/null and b/web/13/labor/demos/img/buecher.png differ diff --git a/web/13/labor/demos/img/katze.jpg b/web/13/labor/demos/img/katze.jpg new file mode 100644 index 0000000..cbf3088 Binary files /dev/null and b/web/13/labor/demos/img/katze.jpg differ diff --git a/web/13/labor/img/Kontaktformular.png b/web/13/labor/img/Kontaktformular.png new file mode 100644 index 0000000..883692d Binary files /dev/null and b/web/13/labor/img/Kontaktformular.png differ diff --git a/web/13/labor/img/PC.png b/web/13/labor/img/PC.png new file mode 100644 index 0000000..80253cd Binary files /dev/null and b/web/13/labor/img/PC.png differ diff --git a/web/13/labor/img/Smartphone_h.png b/web/13/labor/img/Smartphone_h.png new file mode 100644 index 0000000..aefc87a Binary files /dev/null and b/web/13/labor/img/Smartphone_h.png differ diff --git a/web/13/labor/img/Smartphone_q.png b/web/13/labor/img/Smartphone_q.png new file mode 100644 index 0000000..67caef7 Binary files /dev/null and b/web/13/labor/img/Smartphone_q.png differ diff --git a/web/13/labor/img/Tablet.jpg b/web/13/labor/img/Tablet.jpg new file mode 100644 index 0000000..3f2447d Binary files /dev/null and b/web/13/labor/img/Tablet.jpg differ