====== LU00m - LB2 V2.2 - Inhalt =====

===== LU01 - Verweise und URL-Aufbau =====

^# ^Stufe ^Lernziel ^
^1.1 ^Kennen |Ich kenne die Syntax und seine Bestandteile einer URL. |
^1.2 ^Aufzählen |Ich kann mindestens drei verschiedene Protokolle aufzählen, die in einer URL verwendet werden können. |
^1.3 ^Unterscheiden |Ich kenne den unterschied zwischen einer Referenzierung mit absoluter und relativer Pfadangabe. |
^1.4 ^Anwenden |Ich kann Referenzierungen mit absoluter und relativer Pfadangabe gezielt in HTML-Dokumenten anwenden/einsetzen. |

===== LU03 - Box Modell =====

^# ^Stufe ^Lernziel ^
^3.1 ^Unterscheiden |Ich kenne den Unterschied zwischen dem klassischen und dem neuen Box-Modell.  |
^3.2 ^Erklären      |Ich kann den Vorteil des neuen Box-Modells in eigenen Worten angeben. |
^3.3 ^Erklären      |Ich kann Inhalte (Content) in Boxen syntaktisch (Aufbau) und semantisch (Bedeutung) korrekt mit dem klassischen und dem neuen Box-Modell erstellen und strukturieren. |
^3.4 ^Anwenden      |Ich kann Inhalte (Content) in Boxen in der ausführlichen und in der kurzen Schreibweise lesen, verstehen, strukturieren und gestalten. |
^3.5 ^Erstellen     |Ich kann den Begriff zusammenfallende (vertikale) Aussenabstände (Collapsing Margins) in eigenen Worten erklären. |

===== LU04 - Display =====

^# ^Stufe ^Lernziel ^
^4.1 ^Kennen        |Ich kenne die Standardwerte von der Eigenschaft //display// und kann die Unterschied in eigenen Worten erklären. |
^4.2 ^Kennen        |Ich kenne den Aufbau eines Flexbox Layouts (Container, Items) und deren Eigenschaften. |
^4.3 ^Kennen        |Ich kenne den Aufbau eines Grid Layouts (Container, Zeilen, Spalten, Zellen). |
^4.4 ^Unterscheiden |Ich kann die Standardwerte der Eigenschaft display unterscheiden und den Unterschied in eigenen Worten erklären. |
^4.5 ^Unterscheiden |Ich verstehe den Unterschied zwischen Flexbox und Grid Layout. |
^4.6 ^Erstellen     |Ich kann ein Flexbox Layout syntaktisch und semantisch korrekt erstellen und strukturieren. |
^4.7 ^Erstellen     |Ich kann ein Grid Layout syntaktisch und semantisch korrekt erstellen und strukturieren. |

===== LU05 - Responsive Webdesign (RWD) =====

