Erhöhte User Experience durch moderne Webtechnologien

1.314 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.314
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Erhöhte User Experience durch moderne Webtechnologien

  1. 1. Erhöhte User Experience durch moderne Webtechnologien Oliver Wana Mittwoch, 18. November 2009
  2. 2. Geschichte Wikipedia: • 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. Mittwoch, 18. November 2009
  3. 3. Mittwoch, 18. November 2009
  4. 4. Mittwoch, 18. November 2009
  5. 5. Mittwoch, 18. November 2009
  6. 6. Mittwoch, 18. November 2009
  7. 7. Mittwoch, 18. November 2009
  8. 8. Vorgehensweise • Dies ist nur ein Ausschnitt. • Bewertung der Neuerungen Mittwoch, 18. November 2009
  9. 9. Oberflächengestaltung • CSS3 • background 2.0 • Schatten (Schriften + Box) • Verläufe • Runde Ecken • CSS Selektoren Mittwoch, 18. November 2009
  10. 10. 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
  11. 11. 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
  12. 12. Verläufe • linear (background: linear-gradient) • radial (background: radial-gradient) Mittwoch, 18. November 2009
  13. 13. Runde Ecken • Abgerundete Ecken (border-radius) • DEMO: http://www.css3.info/preview/ rounded-border/ Mittwoch, 18. November 2009
  14. 14. 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
  15. 15. Effekte • CSS-Animation • SVG-Effekte Mittwoch, 18. November 2009
  16. 16. CSS-Animation • Animation von Übergängen div { opacity: 1; transition: opacity 1s linear; } div:hover { opacity: 0; } • DEMO-Safari: http://webkit.org/blog/138/ css-animation/ Mittwoch, 18. November 2009
  17. 17. SVG-Effekte • Benutzung von SVG-Effekten <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> • DEMO: http://people.mozilla.org/~roc/ filter.xhtml Mittwoch, 18. November 2009
  18. 18. UI-Elemente • Canvas • SVG • Neue input-Typen Mittwoch, 18. November 2009
  19. 19. SVG • SVG - Vektorzeichnungen • <svg> • Raphael - http://raphaeljs.com/ Mittwoch, 18. November 2009
  20. 20. Canvas • Canvas - Pixel zeichnen • <canvas> • DEMO: http://www.paulbrunt.co.uk/bert/ Mittwoch, 18. November 2009
  21. 21. Neue input-Typen • date • time • email Mittwoch, 18. November 2009
  22. 22. Verbesserte Webanwendungen • Offline • SQLite • Hintergrundprozesse • Google Gears Mittwoch, 18. November 2009
  23. 23. DEMO-APP • http://labs.thecssninja.com/font_dragr/ Mittwoch, 18. November 2009
  24. 24. Fragen und Diskussion Mittwoch, 18. November 2009

×