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

1. 31 mars 2010 - iPhone + iPad DevCamp Qc
Développement Web sur iPhone
HTML, CSS et Javascript
Rémi Prévost, iXmédia inc.
BY-NC-SA

3. Mobile Safari

5. HTML

6. HTML
CSS

7. HTML
CSS
Javascript

8. HTML
CSS
Javascript
Flash

9. HTML
CSS
Javascript
Flash

10. HTML No Flash, LOL.
CSS
Javascript
Flash

11. HTML
CSS
Javascript

12. HTML
CSS
Javascript

13. }
HTML
CSS HTML5
Javascript

14. HTML

15. HTML
Nouveaux éléments

16. HTML
Nouveaux éléments
header
footer
nav
section
article
time
figure
hgroup
progress
audio
video

17. HTML › Nouveaux éléments
video

18. HTML › Nouveaux éléments
video
<video src="lipdub-ixmedia.mp4"
width="320" height="240"
controls preload>
</video>

19. HTML › Nouveaux éléments
video
<video src="lipdub-ixmedia.mp4"
width="320" height="240"
controls preload>
</video>

20. HTML › Nouveaux éléments
video
<video src="lipdub-ixmedia.mp4"
width="320" height="240"
controls preload>
</video>

21. HTML
Nouveaux attributs

22. HTML
Nouveaux attributs
required
contenteditable
placeholder
role
autofocus

23. HTML › Nouveaux attributs
placeholder

24. HTML › Nouveaux attributs
placeholder
<input placeholder="Recherche…" />

25. HTML › Nouveaux attributs
placeholder
<input placeholder="Recherche…" />

26. HTML › Nouveaux attributs
placeholder
<input placeholder="Recherche…" />

27. HTML
Nouveaux types de champs

28. HTML
Nouveaux types de champs
search
email
tel
range
url
datetime
month
color
time
number

29. HTML › Nouveaux types de champs
email et number

30. HTML › Nouveaux types de champs
email et number
<input type="email" />

31. HTML › Nouveaux types de champs
email et number
<input type="email" />

32. HTML › Nouveaux types de champs
email et number
<input type="email" /> <input type="number" />

33. HTML › Nouveaux types de champs
email et number
<input type="email" /> <input type="number" />

34. HTML
Meta-données

35. HTML
Meta-données
viewport
format-detection
apple-touch-icon
apple-touch-startup-image
apple-mobile-web-app-capable
apple-mobile-web-app-status-bar-style

36. HTML › Méta-données iPhone
viewport

37. HTML › Méta-données iPhone
viewport
<meta name="viewport"
content="width=320" />

38. HTML › Méta-données iPhone
viewport
<meta name="viewport"
content="width=320" />

39. HTML › Méta-données iPhone
viewport
<meta name="viewport"
content="width=320" />
<meta name="viewport"
content="width=device-width" />

40. HTML › Méta-données iPhone
viewport
<meta name="viewport"
content="width=320" />
<meta name="viewport"
content="width=device-width" />
<meta name="viewport"
content="user-scalable=0" />

41. HTML › Méta-données iPhone
format-detection

42. HTML › Méta-données iPhone
format-detection
<meta name="format-detection" content="telephone=no" />

43. HTML › Méta-données iPhone
format-detection
<meta name="format-detection" content="telephone=no" />

44. HTML › Méta-données iPhone
format-detection
<meta name="format-detection" content="telephone=no" />

45. HTML › Méta-données iPhone
format-detection
<meta name="format-detection" content="telephone=no" />

46. HTML › Méta-données iPhone
apple-touch-icon

47. HTML › Méta-données iPhone
apple-touch-icon
<link rel="apple-touch-icon"
href="/icone-carre.png" />

48. HTML › Méta-données iPhone
apple-touch-icon
<link rel="apple-touch-icon"
href="/icone-carre.png" />
<link rel="apple-touch-icon-precomposed"
href="/icone-deja-arrangee.png" />

49. HTML › Méta-données iPhone
apple-touch-icon
<link rel="apple-touch-icon"
href="/icone-carre.png" />
<link rel="apple-touch-icon-precomposed"
href="/icone-deja-arrangee.png" />

50. HTML › Méta-données iPhone
apple-touch-icon
<link rel="apple-touch-icon"
href="/icone-carre.png" />
<link rel="apple-touch-icon-precomposed"
href="/icone-deja-arrangee.png" />

51. HTML › Méta-données iPhone
apple-touch-startup-image

52. HTML › Méta-données iPhone
apple-touch-startup-image
<meta name="apple-touch-startup-image"
content="/welcome.png" />

53. HTML › Méta-données iPhone
apple-touch-startup-image
<meta name="apple-touch-startup-image"
content="/welcome.png" />

54. HTML › Méta-données iPhone
apple-mobile-web-app-capable

55. HTML › Méta-données iPhone
apple-mobile-web-app-capable
<meta name="apple-mobile-web-app-capable"
content="yes" />

