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

109
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.

description

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

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

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

BY-NC-SA

31 mars 2010 - iPhone + iPad DevCamp Qc

Développement Web sur iPhoneHTML, CSS et Javascript

Rémi Prévost, iXmédia inc.

Page 2: Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Page 3: Développement Web sur iPhone (iPhone+iPad DevCamp Québec)

Mobile Safari

Page 4: Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Page 5: Développement Web sur iPhone (iPhone+iPad DevCamp Québec)

HTML

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

HTMLCSS

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

HTMLCSSJavascript

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

HTMLCSSJavascriptFlash

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

HTMLCSSJavascriptFlash

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

HTMLCSSJavascriptFlash

No Flash, LOL.

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

HTMLCSSJavascript

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

HTMLCSSJavascript

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

}HTMLCSSJavascript

HTML5

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

HTML

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

Nouveaux élémentsHTML

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

Nouveaux élémentsHTML

headerfooternav

sectionarticletime

figurehgroup

progressaudiovideo

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

videoHTML › Nouveaux éléments

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

videoHTML › Nouveaux éléments

<video src="lipdub-ixmedia.mp4" width="320" height="240" controls preload></video>

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

videoHTML › Nouveaux éléments

<video src="lipdub-ixmedia.mp4" width="320" height="240" controls preload></video>

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

videoHTML › Nouveaux éléments

<video src="lipdub-ixmedia.mp4" width="320" height="240" controls preload></video>

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

Nouveaux attributsHTML

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

Nouveaux attributsHTML

requiredcontenteditable

placeholderrole

autofocus

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

placeholderHTML › Nouveaux attributs

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

placeholderHTML › Nouveaux attributs

<input placeholder="Recherche…" />

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

placeholderHTML › Nouveaux attributs

<input placeholder="Recherche…" />

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

placeholderHTML › Nouveaux attributs

<input placeholder="Recherche…" />

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

Nouveaux types de champsHTML

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

Nouveaux types de champsHTML

searchemailtel

rangeurl

datetimemonthcolortime

number

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

email et numberHTML › Nouveaux types de champs

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

email et numberHTML › Nouveaux types de champs

<input type="email" />

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

email et numberHTML › Nouveaux types de champs

<input type="email" />

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

email et numberHTML › Nouveaux types de champs

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

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

email et numberHTML › Nouveaux types de champs

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

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

Meta-donnéesHTML

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

Meta-donnéesHTML

viewportformat-detectionapple-touch-icon

apple-touch-startup-imageapple-mobile-web-app-capable

apple-mobile-web-app-status-bar-style

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

viewportHTML › Méta-données iPhone

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

viewportHTML › Méta-données iPhone

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

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

viewportHTML › Méta-données iPhone

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

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

viewportHTML › Méta-données iPhone

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

<meta name="viewport" content="width=device-width" />

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

viewportHTML › 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" />

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

format-detectionHTML › Méta-données iPhone

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

<meta name="format-detection" content="telephone=no" />

format-detectionHTML › Méta-données iPhone

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

<meta name="format-detection" content="telephone=no" />

format-detectionHTML › Méta-données iPhone

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

<meta name="format-detection" content="telephone=no" />

format-detectionHTML › Méta-données iPhone

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

<meta name="format-detection" content="telephone=no" />

format-detectionHTML › Méta-données iPhone

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

apple-touch-iconHTML › Méta-données iPhone

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

apple-touch-iconHTML › Méta-données iPhone

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

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

apple-touch-iconHTML › 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" />

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

apple-touch-iconHTML › 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" />

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

apple-touch-iconHTML › 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" />

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

apple-touch-startup-imageHTML › Méta-données iPhone

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

apple-touch-startup-imageHTML › Méta-données iPhone

<meta name="apple-touch-startup-image" content="/welcome.png" />

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

apple-touch-startup-imageHTML › Méta-données iPhone

<meta name="apple-touch-startup-image" content="/welcome.png" />

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

HTML › Méta-données iPhone

apple-mobile-web-app-capable

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

<meta name="apple-mobile-web-app-capable" content="yes" />

HTML › Méta-données iPhone

apple-mobile-web-app-capable

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

<meta name="apple-mobile-web-app-capable" content="yes" />

HTML › Méta-données iPhone

apple-mobile-web-app-capable

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

HTML › Méta-données iPhone

apple-mobile-web-status-bar-style

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

HTML › Méta-données iPhone

apple-mobile-web-status-bar-style

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

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

HTML › Méta-données iPhone

apple-mobile-web-status-bar-style

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

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

CSS

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

CSSWebKit

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

-webkit-border-radiusCSS

-webkit-border-radius: 1em;

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

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

-webkit-transformCSS

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

-webkit-box-shadowCSS

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

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

Source : ledevoir.com

-webkit-box-shadowCSS

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

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

OMG

text-shadowCSS

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

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

@font-faceCSS

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

h1 { font-family: 'Megalopolis';}

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

@font-faceCSS

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

-webkit-tap-highlight-colorCSS

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

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

Javascript

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

Nouveaux événementsJavascript

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

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

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

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

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

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

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

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

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

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

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

Nouveaux événementsJavascript

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

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

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

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

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

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

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

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

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

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

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

Nouveaux événementsJavascript

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

onorientationchange

Nouveaux événementsJavascript

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

onorientationchange

Nouveaux événementsJavascript

window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180};

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

onorientationchange

Nouveaux événementsJavascript

window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180};

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

onorientationchange

Nouveaux événementsJavascript

window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180};

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

Événements supportés différemment

Javascript

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

Événements supportés différemment

Javascript

onmouseoveronmousemoveonmousedownonmouseuponclick

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

Événements supportés différemment

Javascript

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

Événements supportés différemment

Javascript

onfocusonblur

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

Événements non supportésJavascript

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

Événements non supportésJavascript

oncutoncopyonpaste

onselection

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

Événements non supportésJavascript

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

Événements non supportésJavascript

ondragondrop

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

Géolocalisation :obtenir la position

Javascript

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

Géolocalisation :obtenir la position

Javascript

navigator.geolocation.getCurrentPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude);});

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

Géolocalisation :obtenir la position

Javascript

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

Géolocalisation : surveiller le changement de position

Javascript

navigator.geolocation.watchPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude);});

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

Stockage : sauvegarder des données en local

Javascript

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

Stockage : sauvegarder des données en local

Javascript

localStorage.setItem('foo', 'bar');localStorage.getItem('foo'); // 'bar'

localStorage['foo'] = 'bar';localStorage['foo']; // 'bar'

localStorage.clear();

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

Stockage : sauvegarder des données en local

Javascript

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

Stockage : sauvegarder des données en local

Javascript

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

Canvas : créer des éléments graphiques

Javascript

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

Canvas : créer des éléments graphiques

Javascript

<canvas id="toile" width="500" height="500" />

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

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" />

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

Canvas : créer des éléments graphiques

Javascript

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

}HTMLCSSJavascript

HTML5

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

Code sourcegithub.com/remiprev/iphonedevcampqc

En actioniphonedevcampqc.exomel.com

Twitter : @remi