31 mars 2010 - iPhone + iPad DevCamp Qc



Développement Web sur iPhone
      HTML, CSS et Javascript


          Rémi Pré...
Mobile Safari
HTML
HTML
CSS
HTML
CSS
Javascript
HTML
CSS
Javascript
Flash
HTML
CSS
Javascript
Flash
HTML         No Flash, LOL.

CSS
Javascript
Flash
HTML
CSS
Javascript
HTML
CSS
Javascript
}
HTML
CSS              HTML5
Javascript
HTML
HTML

Nouveaux éléments
HTML

Nouveaux éléments
       header
       footer
        nav
      section
      article
        time
       figure
   ...
HTML › Nouveaux éléments

       video
HTML › Nouveaux éléments

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

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

           video
<video src="lipdub-ixmedia.mp4"
       width="320" height="240"
       controls...
HTML

Nouveaux attributs
HTML

Nouveaux attributs
       required
    contenteditable
      placeholder
         role
       autofocus
HTML › Nouveaux attributs

 placeholder
HTML › Nouveaux attributs

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

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

       placeholder
<input placeholder="Recherche…" />
HTML

Nouveaux types de champs
HTML

Nouveaux types de champs
          search
          email
           tel
          range
           url
         dat...
HTML › Nouveaux types de champs

 email et number
HTML › Nouveaux types de champs

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

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

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

            email et number
<input type="email" />        <input type="number" />
HTML

Meta-données
HTML

      Meta-données
              viewport
          format-detection
          apple-touch-icon
      apple-touch-st...
HTML › Méta-données iPhone

     viewport
HTML › Méta-données iPhone

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

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

           viewport
<meta name="viewport"
      content="width=320" />

<meta name="viewport"
...
HTML › Méta-données iPhone

           viewport
<meta name="viewport"
      content="width=320" />

<meta name="viewport"
...
HTML › Méta-données iPhone

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

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

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

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

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

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

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

      apple-touch-icon
<link rel="apple-touch-icon"
      href="/icone-carre.png" />

<link re...
HTML › Méta-données iPhone

      apple-touch-icon
<link rel="apple-touch-icon"
      href="/icone-carre.png" />

<link re...
HTML › Méta-données iPhone

      apple-touch-icon
<link rel="apple-touch-icon"
      href="/icone-carre.png" />

<link re...
HTML › Méta-données iPhone

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

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

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

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

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

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

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

apple-mobile-web-status-bar-style
  <meta name="apple-mobile-web-app-status-bar-style"
       ...
HTML › Méta-données iPhone

apple-mobile-web-status-bar-style
  <meta name="apple-mobile-web-app-status-bar-style"
       ...
CSS
CSS
WebKit
CSS

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

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

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

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




 Source : ledevoir.com
CSS

      text-shadow
text-shadow: 15px 15px 2px #ffff66;




OMG
CSS

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

@font-face
CSS

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

Nouveaux événements
Javascript

Nouveaux événements
       ontouchstart
        ontouchmove
        ontouchend
      ontouchcancel
Javascript

Nouveaux événements
       ontouchstart
        ontouchmove
        ontouchend
      ontouchcancel
Javascript

Nouveaux événements
       ontouchstart
        ontouchmove
        ontouchend
      ontouchcancel
Javascript

Nouveaux événements
       ontouchstart
        ontouchmove
        ontouchend
      ontouchcancel
Javascript

Nouveaux événements
       ontouchstart
        ontouchmove
        ontouchend
      ontouchcancel
Javascript

Nouveaux événements
Javascript

Nouveaux événements
      ongesturestart
     ongesturechange
       ongestureend
Javascript

Nouveaux événements
      ongesturestart
     ongesturechange
       ongestureend
Javascript

Nouveaux événements
      ongesturestart
     ongesturechange
       ongestureend
Javascript

Nouveaux événements
      ongesturestart
     ongesturechange
       ongestureend
Javascript

Nouveaux événements
      ongesturestart
     ongesturechange
       ongestureend
Javascript

Nouveaux événements
Javascript

Nouveaux événements
    onorientationchange
Javascript

    Nouveaux événements
             onorientationchange


