SlideShare une entreprise Scribd logo

Advanced html5

Retrouvez notre techdays du 3 mars 2015 sur HTML5 avancés et les API Javascript. www.arrow-group.eu

1  sur  81
Télécharger pour lire hors ligne
HTML5 avancés et les API JavaScript
BY MOHAMED ELLOUZE
1
Web Workers
JAVASCRIPT API
2
3
Présentation et enjeux
 JavaScript dispose historiquement d’une limitation importante : Il est mono-thread, toute
son exécution s’effectue dans un seul et même thread. C’est plutôt ballot à l’heure des
processeurs multi-cœurs comme les Core i5/i7 proposant jusqu’à 8 cœurs logiques
Exposé du problème
 Cette limitation historique de JavaScript implique qu’un traitement important va bloquer la
fenêtre principale d’affichage (la page web en cours d’utilisation). Conséquence, la page se
fige et l’utilisateur ne peut plus interagir avec l’application. Ce dernier finit naturellement par
tuer l’onglet ou l’instance du navigateur en cours.
Solution : Les Web Workers
 Avec HTML5, de nombreuses nouvelles fonctionnalités ont été ajoutées en JavaScript. Parmi
celles-ci se trouvent les web-workers ou la possibilité d'exécuter du code en parallèle en
JavaScript.
Utilisation des Web Workers
Invoquer un worker
 Les Web Workers permettent d'exécuter du code en tâche de fond. Cela va donc vous
permettre d’exécuter des traitements sur des threads séparés vivant donc à côté de la
page principale et n’ayant pas d’impact sur ses performances d’affichage
Utilisation des Web Workers
 Comme les Web Workers vont être exécutés sur
des threads séparés, il faut que leur code soit
hébergé dans un fichier séparé de la page
principale. Ensuite, pour les appeler, on
instancie un objet de type Worker.
 Puis, on démarre le worker en lui envoyant un
premier message :
4
5
Mon premier Web Worker
 Une fois créé, un worker peut envoyer des messages à son processus parent en envoyant
des messages qui seront réceptionnés par un gestionnaire d'événement spécifié à la
création. Ces messages doivent être formés par des chaines de caractères classiques ou
via des objets JSON.
 Si vous souhaitez pouvoir recevoir des
informations du worker, instancier l'attribut
onmessage avec une fonction de gestion
d'événement.
DEMO
Browsers supports
6

Recommandé

Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java scriptArrow Group
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSABNSA - Aquitaine
 
Présentation html5
Présentation html5Présentation html5
Présentation html5Kénium
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 

Contenu connexe

Tendances

Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersFrédéric Simonet
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5Aymen Hamdouni
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsRémy Savard
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies webIrinaTsimpilova1
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
Agile Sans Frontières
Agile Sans FrontièresAgile Sans Frontières
Agile Sans FrontièresCARA_Lyon
 
Introduction aux technologies du Web (2)
Introduction aux technologies du Web (2)Introduction aux technologies du Web (2)
Introduction aux technologies du Web (2)Saïd Radhouani
 
Cours javascript
Cours javascriptCours javascript
Cours javascriptkrymo
 

Tendances (19)

Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Agile Sans Frontières
Agile Sans FrontièresAgile Sans Frontières
Agile Sans Frontières
 
.NET DotNet CF - 1
.NET DotNet CF - 1.NET DotNet CF - 1
.NET DotNet CF - 1
 
.NET DotNet CF - 2
.NET DotNet CF - 2.NET DotNet CF - 2
.NET DotNet CF - 2
 
Introduction aux technologies du Web (2)
Introduction aux technologies du Web (2)Introduction aux technologies du Web (2)
Introduction aux technologies du Web (2)
 
Cours wpf avancé
Cours wpf avancéCours wpf avancé
Cours wpf avancé
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 

En vedette (7)

INITIATION_JAVASCRIPT_NAB_2009
INITIATION_JAVASCRIPT_NAB_2009INITIATION_JAVASCRIPT_NAB_2009
INITIATION_JAVASCRIPT_NAB_2009
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Php
PhpPhp
Php
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 

Similaire à Advanced html5

les servlets-java EE
les  servlets-java EEles  servlets-java EE
les servlets-java EEYassine Badri
 
Rapport application chat
Rapport application chatRapport application chat
Rapport application chatTbatou sanae
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024YounesOuladSayad1
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Ouadie LAHDIOUI
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWinslo Nwan
 
Les socket ing1_issat
Les socket ing1_issatLes socket ing1_issat
Les socket ing1_issatsloumaallagui
 
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbWebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbHINDGUENDOUZ
 
WEB SERVICE SOAP, JAVA, XML, JAXWS
WEB SERVICE SOAP, JAVA, XML, JAXWSWEB SERVICE SOAP, JAVA, XML, JAXWS
WEB SERVICE SOAP, JAVA, XML, JAXWSLhouceine OUHAMZA
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEMarouan OMEZZINE
 
