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 mobile HTML5
Search
Pierre Renaudin
September 26, 2013
Programming
0
130
Développement mobile HTML5
Pierre Renaudin
September 26, 2013
Tweet
Share
More Decks by Pierre Renaudin
See All by Pierre Renaudin
Muxu.Retreat #4 - Evolution
prenaudin
0
24
Go realtime with GraphQL Subscriptions
prenaudin
1
150
Startup Making-of @LeWagon for Azendoo [French]
prenaudin
0
70
BDX.IO - Maîtriser son style CSS
prenaudin
0
350
User Experience at Azendoo
prenaudin
0
290
Other Decks in Programming
See All in Programming
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
150
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
100
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
100
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
180
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
750
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
7.2k
PicoRuby on Rails
makicamel
2
120
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building Adaptive Systems
keathley
43
2.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Docker and Python
trallard
44
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
250
Documentation Writing (for coders)
carmenintech
72
4.9k
How GitHub (no longer) Works
holman
314
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Transcript
Node – Bordeaux JS 26 septembre 2013 Pierre Renaudin Développeur
Front-End chez Azendoo DÉVELOPPEMENT MOBILE HTML5
COMMENT DÉVELOPPER UNE APPLICATION POUR DES TÉLÉPHONES MOBILES AVEC INTERNET
DANS LES ANNÉES 2010 ?
HTML5 CSS3 WEBGL Single Page Application Responsive AJAX
OUI LE JAVASCRIPT EST PRÊT POUR FAIRE DES APPLICATIONS MOBILES
Sencha a réalisé un client HTML5 pour Facebook
ADAPTER SON APPLICATION AU MOBILE
None
None
None
MEDIA QUERIES
Utiliser un framework CSS ( Bootstrap 3 )
Tester les capacités du terminal mobile ( Modernizr ) -
Ajoute des classes CSS : .csstransitions - Teste en JavaScript : Modernizr.websockets
Choisir la librairie de manipulation du DOM ( Zepto )
- API similaire à jQuery - Optimisé pour l’utilisation sur mobile
Fonctions dédiées pour le mobile
Utiliser les TouchEvents $el.on(‘touchstart’, function(){ alert(‘TOUCH ME AGAIN’); });
UN CLICK AJOUTE UN DÉLAI DE 300 MS SUR UN
MOBILE
Détecter la localisation du terminal navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options);
Faire vibrer le téléphone navigator.vibrate(100); navigator.vibrate([ 50, 100, 50])
Contrôler la batterie du téléphone navigator.battery.charging : boolean navigator.battery.level :
0.0 – 1.0
Envoyer des notifications var notification = new Notification( ‘test’, {
title: ‘C’est moi’, body: ‘COUCOU’, url: ‘..jpg’ } )
Stocker des informations localStorage.setItem( ‘a’, ‘html5 rocks’ ) localStorage.getItem(‘a’) localStorage.clear()
Mettre en cache les assets ## <html manifest="site.manifest »> CACHE
MANIFEST # v0.1 CACHE: index.html css/style.css img/logo.png
Utiliser les formulaires HTML5 <input type=‘url’ /> <input type=‘date’
/>
TOUCH EVENTS MOTION SENSORS NATIVE FORM VIBRATION BATTERY LOCAL STORAGE
AUDIO / VIDEO HTML TAGS
OK MAINTENANT ON VEUT JOUER
$ -> npm install -g yo bower grunt-cli generator-mobile-boilerplate $
-> yo mobile-boilerplate …. DO YOUR AWESOME APP $ -> bower install $ -> grunt build && grunt deploy Utiliser les bons outils
Publier son application avec Phonegap
https://speakerdeck.com/prenaudin/ developpement-mobile-html5 Pierre Renaudin Développeur Front-End chez Azendoo http://azendoo.com Contact
:
[email protected]