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

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

Mobile Safari

HTML CSS

HTML CSS Javascript

HTML CSS Javascript Flash

HTML No Flash, LOL. CSS Javascript Flash

HTML CSS Javascript

} HTML CSS HTML5 Javascript

HTML Nouveaux éléments

HTML Nouveaux éléments header footer nav section article time figure hgroup progress audio video

HTML › Nouveaux éléments video

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

HTML Nouveaux attributs

HTML Nouveaux attributs required contenteditable placeholder role autofocus

HTML › Nouveaux attributs placeholder

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

HTML Nouveaux types de champs

HTML Nouveaux types de champs search email tel range url datetime month color time number

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" /> <input type="number" />

HTML Meta-données

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

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" /> <meta name="viewport" content="width=device-width" />

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

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 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 rel="apple-touch-icon-precomposed" href="/icone-deja-arrangee.png" />

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

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

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

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') format('svg'); } h1 { font-family: 'Megalopolis'; }

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 ongesturestart ongesturechange ongestureend

Javascript Nouveaux événements onorientationchange

Javascript Nouveaux événements onorientationchange window.onorientationchange = function() { alert(window.orientation); // 0, 90, -90 ou 180 };

Javascript Événements supportés diﬀéremment

Javascript Événements supportés diﬀéremment onmouseover onmousemove onmousedown onmouseup onclick

Javascript Événements supportés diﬀéremment

Javascript Événements supportés diﬀé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(function(p) { alert(p.coords.latitude+', '+p.coords.longitude); });

Javascript Géolocalisation : obtenir la position

Javascript Géolocalisation : surveiller le changement de position navigator .geolocation .watchPosition(function(p) { alert(p.coords.latitude+', '+p.coords.longitude); });

Javascript Stockage : sauvegarder des données en local

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

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 = document.getElementById('toile').getContext('2d'); c.fillStyle = "#f00"; c.fillRect(10,10,100,100);

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

} HTML CSS HTML5 Javascript

Code source github.com/remiprev/iphonedevcampqc En action iphonedevcampqc.exomel.com Twitter : @remi

http://www.slideshare.net	212
http://static.slidesharecdn.com	2
http://webcache.googleusercontent.com	1
http://a0.twimg.com	1

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

by Rémi Prévost on Apr 01, 2010

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 216

Statistics

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