Das Dokument behandelt die Entwicklung von HTML und modernen Webtechnologien, beginnend mit den frühen Versionen von HTML bis hin zu HTML5, und beschreibt wesentliche Verbesserungen in der Oberflächengestaltung durch CSS3, einschließlich neuer Effekte und UI-Elemente. Es werden wichtige Features wie CSS-Animationen, SVG-Effekte, und neue Input-Typen vorgestellt, die die Nutzererfahrung erhöhen. Zudem wird der Einsatz von Offline-Funktionalitäten und Hintergrundprozessen für verbesserte Webanwendungen diskutiert.

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

3. Mittwoch, 18. November 2009

4. Mittwoch, 18. November 2009

5. Mittwoch, 18. November 2009

6. Mittwoch, 18. November 2009

7. 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