HTML5 : API senseurs et notifications
Adresses derrière les liens

Contexte de la formation pour les API des senseurs et notifications
Écran 2
  1. www.espacecourbeformation.com/fr/cours/html5-senseurs-notifications/ https://www.espacecourbeformation.com/fr/cours/html5-senseurs-notifications/
Progressive Web Apps
Écran 3
  1. validateur de manifeste Web https://manifest-validator.appspot.com/
Pourquoi des PWA et non des apps natives?
Écran 4
  1. Starbucks Progressive Web App - Case Study https://formidable.com/work/starbucks-progressive-web-app/
  2. repérer des PWA sur AppScope https://appsco.pe/
Mise en garde et approche choisie
Écran 5
  1. @firt sur medium.com https://medium.com/@firt
  2. iPhone 11, iPadOS and iOS 13 for PWAs and web development https://medium.com/@firt/iphone-11-ipados-and-ios-13-for-pwas-and-web-development-5d5d9071cc49
Introduction à la géolocalisation dans les navigateurs
Écran 9
  1. Mobile First http://izibook.eyrolles.com/store/show/9782212134063
API géolocalisation
Écran 10
  1. géolocalisation du W3C http://www.w3.org/TR/geolocation-API/
Survol de l'API : les méthodes en bref
Écran 11
  1. support de la géolocalisation commence à être déprécié sur les origines non-sécurisées https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins
Que se passe-t-il lorsqu'on roule le code ?
Écran 13
  1. permettre aux navigateurs au niveau du système d'exploitation https://github.com/mdn/sprints/issues/1032#issuecomment-517447453
Objet Position
Écran 15
  1. Position https://developer.mozilla.org/fr/docs/Web/API/Position
  2. Coordinates https://developer.mozilla.org/fr/docs/Web/API/Coordinates
Objet PositionError
Écran 16
  1. PositionError https://developer.mozilla.org/fr/docs/Web/API/PositionError
Objet PositionOptions
Écran 18
  1. PositionOptions https://developer.mozilla.org/fr/docs/Web/API/PositionOptions
Difficultés pour bâtir un site ou une application géoréférencée
Écran 23
  1. How Accurate is HTML5 Geolocation, really? http://www.andygup.net/how-accurate-is-html5-geolocation-really-part-2-mobile-web/
  2. How the iPhone knows where you are http://www.macworld.com/article/1159528/smartphones/how-iphone-location-works.html
Exercice : localiser la position calculer la distance à une liste de points d'intérêt
Écran 24
  1. formule de Haversine https://fr.wikipedia.org/wiki/Formule_de_haversine
Exemple : tri de lieux par proximité
Écran 25
  1. Guide des musées https://www.musees.qc.ca/fr/musees/guide
Exemple : livraison de contenu géoréférencé
Écran 26
  1. MobiCulte, à la découvert des lieux de culte près de moi http://www.mobiculte.ca/
Exercice : localiser la position et mettre sur carte Google (p. 2/2)
Écran 28
  1. http://trucshtml5.com/demos/geolocalisation/ou-suis-je.html http://trucshtml5.com/demos/geolocalisation/ou-suis-je.html
Capturer image et son
Écran 30
  1. Capturing an Image from the User https://developers.google.com/web/fundamentals/media/capturing-images/
  2. Recording Video from the User https://developers.google.com/web/fundamentals/media/recording-video/
  3. Recording Audio from the User https://developers.google.com/web/fundamentals/media/recording-audio/
  4. Using the MediaStream Recording API https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
Capture d'images et de vidéos méthode 1
Écran 31
  1. attribut capture https://w3c.github.io/html-media-capture/#the-capture-attribute
  2. attribut accept https://www.w3.org/TR/html51/sec-forms.html#element-attrdef-input-accept
Capture d'images et de vidéos méthode 2
Écran 39
  1. getUserMedia sur MDN https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
Support de l'API Stream (getUserMedia)
Écran 40
  1. caniuse.com https://caniuse.com/#feat=stream
Quelques propriétés pour l'objet constraint
Écran 43
  1. Media Capture Streams sur W3C https://www.w3.org/TR/mediacapture-streams/
  2. MediaDevices.getUserMedia() sur MDN https://developer.mozilla.org/fr/docs/Web/API/MediaDevices/getUserMedia
Obtenir la liste des caméras
Écran 44
  1. Choosing cameras in JavaScript with the mediaDevices API https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html
