Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Développement Web sur iPhone
Search
Rémi Prévost
March 31, 2010
Technology
2
130
Développement Web sur iPhone
Rémi Prévost
March 31, 2010
Tweet
Share
More Decks by Rémi Prévost
See All by Rémi Prévost
Building a strong and explicit engineering culture
remi
0
210
Dispatch, a quick overview of neat Elixir features
remi
1
210
Ecto Embedded Schemas
remi
0
290
Constance et qualité du code dans une équipe
remi
0
290
Développement Web Moderne — méthodes de travail et principes éprouvés
remi
1
550
tmux, teamocil & friends
remi
1
400
RSpec: natural behavior testing for Rails applications
remi
3
400
Introduction à RSpec
remi
5
310
Her
remi
3
310
Other Decks in Technology
See All in Technology
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
Larkご案内資料
customercloud
PRO
0
600
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
We Have a Design System, Now What?
morganepeng
51
7.4k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Side Projects
sachag
452
42k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
A designer walks into a library…
pauljervisheath
205
24k
How STYLIGHT went responsive
nonsquared
98
5.3k
Thoughts on Productivity
jonyablonski
69
4.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
A better future with KSS
kneath
238
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Transcript
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.
Mobile Safari
HTML CSS Javascript Flash No Flash, LOL.
} HTML CSS Javascript HTML 5
HTML
Nouveaux éléments HTML header footer nav section article time figure
hgroup progress audio video
video HTML › Nouveaux éléments <video src="lipdub-ixmedia.mp4" width="320" height="240" controls
preload> </video>
Nouveaux attributs HTML required contenteditable placeholder role autofocus
placeholder HTML › Nouveaux attributs <input placeholder="Recherche…" />
Nouveaux types de champs HTML search email tel range url
datetime month color time number
email et number HTML › Nouveaux types de champs <input
type="number" /> <input type="email" />
Meta-données HTML viewport format-detection apple-touch-icon apple-touch-startup-image apple-mobile-web-app-capable apple-mobile-web-app-status-bar-style
viewport HTML › 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" />
<meta name="format-detection" content="telephone=no" /> format-detection HTML › Méta-données iPhone
apple-touch-icon HTML › 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-image HTML › Méta-données iPhone <meta name="apple-touch-startup-image" content="/welcome.png" />
<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 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
CSS WebKit
-webkit-border-radius CSS -webkit-border-radius: 1em;
-webkit-transform: rotate(90deg) scale(1.5); -webkit-transform CSS
Source : ledevoir.com -webkit-box-shadow CSS -webkit-box-shadow: 9px 9px 30px rgba(255,0,255,0.9);
OMG text-shadow CSS text-shadow: 15px 15px 2px #ffff66;
@font-face CSS @font-face { font-family: 'Megalopolis'; src: url('Megalopolis.svg#MegalopolisExtra') format('svg'); }
h1 { font-family: 'Megalopolis'; }
@font-face CSS
-webkit-tap-highlight-color CSS propriété non-déclarée -webkit-tap-highlight-color: rgba(255,0,0,0.5);
Javascript
ontouchstart ontouchmove ontouchend ontouchcancel Nouveaux événements Javascript
ongesturestart ongesturechange ongestureend Nouveaux événements Javascript
onorientationchange Nouveaux événements Javascript window.onorientationchange = function() { alert(window.orientation); //
0, 90, -90 ou 180 };
Événements supportés différemment Javascript onmouseover onmousemove onmousedown onmouseup onclick
Événements supportés différemment Javascript onfocus onblur
Événements non supportés Javascript oncut oncopy onpaste onselection
Événements non supportés Javascript ondrag ondrop
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 localStorage.setItem('foo', 'bar');
localStorage.getItem('foo'); // 'bar' localStorage['foo'] = 'bar'; localStorage['foo']; // 'bar' localStorage.clear();
Stockage : sauvegarder des données en local Javascript
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
} HTML CSS Javascript HTML 5
Code source github.com/remiprev/iphonedevcampqc En action iphonedevcampqc.exomel.com Twitter : @remi