Transcript Digitale Medien

Digitale Medien I
Programmablauf der Vorlesung am 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
Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014
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
- 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
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. <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
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
Werkzeugleiste
Vorschaufenster
EigenschaftenBedienfeld
Zeitleiste
Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014
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
iPad
PC
Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014
Laptop
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 http://html5test.com
- 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
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 Fleige Digitale Medien I Samstag, 05. Juli 2014
3.3 Entwurf der Sitenavigation
Seitennavigation linke Seite
Neues Webdesign:
Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014
3.4 Typografie
3.4.1 Bildschirmschriften
Benutzer-Sicht
Bitmap (Treppeneffekt)
Antialiasing (deutsch: Kantenglättung)
Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014
Digitale Medien I
Viele Dank für die Aufmerksamkeit.
Dozent: Gerhard Fleige Digitale Medien I Samstag, 05. Juli 2014