HTML5 : les API fondamentales
Adresses derrière les liens

Références générales
Écran 2
  1. HTML dernière version https://www.w3.org/TR/html/
  2. HTML 5.2 https://www.w3.org/TR/2017/REC-html52-20171214/
  3. WhatWG : la norme en évolution https://html.spec.whatwg.org/
  4. HTML5 Doctor http://html5doctor.com/
  5. Web Fundamentals https://developers.google.com/web/fundamentals/
  6. www.espacecourbeformation.com/fr/cours/html5-api-fondamentales/ https://www.espacecourbeformation.com/fr/cours/html5-api-fondamentales/
Bref sommaire des API périphériques
Écran 5
  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/
Famille HTML5
Écran 6
  1. liste des standards pour bâtir la plateforme Web au WHATWG https://spec.whatwg.org/
Règles de syntaxe du HTML5
Écran 10
  1. écritures à la XHTML http://www.w3.org/TR/html5/the-xhtml-syntax.html
Règles de syntaxe du HTML5 (suite)
Écran 11
  1. valeurs pour l'attribut rel http://www.w3.org/TR/html5/links.html#linkTypes
  2. attribut booléen https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes
  3. HTML5 differences from HTML4 http://www.w3.org/TR/html5-diff/
HTML5 Boiler Plate
Écran 13
  1. HTML5 Boiler Plate (h5bp) https://html5boilerplate.com/
  2. explication du gabarit HTML de h5bp https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md
  3. Initializr http://www.initializr.com/
  4. Boîte à outils d'expérience Web http://wet-boew.github.io/wet-boew/index-fr.html
Support d'HTML5
Écran 14
  1. Support tables for HTML5, CSS3 http://caniuse.com/#
  2. Platform status https://platformstatus.io/
  3. HTML5 Please http://html5please.com/
  4. Comparison or layout engines (HTML5) http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
Tableau support de l'élément datalist sur caniuse.com
Écran 15
  1. Caniuse.com http://caniuse.com/#feat=datalist
Détection avec Modernizr
Écran 17
  1. librairie JavaScript Modernizr http://www.modernizr.com/
  2. polyfill https://remysharp.com/2010/10/08/what-is-a-polyfill
  3. HTML5 Cross Browser Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Validation et analyse du HTML5
Écran 19
  1. Nu Markup Validation Service http://validator.w3.org/nu/
  2. JTidy http://jtidy.sourceforge.net/
  3. TagSoup https://github.com/orbeon/tagsoup
  4. About Validator.nu http://about.validator.nu/
  5. interview avec le concepteur de Nu MVS http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/
Attributs personnalisés : data-*
Écran 21
  1. Custom data attributes https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
Exemple d'usage d'attributs data-*
Écran 23
  1. jQuery Cycle 2 http://jquery.malsup.com/cycle2/demo/basic.php
Exercice : aller voir l'usage de data-*
Écran 24
  1. GeoCoordinates http://schema.org/GeoCoordinates
  2. configuration du carrousel de Bootstrap http://getbootstrap.com/2.3.2/javascript.html#carousel
Introduction aux formulaires bonifiés du HTML5
Écran 27
  1. Web Forms 2.0 http://www.whatwg.org/specs/web-forms/2005-09-01/
  2. Make Forms Fabulous with HTML5 http://www.html5rocks.com/en/tutorials/forms/html5forms/
Nouveaux types associés au champ input
Écran 28
  1. Liste des types associés à l'élément input https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-input-type
Nouveaux attributs associés au champ input
Écran 29
  1. Liste des attributs associés à l'élément input http://www.w3.org/TR/html5/forms.html#input-type-attr-summary
Avertissement sur les formulaires HTML5
Écran 31
  1. HTML5 inputs and attributes support http://miketaylr.com/code/input-type-attr.html
Exemple : un formulaire de réservation pour un bed & breakfast
Écran 36
  1. HTML5 inputs and attributes support http://miketaylr.com/code/input-type-attr.html
Saisir des nombres (p. 1/2)
Écran 37
  1. HTM5 input type=number and decimals in Chrome https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/
