Kurszusammenfassung Multimediale Webprogrammierung SS 2014/2015, Prof. Dr. M. Frank

Transkript

1 Kurszusammenfassung Multimediale Webprogrammierung SS 2014/2015, Prof. Dr. M. Frank Nachfolgend finden Sie für Ihre Klausurvorbereitungen die stichpunktartige, themenorientierte Zusammenfassung des Kurses. Neben der Schulung von Programmierfertigkeiten ging es vor allem um technologische Ideen und um ihre Umsetzungsmöglichkeiten mit den gegebenen Webtechnologien. Die Materialien finden sich auf der Webseite zum Kurs, auf dem Laufwerk /lehre/mfrank/ und in den in der Vorlesung zitierten Links. Ein Buch von J. D. Gauchat wurde besonders empfohlen, neben anderer Literatur im Kursverlauf (s. Vorlesungen bzw. ausgegebene Materialien). 1. Vorlesung: Begriffe: Deklarative Programmierung, Rich Internet Applications Kenntnis: Möglichkeit der Programmierung mit Scala und Java-Bibliotheken zu javabasierten Webanwendungen, oder auf Basis des Servers node.js zu JavaScript-basierten Webanwendungen Canvas Fingerprinting Verhaltensstruktur von Webseiten und wesentliche drei Technologien dafür HTML5 im engeren und im weiteren Sinne: Technologien dem Namen nach zuordnen Rolle von W3C und WHATWG Scalable Vector Graphics (SVG): Gegenstand Wiederholung der Grundlagen multimedialer Dokumente 1. Seminar: Wiederholung: Klassisches Boxenmodell und klassisches Boxen-Design des Layouts von Webseiten 2. Vorlesung Semantische Elementbezeichner in HTML5-Layouts und aktuelle Verknüpfung mit Boxendesign für den Seitenaufbau Rollenattribute nach WAI-ARIA als derzeit sinnvoller Zusatz für Barrierefreiheit Seitenaufbau mit klassischem Boxenmodell (wichtige Gesichtspunkte) Flexibles Boxenmodell nach dem Standard von 2014: Modell und Unterschiede zum klassischen Boxenmodell, Bemerkungen zur Syntax von 2009 und von 2012 mit wesentlichen Features (qualitativ), Vorteile und Nachteile von flexiblem Boxendesign Seitenaufbau mit flexiblem Boxenmodell (wichtige Gesichtspunkte der Architektur) Prefixing für die Browserkompatibilität am Beispiel 2. Seminar: Training des flexiblen Boxenmodells in den Facetten seiner Architektur Flexibles Boxendesign nach dem Standard von 2014 anhand von bisherigen Beispieldateien 3. Vorlesung: Responsive Design Erläuterungen anhand der zeitlichen Reihenfolge der Ideen am Markt Fixed und Fluid Grid Design (Modellcharakteristika) Adaptive Web Design (Ideen) Responsive Web Design (Ideen) Content First, Navigation Second (Definition) Mobile First + Progressive Enhancement versus Desktop First + Graceful Degradation als Strategien des Layout- und Interaktionsdesigns (Ideen) Vorgehensmodell der Webentwicklung nach Viljami Salminen Design 5 Layout-Muster (Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweeks, Off Canvas)

