Date post: | 15-May-2015 |
Category: |
Technology |
Upload: | remi-prevost |
View: | 10,750 times |
Download: | 0 times |
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