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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Pierre Renaudin
September 26, 2013
Programming
0
140
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
32
Go realtime with GraphQL Subscriptions
prenaudin
1
180
Startup Making-of @LeWagon for Azendoo [French]
prenaudin
0
82
BDX.IO - Maîtriser son style CSS
prenaudin
0
380
User Experience at Azendoo
prenaudin
0
340
Other Decks in Programming
See All in Programming
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
組織で育むオブザーバビリティ
ryota_hnk
0
180
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.5k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
700
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
並行開発のためのコードレビュー
miyukiw
0
180
Oxlintはいいぞ
yug1224
5
1.3k
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
180
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.9k
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
380
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
130
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Featured
See All Featured
Designing for Performance
lara
610
70k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
170
Design in an AI World
tapps
0
140
Facilitating Awesome Meetings
lara
57
6.8k
The Curious Case for Waylosing
cassininazir
0
240
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Everyday Curiosity
cassininazir
0
130
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
260
Making the Leap to Tech Lead
cromwellryan
135
9.7k
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]