Développement Web sur iPhone (iPhone+iPad DevCamp Québec)

Click here to load reader

  • date post

    15-May-2015
  • Category

    Technology

  • view

    10.749
  • download

    0

Embed Size (px)

description

Quelles sont les possibilités que nous offre HTML5 sur le iPhone, iPad et iPod Touch. http://iphonedevcampqc.exomel.com

Transcript of Développement Web sur iPhone (iPhone+iPad DevCamp Québec)

  • 1. 31 mars 2010 - iPhone + iPad DevCamp QcDveloppement Web sur iPhone HTML, CSS et Javascript Rmi Prvost, iXmdia inc. BY-NC-SA

2. Mobile Safari 3. HTML 4. HTML CSS 5. HTML CSS Javascript 6. HTML CSS Javascript Flash 7. HTML CSS Javascript Flash 8. HTML No Flash, LOL.CSS Javascript Flash 9. HTML CSS Javascript 10. HTML CSS Javascript 11. } HTML CSSHTML5 Javascript 12. HTML 13. HTMLNouveaux lments 14. HTMLNouveaux lmentsheaderfooter nav section article timefigurehgroup progressaudiovideo 15. HTML Nouveaux lments video 16. HTML Nouveaux lments video 17. HTML Nouveaux lments video 18. HTML Nouveaux lments video 19. HTMLNouveaux attributs 20. HTMLNouveaux attributsrequired contenteditable placeholderroleautofocus 21. HTML Nouveaux attributs placeholder 22. HTML Nouveaux attributs placeholder 23. HTML Nouveaux attributs placeholder 24. HTML Nouveaux attributs placeholder 25. HTMLNouveaux types de champs 26. HTMLNouveaux types de champs search emailtel rangeurldatetime month colortime number 27. HTML Nouveaux types de champs email et number 28. HTML Nouveaux types de champsemail et number 29. HTML Nouveaux types de champsemail et number 30. HTML Nouveaux types de champsemail et number 31. HTML Nouveaux types de champsemail et number 32. HTMLMeta-donnes 33. HTMLMeta-donnes viewport format-detection apple-touch-icon apple-touch-startup-image apple-mobile-web-app-capable apple-mobile-web-app-status-bar-style 34. HTML Mta-donnes iPhone viewport 35. HTML Mta-donnes iPhone viewport 36. HTML Mta-donnes iPhone viewport 37. HTML Mta-donnes iPhone viewport 38. HTML Mta-donnes iPhone viewport 39. HTML Mta-donnes iPhoneformat-detection 40. HTML Mta-donnes iPhone format-detection 41. HTML Mta-donnes iPhone format-detection 42. HTML Mta-donnes iPhone format-detection 43. HTML Mta-donnes iPhone format-detection 44. HTML Mta-donnes iPhoneapple-touch-icon 45. HTML Mta-donnes iPhoneapple-touch-icon 46. HTML Mta-donnes iPhoneapple-touch-icon 47. HTML Mta-donnes iPhoneapple-touch-icon 48. HTML Mta-donnes iPhoneapple-touch-icon 49. HTML Mta-donnes iPhoneapple-touch-startup-image 50. HTML Mta-donnes iPhoneapple-touch-startup-image 51. HTML Mta-donnes iPhoneapple-touch-startup-image 52. HTML Mta-donnes iPhoneapple-mobile-web-app-capable 53. HTML Mta-donnes iPhoneapple-mobile-web-app-capable 54. HTML Mta-donnes iPhoneapple-mobile-web-app-capable 55. HTML Mta-donnes iPhoneapple-mobile-web-status-bar-style 56. HTML Mta-donnes iPhoneapple-mobile-web-status-bar-style 57. HTML Mta-donnes iPhoneapple-mobile-web-status-bar-style 58. CSS 59. CSS WebKit 60. CSS-webkit-border-radius -webkit-border-radius: 1em; 61. CSS-webkit-transform -webkit-transform: rotate(90deg) scale(1.5); 62. CSS-webkit-box-shadow -webkit-box-shadow: 9px 9px 30px rgba(255,0,255,0.9); 63. CSS -webkit-box-shadow -webkit-box-shadow: 9px 9px 30px rgba(255,0,255,0.9);Source: ledevoir.com 64. CSStext-shadow text-shadow: 15px 15px 2px #ffff66; OMG 65. [email protected] @font-face { font-family: 'Megalopolis'; src: url('Megalopolis.svg#MegalopolisExtra') format('svg'); }h1 { font-family: 'Megalopolis'; } 66. [email protected] 67. CSS-webkit-tap-highlight-colorproprit non-dclare -webkit-tap-highlight-color: rgba(255,0,0,0.5); 68. Javascript 69. JavascriptNouveaux vnements 70. JavascriptNouveaux vnementsontouchstart ontouchmove ontouchend ontouchcancel 71. JavascriptNouveaux vnementsontouchstart ontouchmove ontouchend ontouchcancel 72. JavascriptNouveaux vnementsontouchstart ontouchmove ontouchend ontouchcancel 73. JavascriptNouveaux vnementsontouchstart ontouchmove ontouchend ontouchcancel 74. JavascriptNouveaux vnementsontouchstart ontouchmove ontouchend ontouchcancel 75. JavascriptNouveaux vnements 76. JavascriptNouveaux vnements ongesturestartongesturechangeongestureend 77. JavascriptNouveaux vnements ongesturestartongesturechangeongestureend 78. JavascriptNouveaux vnements ongesturestartongesturechangeongestureend 79. JavascriptNouveaux vnements ongesturestartongesturechangeongestureend 80. JavascriptNouveaux vnements ongesturestartongesturechangeongestureend 81. JavascriptNouveaux vnements 82. JavascriptNouveaux vnements onorientationchange 83. JavascriptNouveaux vnementsonorientationchange window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180 }; 84. JavascriptNouveaux vnementsonorientationchange window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180 }; 85. JavascriptNouveaux vnementsonorientationchange window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180 }; 86. Javascriptvnements supports diremment 87. Javascriptvnements supports diremmentonmouseoveronmousemoveonmousedown onmouseuponclick 88. Javascriptvnements supports diremment 89. Javascriptvnements supports diremmentonfocusonblur 90. Javascriptvnements non supports 91. Javascriptvnements non supports oncutoncopyonpasteonselection 92. Javascriptvnements non supports 93. Javascriptvnements non supports ondrag ondrop 94. Javascript Golocalisation : obtenir la position 95. JavascriptGolocalisation :obtenir la position navigator .geolocation .getCurrentPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude); }); 96. Javascript Golocalisation : obtenir la position 97. JavascriptGolocalisation : surveiller le changement de position navigator .geolocation .watchPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude); }); 98. JavascriptStockage : sauvegarderdes donnes en local 99. JavascriptStockage : sauvegarderdes donnes en local localStorage.setItem('foo', 'bar'); localStorage.getItem('foo'); // 'bar'localStorage['foo'] = 'bar'; localStorage['foo']; // 'bar'localStorage.clear(); 100. JavascriptStockage : sauvegarderdes donnes en local 101. JavascriptStockage : sauvegarderdes donnes en local 102. Javascript Canvas : crer des lments graphiques 103. Javascript Canvas : crer des lments graphiques 104. Javascript Canvas : crer des lments graphiques c = document.getElementById('toile').getContext('2d'); c.fillStyle = "#f00"; c.fillRect(10,10,100,100); 105. Javascript Canvas : crer des lments graphiques 106. } HTML CSSHTML5 Javascript 107. Code source github.com/remiprev/iphonedevcampqcEn action iphonedevcampqc.exomel.com Twitter : @remi