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
110
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
190
Dispatch, a quick overview of neat Elixir features
remi
1
130
Ecto Embedded Schemas
remi
0
230
Constance et qualité du code dans une équipe
remi
0
250
Développement Web Moderne — méthodes de travail et principes éprouvés
remi
1
510
tmux, teamocil & friends
remi
1
380
RSpec: natural behavior testing for Rails applications
remi
3
370
Introduction à RSpec
remi
5
300
Her
remi
3
300
Other Decks in Technology
See All in Technology
Cloud Service Mesh に触れ合う
phaya72
1
200
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
130
いいたいことちゃんという
tkengo
0
230
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
140
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
360
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
400
require(ESM)とECMAScript仕様
uhyo
4
960
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
37k
Max out Local LLM in Challenging Environments
sashimimochi
1
110
アクセス制御にまつわる改善 / Improving access control
itkq
0
590
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
A Philosophy of Restraint
colly
197
16k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Docker and Python
trallard
35
2.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Git: the NoSQL Database
bkeepers
PRO
423
63k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
8
1.3k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Designing for Performance
lara
602
67k
Product Roadmaps are Hard
iamctodd
45
9.7k
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