Begriffe: (grafische) Benutzeroberfläche, (grafische) Benutzerschnittstelle,

Größe: px

Ab Seite anzeigen:

Download "Begriffe: (grafische) Benutzeroberfläche, (grafische) Benutzerschnittstelle,"

Innozenz Frei
vor 8 Jahren
Abrufe

1 Gestaltung der Benutzeroberfläche Begriffe: (grafische) Benutzeroberfläche, (grafische) Benutzerschnittstelle, GUI (graphics user interface), Drei Grundsätze vorab: Halten Sie sich, wo immer möglich, an Standards. Das erleichtert dem Kunden die Einarbeitung und verhindert Fehlbedienungen. Achten Sie die Muttersprache des Kunden, vermeiden Sie denglisch. Gestalten Sie die Oberfläche so einfach, klar und logisch gegliedert wie möglich. und bedenken Sie: Die besten Programme sind diejenigen, für die man kein Handbuch benötigt! ( Intuitive Bedienung )

Das erleichtert dem Kunden die Einarbeitung und verhindert Fehlbedienungen.

2 Zu den (Quasi-)Standards gehören u.a.: Hauptmenüzeile Werkzeugleiste ( tool bar ) ggf. Statuszeile unten Alle Parameter mit sinnvollen Voreinstellungen ( defaults ) Fehlerhafte Eingaben unterbinden Buttons OK / Abbrechen verknüpft mit Eingabe- / Esc-Taste Stringente Anordnung und Beschriftung von Buttons Warnmeldungen (z.b. bei Speichern, falls die Datei bereits besteht) Online-Hilfe per Menüeintrag? bzw. F1- Taste Tipp: Sehen Sie sich vergleichbare kommerzielle Produkte an.

OK / Abbrechen verknüpft mit Eingabe- / Esc-Taste Stringente Anordnung und Beschriftung von Buttons Warnmeldungen (z.b. bei Speichern, falls die Datei bereits besteht) Online-Hilfe per Menüeintrag?

3 Schriftart, -größe, -farbe Es beginnt mit Kleinigkeiten wie der Wahl von Schriftart und Schriftgröße sowie den Farben. Verwenden Sie eine gut lesbare Standardschrift (z.b. Arial), Schriftgröße mindestens 10 Punkt, und bleiben Sie dabei in allen Menüs bzw. Fenstern. Setzen Sie Fettdruck und Kursiv äußerst sparsam ein. Sorgen Sie für guten Kontrast. Optimal ist schwarze Schrift auf weißem Grund. Dies dagegen ist Murks. Sie finden zu diesem Thema viele Hinweise auch im Internet, z.b. hier:

Fenstern. Setzen Sie Fettdruck und Kursiv äußerst sparsam ein. Sorgen Sie für guten Kontrast. Optimal ist schwarze Schrift auf weißem Grund.

