1 / 15

Digitale Medien I Programmablauf der Vorlesung am 05. Juli 2014

Die nachfolgenden Folien sind die schönsten aus der Vorlesung .

vidor
Download Presentation

Digitale Medien I Programmablauf der Vorlesung am 05. Juli 2014

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 Digitale Medien IProgrammablauf der Vorlesung am 05. Juli 2014 Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

  2. Screendesign Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

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

  4. 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“) 1.2 Aufgaben des Screendesign Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

  5. 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. <strong>Dieser Text soll fett erscheinen</strong> • 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 1.5 Deskriptive und prozedurale Auszeichnungssprachen: HTML, XHTML, XML, PDF, Postscript Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

  6. Postscript • ebenfalls prozedurale Auszeichnungssprache • z.B. PDF • SVG (ScalableVector 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, pngetc. Pixel (farbliche Bildpunkte - Rastergrafik)) • Auszeichnungssprachen • strukturieren Daten und steuern ihre Darstellung • sind keine Programmiersprachen • definieren keine Entscheidungen, Schleifen und Sequenzen 1.5 Deskriptive und prozedurale Auszeichnungssprachen: HTML, XHTML, XML, PDF, Postscript Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

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

  8. 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. 2.1.1 Ziele und Zielgruppe Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

  9. 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) 2.1.2 Browserkompatibilität Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

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

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

  12. 3.2 Die Trennung von Inhalt und Form durch Cascading Stylesheets (CSS) • <style>-Bereich • CSS, Art der • Darstellung Klasse • <body>-Bereich • HTML, Text • mit Bedeutung Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

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

  14. 3.4 Typografie3.4.1 Bildschirmschriften Benutzer-Sicht Bitmap (Treppeneffekt) Antialiasing (deutsch: Kantenglättung) Dozent: Gerhard FleigeDigitale Medien I Samstag, 05. Juli 2014

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

More Related