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.

Mobile Safari

HTML

HTMLCSS

HTMLCSSJavascript

HTMLCSSJavascriptFlash

HTMLCSSJavascriptFlash

HTMLCSSJavascriptFlash

No Flash, LOL.

HTMLCSSJavascript

HTMLCSSJavascript

}HTMLCSSJavascript

HTML5

HTML

Nouveaux élémentsHTML

Nouveaux élémentsHTML

headerfooternav

sectionarticletime

figurehgroup

progressaudiovideo

videoHTML › Nouveaux éléments

videoHTML › Nouveaux éléments

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

videoHTML › Nouveaux éléments

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

videoHTML › Nouveaux éléments

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

Nouveaux attributsHTML

Nouveaux attributsHTML

requiredcontenteditable

placeholderrole

autofocus

placeholderHTML › Nouveaux attributs

placeholderHTML › Nouveaux attributs

<input placeholder="Recherche…" />

placeholderHTML › Nouveaux attributs

<input placeholder="Recherche…" />

placeholderHTML › Nouveaux attributs

<input placeholder="Recherche…" />

Nouveaux types de champsHTML

Nouveaux types de champsHTML

searchemailtel

rangeurl

datetimemonthcolortime

number

email et numberHTML › Nouveaux types de champs

email et numberHTML › Nouveaux types de champs

<input type="email" />

email et numberHTML › Nouveaux types de champs

<input type="email" />

email et numberHTML › Nouveaux types de champs

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

email et numberHTML › Nouveaux types de champs

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

Meta-donnéesHTML

Meta-donnéesHTML

viewportformat-detectionapple-touch-icon

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

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

viewportHTML › Méta-données iPhone

viewportHTML › Méta-données iPhone

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

viewportHTML › Méta-données iPhone

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

viewportHTML › Méta-données iPhone

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML › Méta-données iPhone

apple-mobile-web-app-capable

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

HTML › Méta-données iPhone

apple-mobile-web-app-capable

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

HTML › Méta-données iPhone

apple-mobile-web-app-capable

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" content="black-translucent" />

HTML › Méta-données iPhone

apple-mobile-web-status-bar-style

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

CSS

CSSWebKit

-webkit-border-radiusCSS

-webkit-border-radius: 1em;

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

-webkit-transformCSS

-webkit-box-shadowCSS

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

Source : ledevoir.com

-webkit-box-shadowCSS

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

OMG

text-shadowCSS

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

@font-faceCSS

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

h1 { font-family: 'Megalopolis';}

@font-faceCSS

-webkit-tap-highlight-colorCSS

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

Javascript

Nouveaux événementsJavascript

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

ontouchstartontouchmoveontouchend

ontouchcancel

Nouveaux événementsJavascript

Nouveaux événementsJavascript

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

ongesturestartongesturechangeongestureend

Nouveaux événementsJavascript

Nouveaux événementsJavascript

onorientationchange

Nouveaux événementsJavascript

onorientationchange

Nouveaux événementsJavascript

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

onorientationchange

Nouveaux événementsJavascript

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

onorientationchange

Nouveaux événementsJavascript

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

Événements supportés différemment

Javascript

Événements supportés différemment

Javascript

onmouseoveronmousemoveonmousedownonmouseuponclick

Événements supportés différemment

Javascript

Événements supportés différemment

Javascript

onfocusonblur

Événements non supportésJavascript

Événements non supportésJavascript

oncutoncopyonpaste

onselection

Événements non supportésJavascript

Événements non supportésJavascript

ondragondrop

Géolocalisation :obtenir la position

Javascript

Géolocalisation :obtenir la position

Javascript

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

Géolocalisation :obtenir la position

Javascript

Géolocalisation : surveiller le changement de position

Javascript

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

Stockage : sauvegarder des données en local

Javascript

Stockage : sauvegarder des données en local

Javascript

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

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

localStorage.clear();

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

Javascript

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

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

Canvas : créer des éléments graphiques

Javascript

}HTMLCSSJavascript

HTML5

Code sourcegithub.com/remiprev/iphonedevcampqc

En actioniphonedevcampqc.exomel.com

Twitter : @remi