56. HTML › Méta-données iPhone
apple-mobile-web-app-capable
<meta name="apple-mobile-web-app-capable"
content="yes" />

57. HTML › Méta-données iPhone
apple-mobile-web-status-bar-style

58. HTML › Méta-données iPhone
apple-mobile-web-status-bar-style
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent" />

59. HTML › Méta-données iPhone
apple-mobile-web-status-bar-style
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent" />

60. CSS

61. CSS
WebKit

62. CSS
-webkit-border-radius
-webkit-border-radius: 1em;

63. CSS
-webkit-transform
-webkit-transform: rotate(90deg) scale(1.5);

64. CSS
-webkit-box-shadow
-webkit-box-shadow: 9px 9px 30px rgba(255,0,255,0.9);

65. CSS
-webkit-box-shadow
-webkit-box-shadow: 9px 9px 30px rgba(255,0,255,0.9);
Source : ledevoir.com

66. CSS
text-shadow
text-shadow: 15px 15px 2px #ffff66;
OMG

67. CSS
@font-face
@font-face {
font-family: 'Megalopolis';
src: url('Megalopolis.svg#MegalopolisExtra')
format('svg');
}
h1 {
font-family: 'Megalopolis';
}

68. CSS
@font-face

69. CSS
-webkit-tap-highlight-color
propriété non-déclarée -webkit-tap-highlight-color: rgba(255,0,0,0.5);

70. Javascript

71. Javascript
Nouveaux événements

72. Javascript
Nouveaux événements
ontouchstart
ontouchmove
ontouchend
ontouchcancel

73. Javascript
Nouveaux événements
ontouchstart
ontouchmove
ontouchend
ontouchcancel

74. Javascript
Nouveaux événements
ontouchstart
ontouchmove
ontouchend
ontouchcancel

75. Javascript
Nouveaux événements
ontouchstart
ontouchmove
ontouchend
ontouchcancel

76. Javascript
Nouveaux événements
ontouchstart
ontouchmove
ontouchend
ontouchcancel

77. Javascript
Nouveaux événements

78. Javascript
Nouveaux événements
ongesturestart
ongesturechange
ongestureend

79. Javascript
Nouveaux événements
ongesturestart
ongesturechange
ongestureend

80. Javascript
Nouveaux événements
ongesturestart
ongesturechange
ongestureend

81. Javascript
Nouveaux événements
ongesturestart
ongesturechange
ongestureend

82. Javascript
Nouveaux événements
ongesturestart
ongesturechange
ongestureend

83. Javascript
Nouveaux événements

84. Javascript
Nouveaux événements
onorientationchange

85. Javascript
Nouveaux événements
onorientationchange
window.onorientationchange = function() {
alert(window.orientation); // 0, 90, -90 ou 180
};

86. Javascript
Nouveaux événements
onorientationchange
window.onorientationchange = function() {
alert(window.orientation); // 0, 90, -90 ou 180
};

87. Javascript
Nouveaux événements
onorientationchange
window.onorientationchange = function() {
alert(window.orientation); // 0, 90, -90 ou 180
};

88. Javascript
Événements supportés
différemment

89. Javascript
Événements supportés
différemment
onmouseover
onmousemove
onmousedown
onmouseup
onclick

90. Javascript
Événements supportés
différemment

91. Javascript
Événements supportés
différemment
onfocus
onblur

92. Javascript
Événements non supportés

93. Javascript
Événements non supportés
oncut
oncopy
onpaste
onselection

94. Javascript
Événements non supportés

95. Javascript
Événements non supportés
ondrag
ondrop

96. Javascript
Géolocalisation :
obtenir la position

97. Javascript
Géolocalisation :
obtenir la position
navigator
.geolocation
.getCurrentPosition(function(p) {
alert(p.coords.latitude+', '+p.coords.longitude);
});

98. Javascript
Géolocalisation :
obtenir la position

99. Javascript
Géolocalisation : surveiller
le changement de position
navigator
.geolocation
.watchPosition(function(p) {
alert(p.coords.latitude+', '+p.coords.longitude);
});

100. Javascript
Stockage : sauvegarder
des données en local

101. Javascript
Stockage : sauvegarder
des données en local
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo'); // 'bar'
localStorage['foo'] = 'bar';
localStorage['foo']; // 'bar'
localStorage.clear();

102. Javascript
Stockage : sauvegarder
des données en local

103. Javascript
Stockage : sauvegarder
des données en local

104. Javascript
Canvas : créer
des éléments graphiques

105. Javascript
Canvas : créer
des éléments graphiques
<canvas id="toile" width="500" height="500" />

106. Javascript
Canvas : créer
des éléments graphiques
<canvas id="toile" width="500" height="500" />
c = document.getElementById('toile').getContext('2d');
c.fillStyle = "#f00";
c.fillRect(10,10,100,100);

107. Javascript
Canvas : créer
des éléments graphiques

108. }
HTML
CSS HTML5
Javascript

109. Code source
github.com/remiprev/iphonedevcampqc
En action
iphonedevcampqc.exomel.com
Twitter : @remi