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.

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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