Exercice : intégrer un lecteur de code QR (p. 1/2)
Écran 51
  1. Bootstrap webpack jQuery boilerplate https://github.com/xxhomey19/bootstrap-webpack-jquery-boilerplate/
  2. libraire jsQR de cozmo https://github.com/cozmo/jsQR
Exercice : intégrer un lecteur de code QR (p. 2/2)
Écran 52
  1. jsQR demo https://cozmo.github.io/jsQR/
  2. jsQR demo https://cozmo.github.io/jsQR/
Capture de sons
Écran 53
  1. Correct Syntax for HTML Media Capture https://blog.addpipe.com/correct-syntax-html-media-capture/
  2. Record voice from IPhone using HTML5 https://stackoverflow.com/questions/25287112/record-voice-from-iphone-using-html5#25288575
Capture de sons méthode 2 : exemple de code (p. 1/2)
Écran 57
  1. Recording Audio from the User https://developers.google.com/web/fundamentals/media/recording-audio#save_the_data_from_the_microphone
Capture de sons méthode 2 : exemple de code (p. 2/2)
Écran 58
  1. How can I add predefined length to audio recorded from MediaRecorder in Chrome? https://stackoverflow.com/a/39971175
  2. https://webaudiodemos.appspot.com/AudioRecorder/index.html https://webaudiodemos.appspot.com/AudioRecorder/index.html
  3. https://mido22.github.io/MediaRecorder-sample/ https://mido22.github.io/MediaRecorder-sample/
  4. API MediaRecorder sur MDN https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
Support de l'API MediaRecorder
Écran 59
  1. caniuse.com https://caniuse.com/#feat=mediarecorder
Exercice : le Dictaphone (p. 1/2)
Écran 60
  1. Using the MediaStream Recording API https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
Orientation de l'écran - principe général (p. 2/2)
Écran 64
  1. The Screen Orientation API https://www.w3.org/TR/screen-orientation/
  2. ScreenOrientation https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation
Types d'orientation
Écran 65
  1. HTML5: Screen Orientation API Uses Javascript to Rotate the Screen https://www.jotform.com/blog/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639/
Support de l'API Screen orientation
Écran 66
  1. caniuse.com https://caniuse.com/#search=screen%20or
  2. Detect iOS Device Orientation with JavaScript http://www.williammalone.com/articles/html5-javascript-ios-orientation/
Présentation de l'API de vibration
Écran 71
  1. MDN adresse privée
  2. Vibration API sur W3C https://w3c.github.io/vibration/
Support de l'API de vibration
Écran 72
  1. caniuse.com https://caniuse.com/#feat=vibration
Présentation de l'API de notification
Écran 73
  1. Notification sur MDN https://developer.mozilla.org/fr/docs/Web/API/notification
  2. Using the Notification API sur MDN https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
Support de l'API de notification
Écran 74
  1. pour Mac OS il faut version 59+ https://dzone.com/articles/web-push-notifications-for-ios-are-we-there-yet
  2. article sur le sujet https://dzone.com/articles/web-push-notifications-for-ios-are-we-there-yet
  3. caniuse.com https://caniuse.com/#feat=notifications
  4. Browser support https://developer.mozilla.org/en-US/docs/Web/API/notification#Browser_compatibility
Options de configuration (p. 2/2)
Écran 76
  1. Notifications API sur WhatWG https://notifications.spec.whatwg.org/#notifications
Utiliser les notifications avec discernement
Écran 78
  1. Deep user engagement with web push notifications https://www.youtube.com/watch?v=_dXBibRO0SM&t=325
Illustration des composantes d'une notification
Écran 83
  1. Displaying a Notification https://web-push-book.gauntface.com/chapter-05/02-display-a-notification/
Support de l'API Push
Écran 97
  1. annonce https://blog.chromium.org/2015/03/chrome-42-beta-push-notifications_12.html
  2. implémentation existe mais différente https://developer.apple.com/notifications/safari-push-notifications/
  3. caniuse.com https://caniuse.com/#feat=push-api
  4. Compatibilité des navigateurs https://developer.mozilla.org/fr/docs/Web/API/Push_API#Compatibilit%C3%A9_des_navigateurs
Ne pas mélanger "API Push" et "Notification Web Push"
Écran 98
  1. Push API https://developer.mozilla.org/fr/docs/Web/API/Push_API
  2. Les notifications Web Push dans Firefox https://support.mozilla.org/fr/kb/notifications-web-push-firefox
  3. Push API https://www.w3.org/TR/push-api/
Terminologie
Écran 99
  1. Introduction to Push Notifications https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications
Grandes étapes de la mise en fonctionnement (p. 1/2)
Écran 100
  1. Pete LePage Google I/O 2016 https://youtu.be/_dXBibRO0SM
Grandes étapes de la mise en fonctionnement (p. 2/2)
Écran 101
  1. How Push Works https://web-push-book.gauntface.com/chapter-01/02-how-push-works/
  2. Pete LePage Google I/O 2016 https://youtu.be/_dXBibRO0SM
  3. Adding Push Notifications to a Web App https://codelabs.developers.google.com/codelabs/push-notifications/
Diagramme de séquence
Écran 102
  1. Sequence diagram https://www.w3.org/TR/push-api/#sequence-diagram
Étape 2 : envoyer un message au service push
Écran 107
  1. The Web Push Protocol https://developers.google.com/web/fundamentals/push-notifications/web-push-protocol
  2. Web Push Protocol https://tools.ietf.org/html/draft-ietf-webpush-protocol-12
Étape 3 : finaliser le Service Worker
Écran 108
  1. Deep user engagement with web push notifications https://www.youtube.com/watch?v=_dXBibRO0SM&t=1669
  2. exemple de waitUntil dans Push Events https://developers.google.com/web/fundamentals/push-notifications/handling-messages
Démo : Push Codelab
Écran 109
  1. https://trucshtml5.com/demos/web-push/ https://trucshtml5.com/demos/web-push/
Démo : OneSignal.com
Écran 116
  1. https://trucshtml5.com/demos/web-push/saas/onesignal/ https://trucshtml5.com/demos/web-push/saas/onesignal/
Lectures diverses
Écran 117
  1. 11 Reasons To Start Using Web Notifications Today https://www.urbanairship.com/blog/web-notifications-and-why-to-use-them
  2. L'impact des notifications web push sur votre SEO https://fr.oncrawl.com/referencement/impact-notifications-web-push-seo/
  3. How Tiny Red Dots Took Over Your Life https://www.nytimes.com/2018/02/27/magazine/red-dots-badge-phones-notification.html
  4. Notifications are broken. Here's how Apple and Google can fix them https://mashable.com/2018/03/09/how-to-fix-push-notifications/
  5. Turn Off Your Push Notifications. All of Them https://www.wired.com/story/turn-off-your-push-notifications/
  6. Notifications - Human Interface Guidelines https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications/
Méthode 1 - événements tactiles (touch events) seulement
Écran 121
  1. Touch Events https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
  2. Touchy-Feely with DOM Events: Rethinking Cross-Device User Interaction https://girliemac.com/blog/2013/04/17/touchy-feely-with-dom-events-rethinking-cross-device-user-interaction/
Support des événements tactiles
Écran 122
  1. caniuse.com https://caniuse.com/#search=touch
Événement tactile (TouchEvent)
Écran 123
  1. TouchEvent https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
Vue d'ensemble pour l'API touch
Écran 124
  1. www.atmarkit.co.jp https://www.atmarkit.co.jp/ait/articles/1210/24/news023.html
Interface Touch
Écran 125
  1. Touch Interface https://developer.mozilla.org/en-US/docs/Web/API/Touch
Positionner l'événement tactile
Écran 126
  1. www.atmarkit.co.jp https://www.atmarkit.co.jp/ait/articles/1210/24/news023.html
Événements tactiles : exemple pratique (p. 2/2)
Écran 128
  1. Disable scrolling when touch moving certain element https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
  2. https://trucshtml5.com/demos/pointer/glisser/touch-events.html https://trucshtml5.com/demos/pointer/glisser/touch-events.html
  3. patrickhlauke.github.io/touch https://patrickhlauke.github.io/touch
Bonnes pratiques avec le traitement des événements pour pointer
Écran 129
  1. Add Touch to Your Site https://developers.google.com/web/fundamentals/design-and-ux/input/touch/
  2. Touch in a Web App? No Problem https://www.youtube.com/watch?v=Rwc4fHUnGuU
Méthode 2 : événements de souris et événements tactiles combinés (p. 1/2)
Écran 130
  1. https://trucshtml5.com/demos/pointer/glisser/touch-and-mouse-events.html https://trucshtml5.com/demos/pointer/glisser/touch-and-mouse-events.html
Méthode 3 - événements de pointeur (pointer events)
Écran 132
  1. Pointer events https://www.w3.org/TR/pointerevents/#pointerevent-interface