2 Neue Layout-Ideen darüber hinaus Navigationsmuster für Responsive Design (Top Navigation, Navigation mit Icons, Footer Navigation, Select Menue Navigation, Toggle Menue Navigation, Off Canvas Menue Navigation / gar keine Navigation, Full Screen Navigation) 3. Seminar: Aufbau eines flexible Boxendesigns in drei Bildschirmgrößen (Desktop, Tablet, Mobile) und Zusammenführung der CSS-Dateien mit Media Queries Bootstrap vertagt 4. Vorlesung: Media Queries (Theorie und Praxis) Zoombarkeit für mobile Geräte steuern [Viewport verkappt hier bereits angesprochen] Fluide Anpassung an Bildschirmgrößen zwischen den Breakpoints des Designs laut CSS Fluide Anpassung von Schrift im Fluid Design (verschiedene Strategien, rem) Typografische Tonleiter und Blickwinkel als Gesichtspunkte für Entscheidungen (Begriffe, Ideen) Eigene Schriftfonts einbinden (technologische Idee) Fluide Anpassung von Bildern (picture-element, max-width versus width, IE-Hack; Nutzung von figure; overflow mit den Werten scroll, auto, hidden; Kenntnis von JavaScript-basierten Lösungen (Ideen); Nutzung unterschiedlicher Bildauflösungen) Fluide Anpassung von Videos (z.b. mit FitVids.js Ideen) 4. Seminar: Aufbau eines flexiblen (klassischen) Boxendesigns mit dem Framework Bootstrap und mit Elementen der Bibliothek jquery nach dem Mobile-First-Ansatz 5. Vorlesung: JavaScript, Bibliotheken wie jquery oder Prototype, Google Maps Document Object Model (DOM) und Nutzungsart in JavaScript (kurze Wiederholung) Verhinderung der sofortigen Ausführung von JavaScript-Code am Dateianfang der HTML-Datei (wie, warum) Ereignismanagement zu HTML-Elementen: Paradigmenwechsel in HTML5 hin zum Ereignismanager (beide Registrierungsvarianten erklären können) Ereignisselektoren und Handler, deren Registrierung und Deregistrierung Canvas API: Ziele, wesentliche Feature, Nutzungsbeispiele zumindest ansehen Drag&Drop API: Ziele, wesentliche Feature, Workaround für alle Browser, Nutzungsbeispiele zumindest ansehen Geolocation API: Ziele, wesentliche Feature, Nutzungsbeispiele zumindest ansehen 5. Seminar: Die Drag&Drop API an Beispielen, universeller Workaround für alle Browser. Programmieren von Drag&Drop-Ereignissen in Webseiten 6. Vorlesung: Web Storage API (Local, Session Storage) und Indexed Database API: Ziele, wesentliche Feature, Details der Nutzung, Nutzungsbeispiele zumindest ansehen File API: Ziele, wesentliche Feature, Nutzungsbeispiele zumindest ansehen Communication API (XMLHttpRequest API Level2, Web Messaging API, Web Sockets): Ziele, wesentliche Feature, Nutzungsbeispiele zumindest ansehen

3 Web Workers API (Dedicated, Shared Worker); Ziele, wesentliche Feature, Nutzungsbeispiele zumindest ansehen Explosion der API-Welt 2014: Unterscheidung in seriöse und private APIs 6. Seminar: Die Web Worker API an Beispielen, eigene Programmierversuche zur Modifikation und Nutzung. 7. Vorlesung Videos in HTML5: Das Video-Element, Test auf Unterstützung Video-Formate: MP4 bzw. H.264, Ogg und Theora, WebM in den Versionen 8-10, HEVC bzw. H.265 Player und Video-Konverter Syntax des Video-Elements, Video-Text-Tracks mit WebVTT, Fallbacks Weitere Ideen im Umfeld von Video und Audio (Kenntnisnahme) Web Audio API Anliegen und Funktionen (Ideen) 7. Seminar: Einführung in die Canvas API, Beispiele, Prinzipien Programmierung eines 2x2-Quadrates mit der dynamischen Bewegung einer Kreisscheibe auf ihm Grenzen der Spezifikation, Arbeit mit Bildern und Videos im Sinne von Live-Verarbeitung mit Filtern und anderen Veränderungen 8. Vorlesung: Language Extensions für CSS (Spracherweiterungen): Einige Anliegen der Entwicklung CSS Extensions und CSS Extension Frameworks (LESS, SCSS/SASS, Stylus Prinzipien, Client- oder Serverseite, Einsatz, Unterschiede) LESS und SASS/SCSS: Grundlagen, Programmierprinzipien wie Nested Properties, Variable, Datentypen, Mixins (hier: Deutlicher Unterschied in der Programmierweise), Funktionen, Ablaufsteuerung, extend-eigenschaft CSS Frameworks und Pakete im Umfeld: Bootstrap, Foundation 4, einige andere Wissen über Sinn und Einsatz 8. Seminar: Programmierung der Oberflächen und der einfachen Steuerungsteile eines Tic-Tac-Toe -Spiels mit der Canvas API 9. Vorlesung: Notwendigkeit der Optimierung von Ladezeiten und des zu ladenden Datenumfangs von Bildern Bildformate für Webbrowser und ihre wesentlichen Gebrauchseigenschaften PPI als das Dichtemaß für Pixel von Bildschirmen, physikalische und logische (CSS-)Pixel als Begriffe Visual und Layout Viewport von Webbrowsern als Begriffe Metadaten-Angabe zum Viewport von Apple zur Steuerung der Anzeige im Browserfenster, Eigenschaften zum Steuern Device Pixel Ratio (DPR) als Steuergröße (Definition), Nutzung mit der <picture>-umgebung und mit dem Attribut srcset im <img>-element Neue Art der Bildanzeigensteuerung mit dem <img>-element und den Attributen sizes und srcset unter Angabe mehrerer Quellbilder / was weiß der Entwickler und was weiß der Webbrowser Maßnahmen zur Ladezeitreduktion und zur Ladedatenreduktion bei Bildern 10. Seminar: Einsatz des Video-Elements in HTML-Dateien, Test seiner Attribute mit dadurch ausgelösten Funktio-

