Digitale Medien I Programmablauf der Vorlesung am 05. Juli 2014 Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014 Die nachfolgenden Folien sind die schönsten aus der Vorlesung. Ich empfehle Ihnen, sich einzuschreiben und den Bachelor zu machen. Die Folien stelle ich Ihnen hier vor, um zu zeigen, welche gestalterische Kreativität im Screendesign gefördert wird. Insgesamt sind es fünfzehn von über vierzig lehrreichen Folien. Dipl.-Wirt.-Ing. Dipl.-Ing. Gerhard Fleige, IT-Fachmann

Screendesign Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014

1. Einführung in Screendesign 1.1 Geschichte von Hypertext und Hypermedia -Bildschirme mit Bildpunkten (Pixeln) -Grafisches User Interface (GUI) -Internet ARPAnet (militärisch) kommerzielle Nutzung von amerikanischer Regierung erlaubt in der Öffentlichkeit im World Wide Web -Hypertext (Aussprache: haipertext) -Text, der Verknüpfungen zu anderen Texten enthält -HTML Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014

1.2 Aufgaben des Screendesign Screendesign -Gestalten von Websites und Multimedia und vieles mehr …. -macht Nutzern mittels direkter oder indirekter Interaktion Informationen für ihr Handeln verfügbar Hauptforderung -gebrauchstauglich (gute „Usability“) Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014

1.5 Deskriptive und prozedurale Auszeichnungssprachen: HTML, XHTML, XML, PDF, Postscript Deskriptive und prozedurale Auszeichnungssprachen: -HTML, XHTML, XML, PDF, Postscript HTML (engl. Markup Lanuage) -prozedurale Auszeichnungssprache -Text mit Auszeichnungen -steuert die Darstellung von Daten -z.B. Dieser Text soll fett erscheinen XHTML -Weiterentwicklung von HTML -orientiert sich am Standard XML (eXtensible Markup Language) XML -deskriptive Auszeichnungssprache -bietet lediglich einfache Regeln, wie Daten beschrieben werden können -mittels Transformationssprachen transformierbar in anderes Dokument Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014

1.5 Deskriptive und prozedurale Auszeichnungssprachen: HTML, XHTML, XML, PDF, Postscript Postscript -ebenfalls prozedurale Auszeichnungssprache -z.B. PDF SVG (Scalable Vector Graphics) -es können SVG Grafiken manipuliert und animiert werden -Alternative zu Flash-Grafiken (da von vielen Browsern unterstützt) (Anmerkung: SVG speichert Formen ab (z.B. Linien mit Anfangspunkt, Endpunkt, Eigenschaften, deshalb auch Größe veränderbar, Vektorgrafik), jpg, gif, png etc. Pixel (farbliche Bildpunkte - Rastergrafik)) Auszeichnungssprachen -strukturieren Daten und steuern ihre Darstellung -sind keine Programmiersprachen definieren keine Entscheidungen, Schleifen und Sequenzen Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014

1.6.2 Multimedia Werkzeuge Adobe Flash - das alternativlose gängige Multimedia-Werkzeug Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014 Werkzeugleiste Vorschaufenster Eigenschaften- Bedienfeld Zeitleiste

2.1.1 Ziele und Zielgruppe Ziel: -früher: „Wir sind im Netz!“ -heute: -Die Frage ist heute nicht mehr, ob eine Website sinnvoll ist, sondern wie diese beschaffen sein soll. -Nutzer erwarten heute, dass jegliche Information im Internet verfügbar ist. Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014

2.1.2 Browserkompatibilität Viele verfügbare Browser - verschiedene Darstellung der Website Nicht zu empfehlen: -Webseiten nur auf und für seinen Lieblingsbrowser zu entwickeln Best Practise: -Websites auf zwei bedeutenden Browsern prüfen, dann weitere Browser -Browserweichen einsetzen (HTML- oder CSS-Code je nach Browser) Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014

3. Screen-Layout Screen-Layout -bildet das Fundament des Screen-Designs -Ausgangspunkt wiederkehrende Elemente: Firma, Logo, Navigation, Inhalte -Format abhängig von Endgeräten Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014 Laptop iPad PC

3.1 Entwurf des Layout Übung: HTML-Editor bereithalten! Prüfen der HTML5-Fähigkeit -nicht alle Browser unterstützen zur Zeit HTML5 -prüfen mit -Z.B. Ergebnis “You are using Internet Explorer 11.0 on Windows 7” und Ausgabe alle unterstützen Befehle Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014

<style>-Bereich -C-CSS, Art der Darstellung 3.2 Die Trennung von Inhalt und Form durch Cascading Stylesheets (CSS) Klasse <body>-Bereich -H-HTML, Text mit Bedeutung

3.3 Entwurf der Sitenavigation Seitennavigation linke Seite Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014 Neues Webdesign:

3.4 Typografie Bildschirmschriften Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014 Benutzer-Sicht Bitmap (Treppeneffekt) Antialiasing (deutsch: Kantenglättung)

Digitale Medien I Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014 Viele Dank für die Aufmerksamkeit.