Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,301 views

Published on

Published in: Technology, Design
  • Be the first to comment

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

×