Saisir des nombres (p. 2/2)
Écran 38
  1. représentation des nombres à point flottant https://www.w3.org/TR/html5/infrastructure.html#floating-point-numbers
Nouveaux éléments dans la famille des formulaires (p. 2/2)
Écran 46
  1. usage de l'élément output https://impot.net/fr/immobilier/mutation/
JavaScript et les formulaires HTML5
Écran 47
  1. The constraint validation API http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-constraint-validation-api
Exercice : retour sur le formulaire de recherche HTML5
Écran 49
  1. Submit a Form without Refreshing page with jQuery and Ajax http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html
Contenu éditable
Écran 51
  1. Aperçu de l'attribut contenteditable en HTML5 http://www.valhalla.fr/2010/04/19/contenteditable-html5/
  2. The contenteditable attribute http://html5doctor.com/the-contenteditable-attribute/
Ressources pour nous aider
Écran 54
  1. Video for everybody http://camendesign.com/code/video_for_everybody
  2. The State Of HTML5 Video https://uxmag.com/articles/the-state-of-html5-video
  3. 5 Things You Need to Know to Start Using Video and Audio Today http://www.slideshare.net/npar007/5-things-you-need-to-know-to-start-using-ltvideo-and-ltaudio-today
Attributs pour l'élément video
Écran 56
  1. attributs pour élément video https://www.w3.org/TR/html5/semantics-embedded-content.html#the-video-element
  2. attributs pour élément audio https://www.w3.org/TR/html5/semantics-embedded-content.html#the-audio-element
  3. The crossorigin attribute: Requesting CORS access to content https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes
Attention à autoplay
Écran 57
  1. Autoplay Policy Changes pour Google Chrome https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
  2. Firefox users finally get option to block autoplay video, audio https://www.cnet.com/news/firefox-users-finally-get-option-to-block-autoplay-video-audio/
  3. Autoplay guide for media and Web Audio APIs https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
Formats audio et vidéo
Écran 58
  1. codec http://fr.wikipedia.org/wiki/Codec
Exemple d'insertion d'un clip vidéo en HTML5 sans programmation
Écran 59
  1. documentation de H.264 sur wikipedia http://en.wikipedia.org/wiki/H.264#Profiles
Idéalement : mettre faible et haute résolution
Écran 62
  1. vid.ly http://m.vid.ly/user/
  2. BrigthCove https://www.brightcove.com/en/
  3. Vidyard https://www.vidyard.com/
Prendre en charge le rendu
Écran 63
  1. VideoJS http://videojs.com
  2. MediaElementJS http://mediaelementjs.com/
  3. JW Player http://www.longtailvideo.com/jw-player/
Contrôler le rendu avec un lecteur vidéo JavaScript
Écran 64
  1. VideoJS http://videojs.com
Pour vous donner des idées : <video> + <canvas>
Écran 65
  1. <video> + <canvas> = <magic> http://www.xanthir.com/blog/b46e0
  2. liste des démos http://www.xanthir.com/demos/video/
Objet Audio
Écran 67
  1. vidéo sera ajoutée dynamiquement en JavaScript par le DOM http://stackoverflow.com/questions/11792498/how-do-i-add-new-video-entirely-from-javascript
  2. jeu Galactic Plunder en HTML5 http://dougx.net/plunder/plunder.html
API audio/vidéo pour faire nos propres contrôles
Écran 68
  1. section pour l'élément vidéo http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#playing-the-media-resource
Questionner le statut d'un clip
Écran 71
  1. readyState http://www.w3.org/TR/html5/embedded-content-0.html#ready-states
  2. networkState http://www.w3.org/TR/html5/embedded-content-0.html#network-states
  3. error http://www.w3.org/TR/html5/embedded-content-0.html#error-codes
Événements liés à la consommation de clips audio ou vidéo
Écran 72
  1. 22 événements pour l'audio et la vidéo http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#mediaevents
Exercice : ajouter un lecteur audio industriel (2/2)
Écran 75
  1. MediaElement.js http://mediaelementjs.com/
  2. Vidéo d'une utilisation de MediaElement avec sous-titrage dans une application HTML5 brûlée avec Apache Cordova https://www.youtube.com/watch?v=67De2KRvIqk
