SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
Erhöhte User Experience
                          durch moderne
                         Webtechnologien
                              Oliver Wana




Mittwoch, 18. November 2009
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
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
                                   div {
                                     opacity: 1;
                                     transition: opacity 1s linear;
                                   }

                                   div:hover {
                                     opacity: 0;
                                   }




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

Mittwoch, 18. November 2009
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
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

Weitere ähnliche Inhalte

Andere mochten auch

Smart Home with Reel Tech Technology (Remote Light Lifters)
Smart Home with Reel Tech Technology (Remote Light Lifters)Smart Home with Reel Tech Technology (Remote Light Lifters)
Smart Home with Reel Tech Technology (Remote Light Lifters)LEE Chang-Bin
 
[BLT] 특허검색 및 특허출원 방법 이상철변리사
[BLT] 특허검색 및 특허출원 방법 이상철변리사[BLT] 특허검색 및 특허출원 방법 이상철변리사
[BLT] 특허검색 및 특허출원 방법 이상철변리사JEONG HAN Eom
 
Enterprise 2.0 – Zehn Einblicke in den Stand der Einführung
Enterprise 2.0 – Zehn Einblicke in den Stand der EinführungEnterprise 2.0 – Zehn Einblicke in den Stand der Einführung
Enterprise 2.0 – Zehn Einblicke in den Stand der EinführungCentrestage
 
Corporate Venturing
Corporate VenturingCorporate Venturing
Corporate VenturingInventta
 
Cómo elaborar un plan de negocios
Cómo elaborar un plan de negociosCómo elaborar un plan de negocios
Cómo elaborar un plan de negociosLima Innova
 
How to Grow - A Personal Journey
How to Grow - A Personal JourneyHow to Grow - A Personal Journey
How to Grow - A Personal JourneyBizSmart Select
 

Andere mochten auch (7)

Smart Home with Reel Tech Technology (Remote Light Lifters)
Smart Home with Reel Tech Technology (Remote Light Lifters)Smart Home with Reel Tech Technology (Remote Light Lifters)
Smart Home with Reel Tech Technology (Remote Light Lifters)
 
КП River House в Одинцово, МО
КП River House в Одинцово, МОКП River House в Одинцово, МО
КП River House в Одинцово, МО
 
[BLT] 특허검색 및 특허출원 방법 이상철변리사
[BLT] 특허검색 및 특허출원 방법 이상철변리사[BLT] 특허검색 및 특허출원 방법 이상철변리사
[BLT] 특허검색 및 특허출원 방법 이상철변리사
 
Enterprise 2.0 – Zehn Einblicke in den Stand der Einführung
Enterprise 2.0 – Zehn Einblicke in den Stand der EinführungEnterprise 2.0 – Zehn Einblicke in den Stand der Einführung
Enterprise 2.0 – Zehn Einblicke in den Stand der Einführung
 
Corporate Venturing
Corporate VenturingCorporate Venturing
Corporate Venturing
 
Cómo elaborar un plan de negocios
Cómo elaborar un plan de negociosCómo elaborar un plan de negocios
Cómo elaborar un plan de negocios
 
How to Grow - A Personal Journey
How to Grow - A Personal JourneyHow to Grow - A Personal Journey
How to Grow - A Personal Journey
 

Ähnlich wie Erhöhte User Experience durch moderne Webtechnologien

FMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVGFMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVGVerein FM Konferenz
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Acquia
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickAmazee Labs
 
OpenLaszlo - Advanced RIAs for the OpenWeb
OpenLaszlo - Advanced RIAs for the OpenWebOpenLaszlo - Advanced RIAs for the OpenWeb
OpenLaszlo - Advanced RIAs for the OpenWebRaju Bitter
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert KaiserFMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert KaiserVerein FM Konferenz
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD
 

Ähnlich wie Erhöhte User Experience durch moderne Webtechnologien (12)

FMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVGFMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVG
 
HTML5
HTML5HTML5
HTML5
 
HTML und CSS
HTML und CSSHTML und CSS
HTML und CSS
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
OpenLaszlo - Advanced RIAs for the OpenWeb
OpenLaszlo - Advanced RIAs for the OpenWebOpenLaszlo - Advanced RIAs for the OpenWeb
OpenLaszlo - Advanced RIAs for the OpenWeb
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert KaiserFMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
 

Erhöhte User Experience durch moderne Webtechnologien

  • 1. Erhöhte User Experience durch moderne Webtechnologien Oliver Wana Mittwoch, 18. November 2009
  • 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
  • 8. Vorgehensweise • Dies ist nur ein Ausschnitt. • Bewertung der Neuerungen Mittwoch, 18. November 2009
  • 9. Oberflächengestaltung • CSS3 • background 2.0 • Schatten (Schriften + Box) • Verläufe • Runde Ecken • CSS Selektoren Mittwoch, 18. November 2009
  • 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. 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. Verläufe • linear (background: linear-gradient) • radial (background: radial-gradient) Mittwoch, 18. November 2009
  • 13. Runde Ecken • Abgerundete Ecken (border-radius) • DEMO: http://www.css3.info/preview/ rounded-border/ Mittwoch, 18. November 2009
  • 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. Effekte • CSS-Animation • SVG-Effekte Mittwoch, 18. November 2009
  • 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. 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. UI-Elemente • Canvas • SVG • Neue input-Typen Mittwoch, 18. November 2009
  • 19. SVG • SVG - Vektorzeichnungen • <svg> • Raphael - http://raphaeljs.com/ Mittwoch, 18. November 2009
  • 20. Canvas • Canvas - Pixel zeichnen • <canvas> • DEMO: http://www.paulbrunt.co.uk/bert/ Mittwoch, 18. November 2009
  • 21. Neue input-Typen • date • time • email Mittwoch, 18. November 2009
  • 22. Verbesserte Webanwendungen • Offline • SQLite • Hintergrundprozesse • Google Gears Mittwoch, 18. November 2009
  • 23. DEMO-APP • http://labs.thecssninja.com/font_dragr/ Mittwoch, 18. November 2009
  • 24. Fragen und Diskussion Mittwoch, 18. November 2009