Medienkompetenz, Grafik und DTP

Transkript

1 VO Informationsdesign; Medienkompetenz, Grafik und DTP Zentrum für Translationswissenschaft

2 Letztes Mal sprachen wir über Schrift als Gestaltungsmittel Typographie Layout Desktop Publishing Lesbarkeit

3 Heute: Design

4 Aufbau Design

5 Design dt.: Gestaltung als englisches Lehnwort eher Entwurf Funktion und Zielsetzung ist sehr vielfältig

6 Designfunktion in Kategorien Offenbacher Ansatz nach Gros (1983) praktische Funktion formal-ästhetische Funktion zeichenhafte/semantische Funktion

7 Praktische Funktion

8 Ästhetische Funktion

9 Zeichenhafte Funktion

10 Corporate Design Die Identifikation eines Unternehmens (corporate identity) durch eine markante und einheitliche Gestaltung von Logos, Vordrucken, Kleidung, Verpackungen, Visitenkarten, etc. Informationen über das Corporate Design an der Uni Wien:

11 Corporate Design Uni Wien

12 Phishing Der Versuch sich durch Missbrauch der Corporate Identity einer Institution persönliche Daten zu erschleichen. Fälschung von Webseiten Aufforderung zur Eingabe von Passwörtern und privaten Informationen über Domain-Namen, die häufig durch Tippfehler aufgerufen werden über s von vermeindlich legitimen Absendern

13 Aufbau Design

14 Arten von digitale Präsentation, digitale Folien (oft fälschlicherweise PowerPoint Präsentation genannt) Webseiten Programme und Apps Untertitel

15 Richtlinien telegramartiger Text, vollständige Sätze vermeiden so wenig wie möglich, so präzise wie nötig Bilder und Diagramme sind meist sinnvoll aber: keine zu komplexen Diagramme/Tabellen/Formeln

16 Richtlinien Titel und Übersicht auf jeder Folie meist sinnvoll eindeutige Sprache ( Ich sah den Mann mit dem Fernrohr. ) als Dateiformat eignet sich PDF am besten

17 Portable Document Format PDF unabhängig vom Betriebsystem alle Elemente (Schrifttyp, Grafiken,...) zur Wiedergabe in der Datei enthalten PDF-viewer kostenlos und für jede gängige Plattform erhältlich

18 Aufbau First, tell them what you are going to tell them, then tell them, and finally tell them what you told them.

19 Aufbau Titelfolie Name, Titel, Untertitel, Grafik, Corporate Design,... Gliederung/Agenda Einleitung und Hauptteil Zusammenfassung Fazit, Wiederholung der Kernaussagen evtl. Literatur

20 Gutes Eine Webseite beinhaltet Elemente aller drei der zuvor genannten Offenbacher Kategorien. Alle s.g. Regeln leiten sich aus den Anforderungen dieser Kategorien ab. Ja nach Anwendung und Darstellungsgerät kann das Verhältnis von ästetischer und praktischer Elemtente variieren.

21 Gutes

22 Gutes? Home/home.html

23 für Heimcomputer viel Information auf einen Blick Links und kurze Absätze auf der Titelseite (Homepage) Schachtelung der Informationen in verlinkten Seiten scroll less, click more Raum für Logos und Kreativität bei der Anordnung

24 Gutes

25 für mobile Geräte knappe enge Darstellung des Wesentlichen Links versteckt in Drop-down-Listen click less, swipe more Funktionalität lässt wenig Raum für kreatives Design

26 Aufbau von Webseiten HyperText Markup Language + Cascading Style Sheets (HTML + CSS) Links intern und extern Multimedia Inhalte Bilder, Musik, Videos dynamische Inhalte, z. B. Flash, JavaScript,...