^# ^Stufe ^Lernziel ^
^5.1 ^Erklären      |Ich kann erklären, was Responsive Webdesign ist und warum es heute für professionelle Webentwicklung unverzichtbar ist (inkl. Google Mobile-First-Indexierung). |
^5.2 ^Unterscheiden |Ich kann die Schlüsselelemente des Responsive Webdesigns (flexibles Grid, flexible Medien, Media Queries) benennen und voneinander unterscheiden. |
^5.3 ^Definieren    |Ich kann den Begriff Viewport definieren und dessen Bedeutung für die Darstellung einer Webseite auf verschiedenen Endgeräten erläutern. |
^5.4 ^Aufzählen     |Ich kann die aktuell gültigen CSS-Medientypen //(all, screen, print, speech)// aufzählen und deren Verwendungszweck beschreiben. |
^5.5 ^Anwenden      |Ich kann das media-Attribut im <link>- oder <style>-Tag korrekt einsetzen, um gerätespezifische Stylesheets (z. B. für Bildschirm und Drucker) einzubinden zu können. |
^5.6 ^Beurteilen    |Ich kann veraltete (deprecated) Medientypen wie //handheld//, //tv// oder //braille// identifizieren und begründen, und begründen warum diese durch moderne CSS3-Media-Queries ersetzt wurden. |
^5.7 ^Kennen        |Ich kenne die drei Varianten, um Media Queries in ein HTML-Dokument einzubinden (//<link>//, //<style>//, //@media)//. |
^5.8 ^Beurteilen    |Ich kann den Begriff //Breakpoint// in eigenen Worten erklären und dessen Funktion im Responsive Webdesign beschreiben. |
^5.9 ^Beurteilen    |Ich kann Media Queries mit Breakpoints und //and//-Verknüpfungen syntaktisch und semantisch korrekt erstellen und in HTML-Dokumente einbinden. |
^5.10 ^Kennen       |Ich kenne die wichtigsten Medienmerkmale (width, height, orientation, resolution etc.) und deren Bedeutung für Media Queries. |
^5.11 ^Unterscheiden |Ich kann den Unterschied zwischen width/height (Viewport) und device-width/device-height (Gerät) in eigenen Worten erklären. |
^5.12 ^Anwenden     |Ich kann Medienmerkmale mit den Präfixen min- und max- sowie dem Attribut orientation gezielt in Media Queries einsetzen. |


===== LU06 - Bootstrap =====

^# ^Stufe ^Lernziel ^
^6.1 ^Kennen        |Ich kenne die zwei Varianten, um Bootstrap in ein HTML-Dokument einzubinden (Download und CDN), und deren jeweilige Vor- und Nachteile. |
^6.2 ^Erklären      |Ich kann erklären, wofür die <link>-Attribute integrity und crossorigin beim Einbinden von Bootstrap verwendet werden.  |
^6.3 ^Anwenden      |Ich kann Bootstrap korrekt in ein bestehendes HTML-Projekt einbinden und die Auswirkungen auf die Darstellung im Webbrowser beurteilen.|
^6.4 ^Kennen        |Ich kenne den Unterschied zwischen .container und .container-fluid sowie das 12-Spalten-Raster von Bootstrap. |
^6.5 ^Unterscheiden |Ich kann erklären, wann ich .container oder .container-fluid einsetze und welchem HTML-Element ich die Container-Klasse sinnvoll zuordne. |
^6.6 ^Erstellen     |Ich kann ein responsives Spaltenlayout mit den Bootstrap-Klassen container, row und col- syntaktisch und semantisch korrekt erstellen. |


===== LU07 - Softwarequalität =====

^# ^Stufe ^Lernziel ^
^ 7.1 ^Kennen | Ich kenne die sechs Qualitätsmerkmale der Norm ISO 9126 (Zuverlässigkeit, Funktionalität, Benutzbarkeit, Effizienz, Änderbarkeit, Übertragbarkeit) und kann sie benennen. |
^ 7.2 ^Kennen | Ich kenne die wichtigsten Fehlerarten (Codier-, Logik-, Entwurfs-, Daten-, Umsetzungs- und Oberflächenfehler) und kann je ein Beispiel dazu nennen. |
^ 7.3 ^Kennen | Ich kenne die Prinzipien guter Testaktivitäten (frühzeitig, messbar, dokumentiert, geplant) und die fünf Kriterien für die Auswahl von Testfällen. |
^ 7.4 ^Kennen | Ich kenne den Zweck von Validatoren und weiss, welche W3C-Dienste für HTML und CSS verwendet werden. |
^ 7.5 ^Unterscheiden | Ich kann den Unterschied zwischen der White-Box- und der Black-Box-Testmethode in eigenen Worten erklären und begründen, wer welche Methode anwenden kann. |
^ 7.6 ^Erklären | Ich kann erklären, warum frühzeitiges Testen Zeit und Kosten spart, und dies anhand eines Praxisbeispiels (z.B. Prototyp vs. fertiges Produkt) veranschaulichen. |
^ 7.7 ^Erklären | Ich kann erklären, welche Auswirkungen Softwarefehler auf verschiedene Einsatzgebiete (Massenprodukt vs. individuelle Software) haben können. |
^ 7.8 ^Erklären | Ich kann erklären, warum Validatoren für Standardkonformität, Barrierefreiheit, SEO und langfristige Wartbarkeit wichtig sind. |
^ 7.9 ^Erstellen | Ich kann für ein gegebenes Testobjekt strukturierte Testfälle erstellen, die Normal-, Grenz- und Ausnahmefälle abdecken, und diese in einem Testbericht dokumentieren. |
^ 7.10 ^Anwenden | Ich kann den W3C HTML- und CSS-Validator gezielt einsetzen, die Ergebnisse (Fehler, Warnungen) interpretieren und den Code entsprechend korrigieren. |