Neue Medien

• Outlines bzw. vektorisierte Umrisslinien definieren die Form der Zeichen einer Schrift bei PostScript- und TrueType-Technologie
• PostScript-Schriften: kubische Bézierkurven als Berechnungsgrundlage
• TrueType-Schriften: Umriss mit quadratischen Gleichnungen, basiert auf quadratischen Kurven, welche eine Untergruppe der Bézierkurven von PostScript darstellen
• Ein Outline-Font (PostScript-Schrifte oder TrueType) wird durch Bildschirmpixel oder Rasterpunkte dargestellt
• Der Prozess, die Outline-Informationen in ein Punktmuster auf das Raster des Ausgabegeräts zu konvertieren, wird als Rastern bezeichnet.
• Professionelle Programme zur Schriftherstellung: FontLab Studio 5, Fontographer 5, DTL FontMaster

• Auch als Interpreter bezeichnet
• Konvertiert Umrisse (Outlines) der Buchstaben und Zeichen einer Schrift in Rasterpunkte
• Notwendig für Darstellung am Bildschirm und für Druck
• Für PostScript- und TrueType-Schriften
• Auch als Interpreter bezeichnet
• Konvertiert Umrisse (Outlines) der Buchstaben und Zeichen einer Schrift in Rasterpunkte
• Notwendig für Darstellung am Bildschirm und für Druck
• Für PostScript- und TrueType-Schriften

• Optimales Anpassen der Schrift an Pixelraster für Ausgabe auf Bildschirm oder mit niedriger Auflösung
• Hinting garantiert, dass Fonts harmonisch dargestellt werden
• Besonders bei kleinen Schriftgraden wichtig da nicht genügend Pixel vorhanden, um Details exakt darzustellen
• Findet im Rasterizer statt
• Hint-Alghorithmen (mathematische Formeln) teilen dem Font-Rasterizer mit, wie die Outlines in den Pixelraster einzupassen sind

• Web Open Type Font Format
• Suffix: .woff
• Ermöglicht Einbinden von Schriften in Websites
• Schriften befinden sich auf öffentlichem Webserver und werden durch Browser zur Anzeige der Website heruntergeladen
• Kein neues Format sondern Containerformat das TrueType- und OpenType-Schriften nutzt

• Internationaler Standard für Zeichensatz
• Für jedes grafische Zeichen aus allen Schriftkulturen wird ein digitaler Code festgelegt
• Jedes Zeichen besitzt programm-, system- und sprachunabhängige Nummer
• Nummerierung erfolgt nach strengen Richtlinien um Doppelbelegung zu vermeiden
• Bestehet aus 2 hoch 16, also 65536 Zeichen

• Internationaler Standard für Zeichensatz
• ASCII: American Standard Code for Information Interchange
• Besteht aus 2 hoch 7 Zeichen (128)
• Lateinische Grundbuchstaben, Zahlen und sonstige Zeichen
• Keine Umlaute

• Internationaler Standard für Zeichensatz
• Erweiterung des ASCII-Zeichensatzes auf 2 hoch 8 (256) Zeichen
• Erste 128 Zeichen identisch mit ASCII
• Weitere Zeichen sind mit Umlauten, Sonderzeichen, kyrillischen Buchstaben usw. belegt
• Durch fehlende Normen entstehen oft Konvertierungsprobleme.

• ist anstrengender aufgrunder der geringeren Auflösung
• Schriften wirken unruhig und oft verpixelt
• anstrengender wegen Kontrast von Farbwiedergabe
• Monitore sind selbsttrahlend --> Kontrast geringer wenn Licht von Seite einstrahlt
  Im Print andersrum --> Reflexion auf Papier

• schräge linien werden stufig
• Feinheiten verschwinden (charakter geht verloren)
• Buchstabenabstände unausgeglichen (unruhiges Schriftbild)

• filigrane Schrifen
• feine duktusunterscheidungen
• kursive Schnitte
• Schreibschriften 
• schmale Laufweiten 
• gebrochene Schriften

