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