新 · 交互

6,073 views

Published on

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

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,073
On SlideShare
0
From Embeds
0
Number of Embeds
3,374
Actions
Shares
0
Downloads
137
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

新 · 交互

  1. 1. HTML5 CSS3 ? http://sofish.de
  2. 2. SUMMARY 1 2 3
  3. 3. SUMMARY 1 2 3
  4. 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. 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. 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. 7. 1
  8. 8. 1
  9. 9. 1 ...
  10. 10. 1 ...
  11. 11. 1 ...
  12. 12. 1 ...
  13. 13. 1 ...
  14. 14. 1 ...
  15. 15. 1 ...
  16. 16. Data Table form:http://j.mp/cross-browser
  17. 17. Data Table form:http://j.mp/cross-browser
  18. 18. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  19. 19. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  20. 20. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  21. 21. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  22. 22. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  23. 23. 2 Firefox / Chrome / Safari / Opera / IE9 IE8 / IE7 IE6 / Apple Safari / Opera Mini / Webkit based Browser windows phone 7 IE APP /
  24. 24. 3 © CopyRIght : http://iflonely.com/page/50/
  25. 25. 3 © CopyRIght : http://iflonely
  26. 26. 3 1. 2.  vs   3. 4. © CopyRIght : http://iflonely
  27. 27. 3 1. Web
  28. 28. 3 1. Web Drag & Drop http://sofish.de/file/html5/drag_and_drop/ + HTML5 Gmail Min.us
  29. 29. 3 2.  vs   iPad 1024
  30. 30. 3 2.  vs   iPad 1024 Media Query http://sofish.de/file/html5/media_query/ Media Query
  31. 31. 3 1. AA
  32. 32. 3 1. AA LocalStorage http://sofish.de/file/html5/localStorage/ Cookie HTTP LocalStorage + UserData(IE)
  33. 33. 3 4. SNS AA AA Check In
  34. 34. 3 4. SNS AA AA Check In Geolocation http://sofish.de/file/html5/localStorage/ HTML5 Geolocation IP Wifi GPS
  35. 35. 3
  36. 36. 3
  37. 37. 3
  38. 38. 3 Arale/Alice ... ....
  39. 39. 3 Arale/Alice ... ....
  40. 40. 3
  41. 41. 3
  42. 42. 3
  43. 43. ThankYou!! FAQ http://sofish.de

×