User Interfaces/ HCI Media Queries Liesa Herbst (0720787) / Margot Dum (0721251)

Präsentation zum Thema: "User Interfaces/ HCI Media Queries Liesa Herbst (0720787) / Margot Dum (0721251)"—  Präsentation transkript:

1 User Interfaces/ HCI Media Queries Liesa Herbst (0720787) / Margot Dum (0721251)

2 Ablauf 1.Das Web & User Interfaces 2.Sonderform Media Queries o Definition o Geschichte o MQs in CSS2 und CSS3 3.Zukunftsprognosen

3 Das Web - "the same, old new medium" Neue Medien folgen Formaten bestehender alter Medien (Bps.: TV folgte anfangs dem Format des populären Radios = "Radio mit Bildern") Entwicklung des Webs aus den Printmedien o starker Einfluss dieser Designsprache o Suche nach der eigenen "Natur" des Webs o User Interface als Lösung ?!

4 User-Interfaces I User-Interfaces bieten dem Nutzer die Möglichkeit mit einem Programm oder Rechner einen Datenaustausch durchzuführen. = Benutzerschnittsstelle Verschiedene Interaktionslevel: CLI - Command Line Interface TUI - Text User Interface VUI - Voice User Interface GUI - Graphical User Interface

5 User-Interfaces II Benutzeroberfläche als wesentlicher Faktor für die Interaktion des Nutzer mit dem Computer (HCI - Human Computer Interaction) Media Queries als Form des User-Interface

6 " Good User Interface Design can make a product easy to understand and use, which results in greater user acceptance. " http://www.toonpool.com/cartoons/HCI_102895

7 Das iPad und sein User-Interface

8 Media Queries "In its essence a media query consists of a media type and an expression to check for certain conditions of a particular media feature." (http://mediaqueri.es/about/) Vorteile: Layouts an die verschiedenen Endgeräte anpassen, ohne den Content zu verändern größere Kontrolle bei der Darstellungen auf verschiedenen Endgeräten breite Anwendung (Smartphones, iPhone, Tablets, Desktop etc.)

9 Die Geschichte der Media Queries Experiment im Blog "themaninblue": `resolution dependent layout` Idee: Hilfestellung für Webdesigner, anpassen des Layouts an die jeweilige Anzeigefläche Ziel: Vorausdenkendes Design, anwendbar auf ältere & neuere Technologien

10 Die Geschichte der Media Queries- Von HTML zu CSS HTML-Websiten gut strukturiert, allerdings wenig ansprechend Stilesheets (CSS) als unmittelbare Ergänzung zu HTML unterstützen die professionelle Gestaltung des Web-Auftritts W3C - Standart

11 Media Types in CSS2 Stylesheets mediumspezifisch anzuwenden Zuordnung für bestimmten Medientyp Anwendung für EINE Ausgabeart z.B.:

12 Media Types in CSS2

13

14 Media TypesMedia Queries Weiterentwicklung der

15 Media Queries in CSS3 Erweiterung der Media Types logische Ausdrücke, welche die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen = Media Type mit mindestens einem weiteren Ausdruck z.B.: media=”only screen and (color)” (nur Farbbildschirme) Abfragen von Eigenschaften und Fähigkeiten von Ausgabegeräten Gezieltes CSS-Code-Schreiben für bestimmte Situationen Maßgeschneiderte Präsentation von Inhalten, je nach Ausgabegerät (OHNE Inhalt selbst zu verändern)

16 Media Queries in CSS3 min-/max-width: Breite des Browserfensters min-/max-height: Höhe des Browserfensters min-/max-device-width: Bildschirmbreite min-/max-device-height: Bildschirmhöhe orientation : Ausrichtung (portrait / landscape) min-/max-aspect-ratio: Seitenverhältnis des Browserfensters (beispielsweise 16/9 oder 1280/720) min-/max-device-aspect-ratio: Seitenverhältnis desBildschirmes min-/max-color: Bits pro Farbkomponente auf dem Ausgabebildschirm (beispielsweise @media all and (min-color: 1) min-/max-color-index: Anzahl der Einträge in der Farbtabelle des Gerätes min-/max-monochrome: Anzahl der Bits pro Pixel des monochromatischen Bildschirmes min-/max-resolution: Auflösung des Bildschirmes scan: Abtastart des Ausgabebildschirmes, progressive / interlaced (beispielsweise @media tv and (scan: progressive) grid: Unterscheidet, ob der Ausgabebilschirm “grid” oder “bitmap” benutzt. Terminals oder Telefonbildschirme mit nur einer Schriftart sind beispielsweise grid-basierend.

17 Media Queries in CSS3 Media Query - Beispiel screen and (max-width: 300px) Medientypscreen and (max-width: 300px) Verknüpfungscreen and (max-width: 300px) Ausdruckscreen and (max-width: 300px) Media Query = Medientyp + Verknüpfung + Ausdruck

18 Für kleinere Displays http://www.alistapart.com/articles/responsive-web-design/

19 Media Queries in CSS3 Beispiel für ein „fluid layout“, basierend auf Media Queries HP von John Hicks http://hicksdesign.co.uk/journal/finally-a- fluid-hicksdesignhttp://hicksdesign.co.uk/journal/finally-a- fluid-hicksdesign

20 Media Queries in CSS3

21 Zukunftsprognosen zunehmende Konvergenz der Medien Webnutzung mittels Smartphones, iPhone, Tablets, Desktops etc. Mobile Web-Nutzung als Standart "In zwei oder drei Jahren wird der mobile-support Standart für jede Site sein." (Paul-Peter Koch, 2010) Veränderungen in der Welt der Werbung Media Queries unterstützen den Trend hin zu full- browser backgrounds

22