Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Développement Web sur iPhone

Développement Web sur iPhone

8c4cee1129bc11fbe9a0b9379dce2cb1?s=128

Rémi Prévost

March 31, 2010
Tweet

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