Principe des événements de pointeurs
Écran 133
  1. Pointer events https://www.w3.org/TR/pointerevents/#pointerevent-interface
Support des événements de pointage
Écran 134
  1. caniuse.com https://caniuse.com/#feat=pointer
  2. prothèses d'émulation HTML5 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#pointer-events-api
Événements de pointage : exemple pratique
Écran 135
  1. https://trucshtml5.com/demos/pointer/glisser/pointer-events.html https://trucshtml5.com/demos/senseurs/dragdrop/pointer.html
  2. patrickhlauke.github.io/touch/handjs/tracker/tracker-just-pointer.html https://patrickhlauke.github.io/touch/handjs/tracker/tracker-just-pointer.html
Traiter les différentes gestuelles
Écran 136
  1. Touch Gesture Reference Guide https://www.lukew.com/ff/entry.asp?1071
Abstraction des contrôles gestuelles : exemple avec hammer.js
Écran 137
  1. https://trucshtml5.com/demos/pointer/gestuelles/hammerjs/ https://trucshtml5.com/demos/senseurs/gestuelles/hammerjs/
Gestuelle en conflit avec le navigateur: utiliser touch-action de CSS
Écran 138
  1. https://youtu.be/-1qCHbS5DzI https://youtu.be/-1qCHbS5DzI
  2. démo des touch actions https://www.chenhuijing.com/touch-action/
  3. Touch Action Options https://developers.google.com/web/updates/2016/10/touch-action
Bilan sur les opérations de pointeurs
Écran 140
  1. Add Touch to Your Site https://developers.google.com/web/fundamentals/design-and-ux/input/touch/
Fonctionnement de la reconnaissance de la parole
Écran 142
  1. API de reconnaissance de la parole https://w3c.github.io/speech-api/
Démonstration de la reconnaissance de la parole
Écran 143
  1. Speech color changer https://github.com/mdn/web-speech-api/tree/master/speech-color-changer
  2. page Web de la démo https://mdn.github.io/web-speech-api/speech-color-changer/
  3. couleurs HTML https://en.wikipedia.org/wiki/Web_colors
Exemple : Sélecteur de couleur de fond contrôlé par la voix
Écran 144
  1. Speech color changer https://github.com/mdn/web-speech-api/tree/master/speech-color-changer
Essentiel d'obtenir la permission avant...
Écran 145
  1. Browser support https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#Browser_support
Support de l'API de reconnaissance vocale
Écran 147
  1. caniuse.com https://caniuse.com/#search=speech
  2. Browser support https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#Browser_support
Étape 2 : définition de la grammaire
Écran 149
  1. JavaScript Speech Grammar Format https://www.w3.org/TR/jsgf/
  2. grammaire est vraiment utilisée https://github.com/WICG/speech-api/issues/57
Propriétés pour l'objet SpeechRecognition
Écran 153
  1. propriétés pour l'objet SpeechRecognition https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Properties
Étape 4 : initier la reconnaissance vocale
Écran 155
  1. liste des événements pour l'objet SpeechRecognition https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Event_handlers
Étape 5 : traiter le résultat de l'analyse
Écran 156
  1. SpeechRecognitionResultList https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResultList
  2. SpeechRecognitionResult https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResult
  3. SpeechRecognitionAlternative https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionAlternative
Exercice : faire un contrôleur de lecteur vidéo activé par la voix (p. 3/3)
Écran 160
  1. suggestion sur StackOverflow https://stackoverflow.com/questions/44226827/how-to-know-if-webkitspeechrecognition-is-started
  2. API HTML5 et CSS: défi CSS pour lecteur vidéo contrôlé par la voix - partie 1 https://www.youtube.com/watch?v=XQytyNh1IuI
  3. API HTML5 et CSS: défi CSS pour lecteur vidéo contrôlé par la voix - partie 2 https://www.youtube.com/watch?v=gHUlNc0CJ3s
Ce que nous n'avons pas appris
Écran 163
  1. liste des API Web du MDN https://developer.mozilla.org/en-US/docs/Web/API
  2. What Web Can Do Today https://whatwebcando.today/
  3. HTML5 : les API fondamentales http://www.technologia.com/fr/technologies-de-linformation/developpement-web/html/html5/
Exemple d'un outil intégrateur
Écran 164
  1. vidéo montre un exemple d'intégration avec l'usage de la caméra avec Kuzzle.io https://www.youtube.com/watch?v=lcnCZJOMtCY

Tous droits réservés 2020, Espace Courbe Formation inc. —1 mars 2020 — 18:50:04