给交互分享的 KeyNote。讲讲新技术带来的新交互模式。

1. HTML5 CSS3 ?
http://sofish.de

2. SUMMARY
1
2
3

3. SUMMARY
1
2
3

4. 1
HTML5 CSS3
Background Size
CSS Columns
Local Storage
IndexDB Database
Multiple Backgrounds CSS Gradients
Session Storage
Drag and Drop
Border Image / Radius
CSS Reflections Post Message
Hash Change (Event)
Box Shadow
CSS Transform
Offline Applications History Management
Text Shadow
CSS Transitions
Workers
WebSockets
Opacity
CSS FontFace
Query Selector
GeoLocation
CSS Animations
FlexBox WebSQL Database
Touch
Combo / Node.js / Facebook BigPie / IE filter / SVG

5. 1
HTML5 CSS3
Background Size
CSS Columns
Local Storage
IndexDB Database
Multiple Backgrounds CSS Gradients
Session Storage
Drag and Drop
Border Image / Radius
Box Shadow
Text Shadow
CSS Reflections
CSS Transform
CSS Transitions
Post Message
Offline Applications
Workers
Hash Change (Event)
History Management
WebSockets
...
Opacity
CSS FontFace
Query Selector
GeoLocation
CSS Animations
FlexBox WebSQL Database
Touch
Combo / Node.js / Facebook BigPie / IE filter / SVG

6. 1
HTML5 CSS3
Background Size
CSS Columns
Local Storage
IndexDB Database
Multiple Backgrounds CSS Gradients
Session Storage
Drag and Drop
Border Image / Radius
Box Shadow
Text Shadow
CSS Reflections
CSS Transform
CSS Transitions
Post Message
Offline Applications
Workers
Hash Change (Event)
History Management
WebSockets
...
Opacity
CSS FontFace
Query Selector
GeoLocation
CSS Animations
FlexBox WebSQL Database
Touch
Combo / Node.js / Facebook BigPie / IE filter / SVG ...

7. 1

8. 1

9. 1
...

10. 1
...

11. 1
...

12. 1
...

13. 1
...

14. 1
...

15. 1
...

18. Data Table form:
http://j.mp/cross-browser

19. Data Table form:
http://j.mp/cross-browser

20. 2
Firefox / Chrome / Safari / Opera / IE9
IE8 / IE7 IE6
/
Apple Safari / Opera Mini /
Webkit based Browser
windows phone 7 IE
APP /

21. 2
Firefox / Chrome / Safari / Opera / IE9
IE8 / IE7 IE6
/
Apple Safari / Opera Mini /
Webkit based Browser
windows phone 7 IE
APP /

22. 2
Firefox / Chrome / Safari / Opera / IE9
IE8 / IE7 IE6
/
Apple Safari / Opera Mini /
Webkit based Browser
windows phone 7 IE
APP /

23. 2
Firefox / Chrome / Safari / Opera / IE9
IE8 / IE7 IE6
/
Apple Safari / Opera Mini /
Webkit based Browser
windows phone 7 IE
APP /

24. 2
Firefox / Chrome / Safari / Opera / IE9
IE8 / IE7 IE6
/
Apple Safari / Opera Mini /
Webkit based Browser
windows phone 7 IE
APP /

25. 2
Firefox / Chrome / Safari / Opera / IE9
IE8 / IE7 IE6
/
Apple Safari / Opera Mini /
Webkit based Browser
windows phone 7 IE
APP /

26. 3
© CopyRIght : http://iflonely.com/page/50/

27. 3
© CopyRIght : http://iflonely

28. 3
1. 2.
vs
3. 4.
© CopyRIght : http://iflonely

29. 3
1.
Web

30. 3
1.
Web
Drag & Drop http://sofish.de/file/html5/drag_and_drop/
+ HTML5 Gmail Min.us

31. 3
2.
vs
iPad 1024

32. 3
2.
vs
iPad 1024
Media Query
http://sofish.de/file/html5/media_query/
Media Query

33. 3
1.
AA

34. 3
1.
AA
LocalStorage http://sofish.de/file/html5/localStorage/
Cookie HTTP
LocalStorage + UserData(IE)

35. 3
4.
SNS
AA AA
Check In

36. 3
4.
SNS
AA AA
Check In
Geolocation http://sofish.de/file/html5/localStorage/
HTML5 Geolocation IP Wifi GPS

37. 3

38. 3

39. 3

40. 3
Arale/Alice ...
....

41. 3
Arale/Alice ...
....

42. 3

43. 3

44. 3

45. ThankYou!! FAQ
http://sofish.de