Méthodes de persistance sur le poste local (1/2)
Écran 77
  1. Cache API https://developer.mozilla.org/en-US/docs/Web/API/Cache
  2. Offline Storage for Progressive Web Apps https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
Problèmes et limitations avec les fichiers témoins
Écran 80
  1. norme séparée au W3C http://www.w3.org/TR/webstorage/
API pour la persistance
Écran 86
  1. interface Storage https://www.w3.org/TR/webstorage/#the-storage-interface
Quelques limitations de la persistance Web
Écran 90
  1. vider les cookies vide localStorage et sessionStorage dans certains navigateurs http://sharonminsuk.com/blog/2011/03/21/clearing-cache-has-no-effect-on-html5-localstorage-or-sessionstorage/
Exercice : gérer la persistance des favoris (2/2)
Écran 93
  1. carnet de route des Itinéraires musées http://itineraires.musees.qc.ca/fr/nouvelle-france/musees/ramezay
Travailler avec le gestionnaire d'événement storage
Écran 94
  1. événement storage https://www.w3.org/TR/webstorage/#the-storage-event
Références
Écran 98
  1. standard au W3C http://www.w3.org/TR/IndexedDB/
  2. IndexedDB sur MDN https://developer.mozilla.org/en-US/docs/IndexedDB
  3. IndexedDB sur MSDN http://msdn.microsoft.com/en-us/library/ie/hh673548%28v=vs.85%29.aspx
  4. IndexedDB sur MDN avec exemples https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API#Example
  5. Using IndexedDB sur MDN https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
  6. Using the HTML5 IndexedDB API sur IBM DeveloperWorks http://www.ibm.com/developerworks/library/wa-indexeddb/
  7. Creating a Notepad app with indexedDB http://www.sitepoint.com/creating-a-notepad-app-with-indexeddb/
  8. Up Close and Personal with HTML5 IndexedDB http://www.sitepoint.com/up-close-and-personal-with-html5-indexeddb/
  9. Commentaires à l'article "A Simple TODO List Using HTML5 IndexedDB" https://disqus.com/home/discussion/html5rocks/html5_rocks_a_simple_todo_list_using_html5_indexeddb/
  10. Introduction à IndexedDB - vidéo de Mike West http://mikewest.org/2010/12/intro-to-indexeddb
  11. IndexedDB - The Store in Your Browser http://msdn.microsoft.com/en-us/magazine/gg679063.aspx
Comparaison entre WebSQL et IndexedDB
Écran 99
  1. Offline Strategies for HTML5 Web Applications http://fr.slideshare.net/shochdoerfer/offline-strategies-for-html5-web-applications-confoo13
Support dans les navigateurs
Écran 100
  1. caniuse.com pour WebSQL http://caniuse.com/#feat=sql-storage
  2. caniuse.com pour IndexedDB http://caniuse.com/#feat=indexeddb
Concepts d'IndexedDB
Écran 103
  1. IDBWrapper ObjectStore Example http://jensarps.github.io/IDBWrapper/example/objectstore/
  2. Basic Concepts Behind IndexedDB https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB
Particularités de la version asynchrone d'IndexedDB
Écran 104
  1. Chrome https://developer.chrome.com/apps/offline_storage#managing_quota
  2. Firefox https://developer.mozilla.org/en-US/docs/IndexedDB#Storage_limits
Exemple d'objet pour le chapitre
Écran 106
  1. Using the HTML5 IndexedDB API sur IBM DeveloperWorks http://www.ibm.com/developerworks/library/wa-indexeddb/
Ouverture et versionnage
Écran 108
  1. IDBTransaction sur MDN https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction
Clés et valeurs
Écran 109
  1. Up Close and Personal with HTML5 IndexedDB http://www.sitepoint.com/up-close-and-personal-with-html5-indexeddb/
Création d'un magasin d'objets
Écran 110
  1. IDBDatabase.createObjectStore https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase.createObjectStore
  2. Using IndexedDB (pour la notion de key path et key generator) https://developer.mozilla.org/fr/docs/IndexedDB/Using_IndexedDB
