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/
Cartographier la famille (ou galaxie) HTML5
Écran 7
  1. HTML5 sur Wikipédia http://en.wikipedia.org/wiki/HTML5
Règles de syntaxe du HTML5
Écran 11
  1. écritures à la XHTML http://www.w3.org/TR/html5/the-xhtml-syntax.html
Règles de syntaxe du HTML5 (suite)
Écran 12
  1. valeurs pour l'attribut rel http://www.w3.org/TR/html5/links.html#linkTypes
  2. attribut booléen http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
  3. HTML5 differences from HTML4 http://www.w3.org/TR/html5-diff/
HTML5 Boiler Plate
Écran 14
  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
Mode de compatibilité nuisible au HTML5 dans IE
Écran 15
  1. Activating Browser Modes with Doctype https://hsivonen.fi/doctype/
  2. Specifying legacy documents modes (Internet Explorer) http://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx
Support d'HTML5
Écran 16
  1. Support tables for HTML5, CSS3 http://caniuse.com/#
  2. Platform status adresse privée
  3. HTML5 Please http://html5please.com/
  4. What's my IP? What's my browser? http://www.findmebyip.com/#target-selector
  5. grille de compatibilité CSS3 et support HTML5 http://www.findmebyip.com/litmus
  6. 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 17
  1. Caniuse.com http://caniuse.com/#feat=datalist
Détection avec Modernizr
Écran 20
  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
  4. librairie yepnope.js qui a été dépréciée https://github.com/SlexAxton/yepnope.js#deprecation-notice
Validation et analyse du HTML5
Écran 22
  1. Nu Markup Validation Service http://validator.w3.org/nu/
  2. JTidy http://jtidy.sourceforge.net/
  3. TagSoup http://ccil.org/~cowan/XML/tagsoup/
  4. Validating HTML5 in the browser http://www.456bereastreet.com/archive/201006/validating_html5_in_the_browser/
  5. Understanding HTML5 validation http://www.impressivewebs.com/understanding-html5-validation/
  6. About Validator.nu http://about.validator.nu/
  7. 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 24
  1. Custom data attributes http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data-with-the-data-attributes
  2. HTML5 Custom Data Attributes (data-*) http://html5doctor.com/html5-custom-data-attributes/
Exemple d'usage d'attributs data-*
Écran 26
  1. jQuery Cycle 2 http://jquery.malsup.com/cycle2/demo/basic.php
Exercice : aller voir l'usage de data-*
Écran 27
  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 30
  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 31
  1. Liste des types associés à l'élément input http://www.w3.org/TR/html5/forms.html#attr-input-type
Nouveaux attributs associés au champ input
Écran 32
  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 34
  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 39
  1. HTML5 inputs and attributes support http://miketaylr.com/code/input-type-attr.html
Saisir des nombres
Écran 40
  1. HTM5 input type=number and decimals in Chrome https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/
  2. représentation des nombres à point flottant https://www.w3.org/TR/html5/infrastructure.html#floating-point-numbers
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 http://www.longtailvideo.com/html5/
  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 http://www.w3.org/TR/html-markup/video.html
  2. attributs pour élément audio http://www.w3.org/TR/html-markup/audio.html
Formats vidéo
Écran 57
  1. codec http://fr.wikipedia.org/wiki/Codec
  2. Webm Project http://www.webmproject.org/
  3. article de blogue de Mozilla sur le sujet du codec H.264 de Cisco https://blog.mozilla.org/blog/2013/10/30/video-interoperability-on-the-web-gets-a-boost-from-ciscos-h-264-codec/
Recette recommandée
Écran 59
  1. HTML5 video http://en.wikipedia.org/wiki/HTML5_video
Outils pour convertir les formats
Écran 60
  1. Firefogg http://firefogg.org/
  2. HandBrake http://handbrake.fr/
  3. ffmpeg2theora http://v2v.cc/~j/ffmpeg2theora/
  4. HandBrakeCLI http://handbrake.fr/
  5. ffmpeg http://www.ffmpeg.org/
  6. vid.ly http://vid.ly/
  7. BrightCove http://www.brightcove.com/fr/
Exemple d'insertion d'un clip vidéo en HTML5 sans programmation
Écran 61
  1. documentation de H.264 sur wikipedia http://en.wikipedia.org/wiki/H.264#Profiles
Idéalement : mettre faible et haute résolution
Écran 64
  1. vid.ly http://m.vid.ly/user/
Prendre en charge le rendu
Écran 65
  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 66
  1. VideoJS http://videojs.com
Pour vous donner des idées : <video> + <canvas>
Écran 67
  1. <video> + <canvas> = <magic> http://www.xanthir.com/blog/b46e0
  2. liste des démos http://www.xanthir.com/demos/video/
Objet Audio
Écran 69
  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 70
  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 73
  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 74
  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 77
  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 PhoneGap https://www.youtube.com/watch?v=67De2KRvIqk
