Inhaltliche Richtziele der Modulprüfung: Einen bestehenden Webauftritt hinsichtlich Erweiterung mit Funktionen, Animationen, Navigationserweiterungen, grafischen und multimedialen Elementen analysieren Unter Berücksichtigung des Responsive Design Lösungsvorschläge für Erweiterungen ausarbeiten und umsetzen. Bilder und Grafiken webgerecht und displaygerecht optimieren. CSS3-Features und -Animationen erstellen. CSS3 Texteffekte anwenden. Vorlagen für Imageseiten erstellen. jquery und jquery-ui-elemente einsetzen und anpassen. HTML5 Formulare erstellen und mittels jquery validieren. Funktionalitäten, Navigationen, grafische und multimediale Elemente auf verschiedenen Plattformen und Ausgabegeräte testen. Erweiterungen und Tests dokumentieren. Empfohlene Vorkenntnisse: Module 232, 233 und 244 1 Analyse der Erweiterbarkeit eines bestehenden Webauftritts 1.1 Kennt die Unterschiede der verschiedenen HTML-Standards. 1.1.1 Unterschiede zwischen HTML5, XHTML erläutern und die korrekte doc-type-definition 2 auswählen 1.2 Einen bestehenden Webauftritt zwecks Erweiterung mit grafischen und multimedialen Elementen analysieren. 1.2.1 Zielgruppendefinitionen und den Einfluss auf die Gestaltung der Website kennen 2 1.2.2 gängigste Multimediaformate und deren Eigenschaften kennen 3 1.2.3 Aspekte des webgerechten und displaygerechten Aufbereiten von Grafikelementen kennen und diese Elemente auf Webtauglichkeit überprüfen 2 1.2.4 Aspekte des web- und displaygerechten Aufbereiten von Multimediaelementen kennen und diese Elemente auf Webtauglichkeit überprüfen 5 1.2.5 beurteilen, ob Grafiken und multimediale Elemente nach Bearbeitung dem Corporate Website Design entsprechen 5 1.2.6 die Möglichkeiten der CSS3-Features und -Animationen kennen und deren Verwendungszweck erläutern 2 1.2.7 Vorteile von Web- und Icon-Fonts erklären und kann deren Verwendungszweck erläutern 2 SEITE 1/6
1.3 Einen bestehenden Webauftritt zwecks Erweiterung mit Funktionen und Navigation analysieren. 1.3.1 Navigationsdesigns auf technische Umsetzbarkeit bzgl. Responsive Design-Tauglichkeit prüfen und beurteilen 5 1.3.2 Begriffe wie transition, transform, keyframes etc. erklären 2 1.3.3 Möglichkeiten und Nachteile der clientseitigen Plausibilisierung von Eingabedaten kennen 2 1.3.4 Möglichkeiten der jquery-ui-elemente kennen 2 1.3.5 Einsatzmöglichkeiten jquery aufzeigen 3 1.4 Gestaltungsdesign analysieren. 1.4.1 grafisches Gestaltungs- und Screendesign auf technische Umsetzbarkeit bzgl. Responsive Design-Tauglichkeit prüfen und deren Einsatz auf unterschieden Ausgabegeräte beurteilen 5 1.4.2 CSS3-Breaking Point überprüfen und bestimmen 5 2 Lösungsvorschlag unterbreiten 2.1 Lösungsvorschläge für das Erweitern des Webauftrittes mit grafischen und multimedialen Elementen ausarbeiten. 2.1.1 die Faktoren für die Optimierung der Bildgrösse bezüglich Auflösung, Farbanzahl und 2 Komprimierung kennen 2.1.2 unter Berücksichtigung der Zielgruppe und der Aufgabenstellung für Bilder, Grafiken 5 und multimedialen Elementen die geeigneten Dateiformate, Dimensionen und Qualitäten festlegen 2.1.3 unter Berücksichtigung der CSS3-Breakpoints für Bilder, Grafiken und multimedialen Elementen die geeigneten Dateiformate, Dimensionen und Qualitäten festlegen 5 2.1.4 geeignete Bildbearbeitungs- und Optimierungsmöglichkeiten vorschlagen und deren Aufwand abschätzen und beziffern 5 2.1.5 zusätzliche Media Queries bestimmen um den Einsatz von multimedialen Elementen auf unterschiedlichen Ausgabegeräte zu optimieren 5 2.1.6 Varianten von CSS3-Effekte aufzeigen und Vorschläge unterbreiten 5 2.1.7 Bildsprache festlegen und auf alle Multimediaelemente übertragen 5 SEITE 2/6
2.2 Lösungen für die Erweiterung mit Funktionen und Navigation vorschlagen. 2.2.1 zur Verbesserung der optischen Wirkung Vorschläge von Animationen bestehender Navigationen ausarbeiten und vorschlagen 5 2.2.2 Varianten von zu integrierenden Mobilen Navigationen ausarbeiten und vorschlagen 5 2.2.3 Möglichkeiten zusätzlicher Navigationselemente wie Ghost Buttons, Speech Ballons etc. aufzeigen 5 2.2.4 aufgrund der Aufgabenstellung und Vorgaben eine geeignete Anpassung oder Erweiterung der Navigation vorschlagen / aufgrund der Aufgabenstellung und Vorgaben geeignete Interaktionen vorschlagen 5 2.2.5 aufgrund der Aufgabenstellung und Vorgaben geeignete Plausibilisierungen vorschlagen 5 2.2.6 aufgrund der Aufgabenstellung und Vorgaben geeignete jquery-lösung und/oder jquery-ui-lösungen vorschlagen 5 2.2.7 Erweiterungen und Anpassungen der Ordnerstruktur und Namenskonvention vorschlagen 5 2.3 Umsetzungsmöglichkeiten des Gestaltungsdesign aufzeigen. 2.3.1 Unterschiede zwischen frame based, table based, fixed-width (Ebenen und absolut positionierte Elemente) und liquid design erklären sowie Vor- und Nachteile der verschiedenen Designarten aufzeigen 2 2.3.2 Responsive Design-fähige Prototypen ausarbeiten und Variantenvorschlag unterbreiten 3 2.3.3 Lösungsvorschläge für Integration von Funktionen und Multimedia- Elemente unter Berücksichtigung des Responsive Design und Corporate Website Design aufzeigen sowie Variantenvorschläge unterbreiten 5 2.3.4 Lösungsvorschläge für zusätzliche Breakpoints vorschlagen um eine bessere Unterstützung der Ausgabegeräte zu erreichen 5 2.3.5 unterbreiten von Lösungsvorschlägen um eine bessere Unterstützung von speziellen Funktionen von Ausgabegeräte (z.b. Retina Display) zu erreichen 5 2.3.6 Möglichkeiten von Web- und Icon-Fonts aufzeigen und Vorschläge unterbreiten 5 2.3.7 Strukturierung des CSS aufzeigen 2.4 Gesamtkonzept erweitern. 2.4.1 Gewählte Lösungsvarianten für die Erweiterungen in ein Gesamtkonzept zusammenführen 5 2.4.2 Arbeitsplan erstellen 3 2.4.3 Terminplan erstellen unter Berücksichtigung der Termine von externen Quellen, involvierten Spezialisten und Materiallieferungen seitens des Kunden 3 2.4.4 Meilensteine setzen 3 2.4.5 Budget erstellen 3 2.4.6 Angebot zusammenstellen und unterbreiten SEITE 3/6
3 Lösungsvorschlag umsetzen 3.1 Lösungsvorschläge für das Erweitern des Webauftrittes mit grafischen und multimedialen Elementen umsetzen. 3.1.1 aufgrund des gewählten Vorschlages für Bilder und Grafiken die geeigneten Dateiformate (gif, jpg oder png), Dimensionen und Qualitäten anwenden 3 3.1.2 Bilder und Grafiken webgerecht unter Berücksichtigung von Breakpoints optimieren 3 3.1.3 Bilder und Grafiken mit Transparenz optimieren (z.b. Halo-Effekt vermeiden) 3 3.1.4 GIF-Bilder bezüglich Farben adaptiv optimieren 3 3.1.5 multimediale Elemente integrieren und Eigenschaften einstellen 3 3.1.6 Multimediaelemente an eine vorgegebene Bildsprache anpassen 3 3.1.7 CSS3-Animationen und Effekte realisieren und integrieren 3 3.1.8 CSS3 Texteffekte erstellen 3 3.1.9 Web- und Icon-Fonts (z.b. Google Fonts) laden und anwenden 3 3.1.10 Web-Icons, bzw. Icon-Fonts (z.b. Genericons) laden und anwenden Navigationen integrieren, anpassen, animieren und erweitern 3 3.2 Lösungsvorschläge für die Erweiterung mit Funktionen und Navigation umsetzen. 3.2.1 einfache CSS-basierte Navigationen realisieren 3 3.2.2 Alternative Navigationen wie z.b. Ghost Bottons erstellen 3 3.2.3 HTML5-Formulareingaben sinnvoll und wirkungsvoll plausibilisieren sowie Fehlermeldungen benutzerfreundlich anzeigen 3 3.2.4 CSS3- Animationen und Effekte erstellen 3 3.2.5 einfache Keyframe-Animationen erstellen (mittels und ohne Tools) 3 3.2.6 clientseitige Weiterleitung erstellen 3 3.2.7 jquery und jquery UI einsetzen und anpassen 3 3.2.8 Erweiterungen und Anpassungen der Ordnerstruktur unter Berücksichtigung der festgelegten Namenskonvention ausführen 3 3.3 CSS-Regeln anwenden und erweitern. 3.3.1 universelle, Tag-, Klassen- und ID-Selektoren strukturiert anwenden 3 3.3.2 Kaskaden der Stylesheet Autor, Benutzer und Browser verstehen 3 3.3.3 Element-, Inlinestile anwenden sowie externe Stylesheets anlegen 3 3.3.4 Pseudoklassen richtig anwenden 3 3.3.5 CSS basierte Navigationen realisieren, ändern, animieren und anpassen 3 3.3.6 Gestaltungsdesign mittels CSS umsetzen 3 3.3.7 Elemente, Bereiche und Ebenen positionieren oder umfliessen lassen 3 SEITE 4/6
3.4 Seiten bezüglich Usability und Accessibility optimieren. 3.4.1 Usability von Seiten verbessern durch Tabindex, Accesskey, Textdesign, Einsatz von grafischen Elementen und automatischem Fokus setzen (die Aufzählung ist nicht abschliessend) 3 3.4.1 Usability von Formularen durch Einsatz von grafischen Elementen, Gruppierungen Beschreibungen der Formularelemente und qualifizierenden Fehlermeldungen verbessern 3 3.4.2 Accessibility von Seiten durch Einsatz von semantischen Tags wie address, blockquote, q, cite, dt, dl, dd, thead, tbody und tfoot verbessern (die Aufzählung ist nicht abschliessend) 3 3.4.3 Accessibility durch die korrekte und konsequente Verwendung von Attributen wie alt und title verbessern (die Aufzählung ist nicht abschliessend) 3 3.4.4 Accessibility bei Formularen durch Einsatz von Labels verbessern 3 4 Lösungen hinsichtlich Erfüllung der Vorgaben überprüfen, rapportieren und übergeben 4.1 Funktionalitäten, Navigation, grafische und multimediale Elemente auf verschiedenen Plattformen testen. 4.1.1 Problematik der unterschiedlichen Interpretationen in verschiedenen Browsern auf unterschiedlichen Ausgabegeräte kennen 2 4.1.2 sinnvolle Testdaten für Plausibilisierung formulieren und anwenden 3 4.1.3 unterschiedliche Darstellung von grafischen und multimedialen Elementen auf verschiedenen Plattformen kennen, überprüfen und nach Möglichkeit beheben 3 SEITE 5/6
4.2 4.3 Projektfortschritt überwachen. 4.2.1 Termine und Milestones überwachen 3 4.2.2 Budget überwachen 3 4.2.3 Projektfortschritt rapportieren 3 Abnahme vorbereiten. 4.3.1 Abnahmetest und Abgabe vorbereiten und organisieren 3 5 Lösungen dokumentieren 5.1 Lösungen dokumentieren 5.1.1 Ordnerstruktur und gewählte Namenkonvention dokumentieren 3 5.1.2 Gestaltungsplan nach Erweiterung dokumentieren 3 5.1.3 erweitertes Navigationskonzept dokumentieren 3 5.1.4 Handhabung Templates dokumentieren 3 5.1.5 CSS-Struktur dokumentieren 3 5.1.6 Wartungsplan erstellen 3 Empfohlene Unterrichtszeit (Lektionen): 20 - Diese Empfehlung ist als Richtwert zu verstehen. Sie beinhaltet keine Qualitätsaussage. - Die Empfehlung muss dem Wissensstand und der Praxiserfahrung der Kandidaten angepasst werden. - Der Unterricht erfolgt im Rahmen eines Weiterbildungslehrgangs. - Zusätzlich ist mit einem wöchentlichen Aufwand 6-10 Stunden in Form von Selbststudium zu rechnen (Umsetzen von Erlerntem, eventuellem Einsatz von Lernvideos). - Der Richtwert ist abhängig von den Möglichkeiten, das Erlernte in der Praxis anzuwenden. Version Datum Bemerkung - Änderungsnachweis SEITE 6/6