27 CSS Beispiel [...] h2 {font-size: 125%; letter-spacing: 2px; color: #069; text-align: right; margin: 3px 0 5px 0;} [...]

28 HTML Beispiel [...] <h2> Dieser Abschnitt ist nach dem h2-eintrag in der CSS Datei formatiert </h2> [...]

29 Links interne Links Pfad zur Quelle auf demselben Computer externe Links Pfad zur externen Quelle externe Links sind eindeutige Adressen, s.g. uniform resource identifier (URI)

30 Struktur einer Webseite

31 URI URIs können URLs und URNs beinhalten, wobei URNs eher selten verwendet werden. URL uniform resource locator URN uniform resource name URI uniform resource identifier

32 URI Schemas Hypertext Transfer Protocol HTTP ( File Transfer Protocol FTP (ftp://<adresse>) bei und ftps:// ist der Informationsaustausch verschlüsselt aussagekräftige Benennung der Adresse ist vorteilhaft

33 IP Adresse Eine Internet Protocol Adresse hat jedes Gerät, das an einem Netzwerk angeschlossen ist und das IP Protokoll verwendet ist im jeweiligen Netzwerk eindeutig Umstellung von IPv4 auf IPv6 notwendig für eine größere Anzahl von möglichen Adressen

34 IPv4 IPv6 Beispiele: IPv (Uni Wien Webpage Server) IPv6 2001:0db8:85a3:0042:1000:8a2e:0370:7334 (fiktive Adresse)

35 Tiny URL Lange Internet Adressen können mit Hilfe von verkürzt werden. Komplette Adresse &semester=current Tiny URL

36 Domain Name System DNS hierarchische Benennung aller mit dem Internet verbundener Ressourcen = Vergabe und Verwaltung von DNS durch Organisationen wie nic.at

37 LAN und Internet

38 Multimedia Musik und Video Inhalt sind eher auf spezialisierten Seiten zu finden. Bilder sind fast auf jeder Seite zu finden. Wichtig ist das Benutzen von komprimierten Dateiformaten, welche in der Regel einen Bruchteil des Platzes und der Ladezeit benötigen. Beispiele: JPG PNG GIF BMP MP4 AVI MP3 WAV

39 Dynamische Inhalte Es gibt viele Formen von dynamischen Web-Inhalten, oft sind diese interaktiv. Besonders bei diesen Inhalten ist aufgrund der Zugriffe auf den lokalen Computer große Vorsicht angebracht. Beispiele: Flash JavaScript PHP

40 Content Management System CMS ist eine Plattform zur schnelle Erstellung von Webseiten (Vorlagen) einfache Verwaltung durch hierarhischen Aufbau Verwaltung von Benutzerdaten (z. B. Passwörter) Verwaltung aller Inhalte (Links, Multimedia, dynamische Inhalte,...)

41 Sinnvolles konsequente Hierarchie und Struktur klar erkennbare und funktionierende Links auch hier gelten die Regeln der Gestaltpsychologie

42 Sinnvolles Verwendung von aussagekräftigen Wörtern die wichtigsten Begriffe oben auf der Seite und in normaler Schrift (im Gegensatz zu Bildern) knappe aussagekräftige Texte Auch für die Klickrate sinnvoll.

43 Klickrate Click-Through-Rate) (CTR) wie oft wurde ein Link geklickt, im Verhältnis zur Anzeige die CTR wird von Google nach dem Zipfschen Gesetz bei der Anordnung der Suchtreffer verwendet

44 Barrierefreies der Begriff Barrierefreiheit ursprünglich aus dem Bauwesen seit 1993 als Metapher für Softwareschnittstellen Ziel: Zugang zu allen Informationen für alle Nutzer

45 Barrierefreies Zentral für barrierefreien Zugang von Webseiten ist vor allem: Skalierbarkeit von Schrift logischer Aufbau der Struktur (semantische Struktur)

46 Impressum 24 Mediengesetz: Die Medieninhaberin/der Medieninhaber jedes Medienwerks muss auf bzw. in ihrem/seinem Medienwerk bestimmte Angaben veröffentlichen. kommunikation/impressumspflicht/65246.html

47 Letzte Einheit Der letzte Vorlesungstermin ist für Ihre Fragen reserviert. Schicken Sie mir Ihre Fragen (bis spätestens 22.06) zu den Themen, die wir im Semester besprochen haben, oder Themen über welche Sie gerne mehr wissen würden. Sollten keine (sinnvollen) Fragen aufkommen werde ich zusätzliche Themen präsentieren.

48 Quellen I Tim Berners-Lee Information Management: A Proposal. CERN (March 1989, May 1990) Karl Dubost My Web site is standard! And yours? W3C