Transactions (1 / 2)
Écran 113
  1. favoriser les chaînes sur les constantes https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction?redirectlocale=en-US&redirectslug=Web%2FAPI%2FIDBTransation
  2. "Big concepts" de la documentation IndexedDB sur MDN https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB
Transactions (2 / 2)
Écran 114
  1. "Big concepts" de la documentation IndexedDB sur MDN https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB
  2. Using IndexedDB sur MDN https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
  3. flux des opérations p/r commit, rollback http://www.kristofdegrave.be/2011/11/indexed-db-transactions.html
Méthodes pour un magasin d'objet
Écran 115
  1. IDBObjectStore sur MDN https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore
Faire des requêtes avec un curseur
Écran 118
  1. Up Close and Personal with HTML5 IndexedDB http://www.sitepoint.com/up-close-and-personal-with-html5-indexeddb/
Lecture de tous les objets
Écran 119
  1. IndexedDB cursors https://stackoverflow.com/a/28528157
Méthodes d'un curseur
Écran 120
  1. documentation IDBCursor sur MDN https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor
  2. création avec openCursor() https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore#openCursor%28%29
Filtres avec l'objet IDBKeyrange
Écran 121
  1. documentation IDBKeyRange sur MDN https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange
Utiliser une couche d'abstraction par-dessus IndexedDB
Écran 127
  1. JQuery IndexedDB Plugin http://nparashuram.com/jquery-indexeddb/
  2. Dexie.js http://dexie.org/
  3. db.js http://aaronpowell.github.io/db.js/
  4. Linq2IndexedDB http://linq2indexeddb.codeplex.com/
  5. idb https://github.com/jakearchibald/idb
  6. localForage https://localforage.github.io/localForage/
  7. HTML5 Cross Browser Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Exercice : interfacer un formulaire pour ajouter des tâches
Écran 128
  1. JavaScript avancé https://www.espacecourbeformation.com/fr/cours/javascript-avance/
  2. Working with IndexedDB https://developers.google.com/web/ilt/pwa/working-with-indexeddb
  3. IndexedDB with promises and async/await https://medium.com/@filipvitas/indexeddb-with-promises-and-async-await-3d047dddd313
Présentation de localForage
Écran 130
  1. présentation de localForage sur gitHub https://github.com/localForage/localForage/blob/master/README.md
  2. documentation de l'API localForage https://localforage.github.io/localForage/
Exemple d'utilisation de localForage : setItem()
Écran 132
  1. localforage.setItem https://localforage.github.io/localForage/#data-api-setitem
Manipuler les blobs
Écran 136
  1. Inline workers blob URLs https://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis
Téléchargement asynchrone d'une ressource avec fetch()
Écran 137
  1. https://github.com/github/fetch https://github.com/github/fetch
  2. utiliser l'API Fetch sur MDN https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch
  3. This API is so Fetching https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/
Qu'est-ce qu'un Service Worker
Écran 140
  1. standard Service Workers au W3C https://www.w3.org/TR/service-workers-1/
  2. Service Worker API sur MDN https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
  3. Using Service Workers sur MDN https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
Comparaison avec AppCache
Écran 141
  1. Service Workers replacing AppCache: a sledgehammer to crack a nut https://medium.com/@firt/service-workers-replacing-appcache-a-sledgehammer-to-crack-a-nut-5db6f473cc9b
  2. Application cache is a douchebag http://alistapart.com/article/application-cache-is-a-douchebag
Usages prévus des Services Workers
Écran 142
  1. Offline cookbook https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
Support des Service Workers
Écran 143
  1. caniuse.com https://caniuse.com/#feat=serviceworkers
  2. Is Service Worker ready? https://jakearchibald.github.io/isserviceworkerready/
Instanciation d'un Service Worker
Écran 146
  1. Service Worker Registration https://developers.google.com/web/fundamentals/primers/service-workers/registration
Scénario 1 : cacher des ressources statiques à l'installation
Écran 149
  1. ExtendableEvent https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent
  2. window.caches https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/caches
  3. API Cache https://developer.mozilla.org/en-US/docs/Web/API/Cache