4 nen, Video-Formate zur Auswahl einbinden Programmierung eigener Video-Steuerungselemente mit HTML-Elementen und Bildern Studium eines gestalterisch anpassbaren Video-Players zum Einbinden in Webseiten (nur Verständnis) 10. Vorlesung (nicht in der Klausur): Responsive Design für Tabellen verschiedene Ansätze und Ideen nach unterschiedlichen Quellen Frameworks zu Responsive Design 11. und 12. Vorlesung: Einführung in Scalable Vector Graphics (SVG), historische Auffassungsänderungen über die Rollen von SVG im Webdesign SVG-Frameworks und -Bibliotheken (RaphaëlJS, d3.js, jquery SVG, Ample SDK, andere) SVG: Konkurrenz, Werkzeuge, Browserkompatibilität Geometrische Grundlagen von SVG, Sichten auf die geometrischen Darstellungen, Prinzipien Bézier-Kurven erster, zweiter und dritter Ordnung; Kurvendarstellungen in SVG Orientierung von Kurven und Einfärbung von Flächen in SVG und in der Geometrie Nutzung von SVG-Code in verschiedenen Szenarien 5 Sorten von SVG-Elementen Der Kopf der SVG-Datei bzw. die Attribute des SVG-Elementes (Wandel, Fehlerursachen) Varianten der browserkompatiblen Einbettung von SVG-Codeabschnitten bzw. SVG-Dateien Grundsätzlicher Dateiaufbau einer SVG-Datei, Maßeinheiten Grundlegende geometrische Elemente zur Erzeugung von Darstellungen 11. Seminar: Einführung in SVG: 2 Wege zu Erstellung von SVG-Dateien (Zeichenprogramme Inkscape und Adobe Illustrator, Programmieren) Vor- und Nachteile der Strategien Erproben der Strategien mit ersten Elementen der Animation der SVG-Grafiken 12. Seminar: Transformationen von sichtbaren SVG-Elementen bzw. von Gruppen sichtbarer SVG-Elemente mit Hilfe der Optionen des Attributes transform. Anwendung auf die Erzeugung von Fraktalen mit Iterationen. 12. Vorlesung: Reimplementierung von SVG-Konzepten in CSS3: Maskierungen und Beschneidungspfade, Filter, lineare und radiale Farbverläufe als Hauptbeispiele, Verständnis der Herangehensweisen, Vor- und Nachteile, wesentliche Tricks weitere Konzepte, deren Transfer versucht wird (Beispiele nennen können) 13. Seminar: Erprobung einiger Beispiele zur 12. Vorlesung. Gewinnung erster Erfahrungen und Eindrücke. 14. Vorlesung: Klausurkonsultation SCHLUSS.

5 Leipzig, Prof. Dr. Michael Frank

6 Was könnte man zusätzlich noch betrachten? 1.) Eine gründlichere Wiederholung und Auffrischung der Kenntnisse in HTML 4.01 und XHTML 1.x, CSS2 und JavaScript am Kursbeginn 2.) Thematisierung verschiedener Programmierstile der (dynamischen) Webprogrammierung, insbesondere clientseitig (Single-Page Applications, klassische Webprogrammierung), aber auch mobil (web, hybrid-web, native, cross-platform) 3.) MVC-Frameworks (u.a. Prinzipien) der Single-Page Applications wie Backbone JS, Meteor JS, Angular JS (!), Ember JS, Knockout JS 4.) Serverseitige JS-Programmierung mit node.js, MongoDB, anderen nonsql-db 5.) Web Komponents (s. BA von Florian Klos 2015)