Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Développement mobile HTML5

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Pierre Renaudin Pierre Renaudin
September 26, 2013
Programming
150
0

Développement mobile HTML5

Avatar for Pierre Renaudin

Pierre Renaudin

September 26, 2013

More Decks by Pierre Renaudin

See All by Pierre Renaudin
Muxu.Retreat #4 - Evolution
Avatar for Pierre Renaudin prenaudin
0
41
Go realtime with GraphQL Subscriptions
Avatar for Pierre Renaudin prenaudin
1
190
Startup Making-of @LeWagon for Azendoo [French]
Avatar for Pierre Renaudin prenaudin
0
89
BDX.IO - Maîtriser son style CSS
Avatar for Pierre Renaudin prenaudin
0
390
User Experience at Azendoo
Avatar for Pierre Renaudin prenaudin
0
360

Other Decks in Programming

See All in Programming
そのテスト、説明できますか？~LWテスト戦略FW~のご紹介
Avatar for Kei Nakahara nakahara
0
150
Contextとはなにか
Avatar for chiroruxx chiroruxx
1
330
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
410
メソッドのジェネリクスでGoの夢は広がるか？ / Kyoto.go #65
Avatar for utagawa kiki utgwkk
3
840
その問い、本当に正しいですか？AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
Avatar for MinoDriven minodriven
11
5.8k
New "Type" system on PicoRuby
Avatar for pocke pocke
1
970
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
Avatar for MinoDriven minodriven
21
6.7k
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
840
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
790
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
550
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
610
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
Avatar for ioki ioki
0
210

Featured

See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.3k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
210
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
200
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.5k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k

Transcript

  1. Node – Bordeaux JS 26 septembre 2013 Pierre Renaudin Développeur

    Front-End chez Azendoo DÉVELOPPEMENT MOBILE HTML5

  2. COMMENT DÉVELOPPER UNE APPLICATION POUR DES TÉLÉPHONES MOBILES AVEC INTERNET

    DANS LES ANNÉES 2010 ?

  3. HTML5 CSS3 WEBGL Single Page Application Responsive AJAX

  4. OUI LE JAVASCRIPT EST PRÊT POUR FAIRE DES APPLICATIONS MOBILES

  5. Sencha a réalisé un client HTML5 pour Facebook

  6. ADAPTER SON APPLICATION AU MOBILE

  7. None
  8. None
  9. None

  10. MEDIA QUERIES

  11. Utiliser un framework CSS ( Bootstrap 3 )

  12. Tester les capacités du terminal mobile ( Modernizr ) -

    Ajoute des classes CSS : .csstransitions - Teste en JavaScript : Modernizr.websockets

  13. Choisir la librairie de manipulation du DOM ( Zepto )

    - API similaire à jQuery - Optimisé pour l’utilisation sur mobile

  14. Fonctions dédiées pour le mobile

  15. Utiliser les TouchEvents $el.on(‘touchstart’, function(){ alert(‘TOUCH ME AGAIN’); });

  16. UN CLICK AJOUTE UN DÉLAI DE 300 MS SUR UN

    MOBILE

  17. Détecter la localisation du terminal navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options);

  18. Faire vibrer le téléphone navigator.vibrate(100); navigator.vibrate([ 50, 100, 50])

  19. Contrôler la batterie du téléphone navigator.battery.charging : boolean navigator.battery.level :

    0.0 – 1.0

  20. Envoyer des notifications var notification = new Notification( ‘test’, {

    title: ‘C’est moi’, body: ‘COUCOU’, url: ‘..jpg’ } )

  21. Stocker des informations localStorage.setItem( ‘a’, ‘html5 rocks’ ) localStorage.getItem(‘a’) localStorage.clear()

  22. Mettre en cache les assets ## <html  manifest="site.manifest  »> CACHE

    MANIFEST # v0.1 CACHE: index.html css/style.css img/logo.png

  23. Utiliser les formulaires HTML5 <input  type=‘url’  />   <input  type=‘date’

     />  

  24. TOUCH EVENTS MOTION SENSORS NATIVE FORM VIBRATION BATTERY LOCAL STORAGE

    AUDIO / VIDEO HTML TAGS

  25. OK MAINTENANT ON VEUT JOUER

  26. $ -> 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

  27. Publier son application avec Phonegap

  28. https://speakerdeck.com/prenaudin/ developpement-mobile-html5 Pierre Renaudin Développeur Front-End chez Azendoo http://azendoo.com Contact

    : [email protected]