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
140
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
Le futur du rôle de développeur·euse dans l’écosystème numérique
remi
0
25
Building a strong and explicit engineering culture
remi
0
230
Dispatch, a quick overview of neat Elixir features
remi
1
250
Ecto Embedded Schemas
remi
0
330
Constance et qualité du code dans une équipe
remi
0
310
Développement Web Moderne — méthodes de travail et principes éprouvés
remi
1
560
tmux, teamocil & friends
remi
1
420
RSpec: natural behavior testing for Rails applications
remi
3
440
Introduction à RSpec
remi
5
320
Other Decks in Technology
See All in Technology
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
120
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
220
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
270
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
140
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
920
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
320
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
100
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
480
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
1.8k
Featured
See All Featured
Done Done
chrislema
185
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
We Have a Design System, Now What?
morganepeng
53
7.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How to Ace a Technical Interview
jacobian
280
24k
Bash Introduction
62gerente
615
210k
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