1. Verdana
2. Arial
3. Sans-serif
4. Trebuchet MS
5. Bitstream Vera Sans
6. Tahoma
7. Georgia
8. Helvetica
9. Courier

haben eine genaue Rasterung (Entweder 0 od 1)

Vorteile[Bearbeiten]

• Die Darstellung von Bitmap-Schriften erfolgt schneller, da bei Vektor-Schriften zuerst eine Rasterung vorgenommen werden muss, bevor diese dargestellt werden können.
• Die Darstellung von Bitmap-Schriften ist einfacher zu implementieren.
• Wenn die Bitmap-Schrift in einer Größe angezeigt werden soll, in der die Zeichen vorliegen, ist eine pixelgenaue Darstellung möglich.
• sind nicht gut skalierbar 

Nachteile[Bearbeiten]

• Zur Darstellung von verschiedenen Schriftgrößen muss die Schriftart entweder mit Interpolationsverfahren skaliert werden, was einen Qualitätsverlust mit sich bringt, oder in verschiedenen Größen vorliegen, wodurch der Speicherbedarf entsprechend ansteigt.
• Sofern keine Datenkompression eingesetzt wird, wächst der Speicherbedarf quadratisch mit der Schriftgröße (bei doppelter Schriftgröße besteht jeder Buchstabe aus viermal so vielen Pixeln).

Zb für Taschenrechner, Autoradios

Kantenglättung der Schriftkontur, druch ergänzung zusätzlicher Pixel zwischen Schrift und HG-Farbe

+ Auge nimmt pixelige Kontur nicht wahr

- Weichzeichnung, Verlust von Schärfe

 um die Darstellungsqualität von Texten auf Bildschirmen mit geringer Auflösung zu verbessern. Hints bewirken, dass die Umrisse der Schriftzeichen bei der Darstellung exakt an den Pixelkanten ausgerichtet werden,

Um den Schriftcharakter zu behalten werden senkrechte od waagrechte Linien immer mit gleicher Pixelgröße dargestellt  (zb Stamm bei I, T und H)

Müssen über Softwares definiert werden

ist ab 600 dpi nicht mehr nötig

Subpixel-Rendering (engl.) bedeutet Teilbildpunktwiedergabe und steht für eine Softwaretechnik, die die Darstellung von Text auf Farbbildschirmen verbessert. Dabei werden die Subpixel einzeln angesteuert, um schräge Kanten glatter erscheinen zu lassen.

Mathematische Beschreibung der Schriftkontur durch Bezierkurven

- Man brauch eine Schriftverwaltungssoftware

Dpi wie dots per inch sind die Tintentropfen (per inch) die auf dem Papier kommen beim drucken. Die dpi (dots/inch) muss grösser sein als die dpi/ppi (pixel/inch), sonst bekommst du einen ärmlichen Abdruck. Ein Abdruck hat zum Beispiel 300 pixels per inch und 1200 dots per inch. In diesem Fall hat jede Pixel im Durchschnitt 4 (Tinten)dots.

Pixels per inch = Pixel pro Inch = Pixel pro Zoll

SW = 1 Bit 
Graustufen = 8 Bit
RGB = 24 Bit (3x8)
CMYK = 32 Bit (4x8)

1. Das ist die kleinste Informationseinheit. In Symbolen als 0 oder 1 dargestellt. 
2. 8 Bit
3. 1024 Byte

1. vorher Browsertests machen
2. Barrierefrei! = verschiedene Browserversionen (alte Browser, Internet Explorer, neue Browser) testen
3. Weiche/Hack = stellt Standbild dar wenn Browser alt / kein Java-Script vorhanden, rechnet die Seite herunter, nur wichtigste Sachen
4.  Parallex-Scrolling ist NICHT barrierefrei!

 W3C-Standards für absolute barrierefreie Website (World Wide Web Consorcium)

• statisch = jede Seite ist eine einzelne, separate Seite für sich im System, physisch, HTML-, und Programmierungskenntnisse sind erforderlich, um die Website zu aktualisieren
• jeder klickbare Zustand ist als Einzelseite angelegt & die Dateien miteinander verlinkt

