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
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
26
Go realtime with GraphQL Subscriptions
prenaudin
1
150
Startup Making-of @LeWagon for Azendoo [French]
prenaudin
0
71
BDX.IO - Maîtriser son style CSS
prenaudin
0
360
User Experience at Azendoo
prenaudin
0
300
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
120
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.2k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
170
CSC509 Lecture 04
javiergs
PRO
0
300
Cursorハンズオン実践!
eltociear
2
1.1k
CSC305 Lecture 06
javiergs
PRO
0
240
Introduce Hono CLI
yusukebe
4
1.6k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
470
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
Leading Effective Engineering Teams in the AI Era
addyosmani
6
440
AI Agent 時代的開發者生存指南
eddie
2
1.2k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
It's Worth the Effort
3n
187
28k
Building Applications with DynamoDB
mza
96
6.7k
Embracing the Ebb and Flow
colly
88
4.8k
Become a Pro
speakerdeck
PRO
29
5.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
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]