Développement Web sur iPhone

Transcript

1. BY-NC-SA 31 mars 2010 - iPhone + iPad DevCamp Qc Développement Web sur iPhone HTML, CSS et Javascript Rémi Prévost, iXmédia inc.
2. Mobile Safari
3. HTML CSS Javascript Flash No Flash, LOL.
4. } HTML CSS Javascript HTML 5
5. HTML
6. Nouveaux éléments HTML header footer nav section article time figure hgroup progress audio video
7. video HTML › Nouveaux éléments <video src="lipdub-ixmedia.mp4" width="320" height="240" controls preload> </video>
8. Nouveaux attributs HTML required contenteditable placeholder role autofocus
9. placeholder HTML › Nouveaux attributs <input placeholder="Recherche…" />
10. Nouveaux types de champs HTML search email tel range url datetime month color time number
11. email et number HTML › Nouveaux types de champs <input type="number" /> <input type="email" />
12. Meta-données HTML viewport format-detection apple-touch-icon apple-touch-startup-image apple-mobile-web-app-capable apple-mobile-web-app-status-bar-style
13. viewport HTML › Méta-données iPhone <meta name="viewport" content="width=320" /> <meta name="viewport" content="width=device-width" /> <meta name="viewport" content="user-scalable=0" />
14. <meta name="format-detection" content="telephone=no" /> format-detection HTML › Méta-données iPhone
15. apple-touch-icon HTML › Méta-données iPhone <link rel="apple-touch-icon" href="/icone-carre.png" /> <link rel="apple-touch-icon-precomposed" href="/icone-deja-arrangee.png" />
16. apple-touch-startup-image HTML › Méta-données iPhone <meta name="apple-touch-startup-image" content="/welcome.png" />
17. <meta name="apple-mobile-web-app-capable" content="yes" /> HTML › Méta-données iPhone apple-mobile-web-app-capable
18. HTML › Méta-données iPhone apple-mobile-web-status-bar- style <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
19. CSS WebKit
20. -webkit-border-radius CSS -webkit-border-radius: 1em;
21. -webkit-transform: rotate(90deg) scale(1.5); -webkit-transform CSS
22. Source : ledevoir.com -webkit-box-shadow CSS -webkit-box-shadow: 9px 9px 30px rgba(255,0,255,0.9);
23. OMG text-shadow CSS text-shadow: 15px 15px 2px #ffff66;
24. @font-face CSS @font-face { font-family: 'Megalopolis'; src: url('Megalopolis.svg#MegalopolisExtra') format('svg'); } h1 { font-family: 'Megalopolis'; }
25. @font-face CSS
26. -webkit-tap-highlight-color CSS propriété non-déclarée -webkit-tap-highlight-color: rgba(255,0,0,0.5);
27. Javascript
28. ontouchstart ontouchmove ontouchend ontouchcancel Nouveaux événements Javascript
29. ongesturestart ongesturechange ongestureend Nouveaux événements Javascript
30. onorientationchange Nouveaux événements Javascript window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180 };
31. Événements supportés différemment Javascript onmouseover onmousemove onmousedown onmouseup onclick
32. Événements supportés différemment Javascript onfocus onblur
33. Événements non supportés Javascript oncut oncopy onpaste onselection
34. Événements non supportés Javascript ondrag ondrop
35. Géolocalisation : obtenir la position Javascript navigator .geolocation .getCurrentPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude); });
36. Géolocalisation : obtenir la position Javascript
37. Géolocalisation : surveiller le changement de position Javascript navigator .geolocation .watchPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude); });
38. Stockage : sauvegarder des données en local Javascript localStorage.setItem('foo', 'bar'); localStorage.getItem('foo'); // 'bar' localStorage['foo'] = 'bar'; localStorage['foo']; // 'bar' localStorage.clear();
39. Stockage : sauvegarder des données en local Javascript
40. c = document.getElementById('toile').getContext('2d'); c.fillStyle = "#f00"; c.fillRect(10,10,100,100); Canvas : créer des éléments graphiques Javascript <canvas id="toile" width="500" height="500" />
41. Canvas : créer des éléments graphiques Javascript
42. } HTML CSS Javascript HTML 5
43. Code source github.com/remiprev/iphonedevcampqc En action iphonedevcampqc.exomel.com Twitter : @remi