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
120
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
17
Go realtime with GraphQL Subscriptions
prenaudin
1
130
Startup Making-of @LeWagon for Azendoo [French]
prenaudin
0
63
BDX.IO - Maîtriser son style CSS
prenaudin
0
330
User Experience at Azendoo
prenaudin
0
230
Other Decks in Programming
See All in Programming
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
最近追加した型の紹介とその振り返り
aki19035vc
0
180
日付と正規化
megmogmog1965
0
140
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
リハビリmruby
kishima
1
160
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
CSC307 Lecture 10
javiergs
PRO
0
310
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Practical Orchestrator
shlominoach
185
10k
Being A Developer After 40
akosma
72
580k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Optimizing for Happiness
mojombo
373
69k
Visualization
eitanlees
139
14k
Facilitating Awesome Meetings
lara
46
5.8k
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]