4 Weitere Details: Startfenster (und weitere Fenster) skalierbar Nicht aktivierbare Optionen und Icons gegraut (oder gar nicht anzeigen) Unterstützung von Funktionstasten und Maus, soweit sinnvoll und üblich (Beispiele: F1-Taste für Online-Hilfe, gedrücktes Mausrad für Zoom bei Grafik) Unterstützung von Tastenkombinationen (z.b. Speichern aufrufbar auch per Alt - plus S -Taste Bei Programmen mit mehreren Werkzeugleisten sollte eine Auswahl getroffen und abgespeichert werden können ( Konfiguration ) Spielereien vermeiden! (z.b. Hintergrundfarbe von Standardfenstern einstellbar). Merke: Man beschränke die Funktionen grundsätzlich auf das geforderte Minimum

5 Grafik: Allgemeine Einführung Bereits der Begriff GUI ( graphics user interface ) deutet an, dass es heute praktische keine Software mehr gibt, die nicht zumindest mit einer grafischen Benutzeroberfläche versehen ist. Deren Standardelemente wie z.b. Buttons können sehr einfach mittels Bibliotheksfunktionen erzeugt werden. Wir wollen uns nachstehend mit echter Grafik beschäftigen, also nicht mit quasi-grafischen Elementen der GUI, sondern mit Bildern bzw. Zeichnungen. Wir unterscheiden generell zwei Arten von Grafiken: Rastergrafik (Bilder, Fotos) Vektorgrafik (Zeichnungen)

Wir wollen uns nachstehend mit echter Grafik beschäftigen, also nicht mit quasi-grafischen Elementen der GUI, sondern mit Bildern bzw.

6 Rastergrafik: Das digitale Bild 1 1 Spalten Zeilen Bildelement, Bildpunkt (Pixel) Endliche geometrische und radiometrische Auflösung Immer rechteckig Alle Pixel haben einen Wert

7 Das digitale Bild: Radiometrie Anzahl der Farben ( Bildradiometrie oder Farbtiefe) Bits pro Anzahl Bezeichnung Pixel Farben = 2 Binärbild = = / 3x8 Bit, Echtfarbbild ca. 16,7 Mio. Es gibt auch noch andere Auflösungen, z.b. 4, 10, 12, 32, 48 Bit

------------------------------------------------------------------------------------ 1 2 1

8 Das digitale Bild: Wiedergabe auf dem Bildschirm Uh6K & w$11a (8 Bit) 8&TT%*x>\g9k (24 Bit) ASCII-Code: & = 38 Wert rot grün blau blau rot grün Farbpalette Anzeige (Bildschirm) ( additive Farbmischung )

Wert rot grün blau 37 38 120 187 92 39 blau rot grün

9 Das digitale Bild besteht demzufolge üblicherweise aus zwei Teilen: (1) einem Vorspann ( Header ), der Informationen zum Bild enthält (z.b. Anzahl der Zeilen und Spalten, Farbtiefe, ggf. Farbpalette) (2) und den eigentlichen Bilddaten (Pixelwerten) Beispiel BMP: Der Header hat eine feste Länge von 54 Byte. Im Falle eines 8-Bit- Bildes kommt die Farbpalette (1024 Byte) hinzu, also 1078 Byte.

Farbpalette) (2) und den eigentlichen Bilddaten (Pixelwerten) Beispiel BMP: Der Header hat eine

10 Das digitale Bild zeichnet sich also u.a. dadurch aus, dass es sehr speicherintensiv ist. Wenn Sie beispielsweise mit einer 12-Megapixel-Digitalkamera ein Bild machen, hat dieses z.b x 3000 Pixel (= rund 12 MB), und für jedes Pixel werden 3 Bytes benötigt (RGB) ergibt 36 MB!! Man hat sich demzufolge seit vielen Jahren mit dem Thema Datenkompression beschäftigt. In der frühen Zeit der EDV ging es vor allem darum, Speicherplatz zu sparen, heute geht es mehr um schnellen Datentransfer (Internet) und schnellen Seitenaufbau. Zwei grundlegende Ansätze: Verlustfreie Kompression Verlustbehaftete Kompression

! Man hat sich demzufolge seit vielen Jahren mit dem Thema Datenkompression beschäftigt.

11 Ein einfaches Beispiel für verlustfreie Kompression: Lauflängencodierung ( run-length coding ) Hier ein Ausschnitt aus einem Bild: Für diesen Teil des Bildes (13 Pixel) werden 13 Byte benötigt. Falls nun mehrere benachbarte Pixel denselben Wert haben, könnte man die doch zusammenfassen, nämlich z.b. so: also jeweils Anzahl (1 Byte) plus Farbwert (1 Byte), hier folglich 10 Byte statt 13 Byte. Konsequenzen?

Falls nun mehrere benachbarte Pixel denselben Wert haben, könnte man die doch zusammenfassen, nämlich z.b. so:.