Méthodes de persistance sur le poste local (1/2)
Écran 79
  1. Cache API https://developer.mozilla.org/en-US/docs/Web/API/Cache
  2. Getting started with client-side storage http://thejackalofjavascript.com/getting-started-with-client-side-storage/
  3. 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 81
  1. norme séparée au W3C http://www.w3.org/TR/webstorage/
Quelques limitations de la persistance Web
Écran 91
  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 94
  1. carnet de route des Itinéraires musées http://itineraires.musees.qc.ca/fr/nouvelle-france/musees/ramezay
Références
Écran 99
  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 100
  1. Offline Strategies for HTML5 Web Applications http://fr.slideshare.net/shochdoerfer/offline-strategies-for-html5-web-applications-confoo13
Support dans les navigateurs
Écran 101
  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 104
  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 105
  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 107
  1. Using the HTML5 IndexedDB API sur IBM DeveloperWorks http://www.ibm.com/developerworks/library/wa-indexeddb/
Ouverture et versionnage
Écran 109
  1. IDBTransaction sur MDN https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction
Clés et valeurs
Écran 110
  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 111
  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 114
  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 115
  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 116
  1. IDBObjectStore sur MDN https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore
Faire des requêtes avec un curseur
Écran 119
  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 120
  1. IndexedDB cursors https://stackoverflow.com/a/28528157
Méthodes d'un curseur
Écran 121
  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 122
  1. documentation IDBKeyRange sur MDN https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange
Utiliser une couche d'abstraction par-dessus IndexedDB
Écran 128
  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 129
  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 131
  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 133
  1. localforage.setItem https://localforage.github.io/localForage/#data-api-setitem
Manipuler les blobs
Écran 137
  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 138
  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/
Comprendre une application hors ligne en HTML5
Écran 141
  1. Application cache is a douchebag http://alistapart.com/article/application-cache-is-a-douchebag
Entre deux chaises pour les applications hors ligne
Écran 142
  1. cache applicative est maintenant obsolète https://developer.mozilla.org/fr/docs/Web/HTML/Utiliser_Application_Cache
  2. en 2017 ne sont pas disponibles dans tous les navigateurs http://www.caniuse.com/#search=service%20workers
  3. Don’t Wait for ServiceWorker: Adding Offline Support with One-Line https://davidwalsh.name/dont-wait-serviceworker-adding-offline-support-oneline
Contenu du manifeste d'antémémoire (2/2)
Écran 145
  1. wildcards ne sont pas supportées http://html5doctor.com/go-offline-with-application-cache/
En ligne, hors ligne : comment savoir et réagir?
Écran 151
  1. Offline and online events https://developer.mozilla.org/en/Online_and_offline_events
Ajouter une icône d'application Web
Écran 152
  1. Specifying a Webpage Icon for Web Clip https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4
  2. How to Add Icons for iPhone, iPad & Android to Your Website http://www.kylejlarson.com/blog/adding-an-icon-for-iphone-ipad-android-to-your-website/
  3. Supported meta tags in Safari https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
  4. The Web Manifest specification http://html5doctor.com/web-manifest-specification/
  5. Web App Install Banners https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/
Qu'est-ce qu'un service worker
Écran 154
  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 155
  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
Usages prévus des services workers
Écran 156
  1. Offline cookbook https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
Support des Service Workers
Écran 157
  1. caniuse.com https://caniuse.com/#feat=serviceworkers
  2. Is Service Worker ready? https://jakearchibald.github.io/isserviceworkerready/
Instanciation d'un Service Worker
Écran 160
  1. Service Worker Registration https://developers.google.com/web/fundamentals/primers/service-workers/registration
Scénario 1 : cacher des ressources statiques à l'installation
Écran 163
  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 164
  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 165
  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 169
  1. Offline cookbook https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
Option pour travailler avec les SW : une couche d'abstraction
Écran 170
  1. Workbox https://developers.google.com/web/tools/workbox/
Présentation succincte de Workbox
Écran 171
  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
  7. Getting Started with Workbox: JavaScript Libraries for your next Progressive Web App http://bit.ly/2HJcsOQ
  8. A 5 minute intro to Workbox 3.0 https://medium.com/google-developer-experts/a-5-minute-intro-to-workbox-3-0-156803952b3e
Exemple de configuration avec Workbox
Écran 172
  1. Getting Started https://developers.google.com/web/tools/workbox/guides/get-started
Progressive Web Apps
Écran 177
  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/
Manifeste d'une PWA
Écran 178
  1. The Web App Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
Bannière d'installation
Écran 179
  1. Web App Install Banners https://developers.google.com/web/fundamentals/app-install-banners/
Avant de continuer, parlons de quotas (p. 1/2)
Écran 181
  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 182
  1. API Storage sur MDN https://developer.mozilla.org/en-US/docs/Web/API/Storage_API