Java EE _ Servlet et vue (1).pdf
Java EE _ Servlet et vue (1).pdfJava EE _ Servlet et vue (1).pdf
Java EE _ Servlet et vue (1).pdfColombieColombie
 

Similaire à Advanced html5 (20)

les servlets-java EE
les  servlets-java EEles  servlets-java EE
les servlets-java EE
 
.NET DotNet CF - 3
.NET DotNet CF - 3.NET DotNet CF - 3
.NET DotNet CF - 3
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Rapport application chat
Rapport application chatRapport application chat
Rapport application chat
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
 
Webserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas docWebserver tomcat-jboss-jrun-jonas doc
Webserver tomcat-jboss-jrun-jonas doc
 
Les socket ing1_issat
Les socket ing1_issatLes socket ing1_issat
Les socket ing1_issat
 
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbWebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Chapitre 1.pdf
Chapitre 1.pdfChapitre 1.pdf
Chapitre 1.pdf
 
Le Réseau et Java
Le Réseau et JavaLe Réseau et Java
Le Réseau et Java
 
serveur web
serveur webserveur web
serveur web
 
APACHE TOMCAT
APACHE TOMCATAPACHE TOMCAT
APACHE TOMCAT
 
WEB SERVICE SOAP, JAVA, XML, JAXWS
WEB SERVICE SOAP, JAVA, XML, JAXWSWEB SERVICE SOAP, JAVA, XML, JAXWS
WEB SERVICE SOAP, JAVA, XML, JAXWS
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Java EE _ Servlet et vue (1).pdf
Java EE _ Servlet et vue (1).pdfJava EE _ Servlet et vue (1).pdf
Java EE _ Servlet et vue (1).pdf
 
Restful
RestfulRestful
Restful
 
Restful
RestfulRestful
Restful
 

Plus de Arrow Group

Techday Arrow Group: Java 8
Techday Arrow Group: Java 8Techday Arrow Group: Java 8
Techday Arrow Group: Java 8Arrow Group
 
Techday Arrow Group: Hadoop & le Big Data
Techday Arrow Group: Hadoop & le Big DataTechday Arrow Group: Hadoop & le Big Data
Techday Arrow Group: Hadoop & le Big DataArrow Group
 
Arrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group: Techday Big Data - Etat et Enjeu pour l'AssuranceArrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group: Techday Big Data - Etat et Enjeu pour l'AssuranceArrow Group
 
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3DTechday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3DArrow Group
 
Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group: nos événements et recrutements en février / mars 2015Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group: nos événements et recrutements en février / mars 2015Arrow Group
 
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...Arrow Group
 

Plus de Arrow Group (6)

Techday Arrow Group: Java 8
Techday Arrow Group: Java 8Techday Arrow Group: Java 8
Techday Arrow Group: Java 8
 
Techday Arrow Group: Hadoop & le Big Data
Techday Arrow Group: Hadoop & le Big DataTechday Arrow Group: Hadoop & le Big Data
Techday Arrow Group: Hadoop & le Big Data
 
Arrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group: Techday Big Data - Etat et Enjeu pour l'AssuranceArrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
Arrow Group: Techday Big Data - Etat et Enjeu pour l'Assurance
 
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3DTechday Arrow Group: Delphi Xe5 Android - une approche par la 3D
Techday Arrow Group: Delphi Xe5 Android - une approche par la 3D
 
Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group: nos événements et recrutements en février / mars 2015Arrow Group: nos événements et recrutements en février / mars 2015
Arrow Group: nos événements et recrutements en février / mars 2015
 
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
Arrow Institute: petit-déjeuner thématique autour de Bitcoin - Qu’est-ce que ...
 