12 Konsequenzen: Das Maß der Kompression hängt sehr stark von der Beschaffenheit des Bildes ab. Ein starke Kompression ist bei Zeichnungen zu erwarten (z.b. wenige schwarze Linien auf weißem Grund), wohingegen bei echten Fotos (z.b. Landschaften) die Ergebnisdatei im Extremfall doppelt so groß sein kann wie das Ausgangsbild! Obwohl es intelligentere verlustfreie Verfahren gibt als die Lauflängencodierung, wird doch klar, dass eine wirklich verlustfreie Kompression bei realen Bildern kaum zu schaffen ist. Man hat deshalb verschiedene Verfahren entwickelt, bei denen der Verlust zumindest optisch kaum erkennbar ist und dennoch eine gute Kompressionsrate erreicht werden kann.

Obwohl es intelligentere verlustfreie Verfahren gibt als die Lauflängencodierung, wird doch klar, dass eine wirklich verlustfreie Kompression bei realen Bildern kaum zu

13 JPEG, mittlere Kompression 12,41 KB JPEG, starke Kompression 6,73 KB Original: 240 KB!

14 Vektorgrafik Zur leichteren Unterscheidung zwischen einem digitale Bild (Rastergrafik) und der sogenannten Vektorgrafik kann man sich für letzteres den Begriff Zeichnung merken. Eine Vektorgrafik ist üblicherweise zusammengesetzt aus grafischen Primitiven, nämlich Punkten, Linien und Flächen (= geschlossene Linienzüge, ggf. mit Füllung). Da wir hierbei kein Pixelraster haben, erfolgt die Positionierung aller Elemente über Koordinaten (x, y). Diesen Geometrieinformationen können dann Sachinformationen zugeordnet werden wie z.b. Strichstärke, Farbe, Füllmuster usw. Zur geometrischen Definition von Elementen gehören neben den Koordinaten mitunter weitere Angaben. Beispiel Kreis: Mittelpunkt (x, y) und Radius.

Da wir hierbei kein Pixelraster haben, erfolgt die Positionierung aller Elemente über Koordinaten (x, y).

15 So könnte eine Vektorgrafik-Datei im Prinzip aussehen: Kennung (Punkte, Linie, ) Linienende x y z

040 6 995.484 6002.450 13.015 7 988.701 6021.350 13.040... 9009-999999.000-999999.000 1.000 1 1061.188 6347.194 19.

16 Vorteile der Vektorgrafik gegenüber Rastergrafik: Üblicherweise deutlich geringerer Speicherbedarf Freie Skalierbarkeit ohne Qualitätsverlust (Zoom) Zeichnungselemente sind zusammenhängende Objekte und können als solche leicht komplett gelöscht / dupliziert / verschoben werden Die Konvertierung von Vektor nach Raster geht problemlos, der umgekehrte Weg ist schwierig Nachteile gegenüber Rastergrafik: Echte Bilder können so nicht gespeichert werden. Digitale Fotos werden immer und nur als Rastergrafiken behandelt. --- Beispiel für das Arbeiten mit Vektorgrafiken: MS PowerPoint.

Konvertierung von Vektor nach Raster geht problemlos, der umgekehrte Weg ist schwierig Nachteile gegenüber Rastergrafik: Echte Bilder können so

17 Und hier noch ein einiges Links zum Thema Grafikprogrammierung in Java: Uhrhan-JavaGUI.pdf

pdf http://www.medien.ifi.lmu.de/lehre/ss07/mt/mtb2a.pdf http://www.willemer.

Ähnliche Dokumente

10%, 7,57 kb 20%, 5,3 kb 30%, 4,33 kb 40%, 3,71 kb 50%, 3,34 kb. 60%, 2,97 kb 70%, 2,59 kb 80%, 2,15 kb 90%, 1,62 kb 99%, 1,09 kb

10%, 7,57 kb 20%, 5,3 kb 30%, 4,33 kb 40%, 3,71 kb 50%, 3,34 kb. 60%, 2,97 kb 70%, 2,59 kb 80%, 2,15 kb 90%, 1,62 kb 99%, 1,09 kb Die Komprimierung: Die Abkürzung JPG (oder auch JPEG) steht für "Joint Photographic Experts Group". Dieses Bildformat ist nach der Expertengruppe, die es erfunden hat, benannt. Die Komprimierung empfiehlt