Erhöhte User Experience durch moderne Webtechnologien
-
Upload
reviloton -
Category
Technology
-
view
1.024 -
download
1
Transcript of Erhöhte User Experience durch moderne Webtechnologien
![Page 1: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/1.jpg)
Erhöhte User Experience durch moderne
WebtechnologienOliver Wana
Mittwoch, 18. November 2009
![Page 2: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/2.jpg)
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
![Page 3: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/3.jpg)
Mittwoch, 18. November 2009
![Page 4: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/4.jpg)
Mittwoch, 18. November 2009
![Page 5: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/5.jpg)
Mittwoch, 18. November 2009
![Page 6: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/6.jpg)
Mittwoch, 18. November 2009
![Page 7: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/7.jpg)
Mittwoch, 18. November 2009
![Page 8: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/8.jpg)
Vorgehensweise
• Dies ist nur ein Ausschnitt.
• Bewertung der Neuerungen
Mittwoch, 18. November 2009
![Page 9: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/9.jpg)
Oberflächengestaltung
• CSS3
• background 2.0
• Schatten (Schriften + Box)
• Verläufe
• Runde Ecken
• CSS Selektoren
Mittwoch, 18. November 2009
![Page 10: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/10.jpg)
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
![Page 11: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/11.jpg)
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
![Page 12: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/12.jpg)
Verläufe
• linear (background: linear-gradient)
• radial(background: radial-gradient)
Mittwoch, 18. November 2009
![Page 13: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/13.jpg)
Runde Ecken
• Abgerundete Ecken (border-radius)
• DEMO: http://www.css3.info/preview/rounded-border/
Mittwoch, 18. November 2009
![Page 14: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/14.jpg)
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
![Page 15: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/15.jpg)
Effekte
• CSS-Animation
• SVG-Effekte
Mittwoch, 18. November 2009
![Page 16: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/16.jpg)
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
![Page 17: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/17.jpg)
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
![Page 18: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/18.jpg)
UI-Elemente
• Canvas
• SVG
• Neue input-Typen
Mittwoch, 18. November 2009
![Page 19: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/19.jpg)
SVG
• SVG - Vektorzeichnungen
• <svg>
• Raphael - http://raphaeljs.com/
Mittwoch, 18. November 2009
![Page 20: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/20.jpg)
Canvas
• Canvas - Pixel zeichnen
• <canvas>
• DEMO: http://www.paulbrunt.co.uk/bert/
Mittwoch, 18. November 2009
![Page 21: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/21.jpg)
Neue input-Typen
• date
• time
Mittwoch, 18. November 2009
![Page 22: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/22.jpg)
Verbesserte Webanwendungen
• Offline
• SQLite
• Hintergrundprozesse
• Google Gears
Mittwoch, 18. November 2009
![Page 23: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/23.jpg)
DEMO-APP
• http://labs.thecssninja.com/font_dragr/
Mittwoch, 18. November 2009
![Page 24: Erhöhte User Experience durch moderne Webtechnologien](https://reader033.fdocument.pub/reader033/viewer/2022052908/55968fb01a28ab02438b45f1/html5/thumbnails/24.jpg)
Fragen und Diskussion
Mittwoch, 18. November 2009