Interface StorageManager
Écran 183
  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 189
  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 191
  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 192
  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 193
  1. Socket.IO http://socket.io/
Illustrer le gain : moins de latence
Écran 197
  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 200
  1. HTML5 WebSocket: A Quantum Leap in Scalability for the Web http://www.websocket.org/quantum.html
Illustrer le gain : moins de trafic
Écran 201
  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 203
  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 204
  1. WebSockets: Stable and Ready for Developers http://www.sitepoint.com/websockets-stable-and-ready-for-developers/
Serveurs WebSockets
Écran 205
  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/
  9. HTML5 WebSocket http://refcardz.dzone.com/refcardz/html5-websocket
Object WebSocket du HTML5
Écran 206
  1. protocoles enregistrés http://www.iana.org/assignments/websocket/websocket.xml
Méthodes de l'API WebSocket
Écran 207
  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 212
  1. WebSockets : Stable and Ready for Developers http://www.sitepoint.com/websockets-stable-and-ready-for-developers/
Données avec protocoles connus
Écran 213
  1. HTML5 WebSocket http://refcardz.dzone.com/refcardz/html5-websocket
  2. Optimizing WebSockets Bandwidth http://buildnewgames.com/optimizing-websockets-bandwidth/
  3. Real-time data exchange in HTML5 with WebSockets http://www.adobe.com/devnet/html5/articles/real-time-data-exchange-in-html5-with-websockets.html
Principe de Socket.IO
Écran 216
  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 217
  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 219
  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 225
  1. How HTML5 Web Sockets Interact With Proxy Servers http://www.infoq.com/articles/Web-Sockets-Proxy-Servers
Exemples et tutoriels d'implantations
Écran 226
  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 229
  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. Drag out files like gmail http://www.thecssninja.com/javascript/gmail-dragout
  8. The HTML5 drag and drop disaster http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
Support dans les navigateurs
Écran 230
  1. Can I use? Drag and Drop http://caniuse.com/dragndrop
Code HTML initial de l'exemple
Écran 232
  1. Native HTML5 Drag and Drop http://www.html5rocks.com/en/tutorials/dnd/basics/
Rendre un élément glissable
Écran 233
  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 234
  1. exemple qui utilise le glisser/déposer http://www.html5rocks.com/en/tutorials/dnd/basics/
Objet dataTransfer (2/2)
Écran 239
  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 240
  1. modèle original du glisser-déposer de Microsoft a été bonifié dans la norme HTML5 adresse privée
Glisser déposer du bureau au navigateur
Écran 243
  1. Facebook Timeline Slicer http://timelineslicer.com/
Exemple de code pour initialiser le traitement de fichiers
Écran 244
  1. Reading Local Files in JavaScript http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd
  2. documentation FileAPI http://dev.w3.org/2006/webapi/FileAPI/#dfn-file
API historique du HTML5
Écran 247
  1. API historique du HTML5 https://html.spec.whatwg.org/multipage/history.html
Support de l'API historique du HTML5
Écran 248
  1. caniuse.com https://caniuse.com/#search=pushstate
  2. The State of the HTML5 History API https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API
Possibilités en HTML5 pour gérer l'historique sur des pages avec scripts imposants
Écran 249
  1. attribut scrollRestauration https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
Ce qui n'a pas été couvert (p. 1/2)
Écran 255
  1. touch events http://www.w3.org/TR/touch-events/
  2. notifications http://www.w3.org/TR/notifications/
  3. vibration API https://www.w3.org/TR/vibration/
  4. push API https://www.w3.org/TR/push-api/
  5. Media Capture API http://www.w3.org/TR/html-media-capture/
  6. WebRTC http://www.w3.org/TR/webrtc/
  7. What's New in HTML5 Media http://html5-demos.appspot.com/static/whats-new-with-html5-media/template/index.html#1
  8. A More Awesome Web http://www.moreawesomeweb.com/#1
  9. HTML5 : API senseurs et notifications http://www.technologia.com/fr/technologies-de-linformation/developpement-web/html/html5-api-senseurs-et-notifications/
Ce qui n'a pas été couvert (p. 2/2)
Écran 256
  1. backbone.js http://backbonejs.org/
Que faire à partir de maintenant?
Écran 257
  1. jQuery mobile http://jquerymobile.com/
Quelques frameworks HTML5
Écran 258
  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. jQuery Mobile http://jquerymobile.com/
  5. Kendo UI http://www.kendoui.com/
  6. Yeoman adresse privée
  7. Best 7 HTML5 Frameworks for Mobile Apps http://www.cssreflex.com/2012/02/7-html5-frameworks-mobile-apps.html/
Exemple de comparatif natif vs HTML5 : Sencha Fastbook
Écran 259
  1. Sencha Fastbook https://vimeo.com/55486684

Tous droits réservés 2018, Espace Courbe Formation inc. —5 septembre 2018 — 14:03:27