window.onorientationchange = function() {
    alert...
Javascript

    Nouveaux événements
             onorientationchange


window.onorientationchange = function() {
    alert...
Javascript

    Nouveaux événements
             onorientationchange


window.onorientationchange = function() {
    alert...
Javascript

Événements supportés
    différemment
Javascript

Événements supportés
    différemment
       onmouseover
       onmousemove
       onmousedown
        onmouseu...
Javascript

Événements supportés
    différemment
Javascript

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

Événements non supportés
Javascript

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

Événements non supportés
Javascript

Événements non supportés
          ondrag
          ondrop
Javascript

 Géolocalisation :
obtenir la position
Javascript

            Géolocalisation :
           obtenir la position
navigator
.geolocation
.getCurrentPosition(functi...
Javascript

 Géolocalisation :
obtenir la position
Javascript

    Géolocalisation : surveiller
    le changement de position
navigator
.geolocation
.watchPosition(function(...
Javascript

Stockage : sauvegarder
 des données en local
Javascript

Stockage : sauvegarder
 des données en local
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo'); ...
Javascript

Stockage : sauvegarder
 des données en local
Javascript

Stockage : sauvegarder
 des données en local
Javascript

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

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

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

c = do...
Javascript

     Canvas : créer
des éléments graphiques
}
HTML
CSS              HTML5
Javascript
Code source
github.com/remiprev/iphonedevcampqc


           En action
    iphonedevcampqc.exomel.com


            Twitte...
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Upcoming SlideShare
Loading in...5
×

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

10,839

Published on

Quelles sont les possibilités que nous offre HTML5 sur le iPhone, iPad et iPod Touch.

http://iphonedevcampqc.exomel.com

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,839
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
334
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 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
  2. 2. Mobile Safari
  3. 3. HTML
  4. 4. HTML CSS
  5. 5. HTML CSS Javascript
  6. 6. HTML CSS Javascript Flash
  7. 7. HTML CSS Javascript Flash
  8. 8. HTML No Flash, LOL. CSS Javascript Flash
  9. 9. HTML CSS Javascript
  10. 10. HTML CSS Javascript
  11. 11. } HTML CSS HTML5 Javascript
  12. 12. HTML
  13. 13. HTML Nouveaux éléments
  14. 14. HTML Nouveaux éléments header footer nav section article time figure hgroup progress audio video
  15. 15. HTML › Nouveaux éléments video
  16. 16. HTML › Nouveaux éléments video <video src="lipdub-ixmedia.mp4" width="320" height="240" controls preload> </video>
  17. 17. HTML › Nouveaux éléments video <video src="lipdub-ixmedia.mp4" width="320" height="240" controls preload> </video>
  18. 18. HTML › Nouveaux éléments video <video src="lipdub-ixmedia.mp4" width="320" height="240" controls preload> </video>
  19. 19. HTML Nouveaux attributs
  20. 20. HTML Nouveaux attributs required contenteditable placeholder role autofocus
  21. 21. HTML › Nouveaux attributs placeholder
  22. 22. HTML › Nouveaux attributs placeholder <input placeholder="Recherche…" />
  23. 23. HTML › Nouveaux attributs placeholder <input placeholder="Recherche…" />
  24. 24. HTML › Nouveaux attributs placeholder <input placeholder="Recherche…" />
  25. 25. HTML Nouveaux types de champs
  26. 26. HTML Nouveaux types de champs search email tel range url datetime month color time number
  27. 27. HTML › Nouveaux types de champs email et number
  28. 28. HTML › Nouveaux types de champs email et number <input type="email" />
  29. 29. HTML › Nouveaux types de champs email et number <input type="email" />
  30. 30. HTML › Nouveaux types de champs email et number <input type="email" /> <input type="number" />
  31. 31. HTML › Nouveaux types de champs email et number <input type="email" /> <input type="number" />
  32. 32. HTML Meta-données
  33. 33. 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
  34. 34. HTML › Méta-données iPhone viewport
  35. 35. HTML › Méta-données iPhone viewport <meta name="viewport" content="width=320" />
  36. 36. HTML › Méta-données iPhone viewport <meta name="viewport" content="width=320" />
  37. 37. HTML › Méta-données iPhone viewport <meta name="viewport" content="width=320" /> <meta name="viewport" content="width=device-width" />
  38. 38. 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" />
  39. 39. HTML › Méta-données iPhone format-detection
  40. 40. HTML › Méta-données iPhone format-detection <meta name="format-detection" content="telephone=no" />
  41. 41. HTML › Méta-données iPhone format-detection <meta name="format-detection" content="telephone=no" />
  42. 42. HTML › Méta-données iPhone format-detection <meta name="format-detection" content="telephone=no" />
  43. 43. HTML › Méta-données iPhone format-detection <meta name="format-detection" content="telephone=no" />
  44. 44. HTML › Méta-données iPhone apple-touch-icon
  45. 45. HTML › Méta-données iPhone apple-touch-icon <link rel="apple-touch-icon" href="/icone-carre.png" />
  46. 46. 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" />
  47. 47. 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" />
  48. 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. 49. HTML › Méta-données iPhone apple-touch-startup-image
  50. 50. HTML › Méta-données iPhone apple-touch-startup-image <meta name="apple-touch-startup-image" content="/welcome.png" />
  51. 51. HTML › Méta-données iPhone apple-touch-startup-image <meta name="apple-touch-startup-image" content="/welcome.png" />
  52. 52. HTML › Méta-données iPhone apple-mobile-web-app-capable
  53. 53. HTML › Méta-données iPhone apple-mobile-web-app-capable <meta name="apple-mobile-web-app-capable" content="yes" />
  54. 54. HTML › Méta-données iPhone apple-mobile-web-app-capable <meta name="apple-mobile-web-app-capable" content="yes" />
  55. 55. HTML › Méta-données iPhone apple-mobile-web-status-bar-style
  56. 56. HTML › Méta-données iPhone apple-mobile-web-status-bar-style <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  57. 57. HTML › Méta-données iPhone apple-mobile-web-status-bar-style <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  58. 58. CSS
  59. 59. CSS WebKit
  60. 60. CSS -webkit-border-radius -webkit-border-radius: 1em;
  61. 61. CSS -webkit-transform -webkit-transform: rotate(90deg) scale(1.5);
  62. 62. CSS -webkit-box-shadow -webkit-box-shadow: 9px 9px 30px rgba(255,0,255,0.9);
  63. 63. CSS -webkit-box-shadow -webkit-box-shadow: 9px 9px 30px rgba(255,0,255,0.9); Source : ledevoir.com
  64. 64. CSS text-shadow text-shadow: 15px 15px 2px #ffff66; OMG
  65. 65. CSS @font-face @font-face { font-family: 'Megalopolis'; src: url('Megalopolis.svg#MegalopolisExtra') format('svg'); } h1 { font-family: 'Megalopolis'; }
  66. 66. CSS @font-face
  67. 67. CSS -webkit-tap-highlight-color propriété non-déclarée -webkit-tap-highlight-color: rgba(255,0,0,0.5);
  68. 68. Javascript
  69. 69. Javascript Nouveaux événements
  70. 70. Javascript Nouveaux événements ontouchstart ontouchmove ontouchend ontouchcancel
  71. 71. Javascript Nouveaux événements ontouchstart ontouchmove ontouchend ontouchcancel
  72. 72. Javascript Nouveaux événements ontouchstart ontouchmove ontouchend ontouchcancel
  73. 73. Javascript Nouveaux événements ontouchstart ontouchmove ontouchend ontouchcancel
  74. 74. Javascript Nouveaux événements ontouchstart ontouchmove ontouchend ontouchcancel
  75. 75. Javascript Nouveaux événements
  76. 76. Javascript Nouveaux événements ongesturestart ongesturechange ongestureend
  77. 77. Javascript Nouveaux événements ongesturestart ongesturechange ongestureend
  78. 78. Javascript Nouveaux événements ongesturestart ongesturechange ongestureend
  79. 79. Javascript Nouveaux événements ongesturestart ongesturechange ongestureend
  80. 80. Javascript Nouveaux événements ongesturestart ongesturechange ongestureend
  81. 81. Javascript Nouveaux événements
  82. 82. Javascript Nouveaux événements onorientationchange
  83. 83. Javascript Nouveaux événements onorientationchange window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180 };
  84. 84. Javascript Nouveaux événements onorientationchange window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180 };
  85. 85. Javascript Nouveaux événements onorientationchange window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180 };
  86. 86. Javascript Événements supportés différemment
  87. 87. Javascript Événements supportés différemment onmouseover onmousemove onmousedown onmouseup onclick
  88. 88. Javascript Événements supportés différemment
  89. 89. Javascript Événements supportés différemment onfocus onblur
  90. 90. Javascript Événements non supportés
  91. 91. Javascript Événements non supportés oncut oncopy onpaste onselection
  92. 92. Javascript Événements non supportés
  93. 93. Javascript Événements non supportés ondrag ondrop
  94. 94. Javascript Géolocalisation : obtenir la position
  95. 95. Javascript Géolocalisation : obtenir la position navigator .geolocation .getCurrentPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude); });
  96. 96. Javascript Géolocalisation : obtenir la position
  97. 97. Javascript Géolocalisation : surveiller le changement de position navigator .geolocation .watchPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude); });
  98. 98. Javascript Stockage : sauvegarder des données en local
  99. 99. Javascript Stockage : sauvegarder des données en local localStorage.setItem('foo', 'bar'); localStorage.getItem('foo'); // 'bar' localStorage['foo'] = 'bar'; localStorage['foo']; // 'bar' localStorage.clear();
  100. 100. Javascript Stockage : sauvegarder des données en local
  101. 101. Javascript Stockage : sauvegarder des données en local
  102. 102. Javascript Canvas : créer des éléments graphiques
  103. 103. Javascript Canvas : créer des éléments graphiques <canvas id="toile" width="500" height="500" />
  104. 104. 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);
  105. 105. Javascript Canvas : créer des éléments graphiques
  106. 106. } HTML CSS HTML5 Javascript
  107. 107. Code source github.com/remiprev/iphonedevcampqc En action iphonedevcampqc.exomel.com Twitter : @remi
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×