Benutzerschnittstellen (einführend, GUI-Frameworks)

Meixner: Die Optimierung der Interaktion zwischen Menschen und Computern ist seit vielen Jahrzenten ein essentielles Thema bei der täglichen Arbeit. Auch heute erfolgt die Interaktion in den meisten Fällen noch über grafische Benutzungsschnittstellen. Die Interaktion des Menschen mit einem Computer über multimodale Benutzungsschnittstellen (Kombination und parallele Nutzung verschiedener Sinneskanäle zur Übermittlung von Informati-onen) gewinnt allerdings zunehmend an Bedeutung bei der Bedienung von Computern bzw. interaktiven Systemen.
Benutzerschnittstellen (allg.) Was meint Schnittstelle?

Siehe auch: de.wikipedia: Benutzerschnittstelle

Teste auch: Quiz: System

Benutzerschnittstellen (Informatik) Was meint Schnittstelle?

Die Wechselwirkungen zwischen Mensch und Maschine ist mit transformierenden Übergaben verbunden. Maschinell erstellte Bitmuster müssen der sinnliche Wahrnehmungen zugänglich ausgegeben werden. Zeichen-, Gesten-orientierte Eingaben von Menschen müssen in eine elektronische Form kodiert werden. Ebenso auch sprachbasierte Eingaben.

Eine strikte Trennung zwischen der Darstellung der Benutzungsschnittstelle und der Applikationslogik hat zahlreiche Vorteile (siehe z.B. de.wikipedia: Model-View-Controller - Paradigma).

Es gibt sprachbasierte/anfaßbare/zeichenorientierte/wahrnehmbare Benutzerschnittstellen, Grafische Benutzeroberflächen, Graphical User Interface, Window manager, Leittechnik, Prozessvisualisierung, speicherprogrammierbare Steuerung, Programmable Logic Controller, Computergestützte Benutzerschnittstelle, Usability Testing, Benutzerfreundlichkeit und Gebrauchstauglichkeit, Mensch-Maschine-Schnittstelle, Mensch-Computer Interaktion, Kognitive Ergonomie, System-Ergonomie, Software-Ergonomie, Human–computer interaction, Human Interface, User Interface, Human Computer Interaction Design

Nach Myers und Rosson benötigt die Benutzungsschnittstelle für verschiedener Applikationen ca. 48% des Quellcodes, ca. 45% der Entwicklungszeit, ca. 50% der Implementierungszeit und ca. 37% der Wartungszeit ( sieh z.B. Gesellschaft für Informatik Modellbasierte Entwicklung von Benutzungsschnittstellen )



Applikationen (allg.) Welche Art von Applikationen?

Ein Anwendungsprogramm (kurz Anwendung = Applikation, engl. application software) braucht ein Betriebssystem und eine geeignete Laufzeitumgebung. Ein Anwendungsprogramm kann als eine (Zwischen-) Schicht zwischen der Anwendung selbst (dem jeweiligen Anwendungsfall) und dem Betriebssystem betrachtet werden. Ein Anwendungsprogramm kann lokal auf einem Arbeitsplatzrechner installiert sein (Desktop-Anwendung) oder auf einem Server laufen. Der Arbeitsplatzrechner kann den Server und Serverdienste nutzen (Client-Server- bzw. Web-Anwendung).



   Client-Server-Webanwendung (Bildquelle: wikipedia)
,

de.wikipedia: Webanwendung
,

en.wikipedia: Web_application



Bibliotheken und Frameworks (externe Links) Welche ist "am Besten"?

Es gibt zahlreiche JavaScript-Frameworks (Stand 2015), wie z.B.

de.wikipedia: Framework's (allg) ( de.wikipedia ),
JavaScript-Frameworks ( de.wikipedia ), Webframeworks-Liste ( en ),
GWT ( de.wikipedia: Google_Web_Toolkit ),
YUI ( de.wikipedia: Yahoo_User_Interface_Library )