Flux des événements pour la mise à jour d'un Service Worker
Écran 150
  1. Update a Service Worker https://developers.google.com/web/fundamentals/primers/service-workers/#update-a-service-worker
  2. Service Workers Primer https://developers.google.com/web/fundamentals/primers/service-workers/
Activation prématurée
Écran 152
  1. https://workbox-samples.glitch.me/examples/workbox-runtime-caching/ https://workbox-samples.glitch.me/examples/workbox-runtime-caching/
Différents scénarios de stratégies hors ligne
Écran 158
  1. Offline cookbook https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
Workbox : une couche d'abstraction pour travailler avec les SW
Écran 160
  1. Workbox https://developers.google.com/web/tools/workbox/
Présentation succincte de Workbox
Écran 161
  1. série de modules https://developers.google.com/web/tools/workbox/modules/
  2. définir des routes https://developers.google.com/web/tools/workbox/guides/route-requests
  3. stratégie de cache https://developers.google.com/web/tools/workbox/guides/route-requests#handling_a_route_with_a_workbox_strategy
  4. recettes communes https://developers.google.com/web/tools/workbox/guides/common-recipes
  5. recettes avancées https://developers.google.com/web/tools/workbox/guides/advanced-recipes
  6. module Google Analytics https://developers.google.com/web/tools/workbox/modules/workbox-google-analytics
Exemple de configuration avec Workbox
Écran 162
  1. Getting Started https://developers.google.com/web/tools/workbox/guides/get-started
Exercice supplémentaire : codelab
Écran 167
  1. Build a PWA using Workbox https://kiosk-dot-codelabs-site.appspot.com/codelabs/workbox-lab/#0
  2. différences entre la version 3 et 4 https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v3
Progressive Web Apps
Écran 169
  1. validateur de manifeste Web https://manifest-validator.appspot.com/
  2. Native Apps are Doomed https://medium.com/javascript-scene/native-apps-are-doomed-ac397148a2c0
  3. Why Native Apps Really are Doomed: Native Apps are Doomed pt 2 https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9
  4. Progressive Web Apps https://developers.google.com/web/progressive-web-apps/
  5. Progressive Web Apps on iOS are here https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
  6. Safari on iOS 14 and iPadOS 14 for PWA and Web Developers https://firt.dev/ios-14
Manifeste d'une PWA
Écran 170
  1. The Web App Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
Propriétés du manifeste d'une PWA
Écran 171
  1. Web App Manifest adresse privée
  2. Web App Manifest Generator https://app-manifest.firebaseapp.com/
Proposer d'ajouter à l'écran d'accueil
Écran 172
  1. validateur de manifeste Web https://manifest-validator.appspot.com/
Bannière d'installation
Écran 173
  1. Web App Install Banners https://developers.google.com/web/fundamentals/app-install-banners/
Pourquoi des PWA et non des apps natives?
Écran 174
  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/
Avant de continuer, parlons de quotas (p. 1/2)
Écran 176
  1. API Quota Management https://w3c.github.io/quota-api/
  2. API Storage https://storage.spec.whatwg.org/
  3. Working with quota on mobile browsers https://www.html5rocks.com/en/tutorials/offline/quota-research/
  4. Managing HTML5 Offline Storage https://developer.chrome.com/apps/offline_storage
Avant de continuer, parlons de quotas (p. 2/2)
Écran 177
  1. API Storage sur MDN https://developer.mozilla.org/en-US/docs/Web/API/Storage_API
Interface StorageManager
Écran 178
  1. interface StorageManager https://developer.mozilla.org/en-US/docs/Web/API/StorageManager
  2. Estimating Available Storage Space https://developers.google.com/web/updates/2017/08/estimating-available-storage-space
  3. Persistent Storage https://developers.google.com/web/updates/2016/06/persistent-storage
