Erhöhte User Experience durch moderne Webtechnologien
-
Upload
reviloton -
Category
Technology
-
view
1.023 -
download
1
Transcript of 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
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