Der technologischer Wandel bedingt in der Software-Entwicklung Anpassungen (manuelle/automatisierte Strukturverbesserung, Programm-Quelltext-Anpassungen, funktionale Erweiterungen), wobei das beobachtbaren Programm-Verhalten oft beibehalten/aktualisiert und die Code-Lesbarkeit, -Verständlichkeit, -Wartbarkeit und -Erweiterbarkeit verbessert wird. Die Restrukturierung oder Umgestaltung von Quellcode wird de.wikipedia: Refactoring genannt.

Einige Links:
Bibliotheken (Libraries): DOJO, yui Yahoo, Prototype, Jquery, MochiKit, Ext JS, Open Rico, Qooxdoo, Moo Tools, X library, Fork, OAT, AJS

Effekte (Effects): Script.aculo.us, MooFX, Bytefx, Prototype Windows, Lightbox, Lytebox, Leightbox, GreyBox, Behaviour, Curvy Corners, Nifty Corners, jsScrolling

Tools: XML.ObjTree XML parser, jsvalidate, Form validation, Store json data in cookies, Livepipe Tabs, BSN AutoSuggest, BarelyFitz Tabs, overLIB Tooltips, Kryogenix Sortable tables, FD Sortable tables, JDV Sortable tables, TableKit

Grafik (Graphing): Plotkit, Plotr, EJSChart, TimePlot, Ajax-MGraph

Kryptographie (Math/Cryptography): Sylvester, JavaScrypt, MD5, RSA

AJAX: Bajax, SACK, Plex, Taconite, Sajax, jx, libXmlRequest, Spry (Adobe)

Andere (Other): JSlibs, DOJO shrinksafe - compression, JSmin - compression, JS flash version detector, Open JSAN, MiniAJAX, Google trends of the major players, Smooth Gallery, Slideshow, Flickrshow



Browser (Bemerkungen, externe Links) Typische Browser (Stand 2011)

W3C-Empfehlungen haben eine hohe Verbindlichkeit aber keine gesetzliche Gültigkeit. W3C-Empfehlungen sind patentfreie, unparteiische, plattformunabhängige Quasistandards (bisherige Recommendations des W3C: WCAG, XHTML, SMIL, OWL, XML, XML Schema, DOM, XSL, XSLT, RSS, CSS, XPointer, HTML, PNG, SVG, RDF, XLink, VoiceXML, XPath, XQuery, MathML, XForms).

Hier Übersichtsartikel de.wikipedia: Webbrowser oder en.wikipedia: Web_browser
Es gibt Browsertests (siehe z.B. wikipedia: Acid-Browsertests ), die eine Standardkonformität meßbar machen möchten.

Der Acid3-Browser-Test möchte die Konformität von "dynamic Web applications" messen, insbesondere DOM2 Core, DOM2 Events, DOM2 HTML, DOM2 Range, DOM2 Style (getComputedStyle, …), DOM2 Traversal (NodeIterator, TreeWalker), DOM2 Views (defaultView), ECMAScript, HTML4 (<object>, <iframe>, …), HTTP (Content-Type, 404, …), Media Queries, Selectors (:lang, :nth-child(), combinators, dynamic changes, …), XHTML 1.0, CSS2 (@font-face), CSS2.1 ('inline-block', 'pre-wrap', parsing…), CSS3 Color (rgba(), hsla(), …), CSS3 UI ('cursor'), data: URIs, SVG (SVG Animation, SVG Fonts, …)

Der "Weg der Browser-Karawane durch die Zeit" wird an der "Rückwärtskompaktibilität" zu alten Homepages und deren aktueller Anzeige durch unterschiedliche Browser-Versionen sichtbar. Um unschöne Darstellungsgeffekten zu vermeiden gibt es z.B. Conditional Comments (kurz CC) , die als Browserweichen eingebunden werden können. Style-Beispiel für den IE:

<style type="text/css" >
  @import url("/css/styles.css");
</style >
<!--[if gte IE 5]>  <link rel="stylesheet" type="text/css" href="/win_ie.css" /> <![endif]-->
<!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="/css/win_ie6.css" /> <![endif]-->
<!--[if IE 7]>  <link rel="stylesheet" type="text/css" href="/css/win_ie7.css" <![endif]-->

wikipedia: Timeline_of_web_browsers , en.wikipedia: Timeline_of_web_browsers