Références didactiques, articles et tutoriels
Écran 184
  1. site de référence sur WebSockets : WebSocket.org http://www.websocket.org/
  2. WebSockets : Stable and Ready for Developers http://www.sitepoint.com/websockets-stable-and-ready-for-developers/
  3. Getting started with HTML5's Web Sockets http://wickedlysmart.com/getting-started-with-html5s-web-sockets/
  4. HTML5 Web Sockets: A Quantum Leap in Scalability for the Web http://www.websocket.org/quantum.html
  5. The Definitive Guide to HTML5 WebSocket http://www.apress.com/9781430247401
  6. Vers un Web en temps réel avec les WebSockets http://www.espacecourbeformation.com/fr/articles/introduction-websockets/
Astuces pour y arriver dans le navigateur
Écran 186
  1. explication des différentes techniques http://fr.slideshare.net/velvetflair/taking-a-quantum-leap-with-html-5-websocket
WebSocket : un protocole et une interface (API)
Écran 187
  1. RFC 6455 http://tools.ietf.org/html/rfc6455
  2. spécification de l'API WebSocket http://www.w3.org/TR/websockets/
Support des WebSockets
Écran 188
  1. Socket.IO http://socket.io/
Illustrer le gain : moins de latence
Écran 192
  1. HTML5 Web Sockets: A Quantum Leap in Scalability for the Web http://www.websocket.org/quantum.html
Trafic inutile éliminé : calcul de dos d'enveloppe
Écran 195
  1. HTML5 WebSocket: A Quantum Leap in Scalability for the Web http://www.websocket.org/quantum.html
Illustrer le gain : moins de trafic
Écran 196
  1. HTML5 Web Sockets: A Quantum Leap in Scalability for the Web http://www.websocket.org/quantum.html
Décortiquer la communication : requête du client
Écran 198
  1. sécurité de l'origine (origin-based security) http://tools.ietf.org/html/rfc6454
  2. WebSockets: Stable and Ready for Developers http://www.sitepoint.com/websockets-stable-and-ready-for-developers/
Décortiquer la communication : réponse du serveur
Écran 199
  1. WebSockets: Stable and Ready for Developers http://www.sitepoint.com/websockets-stable-and-ready-for-developers/
Serveurs WebSockets
Écran 200
  1. Node.js http://nodejs.org/
  2. Socket.IO http://socket.io/
  3. ws https://github.com/einaros/ws
  4. gevent-socketio https://github.com/abourget/gevent-socketio
  5. jetty http://www.eclipse.org/jetty/
  6. Play 2.0 http://www.playframework.com/
  7. System.Web.WebSockets http://msdn.microsoft.com/en-us/library/hh160729%28v=vs.110%29.aspx
  8. Les WebSockets en pratique (juin 2012) http://blog.zenika.com/2012/06/22/Les-WebSockets-en-pratique/
Object WebSocket du HTML5
Écran 201
  1. protocoles enregistrés http://www.iana.org/assignments/websocket/websocket.xml
Méthodes de l'API WebSocket
Écran 202
  1. Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob
  2. ArrayBuffer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer
  3. Documentation Mozilla WebSocket https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
  4. Error handling best practices https://github.com/einaros/ws
Illustration de la fermeture de la connexion
Écran 207
  1. WebSockets : Stable and Ready for Developers http://www.sitepoint.com/websockets-stable-and-ready-for-developers/
Données avec protocoles connus
Écran 208
  1. HTML5 WebSocket http://refcardz.dzone.com/refcardz/html5-websocket
  2. Optimizing WebSockets Bandwidth http://buildnewgames.com/optimizing-websockets-bandwidth/
Principe de Socket.IO
Écran 211
  1. Documentation de base sur le site Socket.io pour l'utilisation l'API http://socket.io/#how-to-use
  2. documentation sur gitHub de socket.io https://github.com/socketio/socket.io/blob/master/docs/README.md
Reprises de transport de Socket.IO
Écran 212
  1. compatibilité navigateur très large http://socket.io/#browser-support
  2. ws https://github.com/einaros/ws
Redistribuer les messages reçus d'un client : côté serveur
Écran 214
  1. Documentation succincte des méthodes de Socket.IO http://socket.io/#how-to-use
