Digitale Medien I Programmablauf der Vorlesung am 05. Juli 2014

Digitale Medien IProgrammablauf 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


1. Einführung in Screendesign1.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


1.2 Aufgaben des ScreendesignScreendesign- 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.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


1.5 Deskriptive und prozedurale Auszeichnungssprachen: HTML, XHTML, XML, PDF, Postscript

Postscript- ebenfalls prozedurale Auszeichnungssprache- z.B. PDFSVG (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


1.6.2 Multimedia Werkzeuge

Adobe Flash - das alternativlose gängige Multimedia-Werkzeug


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.


2.1.2 BrowserkompatibilitätViele verfügbare Browser - verschiedene Darstellung der Website

Nicht zu empfehlen:- Webseiten nur auf und für seinen Lieblingsbrowser zu entwickelnBest Practise:- Websites auf zwei bedeutenden Browsern prüfen, dann weitere Browser- Browserweichen einsetzen (HTML- oder CSS-Code je nach Browser)


3. Screen-Layout

Screen-Layout - bildet das Fundament des Screen-Designs- Ausgangspunkt wiederkehrende Elemente: Firma, Logo, Navigation, Inhalte- Format abhängig von Endgeräten


LaptopiPad

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 http://html5test.com- Z.B. Ergebnis

“You are using Internet Explorer 11.0 on Windows 7” undAusgabe alle unterstützen Befehle


http://html5test.com/

3.3 Entwurf der Sitenavigation

Seitennavigation linke Seite


Neues Webdesign:

3.4 Typografie3.4.1 Bildschirmschriften


Benutzer-Sicht

Bitmap (Treppeneffekt)

Antialiasing (deutsch: Kantenglättung)

Digitale Medien I


Viele Dank für die Aufmerksamkeit.

Digitale Medien I Programmablauf der Vorlesung am 05. Juli 2014

Documents

Transcript of Digitale Medien I Programmablauf der Vorlesung am 05. Juli 2014