Folien zum Workshop „Mit HTML5 in die AppStores an einem Tag“

1. Mobile WebApps
Modernes UI mit CSS 3
aurelio@uxebu.com
Montag, 28. März 2011

2. Syntax
Montag, 28. März 2011

3. Media Queries
Montag, 28. März 2011

4. Neu in CSS 3
Selectors Grid positioning
Color Multi-column layout
Image values 2D transforms
Backgrounds and borders 3D transforms
Text Transitions
Fonts Animations
Flexible box layout Media queries
Template layout …
Montag, 28. März 2011

5. Neu in CSS 3
Selectors Grid positioning
Color Multi-column layout
Image values 2D transforms
Backgrounds and borders 3D transforms
Text Transitions
Fonts Animations
Flexible box layout Media queries
Template layout …
Montag, 28. März 2011

6. http://caniuse.com/
Montag, 28. März 2011

7. Color
rgba(red, green, blue, alpha) rgba(0, 96, 0, 0.6)
hsl(hue, saturation, lightness) hsl(9, 75%, 50%)
hsla(hue, saturation, lightness, alpha)
alpha kostet Performance!
ie 9, mozilla, webkit, opera
Montag, 28. März 2011

8. Image Values:Verläufe
linear und radial
mozilla, webkit*, opera 11.1β*
teuer!
Montag, 28. März 2011

9. Backgrounds / Borders
runde Ecken
ie 9, mozilla, webkit, opera
auch ungleichmäßig
Probleme: Inhalte bluten
Montag, 28. März 2011

10. Backgrounds / Borders
border-image
mozilla, webkit, opera
für buttons, „Kästen“, …
Montag, 28. März 2011

11. Backgrounds / Borders
Schlagschatten für Boxen
mozilla, webkit, opera
teuer!
Montag, 28. März 2011

12. Flexible box layout
box-flex: 1;
display: block display: box
Montag, 28. März 2011

13. Flexible Box Layout
Flexible Kindboxen
Verteilen von „übrigem“ Platz
vertikales und horizontales Layout
unabhängig von HTML-Reihenfolge
mozilla, webkit
Montag, 28. März 2011

14. 2D-Transformations
Rotation
Scherung
Versatz
Skalierung
Montag, 28. März 2011

15. 2D-Transformations
Kein Einfluss auf Dokumentenfluss
ie 9, mozilla, webkit, opera
Montag, 28. März 2011

16. 3D-Transformations
webkit (mobile: nur iOS)
benötigt Hardware-Rendering
Montag, 28. März 2011

17. Transitions
Animierter Übergang zweier Zuständen
Dauer,Verzögerung, Timing-Funktion
ie 9, mozilla, webkit, opera
Montag, 28. März 2011

18. Animations
“Keyframe”-basiert
mehr als zwei Zustände möglich
jeder Keyframe legt expliziten Zustand fest
Montag, 28. März 2011

19. Media Queries
Feature-Testing
Bildschirmgröße, -orientierung,
Seitenverhältnis, Auflösung, etc.
WebKit: Features
Montag, 28. März 2011

20. http://bit.ly/bundles/void0/1
http://bit.ly/css3-color
http://bit.ly/css3-border-radius
http://bit.ly/css3-linear-gradients
http://bit.ly/css3-border-image
http://bit.ly/css3-box-shadow
http://mzl.la/css3-flex-box
http://bit.ly/css3-2d-transformations
http://bit.ly/css3-3d-transformations
http://bit.ly/css3-transitions
http://bit.ly/css3-animation
http://bit.ly/css3-media-queries
Montag, 28. März 2011

21. Fragen?
Montag, 28. März 2011

22. Danke
aurelio@uxebu.com
@void_0
Montag, 28. März 2011