WebSockets et la vraie vie : sécurité, proxy et pare-feu
Écran 220
  1. How HTML5 Web Sockets Interact With Proxy Servers http://www.infoq.com/articles/Web-Sockets-Proxy-Servers
Exemples et tutoriels d'implantations
Écran 221
  1. A simple ASP.NET echo server http://www.paulbatum.com/2011/10/getting-to-know-systemnetwebsockets.html
  2. Real-time game with Socket.IO and Node.js http://krasimirtsonev.com/blog/article/Real-time-chat-with-NodeJS-Socketio-and-ExpressJS
  3. Getting started with HTML5's Web Sockets http://www.wickedlysmart.com/getting-started-with-html5s-web-sockets/
  4. Gevent-socketio, cross-framework real-time web live demo http://pyvideo.org/video/1573/gevent-socketio-cross-framework-real-time-web-li
  5. Getting started with HTML5's Web Sockets http://wickedlysmart.com/getting-started-with-html5s-web-sockets/
Tutoriels pour glisser/déposer
Écran 224
  1. HTML5 drag and drop sur Tutorial Point http://www.tutorialspoint.com/html5/html5_drag_drop.htm
  2. HTML5 Drag and Drop http://dev.opera.com/articles/view/drag-and-drop/
  3. Native Drag and Drop http://html5doctor.com/native-drag-and-drop/
  4. Native HTML5 Drag and Drop http://www.html5rocks.com/en/tutorials/dnd/basics/
  5. Reading Local Files in JavaScript http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd
  6. Cross Browser HTML5 Drag and Drop http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
  7. The HTML5 drag and drop disaster http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
Support dans les navigateurs
Écran 225
  1. Can I use? Drag and Drop http://caniuse.com/dragndrop
Code HTML initial de l'exemple
Écran 227
  1. Native HTML5 Drag and Drop http://www.html5rocks.com/en/tutorials/dnd/basics/
Rendre un élément glissable
Écran 228
  1. attribut énuméré draggable http://www.whatwg.org/specs/web-apps/current-work/multipage/interaction.html#the-draggable-attribute
Illustrer les événements drag* (1/2)
Écran 229
  1. exemple qui utilise le glisser/déposer http://www.html5rocks.com/en/tutorials/dnd/basics/
Objet dataTransfer (2/2)
Écran 234
  1. Native HTML5 Drag and Drop http://www.html5rocks.com/en/tutorials/dnd/basics/
Exemple : Gestionnaire d'événement au début du glissement
Écran 235
  1. modèle original du glisser-déposer de Microsoft a été bonifié dans la norme HTML5 adresse privée
Exemple de code pour initialiser le traitement de fichiers
Écran 239
  1. Reading Local Files in JavaScript http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd
  2. documentation File API sur MDN https://developer.mozilla.org/en-US/docs/Web/API/File
Ce qui n'a pas été couvert (p. 1/2)
Écran 241
  1. touch events http://www.w3.org/TR/touch-events/
  2. pointer events https://www.w3.org/TR/pointerevents/
  3. notification API http://www.w3.org/TR/notifications/
  4. vibration API https://www.w3.org/TR/vibration/
  5. Web push API https://www.w3.org/TR/push-api/
  6. Media Capture API http://www.w3.org/TR/html-media-capture/
  7. WebRTC http://www.w3.org/TR/webrtc/
  8. HTML5 : API senseurs et notifications https://www.technologia.com/conception-et-programmation-web/html-et-css/html5-api-senseurs-et-notifications
Quelques frameworks HTML5
Écran 243
  1. Sencha http://www.sencha.com/products/touch/
  2. Sproutcore http://www.sproutcore.com/
  3. Gestixi, un système d'information d'entreprise en ligne https://www.gestixi.com/accueil
  4. Angular https://angular.io/
  5. React https://reactjs.org/
  6. Vue.js https://vuejs.org/
  7. Webpack https://webpack.js.org/
Exemple de comparatif natif vs HTML5 : Sencha Fastbook
Écran 244
  1. Sencha Fastbook https://vimeo.com/55486684

Tous droits réservés 2021, Espace Courbe Formation inc. —28 mars 2021 — 21:12:57