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
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
プロセス改善による品質向上事例
tomasagi
1
1.6k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
Larkご案内資料
customercloud
PRO
0
600
Featured
See All Featured
Code Review Best Practice
trishagee
66
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Bash Introduction
62gerente
610
210k
Unsuck your backbone
ammeep
669
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Visualization
eitanlees
146
15k
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