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
200
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
Postman Vaultを使った秘密情報の安全な管理
nagix
3
180
Ask! NIKKEI RAG検索技術の深層
hotchpotch
5
820
SREとしてスタッフエンジニアを目指す / SRE Kaigi 2025
tjun
15
6.9k
一人から始めたSREチーム3年の歩み - 求められるスキルの変化とチームのあり方 - / The three-year journey of the SRE team, which started all by myself
vtryo
7
5.8k
顧客の声を集めて活かすリクルートPdMのVoC活用事例を徹底解剖!〜プロデザ!〜
recruitengineers
PRO
0
210
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
130
実践!OpenTelemetry
oracle4engineer
PRO
0
100
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.2k
アクセシブルなマークアップの上に成り立つユーザーファーストなドロップダウンメニューの実装 / 20250127_cloudsign_User1st_FE
bengo4com
2
1.2k
NOSTR, réseau social et espace de liberté décentralisé
rlifchitz
0
130
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
1
310
BLEAでAWSアカウントのセキュリティレベルを向上させよう
koheiyoshikawa
0
150
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Producing Creativity
orderedlist
PRO
343
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
For a Future-Friendly Web
brad_frost
176
9.5k
YesSQL, Process and Tooling at Scale
rocio
171
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Code Review Best Practice
trishagee
65
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.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