Applications  mobiles HTML5: boite à outils <ul><li>Philippe Antoine </li></ul><ul><li>@PhilippeAntoine </li></ul>
<ul><li>Doctype et Box Model   Demo: Zombie Browsers et Quirksmode   </li></ul><ul><li>Responsive Layout   Demo: Viewport,...
www.agiletour.com Coding Dojos Barcamp JavaCamp ParisJS Agile Confs @PhilippeAntoine http://philippe.im
How to tell HTML from HTML5 <ul><li>Try it out on Internet Explorer </li></ul><ul><li>Did it work? </li></ul><ul><li>No? <...
1/5   <doctype html>   ?
http://www.quirksmode.org/css/quirksmode.html
Zombie Browsers navigator.cssCompat navigator.userAgent
*{ box-sizing: border-box }  http://paulirish.com/2012/box-sizing-border-box-ftw/ CSS Solution
2/5 (responsive) Layouts
7 tables 37 niveaux
1 grid layout to rule them all
Viewport <meta name=&quot;viewport&quot;  content=&quot;width=device-width; initial-scale=1;&quot;> http://www.quirksmode....
http://www.flickr.com/photos/jorgecorrea/4359779134/
Resources http://piira.se/projects/ingrid/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://mediaqueri.es/
3/5 Interactions
Touch <ul><li>Demos: </li></ul><ul><li>Events </li></ul><ul><li>Multi touch </li></ul><ul><li>Gestures </li></ul>
Drag and drop Demo Drag and drop with: Mouse / Keyboard / Touch
4/5 Forms and Data
Forms <ul><li>Demos: </li></ul><ul><li>Datasets </li></ul><ul><li>Save current form to local storage </li></ul><ul><li>Sha...
Data <ul><li>Demos: </li></ul><ul><li>Data Islands </li></ul><ul><li>JSON object </li></ul><ul><li>Data manipulation </li>...
Vanilla Javascript
5/5 Vendor Prefixes
http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
http://goo.gl/6wkMf
http://leaverou.github.com/prefixfree/
Merci
Upcoming SlideShare
Loading in …5
×

Webapps mobiles html5

1,091 views
1,029 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,091
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Webapps mobiles html5

  1. 1. Applications mobiles HTML5: boite à outils <ul><li>Philippe Antoine </li></ul><ul><li>@PhilippeAntoine </li></ul>
  2. 2. <ul><li>Doctype et Box Model Demo: Zombie Browsers et Quirksmode </li></ul><ul><li>Responsive Layout Demo: Viewport, Media Queries, Bootstrap </li></ul><ul><li>Interactions Demo: multitouch, scroll, drag and drop mobile/desktop </li></ul><ul><li>Forms and Data Demo: shadow dom, datasets, data islands, json.js </li></ul><ul><li>Vendor Prefixes </li></ul>
  3. 3. www.agiletour.com Coding Dojos Barcamp JavaCamp ParisJS Agile Confs @PhilippeAntoine http://philippe.im
  4. 4. How to tell HTML from HTML5 <ul><li>Try it out on Internet Explorer </li></ul><ul><li>Did it work? </li></ul><ul><li>No? </li></ul><ul><li>It’s HTML5 </li></ul>
  5. 5.
  6. 6.
  7. 7. 1/5 <doctype html> ?
  8. 8. http://www.quirksmode.org/css/quirksmode.html
  9. 9. Zombie Browsers navigator.cssCompat navigator.userAgent
  10. 10. *{ box-sizing: border-box } http://paulirish.com/2012/box-sizing-border-box-ftw/ CSS Solution
  11. 11. 2/5 (responsive) Layouts
  12. 12. 7 tables 37 niveaux
  13. 13. 1 grid layout to rule them all
  14. 14. Viewport <meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1;&quot;> http://www.quirksmode.org/mobile/viewports2.html
  15. 15. http://www.flickr.com/photos/jorgecorrea/4359779134/
  16. 16. Resources http://piira.se/projects/ingrid/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://mediaqueri.es/
  17. 17. 3/5 Interactions
  18. 18. Touch <ul><li>Demos: </li></ul><ul><li>Events </li></ul><ul><li>Multi touch </li></ul><ul><li>Gestures </li></ul>
  19. 19.
  20. 20. Drag and drop Demo Drag and drop with: Mouse / Keyboard / Touch
  21. 21. 4/5 Forms and Data
  22. 22. Forms <ul><li>Demos: </li></ul><ul><li>Datasets </li></ul><ul><li>Save current form to local storage </li></ul><ul><li>Shadow DOM </li></ul>
  23. 23. Data <ul><li>Demos: </li></ul><ul><li>Data Islands </li></ul><ul><li>JSON object </li></ul><ul><li>Data manipulation </li></ul>
  24. 24. Vanilla Javascript
  25. 25. 5/5 Vendor Prefixes
  26. 26.
  27. 27. http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
  28. 28.
  29. 29. http://goo.gl/6wkMf
  30. 30. http://leaverou.github.com/prefixfree/
  31. 31. Merci

×