• dynamisch = eine Adresse wird abgerufen; Inhalte werden dargestellt, CMS, eine Einzelseite, Daten werden laufen angefüllt, Blogsystem, wird über Datenbank gesteuert & aktualisiert

Content Management System = (joomla, Typo3, WordPress, Contaio)

• System, das zu lässt, von aussen auf einzelne Seiten zuzugreifen und Daten verändern (Front-End: Benutzer kann sich einloggen, Daten löschen oder hinzufügen oder ändern)
•  mehrere Benutzer möglich

• Animationsprogramm, Autorenprogramm (man kann mit Action-Script selber beeinflussen & entwickeln auf Abläufe usw.)
• ergibt eine Datei .fla, .swf
• schlecht suchmaschinenoptimiert, man braucht zusätzliches Programm um die Datei anzusehen (Flash-Player) -> Apple verweigert, nicht barrierefrei
• erste Website in Flash; Hillman Curtis für Macromedia

• Hyper Text Markup Language 
• Beschreibungssprache für Webinhalte, kein Befehl dahinter, bezeichnet / beschreibt
• keine Code-Sprache wie bsp Java-Script oder Actionscript

• Seiteneinteilung, welche nicht sichtbar ist
• schnellerer Bildaufbau für austauschbare Seitenelemente
• Seitenelemente die nicht wechseln, sondern stehen bleiben
• Im Frameset werden alle Seiten, die zu einer Website gehören, zusammengefasst
• Frameworks: Slideshows, alle Elemente werden eingebaut

lange Werbebanner, Infobanner, meist auf der rechten Seite

• fotocommunity, facebook, twitter, instagram, social media
• Wenn User mitbeteiligt sind an den Inhalten, abstimmen, gründen

• HTML-Seite ist barrierefrei, suchmaschinenfreundlich, lädt schneller
• Flash-Site braucht Flash-Player, ist oft gross und träge, wird im Webdesign nicht mehr eingesetzt, aber bei Games oder grossen firmeneigenen Websiten mit Animationen / Games usw

• 960 Pixel breit, bei Desktop bis 1440 Pixel (beliebt: 1280 Pixel)
• 480 Pixel breit für iPhone

• Header/Kopf, Navigation, Inhalt/Content, Footer
• (Seiteninformation)

• Webschriften (fontsquirrel usw) .wof (web-open-fonts)
• viele TrueType-Fonts
• Verdana, Georgia, Lucida, Trebuchet: sind breiter gezeichnet, hohe x-Höhe, offene Punzen, allgemein weite Buchstaben

• unterschiedlicher Inhalt:
• Website (ruft Website ab auf Browser)
• Programm (xcode, wird eingebunden)
• News App (ruft Datenbank ab, generiert ständig neue Informationen)
• PDF (Download, E-Reader bsp NZZ-Sonntag)
• DPS (Content-Viewer, Bibliothek, Magazin)

• Usability gute Benutzerführung
• Accessability gute technische Führung
• klare Struktur, Konzept

• unsichtbare Schaltfläche, bei Rollover oder Klick wird etwas sichtbar (Textfeld, neue Website), sensitiv
• nicht barrierefrei

• Im Photoshop genau mit Hilfslinien unterteilen
• mit Slice-Werkzeug jeden Bereich aufteilen und in Einzelteile abspeichern, nicht ein grosses Bild
• von oben links nach rechts
• diese Bilder kann man für das Layout verwenden

• Login = einloggen / anmelden mit Passwort und Benutzername
• Link = Verknüpfung mit einer Datei / Website
• Domain = Webadresse
• Weblog = Blogsystem im Web, Web-Tagebuch, hierarchisch aufgebautes Magazin
• Homepage = erste Seite einer Website / Internetauftritt

• Die Skriptsprache zur Einbindung von Animationen im Webdesign
• alles was sich bewegt und dynamisch ist wurde mit Java-Script gemacht (Slideshows, Verschiebungen der Navigationen usw)

Firefox, Safari, Google Chrome, Internet Explorer, Opera