Erhöhte User Experience durch moderne Webtechnologien

Erhöhte User Experience durch moderne

WebtechnologienOliver Wana

Mittwoch, 18. November 2009

Geschichte• HTML (ohne Versionsnummer, 3. November 1992): Die

Urversion, die sich nur an Text orientierte.• HTML (ohne Versionsnummer, 30. April 1993): Zu Text kommt

neben Attributen wie fette oder kursive Darstellung die Bildintegration dazu.

• HTML 2.0 (November 1995): Die mit RFC 1866 definierte Version führt u. a. Formulartechnik ein. Der Status dieses Standards ist „HISTORIC“. Auch die Vorgänger sind veraltet.

• HTML 3.0: Die Version erscheint nicht, weil sie mit der Einführung des Netscape-Browsers in der Version 3 bereits vor der Veröffentlichung veraltet ist.

• HTML 3.2 (14. Januar 1997): Neu in dieser Version sind zahlreiche Features wie Tabellen, Textfluss um Bilder, Einbindung von Applets.

• HTML 4.0 (18. Dezember 1997): Mit dieser Version werden Stylesheets, Skripte und Frames eingeführt. Auch eine Trennung in Strict, Frameset und Transitional erfolgt. Am 24. April 1998 erscheint eine leicht korrigierte Version dieses Standards.

• HTML5 (Working Draft, 23. April 2009): HTML5 schafft auf Basis von HTML 4.01 und XHTML 1.0 ein neues Vokabular. Die zu HTML gehörende DOM-Spezifikation wird ebenfalls überarbeitet und erweitert.

Wikipedia:

Mittwoch, 18. November 2009

Mittwoch, 18. November 2009

Mittwoch, 18. November 2009

Mittwoch, 18. November 2009

Mittwoch, 18. November 2009

Mittwoch, 18. November 2009

Vorgehensweise

• Dies ist nur ein Ausschnitt.

• Bewertung der Neuerungen

Mittwoch, 18. November 2009

Oberflächengestaltung

• CSS3

• background 2.0

• Schatten (Schriften + Box)

• Verläufe

• Runde Ecken

• CSS Selektoren

Mittwoch, 18. November 2009

background 2.0

• Mehrere Hintergrundbilder (background: ..., ...)

• Hintergrundbildgröße (background-size)

• DEMO: http://whereswalden.com/files/mozilla/background-size/page-cover.html

•

Mittwoch, 18. November 2009

Schatten

• Boxschatten (box-shadow)

• DEMO: http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html

• Textschatten (text-shadow)

• DEMO: http://webdemar.com/webdesign/xhtml-css/beeindruckende-effekte-mit-der-css-eigenschaft-text-shadow/#beispiele2

Mittwoch, 18. November 2009

Verläufe

• linear (background: linear-gradient)

• radial(background: radial-gradient)

Mittwoch, 18. November 2009

Runde Ecken

• Abgerundete Ecken (border-radius)

• DEMO: http://www.css3.info/preview/rounded-border/

Mittwoch, 18. November 2009

CSS Selektoren

• CSS-Selektoren

• mehr als nur . und #

• Zebra - table tr:nth-child(2n+1)

• DEMO: http://www.css-cafe.de/ws_zebra-tabelle.php

Mittwoch, 18. November 2009

Effekte

• CSS-Animation

• SVG-Effekte

Mittwoch, 18. November 2009

CSS-Animation

• Animation von Übergängen

• DEMO-Safari: http://webkit.org/blog/138/css-animation/

div { opacity: 1; transition: opacity 1s linear;}

div:hover { opacity: 0;}

Mittwoch, 18. November 2009

SVG-Effekte

• Benutzung von SVG-Effekten

• DEMO: http://people.mozilla.org/~roc/filter.xhtml

<style>.target { mask: url(#m1); }</style> <svg:svg height="0"> <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> <svg:stop stop-color="white" offset="0"/> <svg:stop stop-color="white" stop-opacity="0" offset="1"/> </svg:linearGradient> <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/> </svg:mask> </svg:svg>

Mittwoch, 18. November 2009

UI-Elemente

• Canvas

• SVG

• Neue input-Typen

Mittwoch, 18. November 2009

SVG

• SVG - Vektorzeichnungen

• <svg>

• Raphael - http://raphaeljs.com/

Mittwoch, 18. November 2009

Canvas

• Canvas - Pixel zeichnen

• <canvas>

• DEMO: http://www.paulbrunt.co.uk/bert/

Mittwoch, 18. November 2009

Neue input-Typen

• date

• time

• email

Mittwoch, 18. November 2009

Verbesserte Webanwendungen

• Offline

• SQLite

• Hintergrundprozesse

• Google Gears

Mittwoch, 18. November 2009

DEMO-APP

• http://labs.thecssninja.com/font_dragr/

Mittwoch, 18. November 2009

Fragen und Diskussion

Mittwoch, 18. November 2009