Advanced html5

  • 1. HTML5 avancés et les API JavaScript BY MOHAMED ELLOUZE 1
  • 3. 3 Présentation et enjeux  JavaScript dispose historiquement d’une limitation importante : Il est mono-thread, toute son exécution s’effectue dans un seul et même thread. C’est plutôt ballot à l’heure des processeurs multi-cœurs comme les Core i5/i7 proposant jusqu’à 8 cœurs logiques Exposé du problème  Cette limitation historique de JavaScript implique qu’un traitement important va bloquer la fenêtre principale d’affichage (la page web en cours d’utilisation). Conséquence, la page se fige et l’utilisateur ne peut plus interagir avec l’application. Ce dernier finit naturellement par tuer l’onglet ou l’instance du navigateur en cours. Solution : Les Web Workers  Avec HTML5, de nombreuses nouvelles fonctionnalités ont été ajoutées en JavaScript. Parmi celles-ci se trouvent les web-workers ou la possibilité d'exécuter du code en parallèle en JavaScript.
  • 4. Utilisation des Web Workers Invoquer un worker  Les Web Workers permettent d'exécuter du code en tâche de fond. Cela va donc vous permettre d’exécuter des traitements sur des threads séparés vivant donc à côté de la page principale et n’ayant pas d’impact sur ses performances d’affichage Utilisation des Web Workers  Comme les Web Workers vont être exécutés sur des threads séparés, il faut que leur code soit hébergé dans un fichier séparé de la page principale. Ensuite, pour les appeler, on instancie un objet de type Worker.  Puis, on démarre le worker en lui envoyant un premier message : 4
  • 5. 5 Mon premier Web Worker  Une fois créé, un worker peut envoyer des messages à son processus parent en envoyant des messages qui seront réceptionnés par un gestionnaire d'événement spécifié à la création. Ces messages doivent être formés par des chaines de caractères classiques ou via des objets JSON.  Si vous souhaitez pouvoir recevoir des informations du worker, instancier l'attribut onmessage avec une fonction de gestion d'événement. DEMO
  • 8. 8 Les limitations du protocol HTTP Exposé du problème  HTTP est un protocole standard utilisé pour le Web qui fonctionne sur le modèle requête/réponse. Il répond à de nombreux besoins mais il y a une lacune majeure dans le protocole. En effet, ce dernier a été initialement conçu pour fournir des documents et des fichiers simples pour les navigateurs Web, mais pas pour une interaction complexe en temps réel. o half duplex : un client tel un navigateur Web, doit ouvrir une connexion sur un serveur, faire une demande, attendre une réponse, et fermer la connexion. La transmission de données ne peut se faire que dans une direction en même temps. o verbeux : chaque requête et réponse HTTP doit avoir un en-tête (header) contenant plus au moins d'informations qui fait parti des données échangées, ce qui augmente le trafic sur le réseau. o Il n'est pas possible d'utiliser un mode push de la part du serveur (le serveur envoie à son initiative des données au client).
  • 9. 9 Sans WebSockets  Les développeurs n’ont pas attendu les WebSockets pour contourner cette limitation. Plusieurs techniques ont été élaborées afin de permettre le push de données depuis le serveur toujours en utilisant HTTP :  Polling : le client effectue périodiquement des requêtes synchrones au serveur pour obtenir des données ou pas selon qu'il y en ait de disponible. Cette technique est simple mais peu efficace car elle nécessite beaucoup de connexions selon la fréquence utilisée par le client pour obtenir potentiellement peu de données.
  • 10. 10 Sans WebSockets  long polling : le client ouvre une connexion et envoie une requête HTTP au serveur qui ne renvoie la réponse que si un événement force l'envoi de données au client ou après un certain timeout. Le nombre de requêtes/réponses peut ainsi être réduit sauf si le nombre d'événements est très important  Streaming : le client envoie une requête au serveur qui maintient le flux de la réponse ouvert en y envoyant des données au besoin. Cette technique reposant sur HTTP, elle pose généralement des soucis avec certains éléments réseaux comme les firewalls ou les proxys
  • 11. 11 Pourquoi les WebSockets ?  Différentes techniques sont donc utiliser pour permettre à un serveur d'envoyer à son initiative des données à un navigateur sans que celui-ci l’ait explicitement demandé. Cependant, il était nécessaire de définir un standard qui permette la communication entre les clients et le serveur de manière bi-directionnelle.  En 2011, le W3C et l’IETF (Internet Engineering Task Force) ont défini le protocole Websocket. Ce dernier permet à un client Web de créer une connexion, la maintenir ouverte tant qu’il veut, et à la fois envoyer et recevoir des données en continu  Cette spécification permet donc d’ouvrir une connexion bi-directionnelle permanente entre un client et un serveur, afin de résoudre certains problèmes posés par le caractère unidirectionnel et déconnecté du protocole HTTP.
  • 12. 12 Qu’est ce que les WebSockets ? Définitition wikipédia  Le protocole WebSocket est un standard du web désignant un protocole réseau de la couche application visant à développer un canal de communication full-duplex (bidirectionnel) sur un socket TCP pour les navigateurs et les serveurs web.  Elles requièrent moins de bande passante car elles ne requièrent pas d'en-tête dans chaque message  La latence est réduite.  Elles permettent de mettre en place des solutions quasi temps réel pour recevoir des données  Les WebSockets sont plus efficaces et sont plus performantes que les autres solutions :
  • 13. 13 La connexion à une WebSocket  Lorsque le serveur répond, la connexion est établie et le client et le serveur peuvent envoyer et recevoir des messages.  Une connexion WebSocket est initialisée en utilisant le protocole HTTP : chaque connexion à une WebSocket débute par une requête HTTP qui utilise l'option upgrade dans son en-tête. Cette option permet de préciser que le client souhaite que la connexion utilise un autre protocole, en l'occurrence le protocole WebSocket.  Cette requête HTTP s'appelle handshake dans le cas de l'utilisation d'une WebSocket.
  • 14. 14 La connexion à une WebSocket GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com  L'étape de connexion (Opening Handshake) requiert un unique échange HTTP (requête/réponse) entre le client qui initie la connexion et le serveur. La requête HTTP utilise l'option Upgrade qui permet de demander le changement du protocole utilisé pour les échanges.  La réponse HTTP contient le code 101 pour indiquer que le serveur a changé de protocole pour utiliser le protocole WebSocket. HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample
  • 15. 15 2- data transfer  La fermeture de la connexion peut être à l'initiative du endpoint client ou serveur pour permettre de passer la WebSocket à l'état deconnected.  Si la connexion réussie, l'état de la WebSocket passe à l'état connected. Des données peuvent alors être échangées entre les deux endpoints de manière bi-directionnelle en mode full-duplex. NB: Le protocole HTTP n'est utilisé que pour établir la connexion d'une WebSocket : Une fois que le serveur a validé l'utilisation du protocole WebSocket, il n'est plus possible d'utiliser le protocole HTTP et tous les échanges suivants doivent utiliser le protocole WebSocket. La connexion à une WebSocket
  • 16. 16 Utilisation de l’API WebSocket  En JavaScript, il faut d'abord instancier un objet Websocket qui prend pour paramètre une URL vers un serveur websocket contenant le protocole ws:// pour une connexion simple (ou wss:// pour une connexion sécurisée.) Côté Client  L'objet envoie des données au serveur sous forme de chaîne avec la méthode send.  On pourra également envoyer les données d’une manière beaucoup plus structurées, il suffit de les convertir en chaîne de caractères pour la transmission.
  • 17. 17 Utilisation de l’API WebSocket  L’interface WebSocket comporte les attributs fonctionnels permettant de gérer les évènements associés:  Les messages envoyés par le serveur sont notifiés par l’événement onmessage contenant le message du serveur sous forme de chaîne. o onopen : ouverture d’une WebSocket o onmessage : réception d’un message o onerror : erreur(s) survenue(s) o onclose : fermeture de WebSocket  La construction de l’objet WebSocket provoquera une tentative de connexion au serveur. Si la connexion est établie l’évènement open sera levé. Si la connexion échoue alors error sera levé, ainsi que close.
  • 18. 18 Utilisation de l’API WebSocket  Il est possible de consulter l’état de la connexion à n’importe quel moment grâce à la propriété readyState. Valeurs de readyState Value Signification WebSocket.CONNECTING 0 La tentative de connexion est en cours. WebSocket.OPEN 1 La connexion est établie. WebSocket.CLOSING 2 La tentative de déconnexion est en cours. WebSocket.CLOSED 3 Le canal est fermé.
  • 19. 19 Utilisation de l’API WebSocket DEMO
  • 21. HTML5 et la Géolocalisation JAVASCRIPT API 21
  • 22. 22  Une des nouvelles fonctionnalités intéressantes que HTML 5 fournit est la capacité de géo- localiser l’utilisateur peu importe la plateforme sur laquelle l’application s’exécute. Présentation et enjeux  Dans l'espace, trois coordonnées sont nécessaires :  Latitude  Longitude  Altitude (facultative selon les besoins, la plupart des humains se déplaçant sur un même plan en deux dimensions à la surface de notre planète) De quelles informations a-t-on besoin pour se géolocaliser ? Présentation
  • 23. 23 Quels moyens pour se géolocaliser ?  Différentes techniques sont mises à contribution avec plus ou moins de précision pour obtenir les coordonnées de géolocalisation. Elles peuvent être combinées pour affiner le résultat au cours du temps Par Satellite GPS (mobile) Par triangulation GSM/3G (mobiles) Par triangulation WIFI (mobiles et bases de données adresses MAC) Par adresse IP
  • 24. 24 Obtenir la localisation d’un utilisateur Disponibilité de l’API ?  L'API repose sur l'objet geolocation membre de navigator.  Pour des raisons évidentes de confidentialité, le navigateur ne communiquera pas vos coordonnées géographiques sans votre consentement explicite. Un appel aux deux fonctions précitées provoquera nécessairement un message d'avertissement pour l'utilisateur. Confidentialité
  • 25. 25 Obtenir la localisation de l’utilisateur Obtenir la localisation d’un utilisateur  HTML 5 fournit deux fonctionnalités de géo-localisation : soit obtenir la position actuelle ou effectuer un suivi de la position dans le cas où la personne se déplace (watch).  getCurrentPosition : permettant un ciblage ponctuel  watchPosition : pour un suivi continu
  • 26. 26  La méthode getCurrentPosition() peut prendre un second paramètre le callback d’erreur. Il sera appelée dans les cas où:  L’utilisateur refuse l’autorisation d’accès à sa position  L’emplacement de l’utilisateur n’ait pas pu être déterminé  Le service de géolocalisation ne réponde pas assez vite Gestion des erreurs de localisation  Les retours d'erreurs potentiels sont très importants et méritent d'être pris en compte dans toute application web. Ils permettent de savoir si l'utilisateur a refusé d'être géolocalisé, ou si la position n'a pu être obtenue.
  • 27. 27  Enfin, le 3ème paramètre de getCurrentPosition() sert à indiquer certaines options particulières, écrites de la forme suivante : {nom:valeur, nom:valeur, …}. On peut ainsi spécifier :  L’utilisation du GPS pour obtenir des coordonnées beaucoup plus précises  Un Timeout si l’on a besoin d’une réponse avant un certain délai  La durée de vie maximale d’une coordonnée envoyée par l’utilisateur Options de localisation
  • 28. 28  Dans de nombreux cas, on aimerait mettre à jour la position de l’utilisateur si celui-ci se déplace. Avec HTML5, il suffit simplement de remplacer la méthode getCurrentPosition() par watchPosition()  Comme on veut permettre à l’utilisateur d’arrêter le suivi de ses déplacements, on ajoute un simple lien effectuant un appel à clearWatch(). Suivre les déplacements
  • 29. 29 Google Maps API  L'API Google Maps V3 est très aisée à exploiter en combinaison à la géolocalisation. Elle comprend de nombreuses fonctionnalités pour afficher une carte géographique, positionnée et équipée de marqueurs.
  • 30. 30 Demo HTML5 et la Géolocalisation
  • 32.  Grâce au HTML5, il est maintenant possible de permettre un déplacement de texte, de fichier ou d'autres éléments depuis n'importe quelle application jusqu'à votre navigateur. Rendre un élément déplaçable 32 Présentation  En temps normal, un élément d'une page Web ne peut pas être déplacé. Vous ne pourrez faire qu'une sélection du contenu.  Afin de rendre un élément déplaçable, il vous suffit d'utiliser son attribut draggable et de le mettre à true. NB : L’attribut draggable peut avoir une des trois valeurs suivantes : (true, false, auto). Dans le cas ou c’est auto (qui est la valeur par défaut), c’est le navigateur qui décidera si l’élément est déplaçable.
  • 33. Drag Events 33 Les évènements de l’objet Drag  L’API Drag&Drop fournit un ensemble d’événements permettant de mieux gérer certains details.  dragstart : se déclenche lorsque l’élément ciblé commence à être déplacé  drag : invoqué tout au long du déplacement  dragend : permet de signaler à l’objet déplacé que son déplacement est terminé Démo
  • 34. 34 Les évènements de l’objet Drop Drop Events  dragenter : se déclenche lorsqu’un objet entre dans une zone drag n’drop  dragover : se déclenche lorsqu’un objet survole une zone drag n’drop  dragleave : se déclenche lorsqu’un objet quitte la zone drag n’drop  drop: se déclenche lorsqu’un objet est laché dans une zone drag n’drop  Par défaut, le comportement des évenements dragenter et dragover veille à ce qu’on ne puisse pas déposer des objets.  Il faudra donc annuler le comportement par défaut de ses deux évenements.
  • 36. 36 Drag&Drop Initialiser un déplacement avec l'objet dataTransfer  L’objet dataTransfer permet de définir et de récupérer les informations relatives au cours d'une opération de glisser-déposer  Défini l'objet à transférer grâce à la méthode setData()  Récupérer l'objet à transférer grâce à la méthode getData()  L'objet dataTransfer a deux rôles importants lors de la fin d'un drag & drop :
  • 37. Drag&Drop  effectAllowed : Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement dragstart pour définir les effets souhaités pour la source, et dans les événements dragenter et dragover pour définir les effets souhaités pour la cible  copy: Une copie de l'élément source peut être faite à son nouvel emplacement.  move: Un élément peut être déplacé vers un nouvel emplacement.  link: Un lien peut être établi vers la source depuis le nouvel emplacement.  copyLink: Une opération copy ou link est autorisée.  copyMove: Une opération copy ou move est autorisée.  linkMove: Une opération link ou move est autorisée.  all: Toutes les opérations sont autorisées.  none: l'élément ne peut être déposé.  uninitialized: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all. Valeurs possibles : 37
  • 38.  setDragImage() est extrêmement utile pour qui souhaite personnaliser l'affichage de sa page Web ! Elle permet de définir une image qui se placera sous le curseur pendant le déplacement de l'élément concerné. Drag&Drop 38
  • 40.  Cette fonctionnalité est similaire au cookies de session HTTP mais permet de sauvegarder les données voulues dans une "base de données" coté client (c'est a dire au niveau du navigateur).  La fonctionnalité Storage est une nouveauté HTML5, Ce procédé va permettre de simplifier le processus de sauvegarde et de persistance des données.  On peut enregistrer des données même quand la connexion internet est coupé (le storage étant dans le navigateur).  On peut gérer des données par session (si vous avez 2 fenêtres sur le même site, une action sur le sessionStorage sera répercuté sur l'autre).  On peut gérer des données par page (localStorage) Intérêt du storage NB : Le storage a pour but de répondre à une des limites des cookies, c'est a dire leur taille (4 ko pour les cookies et jusqu'à 10Mo pour le storage!). 40 Web Storage
  • 41. 41  L'interface sessionStorge mémorise les données sur la durée d'une session de navigation, et sa portée est limitée à la fenêtre ou l'onglet actif. Lors de sa fermeture, les données sont effacées.  L'interface localStorage mémorise les données sans limite de durée de vie. Contrairement à sessionStorage, elles ne sont pas effacées lors de la fermeture d'un onglet ou du navigateur. La portée de localStorage est de facto plus large : il est possible de l'exploiter à travers plusieurs onglets ouverts pour le même domaine ou plusieurs fenêtres ; à partir du moment où il s'agit bien sûr du même navigateur. HTML LocalStorage sessionStorage  Web Storage met à disposition deux interfaces nommées sessionStorage et localStorage dont la seule différence concerne la persistance des données. Web Storage
  • 44. Application Web Offline HTML5  Le terme « application offline » doit être un peu nuancé et compris plutôt comme : “Des applications web qui continuent à fonctionner même quand la connexion internet se coupe”.  Qu’est ce qu’une application offline ? EXEMPLE :  Vous rédigez un mail sur votre iPhone ou votre Android alors que vous étiez en Métro ou en train sans la précieuse connexion à internet. Que se passe t-il ? Rien !!! L’application (Gmail, Safari, …) continue à fonctionner en mode « offline ». L’émail envoyé sera en attente localement puis réellement envoyé dès que vous récupérer votre connexion  On est donc face à des applications hybrides qui fonctionnent à la fois en mode offline et online DÉFINITION 44
  • 45. I- Web SQL DataBase API JAVASCRIPT API 45
  • 46. 46  L'API Web SQL permet de créer une base de donnée, ajouter une table, insérer des données, …  Avoir une base de données utilisable via le navigateur. Elle peut être accessible en mode "offline". Web SQL DataBase Ouvrir une connection Principe  Pour ouvrir une connection vers la base de données, il suffit d’exécuter le script suivant:  La fonction callBack est optionnel, on pourra par exemple l’utiliser pour changer de version
  • 47. 47  Une fois la connection établie, on utilisera le mot clé transaction pour pouvoir exécuter des requêtes SQL (création, insertion, update, …) sur notre base. Cela se fait via transaction() ou readTransaction(). Transaction  readTransaction() : pour un mode en lecture uniquement.  transaction() : pour un mode en lecture/ecriture.  Ces 2 methodes prennent les mêmes arguments
  • 48. 48 executeSql() Select  Le code ci-dessus présente 2 propriétés de l'objet rows:  item(index) : retourne l’objet de résultat de la requête à l'index  length : permet de connaître le nombre de résultat de la requête.  executeSql() permet d'exécuter une requête SQL sur notre base de donnée.
  • 49. 49 executeSql() Create Insert  rowsAffected : retourne le nombre de résultats affecté par la requête.  Dans le cas d’un INSERT, on pourra utiliser les deux propriétés suivantes :  insertId : retourne le dernier ID inséré dans la table lors d'un INSERT.  Pour ajouter une table à notre BDD, on exécute le script ci-dessous:
  • 50. 50 executeSql() Delete  Pour visualiser la base de données sous chrome, il suffit de se rendre dans les "outils de développement" dans l'onglet « Ressurces ». Visualiser sous Chrome votre Base de donnée
  • 53. 2- Indexed DataBase API JAVASCRIPT API 53
  • 54. 54 Indexed DataBase  IndexedDB est un moyen pour stocker des données dans le navigateur d'un utilisateur, de manière persistante. Ses fonctions de recherche avancées permettent de créer des applications qui fonctionnent tant connecté que déconnecté. Vue d’ensemble d’IndexedDB  IndexedDB est une alternative à l'API WebSQL Database, qui a été dépréciée par le W3C le 18 novembre 2010.  WebSQL Database est un système d'accès à une base de données relationnelle  IndexedDB est un système à table indexée.
  • 55. 55 Les concepts de Bases d’IndexedDB  Les bases d'IndexedDB stockent des paires clé-valeur. Les valeurs peuvent êtres des objets structurés, et les clés peuvent être des propriétés de ces objets. Vous pouvez créer des indexes à partir de n'importe quelle propriété des objets, pour faciliter la recherche et l'énumération ordonnée. Les concepts basiques d’IndexedDB  IndexedDB est orienté objet. IndexedDB n'est pas une base de données relationnelle, avec des tables, des colonnes et des lignes.  Avec IndexedDB on crée un espace de stockage d'objets pour un type de données particulier, et on persiste tout simplement des objets JavaScript dans cet espace.
  • 56. 56 Les concepts de Bases d’IndexedDB  IndexedDB ne s'utilise pas avec le langage SQL. On utilise des recherches sur un index pour obtenir un curseur, que l'on utilise ensuite pour parcourir l'ensemble des résultats.  IndexedDB est construit autour d'un modèle de base de données transactionnelle. Tout ce que vous faites avec IndexedDB se passe dans le contexte d'une transaction.  L'API IndexedDB est majoritairement asynchrone. L'API ne retourne aucune valeurs, vous auriez donc besoin d’une fonction de callback pour récupérer les données.
  • 57. 57 Les concepts de Bases d’IndexedDB  IndexedDB respecte la politique de sécurité utilisant l'origne (same-origin policy): vous ne pouvez pas accéder aux données de domaines différents.  L’API IndexedDB est en cours d’évolution, il faudra donc utiliser les préfixes propre à chaque navigateur au moment de l’implémentation.
  • 58. 58 IndexedDB – Creation d’une Base  Avant que nous puissions insérer des données au niveau de notre base de données , nous devons l’ouvrir en utilisant la méthode open(): onsuccess handler  L’évenement onsuccess sera déclenché quand tout s’est bien déroulé onerror handler  L’évenement onerror sera déclenché quand une erreur est générée. NB: Si jamais on aura besoin de mettre à jour, de modifier ou de supprimer notre base, on aura besoin dans ce cas d’implémenter l’événement Onupgradeneeded
  • 59. 59 Ajouter manuellement des données  Voici un exemple d’utilisation de l’événement onupgradeneeded correspondant à la création d’un objet store « techdays » qui sera ajouter à notre BDD  Une fois notre objet store crée, on pourra lui ajouter manuellement des données grâce à la méthode add().
  • 61. 3- Offline Application HTTP cache JAVASCRIPT API 61
  • 62. Application Web Offline HTML5 LE CACHE D’APPLICATION (APPCACHE):  Les applications offline utilisent « l’application cache » du navigateur qui permet :  D’utiliser une application web ou de naviguer sur un site sans connexion internet  D’améliorer la vitesse de chargement des pages puisque les fichiers sont présent en local  De réduire la charge du serveur, puisqu’en effet, il n’enverra que les fichiers qui auront changé depuis le dernier passage de l’utilisateur 62  Que le navigateur soit en ligne ou hors-ligne, il n’y a plus aucun impact sur l’affichage de la page qui vient directement du cache. NB : Le cache d’une application est limité à 5Mo
  • 63. Application Web Offline HTML5 COMPATIBILITÉ :  Les applications offline fonctionnent déjà avec tous les navigateurs sauf Internet Explorer (même IE9 ne supportera pas cette fonctionnalité non plus).  Les applications offline sont principalement destinées aux smartphones et tablettes tactiles et les navigateurs Android et iPhone supportent déjà cette fonctionnalité.  Aucun problème donc du côté de la compatibilité. 63
  • 64. Application Web Offline HTML5 PRINCIPE DE FONCTIONNEMENT  L’application cache repose principalement sur l’utilisation d’un fichier “manifest” à ajouter aux pages HTML de votre site. Celui-ci liste les URL des ressources à mettre dans le cache. Quand le navigateur charge la page pour la première fois, il va télécharger toutes les URL du manifest et les stocke dans le cache. Tous les chargements suivants se feront directement à partir du cache sans passer par le serveur.  Le navigateur va vérifier la version de son fichier manifest auprès du serveur. En cas de mise à jour, le navigateur va télécharger l’intégralité des ressources dans un nouveau cache, qui sera utilisé pour tous les chargements suivants 64
  • 65. Application Web Offline HTML5 LE FICHIER CACHE MANIFEST  Le fichier cache manifest est un simple fichier texte encodé en UTF-8 qui référencie tous les fichiers de votre application qui doivent (ou ne doivent pas) être mis en cache.  Le fichier cache manifest peut avoir n’importe quel nom ou extension :  Il doit obligatoirement commencer par la ligne CACHE MANIFEST.  On peut également ajouter des lignes de commentaires. Chaque ligne doit commencer par #. manifest.appcache 65
  • 66. Application Web Offline HTML5  Le fichier manifest peut se décomposer en trois sections :  CACHE : C’est la section par défaut, elle contient les URLs que le navigateur doit impérativement mettre en cache.  NETWORK : Liste les URLs qui doivent toujours être consultées sur le serveur. Ce sera par exemple le cas des ressources AJAX et des ressources externes (publicité, …).  FALLBACK : Cette section permet d’associer des préfixes d’URL à des ressources alternatives utilisées en cas d’indisponibilité. 66
  • 67. Application Web Offline HTML5  Le navigateur doit donc conserver en cache les ressources statiques du site (css, js, images, …) ainsi que index.html  La page online.html sera toujours consultée sur le serveur.  En cas d’indisponibilité de la page online.html ou n’importe quel autres pages HTML, le navigateur affichera la page offline.html à la place. 67
  • 68. Application Web Offline HTML5  Par défaut, seules les ressources listées dans le cache explicite sont disponibles. Par exemple : si vous oubliez de lister une image, celle-ci ne sera pas affichée dans la page. Il faut donc lister toutes les ressources, ou bien ajouter le joker ‘*’ dans la section NETWORK afin de permettre le téléchargement des ressources manquantes. REMARQUE :  Les ressources listées dans la section CACHE sont toujours prioritaires sur les autres. De ce fait, le joker n’a aucune incidence sur la mise en cache, il permet seulement d’accéder à d’autres ressources, y compris sur des domaines différents. 68
  • 69. Application Web Offline HTML5  Pour activer le cache, il va falloir declarer le MIME type du fichier manifest. Ceci se fait via l’intermédiaire du fichier de configuration. TYPE MIME DU FICHIER CACHE MANIFEST  Ainsi tous les fichiers qui ont l’extension « .appcache » ont pour type text/cache-manifest 69
  • 70. Application Web Offline HTML5  L’Application Cache sera mis à jour si : MISE À JOUR DU CACHE :  Le cache est mis à jour avec du code Javascript.  L’utilisateur vide son cache manuellement.  Le fichier manifest change.  Tiens bizarre, vous venez de modifier votre fichier index.html mais lorsque vous rechargez la page, vous ne voyez pas vos modifications ! C’est normal si vous avez mis en cache votre fichier index.html ! C’est bien là le principe du cache. Du coup si vous voulez que votre navigateur mette à jour son cache avec votre nouveau fichier, vous devez modifier le fichier cache manifest. 70
  • 71. Application Web Offline HTML5  Le commentaire version n’est pas là par hasard : le cache n’est mis à jour que quand le manifest change, avec une correspondance d’octet à octet.  Si jamais vous changer le contenu de l’image logo.png tout en gardant le même nom au niveau du header, il va falloir signaler au navigateur qu’il doit rafraichir le cache en modifiant quelque chose au niveau du header. D’où l’utilité d’avoir un numéro de version au niveau du fichier manifest. NB : 1- Si le téléchargement de l’un des fichiers échoue, alors l’ensemble du téléchargement échoue. 2- N’utilisez pas le manifest lui-même dans le fichier de cache : il vous serait alors quasiment impossible d’informer le navigateur lors de la mise à jour du manifest. 71
  • 72. Application Web Offline HTML5  Le cache ne doit jamais contenir de données confidentielles.  Les pages de login et tous services de sécurité doivent être exclus du cache  N’utilisez pas le manifest lui-même dans le fichier de cache manifest.  Versionnez le manifest avec un commentaire  Minimisez le nombre de pages référençant le manifest  Stockez uniquement les ressources statiques du site.  Les pages implicites qui déclarent le manifest sans être listées dans ce dernier y sont ajoutées et seront téléchargées elles aussi lors de la mise à jour du cache.  Pour optimiser l’utilisation du cache, il faut le considérer comme la vue statique de l’application qui évoluera au gré des changements de l’interface et non au gré du contenu. A SAVOIR : 72
  • 73. Retour d’expérience : MS70-480 CERTIFICATION MICROSOFT 73
  • 74. 74 Description Certif MS70-480 Microsoft Certification MS70-480 Description
  • 75. 75 Bien préparer votre certification Microsoft Virtual Academy Quels sites pour bien préprer sa certification
  • 76. 76 Bien préparer votre certification Training Guide Livres Exam Ref 70-480
  • 77. 77 Bien préparer votre certification Tests d’entraînemets axiommanifold.com Exam Collection
  • 78. 78 Télécharger vos Certifications Accéder à ses certifications  Vous pouvez télécharger vos certifications ainsi que vos relevés de notes sur le site de Microsoft. https://www.microsoft.com/learning/fr-fr/dashboard.aspx
  • 79. 79 La Suite … ? MCSD : Applications Web Visez l’excellence en préparant la Certification MCSD : Applications Web
  • 80. 80 NB: Merci de joindre votre CV en copie du mail. Pour ceux qui souhaitent récupérer les slides, vous pouvez m’envoyer un mail à l’adresse suivante : med_ellouze@yahoo.fr

Notes de l'éditeur

  1. Avant la version 1.1 chaque requête faite au serveur utilise une nouvelle connexion. A partir d'HTTP 1.1, il est possible d'utiliser des connexions persistantes qui permettent au client d'utiliser la même connexion pour obtenir les autres éléments de la page.
  2. Le protocole est composé de deux phases :